登录页动态配置

package.json

@@ -1,72 +1,72 @@
 {
-    "name": "vue-admin-beautiful-antdv",
-    "version": "1.0.0",
-    "private": true,
-    "scripts": {
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint",
-        "clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org",
-        "use:npm": "nrm use npm",
-        "use:taobao": "nrm use taobao",
-        "update": "ncu -u --target greatest&&npm install --registry=https://registry.npm.taobao.org",
-        "deploy": "start ./deploy.sh"
-    },
-    "dependencies": {
-        "ant-design-vue": "2.0.0-rc.9",
-        "axios": "^0.21.1",
-        "clipboard": "^2.0.6",
-        "core-js": "^3.8.3",
-        "dayjs": "^1.10.4",
-        "default-passive-events": "^2.0.0",
-        "echarts": "^5.2.1",
-        "element-plus": "^1.1.0-beta.20",
-        "js-cookie": "^3.0.0-rc.1",
-        "mockjs": "^1.1.0",
-        "remixicon": "^2.5.0",
-        "video.js": "^7.17.0",
-        "videojs-contrib-hls": "^5.15.0",
-        "vue": "^3.2.18",
-        "vue-router": "^4.0.3",
-        "vuex": "^4.0.0"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "^4.5.9",
-        "@vue/cli-plugin-eslint": "^4.5.9",
-        "@vue/cli-service": "^4.5.9",
-        "@vue/compiler-sfc": "^3.0.5",
-        "@vue/eslint-config-prettier": "^6.0.0",
-        "babel-eslint": "^11.0.0-beta.2",
-        "body-parser": "^1.19.0",
-        "chalk": "^4.1.0",
-        "chokidar": "^3.5.1",
-        "eslint": "^7.19.0",
-        "eslint-plugin-prettier": "^3.3.1",
-        "eslint-plugin-vue": "^7.5.0",
-        "filemanager-webpack-plugin": "^3.1.0",
-        "image-webpack-loader": "^8.1.0",
-        "imagemin-gifsicle": "^2.0.0",
-        "less": "^4.1.1",
-        "less-loader": "^7.3.0",
-        "lint-staged": "^10.5.3",
-        "node-sass": "^4.14.1",
-        "prettier": "^2.2.1",
-        "sass": "^1.42.1",
-        "sass-loader": "^8.0.2",
-        "stylelint": "^13.9.0",
-        "stylelint-config-prettier": "^8.0.2",
-        "stylelint-config-recess-order": "^2.3.0",
-        "svg-sprite-loader": "^5.2.1",
-        "vab-config": "0.0.8",
-        "webpackbar": "^5.0.0-3"
-    },
-    "gitHooks": {
-        "pre-commit": "lint-staged"
-    },
-    "lint-staged": {
-        "*.{js,jsx,vue}": [
-            "vue-cli-service lint",
-            "git add"
-        ]
-    }
+  "name": "vue-admin-beautiful-antdv",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "clear": "rimraf node_modules&&npm install --registry=https://registry.npm.taobao.org",
+    "use:npm": "nrm use npm",
+    "use:taobao": "nrm use taobao",
+    "update": "ncu -u --target greatest&&npm install --registry=https://registry.npm.taobao.org",
+    "deploy": "start ./deploy.sh"
+  },
+  "dependencies": {
+    "ant-design-vue": "2.0.0-rc.9",
+    "axios": "^0.21.1",
+    "clipboard": "^2.0.6",
+    "core-js": "^3.8.3",
+    "dayjs": "^1.10.4",
+    "default-passive-events": "^2.0.0",
+    "echarts": "^5.2.1",
+    "element-plus": "^1.1.0-beta.20",
+    "js-cookie": "^3.0.0-rc.1",
+    "mockjs": "^1.1.0",
+    "remixicon": "^2.5.0",
+    "video.js": "^7.17.0",
+    "videojs-contrib-hls": "^5.15.0",
+    "vue": "^3.2.18",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.5.9",
+    "@vue/cli-plugin-eslint": "^4.5.9",
+    "@vue/cli-service": "^4.5.9",
+    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^11.0.0-beta.2",
+    "body-parser": "^1.19.0",
+    "chalk": "^4.1.0",
+    "chokidar": "^3.5.1",
+    "eslint": "^7.19.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.5.0",
+    "filemanager-webpack-plugin": "^3.1.0",
+    "image-webpack-loader": "^8.1.0",
+    "imagemin-gifsicle": "^2.0.0",
+    "less": "^4.1.1",
+    "less-loader": "^7.3.0",
+    "lint-staged": "^10.5.3",
+    "node-sass": "^4.14.1",
+    "prettier": "^2.2.1",
+    "sass": "^1.42.1",
+    "sass-loader": "^8.0.2",
+    "stylelint": "^13.9.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-recess-order": "^2.3.0",
+    "svg-sprite-loader": "^5.2.1",
+    "vab-config": "0.0.8",
+    "webpackbar": "^5.0.0-3"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  }
 }

