From 77b37920af92960445a6ae5bf85cf1ca14a48d7d Mon Sep 17 00:00:00 2001
From: sakuya <81883387@qq.com>
Date: Mon, 19 Jul 2021 22:40:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/tags.vue   |  2 +-
 src/views/template/list/save.vue | 20 +++++++++++++++-----
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/layout/components/tags.vue b/src/layout/components/tags.vue
index 0dfb3d2a..38cc6b8b 100644
--- a/src/layout/components/tags.vue
+++ b/src/layout/components/tags.vue
@@ -44,7 +44,7 @@
 				//判断标签容器是否出现滚动条
 				this.$nextTick(() => {
 					const tags = this.$refs.tags
-					if(tags.scrollWidth > tags.clientWidth){
+					if(tags && tags.scrollWidth > tags.clientWidth){
 						//确保当前标签在可视范围内
 						let targetTag = tags.querySelector(".active")
 						targetTag.scrollIntoView()
diff --git a/src/views/template/list/save.vue b/src/views/template/list/save.vue
index 581c2c96..e929858f 100644
--- a/src/views/template/list/save.vue
+++ b/src/views/template/list/save.vue
@@ -9,8 +9,12 @@
 
 <template>
 	<div class="sc-page-header">
+		<div class="sc-page-header__icon">
+			<span><i class="el-icon-burger"></i></span>
+		</div>
 		<div class="sc-page-header__title">
-			<h2>新开标签页面</h2>
+			<h2 v-if="id">编辑页面 ID:{{id}}</h2>
+			<h2 v-else>新增页面</h2>
 			<p>可用于非常复杂的表单提交，如一些较为简单的表单提交应使用dialog或者drawer更合适</p>
 		</div>
 	</div>
@@ -39,7 +43,7 @@
 					<el-input v-model="form.name" placeholder="请输入名称" clearable></el-input>
 				</el-form-item>
 				<el-form-item>
-					<el-button type="primary" size="medium">保 存</el-button>
+					<el-button type="primary" size="medium" @click="save">保 存</el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
@@ -73,13 +77,19 @@
 			}
 		},
 		methods: {
-
+			save(){
+				console.log(this.$store);
+			}
 		}
 	}
 </script>
 
 <style>
-	.sc-page-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:25px 25px;}
-	.sc-page-header__title h2 {font-size: 17px;color: #3c4a54;font-weight: bold;}
+	.sc-page-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:20px 25px;display: flex;}
+	.sc-page-header__icon {width: 50px;}
+	.sc-page-header__icon span {display: inline-block;width: 30px;height: 30px;background: #409EFF;border-radius: 40%;display: flex;align-items: center;justify-content: center;}
+	.sc-page-header__icon span i {color: #fff;font-size: 14px;}
+	.sc-page-header__title {flex: 1;}
+	.sc-page-header__title h2 {font-size: 17px;color: #3c4a54;font-weight: bold;margin-top: 3px;}
 	.sc-page-header__title p {font-size: 13px;color: #999;margin-top: 15px;}
 </style>