界面大模式

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>
@@ -52,6 +52,7 @@
      },
      data() {
         return {
            largeMode: getApp().globalData.largeMode || false,
            title: 'Hello',
            data: [],
            isMobox3: getApp().globalData.isMobox3,
@@ -298,7 +299,6 @@
            width: calc(100% - 40rpx);

            .area-name {
               font-size: 40rpx;
               width: 100%;
               padding: 10rpx;
            }
@@ -313,7 +313,6 @@
               .app {
                  padding: 20rpx 25rpx 15rpx 25rpx;
                  text-align: center;
                  font-size: 14px;
                  width: 125rpx;
                  display: flex;
                  flex-direction: column;
@@ -328,8 +327,8 @@

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

@@ -343,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;
@@ -366,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>