Browse Source

修改网页标题
登录页区分

彭宇 2 năm trước cách đây
mục cha
commit
0cdffc9f27

BIN
src/assets/images/login/login-ty.jpg


BIN
src/assets/images/login/login.jpg


BIN
src/assets/images/login/login2.jpg


+ 69 - 0
src/components/star.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="stars">
+    <div class="star" v-for="(item, index) in starsCount" :key="index" ref="star"></div>
+  </div>
+</template>
+ 
+<script>
+ 
+export default {
+  name: 'StarBackground',
+  props: {},
+  data() {
+    return {
+      starsCount: 1500,
+      distance: 1000
+    }
+  },
+  mounted() {
+    this.initStars()
+  },
+  methods: {
+    initStars() {
+      let starArr = this.$refs.star
+      starArr.forEach(item => {
+        let speed = 0.2 + (Math.random() * 1)
+        let thisDistance = this.distance + (Math.random() * 300)
+        item.style.transformOrigin = `0 0 ${thisDistance}px`
+        item.style.transform = `translate3d(0, 0, -${thisDistance}px) rotateY(${(Math.random() * 360)}deg) rotateX(${(Math.random() * -50)}deg) scale(${speed}, ${speed})`
+      })
+    }
+  }
+}
+</script>
+ 
+<style scoped lang="scss">
+@keyframes rotate {
+  0% {
+    transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
+  }
+  100% {
+    transform: perspective(600px) rotateZ(20deg) rotateX(-40deg) rotateY(-360deg);
+  }
+}
+ 
+.stars {
+  transform: perspective(500px);
+  transform-style: preserve-3d;
+  position: absolute;
+  perspective-origin: 50% 100%;
+  left: 50%;
+  animation: rotate 90s infinite linear;
+  bottom: -200px;
+}
+ 
+.star {
+  width: 3px;
+  height: 2px;
+  background: #39ffe8;
+  position: absolute;
+  top: 0;
+  left: 0;
+  backface-visibility: hidden;
+  border-radius: 2px;
+  box-shadow: 0 0 5px rgba($color: #00f6ff, $alpha: 1);
+  // box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+  // -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+  // -moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
+}
+</style>

+ 1 - 1
src/layout/components/Sidebar/Logo.vue

@@ -35,7 +35,7 @@ export default {
   },
   data() {
     return {
-      title: '若依管理系统',
+      title: '通榆县乡村振兴监管平台',
       logo: logoImg
     }
   }

+ 4 - 4
src/router/index.js

@@ -35,12 +35,12 @@ export const constantRoutes = [
 		redirect: 'forest',
 	},
 	{
-		//消防云图
+		//应急云图
 		path: '/forest',
 		name: 'forest',
 		component: () => import('@/views/forest'),
 		meta: {
-			title: '消防云图'
+			title: '应急云图'
 		}
 	},
 	{
@@ -80,12 +80,12 @@ export const constantRoutesNew = [{
 		redirect: 'forest',
 	},
 	{
-		//消防云图
+		//应急云图
 		path: '/forest',
 		name: 'forest',
 		component: () => import('@/views/forest'),
 		meta: {
-			title: '消防云图'
+			title: '应急云图'
 		}
 	},
 	{

+ 2 - 2
src/views/bigdata/bigdata.vue

@@ -179,9 +179,9 @@
       return {
         visited: '',
         navbar: [{
-          //消防云图
+          //应急云图
           path: '/forest',
-          name: '消防云图'
+          name: '应急云图'
         },
           {
             //数据中心

+ 253 - 245
src/views/system/login.vue

@@ -1,271 +1,279 @@
 <template>
-  <div class="login">
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">通榆县乡村振兴监管平台</h3>
-      <div class="login-container">
-        <h4>请登录</h4>
-        <el-form-item prop="username">
-          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号" class="m-b-15">
-            <svg-icon slot="prefix" icon-class="user" 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="handleLogin" class="m-b-15">
-            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
-          </el-input>
-        </el-form-item>
-        <el-form-item prop="code" v-if="captchaOnOff">
-          <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
-                    @keyup.enter.native="handleLogin">
-            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon"/>
-          </el-input>
-          <div class="login-code">
-            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
-          </div>
-        </el-form-item>
-        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-        <el-form-item style="width:100%;">
-          <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
-                     @click.native.prevent="handleLogin">
-            <span v-if="!loading">登 录</span>
-            <span v-else>登 录 中...</span>
-          </el-button>
-          <div style="float: right;" v-if="register">
-            <router-link class="link-type" :to="'/register'">立即注册</router-link>
-          </div>
-        </el-form-item>
-      </div>
-    </el-form>
-  </div>
+	<div class="login">
+		  <StarBackground />
+		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+			<h3 class="title"> 通榆县乡村振兴综合监管平台</h3>
+			<h3 class="title">数字应急</h3>
+			<div class="login-container">
+				<h4>请登录</h4>
+				<el-form-item prop="username">
+					<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号"
+						class="m-b-15">
+						<svg-icon slot="prefix" icon-class="user" 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="handleLogin" class="m-b-15">
+						<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+					</el-input>
+				</el-form-item>
+				<el-form-item prop="code" v-if="captchaOnOff">
+					<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
+						@keyup.enter.native="handleLogin">
+						<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+					</el-input>
+					<div class="login-code">
+						<img :src="codeUrl" @click="getCode" class="login-code-img" />
+					</div>
+				</el-form-item>
+<!--				<el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>-->
+				<el-form-item style="width:100%;">
+					<el-button :loading="loading" size="medium" type="primary" style="width:100%;"
+						@click.native.prevent="handleLogin">
+						<span v-if="!loading">登 录</span>
+						<span v-else>登 录 中...</span>
+					</el-button>
+					<div style="float: right;" v-if="register">
+						<router-link class="link-type" :to="'/register'">立即注册</router-link>
+					</div>
+				</el-form-item>
+			</div>
+		</el-form>
+	</div>
 </template>
 
 <script>
-  import {
-    getCodeImg
-  } from '@/api/login'
-  import Cookies from 'js-cookie'
-  import {
-    encrypt,
-    decrypt
-  } from '@/utils/jsencrypt'
+	import StarBackground from '@/components/star'
+	import {
+		getCodeImg
+	} from '@/api/login'
+	import Cookies from 'js-cookie'
+	import {
+		encrypt,
+		decrypt
+	} from '@/utils/jsencrypt'
 
-  export default {
-    name: 'Login',
-    data() {
-      return {
-        codeUrl: '',
-        loginForm: {
-          username: 'admin',
-          password: 'admin123',
-          rememberMe: false,
-          code: '',
-          uuid: ''
-        },
-        loginRules: {
-          username: [{
-            required: true,
-            trigger: 'blur',
-            message: '请输入您的账号'
-          }],
-          password: [{
-            required: true,
-            trigger: 'blur',
-            message: '请输入您的密码'
-          }],
-          code: [{
-            required: true,
-            trigger: 'change',
-            message: '请输入验证码'
-          }]
-        },
-        loading: false,
-        // 验证码开关
-        captchaOnOff: true,
-        // 注册开关
-        register: false,
-        redirect: undefined
-      }
-    },
-    watch: {
-      $route: {
-        handler: function(route) {
-          this.redirect = route.query && route.query.redirect
-        },
-        immediate: true
-      }
-    },
-    created() {
-      this.getCode()
-      this.getCookie()
-    },
-    methods: {
-      getCode() {
-        getCodeImg().then(res => {
-          this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
-          if (this.captchaOnOff) {
-            this.codeUrl = 'data:image/gif;base64,' + res.img
-            this.loginForm.uuid = res.uuid
-          }
-        })
-      },
-      getCookie() {
-        const username = Cookies.get('username')
-        const password = Cookies.get('password')
-        const rememberMe = Cookies.get('rememberMe')
-        this.loginForm = {
-          username: username === undefined ? this.loginForm.username : username,
-          password: password === undefined ? this.loginForm.password : decrypt(password),
-          rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-        }
-      },
-      handleLogin() {
-        this.$refs.loginForm.validate(valid => {
-          if (valid) {
-            this.loading = true
-            // if (this.loginForm.rememberMe) {
-            //无论如何我都记-孙一石
-            if (true) {
-              Cookies.set('username', this.loginForm.username, {
-                expires: 30
-              })
-              Cookies.set('password', encrypt(this.loginForm.password), {
-                expires: 30
-              })
-              Cookies.set('rememberMe', this.loginForm.rememberMe, {
-                expires: 30
-              })
-            } else {
-              Cookies.remove('username')
-              Cookies.remove('password')
-              Cookies.remove('rememberMe')
-            }
-            this.$store.dispatch('Login', this.loginForm).then(() => {
-              console.log('!@!@!@', this.redirect)
-              this.$router.push({
-                //path: this.redirect || '/'
-                path: '/'
-              }).catch(() => {
-              })
-            }).catch(() => {
-              this.loading = false
-              if (this.captchaOnOff) {
-                this.getCode()
-              }
-            })
-          }
-        })
-      }
-    }
-  }
+	export default {
+		beforeCreate: function() {
+		    document.getElementsByTagName('body')[0].style.overflow = 'hidden'
+		  },
+		name: 'Login',
+		components:{
+			StarBackground
+		},
+		data() {
+			return {
+				codeUrl: '',
+				loginForm: {
+					username: 'admin',
+					password: 'admin123',
+					rememberMe: false,
+					code: '',
+					uuid: ''
+				},
+				loginRules: {
+					username: [{
+						required: true,
+						trigger: 'blur',
+						message: '请输入您的账号'
+					}],
+					password: [{
+						required: true,
+						trigger: 'blur',
+						message: '请输入您的密码'
+					}],
+					code: [{
+						required: true,
+						trigger: 'change',
+						message: '请输入验证码'
+					}]
+				},
+				loading: false,
+				// 验证码开关
+				captchaOnOff: true,
+				// 注册开关
+				register: false,
+				redirect: undefined
+			}
+		},
+		watch: {
+			$route: {
+				handler: function(route) {
+					this.redirect = route.query && route.query.redirect
+				},
+				immediate: true
+			}
+		},
+		created() {
+			this.getCode()
+			this.getCookie()
+		},
+		methods: {
+			getCode() {
+				getCodeImg().then(res => {
+					this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
+					if (this.captchaOnOff) {
+						this.codeUrl = 'data:image/gif;base64,' + res.img
+						this.loginForm.uuid = res.uuid
+					}
+				})
+			},
+			getCookie() {
+				const username = Cookies.get('username')
+				const password = Cookies.get('password')
+				const rememberMe = Cookies.get('rememberMe')
+				this.loginForm = {
+					username: username === undefined ? this.loginForm.username : username,
+					password: password === undefined ? this.loginForm.password : decrypt(password),
+					rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+				}
+			},
+			handleLogin() {
+				this.$refs.loginForm.validate(valid => {
+					if (valid) {
+						this.loading = true
+						// if (this.loginForm.rememberMe) {
+						//无论如何我都记-孙一石
+						if (true) {
+							Cookies.set('username', this.loginForm.username, {
+								expires: 30
+							})
+							Cookies.set('password', encrypt(this.loginForm.password), {
+								expires: 30
+							})
+							Cookies.set('rememberMe', this.loginForm.rememberMe, {
+								expires: 30
+							})
+						} else {
+							Cookies.remove('username')
+							Cookies.remove('password')
+							Cookies.remove('rememberMe')
+						}
+						this.$store.dispatch('Login', this.loginForm).then(() => {
+							console.log('!@!@!@', this.redirect)
+							this.$router.push({
+								//path: this.redirect || '/'
+								path: '/'
+							}).catch(() => {})
+						}).catch(() => {
+							this.loading = false
+							if (this.captchaOnOff) {
+								this.getCode()
+							}
+						})
+					}
+				})
+			}
+		}
+	}
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import '@/assets/styles/base.scss';
+	@import '@/assets/styles/base.scss';
 
-  .login {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    background: url("../../assets/images/login/login.jpg") center;
-    background-size: cover;
-  }
+	.login {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		background: url("../../assets/images/login/login-ty.jpg") center;
+		background-size: cover;
+	}
 
-  .m-b-15 {
-    margin-bottom: 15px;
-  }
+	.m-b-15 {
+		margin-bottom: 15px;
+	}
 
-  .title {
-    margin: 0px auto 30px auto;
-    text-align: center;
-    color: #fff;
-    font-family: $fontFk;
-    font-size: 38px;
+	.title {
+		margin: 0px auto 30px auto;
+		text-align: center;
+		color: #fff;
+		font-family: $fontFk;
+		font-size: 38px;
 
-  }
+	}
 
-  .login-form {
-    border-radius: 6px;
-    margin-left: 25%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+	.login-form {
+		border-radius: 6px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 
-    h3 {
-      text-shadow: 0 0 15px rgba($color: #00f6ff, $alpha: .7);
-    }
+		h3 {
+			text-shadow: 0 0 15px rgba($color: #00f6ff, $alpha: .7);
+		}
 
-    .login-container {
-      border-radius: 6px;
-      background: rgba($color: #fff, $alpha: .7);
-      width: 450px;
-      padding: 30px;
-      box-shadow: 0 0 20px rgba($color: #fff, $alpha: .5);
+		.login-container {
+			border-radius: 6px;
+			background: rgba($color: #fff, $alpha: .7);
+			width: 450px;
+			padding: 30px;
+			box-shadow: 0 0 20px rgba($color: #fff, $alpha: .5);
 
-      h4 {
-        border-bottom: #3e6bfb 1px solid;
-        width: fit-content;
-        display: inline-block;
-        margin-top: 0;
-        padding-bottom: 5px;
-        margin-bottom: 20px;
-      }
-    }
+			h4 {
+				border-bottom: #3e6bfb 1px solid;
+				width: fit-content;
+				display: inline-block;
+				margin-top: 0;
+				padding-bottom: 5px;
+				margin-bottom: 20px;
+			}
+		}
 
-    .el-input {
-      height: 38px;
+		.el-input {
+			height: 38px;
 
-      input {
-        height: 38px;
-      }
-    }
+			input {
+				height: 38px;
+			}
+		}
 
-    .input-icon {
-      height: 39px;
-      width: 14px;
-      margin-left: 2px;
-      color: #3e69fb;
-    }
+		.input-icon {
+			height: 39px;
+			width: 14px;
+			margin-left: 2px;
+			color: #3e69fb;
+		}
 
-    .el-button--primary {
-      font-size: 20px;
-      background: #3e69fb;
-      padding: 15px
-    }
-  }
+		.el-button--primary {
+			font-size: 20px;
+			background: #3e69fb;
+			padding: 15px
+		}
+	}
 
-  .login-tip {
-    font-size: 13px;
-    text-align: center;
-    color: #bfbfbf;
-  }
+	.login-tip {
+		font-size: 13px;
+		text-align: center;
+		color: #bfbfbf;
+	}
 
-  .login-code {
-    width: 33%;
-    height: 38px;
-    float: right;
+	.login-code {
+		width: 33%;
+		height: 38px;
+		float: right;
 
-    img {
-      cursor: pointer;
-      vertical-align: middle;
-    }
-  }
+		img {
+			cursor: pointer;
+			vertical-align: middle;
+		}
+	}
 
-  .el-login-footer {
-    height: 40px;
-    line-height: 40px;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    text-align: center;
-    color: #fff;
-    font-family: Arial;
-    font-size: 12px;
-    letter-spacing: 1px;
-  }
+	.el-login-footer {
+		height: 40px;
+		line-height: 40px;
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		text-align: center;
+		color: #fff;
+		font-family: Arial;
+		font-size: 12px;
+		letter-spacing: 1px;
+	}
 
-  .login-code-img {
-    height: 38px;
-  }
+	.login-code-img {
+		height: 38px;
+	}
 </style>

+ 1 - 2
vue.config.js

@@ -7,7 +7,7 @@ function resolve(dir) {
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
-const name = process.env.VUE_APP_TITLE || '若依管理系统' // 网页标题
+const name = process.env.VUE_APP_TITLE || '通榆县乡村振兴监管平台' // 网页标题
 
 const port = process.env.port || process.env.npm_config_port || 80 // 端口
 
@@ -52,7 +52,6 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://192.168.1.113:3031`,
         target: `http://117.78.49.164:3031`,
         changeOrigin: true,
         pathRewrite: {