弹出框组件

li-guang

2020-12-11 21228216883890194984ef5e906706d4285bf90e

 hive-app/pages/workbench/index.vue

@@ -7,11 +7,21 @@
      <view class="header flex align-center justify-between">
         <text class="font-18">HIVE</text>
         <view>
            <image class="header-icon mr-15" src="../../static/images/search.png"></image>
            <image class="header-icon" src="../../static/images/add.png"></image>
            <text class="icon mr-15">&#xe6d2;</text>
            <text class="icon" @click.stop="isShow=!isShow">&#xe600;</text>
         </view>
         <view class="popup-content" v-show="isShow">
            <view>
               <text class="icon mr-5">&#xe600;</text>
               <text>新增会员</text>
            </view>
            <view class="mt-10">
               <text class="icon mr-5">&#xe60f;</text>
               <text>扫一扫</text>
         </view>
      </view>
      <view class="status-bar flex justify-between mt-15">
      </view>
      <view class="condition flex justify-between mt-15">
         <view class="flex flex-v align-center">
            <text class="font-18 white">0</text>
            <text class="font-16 white">预约</text>
@@ -136,23 +146,49 @@
</template>

<script>
   export default{
      data(){
         return{
            isShow:false
         }
      },
      onLoad() {
         document.addEventListener('click', () => {
            this.isShow = false
         }, false)
      },
      methods:{
         appear(){
				
         }
      }
   }
</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;
      text-align: center;
      font-family: texticons;
   }
   page{
      background: #F8F8F8;
   }
   .container{
      padding: 0 8px;
      padding: 0 10px;
   }
   .header{
      padding: 10px 5px;
   }
   .header-icon{
      width: 20px;
      height: 20px;
   }
   .status-bar{
   .condition{
      background-color: #518EFF;
      padding: 16px 30px;
      border-radius: 4px;
@@ -170,4 +206,13 @@
   .list-item{
      width: 25%;
   }
   .popup-content{
      background: #FFFFFF;
      border: 1px solid #ABB1CC;
      padding: 10px;
      border-radius: 4px;
      position: absolute;
      right: 10px;
      top: 35px;
   }
</style>