服务单修改样式

li-guang

2020-12-21 31eec8bc86e9400d88bf0115901148dddf129820

 hive-app/pages/workbench/selectService.vue

@@ -1,11 +1,182 @@
<template>
   <view>
      <text>选择套餐</text>
      <view class="header">
         <search-bar placeholder="商品名称、编号、拼音" class="ml-10 mr-10"></search-bar>
      </view>
      <view class="content">
         <view class="content-box">
            <view class="content-box-title">
               <text>项目</text>
            </view>
            <view class="flex align-center content-box-row" v-for="item in 2">
               <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
               <view class="flex flex-v ml-10 flex-1">
                  <text class="font-12">面部护理</text>
                  <text class="font-10 gray mt-5">时长: 30分钟</text>
                  <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
                  <view class="mt-5 flex align-center justify-between">
                     <text class="font-12 blue">剩余次数: 2次</text>
                     <view>
                        <text class="iconfont iconjian blue-outline-btn-circle mr-20"></text>
                        <text class="iconfont iconjia blue-btn-circle"></text>
                     </view>
                  </view>
               </view>
            </view>
         </view>
			
         <view class="content-box mt-10">
            <view class="content-box-title">
               <text>套餐</text>
            </view>
            <view class="flex flex-v content-box-row" v-for="item in 2">
               <view class="font-14 flex align-center justify-between">
                  <text>时尚补水套餐</text>
                  <text class="red">即将过期</text>
               </view>
               <view class="flex align-center mt-5">
                  <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
                  <view class="flex flex-v ml-10 flex-1">
                     <text class="font-12">面部护理</text>
                     <text class="font-10 gray mt-5">时长: 30分钟</text>
                     <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
                     <view class="mt-5 flex align-center justify-between">
                        <text class="font-12 blue">剩余次数: 2次</text>
                        <view class="flex align-center justify-end mt-10">
                           <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
                           <text>1</text>
                           <text class="iconfont iconjia blue-btn-circle ml-10"></text>
                        </view>
                     </view>
                  </view>
               </view>
               <view class="flex align-center mt-10">
                  <image class="product-img" mode="aspectFill" src="../../static/images/product.jpg"></image>
                  <view class="flex flex-v ml-10 flex-1">
                     <text class="font-12">面部护理</text>
                     <text class="font-10 gray mt-5">时长: 30分钟</text>
                     <text class="font-10 gray mt-5">有效期至: 2021-01-02</text>
                     <view class="mt-5 flex align-center justify-between">
                        <text class="font-12 blue">剩余次数: 2次</text>
                        <view class="flex align-center justify-end mt-10">
                           <text class="iconfont iconjian blue-outline-btn-circle mr-10"></text>
                           <text>1</text>
                           <text class="iconfont iconjia blue-btn-circle ml-10"></text>
                        </view>
                     </view>
                  </view>
               </view>
               <view class="font-12 mt-5">
                  <text>有效期至: 2021-01-03</text>
               </view>
            </view>
         </view>
      </view>
      <view class="shopping flex align-center justify-between">
         <view class="flex align-center">
            <view class="shopping-icon iconfont iconicongouwuche gray" @click="openShoppingCart">
               <view class="shopping-icon-num flex align-center justify-center">
                  <text class="font-10">19</text>
               </view>
            </view>
            <text class="font-14 blue ml-10">¥110.00</text>
         </view>
         <navigator url="../confirmOrder">
            <button class="blue-btn btn mr-0">提交订单</button>
         </navigator>
      </view>
      <uni-popup ref="popup" type="bottom">
         <shopping-cart></shopping-cart>
      </uni-popup>
   </view>
</template>

<script>
   import searchBar from '../../components/searchBar/index.vue';
   import uniPopup from '@/components/uni-popup/uni-popup.vue'
   import shoppingCart from './selectProduct/shoppingCart.vue'
   export default {
      components:{
         searchBar,
         uniPopup,
         shoppingCart
      },
      data(){
         return{
         }
      },
      methods:{
         openShoppingCart(){
            this.$refs.popup.open()
         }
      }
   }
</script>

<style>
   page{
      background: #F6F6F8;
   }
   .header{
      background: #FFFFFF;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      padding-bottom: 5px;
   }
   .content{
      padding: 10px 10px 65px;
   }
   .content-box{
      background: #FFFFFF;
      padding: 10px;
      border: 1px solid #EDEAF4;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
   }
   .content-box-title{
      padding: 10px 5px;
      border-bottom: 1px solid #EDEAF4;
   }
   .content-box-row{
      padding: 10px 0;
      border-bottom: 1px solid #EDEAF4;
   }
   .content-box-row:nth-last-child(1){
      border: 0;
      padding-bottom: 0;
   }
   .product-img{
      width: 80px;
      height: 80px;
      border-radius: 4px;
   }
   .shopping{
      background: #FFFFFF;
      padding: 10px 10px;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
   }
   .shopping-icon{
      font-size: 28px;
      position: relative;
   }
   .shopping-icon-num{
      width: 20px;
      height: 20px;
      background: #518EFF;
      border-radius: 50%;
      color: #FFFFFF;
      position: absolute;
      right: -10px;
      top: -10px;
   }
   .btn{
      border-radius: 20px;
      line-height: 34px;
      padding: 0 24px;
      font-size: 14px;
   }
</style>