界面大模式

cuiqian2004

2025-05-23 df481aebfb7a19eea5d6c02f93c6f5776b0fdc19

 pages/login/set.vue

@@ -1,6 +1,6 @@
<template>
   <view class="uni-page-login-set">
      <uni-forms class="form" label-align="right" label-width="100px" :form="form">
   <view class="uni-page-login-set" :class="form.largeMode?'large-mode':''">
      <uni-forms class="form" label-align="right" label-width="150px" :form="form">
         <uni-section :title="translateSys('page.server')" type="line">
            <input type="text" class="input-wrapper" v-model="form.server"
               :placeholder="translateSys('page.input_server')">
@@ -23,12 +23,18 @@
               <input type="number" class="input-wrapper" v-model="form.mongodbSPort">
            </uni-forms-item>
         </uni-section>

         <view> {{translateSys('page.interface_large_mode')}}
            <switch :checked="form.largeMode" :style="form.largeMode? '':'transform:scale(0.7)'"
               @change="switchLargeMode" />
         </view>

         <view> {{translateSys('page.mobox3_bind_classes_when_logging_in')}}
            <switch :checked="form.bindClasses" style="transform:scale(0.7)" @change="switchBindClasses" />
            <switch :checked="form.bindClasses" :style="form.largeMode? '':'transform:scale(0.7)'"
               @change="switchBindClasses" />
         </view>
      </uni-forms>
      <button id='ok' type="default" @tap="onOk" class="btn_ok">{{translateSys("sys.ok")}}</button>

      <button class="btn_ok" type="default" @tap="onOk">{{translateSys("sys.ok")}}</button>
   </view>
</template>

@@ -45,7 +51,8 @@
               moboxSPort: "",
               dataSPort: "",
               mongodbSPort: "",
               bindClasses: false
               bindClasses: false,
               largeMode: false
            },

         }
@@ -55,10 +62,11 @@

            utils.session.setValue('server', this.form.server);
            utils.session.setValue('app_type', this.form.appType);
            utils.session.setValue('large_mode', this.form.largeMode);
            let bindInfo = utils.session.getValue('bind_classes')
            utils.session.setValue('bind_classes', {
               checked: this.form.bindClasses,
               classes: bindInfo?.classes ||""
               classes: bindInfo?.classes || ""
            });
            utils.session.setValue('mobox3_port', {
               org: this.form.orgSPort,
@@ -67,6 +75,7 @@
               mongodb: this.form.mongodbSPort
            });

            getApp().globalData.largeMode = this.form.largeMode
            const eventChannel = this.getOpenerEventChannel();
            eventChannel.emit('exitSetEvent', this.form.server);

@@ -81,6 +90,10 @@
         switchBindClasses(e) {
            this.form.bindClasses = e.detail.value
         },
         switchLargeMode(e) {
            this.form.largeMode = e.detail.value
         },

         translateSys(t) {
            if (typeof this.$t == "function") return this.$t(`${t}`)
            else return t;
@@ -92,6 +105,8 @@
         this.form.server = utils.session.getValue('server') || "";
         this.form.appType = utils.session.getValue('app_type') || "MES";
         this.form.bindClasses = utils.session.getValue('bind_classes')?.checked || false
         this.form.largeMode = utils.session.getValue('large_mode') ? true : false
         console.log(this.form.largeMode)
         const mobox3Port = utils.session.getValue('mobox3_port');
         this.form.orgSPort = mobox3Port?.org || 5101
         this.form.moboxSPort = mobox3Port?.mobox || 5102
@@ -112,16 +127,15 @@
      .form {
         padding: 10rpx 20rpx;

      }
         .input-wrapper {
            border: 1px solid #d5d5d5;
            width: calc(100% - 16rpx);
            padding: 12rpx 8rpx;
         }

      .input-wrapper {
         border: 1px solid #d5d5d5;
         width: calc(100% - 16rpx);
         padding: 12rpx 8rpx;
      }

      .uni-forms-item {
         margin: 20rpx;
         .uni-forms-item {
            margin: 20rpx;
         }
      }

      button.btn_ok {
@@ -133,5 +147,7 @@
         border: none;
         color: #fff;
      }


   }
</style>