浏览代码

UI-login:title & image

whao 2 年之前
父节点
当前提交
0661732840
共有 1 个文件被更改,包括 20 次插入5 次删除
  1. 20 5
      src/views/system/login.vue

+ 20 - 5
src/views/system/login.vue

@@ -1,9 +1,10 @@
 <template>
-	<div class="login">
+	<div class="login" :style="{backgroundImage: 'url('+backgroudImg+')'}">
 		  <StarBackground />
 		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
-			<h3 class="title"> 通榆县乡村振兴综合监管平台</h3>
-			<h3 class="title">数字农业</h3>
+			<h3 class="sub-title" v-if="systemTitle.subTitle">{{systemTitle.subTitle}}</h3>
+			<h3 class="title">{{systemTitle.title}}</h3>
+			
 			<div class="login-container">
 				<h4>请登录</h4>
 				<el-form-item prop="username">
@@ -64,6 +65,11 @@
 		},
 		data() {
 			return {
+				backgroudImg:require('../../assets/images/login/login-ty.jpg'), //背景图片
+			    systemTitle:{
+					title:'通榆县乡村振兴综合监管平台',  //标题
+					subTitle:'数字农业'  //副标题
+				},
 				codeUrl: '',
 				loginForm: {
 					username: 'admin',
@@ -177,8 +183,9 @@
 		justify-content: center;
 		align-items: center;
 		height: 100%;
-		background: url("../../assets/images/login/login-ty.jpg") center;
 		background-size: cover;
+		background-repeat: no-repeat;
+		background-position: center;
 	}
 
 	.m-b-15 {
@@ -190,9 +197,16 @@
 		text-align: center;
 		color: #fff;
 		font-family: $fontFk;
-		font-size: 38px;
+		font-size: 36px;
 
 	}
+	.sub-title{
+		margin: 0px auto 10px auto;
+		text-align: center;
+		color: #fff;
+		font-family: $fontFk;
+		font-size: 55px;
+	}
 
 	.login-form {
 		border-radius: 6px;
@@ -237,6 +251,7 @@
 		}
 
 		.el-button--primary {
+			margin-top: 10px;
 			font-size: 20px;
 			background: #3e69fb;
 			padding: 15px