login

pc/src/App.vue

@@ -7,6 +7,7 @@
 
 <style lang="less">
 	@import url('./assets/public.css');
+	@import url('./assets/icons.css');
 	#app {
 		position: relative;
 		width: 100vw;

pc/src/assets/icons.css

+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?e6yl7u');
+  src:  url('fonts/icomoon.eot?e6yl7u#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?e6yl7u') format('truetype'),
+    url('fonts/icomoon.woff?e6yl7u') format('woff'),
+    url('fonts/icomoon.svg?e6yl7u#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-1:before {
+  content: "\e900";
+}
+.icon-2:before {
+  content: "\e901";
+}
+.icon-3:before {
+  content: "\e902";
+}
+.icon-4:before {
+  content: "\e903";
+}
+.icon-5:before {
+  content: "\e904";
+}
+.icon-6:before {
+  content: "\e905";
+}
+.icon-7:before {
+  content: "\e906";
+}
+.icon-8:before {
+  content: "\e907";
+}
+.icon-9:before {
+  content: "\e908";
+}
+.icon-10:before {
+  content: "\e909";
+}
+.icon-11:before {
+  content: "\e90a";
+}
+.icon-12:before {
+  content: "\e90b";
+}
+.icon-13:before {
+  content: "\e90c";
+}
+.icon-14:before {
+  content: "\e90d";
+}
+.icon-15:before {
+  content: "\e90e";
+}
+.icon-16:before {
+  content: "\e90f";
+}
+.icon-17:before {
+  content: "\e910";
+}
+.icon-18:before {
+  content: "\e911";
+}
+.icon-19:before {
+  content: "\e912";
+}
+.icon-20:before {
+  content: "\e913";
+}
+.icon-21:before {
+  content: "\e914";
+}
+.icon-22:before {
+  content: "\e915";
+}
+.icon-23:before {
+  content: "\e916";
+}
+.icon-24:before {
+  content: "\e917";
+}
+.icon-25:before {
+  content: "\e918";
+}
+.icon-26:before {
+  content: "\e919";
+}
+.icon-27:before {
+  content: "\e91a";
+}
+.icon-28:before {
+  content: "\e91b";
+}
+.icon-29:before {
+  content: "\e91c";
+}

pc/src/views/login.vue

 <template>
-
+	<div class="login">
+		<div class="mask"></div>
+		<div class="login-box">
+			<img class="title" src="~@/assets/img/title.png" alt="">
+			<div class="account-box">
+				<p class="account-title">账户登录</p>
+				<div class="row">
+					<span class="icon icon-16"></span>
+					<input class="input" type="text" v-model="name" placeholder="请输入您的账号" />
+				</div>
+				<div class="row">
+					<span class="icon icon-17"></span>
+					<input class="input" type="password" v-model="password" placeholder="请输入密码" />
+				</div>
+				<div class="opt">
+					<span class="btn">登录</span>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
 	// @ is an alias to /src
+	import {reactive,ref} from "vue"
 	export default {
 		name: 'login',
+		setup(props,{emit}){
+			const state = reactive({
+				name:'',
+				password:''
+			});
+			return {
+				...ref(state)
+			}
+		},
 		components: {}
 	}
 </script>
+<style lang="less">
+	.login{
+		width: 100%;
+		height: 100%;
+		background: url("../assets/img/login-bg.png") no-repeat center 100%/cover;
+		-webkit-user-select: none;
+		.mask{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			background-color: rgba(0,0,0,.4);
+			z-index: 1;
+		}
+		.login-box{
+			position: absolute;
+			top: 126px;
+			right: 144px;
+			z-index: 2;
+			display: flex;
+			flex-direction: column;
+			align-items: flex-end;
+			.account-box{
+				display: flex;
+				flex-direction: column;
+				width: 460px;
+				height: 495px;
+				background-color: rgba(255,255,255,.1);
+				filter:brightness(130%);
+				backdrop-filter: blur(9px);
+				border-radius: 16px;
+				box-shadow: 0 0 20px rgba(0,0,0,.2);
+				margin-top: 100px;
+				padding: 15px 20px 30px 20px;
+				overflow: hidden;
+				.account-title{
+					flex-shrink: 0;
+					color: #fff;
+					text-align: center;
+					font-size: 36px;
+					line-height: 100px;
+				}
+				.row{
+					flex-shrink: 0;
+					background-color:rgba(255,255,255,.3);
+					border-radius: 8px;
+					padding: 20px;
+					margin: 10px 0;
+					display: flex;
+					align-items: center;
+					overflow: hidden;
+					.icon{
+						flex-shrink: 0;
+						color: #fff;
+						font-size: 16px;
+					}
+					.input{
+						flex: 1;
+						background-color: transparent;
+						color: #fff;
+						margin-left: 10px;
+						&::placeholder{
+							color: #fff;
+						}
+					}
+				}
+				.opt{
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					justify-content: flex-end;
+					filter:brightness(80%);
+					.btn{
+						width: 100%;
+						height: 60px;
+						color: #fff;
+						border-radius: 6px;
+						line-height: 60px;
+						text-align: center;
+						background-color: #14cee1;
+						cursor: pointer;
+						&:hover{
+							opacity: .9;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
+