作者 燕成杰

我的页面 + 提现40%

1 -<template> 1 +<template>
  2 + <view class="">
  3 + <view class="absTop"></view>
  4 + <view class="mainBox">
  5 + <view class="exit flexA">
  6 + <image src="/static/exit.png" mode=""></image>
  7 + 退出登录
  8 + </view>
  9 + <view class="topInfo flexA">
  10 + <image src="/static/logo.png" mode=""></image>
  11 + <view class="right">
  12 + <view class="">张小萌</view>
  13 + <view class="">15664000180</view>
  14 + </view>
  15 + </view>
  16 + <view class="money">
  17 + <view class="item">
  18 + <view class="qian"><text style="font-size: 32rpx;">¥</text>600</view>
  19 + <view class="yue">账户余额</view>
  20 + <view class="tixian flexC" @click="totackMoney(1)">提现</view>
  21 + </view>
  22 + <view class="item">
  23 + <view class="qian"><text style="font-size: 32rpx;">¥</text>600</view>
  24 + <view class="yue">保证金</view>
  25 + <view class="tixian flexC" @click="totackMoney(2)">提现</view>
  26 + </view>
  27 + <view class="item">
  28 + <image src="/static/bill.png" mode=""></image>
  29 + <view class="tixian flexC">提现</view>
  30 + </view>
  31 + </view>
  32 + </view>
  33 + <view style="height: 462rpx;"></view>
  34 + <view class="cenBox">
  35 + <view class="item">
  36 + <image src="/static/center1.png" mode=""></image>
  37 + 我买入的
  38 + </view>
  39 + <view class="item">
  40 + <image src="/static/center2.png" mode=""></image>
  41 + 我卖出的
  42 + </view>
  43 + <view class="item">
  44 + <image src="/static/center3.png" mode=""></image>
  45 + 我的发布
  46 + </view>
  47 + <view class="item">
  48 + <image src="/static/center4.png" mode=""></image>
  49 + 我的收藏
  50 + </view>
  51 + </view>
  52 + <view class="botBox">
  53 + <view class="title">更多服务</view>
  54 + <view class="group">
  55 + <view class="item" v-for="(item,idx) in serviceList" :key="idx">
  56 + <image :src="`/static/bot${idx+1}.png`" mode=""></image>
  57 + 我买入的
  58 + </view>
  59 + </view>
  60 + </view>
  61 + <Botton></Botton>
  62 + <!-- <u-modal :show="showCancel" @confirm="confirmCancel" @cancel="showCancel=false" content='您确定要退出登录吗' -->
  63 + </view>
2 </template> 64 </template>
3 65
4 -<script> 66 +<script>
  67 + import Botton from "@/components/Botton.vue"
  68 + export default {
  69 + components: {
  70 + Botton
  71 + },
  72 + data() {
  73 + return {
  74 + serviceList : [
  75 + {name:'联系客服'},
  76 + {name:'品牌入驻'},
  77 + {name:'意见反馈'},
  78 + {name:'常见问题'},
  79 + {name:'我的任务'},
  80 + {name:'我的点赞'},
  81 + {name:'历史记录'},
  82 + {name:'常用地址'},
  83 + ]
  84 + }
  85 + },
  86 + methods: {
  87 + totackMoney(type) {
  88 + uni.navigateTo({
  89 + url:'/pages/mine/withdrawal?type='+type
  90 + })
  91 + }
  92 + },
  93 + }
