zc

.env.development

@@ -33,10 +33,10 @@ VUE_APP_VERSION_DIFFERENCE_FIELD = 'kuangYeDaXue_nanHu'
 # VUE_APP_BASE_API = 'lasfl.sxau.edu.cn/api'
 
 # 1.8外网地址
-# VUE_APP_BASE_API = 'lab.zjznai.com/labTest'
+VUE_APP_BASE_API = 'lab.zjznai.com/labTest'
 
 # 1.88外网地址
-VUE_APP_BASE_API = '192.168.1.88/labSystem'
+# VUE_APP_BASE_API = '192.168.1.88/labSystem'
 
 # 43外网地址
 # VUE_APP_BASE_API = 'lab.zjznai.com/labapp'
@@ -56,10 +56,10 @@ VUE_APP_BASE_API = '192.168.1.88/labSystem'
 # VUE_APP_BASE_LOCAL_API = 'lasfl.sxau.edu.cn/api'
 
 # 1.8内网地址
-# VUE_APP_BASE_LOCAL_API = '192.168.1.8/api'
+VUE_APP_BASE_LOCAL_API = '192.168.1.8/api'
 
 # 1.88内网地址
-VUE_APP_BASE_LOCAL_API = '192.168.1.88/labSystem'
+# VUE_APP_BASE_LOCAL_API = '192.168.1.88/labSystem'
 
 # 43内网地址
 # VUE_APP_BASE_LOCAL_API = '192.168.1.43/api'

.env.production

@@ -33,10 +33,10 @@ VUE_APP_VERSION_DIFFERENCE_FIELD = 'kuangYeDaXue_nanHu'
 # VUE_APP_BASE_API = 'lasfl.sxau.edu.cn/api'
 
 # 1.8外网地址
-# VUE_APP_BASE_API = 'lab.zjznai.com/labTest'
+VUE_APP_BASE_API = 'lab.zjznai.com/labTest'
 
 # 1.88外网地址
-VUE_APP_BASE_API = 'lab.zjznai.com/appTest'
+# VUE_APP_BASE_API = 'lab.zjznai.com/appTest'
 
 # 43外网地址
 # VUE_APP_BASE_API = 'lab.zjznai.com/labapp'
@@ -56,10 +56,10 @@ VUE_APP_BASE_API = 'lab.zjznai.com/appTest'
 # VUE_APP_BASE_LOCAL_API = 'lasfl.sxau.edu.cn/api'
 
 # 1.8内网地址
-# VUE_APP_BASE_LOCAL_API = '192.168.1.8/api'
+VUE_APP_BASE_LOCAL_API = '192.168.1.8/api'
 
 # 1.88内网地址
-VUE_APP_BASE_LOCAL_API = '192.168.1.88/labSystem'
+# VUE_APP_BASE_LOCAL_API = '192.168.1.88/labSystem'
 
 # 43内网地址
 # VUE_APP_BASE_LOCAL_API = '192.168.1.43/api'

package.json

@@ -42,6 +42,7 @@
     "@vue-office/excel": "^1.7.6",
     "@vue-office/pdf": "^1.6.5",
     "@vue/composition-api": "^1.7.2",
+    "amfe-flexible": "^2.2.1",
     "axios": "0.21.0",
     "canvas": "^2.8.0",
     "clipboard": "2.0.6",
@@ -68,10 +69,12 @@
     "nprogress": "0.2.0",
     "or": "^0.2.0",
     "quill": "1.3.7",
+    "recorder-core": "^1.3.25011100",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
     "spark-md5": "^3.0.1",
     "three": "^0.148.0",
+    "vant": "^2.13.9",
     "vue": "2.6.12",
     "vue-count-to": "1.0.13",
     "vue-cropper": "^0.5.5",
@@ -95,10 +98,12 @@
     "babel-eslint": "10.1.0",
     "chalk": "4.1.0",
     "connect": "3.6.6",
-    "crypto-js": "^4.1.1",
+    "crypto-js": "^4.2.0",
     "eslint": "7.15.0",
     "eslint-plugin-vue": "7.2.0",
     "lint-staged": "10.5.3",
+    "postcss": "^8.5.6",
+    "postcss-pxtorem": "^5.1.1",
     "runjs": "4.4.2",
     "sass": "1.39.0",
     "sass-loader": "10.1.0",

