大屏

Mr.Shi

2023-08-23 c43e9ca8e4baa3e31c1da3c086ec8f1a7d12e438

 minipro_standard/pages/workbench/workbench.vue

@@ -1,6 +1,21 @@
<template>

   <view>



   <view class="index">

      <view class="menu">

         <view class="menu_list" v-for="(row, i) in 3" :key="i">

            <view class="menu_list_head">

               <span>常用功能</span>

            </view>

            <div class="menu_list_list">

               <view class="menu_list_item" v-for="item in list" :key="item.id" @click="jump(item)">

                  <image :src="item.icon" mode="widthFix" />

                  <span>{{item.label}}</span>

               </view>

               <view class="menu_list_zw"></view>

               <view class="menu_list_zw"></view>

               <view class="menu_list_zw"></view>

            </div>

         </view>

      </view>

      <myTabbar :index="1" />

   </view>

</template>

@@ -14,7 +29,32 @@
      },

      data() {

         return {



            list: [

               {

                  icon: require('@/static/logo@2x.png'),

                  label: '测试'

               },

               {

                  icon: require('@/static/logo@2x.png'),

                  label: '测试'

               },

               {

                  icon: require('@/static/logo@2x.png'),

                  label: '测试'

               },

               {

                  icon: require('@/static/logo@2x.png'),

                  label: '测试'

               },

               {

                  icon: require('@/static/logo@2x.png'),

                  label: '测试'

               },

               {

                  icon: require('@/static/logo@2x.png'),

                  label: '测试'

               }

            ]

         };

      },

      onLoad() {
@@ -49,7 +89,88 @@
      }

   }

</script>



<style lang="scss">



<style>

   page {

      background-color: #F7F7F7 !important;

   }

</style>

<style scoped lang="scss">

.index {

   width: 100%;

   .menu {

      width: 100%;

      display: flex;

      flex-direction: column;

      .menu_list {

         display: flex;

         flex-direction: column;

         padding: 30rpx;

         box-sizing: border-box;

         margin-bottom: 20rpx;

         background: white;

         &:last-child {

            margin-bottom: 0;

         }

         .menu_list_head {

            width: 100%;

            display: flex;

            align-items: center;

            justify-content: space-between;

            margin-bottom: 40rpx;

            span {

               font-size: 32rpx;

               font-family: PingFangSC-Medium, PingFang SC;

               font-weight: 500;

               color: #222222;

            }

         }

         .menu_list_list {

            width: 100%;

            display: flex;

            align-items: center;

            flex-wrap: wrap;

            justify-content: space-between;

            .menu_list_zw {

               width: 20%;

               height: 0;

            }

            .menu_list_item {

               width: 20%;

               display: flex;

               flex-direction: column;

               align-items: center;

               justify-content: center;

               margin-top: 40rpx;

               &:nth-child(1) {

                  margin: 0;

               }

               &:nth-child(2) {

                  margin: 0;

               }

               &:nth-child(3) {

                  margin: 0;

               }

               &:nth-child(4) {

                  margin: 0;

               }

               &:nth-child(5) {

                  margin: 0;

               }

               image {

                  width: 88rpx;

                  height: 88rpx;

                  border-radius: 24rpx;

                  overflow: hidden;

               }

               span {

                  font-size: 24rpx;

                  font-weight: 400;

                  color: #333333;

                  margin-top: 16rpx;

               }

            }

         }

      }

   }

}

</style>