# 动态项目

whycq

2023-10-08 1895f15c4b179f6153ac0ef0faadf5d6c851aea9

 pages/home/home.vue

@@ -15,7 +15,19 @@
            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>

@@ -23,18 +35,59 @@
   export default {
      data() {
         return {
            dataList: [{},{},{}]
            homeList: [
               {name: '入库',nav:[
                  {name: '组托入库'},
                  {name: '上架'}
               ]},
               {name: '出库'},
               {name: '其他'}]
         }
      }
   }
</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>