UI

App.vue

@@ -31,4 +31,5 @@
 
 <style lang="scss">
   @import '@/static/scss/index.scss';
+  @import './static/font/iconfont.css';
 </style>

main.js

@@ -4,7 +4,6 @@ import store from './store' // store
 import plugins from './plugins' // plugins
 import './permission' // permission
 import config from '@/config'
-
 Vue.use(plugins)
 
 Vue.config.productionTip = false

pages.json

@@ -2,7 +2,8 @@
 	"pages": [{
 			"path": "pages/login",
 			"style": {
-				"navigationBarTitleText": "登录"
+				"navigationBarTitleText": "登录",
+				"navigationStyle": "custom"
 			}
 		}, {
 			"path": "pages/index",

pages/login.vue

@@ -1,180 +1,218 @@
 <template>
-  <view class="normal-login-container">
-  
-    <view class="login-form-content">
-      <view class="input-item flex align-center">
-        <view class="iconfont icon-user icon"></view>
-        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
-      </view>
-      <view class="input-item flex align-center">
-        <view class="iconfont icon-password icon"></view>
-        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
-      </view>
-      <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
-        <view class="iconfont icon-code icon"></view>
-        <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
-        <view class="login-code"> 
-          <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
-        </view>
-      </view>
-      <view class="action-btn">
-        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
-      </view>
-   
-    </view>
-     
-  </view>
+	<view class="normal-login-container">
+		<image src="../static/images/login-bg.png" class="login-bg-img"></image>
+		<view class="login-form-content">
+			<view class="flex">
+				<view class="login-title flex"><image src="../static/images/login-logo.png"></image>长春贞达市政施工管理平台</view>			
+			</view>
+			<view class="input-item flex align-center" style="margin-top: 80rpx;justify-content: center;">
+				<!-- <view class="iconfont icon-user icon"></view> -->
+				<view class=""><image src="../static/images/username.png" style="width: 20px;height: 20px;margin-left:20px;"></image></view>
+				<input v-model="loginForm.username" class="input" type="text" placeholder="账号" maxlength="30" />
+			</view>
+			<view class="input-item flex align-center">
+				<!-- <view class="iconfont icon-password icon"></view> -->
+				<view class=""><image src="../static/images/password.png" style="width: 20px;height: 20px;margin-left:20px;"></image></view>
+				<input v-model="loginForm.password" type="password" class="input" placeholder="密码" maxlength="20" />
+			</view>
+			<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
+				<view class="iconfont icon-code icon"></view>
+				<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
+				<view class="login-code">
+					<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
+				</view>
+			</view>
+			<view class="action-btn">
+				<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
+			</view>
+
+		</view>
+
+	</view>
 </template>
 
 <script>
-  import { getCodeImg } from '@/api/login'
-
-  export default {
-    data() {
-      return {
-        codeUrl: "",
-        captchaEnabled: true,
-        // 用户注册开关
-        register: false,
-        globalConfig: getApp().globalData.config,
-        loginForm: {
-          username: "admin",
-          password: "admin123",
-          code: "",
-          uuid: '',
-		  type:'app'
-        }
-      }
-    },
-    created() {
-      this.getCode()
-    },
-    methods: {
-      
-      // 获取图形验证码
-      getCode() {
-        getCodeImg().then(res => {
-			console.log(res)
-          this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
-          if (this.captchaEnabled) {
-            this.codeUrl = 'data:image/gif;base64,' + res.data.img
-            this.loginForm.uuid = res.data.uuid
-          }
-        })
-      },
-      // 登录方法
-      async handleLogin() {
-        if (this.loginForm.username === "") {
-          this.$modal.msgError("请输入您的账号")
-        } else if (this.loginForm.password === "") {
-          this.$modal.msgError("请输入您的密码")
-        } else if (this.loginForm.code === "" && this.captchaEnabled) {
-          this.$modal.msgError("请输入验证码")
-        } else {
-          this.$modal.loading("登录中，请耐心等待...")
-          this.pwdLogin()
-        }
-      },
-      // 密码登录
-      async pwdLogin() {
-		  this.loginForm.type='app'
-        this.$store.dispatch('Login', this.loginForm).then(() => {
-          this.$modal.closeLoading()
-          this.loginSuccess()
-        }).catch(() => {
-          if (this.captchaEnabled) {
-            this.getCode()
-          }
-        })
-      },
-      // 登录成功后，处理函数
-      loginSuccess(result) {
-        // 设置用户信息
-        this.$store.dispatch('GetInfo').then(res => {
-          this.$tab.reLaunch('/pages/index')
-        })
-      }
-    }
-  }
+	import {
+		getCodeImg
+	} from '@/api/login'
+
+	export default {
+		data() {
+			return {
+				codeUrl: "",
+				captchaEnabled: true,
+				// 用户注册开关
+				register: false,
+				globalConfig: getApp().globalData.config,
+				loginForm: {
+					username: "admin",
+					password: "admin123",
+					code: "",
+					uuid: '',
+					type: 'app'
+				}
+			}
+		},
+		created() {
+			this.getCode()
+		},
+		methods: {
+
+			// 获取图形验证码
+			getCode() {
+				getCodeImg().then(res => {
+					console.log(res)
+					this.captchaEnabled = res.data.captchaEnabled === undefined ? true : res.data.captchaEnabled
+					if (this.captchaEnabled) {
+						this.codeUrl = 'data:image/gif;base64,' + res.data.img
+						this.loginForm.uuid = res.data.uuid
+					}
+				})
+			},
+			// 登录方法
+			async handleLogin() {
+				if (this.loginForm.username === "") {
+					this.$modal.msgError("请输入您的账号")
+				} else if (this.loginForm.password === "") {
+					this.$modal.msgError("请输入您的密码")
+				} else if (this.loginForm.code === "" && this.captchaEnabled) {
+					this.$modal.msgError("请输入验证码")
+				} else {
+					this.$modal.loading("登录中，请耐心等待...")
+					this.pwdLogin()
+				}
+			},
+			// 密码登录
+			async pwdLogin() {
+				this.loginForm.type = 'app'
+				this.$store.dispatch('Login', this.loginForm).then(() => {
+					this.$modal.closeLoading()
+					this.loginSuccess()
+				}).catch(() => {
+					if (this.captchaEnabled) {
+						this.getCode()
+					}
+				})
+			},
+			// 登录成功后，处理函数
+			loginSuccess(result) {
+				// 设置用户信息
+				this.$store.dispatch('GetInfo').then(res => {
+					this.$tab.reLaunch('/pages/index')
+				})
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
-  page {
-    background-color: #ffffff;
-  }
-
-  .normal-login-container {
-    width: 100%;
-
-    .logo-content {
-      width: 100%;
-      font-size: 21px;
-      text-align: center;
-      padding-top: 15%;
-
-      image {
-        border-radius: 4px;
-      }
-
-      .title {
-        margin-left: 10px;
-      }
-    }
-
-    .login-form-content {
-      text-align: center;
-      margin: 20px auto;
-      margin-top: 15%;
-      width: 80%;
-
-      .input-item {
-        margin: 20px auto;
-        background-color: #f5f6f7;
-        height: 45px;
-        border-radius: 20px;
-
-        .icon {
-          font-size: 38rpx;
-          margin-left: 10px;
-          color: #999;
-        }
-
-        .input {
-          width: 100%;
-          font-size: 14px;
-          line-height: 20px;
-          text-align: left;
-          padding-left: 15px;
-        }
-
-      }
-
-      .login-btn {
-        margin-top: 40px;
-        height: 45px;
-      }
-      
-      .reg {
-        margin-top: 15px;
-      }
-      
-      .xieyi {
-        color: #333;
-        margin-top: 20px;
-      }
-      
-      .login-code {
-        height: 38px;
-        float: right;
-      
-        .login-code-img {
-          height: 38px;
-          position: absolute;
-          margin-left: 10px;
-          width: 200rpx;
-        }
-      }
-    }
-  }
-
-</style>
+	page {
+		background-color: #ffffff;
+	}
+
+	.normal-login-container {
+		width: 100%;
+
+		.login-bg-img {
+			width: 100%;
+			height: 100vh;
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: -1;
+		}
+
+		.logo-content {
+			width: 100%;
+			font-size: 21px;
+			text-align: center;
+			padding-top: 15%;
+
+			image {
+				border-radius: 4px;
+			}
+
+			.title {
+				margin-left: 10px;
+			}
+		}
+
+		.login-form-content {
+			text-align: center;		
+			width: 90%;
+			min-height: 45vh;
+			background-color: #ffffff;
+			border-radius: 40rpx;
+			padding: 5%;
+			box-shadow: 0 0 10px #a7a7a7;
+			position: absolute;
+			bottom: 10vh;
+			left: 50%;
+			transform: translateX(-50%);
+			
+			
+			.login-title{
+				margin-top: 20px;
+				font-size: 40rpx;
+				color: #898989;
+				image{
+					width: 70rpx;
+					height: 53rpx;
+					margin-right: 20rpx;
+				}
+			}
+
+			.input-item {
+				margin: 20px auto;
+				background-color: #f5f6f7;
+				height: 96rpx;
+				border-radius: 50px;
+
+				.icon {
+					font-size: 38rpx;
+					margin-left: 10px;
+					color: #999;
+				}
+
+				.input {
+					width: 100%;
+					font-size: 14px;
+					line-height: 20px;
+					text-align: left;
+					padding-left: 15px;
+				}
+
+			}
+
+			.login-btn {
+				margin-top: 40px;
+				height: 96rpx;
+				background: linear-gradient(105deg, #72C6FF, #79A4F0);
+				box-shadow: 0rpx 18rpx 24rpx 0rpx rgba(63,143,255,0.23);
+				border-radius: 48rpx;
+				color: #f5f6f7;
+			}
+
+			.reg {
+				margin-top: 15px;
+			}
+
+			.xieyi {
+				color: #333;
+				margin-top: 20px;
+			}
+
+			.login-code {
+				height: 38px;
+				float: right;
+
+				.login-code-img {
+					height: 38px;
+					position: absolute;
+					margin-left: 10px;
+					width: 200rpx;
+				}
+			}
+		}
+	}
+</style>