src/api/config.js

@@ -0,0 +1,20 @@
+const config = {
+	base_url: 'https://lasfl.sxau.edu.cn/api',//山西农大
+	/************************************ 图片服务地址 ************************************/
+	//(imagesUrl.styl 文件内还需要配置一次css相关地址注意是否与imagesUrl.styl一致)
+	imagesUrl: 'https://zj-wechat.oss-cn-beijing.aliyuncs.com/xcx_images/xcx_v3/',
+	/************************************ 扫一扫 ************************************/
+	//1.MSDS说明书			2.安全制度			3.危险源详情 地址配置
+	saoCodeTypeUrl: 'https://lasfl.sxau.edu.cn/#//#/codeHtml?',
+	/************************************ 校级管理员身份ID ************************************/
+  schoolId:'1954794346556477442',
+	/************************************ 院级管理员身份ID ************************************/
+  collegeId:'1954794446758400002',
+	/************************************ 版本标识-用于区别各学校差异化代码 ************************************/
+	VERSION_DIFFERENCE_FIELD :'xiBeiNongLinDaXue',
+	/************************************ H5统一认证地址-用于H5版本统一认证 ************************************/
+	UNIFIED_CERTIFICATION_URL:'https://labcontrol.nwafu.edu.cn/api/auth/cas/logout/applet',
+}
+export {
+	config
+}

src/api/index.js

@@ -24,3 +24,104 @@ export function iotCameraGetPreviewURLs(query) {
     params: query
   })
 }
+//预警记录-非预案详情
+export function systemMineWarningNoticeDetail(query) {
+  return request({
+    url: '/system/mine/warningNoticeDetail',
+    method: 'get',
+    params: query
+  })
+}
+//获取报警信息
+export function laboratoryEventFindByEventId(query) {
+  return request({
+    url: '/laboratory/event/findByEventId',
+    method: 'get',
+    params: query
+  })
+}
+
+//登录
+export const login = (data) => {
+  return request({
+    url: `/auth/appletLogin`,
+    method: 'post',
+    data: data
+  })
+};
+//查询公共配置
+export const configInfo = (query) => {
+  return request({
+    url: `/auth/configInfo`,
+    method: 'get',
+    params: query
+  })
+};
+/*                分类获取公共配置
+* category        1.系统参数 2.公共配置
+* configType      1.基础配置 2.管控一体机 3.化学品终端 4.小程序配置 5.开发配置 6.首页配置
+*/
+export function getConfigByType(data) {
+  return request({
+    url: '/system/config/info/getConfigByType',
+    method: 'post',
+    data: data
+  })
+}
+//查询是否是管理员/安全员
+export const systemSubjectCheckIsAdminOrSafeUser = (query) => {
+  return request({
+    url: `/system/subject/checkIsAdminOrSafeUser`,
+    method: 'get',
+    params: query
+  })
+};
+//查询人员身份标识
+export const securityDataStatisticsGetUserIdentity = (query) => {
+  return request({
+    url: `/security/dataStatistics/getUserIdentity`,
+    method: 'get',
+    params: query
+  })
+};
+//查询当前用户下的预案触发数据
+export const laboratoryBigViewSelectTriggerInfo = (query) => {
+  return request({
+    url: `/laboratory/bigView/selectTriggerInfo`,
+    method: 'get',
+    params: query
+  })
+};
+//应急处置-结束预案
+export const laboratoryPlanCloseRiskPlan = (query) => {
+  return request({
+    url: `/laboratory/plan/closeRiskPlan`,
+    method: 'get',
+    params: query
+  })
+};
+//实验室-查询喇叭列表
+export const iotAppSpeakerFindHorn = (query) => {
+  return request({
+    url: `/iot/app/speaker/findHorn`,
+    method: 'get',
+    params: query
+  })
+};
+//实验室-喇叭播放
+export const iotAppSpeakerPlayVoice = (query) => {
+  return request({
+    url: `/iot/app/speaker/playVoice`,
+    method: 'get',
+    params: query
+  })
+};
+
+//通用上传接口
+export function systemFileUpload(data) {
+  return request({
+    url: '/system/file/upload',
+    method: 'post',
+    data: data
+  })
+}

src/api/request.js

@@ -1,5 +1,7 @@
 import axios from 'axios'
