src/assets/styles/login.scss

@@ -16,7 +16,7 @@ $logoWidth: 417px;
 $logoHeight: 64px;
 // $logoImage: '../assets/logo/login-logo_bak.png';
 // container-content
-$contentWidth: round($W / $H * 70) * 1vw;
+$contentWidth: round($W / $H * 80) * 1vw;
 $contentHeight: round($picH / $W * 110) / 100 * ($contentWidth / 1.05);
 // $contentWidth: round($W / $H * 100) * 1vw;
 // $contentHeight: round($picH / $W * 100) / 100 * ($contentWidth / 1);
@@ -54,7 +54,7 @@ $buttonHeight: $buttonH * 1px;
   width: inherit;
   height: inherit;
   min-width: 1080px;
-  min-height: 920px;
+  min-height: 720px;
   background-color: $containerBgColor;
   //background-image: url($containerBgImage);
   background-size: cover;

src/views/components/login/topMenu.vue

@@ -2,23 +2,23 @@
   <div class="topMenu">
     <div class="topLogo">
       <img
-        src="@/assets/images/new_text_log.png"
-        style="width: 100; height: 100%"
+          src="@/assets/images/new_text_log.png"
+          style="width: 100%; height: 100%"
       />
     </div>
     <div class="menuSty">
       <el-dropdown
-        v-for="(item, index) in menuList"
-        :key="index"
-        style="margin-right: 40px"
+          v-for="(item,index1) in menuList"
+          :key="index1"
+          style="margin-right: 40px"
       >
         <span class="el-dropdown-link">
-          {{ item.menuName }}<i class="el-icon-arrow-down el-icon--right"></i>
+          {{ item.name }}<i class="el-icon-arrow-down el-icon--right"></i>
         </span>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item v-for="(it, id) in item.childMenu" :key="id">{{
-            it.cName
-          }}</el-dropdown-item>
+          <el-dropdown-item v-for="(it,index2) in item.data" :key="index2">
+            {{ it.name }}
+          </el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -28,78 +28,111 @@
         0513-88888888
       </span>
       <el-button
-        type="primary"
-        class="btnSty"
-        @click="toRegister()"
-        v-if="methodType === 1"
-        >注册</el-button
+          type="primary"
+          class="btnSty"
+          @click="toRegister()"
+          v-if="methodType === 1"
+      >注册
+      </el-button
       >
       <el-button
-        type="primary"
-        class="btnSty"
-        @click="toLogin()"
-        v-if="methodType === 2"
-        >登录</el-button
+          type="primary"
+          class="btnSty"
+          @click="toLogin()"
+          v-if="methodType === 2"
+      >登录
+      </el-button
       >
     </div>
   </div>
 </template>
 
 <script>
+import { getLoginPagePopularizeModuleConfigPage } from '@/api/supplier/loginPagePopularizeModuleConfig'
+import { getConfigData } from '@/api/infra/config'
+
 export default {
-  name: "topMenu",
+  name: 'topMenu',
   props: {
     methodType: {
       type: Number,
-      default: 2,
-    },
+      default: 2
+    }
   },
   data() {
     return {
       menuList: [
         {
-          menuName: "行业解决方案",
-          childMenu: [
-            { cName: "行业解决方案1" },
-            { cName: "行业解决方案2" },
-            { cName: "行业解决方案3" },
-          ],
+          name: '行业解决方案',
+          data: [
+            { name: '行业解决方案1' },
+            { name: '行业解决方案2' },
+            { name: '行业解决方案3' }
+          ]
         },
         {
-          menuName: "行业标杆",
-          childMenu: [
-            { cName: "行业标杆1" },
-            { cName: "行业标杆2" },
-            { cName: "行业标杆3" },
-          ],
+          name: '行业标杆',
+          data: [
+            { name: '行业标杆1' },
+            { name: '行业标杆2' },
+            { name: '行业标杆3' }
+          ]
         },
         {
-          menuName: "服务支持",
-          childMenu: [{ cName: "服务支持" }],
+          name: '服务支持',
+          data: [{ name: '服务支持' }]
         },
         {
-          menuName: "关于会助理",
-          childMenu: [{ cName: "关于会助理" }],
-        },
+          name: '关于会助理',
+          data: [{ name: '关于会助理' }]
+        }
       ],
-    };
+      loginMenuData: []
+    }
+  },
+  mounted() {
+    getConfigData('login_menu').then(res => {
+      if (res.data) {
+        this.menuList = JSON.parse(res.data.value)
+        this.menuList.forEach(item => {
+          this.getLoginPageData(item.parentId, 1, item)
+        })
+        console.log(this.menuList)
+      }
+    })
   },
-  mounted() {},
   methods: {
+    getLoginPageData(parentId, type, data) {
+      let queryParams = {
+        type: type,
+        parentId: parentId,
+        status: 1
+      }
+      // 执行查询
+      getLoginPagePopularizeModuleConfigPage(queryParams).then(response => {
+        if (response.data) {
+          response.data.list.forEach(item => {
+            data.data.push(item)
+          })
+        }
+      })
+    },
     /**
      * 跳转登录页面
      */
     toLogin() {
-      this.$router.push("/login").catch(() => {});
+      this.$router.push('/login').catch(() => {
+      })
     },
     /**
      * 跳转注册页面
      */
     toRegister() {
-      this.$router.push("/register").catch(() => {});
-    },
-  },
-};
+      this.$router.push('/register').catch(() => {
+      })
+    }
+  }
+}
 </script>
 
 <style scoped>
