#

whycq

2023-02-13 1bea37073f305929215bf2c3f28e2263acb6fc20

 pages/index/index.vue

@@ -1,28 +1,27 @@
<template>
   <view>
      <scroll-view scroll-y>
         <view class="flex justify-end custom-position">
            <view>
               <image class="img-logo flex solid-bottom " src="../../static/zoneyung.png" mode="widthFix"></image>
            </view>
   <scroll-view scroll-y>
      <view class="flex justify-end custom-position">
         <view>
            <!-- <image class="img-logo flex solid-bottom " src="../../static/zoneyung.png" mode="widthFix"></image> -->
         </view>
         <view class="nav-list" >
            <navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
             :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index" @click="checked()">
            <view class="nav-title">{{item.title}}</view>
            <view class="nav-name">{{item.name}}</view>
            <text :class="'cuIcon-' + item.cuIcon"></text>
            </navigator>
         </view>
      </scroll-view>
   </view>
      </view>
      <view class="nav-list">
         <navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo
            :class="'bg-'+item.color" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]"
            v-for="(item,index) in elements" :key="index" @click="checked()">
               <view class="nav-title">{{item.title}}</view>
               <view class="nav-name">{{item.name}}</view>
               <text :class="'cuIcon-' + item.cuIcon"></text>
         </navigator>
      </view>
   </scroll-view>
</template>

<script>
   export default {
      data() {
         return {
            elements:[
            elements: [
               
               {
                  title: '组托入库',
@@ -31,32 +30,20 @@
                  cuIcon: 'copy'
               },
               {
                  title: '订单组托',
                  name: 'order',
                  color: 'blue',
                  cuIcon: 'goods'
               },
               {
                  title: '库存查询',
                  name: 'stockQuery',
                  color: 'blue',
                  cuIcon: 'searchlist'
               },
               {
                  title: '单据出库',
                  name: 'orderOut',
                  color: 'blue',
                  cuIcon: 'video'
               },
               {
                  title: '库位出库',
                  name: 'stoOut',
                  color: 'blue',
                  cuIcon: 'video'
               },
               {
                  title: '库存盘点',
                  name: 'stockCheck',
                  color: 'blue',
                  cuIcon: 'safe'
               },
               {
                  title: '拣料出库',
                  name: 'piking',
                  color: 'blue',
                  cuIcon: 'safe'
               },
@@ -66,15 +53,15 @@
                  color: 'grey',
                  cuIcon: 'exit'
               },
					
               ]

            ]
         }
      },
      onLoad() {

      },
      methods: {
         changeImg(){
         changeImg() {
            console.log(1)
         },
         checked() {
@@ -87,11 +74,140 @@
<style>
   @import "../../colorui/main.css";
   @import "../../colorui/icon.css";
	

   .custom-position {
      margin: 10rpx 10rpx 50rpx 0rpx;
   }

   .img-logo {
      width: 150rpx;
   }
   .nav-list {
      display: flex;
      /* flex-wrap: wrap; */
      flex-direction: column;
      padding: 0px 40upx 0px;
      justify-content: flex-start;
   }
	
   .nav-li {
      padding: 30upx;
      border-radius: 12upx;
      width: 95%;
      margin: 0 2.5% 40upx;
	
      background-size: cover;
      background-position: center;
      position: relative;
      z-index: 1;
   }
	
   .nav-li::after {
      content: "";
      position: absolute;
      z-index: -1;
      background-color: inherit;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: -10%;
      border-radius: 10upx;
      opacity: 0.2;
      transform: scale(0.9, 0.9);
   }
	
   .nav-li.cur {
      color: #fff;
      background: rgb(94, 185, 94);
      box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
   }
	
   .nav-title {
      font-size: 32upx;
      font-weight: 300;
   }
	
   .nav-title::first-letter {
      font-size: 40upx;
      margin-right: 4upx;
   }
	
   .nav-name {
      font-size: 28upx;
      text-transform: Capitalize;
      margin-top: 20upx;
      position: relative;
   }
	
   .nav-name::before {
      content: "";
      position: absolute;
      display: block;
      width: 40upx;
      height: 6upx;
      background: #fff;
      bottom: 0;
      right: 0;
      opacity: 0.5;
   }
	
   .nav-name::after {
      content: "";
      position: absolute;
      display: block;
      width: 100upx;
      height: 1px;
      background: #fff;
      bottom: 0;
      right: 40upx;
      opacity: 0.3;
   }
	
   .nav-name::first-letter {
      font-weight: bold;
      font-size: 36upx;
      margin-right: 1px;
   }
	
   .nav-li text {
      position: absolute;
      right: 30upx;
      top: 30upx;
      font-size: 52upx;
      width: 60upx;
      height: 60upx;
      text-align: center;
      line-height: 60upx;
   }
	
   .text-light {
      font-weight: 300;
   }
   @keyframes show {
      0% {
         transform: translateY(-50px);
      }
	
      60% {
         transform: translateY(40upx);
      }
	
      100% {
         transform: translateY(0px);
      }
   }
	
   @-webkit-keyframes show {
      0% {
         transform: translateY(-50px);
      }
	
      60% {
         transform: translateY(40upx);
      }
	
      100% {
         transform: translateY(0px);
      }
   }
</style>