#

whycq

2024-03-15 d9e1e4bb971a219d0c7475508520866cb96f0935

 pages/demo/index.vue

@@ -1,14 +1,12 @@
<template>
   <view>
      <view class="home-nav">
         <view class="home-nav-item" v-for="(item,index) in navs">
            <view class="nav-icon">
               <uni-icons :type="item.icon" size="60"></uni-icons>
            </view>
            <view class="nav-text">
               {{item.text}}
            </view>
				
      <view class="two-cols home-nav-item" v-for="(item,index) in navs" @click="click(index)" :class="item.clicked" 
      @touchstart="touch(index)" @touchend="touchend(index)">
         <view class="nav-icon">
            <uni-icons :type="item.icon" size="60" color="#6c6c6c"></uni-icons>
         </view>
         <view class="nav-text">
            {{item.name}}
         </view>
      </view>
   </view>
@@ -20,42 +18,59 @@
         return {
            navs:[
               {
                  text:'入库',
                  icon:'download'   ,
                  name:'入库',
                  icon:'download',
                  clicked:''
               },
               {
                  text:'出库',
                  icon:'upload'   ,
                  name:'出库',
                  icon:'upload',
                  clicked:''
               },
               {
                  text:'盘点',
                  icon:'compose'   ,
                  name:'盘点',
                  icon:'compose',
                  clicked:''
               },
               {
                  text:'退出登录',
                  icon:'close'   ,
                  name:'退出登录',
                  icon:'close',
                  clicked:''
               },
               ]
               ],
				
         }
      },
      methods: {
			
         click(index) {
				
         },
         touch(index) {
            this.navs[index].clicked = 'grey'
            // setTimeout(()=>{
					
            // },100)
         },
         touchend(index) {
            this.navs[index].clicked = ''
         }
      }
   }
</script>

<style>
   .home-nav {
      width: 100%;
   }
   @import url("@/static/css/common.css");
   .home-nav-item {
      width: 33.33%;
      width: 44%;
      height: 0;
      padding-bottom: 33.33%;
      margin-top: 1%;
      border-bottom: 1px solid #cbcbcb;
      border-right: 1px solid #cbcbcb;
      padding-bottom: 50%;
      margin-left: 4%;
      margin-top: 5%;
      display: inline-block;
      box-shadow:  0 0 2px #dcdcdc;
      /* border: 1px solid #dcdcdc;
      border-right: 1px solid #dcdcdc;
      border-left: 1px solid #dcdcdc; */
   }
   .home-nav-item:first-child {
      
@@ -71,6 +86,10 @@
      width: 100%;
      height: 0;
      margin-bottom: 20%;
      font-size: 32rpx;
      text-align: center;
   }
   .grey {
      background-color: #dcdcdc;
   }
</style>