我的页面

li-guang

2020-12-11 88a0ab37eb40b67b2a963faf49d19aae82b4fc66

 hive-app/pages/workbench/index.vue

@@ -5,42 +5,43 @@
      <view class="status_bar"></view>
      <!-- #endif -->
      <view class="header flex align-center justify-between">
         <text class="font-18">HIVE</text>
         <text class="font-18 dark-gray">HIVE</text>
         <view>
            <text class="icon mr-15">&#xe6d2;</text>
            <text class="icon" @click.stop="isShow=!isShow">&#xe600;</text>
            <text class="icon gray iconfont iconsousuo mr-15"></text>
            <text class="icon gray iconfont iconjiahao" @click.stop="isShow=!isShow"></text>
         </view>
      </view>
      <popover class="popup-content" v-show="isShow">
         <view>
            <text class="icon mr-5">&#xe600;</text>
            <text>新增会员</text>
         <view class="triangle"></view>
         <view class="popup-item flex align-center">
            <text class="icon white iconfont iconjiahao mr-5"></text>
            <text class="white font-14 popup-content-text">新增会员</text>
         </view>
         <view class="mt-10">
            <text class="icon mr-5">&#xe60f;</text>
            <text>扫一扫</text>
         <view class="popup-item flex align-center">
            <text class="icon white iconfont iconsaomiao mr-5"></text>
            <text class="white font-14 popup-content-text">扫一扫</text>
         </view>
      </popover>
      <view class="condition flex justify-between mt-15">
      <view class="condition flex justify-between">
         <view class="flex flex-v align-center">
            <text class="font-18 white">0</text>
            <text class="font-16 white">预约</text>
            <text class="font-17 white">0</text>
            <text class="font-15 white mt-10">预约</text>
         </view>
         <view class="flex flex-v align-center">
            <text class="font-18 white">2</text>
            <text class="font-16 white">进行中</text>
            <text class="font-17 white">2</text>
            <text class="font-15 white mt-10">进行中</text>
         </view>
         <view class="flex flex-v align-center">
            <text class="font-18 white">5</text>
            <text class="font-16 white">代付款</text>
            <text class="font-17 white">5</text>
            <text class="font-15 white mt-10">代付款</text>
         </view>
         <view class="flex flex-v align-center">
            <text class="font-18 white">15</text>
            <text class="font-16 white">欠款</text>
            <text class="font-17 white">15</text>
            <text class="font-15 white mt-10">欠款</text>
         </view>
      </view>
      <view class="content-item mt-10">
         <text class="font-14 font-gray">订单</text>
         <text class="title">订单</text>
         <view class="flex align-center mt-10">
            <view class="flex flex-v align-center list-item">
               <image class="content-icon" src="../../static/images/order1.png"></image>
@@ -61,7 +62,7 @@
         </view>
      </view>
      <view class="content-item mt-10">
         <text class="font-14 font-gray">项目/服务</text>
         <text class="title">项目/服务</text>
         <view class="flex align-center mt-10">
            <view class="flex flex-v align-center list-item">
               <image class="content-icon" src="../../static/images/sever1.png"></image>
@@ -82,7 +83,7 @@
         </view>
      </view>
      <view class="content-item mt-10">
         <text class="font-14 font-gray">代办</text>
         <text class="title">代办</text>
         <view class="flex align-center mt-10">
            <view class="flex flex-v align-center list-item">
               <image class="content-icon" src="../../static/images/commission1.png"></image>
@@ -99,7 +100,7 @@
         </view>
      </view>
      <view class="content-item mt-10">
         <text class="font-14 font-gray">仓库</text>
         <text class="title">仓库</text>
         <view class="flex align-center mt-10">
            <view class="flex flex-v align-center list-item">
               <image class="content-icon" src="../../static/images/warehouse1.png"></image>
@@ -112,7 +113,7 @@
         </view>
      </view>
      <view class="content-item">
         <text class="font-14 font-gray">报表</text>
         <text class="title">报表</text>
         <view class="flex align-center mt-10">
            <view class="flex flex-v align-center list-item">
               <image class="content-icon" src="../../static/images/statement1.png"></image>
@@ -131,7 +132,7 @@
               <text class="font-12 mt-10 font-dark">产品报表</text>
            </view>
         </view>
         <view class="flex align-center mt-10">
         <view class="flex align-center mt-15">
            <view class="flex flex-v align-center list-item">
               <image class="content-icon" src="../../static/images/statement5.png"></image>
               <text class="font-12 mt-10 font-dark">库存预警</text>
@@ -170,53 +171,64 @@
</script>

<style>
   @font-face {
      font-family: texticons;
      font-weight: normal;
      font-style: normal;
      src: url('//at.alicdn.com/t/font_2263696_lohq5qfkgkq.ttf') format('truetype');
   }
   .icon {
      width: 20px;
      height: 20px;
      color: #000000;
      font-size: 18px;
      text-align: center;
      font-family: texticons;
   }
   page{
      background: #F8F8F8;
   }
   .container{
      padding: 0 10px;
   }
   .header{
      padding: 10px 5px;
      padding: 12px 5px;
   }
   .condition{
      background-color: #518EFF;
      padding: 16px 30px;
      padding: 15px 30px;
      border-radius: 4px;
   }
   .content-item{
      background: #FFFFFF;
      padding:16px;
      padding: 15px 0;
      border-radius: 4px;
      margin: 10px 0;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
   }
   .title{
      font-size: 14px;
      color: #666666;
      padding-left: 15px;
      padding-bottom: 5px;
   }
   .content-icon{
      width: 32px;
      height: 32px;
      width: 30px;
      height: 30px;
   }
   .list-item{
      width: 25%;
   }
   .popup-content{
      background: #FFFFFF;
      border: 1px solid #ABB1CC;
      padding: 10px;
      border-radius: 4px;
      position: absolute;
      right: 10px;
      top: 35px;
      right: 9px;
      top: 48px;
      padding-left: 10px;
   }
   .triangle{
      width: 0;
      height: 0;
      border-width: 0 10px 10px;
      border-style: solid;
      border-color: transparent transparent #4c4c4c;
      position: absolute;
      top:-8px;
      right: 5px;
   }
   .popup-content-text{
      width: 100%;
      border-bottom: 1px solid gray;
      padding: 10px 10px 10px 0;
   }
   .popup-content .popup-item:nth-last-of-type(1) .popup-content-text{
      border-bottom: 0;
   }
</style>