feat(mine): 我的-静态页面

src/pages/mine/index.vue

@@ -1,76 +1,224 @@
 <template>
-  <view>
-    <u-navbar :is-back="false" title="　" :border-bottom="false">
-      <view class="u-flex u-row-right" style="width: 100%">
-        <view class="camera u-flex u-row-center">
-          <u-icon name="camera-fill" color="#000000" size="48"></u-icon>
+  <view class="container">
+    <view class="head-wrap">
+      <view class="content">
+        <view class="avatar-wrap">
+          <u-avatar src="https://avatars.githubusercontent.com/u/6481596?v=4" size="80"></u-avatar>
+        </view>
+        <view class="user-base">
+          <view class="user-nickname">用户昵称</view>
+          <view class="btn-wrap">
+            <view class="btn-content">设置</view>
+            <view class="btn-content">认证</view>
+          </view>
         </view>
       </view>
-    </u-navbar>
-
-    <view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
-      <view class="u-m-r-10">
-        <u-avatar :src="pic" size="140"></u-avatar>
-      </view>
-      <view class="u-flex-1">
-        <view class="u-font-18 u-p-b-20">uView ui</view>
-        <view class="u-font-14 u-tips-color">微信号:Tim Walker</view>
-      </view>
-      <view class="u-m-l-10 u-p-10">
-        <u-icon name="scan" color="#969799" size="28"></u-icon>
+      <view>
+        <u-grid :border="false" col="4">
+          <u-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex">
+            <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></u-icon>
+            <text class="grid-text">{{ listItem.title }}</text>
+          </u-grid-item>
+        </u-grid>
       </view>
-      <view class="u-m-l-10 u-p-10">
-        <u-icon name="arrow-right" color="#969799" size="28"></u-icon>
+      <view class="order-out-box">
+        <view class="order-inner-box">
+          <u-grid :border="false" col="4" style="background-color: #fff">
+            <u-grid-item v-for="(listItem, listIndex) in list2" :key="listIndex">
+              <u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></u-icon>
+              <text class="grid-text">{{ listItem.title }}</text>
+            </u-grid-item>
+          </u-grid>
+        </view>
       </view>
     </view>
 
-    <view class="u-m-t-20">
-      <u-cell-group>
-        <u-cell icon="rmb-circle" title="支付"></u-cell>
-      </u-cell-group>
+    <view class="income-out-box">
+      <view class="income-inner-box">
+        <view class="income-head">
+          <text class="my-income">我的收益</text>
+          <u-icon name="arrow-right"></u-icon>
+        </view>
+        <view class="income-content">
+          <u-grid :border="false" col="4">
+            <u-grid-item v-for="(listItem, listIndex) in incomeList" :key="listIndex">
+              <view class="num-box">{{ listItem.num }}元</view>
+              <view class="num-title">{{ listItem.title }}</view>
+            </u-grid-item>
+          </u-grid>
+        </view>
+      </view>
     </view>
 
-    <view class="u-m-t-20">
-      <u-cell-group>
-        <u-cell icon="star" title="收藏"></u-cell>
-        <u-cell icon="photo" title="相册"></u-cell>
-        <u-cell icon="coupon" title="卡券"></u-cell>
-        <u-cell icon="heart" title="关注"></u-cell>
-      </u-cell-group>
-    </view>
-    <view class="u-m-t-20">
-      <u-cell-group>
-        <u-cell icon="setting" title="设置"></u-cell>
-      </u-cell-group>
+    <view class="other-out-box">
+      <view class="other-inner-box">
+        <u-cell-group border="false">
+          <u-cell size="large" border="false" icon="setting-fill" title="我的团队" isLink url=""></u-cell>
+          <u-cell size="large" border="false" icon="setting-fill" title="关于我们" isLink url=""></u-cell>
+          <u-cell size="large" border="false" icon="setting-fill" title="隐私条款" isLink url=""></u-cell>
+          <u-cell size="large" border="false" icon="setting-fill" title="客服中心" isLink url=""></u-cell>
+        </u-cell-group>
+      </view>
     </view>
   </view>
 </template>
-
 <script>
 export default {
   data() {
     return {
-      pic: 'https://uviewui.com/common/logo.png',
-      show: true,
+      list1: [
+        {
+          name: 'photo',
+          title: '收藏',
+        },
+        {
+          name: 'lock',
+          title: '积分',
+        },
+        {
+          name: 'star',
+          title: '询价记录',
+        },
+        {
+          name: 'hourglass',
+          title: '优惠券',
+        },
+      ],
+      list2: [
+        {
+          name: 'photo',
+          title: '我的订单',
+        },
+        {
+          name: 'lock',
+          title: '待付款',
+        },
+        {
+          name: 'star',
+          title: '已完成',
+        },
+        {
+          name: 'hourglass',
+          title: '待评价',
+        },
+      ],
+      incomeList: [
+        {
+          num: '0.00',
+          title: '总收益',
+        },
+        {
+          num: '0.00',
+          title: '本月收益',
+        },
+        {
+          num: '0.00',
+          title: '本周收益',
+        },
+        {
+          num: '0.00',
+          title: '可提现',
+        },
+      ],
     };
   },
-  onLoad() {},
 };
 </script>
+<style lang="scss" scoped>
+.container {
+  min-height: 100vh;
+  background-color: #efefef;
+}
+.head-wrap {
+  background-color: $uni-color-primary;
+  height: 416rpx;
+
+  .content {
+    display: flex;
+    padding: 38rpx 0 0 36rpx;
+    box-sizing: border-box;
+
+    .avatar-wrap {
+      display: inline-block;
+    }
+
+    .user-base {
+      margin-left: 10rpx;
+      vertical-align: middle;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+
+      .user-nickname {
+        font-size: 40rpx;
+        color: #ffffff;
+      }
 
-<style lang="scss">
-page {
-  background-color: #ededed;
+      .btn-wrap {
+        width: 160rpx;
+        display: flex;
+        justify-content: space-between;
+
+        .btn-content {
+          font-size: 24rpx;
+          padding: 0 16rpx;
+          border-radius: 16rpx;
+          background-color: #ffffff;
+        }
+      }
+    }
+  }
+  .order-out-box {
+    margin-top: 20rpx;
+    padding: 0 16rpx;
+    box-sizing: border-box;
+    .order-inner-box {
+      padding-bottom: 20rpx;
+      background-color: $uni-bg-color;
+      border-radius: 20rpx;
+    }
+  }
 }
-.camera {
-  width: 54px;
-  height: 44px;
 
-  &:active {
-    background-color: #ededed;
+.income-out-box {
+  margin-top: 60rpx;
+  padding: 0 16rpx;
+  box-sizing: border-box;
+  .income-inner-box {
+    padding: 20rpx;
+    background-color: $uni-bg-color;
+    border-radius: 20rpx;
+    .income-head {
+      display: flex;
+      justify-content: space-between;
+      .my-income {
+        color: $uni-color-primary;
+        font-size: 32rpx;
+        font-weight: 600;
+      }
+    }
+    .income-content {
+      .num-box {
+        padding: 20rpx 0;
+        font-size: 36rpx;
+        font-weight: 600;
+        color: $uni-text-color;
+      }
+      .num-title {
+        font-size: 28rpx;
+        color: $uni-text-color-grey;
+      }
+    }
   }
 }
-.user-box {
-  background-color: #fff;
+
+.other-out-box {
+  margin-top: 60rpx;
+  padding: 0 16rpx;
+  box-sizing: border-box;
+  .other-inner-box {
+    background-color: $uni-bg-color;
+    border-radius: 20rpx;
+  }
 }
 </style>