#

whycq

2024-03-28 b5c0993eb8043882eae85ce9ab1d860ff8bebf17

 pages/home/home.vue

@@ -1,11 +1,241 @@
<template>
   <view class="">
      Home
   <view>
      <scroll-view scroll-y class="page">
         <view class="nav-list">
            <navigator hover-class='none' class="nav-li" navigateTo
            :url="'/pages/project' + item.url" 
            :class="'bg-'+item.color" 
            :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1',width: item.width}]"
            v-for="(item,index) in menu" 
            :key="index">
               <view class="nav-title">{{item.title}}</view>
               <view class="nav-name">{{item.name}}</view>
               <text :class="'cuIcon-' + item.cuIcon"></text>
            </navigator>
         </view>
         <view class="cu-tabbar-height"></view>
      </scroll-view>
   </view>
</template>

<script>
   import { mapState } from 'vuex'//引入mapState
   export default {
      data() {
         return {}
      },
      onShow() {
         console.log(this.menu);
      },
      computed: mapState({
         menu: state => state.project.menu
      }) 
   }
</script>

<style>
   @import url("@/static/css/colorUi/icon.css");
   .nav-list {
      display: flex;
      flex-wrap: wrap;
      padding: 0px 20rpx 0px;
      justify-content: space-between;
   }

   .nav-li {
      padding: 30upx;
      border-radius: 12upx;
      width: 37%;
      margin: 0 2% 40upx;
      /* background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); */
      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);
      }
   }
	
   .bg-red {
      background-color: #e54d42;
      color: #ffffff;
   }
	
   .bg-orange {
      background-color: #f37b1d;
      color: #ffffff;
   }
	
   .bg-yellow {
      background-color: #fbbd08;
      color: #333333;
   }
	
   .bg-olive {
      background-color: #8dc63f;
      color: #ffffff;
   }
	
   .bg-green {
      background-color: #39b54a;
      color: #ffffff;
   }
	
   .bg-cyan {
      background-color: #1cbbb4;
      color: #ffffff;
   }
	
   .bg-blue {
      background-color: #0081ff;
      color: #ffffff;
   }
	
   .bg-purple {
      background-color: #6739b6;
      color: #ffffff;
   }
	
   .bg-mauve {
      background-color: #9c26b0;
      color: #ffffff;
   }
	
   .bg-pink {
      background-color: #e03997;
      color: #ffffff;
   }
	
   .bg-brown {
      background-color: #a5673f;
      color: #ffffff;
   }
	
   .bg-grey {
      background-color: #8799a3;
      color: #ffffff;
   }
	
   .bg-gray {
      background-color: #f0f0f0;
      color: #333333;
   }
	
   .bg-black {
      background-color: #333333;
      color: #ffffff;
   }
	
   .bg-white {
      background-color: #ffffff;
      color: #666666;
   }
</style>