@@ -110,6 +143,7 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .mobileSty {
   font-family: Microsoft YaHei, Microsoft YaHei;
   font-weight: 400;
@@ -120,12 +154,14 @@ export default {
   font-style: normal;
   text-transform: none;
 }
+
 .btnSty {
   font-size: 20px;
   width: 102px;
   height: 50px;
   margin-left: 3%;
 }
+
 .topBtn {
   float: left;
   width: 28%;
@@ -133,20 +169,24 @@ export default {
   display: flex;
   align-items: center;
 }
+
 .topLogo {
   float: left;
   width: 20%;
   height: 100%;
   margin-left: 12%;
 }
+
 .topMenu {
   background: #f0f7ff;
   height: 8vh;
 }
+
 .dropdown-link-text {
   font-size: 20px;
   font-weight: bold;
 }
+
 .el-dropdown-link {
   cursor: pointer;
   font-family: Microsoft YaHei, Microsoft YaHei;
@@ -158,6 +198,7 @@ export default {
   font-style: normal;
   text-transform: none;
 }
+
 .el-icon-arrow-down {
   font-size: 12px;
 }

src/views/login.vue

@@ -6,207 +6,237 @@
         <!-- <div class="logo"></div> -->
         <div class="processPic">
           <img
-              src="../assets/images/process.gif"
-              style="width: 100%; height: 100%"
+              src="@/assets/images/process.gif"
+              style="width: 95%; height: 100%"
           />
         </div>
-      <!-- 登录区域 -->
-      <!-- <div class="content" style="margin-top: 1%; margin-left: 4%"></div> -->
-      <div class="content" style="margin-left: 6%; z-index: 1">
-        <div class="loginLeft">
-          <div style="width: 100%; height: 100%">
-            <h1 style="font-size: 32px; text-align: center; margin: 0 auto">
-              扫码登录
-            </h1>
-            <div style="width: 70%; height: 70%; margin: 15px auto 0 auto">
-              <img
-                  :src="imgData"
-                  style="width: 100%; height: 100%"
-                  @click="reflushFlag && reflushErWei()"
-              />
-            </div>
-            <div style="width: 100%;height: 25%;text-align: center;margin-top: 10px;">
-              <p style="margin-bottom: 0px">
-                请使用"会助理"小程序扫描二维码进入平台
-              </p>
-              <p style="margin-bottom: 0px">
-                二维码剩余有效时间:
-                <span style="color: red">{{ effectiveTime }}</span> s
-              </p>
-              <!-- <el-button @click="testLogin">测试登录</el-button> -->
+        <!-- 登录区域 -->
+        <!-- <div class="content" style="margin-top: 1%; margin-left: 4%"></div> -->
+        <div class="content" style="margin-left: 6%; z-index: 1">
+          <div class="loginLeft">
+            <div style="width: 100%; height: 100%">
+              <h1 style="font-size: 32px; text-align: center; margin: 0 auto">
+                扫码登录
+              </h1>
+              <div style="width: 70%; height: 70%; margin: 15px auto 0 auto">
+                <img
+                    :src="imgData"
+                    style="width: 100%; height: 100%"
+                    @click="reflushFlag && reflushErWei()"
+                />
+              </div>
+              <div style="width: 100%;height: 25%;text-align: center;margin-top: 10px;">
+                <p style="margin-bottom: 0px">
+                  请使用"会助理"小程序扫描二维码进入平台
+                </p>
+                <p style="margin-bottom: 0px">
+                  二维码剩余有效时间:
+                  <span style="color: red">{{ effectiveTime }}</span> s
+                </p>
+                <!-- <el-button @click="testLogin">测试登录</el-button> -->
+              </div>
             </div>
           </div>
-        </div>
-        <div class="loginRight">
-          <div style="width: 80%; height: 100%; margin: 70px auto">
-            <h1 style="font-size: 32px; text-align: center; margin: 0 auto">
-              手机号登录
-            </h1>
-            <el-form
-                ref="loginForm"
-                :model="loginForm"
-                :rules="LoginRules"
-                style="margin-left: 10px; margin-top: 20px"
-            >
-              <!-- 账号密码登录 -->
-              <div v-if="loginForm.loginType === 'uname'">
-                <el-form-item prop="mobile">
-                  <el-input
-                      v-model="loginForm.mobile"
-                      type="text"
-                      auto-complete="off"
-                      placeholder="请输入手机号"
-                      @blur="moblieBlur()"
-                      resize="vertical"
-                      oninput="if(value.length>11)value=value.slice(0,11)"
-                  >
-                    <svg-icon
-                        slot="prefix"
-                        icon-class="phone"
-                        class="el-input__icon input-icon"
-                    />
-                  </el-input>
-                </el-form-item>
-                <el-form-item prop="password">
-                  <el-input
-                      v-model="loginForm.password"
-                      type="password"
-                      auto-complete="off"
-                      placeholder="请输入密码"
-                      @keyup.enter.native="getCode"
-                  >
-                    <svg-icon
-                        slot="prefix"
-                        icon-class="password"
-                        class="el-input__icon input-icon"
-                    />
-                  </el-input>
-                </el-form-item>
-                <el-form-item prop="tenantName" v-if="tenantEnable">
-                  <el-select
+          <div class="loginRight">
+            <div style="width: 80%; height: 100%; margin: 50px auto">
+              <h1 style="font-size: 32px; text-align: center; margin: 0 auto">
+                手机号登录
+              </h1>
+              <el-form
+                  ref="loginForm"
+                  :model="loginForm"
+                  :rules="LoginRules"
+                  style="margin-left: 10px; margin-top: 20px"
+              >
+                <!-- 账号密码登录 -->
+                <div v-if="loginForm.loginType === 'uname'">
+                  <el-form-item prop="mobile">
+                    <el-input
+                        v-model="loginForm.mobile"
+                        type="text"
+                        auto-complete="off"
+                        placeholder="请输入手机号"
+                        @blur="moblieBlur()"
+                        resize="vertical"
+                        oninput="if(value.length>11)value=value.slice(0,11)"
+                    >
+                      <svg-icon
+                          slot="prefix"
+                          icon-class="phone"
+                          class="el-input__icon input-icon"
+                      />
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item prop="password">
+                    <el-input
+                        v-model="loginForm.password"
+                        type="password"
+                        auto-complete="off"
+                        placeholder="请输入密码"
+                        @keyup.enter.native="getCode"
+                    >
+                      <svg-icon
+                          slot="prefix"
+                          icon-class="password"
+                          class="el-input__icon input-icon"
+                      />
+                    </el-input>
+                  </el-form-item>
+                  <el-form-item prop="tenantName" v-if="tenantEnable">
+                    <el-select
+                        v-model="loginForm.tenantName"
+                        placeholder="请选择机构名称"
+                    >
+                      <el-option
+                          v-for="item in options"
+                          :key="item.value"
+                          :label="item.label"
+                          :value="item.value"
+                      >
+                      </el-option>
+                    </el-select>
+                    <!-- <el-select
                       v-model="loginForm.tenantName"
-                      placeholder="请选择机构名称"
-                  >
-                    <el-option
+                      filterable
+                      remote
+                      reserve-keyword
+                      placeholder="请输入机构名称"
+                      :remote-method="remoteMethod"
+                      :loading="loadingTenant"
+                    >
+                      <el-option
                         v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value"
-                    >
-                    </el-option>
-                  </el-select>
-                  <!-- <el-select
-                    v-model="loginForm.tenantName"
-                    filterable
-                    remote
-                    reserve-keyword
-                    placeholder="请输入机构名称"
-                    :remote-method="remoteMethod"
-                    :loading="loadingTenant"
-                  >
-                    <el-option
-                      v-for="item in options"
-                      :key="item.value"
-                      :label="item.label"
-                      :value="item.value"
-                    >
-                    </el-option>
-                    <svg-icon
-                      slot="prefix"
-                      icon-class="tree"
-                      class="el-input__icon input-icon"
-                    />
-                  </el-select> -->
-                  <!-- <el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder="请输入机构名称">
-                  <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" />
-                </el-input> -->
-                </el-form-item>
-                <el-form-item prop="verifyInCode">
-                  <el-input
-                      v-model="loginForm.verifyInCode"
-                      type="text"
-                      auto-complete="off"
-                      placeholder="请输入验证码"
-                      style="width: 60%"
-                      @keyup.enter.native="getCode"
-                  >
-                    <svg-icon
+                      >
+                      </el-option>
+                      <svg-icon
                         slot="prefix"
-                        icon-class="question"
+                        icon-class="tree"
                         class="el-input__icon input-icon"
+                      />
+                    </el-select> -->
+                    <!-- <el-input v-model="loginForm.tenantName" type="text" auto-complete="off" placeholder="请输入机构名称">
+                    <svg-icon slot="prefix" icon-class="tree" class="el-input__icon input-icon" />
+                  </el-input> -->
+                  </el-form-item>
+                  <el-form-item prop="verifyInCode">
+                    <el-input
+                        v-model="loginForm.verifyInCode"
+                        type="text"
+                        auto-complete="off"
+                        placeholder="请输入验证码"
+                        style="width: 60%"
+                        @keyup.enter.native="getCode"
+                    >
+                      <svg-icon
+                          slot="prefix"
+                          icon-class="question"
+                          class="el-input__icon input-icon"
+                      />
+                    </el-input>
+                    <img
+                        :src="verifyCode"
+                        style="width: 40%"
+                        @click="refreshVerifyCode()"
+                        alt="验证码"
                     />
-                  </el-input>
-                  <img
-                      :src="verifyCode"
-                      style="width: 40%"
-                      @click="refreshVerifyCode()"
-                      alt="验证码"
-                  />
+                  </el-form-item>
+                </div>
+                <!-- 下方的登录按钮 -->
+                <el-form-item style="width: 100%; margin-top: 30px">
+                  <el-button
+                      :loading="loading"
+                      size="medium"
+                      type="primary"
+                      style="width: 100%;height: 40px"
+                      @click.native.prevent="getCode"
+                  >
+                    <span v-if="!loading">登 录</span>
+                    <span v-else>登 录 中...</span>
+                  </el-button>
                 </el-form-item>
-              </div>
-              <!-- 下方的登录按钮 -->
-              <el-form-item style="width: 100%; margin-top: 10px">
-                <el-button
-                    :loading="loading"
-                    size="medium"
-                    type="primary"
-                    style="width: 100%;height: 60px"
-                    @click.native.prevent="getCode"
+                <el-checkbox
+                    v-model="loginForm.rememberMe"
+                    style="float: right; right: 0px; color: #999999"
+                >记住密码
+                </el-checkbox
                 >
-                  <span v-if="!loading" style="font-size: 24px">登 录</span>
-                  <span v-else>登 录 中...</span>
-                </el-button>
-              </el-form-item>
-              <el-checkbox
-                  v-model="loginForm.rememberMe"
-                  style="float: right; right: 0px; color: #999999"
-              >记住密码
-              </el-checkbox
-              >
-            </el-form>
+              </el-form>
+            </div>
           </div>
+          <!-- 注册 -->
+          <!-- <div class="rightUp">
+            <img
+              src="../assets/images/upRight1.png"
+              style="width: 100%; height: 100%"
+            />
+          </div> -->
         </div>
-        <!-- 注册 -->
-        <!-- <div class="rightUp">
-          <img
-            src="../assets/images/upRight1.png"
-            style="width: 100%; height: 100%"
-          />
-        </div> -->
-      </div>
-      <div class="loginTitle">
-        <span class="loginTitleStr">赋 予 装 备 智 慧 动 能 · 构 建 场 景 数 字 脉 络</span>
-      </div>
-      <!-- 图形验证码 -->
-      <Verify
-          ref="verify"
-          :captcha-type="'blockPuzzle'"
-          :img-size="{ width: '400px', height: '200px' }"
-          @success="handleLogin"
-      />
-
-    </div>
+        <div class="loginTitle">
+          <span class="loginTitleStr">赋 予 装 备 智 慧 动 能 · 构 建 场 景 数 字 脉 络</span>
+        </div>
+        <!-- 图形验证码 -->
+        <Verify
+            ref="verify"
+            :captcha-type="'blockPuzzle'"
+            :img-size="{ width: '400px', height: '200px' }"
+            @success="handleLogin"
+        />
 
-    <!-- footer class="footer"-->
-    <div style="margin-top: 50px;text-align: center;font-size: 20px">
-      <div style="margin: 10px 0">
-        <a style="margin: 0 15px">会山科技</a> |
-        <a style="margin: 0 15px">版权所有</a> |
-        <a style="margin: 0 15px">市场合作</a> |
-        <a style="margin: 0 15px">关于会助理</a> |
-        <a style="margin: 0 15px">使用协议</a> |
-        <a style="margin: 0 15px">隐私条款</a>
       </div>
-      <div style="margin: 10px 0">
-        {{ version }} <span style="margin-left: 30px">开发者：会山科技</span>
+      <div style="padding: 3% 12%" ref="sortableContainer">
+        <!--        <div shadow="hover" v-for="(item,index) in [1,2,3,4,5,6]" :key="index"-->
+        <div shadow="hover" v-for="(item,index1) in loginModuleData" :key="index1"
+             class="module-item"
+             :style="{height: vModuleHeight +'px'}"
+        >
+          <div style="height: 12%;padding: 10px 10px 5px"
+               :style="{fontSize: vModuleFontSize1 +'px'}"
+          >
+            {{ item.name }}
+          </div>
+          <div style="height: 78%;padding:10px 10px 10px">
+            <div style="height: 85%">
+              <img :src="item.imgUrls" width="100%" height="100%">
+            </div>
+            <div style="height: 15%;text-align: center;margin: 10px 0"
+                 :style="{fontSize: vModuleFontSize2 +'px'}"
+            >
+              {{ item.digest }}
+            </div>
+          </div>
+          <div style="text-align: center;height: 11%;">
+            <el-button size="mini" slot="reference" type="primary">了解详情<i class="el-icon-arrow-right"></i></el-button>
+          </div>
+        </div>
+      </div>
+      <div style="padding: 1% 12%; margin: 1.2%;">
+        <div class="bottomMod" v-html="bottomModData.pageContent"></div>
       </div>
-      <div style="margin: 10px 0">
-        沪 I C P 备 1 9 0 0 7 0 6 1 号 - 1
+      <!-- footer class="footer"-->
+      <div style="margin-top: 50px;text-align: center;font-size: 20px"
+           :style="{fontSize: bottomFontSize +'px'}"
+      >
+        <div style="margin: 10px 0">
+          <a style="margin: 0 15px">会山科技</a> |
+          <a style="margin: 0 15px">版权所有</a> |
+          <a style="margin: 0 15px">市场合作</a> |
+          <a style="margin: 0 15px">关于会助理</a> |
+          <a style="margin: 0 15px">使用协议</a> |
+          <a style="margin: 0 15px">隐私条款</a>
+        </div>
+        <div style="margin: 10px 0">
+          {{ version }} <span style="margin-left: 30px">开发者：会山科技</span>
+        </div>
+        <div style="margin: 10px 0">
+          沪 I C P 备 1 9 0 0 7 0 6 1 号 - 1
+        </div>
+        Copyright © 2023-2024 willalp.com All Rights Reserved.
       </div>
-      Copyright © 2023-2024 willalp.com All Rights Reserved.
     </div>
   </div>
-  </div>
 </template>
 
 <script>
@@ -218,15 +248,15 @@ import {
   checkScanStatus,
   loginScan,
   loginScanResult,
-  getVerify,
-} from "@/api/login";
+  getVerify
+} from '@/api/login'
 import {
   getTenantIdByName,
   getAllTenantList,
-  getAllTenantListByPhone,
-} from "@/api/system/tenant";
-import { SystemUserSocialTypeEnum } from "@/utils/constants";
-import { getCaptchaEnable, getTenantEnable } from "@/utils/ruoyi";
+  getAllTenantListByPhone
+} from '@/api/system/tenant'
+import { SystemUserSocialTypeEnum } from '@/utils/constants'
+import { getCaptchaEnable, getTenantEnable } from '@/utils/ruoyi'
 import {
   getPassword,
   getRememberMe,
@@ -244,21 +274,29 @@ import {
   setUsername,
   setMobile,
   setVerifyInCode,
-  setCaptchaKey,
-} from "@/utils/auth";
+  setCaptchaKey
+} from '@/utils/auth'
 
-import Verify from "@/components/Verifition/Verify";
-import { resetUserPwd, getUsernameByMobile } from "@/api/system/user";
-import topMenu from "./components/login/topMenu.vue";
+import Verify from '@/components/Verifition/Verify'
+import { resetUserPwd, getUsernameByMobile } from '@/api/system/user'
+import topMenu from './components/login/topMenu.vue'
+import { getConfigData } from '@/api/infra/config'
+import { getLoginPagePopularizeModuleConfigPage } from '@/api/supplier/loginPagePopularizeModuleConfig'
 
 export default {
   name: 'Login',
   components: {
     Verify,
-    topMenu,
+    topMenu
   },
   data() {
     return {
+      bottomModData: '',
+      loginModuleData: [],
+      vModuleHeight: window.innerHeight * 0.45,
+      vModuleFontSize1: window.innerHeight * 0.022,
+      vModuleFontSize2: window.innerHeight * 0.015,
+      bottomFontSize: window.innerHeight * 0.018,
       version: '会助理平台 v2.0.2 版',
       options: [],
       states: [],
@@ -280,7 +318,6 @@ export default {
         mobile: '',
         password: '',
         captchaVerification: '',
-        mobile: '',
         mobileCode: '',
         rememberMe: false,
         tenantName: '',
@@ -342,10 +379,17 @@ export default {
     sessionStorage.clear()
   },
   created() {
+    //监听窗口大小变化
+    window.addEventListener('resize', this.adVModuleHeightHeight)
     getVerify().then((res) => {
       this.verifyCode = res.captchaImg
       this.verifyKey = res.captchaKey
     })
+    getConfigData('login_module').then(res => {
+      if (res.data) {
+        this.loginModuleData = JSON.parse(res.data.value)
+      }
+    })
     // 机构开关
     this.tenantEnable = getTenantEnable()
     if (this.tenantEnable) {
@@ -366,8 +410,41 @@ export default {
         : undefined
     this.getCookie()
     this.generateErWeima()
+    this.getLoginPageData('bottomMod', 3, this.bottomModData)
   },
   methods: {
+    /** 查询列表 */
+    getLoginPageData(parentId, type, data) {
+      let queryParams = {
+        type: type,
+        parentId: parentId,
+        status: 1
+      }
+      // 执行查询
+      getLoginPagePopularizeModuleConfigPage(queryParams).then(response => {
+        if (response.data) {
+          switch (parentId) {
+            case 'aboutHZL':
+              this.aboutHZLData = response.data.list[0]
+              break
+            case 'bottomMod':
+              this.bottomModData = response.data.list[0]
+              if (this.bottomModData) {
+                this.bottomModData.pageContent = this.bottomModData.pageContent.replace(/<img/g,
+                    "<img style='width:100%;height:auto;'")
+              }
+              break
+            default:
+              response.data.list.forEach(item => {
+                data.data.push(item)
+              })
+          }
+        }
+      })
+    },
+    adVModuleHeightHeight() {
+      this.vModuleHeight = window.innerHeight * 0.45
+    },
     moblieBlur() {
       getAllTenantListByPhone(this.loginForm.mobile).then((response) => {
         this.states = response.data
@@ -445,7 +522,7 @@ export default {
               checkScanStatus(this.qrcodeId).then((res) => {
                 let scanState = res.data
                 if (scanState == null) {
-                  this.imgData = require('../assets/images/reflushErWei.png')
+                  this.imgData = require('@/assets/images/reflushErWei.png')
                   this.reflushFlag = true
                   clearInterval(this.timer)
                   this.$modal.msgError('二维码已过期，请刷新二维码后重试')
@@ -473,7 +550,7 @@ export default {
               this.effectiveTime--
             } else {
               clearInterval(this.timer)
-              this.imgData = require('../assets/images/reflushErWei.png')
+              this.imgData = require('@/assets/images/reflushErWei.png')
               this.reflushFlag = true
             }
           }, 1000)
@@ -630,6 +707,19 @@ export default {
 //.el-form-item {
 //  margin-bottom: 20px !important;
 //}
+.bottomMod img {
+  width: 100%;
+  height: auto;
+}
+
+.module-item {
+  display: inline-block;
+  width: 30%;
+  border-radius: 10px;
+  margin: 1.2%;
+  box-shadow: 0 0 15px #c0cfe2;
+  /*transition: transform 0.1s ease;*/
+}
 
 .loginTitle {
   position: absolute;
@@ -643,7 +733,7 @@ export default {
   color: #4588f6;
   font-size: 28px;
   bottom: 12%;
-  right: 13%;
+  right: 9%;
 }
 
 ::v-deep .el-input__inner {
@@ -684,7 +774,7 @@ export default {
 }
 
 .processPic {
-   //margin-top: 1%;
+  //margin-top: 1%;
   // margin-left: 3%;
   width: 35%;
 }

src/views/navigation.vue

@@ -789,4 +789,4 @@ export default {
     float: left;
     /* background-color: rgb(1, 7, 1); */
 }
-</style>
+</style>

src/views/supplier/loginPagePopularizeModuleConfig/index.vue

@@ -16,12 +16,13 @@
           <!-- 操作工具栏 -->
           <el-row :gutter="10" class="mb8">
             <el-col :span="1.5">
-              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(1)">新增</el-button>
+              <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(1,menu.parentId)">新增
+              </el-button>
             </el-col>
             <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
           </el-row>
           <!-- 列表 -->
-          <el-table :data="menu.data">
+          <el-table v-loading="menu.loading" :data="menu.data">
             <el-table-column label="序号" align="center" prop="id"/>
             <el-table-column label="名称" align="center" prop="name"/>
             <!--        <el-table-column label="链接" align="center" prop="link"/>-->
@@ -51,7 +52,7 @@
                            v-hasPermi="['supplier:login-page-popularize-module-config:update']"
                 >编辑
                 </el-button>
-                <el-button size="mini" type="text" icon="el-icon-view"
+                <el-button size="mini" type="text" icon="el-icon-view" @click="preView(scope.row.type,scope.row,index)"
                 >预览
                 </el-button>
                 <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
@@ -81,7 +82,7 @@
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
       </el-row>
       <!-- 列表 -->
-      <el-table :data="moduleList">
+      <el-table v-loading="modObj.loading" :data="modObj.data">
         <el-table-column label="序号" align="center" prop="id"/>
         <el-table-column label="模块名称" align="center" prop="name"/>
         <el-table-column label="排序" align="center" prop="sort"/>
@@ -106,7 +107,7 @@
             <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row,scope.row.type)"
             >编辑
             </el-button>
-            <el-button size="mini" type="text" icon="el-icon-edit"
+            <el-button size="mini" type="text" icon="el-icon-view" @click="preView(2,scope.row,0)"
             >预览
             </el-button>
             <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
@@ -117,27 +118,31 @@
       </el-table>
       <div style="padding: 0 12%" ref="sortableContainer">
         <!--        <div shadow="hover" v-for="(item,index) in [1,2,3,4,5,6]" :key="index"-->
-        <div shadow="hover" v-for="(item,index) in loginModuleDataDisplayCopy" :key="index"
+        <div shadow="hover" v-for="(item,index1) in loginModuleDataDisplayCopy" :key="index1"
              class="module-item"
              :style="{height: vModuleHeight +'px'}"
         >
-          <div style="font-size: 30px;font-weight: bold;padding: 5px 15px">
+          <div style="height: 12%;padding: 10px 10px 5px"
+               :style="{fontSize: vModuleFontSize1 +'px'}"
+          >
             {{ item.name }}
           </div>
-          <div style="height: 82%;padding:0 20px">
+          <div style="height: 78%;padding:10px 10px 10px">
             <div style="height: 85%">
-              <img :src="item.imgUrls" width="100%" height="auto">
+              <img :src="item.imgUrls" width="100%" height="100%">
             </div>
-            <div style="font-size: 16px;height: 15%;text-align: center">
-              <div v-html="item.digest"></div>
+            <div style="height: 15%;text-align: center;margin: 10px 0"
+                 :style="{fontSize: vModuleFontSize2 +'px'}"
+            >
+              {{ item.digest }}
             </div>
           </div>
-          <div style="text-align: center;">
+          <div style="text-align: center;height: 11%;">
             <el-popover placement="top" width="400" trigger="click">
-              <el-button v-for="(modItem,modIndex) in moduleList" @click="selectMod(modItem,modIndex)" :key="modIndex">
-                {{ modItem.name }}
-              </el-button>
-              <el-button slot="reference" type="primary">选择模板</el-button>
+              <span v-for="(modItem,index2) in modObj.data" style="margin: 5px">
+                <el-button @click="selectMod(modItem,index1)" :key="index2"> {{ modItem.name }}</el-button>
+              </span>
+              <el-button size="mini" slot="reference" type="primary">选择模板</el-button>
             </el-popover>
           </div>
         </div>
@@ -164,7 +169,7 @@
         </el-form-item>
 
         <el-form-item v-if="editType === 2" label="模块简介" prop="digest">
-          <editor v-model="form.digest" :min-height="180"/>
+          <el-input type="textarea" :autosize="{ minRows: 4 }" v-model="form.digest" :maxlength="50"/>
         </el-form-item>
 
         <el-form-item v-if="editType === 2" label="主图" prop="imgUrls">
@@ -173,27 +178,21 @@
         <el-form-item v-if="editType === 2" label="模块详情" prop="pageContent">
           <editor v-model="form.pageContent" :min-height="380"/>
         </el-form-item>
-        <!--        <el-form-item label="链接" prop="link">-->
-        <!--          <el-input v-model="form.link" type="textarea" placeholder="请输入内容"/>-->
-        <!--        </el-form-item>-->
-
-        <!--        <el-form-item label="排序" prop="sort">-->
-        <!--          <el-input v-model="form.sort" placeholder="请输入排序"/>-->
-        <!--        </el-form-item>-->
-
-        <!--        <el-form-item label="状态" prop="status">-->
-        <!--          <el-radio-group v-model="form.status">-->
-        <!--            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"-->
-        <!--                      :key="dict.value" :label="dict.value"-->
-        <!--            >{{ dict.label }}-->
-        <!--            </el-radio>-->
-        <!--          </el-radio-group>-->
-        <!--        </el-form-item>-->
-
-        <!--        <el-form-item label="图片" prop="imgUrls">-->
-        <!--          <el-input v-model="form.imgUrls" placeholder="请输入图片"/>-->
-        <!--        </el-form-item>-->
+        <!--<el-form-item label="链接" prop="link">-->
+        <!--  <el-input v-model="form.link" type="textarea" placeholder="请输入内容"/>-->
+        <!--</el-form-item>-->
+        <el-form-item label="排序" prop="sort">
+          <el-input v-model="form.sort" placeholder="请输入排序"/>
+        </el-form-item>
 
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status+''">
+            <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)"
+                      :key="dict.value" :label="dict.value"
+            >{{ dict.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
 
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -202,6 +201,10 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-dialog title="预览" :visible.sync="preOpen" width="1700px">
+      <PreLogin ref="preLogin"></PreLogin>
+    </el-dialog>
   </div>
 </template>
 
@@ -218,10 +221,11 @@ import { getConfigData, updateConfig } from '@/api/infra/config'
 import Sortable from 'sortablejs'
 import Editor from '@/components/Editor'
 import ImageUpload from '@/components/ImageUpload'
+import PreLogin from './preview/login'
 
 export default {
   name: 'LoginPagePopularizeModuleConfig',
-  components: { Editor, ImageUpload },
+  components: { Editor, ImageUpload, PreLogin },
   data() {
     return {
       // 遮罩层
@@ -234,11 +238,15 @@ export default {
       total: 0,
       // 登录页面推广模块配置列表
       list: [],
-      moduleList: [],
+      modObj: {
+        data: [],
+        loading: false
+      },
       // 弹出层标题
       title: '',
       // 是否显示弹出层
       open: false,
+      preOpen: false,
       // 查询参数
       queryParams: {
         pageNo: 1,
@@ -266,12 +274,17 @@ export default {
       configModuleData: {},
       sortableInstance: null,
       vModuleHeight: window.innerHeight * 0.45,
+      vModuleFontSize1: window.innerHeight * 0.022,
+      vModuleFontSize2: window.innerHeight * 0.015,
       editType: 1
     }
   },
   watch: {
     'aboutHZLData': {
       handler: function(newValue) {
+        if (!newValue) {
+          return
+        }
         updateLoginPagePopularizeModuleConfig(newValue)
         // this.$modal.msgSuccess('更新成功')
       },
@@ -279,6 +292,9 @@ export default {
     },
     'bottomModData': {
       handler: function(newValue) {
+        if (!newValue) {
+          return
+        }
         updateLoginPagePopularizeModuleConfig(newValue)
         // this.$modal.msgSuccess('更新成功')
       },
@@ -309,7 +325,7 @@ export default {
   },
   created() {
     //各个模块初始化数据
-    this.getList('', 2, this.moduleList)
+    this.getList('', 2, this.modObj)
     this.getList('aboutHZL', 1, this.aboutHZLData)
     this.getList('bottomMod', 3, this.bottomModData)
     getConfigData('login_menu').then(res => {
@@ -317,8 +333,7 @@ export default {
         this.configMenuData = res.data
         this.loginMenuData = JSON.parse(res.data.value)
         this.loginMenuData.forEach(item => {
-          item.data = []
-          this.getList(item.parentId, 1, item.data)
+          this.getList(item.parentId, 1, item)
         })
       }
     })
@@ -331,6 +346,19 @@ export default {
     })
   },
   methods: {
+    preView(type, data, index) {
+      this.preOpen = true
+      if (type === 1) {
+        this.$nextTick(() => {
+          this.$refs.preLogin.menuPre(data, index)
+        })
+      }
+      if (type === 2) {
+        this.$nextTick(() => {
+          this.$refs.preLogin.modulePre(data, index)
+        })
+      }
+    },
     /**
      * 更新配置模块的数据。
      */
@@ -340,8 +368,13 @@ export default {
       this.$modal.msgSuccess('更新成功')
     },
     selectMod(item, index) {
+
       this.loginModuleData.splice(index, 1)// 移除旧位置的项
       this.loginModuleData.splice(index, 0, item) // 在新位置插入项
+
+      this.loginModuleDataDisplayCopy.splice(index, 1)// 移除旧位置的项
+      this.loginModuleDataDisplayCopy.splice(index, 0, item) // 在新位置插入项
+
       this.updateConfigModData()
     },
     updateStatus(row) {
@@ -349,7 +382,7 @@ export default {
       this.$modal.msgSuccess('更新成功')
     },
     adVModuleHeightHeight() {
-      this.vModuleHeight = window.innerHeight * 0.35
+      this.vModuleHeight = window.innerHeight * 0.40
     },
     // 回调函数示例
     handleSort(event) {
@@ -358,25 +391,35 @@ export default {
       const movedItem = this.loginModuleData.splice(oldIndex, 1)[0] // 移除旧位置的项
       this.loginModuleData.splice(newIndex, 0, movedItem) // 在新位置插入项
       this.updateConfigModData()
-      this.$forceUpdate()
     },
     /** 查询列表 */
     getList(parentId, type, data) {
-      this.queryParams.parentId = parentId
-      this.queryParams.type = type
-      this.loading = true
+      if (type) {
+        this.queryParams.type = type
+        if (type === 1) {
+          data.loading = true
+        }
+      }
+      if (parentId) {
+        this.queryParams.parentId = parentId
+      }
       // 执行查询
       getLoginPagePopularizeModuleConfigPage(this.queryParams).then(response => {
-        if (parentId === 'aboutHZL' && response.data) {
-          this.aboutHZLData = response.data.list[0]
-        } else if (parentId === 'bottomMod' && response.data) {
-          this.bottomModData = response.data.list[0]
-        } else {
-          response.data.list.forEach(item => {
-            data.push(item)
-          })
+        if (response.data) {
+          switch (parentId) {
+            case 'aboutHZL':
+              this.aboutHZLData = response.data.list[0]
+              break
+            case 'bottomMod':
+              this.bottomModData = response.data.list[0]
+              break
+            default:
+              response.data.list.forEach(item => {
+                data.data.push(item)
+              })
+          }
+          data.loading = false
         }
-        this.loading = false
       })
     },
     /** 取消按钮 */
@@ -411,11 +454,12 @@ export default {
       this.handleQuery()
     },
     /** 新增按钮操作 */
-    handleAdd(type) {
+    handleAdd(type, parentId) {
       this.reset()
       this.editType = type
       if (type === 1) {
         this.form.type = 1
+        this.form.parentId = parentId
         this.title = '新增方案'
       }
       if (type === 2) {
@@ -429,10 +473,14 @@ export default {
       this.reset()
       const id = row.id
       this.editType = type
+      if (type === 1) {
+        this.title = '修改方案'
+      } else if (type === 2) {
+        this.title = '修改模块'
+      }
       getLoginPagePopularizeModuleConfig(id).then(response => {
         this.form = response.data
         this.open = true
-        this.title = '修改登录页面推广模块配置'
       })
     },
     /** 提交按钮 */
@@ -446,8 +494,16 @@ export default {
           updateLoginPagePopularizeModuleConfig(this.form).then(response => {
             this.$modal.msgSuccess('修改成功')
             this.open = false
+            if (this.from.type === 1) {
+              for (let i = 0; i < this.loginMenuData.length; i++) {
+                if (this.from.parentId === this.loginMenuData[i].parentId) {
+                  this.getList(this.from.parentId, 1, this.loginMenuData[i])
+                  break
+                }
+              }
+            }
             if (this.from.type === 2) {
-              this.getList('', 2, this.moduleList)
+              this.getList('', 2, this.modObj)
             }
           })
           return
@@ -456,7 +512,17 @@ export default {
         createLoginPagePopularizeModuleConfig(this.form).then(response => {
           this.$modal.msgSuccess('新增成功')
           this.open = false
-          this.getList()
+          if (this.from.type === 1) {
+            for (let i = 0; i < this.loginMenuData.length; i++) {
+              if (this.from.parentId === this.loginMenuData[i].parentId) {
+                this.getList(this.from.parentId, 1, this.loginMenuData[i])
+                break
+              }
+            }
+          }
+          if (this.from.type === 2) {
+            this.getList('', 2, this.modObj)
+          }
         })
       })
     },
@@ -506,14 +572,14 @@ export default {
 .module-item {
   display: inline-block;
   width: 30%;
-  border: 1px solid #e3e3e3;
   border-radius: 10px;
-  margin: 10px 1%;
+  margin: 1.2%;
+  box-shadow: 0 0 15px #c0cfe2;
   /*transition: transform 0.1s ease;*/
 }
 
 .module-item:hover {
-  box-shadow: 0 0 5px #b6aeae;
+  box-shadow: 0 0 15px #c0cfe2;
   transition: transform 0.4s ease;
   transform: scale(1.035);
 }

src/views/supplier/loginPagePopularizeModuleConfig/preview/login.scss

@@ -0,0 +1,453 @@
+/* ===== PC DESIGN ===== */
+$W: 1080;
+$H: 1920;
+$picW: 438;
+$picH: 560;
+$formW: 320;
+$tabW: $formW / 2;
+$rowH: 56;
+$buttonH: 50;
+
+// container
+$containerBgColor: #e6ebf2;
+$containerBgImage: '../../../../assets/images/bg.png';
+// container-logo
+$logoWidth: 417px;
+$logoHeight: 64px;
+// $logoImage: '../../../../assets/logo/login-logo_bak.png';
+// container-content
+$contentWidth: round($W / $H * 70) * 1vw;
+$contentHeight: round($picH / $W * 110) / 100 * ($contentWidth / 1.05);
+// $contentWidth: round($W / $H * 100) * 1vw;
+// $contentHeight: round($picH / $W * 100) / 100 * ($contentWidth / 1);
+$contentBgColor: #ffffff;
+// container-content-pic
+$picWidth: round($picW / $H * 100) * 1vw;
+$picHeight: inherit;
+$picImage: '../../../../assets/images/pic.png';
+// container-content-field
+$fieldWidth: $contentWidth - $picWidth;
+$fieldHeight: inherit;
+// container-content-field-form
+$formWidth: $formW * 1px;
+$tabWidth: $tabW * 1px;
+$rowHeight: $rowH * 1px;
+$buttonHeight: $buttonH * 1px;
+
+// - - - - - 页面基础设置
+.module-item {
+  display: inline-block;
+  width: 30%;
+  border-radius: 10px;
+  margin: 1.2%;
+  box-shadow: 0 0 15px #c0cfe2;
+  /*transition: transform 0.1s ease;*/
+}
+.container {
+  .login-code {
+    width: 33%;
+    height: 38px;
+    float: right;
+
+    img {
+      cursor: pointer;
+      width: 100%;
+      max-width: 100px;
+      height: auto;
+      vertical-align: middle;
+    }
+  }
+
+  // 元素
+  width: inherit;
+  height: inherit;
+  min-width: 1080px;
+  min-height: 620px;
+  background-color: $containerBgColor;
+  //background-image: url($containerBgImage);
+  background-size: cover;
+  // 定位
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  // 文字
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+
+  .logo {
+    // 元素
+    width: $logoWidth;
+    height: $logoHeight;
+    // background-image: url($logoImage);
+    background-size: contain;
+    // 定位
+    position: absolute;
+    top: 50px;
+    left: 50%;
+    margin-left: -$logoWidth/2;
+  }
+
+  .content {
+    // 元素
+    width: $contentWidth;
+    height: $contentHeight;
+    background-color: #ffffff;
+    box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.07);
+    // 输入框圆角
+    // border-radius: 20px;
+    // 定位
+    position: relative;
+
+    .pic {
+      // 元素
+      width: $picWidth;
+      height: $picHeight;
+      background-image: url($picImage);
+      background-repeat: no-repeat;
+      background-size: cover;
+      border-radius: 20px 0 0 20px;
+      // 定位
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .field {
+      width: $fieldWidth;
+      height: $fieldHeight;
+      // 定位
+      position: absolute;
+      top: 0;
+      left: $picWidth;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .pc-title {
+        width: 100%;
+        clear: both;
+      }
+
+      .mobile-title,
+      .mobile-switch {
+        display: none;
+      }
+
+      .form {
+        box-sizing: border-box;
+        width: $formWidth;
+
+        // - - - tab
+        :deep(.el-tabs__content) {
+          padding: 20px 0 0;
+        }
+
+        :deep(.el-tabs__item) {
+          // 元素
+          width: $tabWidth;
+          height: $rowHeight;
+          padding: 0;
+          // 文字
+          line-height: $rowHeight;
+          color: #666666;
+        }
+
+        :deep(.el-tabs__item.is-active) {
+          font-weight: bold;
+          color: #2F53EB;
+        }
+
+        :deep(.el-tabs__active-bar) {
+          height: 3px;
+          border-radius: 2px;
+        }
+
+        // - - - input
+        :deep(.el-input__inner) {
+          // 元素
+          width: 100%;
+          height: $rowHeight;
+          background: #f5f5f5;
+          border: 0;
+          border-radius: 28px;
+          // 文字
+          text-align: center;
+          line-height: 19px;
+          color: #262626;
+        }
+
+        .code:deep(.el-input__inner) {
+          padding: 0 24px;
+          // 文字
+          text-align: left;
+        }
+
+        :deep(.el-input__inner::-webkit-input-placeholder) {
+          /* WebKit browsers */
+          font-weight: 400;
+          color: #8C8C8C;
+        }
+
+        :deep(.el-input__inner:-moz-placeholder) {
+          /* Mozilla Firefox 4 to 18 */
+          font-weight: 400;
+          color: #8C8C8C;
+        }
+
+        :deep(.el-input__inner::-moz-placeholder) {
+          /* Mozilla Firefox 19+ */
+          font-weight: 400;
+          color: #8C8C8C;
+          opacity: 1;
+        }
+
+        :deep(.el-input__inner:-ms-input-placeholder) {
+          /* Internet Explorer 10+ */
+          font-weight: 400;
+          color: #8C8C8C !important;
+        }
+
+        :deep(.el-form-item) {
+          position: relative;
+
+          .button-code {
+            // 元素
+            height: $rowHeight;
+            box-sizing: border-box;
+            // 定位
+            position: absolute;
+            top: 0;
+            right: 20px;
+            z-index: 1;
+            // 文字
+            line-height: 20px;
+            font-size: 14px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #2F53EB;
+
+            span {
+              padding-left: 15px;
+              border-left: 2px solid #D9D9D9;
+            }
+          }
+        }
+
+        :deep(.el-form-item__error) {
+          padding-left: 24px;
+        }
+
+        .button {
+          width: 100%;
+          height: $buttonHeight;
+          background: rgba(24, 144, 255, 0.2);
+          border: 0;
+          border-radius: 24px;
+          margin-bottom: 20px;
+          // 文字
+          line-height: 26px;
+          font-size: 20px;
+          color: #FFFFFF;
+        }
+
+        .button-active {
+          background: #2F53EB;
+          box-shadow: 0px 2px 8px rgba(0, 80, 184, 0.2);
+        }
+      }
+    }
+  }
+
+  .footer {
+    // 元素
+    height: 16px;
+    line-height: 16px;
+    font-size: 12px;
+    color: #8c8c8c;
+    // 定位
+    position: absolute;
+    bottom: 30px;
+
+    a,
+    a:hover,
+    a:active {
+      color: inherit;
+      text-decoration: none;
+    }
+  }
+}
+
+// - - - - - PC 最小尺寸设置
+@media screen and (min-width: 599px) and (max-width: 1366px) {
+  .container {
+    .content {
+      width: 710px;
+      height: 397px;
+
+      .pic {
+        width: 314px;
+      }
+
+      .field {
+        width: calc(710px - 314px);
+        left: 314px;
+
+        .form {
+          width: 320px;
+
+          :deep(.el-input__inner) {
+            width: 320px;
+            height: 56px;
+          }
+
+          .button {
+            height: 50px;
+          }
+        }
+      }
+    }
+  }
+}
+
+
+/* ===== MOBILE DESIGN ===== */
+$mobileW: 375;
+$mobileH: 812;
+$mobileContentW: 327;
+$mobileContentH: 376;
+$mobileFormW: 280;
+$mobileRowH: 48;
+$mobileButtonH: 48;
+
+// container
+$mobileContainerBgImage: '../../../../assets/images/bg-mobile.png';
+// container-content
+$mobileContentWidth: round($mobileContentW / $mobileW * 100) * 1vw;
+$mobileContentHeight: round($mobileContentH / $mobileW * 100) / 100 * $mobileContentWidth;
+// container-content-field-form
+$mobileFormWidth: round($mobileFormW / $mobileW *100) * 1vw;
+$mobileRowHeight: $mobileRowH * 1px;
+$mobileButtonHeight: $mobileButtonH * 1px;
+$iconBgImage: '../../../../assets/images/icon.png';
+
+// - - - - - 移动端设置
+@media screen and (max-width: 599px) {
+  .container {
+    // 元素
+    background-image: url($mobileContainerBgImage);
+    min-width: 280px;
+    min-height: 568px;
+    // 文字
+    font-size: 17px;
+    font-family: PingFang SC;
+    font-weight: bold;
+
+    .logo {
+      display: none;
+    }
+
+    .content {
+      // 元素
+      width: $mobileContentWidth;
+      height: $mobileContentHeight;
+      min-width: 250px;
+      min-height: 340px;
+      // 定位
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .pic {
+        display: none;
+      }
+
+      .field {
+        // 元素
+        width: inherit;
+        min-height: inherit;
+        // 定位
+        left: 0;
+        display: flex;
+        flex-direction: column;
+
+        .mobile-title {
+          // 元素
+          margin: 0 0 20px;
+          display: block;
+        }
+
+        .form {
+          width: $mobileFormWidth;
+
+          // - - - tab
+          :deep(.el-tabs__header) {
+            display: none;
+          }
+
+          :deep(.el-tabs__content) {
+            padding: 0;
+          }
+
+          // - - - input
+          :deep(.el-input__inner) {
+            height: $mobileRowHeight;
+            line-height: 24px;
+            // 文字
+            text-align: center;
+            color: #262626;
+          }
+
+          :deep(.el-form-item) {
+            .button-code {
+              // 元素
+              height: $mobileRowHeight;
+            }
+          }
+
+          .button {
+            height: $mobileButtonHeight;
+            line-height: 24px;
+            color: #FFFFFF;
+          }
+        }
+
+        .mobile-switch {
+          display: block;
+          line-height: 20px;
+          font-size: 14px;
+          font-weight: 400;
+          color: #595959;
+          margin: 0;
+
+          .icon {
+            width: 14px;
+            height: 14px;
+            display: inline-block;
+            background-image: url($iconBgImage);
+            background-size: cover;
+          }
+        }
+
+        .mobile-switch:hover {
+          cursor: pointer;
+        }
+      }
+    }
+
+    .footer {
+      // 元素
+      font-size: 12px;
+      font-family: PingFang SC;
+      font-weight: 400;
+      line-height: 17px;
+      color: #333333;
+      opacity: 0.6;
+      // 定位
+      position: absolute;
+      bottom: 20px;
+    }
+  }
+
+}

src/views/supplier/loginPagePopularizeModuleConfig/preview/login.vue

@@ -0,0 +1,300 @@
+<template xmlns="">
+  <div>
+    <top-menu :methodType="1" ref="topMenu"></top-menu>
+    <div>
+      <div class="container">
+        <!-- <div class="logo"></div> -->
+        <div class="processPic">
+          <img
+              src="@/assets/images/process.gif"
+              style="width: 90%; height: 100%"
+          />
+        </div>
+        <!-- 登录区域 -->
+        <!-- <div class="content" style="margin-top: 1%; margin-left: 4%"></div> -->
+        <div class="content" style="margin-left: 6%; z-index: 1">
+          <div class="loginLeft">
+            <div style="width: 100%; height: 100%">
+              <h1 style="font-size: 32px; text-align: center; margin: 0 auto">
+                <el-skeleton-item variant="text" style="width: 50%;height:30px"/>
+              </h1>
+              <el-skeleton-item variant="image" style="width: 70%; height: 70%; margin: 5px auto 0 auto"/>
+
+              <div style="width: 100%;height: 25%;text-align: center;margin-top: 10px;">
+                <el-skeleton-item variant="text" style="width: 90%;"/>
+                <el-skeleton-item variant="text" style="width: 30%;"/>
+                <!-- <el-button @click="testLogin">测试登录</el-button> -->
+              </div>
+            </div>
+          </div>
+          <div class="loginRight">
+            <div style="width: 80%; height: 100%; margin: 40px auto">
+              <h1 style="font-size: 32px; text-align: center; margin: 0 auto">
+                <el-skeleton-item variant="text" style="width: 50%;height:30px"/>
+              </h1>
+              <el-form
+                  ref="loginForm"
+                  style="margin-left: 10px; margin-top: 20px"
+              >
+                <!-- 账号密码登录 -->
+                <div>
+                  <el-skeleton-item variant="text" style="width: 95%;height: 20px"/>
+                  <el-skeleton-item variant="text" style="width: 95%;height: 20px"/>
+                  <el-skeleton-item variant="text" style="width: 95%;height: 20px"/>
+                  <el-skeleton-item variant="text" style="width: 95%;height: 20px"/>
+                </div>
+                <!-- 下方的登录按钮 -->
+                <el-form-item style="width: 100%; margin-top: 10px">
+                  <el-button
+                      size="medium"
+                      type="primary"
+                      style="width: 95%;height: 40px"
+                  >
+                    <span style="font-size: 14px">登 录</span>
+                  </el-button>
+                </el-form-item>
+              </el-form>
+            </div>
+          </div>
+          <!-- 注册 -->
+          <!-- <div class="rightUp">
+            <img
+              src="@/assets/images/upRight1.png"
+              style="width: 100%; height: 100%"
+            />
+          </div> -->
+        </div>
+        <div class="loginTitle">
+          <span class="loginTitleStr">赋 予 装 备 智 慧 动 能 · 构 建 场 景 数 字 脉 络</span>
+        </div>
+
+      </div>
+      <div style="padding: 3% 12%">
+        <!--        <div shadow="hover" v-for="(item,index) in [1,2,3,4,5,6]" :key="index"-->
+        <div shadow="hover" v-for="(item,index1) in loginModuleData" :key="index1"
+             class="module-item"
+             :style="{height: vModuleHeight +'px'}"
+        >
+          <div style="height: 12%;padding: 10px 10px 5px"
+               :style="{fontSize: vModuleFontSize1 +'px'}"
+          >
+            <div v-if="item.name">
+              {{ item.name }}
+            </div>
+            <el-skeleton-item v-else variant="text" style="width: 80%;height:30px"/>
+          </div>
+          <div style="height: 78%;padding: 10px 10px 10px;">
+            <div style="height: 85%;">
+              <img v-if="item.imgUrls" :src="item.imgUrls" width="100%" height="100%">
+              <el-skeleton-item v-else variant="image" style="width: 100%; height: 100%;"/>
+            </div>
+            <div style="height: 15%;text-align: center;margin: 10px 0"
+                 :style="{fontSize: vModuleFontSize2 +'px'}"
+            >
+              <div v-if="item.digest">
+                {{ item.digest }}
+              </div>
+              <div v-else>
+                <el-skeleton-item variant="image" style="width: 100%; height: 15px;margin: 2px 0"/>
+                <el-skeleton-item variant="image" style="width: 100%; height: 15px;margin: 2px 0"/>
+              </div>
+            </div>
+          </div>
+          <div style="text-align: center;height: 10%;">
+            <el-button size="mini" slot="reference" type="primary">了解详情<i class="el-icon-arrow-right"></i></el-button>
+          </div>
+        </div>
+      </div>
+      <!-- footer class="footer"-->
+      <div style="margin-top: 50px;text-align: center;"
+           :style="{fontSize: bottomFontSize +'px'}"
+      >
+        <div style="margin: 10px 0">
+          <a style="margin: 0 15px">会山科技</a> |
+          <a style="margin: 0 15px">版权所有</a> |
+          <a style="margin: 0 15px">市场合作</a> |
+          <a style="margin: 0 15px">关于会助理</a> |
+          <a style="margin: 0 15px">使用协议</a> |
+          <a style="margin: 0 15px">隐私条款</a>
+        </div>
+        <div style="margin: 10px 0">
+          {{ version }} <span style="margin-left: 30px">开发者：会山科技</span>
+        </div>
+        <div style="margin: 10px 0">
+          沪 I C P 备 1 9 0 0 7 0 6 1 号 - 1
+        </div>
+        Copyright © 2023-2024 willalp.com All Rights Reserved.
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import topMenu from './topMenu.vue'
+import { getConfigData } from '@/api/infra/config'
+
+export default {
+  name: 'Login',
+  components: {
+    topMenu
+  },
+  data() {
+    return {
+      loginModuleData: [{
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }, {
+        name: null,
+        imgUrls: null,
+        digest: null
+      }],
+      vModuleHeight: window.innerHeight * 0.45,
+      vModuleFontSize1: window.innerHeight * 0.022,
+      vModuleFontSize2: window.innerHeight * 0.015,
+      bottomFontSize: window.innerHeight * 0.018,
+      version: '会助理平台 v2.0.2 版'
+    }
+  },
+  beforeCreate() {
+  },
+  watch: {},
+  created() {
+    //监听窗口大小变化
+    window.addEventListener('resize', this.adVModuleHeightHeight)
+    // getConfigData('login_module').then(res => {
+    //   if (res.data) {
+    //     this.loginModuleData = JSON.parse(res.data.value)
+    //   }
+    // })
+
+  },
+  methods: {
+    modulePre(data, index) {
+      console.log('开始预览')
+      this.loginModuleData.splice(index, 1, data)
+    },
+    menuPre(data,index) {
+      this.$refs.topMenu.menuPre(data,index)
+    },
+    adVModuleHeightHeight() {
+      this.vModuleHeight = window.innerHeight * 0.45
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "login.scss";
+
+//.el-form-item {
+//  margin-bottom: 20px !important;
+//}
+
+.loginTitle {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 0;
+}
+
+.loginTitleStr {
+  position: absolute;
+  color: #4588f6;
+  font-size: 22px;
+  bottom: 12%;
+  right: 9.5%;
+}
+
+::v-deep .el-input__inner {
+  border-radius: 0px;
+  border-top-width: 0px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 1px;
+  /*outline: medium;*/
+}
+
+.rightUp {
+  width: 12.3%;
+  height: 20%;
+  background-color: yellow;
+  right: 0px;
+  // z-index: 9999;
+  position: absolute;
+}
+
+.loginLeft {
+  width: 45%;
+  height: 80%;
+  margin: 6% 1%;
+  float: left;
+  // z-index: 1;
+  border-width: 0 4px 0 0;
+  border-style: solid;
+  border-color: #c4cbd7;
+}
+
+.loginRight {
+  width: 50%;
+  height: 100%;
+  margin: 1% 0;
+  float: left;
+  // z-index: 1;
+}
+
+.processPic {
+  //margin-top: 1%;
+  // margin-left: 3%;
+  width: 35%;
+}
+
+.oauth-login {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.oauth-login-item {
+  display: flex;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.oauth-login-item img {
+  height: 25px;
+  width: 25px;
+}
+
+.oauth-login-item span:hover {
+  text-decoration: underline red;
+  color: red;
+}
+
+.sms-login-mobile-code-prefix {
+  :deep(.el-input__prefix) {
+    top: 22%;
+  }
+}
+
+.dropdown-link-text {
+  font-size: 20px;
+  font-weight: bold;
+}
+</style>

src/views/supplier/loginPagePopularizeModuleConfig/preview/topMenu.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="topMenu">
+    <div class="topLogo">
+      <img
+          src="@/assets/images/new_text_log.png"
+          style="width: 100%; height: 100%"
+      />
+    </div>
+    <div class="menuSty">
+      <el-dropdown
+          v-for="item in menuList"
+          :key="item"
+          style="margin-right: 40px"
+      >
+        <span class="el-dropdown-link">
+          {{ item.menuName }}<i class="el-icon-arrow-down el-icon--right"></i>
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item v-for="it in item.childMenu" :key="it">{{
+              it.name
+            }}
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+    <div class="topBtn">
+      <span class="mobileSty">
+        <i class="el-icon-phone-outline"></i>
+        0513-88888888
+      </span>
+      <el-button
+          type="primary"
+          class="btnSty"
+      >注册
+      </el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'topMenu',
+  props: {
+    methodType: {
+      type: Number,
+      default: 2
+    }
+  },
+  data() {
+    return {
+      menuList: [
+        {
+          menuName: '行业解决方案',
+          childMenu: []
+        },
+        {
+          menuName: '行业标杆',
+          childMenu: []
+        },
+        {
+          menuName: '服务支持',
+          childMenu: []
+        },
+        {
+          menuName: '关于会助理',
+          childMenu: [{ cName: '关于会助理' }]
+        }
+      ]
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    menuPre(data, index) {
+      this.menuList[index].childMenu.splice(0, 1, data)
+      console.log(this.menuList[index])
+    },
+    /**
+     * 跳转登录页面
+     */
+    toLogin() {
+      this.$router.push('/login').catch(() => {
+      })
+    },
+    /**
+     * 跳转注册页面
+     */
+    toRegister() {
+      this.$router.push('/register').catch(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.menuSty {
+  float: left;
+  width: 40%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.mobileSty {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 18px;
+  color: #333333;
+  line-height: 18px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.btnSty {
+  font-size: 20px;
+  width: 102px;
+  height: 50px;
+  margin-left: 3%;
+}
+
+.topBtn {
+  float: left;
+  width: 28%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.topLogo {
+  float: left;
+  width: 20%;
+  height: 100%;
+  margin-left: 12%;
+}
+
+.topMenu {
+  background: #f0f7ff;
+  height: 8vh;
+}
+
+.dropdown-link-text {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 16px;
+  color: #333333;
+  line-height: 18px;
+  text-align: left;
+  font-style: normal;
+  text-transform: none;
+}
+
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+</style>