diff --git a/public/images/login-left.png b/public/images/login-left.png
new file mode 100644
index 00000000..171999df
Binary files /dev/null and b/public/images/login-left.png differ
diff --git a/src/layout/components/tags.vue b/src/layout/components/tags.vue
index bd9f3f25..9cb3d76d 100644
--- a/src/layout/components/tags.vue
+++ b/src/layout/components/tags.vue
@@ -9,7 +9,7 @@
 			</li>
 		</ul>
 	</div>
-	
+
 	<transition name="el-zoom-in-top">
 		<ul v-if="contextMenuVisible" :style="{left:left+'px',top:top+'px'}" class="contextmenu" id="contextmenu">
 			<li @click="refreshTab()">刷新</li>
diff --git a/src/style/style.less b/src/style/style.less
index 2be42c3e..98d544d8 100644
--- a/src/style/style.less
+++ b/src/style/style.less
@@ -9,7 +9,7 @@
 ::-webkit-scrollbar-track {background-color: rgba(50, 50, 50, 0.1);}
 ::-webkit-scrollbar-track:hover {background-color: rgba(50, 50, 50, 0.2);}
 
-.aminui-side-split {position: absolute;top:0px;left:0px;bottom:0px;width:65px;background: #333;z-index: 90;}
+.aminui-side-split {position: absolute;top:0px;left:0px;bottom:0px;width:65px;background: #333;z-index: 5;}
 .adminui-side-split-scroll {position: absolute;top:0px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
 .aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
 .aminui-side-split li i {font-size: 16px;}
@@ -23,11 +23,11 @@
 .adminui-side-split-scroll::-webkit-scrollbar-track:hover {background-color: rgba(255, 255, 255, 0);}
 
 
-.aminui-side {position: absolute;z-index: 80;top:0px;left:65px;bottom:0px;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
+.aminui-side {position: absolute;z-index: 5;top:0px;left:65px;bottom:0px;width:210px;background: #fff;box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);border-right: 1px solid #e6e6e6;}
 .adminui-side-scroll {position: absolute;top:0px;left:0px;bottom:0px;right:0px;overflow: auto;overflow-x:hidden;}
 
 
-.aminui-body {position: absolute;z-index: 70;top:0px;left:275px;bottom:0px;right:0px;}
+.aminui-body {position: absolute;z-index: 4;top:0px;left:275px;bottom:0px;right:0px;}
 
 .adminui-header {height: 50px;border-bottom: 1px solid #ebeef5;background: #fff;box-shadow: 0 1px 4px rgba(0,21,41,.08);display: flex;justify-content:space-between;}
 
@@ -67,4 +67,5 @@
 .el-aside {border-right: 1px solid #e6e6e6;background: #fff;padding-top:20px;}
 .el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;}
 .el-main {padding:15px;}
-.el-pagination {margin-top: 20px;}
\ No newline at end of file
+.el-pagination {margin-top: 20px;}
+.el-drawer__body {overflow: auto;}
\ No newline at end of file
diff --git a/src/views/list.vue b/src/views/list.vue
index 4e88111a..84339419 100644
--- a/src/views/list.vue
+++ b/src/views/list.vue
@@ -8,11 +8,11 @@
 		<el-container>
 
 			<el-header>
-				<el-button type="primary">主要按钮</el-button>
-				<el-button disabled>默认按钮</el-button>
-				<el-button disabled>默认按钮</el-button>
+				<el-button type="primary" icon="el-icon-plus"></el-button>
+				<el-button type="primary" icon="el-icon-delete"></el-button>
+				<el-button type="primary">默认按钮</el-button>
 				<el-dropdown style="margin-left: 10px;">
-					<el-button>更多<i class="el-icon-arrow-down el-icon--right"></i></el-button>
+					<el-button type="primary" plain icon="el-icon-arrow-down"></el-button>
 					<template #dropdown>
 						<el-dropdown-menu>
 							<el-dropdown-item>黄金糕</el-dropdown-item>
@@ -23,7 +23,7 @@
 			</el-header>
 
 			<el-main id="tableMain">
-				<el-card shadow="never" @selection-change='handleSelectionChange'>
+				<el-card shadow="never">
 					<el-table :data="tableData" row-key="name" stripe default-expand-all :height="tableHeight">
 						<el-table-column type="selection" width="50"></el-table-column>
 						<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
@@ -46,8 +46,9 @@
 						</el-table-column>
 
 						<el-table-column label="操作" fixed="right" width="100">
-							<template>
-								<el-button type="text" size="small">编辑</el-button>
+							<template #default="scope">
+								<el-button @click="table_show(scope.row)" type="text" size="small">查看</el-button>
+								<el-button @click="table_edit(scope.row)" type="text" size="small">编辑</el-button>
 							</template>
 						</el-table-column>
 					</el-table>
@@ -55,10 +56,15 @@
 				</el-card>
 			</el-main>
 		</el-container>
+		<el-drawer title="我是标题" v-model="drawer" :size="800" :append-to-body="true" direction="rtl" destroy-on-close>
+			<Show showid="我来自父组件"></Show>
+		</el-drawer>
 	</el-container>
 </template>
 
 <script>
+	import Show from './show.vue';
+
 	export default {
 		name: 'list',
 		data() {
@@ -75,9 +81,13 @@
 					]}
 				],
 				tableHeight: '0',
-				tableData: []
+				tableData: [],
+				drawer: false
 			}
 		},
+		components: {
+			Show
+		},
 		created() {
 			this.tableData = this.$TOOL.data.get("user").menuList;
 		},
@@ -96,8 +106,14 @@
 			handleNodeClick(data){
 				console.log(data);
 			},
-			handleSelectionChange(val) {
-				console.log(val);
+			table_show(row) {
+				this.$router.push({
+					path: '/template/show/' + row.meta.title
+				});
+			},
+			table_edit(row) {
+				console.log(row);
+				this.drawer = true
 			}
 		}
 	}
diff --git a/src/views/login.vue b/src/views/login.vue
index ea454600..9e727388 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,19 +1,103 @@
 <template>
-	<h2>LOGIN</h2>
-	<el-button type="primary" @click='login()'>模拟登录</el-button>
+
+	<div class="login_container">
+		<div class="login_body">
+			<div class="login-sidebox">
+				<div class="login-logo">
+					<i class="el-icon-platform-eleme"></i>SCUI
+				</div>
+				<div class="login-title">
+					<h2>面面俱到的中后台前端框架</h2>
+					<p>基于Vue 3.0 + Vue-Router 4.0 + Element-Plus + VueX + Axios 后台管理系统前端框架。</p>
+				</div>
+			</div>
+			<div class="login-form">
+				<h2>登录</h2>
+				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" size="large">
+					<el-form-item prop="user">
+						<el-input v-model="ruleForm.user" prefix-icon="el-icon-user" clearable placeholder="用户名 / 手机 / 邮箱"></el-input>
+					</el-form-item>
+					<el-form-item prop="password">
+						<el-input v-model="ruleForm.password" prefix-icon="el-icon-lock" clearable show-password placeholder="请输入密码"></el-input>
+					</el-form-item>
+					<el-form-item style="margin-bottom: 10px;">
+						<el-checkbox label="记住我" v-model="ruleForm.autologin"></el-checkbox>
+					</el-form-item>
+					<el-form-item>
+						<el-button type="primary" style="width: 100%;" @click="submitForm('ruleForm')" round>登 录</el-button>
+					</el-form-item>
+				</el-form>
+
+				<el-divider><i class="el-icon-mobile-phone"></i></el-divider>
+
+				<div class="login-oauth">
+					<el-button size="medium" type="primary" icon="el-icon-platform-eleme" circle></el-button>
+					<el-button size="medium" type="success" icon="el-icon-s-goods" circle></el-button>
+					<el-button size="medium" type="info" icon="el-icon-s-promotion" circle></el-button>
+					<el-button size="medium" type="warning" icon="el-icon-menu" circle></el-button>
+				</div>
+			</div>
+		</div>
+		<div class="login-footer">© SCUI</div>
+	</div>
+
 </template>
 
+<style scoped>
+	.login_container {position: absolute;top:50%;left:50%;width: 900px;margin: 0 auto;z-index: 1;transform: translate(-50%, -50%);}
+	.login_body {width: inherit;display: flex;box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);}
+	.login-sidebox {width: 50%;background:url(/images/login-left.png) 0 0 no-repeat #607089;padding: 60px;color: #fff;position: relative;}
+
+	.login-sidebox
+
+	.login-logo {font-size: 35px;}
+	.login-logo i {margin-right: 10px;}
+
+	.login-title {margin-top: 20px;}
+	.login-title h2 {font-size: 22px;font-weight: normal;}
+	.login-title p {font-size: 12px;margin-top:40px;line-height: 1.8;color: rgba(255,255,255,0.8);}
+
+	.login-form {width: 50%;padding: 60px;background: #fff;}
+	.login-form h2 {font-size: 24px;color: #40485b;margin-bottom: 25px;}
+	.login-oauth {display: flex;justify-content:space-around;}
+	.login-form .el-divider {margin-top:40px;}
+
+	.login-footer {text-align: center;color: #999;margin-top: 50px;}
+</style>
+
 <script>
 	export default {
 		data() {
 			return {
-
+				ruleForm: {
+					user: "admin",
+					password: "admin",
+					autologin: false
+				},
+				rules: {
+					user: [
+						{required: true, message: '请输入用户名', trigger: 'blur'}
+					],
+					password: [
+						{required: true, message: '请输入密码', trigger: 'blur'}
+					]
+				}
 			}
 		},
 		created: function() {
 			this.$TOOL.data.remove("user")
 		},
 		methods: {
+			submitForm(formName) {
+				this.$refs[formName].validate((valid) => {
+					if (valid) {
+						this.login()
+					}else{
+						console.log('error submit!!');
+						return false;
+					}
+				})
+			},
 			login: async function() {
 				var userInfo = await this.$API.user.info();
 				this.$TOOL.data.set("user", userInfo.data);
diff --git a/src/views/show.vue b/src/views/show.vue
index e5916476..dac92d50 100644
--- a/src/views/show.vue
+++ b/src/views/show.vue
@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<el-empty description="SHOW"></el-empty>
+		<h2>ID={{ id }}</h2>
 		<el-input v-model="input" placeholder="请输入内容"></el-input>
 	</div>
 </template>
@@ -8,20 +9,23 @@
 <script>
 	export default {
 		name: 'show',
+		props: ['showid'],
 		data() {
 			return {
-				id: this.$route.params.id,
+				id: this.$route.params.id || this.showid,
 				input: ""
 			}
 		},
 		mounted: function() {
-			//修改tags title
-			this.$store.commit("updateViewTags", {
-				path: this.$route.path,
-				meta: {
-					title:"详情ID="+this.id
-				}
-			})
+			//如果路由与组件名称相同修改tags title，防止作用于非路由组件时修改tags
+			if(this.$route.name==this.$options.name){
+				this.$store.commit("updateViewTags", {
+					path: this.$route.path,
+					meta: {
+						title:"详情ID="+this.id
+					}
+				})
+			}
 		}
 	}
 </script>