我的页面

li-guang

2020-12-11 88a0ab37eb40b67b2a963faf49d19aae82b4fc66

 hive-app/pages/mine/index.vue

@@ -1,9 +1,178 @@
<template>
   <!-- 我的 -->
   <view class="container">
      <!-- #ifndef H5 -->
      <view class="status_bar"></view>
      <!-- #endif -->
      <view class="header">
         <view class="icon white iconfont iconshezhi right"></view>
         <view class="flex align-center">
            <image class="header-img ml-15" src="../../static/images/head-img.jpg"></image>
            <view class="flex flex-v ml-20">
               <view>
                  <text class="font-18 white mr-5">222是个帅哥</text>
                  <text class="white icon iconfont iconxiugai"></text>
               </view>
               <view class="flex mt-10">
                  <view class="mr-20">
                     <text class="white mr-5 font-14">职位:</text>
                     <text class="white font-14">靓仔</text>
                  </view>
                  <view>
                     <text class="white mr-5 font-14">工号:</text>
                     <text class="white font-14">9527</text>
                  </view>
               </view>
            </view>
         </view>
      </view>
		
      <view class="content">
         <view class="flex align-center performance">
            <image class="title-img mr-10" src="../../static/images/mine1.png"></image>
            <text class="font-18">我的业绩</text>
         </view>
         <view class="tab-box">
            <liuyuno-tabs 
               class="tab"
               :tabData="tabs" 
               :config="{
                  color: '#abb1cc',
                  activeColor: '#518EFF',
                  underLineColor: '#518EFF',
                  underLineHeight: 5,
                  fontSize: 30,
                  itemWidth: 70,
                  underLineWidth: 50,
               }"
            />
            <view class="performance-content">
               <view class="flex justify-around">
                  <view class="flex flex-v align-center performance-item">
                     <text class="font-16 red">600.00</text>
                     <text class="font-14 mt-5">总现金业绩</text>
                  </view>
                  <view class="flex flex-v align-center performance-item">
                     <text class="font-16 green">600.00</text>
                     <text class="font-14 mt-5">售卡业绩</text>
                  </view>
                  <view class="flex flex-v align-center performance-item">
                     <text class="font-16 purple">600.00</text>
                     <text class="font-14 mt-5">项目业绩</text>
                  </view>
               </view>
               <view class="flex justify-around mt-20">
                  <view class="flex flex-v align-center performance-item">
                     <text class="font-16 blueness">600.00</text>
                     <text class="font-14 mt-5">产品业绩</text>
                  </view>
                  <view class="flex flex-v align-center performance-item">
                     <text class="font-16 orange">600.00</text>
                     <text class="font-14 mt-5">余额划扣业绩</text>
                  </view>
                  <view class="flex flex-v align-center performance-item">
                     <text class="font-16 yellow">600.00</text>
                     <text class="font-14 mt-5">服务提成</text>
                  </view>
               </view>
            </view>
         </view>
         <view class="flex align-center justify-between repository mt-20">
            <view class="flex align-center">
               <image class="title-img mr-10" src="../../static/images/mine2.png"></image>
               <text>知识库</text>
            </view>
            <text class="icon iconfont iconarrow-backimg gray"></text>
         </view>
      </view>
   </view>
</template>

<script>
   import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
   export default {
       components: {
           liuyunoTabs
       },
       data() {
         return {
           tabs:[
            {
               state: 1,
               name: '今日'
            },
            {
               state: 2,
               name: '昨日'
            },
            {
               state: 3,
               name: '本月'
            },
            {
               state: 4,
               name: '上月'
            },
         ],
         }  
       },
       methods: {

       }
   }
</script>

<style>
   .status_bar{
      background: #518EFF;
      color: #FFFFFF;
   }
   .header{
      height: 100px;
      background: #518EFF;
      border-bottom-left-radius: 20px;
      border-bottom-right-radius: 20px;
      padding: 15px;
   }
   .icon {
      font-size: 18px;
      font-family: texticons;
   }
   .header-img{
      width: 64px;
      height: 64px;
      border-radius: 50%;
   }
   .content{
      padding: 0 10px;
   }
   .performance{
      padding: 0 3px;
      margin: 15px 0px 10px;
   }
   .title-img{
      width: 18px;
      height: 18px;
   }
   .tab-box{
      border: 1px solid #EDEAF4;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      padding: 10px;
   }
   .tab{
      border-bottom: 1px solid #EDEAF4;
   }
   .performance-content{
      padding: 10px 0;
   }
   .performance-item{
      width: 33.3%;
   }
   .repository{
      border: 1px solid #EDEAF4;
      border-radius: 4px;
      padding: 10px 3px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
   }
</style>