+import router from '@/router'
 import { tansParams,judgmentNetworkReturnAddress } from "@/utils/ruoyi";
+import { Toast,Loading } from 'vant';
 
 //判定http或者https
 let urlText = window.location.href.split('://')[0]+'://';
@@ -11,9 +13,14 @@ const service = axios.create({
   baseURL: urlText+judgmentNetworkReturnAddress(),
   // 超时
   timeout: 10000
-})
+});
 // request拦截器
 service.interceptors.request.use(config => {
+  Toast.loading({
+    duration:0,
+    message: '加载中...',
+    forbidClick: true,
+  });
   //写入touken
   config.headers['Authorization'] = localStorage.getItem('touken');
   // get请求映射params参数
@@ -26,12 +33,30 @@ service.interceptors.request.use(config => {
   return config
 }, error => {
   Promise.reject(error)
-})
+});
 // 响应拦截器
 service.interceptors.response.use(res => {
-    return res.data
+    Toast.clear();
+    const code = res.data.code || 200;
+    if(code != 200){
+      Toast(res.data.message);
+      return Promise.reject(new Error(res.data.code+' '+res.data.message))
+    }else{
+      return res.data
+    }
   },
   error => {
+    let { message } = error;
+    Toast.clear();
+    if(message.includes("Request failed with status code")) {
+      if(message.substr(message.length - 3) == 401){
+        router.replace({
+          path: '/login'
+        })
+      }
+    }else{
+      Toast(message);
+    }
     return Promise.reject(error)
   }
 )

src/assets/index.scss

@@ -0,0 +1,8 @@
+*{
+  margin:0;
+  padding:0;
+}
+input{
+  border:none;
+  outline: none;
+}

src/components/H5PlayerVideoTime/H5PlayerVideoTime.vue

@@ -29,6 +29,7 @@
         height: this.videoProps.height ? this.videoProps.height : 338,
         url: this.videoProps.url
       })