src/views/login/index.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="login-container">
+  <div
+    class="login-container"
+    :style="{ backgroundImage: 'url(' + backdropUrl + ')' }"
+  >
     <a-row>
       <a-col :xs="0" :md="0" :sm="12" :lg="14" :xl="16"></a-col>
       <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="6">
         <div class="login-container-form">
           <div class="login-container-hello">hello!</div>
-          <div class="login-container-title">欢迎来到永天电力后台管理系统{{ title }}</div>
+          <div class="login-container-title">欢迎来到{{ companyName }}</div>
           <a-form :model="form" @submit="handleSubmit" @submit.prevent>
             <a-form-item>
               <a-input v-model:value="form.username" placeholder="Username">
@@ -28,7 +31,7 @@
 
             <a-form-item>
               <JcRange
-              :status="status"
+                :status="status"
                 @successFun="onSuccess()"
                 @errorFun="onError()"
               ></JcRange>
@@ -38,7 +41,11 @@
               <a-button
                 type="primary"
                 html-type="submit"
-                :disabled="form.username === '' || form.password === ''||status==false"
+                :disabled="
+                  form.username === '' ||
+                  form.password === '' ||
+                  status == false
+                "
               >
                 登录
               </a-button>
@@ -79,6 +86,9 @@ export default {
       redirect: undefined,
       dependencies: dependencies,
       devDependencies: devDependencies,
+
+      companyName: '永天电力后台管理系统',
+      backdropUrl: require('@/assets/login_images/login_background.png'),
     }
   },
   computed: {
@@ -96,8 +106,22 @@ export default {
     },
   },
   mounted() {
-    this.form.username = ''   //admin
-    this.form.password = ''   //admin123
+    
+    //根据不同的域名，显示不同的title和背景图
+    this.companyName='永天电力后台管理系统'
+    this.backdropUrl=require('@/assets/login_images/login_background.png')
+
+    // if (window.location.host.indexOf('localhost') != -1) {
+    //   this.companyName='永天电力后台管理系统1'
+    //   this.backdropUrl=require('@/assets/images/bg-smooth.jpg')
+    // } else {
+    //    this.companyName='永天电力后台管理系统'
+    //    this.backdropUrl=require('@/assets/login_images/login_background.png')
+    // }
+
+
+    this.form.username = '' //admin
+    this.form.password = '' //admin123
 
     const router = useRouter()
     console.log(router)
@@ -117,7 +141,6 @@ export default {
     onSuccess() {
       console.log('滑块成功')
       this.status = true
-   
     },
     onError() {
       console.log('滑块失败')
@@ -126,7 +149,7 @@ export default {
 
     async handleSubmit() {
       await this.login(this.form)
-        await this.$router.push(this.handleRoute())
+      await this.$router.push(this.handleRoute())
     },
   },
 }
@@ -135,11 +158,11 @@ export default {
 .login-container {
   width: 100%;
   height: 100vh;
-  background: url('~@/assets/login_images/login_background.png');
+  // background: url('~@/assets/login_images/login_background.png');
   background-size: cover;
   &-form {
     width: calc(100% - 40px);
-    min-width:360px;
+    min-width: 360px;
     height: 440px;
     padding: 4vh;
     margin-top: calc((100vh - 380px) / 2);

vue.config.js

@@ -65,6 +65,7 @@ module.exports = {
         port: devPort,
         open: true,
         noInfo: false,
+        port: 10000,
         overlay: {
             warnings: true,
             errors: true,