界面大模式

cuiqian2004

2025-05-23 df481aebfb7a19eea5d6c02f93c6f5776b0fdc19

 pages/index/index.vue

@@ -1,5 +1,5 @@
<template>
   <view class="uni-page-index">
   <view class="uni-page-index" :class="largeMode?'large-mode':''">
      <view class="area-list" v-if="isMobox3">
         <view class="v-area" v-for="(area,index) in data">
            <view class="area-name">{{ area.name }}</view>
@@ -33,7 +33,9 @@
</template>

<script>
   import {Base64} from '@/js/Base64.js';
   import {
      Base64
   } from '@/js/Base64.js';
   import utils from "@/js/utils.js"
   import {
      areaFunc
@@ -50,6 +52,7 @@
      },
      data() {
         return {
            largeMode: getApp().globalData.largeMode || false,
            title: 'Hello',
            data: [],
            isMobox3: getApp().globalData.isMobox3,
@@ -58,7 +61,7 @@
      onLoad(options) {
         console.log(options);
         // 获取所有AppType="MES",ClientType="2"(PDA)的引用领域功能点信息
			

         this.loadData()

      },
@@ -223,6 +226,12 @@
                     url: '../modal/3201?param=' + param + "&titlename=" + appName
                  });
               }
            } else if (defCode == '3202') {
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
                     url: '../modal/3202?param=' + param + "&titlename=" + appName
                  });
               }
            } else if (defCode == '5600') { //码盘
               if (this.isMobox3) { //Mobox3
                  uni.navigateTo({
@@ -272,39 +281,42 @@
      height: 100vh;
      background: #EAEAEA;
      display: flex;

      .area-list {
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         overflow-y: auto;
		

         .v-area {
            border-radius: 12rpx;
            margin: 10rpx ;
            margin: 10rpx;
            padding: 10rpx;
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            width:calc(100% - 40rpx);
            width: calc(100% - 40rpx);

            .area-name {
               font-size: 40rpx;
               width: 100%;
               padding:  10rpx ;
               padding: 10rpx;
            }

            .app-list {
               width: 100%;
               padding: 0;
               display: flex;
               flex-direction: row;
               flex-wrap: wrap;

               .app {
                  padding: 20rpx 25rpx 15rpx 25rpx;
                  text-align: center;
                  font-size: 14px;
                  width: 125rpx;
                  display: flex;
                  flex-direction: column;

                  .logo {
                     height: 105rpx;
                     width: 105rpx;
@@ -315,13 +327,13 @@

                     .ico {
                        color: #000000;
                        font-size: 40px;
                        line-height:105rpx;
                        line-height: 105rpx;
                        font-size: 24px;
                     }
                  }

                  .app-name {
                     padding-top:  10rpx ;
                     padding-top: 10rpx;
                  }
               }
            }
@@ -330,17 +342,6 @@
      }


      .areaList li {
         /* border: 1px solid #0062CC; */
         list-style: none;
         /* width: 120rpx; */
         display: inline-block;
         padding: 30rpx 10rpx 16rpx 10rpx;
         text-align: center;
         font-size: 14px;
         width: 140rpx;
         vertical-align: text-top;
      }

      .logo {
         height: 120rpx;
@@ -353,10 +354,31 @@
         border: 0px solid rgb(221, 221, 221);
      }

      .logo i {
         color: #000000;
         font-size: 40px;
         line-height: 120rpx;
   }

   .uni-page-index.large-mode {
      .area-name {
         font-size: 30px;
      }

      .app {
         padding: 20rpx 25rpx 15rpx 25rpx;
         width: 175rpx  !important;

         .logo {
            height: 150rpx  !important;
            width: 150rpx  !important;

            .ico {
               line-height: 150rpx  !important;
               font-size: 30px  !important;
            }
         }

         .app-name {
            padding-top: 10rpx !important;
         }
      }

   }
</style>