+      console.log('videoData',this.videoData)
     },
     mounted() {
       this.$nextTick(() => {
@@ -40,10 +41,10 @@
     methods: {
       //全屏
       fullScreen() {
-        if(this.$parent.$parent.stopTime){
-          this.$parent.$parent.stopTime(this.videoProps);
-        }else if(this.$parent.stopTime){
-          this.$parent.stopTime(this.videoProps);
+        if(this.$parent.$parent.stopTimeBack){
+          this.$parent.$parent.stopTimeBack(this.videoProps);
+        }else if(this.$parent.stopTimeBack){
+          this.$parent.stopTimeBack(this.videoProps);
         }else{
           this.myPlugin.JS_FullScreenDisplay(true).then(
             (res) => {

src/components/H5PlayerVideoTime/fullH5PlayerVideo.vue

@@ -31,6 +31,7 @@
         id: 'video_' + this.generateRandomString(),
         url: this.fullVideoProps.url
       })
+      console.log('videoDatavideoData',this.videoData)
     },
     mounted() {
       this.$nextTick(() => {
@@ -43,8 +44,8 @@
       //全屏
       fullScreen() {
         let self = this;
-        if(this.$parent.stopTime){
-          this.$parent.stopTime(JSON.parse(JSON.stringify(this.fullVideoProps)));
+        if(this.$parent.stopTimeBack){
+          this.$parent.stopTimeBack(JSON.parse(JSON.stringify(this.fullVideoProps)));
         }else{
           this.myPlugin.JS_FullScreenDisplay(true).then(
             (res) => {
@@ -61,7 +62,7 @@
       },
       //退出全屏
       outFullScreen() {
-        this.$parent.outFullScreen();
+        this.$parent.outFullScreenBack();
       },
       initH5Player(split) {
         this.myPlugin = new window.JSPlugin({

src/main.js

@@ -1,35 +1,28 @@
 import Vue from 'vue'
 
+import '@/assets/index.scss'
 import VueRouter from 'vue-router'
 import Cookies from 'js-cookie'
 import App from './App'
 import store from './store'
 import router from './router'
+import 'amfe-flexible'
 
+import { parseTime } from "@/utils/ruoyi";
+// vant
+import Vant from 'vant';
+import 'vant/lib/index.css';
 
 Vue.prototype.msgSuccess = function (msg) {
   this.$message({ showClose: true, message: msg, type: "success", offset:100 });
 }
-
 Vue.prototype.msgError = function (msg) {
   this.$message({ showClose: true, message: msg, type: "error", offset:100 });
 }
-
 Vue.prototype.msgInfo = function (msg) {
   this.$message.info(msg);
 }
-
-/**
- * If you don't want to use mock-server
- * you want to use MockJs for mock api
- * you can execute: mockXHR()
- *
- * Currently MockJs will be used in the production environment,
- * please remove it before going online! ! !
- */
-
 Vue.config.productionTip = false
-
 // 避免路由冗余导航
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push(location) {
@@ -39,9 +32,15 @@ const originalReplace = VueRouter.prototype.replace
 VueRouter.prototype.replace = function replace(location) {
   return originalReplace.call(this, location).catch(err => err)
 }
+
+
+Vue.use(Vant);
+Vue.prototype.parseTime = parseTime
+
 new Vue({
   el: '#app',
   router,
   store,
   render: h => h(App)
 })
+

src/router/index.js

@@ -8,6 +8,11 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/home'], resolve),
     hidden: true
   },
+  {
+    path: '/login',
+    component: (resolve) => require(['@/views/login'], resolve),
+    hidden: true
+  },
   // {
   //   path: '/miniProgramPlayback',
   //   component: (resolve) => require(['@/views/miniProgramPlayback/index'], resolve),

src/utils/secret.js

@@ -0,0 +1,27 @@
+//引入crypto-js
+const CryptoJS = require('crypto-js');
+
+// //十六位十六进制数作为密钥（秘钥为随机生成，必须与后端保持一致！）
+// const key = 'J4ny0Ja678Y7P2so';
+// //十六位十六进制数作为密钥偏移量（秘钥为随机生成，必须与后端保持一致！）
+// const iv = 'pTNorfvZW2UZJbd0';
+
+const key = CryptoJS.enc.Utf8.parse("J4ny0Ja678Y7P2so");  //十六位十六进制数作为密钥
+const iv = CryptoJS.enc.Utf8.parse('pTNorfvZW2UZJbd0');   //十六位十六进制数作为密钥偏移量
+//解密方法
+function Decrypt(word) {
+  let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
+  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
+  let decrypt = CryptoJS.AES.decrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
+  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
+  return decryptedStr.toString();
+}
+
+//加密方法
+function Encrypt(word) {
+  let srcs = CryptoJS.enc.Utf8.parse(word);
+  let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
+  return encrypted.ciphertext.toString().toUpperCase();
+}
+
+export {Decrypt , Encrypt}

src/views/home.vue

@@ -6,6 +6,7 @@
       <miniProgramVideoMpegts v-if="pageType == 'miniProgramVideoMpegts'"></miniProgramVideoMpegts>
       <miniProgramVideoHls v-if="pageType == 'miniProgramVideoHls'"></miniProgramVideoHls>
       <chemicalsInstructionsVideo v-if="pageType == 'chemicalsInstructionsVideo'"></chemicalsInstructionsVideo>
+      <alarmPage v-if="pageType == 'alarm'"></alarmPage>
     </div>
 </template>
 <script>
@@ -14,6 +15,7 @@
     import miniProgramVideoMpegts from '@/views/miniProgramVideoMpegts/index.vue';
     import miniProgramVideoHls from '@/views/miniProgramVideoHls/index.vue';
     import chemicalsInstructionsVideo from '@/views/chemicalsInstructionsVideo/index.vue';
+    import alarmPage from '@/views/alarmPage/index.vue';
     export default {
         name: 'home',
         components: {
@@ -22,6 +24,7 @@
           miniProgramVideoMpegts,
           miniProgramVideoHls,
           chemicalsInstructionsVideo,
+          alarmPage,
         },
         data() {
             return {
@@ -49,6 +52,9 @@
             }else{
               this.$set(this,'pageType','miniProgramVideo');
             }
+          }else if(text.indexOf('alarmHK') != -1){
+            localStorage.setItem('alarmUrl',window.location.href);
+            this.$set(this,'pageType','alarm');
           }else if(text.indexOf('cameraIndexCode') != -1){
             this.$set(this,'pageType','miniProgramPlayback');
           }else if(text.indexOf('chemicalsInstructionsVideo') != -1){

src/views/login.vue

@@ -0,0 +1,433 @@
+<!-- 登录 -->
+<template>
+  <div id="accountLogin">
+    <img class="login-max-big" :src="loginBanner">
+    <div class="login-box">
+      <div class="tabTitle">
+        <div class="tabTitle_li" :key="index" v-for="(item,index) in tabText">
+          <p :class="{on:curTab==index}" class="tabTitle_text">{{item}}</p>
+        </div>
+      </div>
+      <div class="input-max-box-one">
+        <div class="input-box">
+          <img :src="imagesUrl('commonality/img_log_in_account.png')">
+          <input type="text" v-model="username" @confirm="login()"
+                 placeholder="请输入账号" maxlength="20">
+        </div>
+      </div>
+      <div class="input-max-box-two">
+        <div class="input-box">
+          <img :src="imagesUrl('commonality/img_log_in_password.png')">
+          <input type="password" v-model="password" @confirm="login()"
+                 placeholder="请输入密码" maxlength="20">
+        </div>
+      </div>
+      <div class="check-box" @click="checkboxChange()">
+        <img v-if="checkedType" :src="imagesUrl('commonality/icon_13.png')">
+        <img v-if="!checkedType" :src="imagesUrl('commonality/icon_12.png')"/>
+        <p>记住我</p>
+      </div>
+      <p class="button-box" @click="login()">登录</p>
+      <!--<p class="passwrod-button-box" @click="forgotPasswordButton()">忘记密码?</p>-->
+    </div>
+    <!-- <view class="loginButton" @click="backButton()">统一身份认证登录</view> -->
+  </div>
+</template>
+
+<script>
+  import { Toast } from 'vant';
+  import {judgmentNetworkReturnAddress} from "@/utils/ruoyi";
+  import md5 from 'js-md5';
+  import {
+    login,
+    configInfo,
+    getConfigByType,
+    systemSubjectCheckIsAdminOrSafeUser,
+    securityDataStatisticsGetUserIdentity
+  } from '@/api/index.js'
+  import { Encrypt,Decrypt} from '@/utils/secret'
+  export default {
+    data() {
+      return {
+        identityStatus: 1,
+        username: "",
+        password: "",
+        checkedType: false,
+        loginBanner: localStorage.getItem('loginBanner'),
+        infoList: [], //模板消息Id
+        tabText: ['登录'],
+        curTab: 0,
+        pageType: 0,
+        supplierType: false,
+      }
+    },
+
+    created() {
+      if (localStorage.getItem('userName') && localStorage.getItem('password')) {
+        this.username = localStorage.getItem('userName');
+        this.password = localStorage.getItem('password');
+        this.checkedType = true;
+      }
+    },
+    mounted() {
+      this.getConfigInfo();
+    },
+    methods: {
+      imagesUrl(imgUrl) {
+        return 'https://zj-wechat.oss-cn-beijing.aliyuncs.com/xcx_images/xcx_v3/' + imgUrl
+      },
+      //登录
+      login(){
+        let obj = {
+          account: this.username,
+          password: md5(this.password),
+        }
+        login(obj).then(response => {
+          if (response.data.userType == 0 || response.data.userType == 1 || response.data.userType == 2) {
+            localStorage.setItem('dataBoardType', false);
+            localStorage.setItem('touken', response.data.token);
+            localStorage.setItem('userId', response.data.userId);
+            localStorage.setItem('isInitPwd', true);
+            // userType 0-系统 1-教职工 2-学生 3-大屏
+            localStorage.setItem('userType', response.data.userType == 0 || response.data.userType == 1 ? '1' :
+              (response.data.userType == 2 ? '2' : (response.data.userType == 3 ? '3' : 'none')));
+            if (this.checkedType) {
+              localStorage.setItem('userName', this.username)
+              localStorage.setItem('password', this.password)
+            } else {
+              localStorage.removeItem('userName')
+              localStorage.removeItem('password')
+            }
+            //等待配置与字段获取到后跳转
+            Promise.all([
+              //获取开发配置
+              this.getConfigByType(),
+            ]).then((result) => {
+              //查询是否是管理员/安全员
+              this.systemSubjectCheckIsAdminOrSafeUser()
+            }).catch((error) => {
+              uni.showToast({
+                title: '数据异常,请稍候再试!',
+                icon: "none",
+                duration: 3000
+              });
+            })
+          } else {
+            uni.showToast({
+              title: '非教职工/学生账号,无法登录本系统.',
+              icon: "none",
+              duration: 3000
+            });
+          }
+        })
+      },
+      //查询公共配置
+      getConfigInfo() {
+        let urlText = window.location.href.split('://')[0] + '://' + judgmentNetworkReturnAddress();
+        configInfo({type: '1,2,4'}).then(response => {
+          let list = JSON.parse(response.data)
+          let newData = {};
+          list.forEach((item) => {
+            let obj = JSON.parse(item.configValue)
+            newData = {
+              ...newData,
+              ...obj
+            }
+          });
+          localStorage.setItem('circularLogo', urlText + newData.circularLogo)
+          localStorage.setItem('rectangleLogo', urlText + newData.rectangleLogo)
+          localStorage.setItem('videoCover', urlText + newData.videoCover)
+          this.$set(this, 'loginBanner', urlText + newData.loginBanner);
+          localStorage.setItem('loginBanner', urlText + newData.loginBanner)
+          this.$set(this, 'supplierType', newData.supplier);
+          localStorage.setItem('supplierType', newData.supplier)
+          localStorage.setItem('homepageBanner', urlText + newData.homepageBanner)
+        })
+      },
+      //获取开发配置
+      getConfigByType() {
+        getConfigByType({category: 2, configType: 5}).then(response => {
+          let obj = JSON.parse(response.data.configValue)
+          //文件预览地址
+          localStorage.setItem('filePreviewUrl', 'https://' + obj.fileExtranetUrl)
+          //小程序视频地址
+          localStorage.setItem('cameraExtranetAgent', 'https://' + obj.cameraExtranetAgent)
+          //MQTT地址
+          localStorage.setItem('mqttUrl', Decrypt(obj.mqttExtranetUrl))
+          //MQTT地址-内网
+          localStorage.setItem('mqttIntranetUrl', Decrypt(obj.mqttIntranetUrl))
+          //MQTT账号
+          localStorage.setItem('mqttUser', Decrypt(obj.mqttExtranetUser))
+          //MQTT密码
+          localStorage.setItem('mqttPassword', Decrypt(obj.mqttExtranetPassword))
+          //文件浏览环境
+          localStorage.setItem('fileBrowseEnvironment', 'http://' + Decrypt(obj.fileBrowseEnvironment))
+          localStorage.setItem('fileBrowseEnvironmentExtranet', 'https://' + Decrypt(obj.fileBrowseEnvironmentExtranet))
+        })
+      },
+      //查询是否是管理员/安全员
+      systemSubjectCheckIsAdminOrSafeUser(){
+        systemSubjectCheckIsAdminOrSafeUser({}).then(response => {
+          if (response.data.isSafe || response.data.isAdmin) {
+            window.location.href = localStorage.getItem('alarmUrl');
+          }else{
+            this.securityDataStatisticsGetUserIdentity();
+          }
+        })
+      },
+      //查询是否是校级管理员/院级管理员
+      securityDataStatisticsGetUserIdentity(){
+        securityDataStatisticsGetUserIdentity({}).then(response => {
+          if(response.data.schoolAdmin || response.data.collegeAdmin){
+            window.location.href = localStorage.getItem('alarmUrl');
+          }else{
+            Toast.fail('您无权查看报警信息,请联系管理员.');
+          }
+        })
+      },
+      checkboxChange() {
+        this.checkedType = !this.checkedType;
+      },
+
+    },
+
+  }
+</script>
+
+<style scoped lang="scss">
+  #accountLogin {
+    height: 100%;
+    width: 100%;
+    background: #f5f5f5;
+    position: relative;
+    .login-max-big {
+      width: 750px;
+      height: 1177px;
+      z-index: 0;
+    }
+
+    .login-box {
+      z-index: 3;
+      position: absolute;
+      top: 430px;
+      left: 46px;
+      width: 658px;
+      height: 700px;
+
+      // background #fff
+      /* 切换按钮 */
+      .tabTitle {
+        display: flex;
+        width: 100%;
+        height: 100px;
+        position: absolute;
+        // top: 50px;
+        justify-content: center;
+
+        .tabTitle_li {
+          width: 168px;
+          text-align: center;
+
+          .tabTitle_text {
+            display: inline-block;
+            font-size: 32px;
+            font-family: PingFang SC;
+            font-weight: 500;
+            color: #333333;
+            line-height: 90px;
+
+            &.on {
+              color: #0183FA;
+            }
+          }
+
+          .tabTitle_across {
+            width: 100px;
+            height: 4px;
+            background: #0183FA;
+            border-radius: 2px;
+            margin-left: 30px;
+            display: none;
+
+            &.on {
+              display: block;
+            }
+          }
+
+        }
+      }
+
+      border-radius: 20px;
+
+      .input-max-box-one {
+        overflow: hidden;
+        // margin-top: 68px;
+
+        .input-box {
+          display: flex;
+          width: 600px;
+          height: 80px;
+          border: 1px solid #e0e0e0;
+          border-radius: 40px;
+          margin: 147px auto 0;
+
+          img {
+            width: 28px;
+            height: 32px;
+            margin: 24px 31px;
+          }
+
+          input {
+            flex: 1;
+            font-size: 24px;
+            height: 80px;
+            line-height: 80px;
+            margin-right: 31px;
+          }
+        }
+
+        .text-box {
+          height: 59px;
+          line-height: 59px;
+          color: #DC1616;
+          font-size: 24px;
+          margin-left: 102px;
+        }
+      }
+
+      .input-max-box-two {
+        margin-top: 40px;
+
+        .input-box {
+          display: flex;
+          width: 600px;
+          height: 80px;
+          border: 1px solid #e0e0e0;
+          border-radius: 40px;
+          margin: 0 auto 0;
+
+          img {
+            width: 30px;
+            height: 32px;
+            margin: 24px 30px;
+          }
+
+          input {
+            flex: 1;
+            font-size: 24px;
+            height: 80px;
+            line-height: 80px;
+            margin-right: 31px;
+          }
+        }
+
+        .text-box {
+          height: 59px;
+          line-height: 59px;
+          color: #DC1616;
+          font-size: 24px;
+          margin-left: 102px;
+        }
+      }
+
+      .check-box {
+        margin: 30px 0 30px 104px;
+        width: 300px;
+        height: 50px;
+        display: flex;
+
+        img {
+          margin-top: 10px;
+          width: 32px;
+          height: 32px;
+          margin-right: 10px;
+        }
+        p {
+          font-size: 24px;
+          line-height: 50px;
+        }
+      }
+
+      .button-box {
+        width: 600px;
+        line-height: 80px;
+        background: #0183FA;
+        border-radius: 40px;
+        font-size: 36px;
+        color: #fff;
+        text-align: center;
+        margin: 0 auto 0;
+      }
+      .passwrod-button-box {
+        line-height: 60px;
+        width: 120px;
+        margin: 20px 0 0 40px;
+        color: #333;
+        font-size: 24px;
+      }
+      /* 供应商注册 */
+      .supplier {
+        display: flex;
+        justify-content: space-between;
+        margin: 30px 40px 0;
+
+        .supplier_l {
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 24px;
+        }
+
+        .supplier_r {
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #333333;
+          line-height: 24px;
+
+          > text {
+            color: #0183FA;
+          }
+        }
+      }
+
+      /* 供应商切换 */
+      .switch_btn {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #0183FA;
+        line-height: 24px;
+        margin-top: 60px;
+
+        > img {
+          width: 24px;
+          height: 24px;
+          margin-left: 12px;
+        }
+      }
+    }
+    .loginButton {
+      position: absolute;
+      width: 100%;
+      bottom: 40px;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      color: #0183fa;
+      font-size: 28px;
+    }
+    .top-back {
+      z-index: 2;
+      position: absolute;
+      top: 261px;
+      left: 375px;
+      height: 296px;
+      width: 366px;
+    }
+  }
+</style>

vue.config.js

@@ -86,7 +86,18 @@ module.exports = {
         sassOptions: {
           outputStyle: 'expanded'
         }
-      }
+      },
+      postcss: {
+        plugins: [
+          require('postcss-pxtorem')({ // 把px单位换算成rem单位
+            rootValue ({ file }) {
+              return file.indexOf('vant') !== -1 ? 37.5 : 75
+            },
+            // rootValue: 75, // 换算的基数(设计图750的根字体为75,如果设计图为640:则rootValue=64)
+            propList: ['*']
+          })
+        ]
+      },
     }
   },
   configureWebpack: {