5 </script> 94 </script>
6 95
7 -<style> 96 +<style lang="less">
  97 + page {
  98 + background: rgba(246,246,246,1);
  99 + }
  100 + .absTop {
  101 + position: absolute;
  102 + left: 0;
  103 + top: 0;
  104 + width: 100%;
  105 + height: 306rpx;
  106 + opacity: 1;
  107 + background: linear-gradient(180deg, rgba(255,249,221,1) 0%, rgba(255,249,221,0) 100%);
  108 + z-index: 0;
  109 + }
  110 + .mainBox {
  111 + position: absolute;
  112 + left: 0;
  113 + top: 0;
  114 + padding: 28rpx 32rpx;
  115 + box-sizing: border-box;
  116 + .exit {
  117 + justify-content: flex-end;
  118 + image {
  119 + width: 40rpx;
  120 + height: 40rpx;
  121 + }
  122 + color: rgba(0,0,0,1);
  123 + font-size: 24rpx;
  124 + font-weight: 400;
  125 + }
  126 + .topInfo {
  127 + image {
  128 + margin-right: 24rpx;
  129 + width: 108rpx;
  130 + height: 108rpx;
  131 + border-radius: 50%;
  132 + }
  133 + view:nth-child(1){
  134 + margin: 8rpx 0;
  135 + font-size: 32rpx;
  136 + font-weight: 700;
  137 + }
  138 + view:nth-child(2){
  139 + color: rgba(0,0,0,0.9);
  140 + font-size: 28rpx;
  141 + }
  142 + }
  143 + .money {
  144 + display: flex;
  145 + justify-content: space-around;
  146 + margin: 32rpx auto 24rpx;
  147 + width: 702rpx;
  148 + height: 250rpx;
  149 + border-radius: 24rpx;
  150 + opacity: 1;
  151 + background: rgba(255,255,255,1);
  152 + .item {
  153 + padding: 32rpx 0;
  154 + width: 144rpx;
  155 + position: relative;
  156 + image {
  157 + width: 80.74rpx;
  158 + height: 75.09rpx;
  159 + }
  160 + display: flex;
  161 + flex-direction: column;
  162 + align-items: center;
  163 + .qian {
  164 + color: rgba(248,83,23,1);
  165 + font-size: 44rpx;
  166 + }
  167 + .yue {
  168 + margin-top: 18rpx;
  169 + color: rgba(0,0,0,0.9);
  170 + font-size: 24rpx;
  171 + }
  172 + .tixian {
  173 + position: absolute;
  174 + left: 0;
  175 + bottom: 32rpx;
  176 + width: 144rpx;
  177 + height: 56rpx;
  178 + border-radius: 50rpx;
  179 + opacity: 1;
  180 + background: rgba(254,208,0,1);
  181 + color: rgba(0,0,0,0.9);
  182 + font-size: 24rpx;
  183 + font-weight: 700;
  184 + }
  185 + }
  186 + }
  187 + }
  188 + .cenBox {
  189 + display: flex;
  190 + justify-content: space-evenly;
  191 + align-items: center;
  192 + margin: 24rpx auto 24rpx;
  193 + width: 702rpx;
  194 + height: 184rpx;
  195 + border-radius: 24rpx;
  196 + background: rgba(255,255,255,1);
  197 + .item {
  198 + display: flex;
  199 + align-items: center;
  200 + flex-direction: column;
  201 + image {
  202 + width: 64rpx;
  203 + height: 64rpx;
  204 + margin-bottom: 16rpx;
  205 + }
  206 + color: rgba(100,101,102,1);
  207 + font-size: 26rpx;
  208 + }
  209 + }
  210 + .botBox {
  211 + margin: 0 auto;
  212 + padding: 32rpx 0;
  213 + box-sizing: border-box;
  214 + width: 702rpx;
  215 + height: 464rpx;
  216 + border-radius: 24rpx;
  217 + opacity: 1;
  218 + background: rgba(255,255,255,1);
  219 + .group {
  220 + display: flex;
  221 + align-items: center;
  222 + flex-wrap: wrap;
  223 + .item {
  224 + width: 176rpx;
  225 + height: 184rpx;
  226 + display: flex;
  227 + align-items: center;
  228 + flex-direction: column;
  229 + }
  230 + image {
  231 + width: 64rpx;
  232 + height: 64rpx;
  233 + margin-bottom: 16rpx;
  234 + }
  235 + color: rgba(100,101,102,1);
  236 + font-size: 26rpx;
  237 + }
  238 + .title {
  239 + margin: 0 0 56rpx 32rpx;
  240 + color: rgba(50,50,51,1);
  241 + font-size: 28rpx;
  242 + font-weight: 700;
  243 + }
  244 + }
8 </style> 245 </style>
1 -<template> 1 +<template>
  2 + <view class="">
  3 + <image class="bg" src="/static/takeMoneyBg.png" mode=""></image>
  4 + <view class="top">
  5 + <view >账户余额:</view>
  6 + <view > <text style="32rpx">¥</text> 600.00</view>
  7 + </view>
  8 + <view class="center">
  9 + <view class="title">提现金额</view>
  10 + <view class="inputPrice">
  11 + <view class="">
  12 + ¥<input type="text" value="" />
  13 + </view>
  14 + <view class="right">全部提现</view>
  15 + </view>
  16 + <view class="title" style="margin-top: 30rpx;">提现方式</view>
  17 + </view>
  18 + </view>
2 </template> 19 </template>
3 20
4 <script> 21 <script>
5 </script> 22 </script>
6 23
7 -<style> 24 +<style lang="less">
  25 + page {
  26 + background: #f6f6f6;
  27 + }
  28 + .bg {
  29 + overflow: hidden;
  30 + position: absolute;
  31 + left: 0;
  32 + top: 0;
  33 + width: 100%;
  34 + height: 366rpx;
  35 + }
  36 + .top {
  37 + position: absolute;
  38 + left: 32rpx;
  39 + top: 64rpx;
  40 + view:nth-child(1) {
  41 + color: rgba(0,0,0,0.4);
  42 + font-size: 28rpx;
  43 + }
  44 + view:nth-child(2) {
  45 + color: rgba(0,0,0,0.9);
  46 + font-size: 64rpx;
  47 + font-weight: 700;
  48 + }
  49 + }
  50 + .center {
  51 + position: absolute;
  52 + width: 686rpx;
  53 + left: 50%;
  54 + top: 220rpx;
  55 + border-radius: 24rpx;
  56 + padding: 40rpx 32rpx;
  57 + transform: translateX(-50%);
  58 + background: #fff;
  59 + box-sizing: border-box;
  60 + .title {
  61 + font-weight: 700;
  62 + margin-bottom: 32rpx;
  63 + font-weight: 700;
  64 + }
  65 + .inputPrice {
  66 + display: flex;
  67 + justify-content: space-between;
  68 + align-items: center;
  69 + view {
  70 + font-weight: 700;
  71 + display: flex;
  72 + align-items: center;
  73 + font-size: 52rpx;
  74 + input {
  75 + margin-left: 20rpx;
  76 + font-weight: 400;
  77 + }
  78 + }
  79 + .right {
  80 + color: rgba(33,83,212,1);
  81 + font-size: 28rpx;
  82 + font-weight: 400;
  83 + }
  84 + }
  85 + }
8 </style> 86 </style>