#

whycq

2023-10-16 a8ea0a75b5353d7bb97ba7825e3db261f85bcff7

 pages/home/home.vue

@@ -1,5 +1,7 @@
<template>
   <view>
      <text>{{username}}</text>
      <text>{{age}}</text>
      <view class="z-swiper">
         <view>
            今日入库  100
@@ -15,26 +17,82 @@
            Top 2. 冻猪排
         </view>
      </view>
      <view v-for="(item,i) in dataList" :key="i">{{i}}</view>
      <view class="home-list" v-for="(item,i) in homeList" :key="i">
         <view class="list-title flex-align-center">
            <view class="list-title-tag "></view>
            <view>{{item.name}}</view>
         </view>
         <view class="list-detl">
            <view v-for="nav in item.nav">
               <view style="margin: 10px;">
                  {{nav.name}}
               </view>
            </view>
         </view>
      </view>
   </view>
</template>

<script>
   import { mapState } from 'vuex'//引入mapState
   export default {
      data() {
         return {
            dataList: [{},{},{}]
         }
      }
         return {}
      },
      onShow() {
         console.log(this.project);
      },
      computed: mapState({
          // 从state中拿到数据 箭头函数可使代码更简练
          username: state => state.username,
         age: state => state.age,
         homeList: state => state.homeList,
         project: state => state.project
      }) 
   }
</script>

<style>
   .flex-justify-center {
      display: flex;
      justify-content: center;
   }
   .flex-align-center {
      display: flex;
      align-items: center;
		
   }
   .z-swiper {
      height: 200px;
      height: 90px;
      margin: 8px;
      background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);
      border-radius: 8px;
      background-image: linear-gradient(110.6deg, rgb(179, 157, 219) 7%, rgb(150, 159, 222) 47.7%, rgb(24, 255, 255) 100.6%);
      color: #fff;
   }
   .home-list {
      display: flex;
      flex-direction: column;
      height: 90px;
      margin: 8px;
      border-radius: 8px;
      background-color: #f5f5f5;
   }
   .list-title {
      display: flex;
      height: 20px;
      margin: 10px 10px;
      /* background-color: #fff; */
   }
   .list-title-tag {
      width: 6px;
      height: 20px;
      margin: 5px 5px;
      border-radius: 8px;
      background-color: #00aeec;
		
   }
   .list-detl {
      display: flex;
      flex-direction: row;
   }
</style>