From cddace507dc36330d2b53769c5f085e3b59e6bd4 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Mon, 23 Oct 2017 14:26:07 +0800
Subject: [PATCH] style: refine screenful style

---
 src/components/Screenfull/index.vue    |  17 +--
 src/views/layout/components/Navbar.vue | 140 +++++++++++++------------
 2 files changed, 81 insertions(+), 76 deletions(-)

diff --git a/src/components/Screenfull/index.vue b/src/components/Screenfull/index.vue
index ceca3c81..c872ce10 100644
--- a/src/components/Screenfull/index.vue
+++ b/src/components/Screenfull/index.vue
@@ -1,16 +1,14 @@
 <template>
-  <svg @click='click' class="icon screenfull" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-    t="1497503607356" viewBox="0 0 1024 1024" version="1.1" p-id="4109" :fill='fill' :width="width" :height="height">
-    <path d="M604.157933 512l204.484208 204.484208 82.942037-82.942037c10.364045-10.952446 26.498514-13.83817 40.309054-8.067746 13.249769 5.742794 22.465664 18.99154 22.465664 33.977859l0 258.042008c0 20.168342-16.695241 36.863582-36.863582 36.863582L659.452283 954.357873c-14.986319 0-28.236088-9.215896-33.977859-23.025413-5.770424-13.249769-2.885723-29.384237 8.067746-39.748283l82.942037-82.942037L512 604.157933 307.515792 808.642141l82.942037 82.942037c10.952446 10.364045 13.83817 26.498514 8.067746 39.748283-5.742794 13.809517-18.99154 23.025413-33.977859 23.025413L106.504686 954.357873c-20.168342 0-36.863582-16.695241-36.863582-36.863582L69.641103 659.452283c0-14.986319 9.215896-28.236088 23.025413-33.977859 13.249769-5.770424 29.384237-2.8847 39.748283 8.067746l82.942037 82.942037 204.484208-204.484208L215.357859 307.515792l-82.942037 82.942037c-6.890944 6.918573-16.10684 10.952446-25.911136 10.952446-4.593622 0-9.804297-1.14815-13.83817-2.8847-13.809517-5.742794-23.025413-18.99154-23.025413-33.977859L69.641103 106.504686c0-20.168342 16.695241-36.863582 36.863582-36.863582L364.546693 69.641103c14.986319 0 28.236088 9.215896 33.977859 23.025413 5.770424 13.249769 2.8847 29.384237-8.067746 39.748283l-82.942037 82.942037 204.484208 204.484208L716.484208 215.357859l-82.942037-82.942037c-10.952446-10.364045-13.83817-26.498514-8.067746-39.748283 5.742794-13.809517 18.99154-23.025413 33.977859-23.025413l258.042008 0c20.168342 0 36.863582 16.695241 36.863582 36.863582l0 258.042008c0 14.986319-9.215896 28.236088-22.465664 33.977859-4.593622 1.736551-9.804297 2.8847-14.397918 2.8847-9.804297 0-19.020192-4.033873-25.911136-10.952446l-82.942037-82.942037L604.157933 512z"
-      p-id="4110" />
-  </svg>
+<div>
+  <svg t="1508738709248" @click='click' class="screenfull-svg" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2069" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M333.493443 428.647617 428.322206 333.832158 262.572184 168.045297 366.707916 64.444754 64.09683 64.444754 63.853283 366.570793 167.283957 262.460644Z" p-id="2070"></path><path d="M854.845439 760.133334 688.61037 593.95864 593.805144 688.764889 759.554142 854.56096 655.44604 958.161503 958.055079 958.161503 958.274066 656.035464Z" p-id="2071"></path><path d="M688.535669 428.550403 854.31025 262.801405 957.935352 366.921787 957.935352 64.34754 655.809313 64.081481 759.919463 167.535691 593.70793 333.731874Z" p-id="2072"></path><path d="M333.590658 594.033341 167.8171 759.804852 64.218604 655.67219 64.218604 958.270996 366.342596 958.502263 262.234493 855.071589 428.421466 688.86108Z" p-id="2073"></path></svg>
+  </div>
 </template>
 
 <script>
 import screenfull from 'screenfull'
 
 export default {
-  name: 'hamburger',
+  name: 'screenfull',
   props: {
     width: {
       type: Number,
@@ -46,9 +44,12 @@ export default {
 </script>
 
 <style scoped>
-.screenfull {
+.screenfull-svg {
   display: inline-block;
   cursor: pointer;
-  vertical-align: -0.15em;
+  fill: #48576a;
+  width: 20px;
+  height: 20px;
+  vertical-align: 10px;
 }
 </style>
diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
index 52a42daa..54b9b343 100644
--- a/src/views/layout/components/Navbar.vue
+++ b/src/views/layout/components/Navbar.vue
@@ -1,29 +1,33 @@
 <template>
-	<el-menu class="navbar" mode="horizontal">
-		<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
-		<levelbar></levelbar>
-		<error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
-		<screenfull class='screenfull'></screenfull>
-		<el-dropdown class="avatar-container" trigger="click">
-			<div class="avatar-wrapper">
-				<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
-				<i class="el-icon-caret-bottom"></i>
-			</div>
-			<el-dropdown-menu class="user-dropdown" slot="dropdown">
-				<router-link class='inlineBlock' to="/">
-					<el-dropdown-item>
-						首页
-					</el-dropdown-item>
-				</router-link>
-				<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
-					<el-dropdown-item>
-						项目地址
-					</el-dropdown-item>
-				</a>
-				<el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
-			</el-dropdown-menu>
-		</el-dropdown>
-	</el-menu>
+  <el-menu class="navbar" mode="horizontal">
+    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+    <levelbar></levelbar>
+    <error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
+    <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
+      <screenfull class='screenfull'></screenfull>
+    </el-tooltip>
+    <el-dropdown class="avatar-container" trigger="click">
+      <div class="avatar-wrapper">
+        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+        <i class="el-icon-caret-bottom"></i>
+      </div>
+      <el-dropdown-menu class="user-dropdown" slot="dropdown">
+        <router-link class='inlineBlock' to="/">
+          <el-dropdown-item>
+            首页
+          </el-dropdown-item>
+        </router-link>
+        <a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
+          <el-dropdown-item>
+            项目地址
+          </el-dropdown-item>
+        </a>
+        <el-dropdown-item divided>
+          <span @click="logout" style="display:block;">退出登录</span>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </el-menu>
 </template>
 
 <script>
@@ -67,50 +71,50 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-	.navbar {
-			height: 50px;
-			line-height: 50px;
-			border-radius: 0px !important;
-			.hamburger-container {
-					line-height: 58px;
-					height: 50px;
-					float: left;
-					padding: 0 10px;
-			}
-			.errLog-container {
-					display: inline-block;
-					position: absolute;
-					right: 150px;
-			}
-			.screenfull {
-					position: absolute;
-					right: 90px;
-					top: 16px;
-					color: red;
-			}
-			.avatar-container {
-					height: 50px;
-					display: inline-block;
-					position: absolute;
-					right: 35px;
-					.avatar-wrapper {
-							cursor: pointer;
-							margin-top: 5px;
-							position: relative;
-							.user-avatar {
-									width: 40px;
-									height: 40px;
-									border-radius: 10px;
-							}
-							.el-icon-caret-bottom {
-									position: absolute;
-									right: -20px;
-									top: 25px;
-									font-size: 12px;
-							}
-					}
-			}
+.navbar {
+	height: 50px;
+	line-height: 50px;
+	border-radius: 0px !important;
+	.hamburger-container {
+		line-height: 58px;
+		height: 50px;
+		float: left;
+		padding: 0 10px;
 	}
+	.errLog-container {
+		display: inline-block;
+		position: absolute;
+		right: 150px;
+	}
+	.screenfull {
+		position: absolute;
+		right: 90px;
+		top: 16px;
+		height: 20px;
+	}
+	.avatar-container {
+		height: 50px;
+		display: inline-block;
+		position: absolute;
+		right: 35px;
+		.avatar-wrapper {
+			cursor: pointer;
+			margin-top: 5px;
+			position: relative;
+			.user-avatar {
+				width: 40px;
+				height: 40px;
+				border-radius: 10px;
+			}
+			.el-icon-caret-bottom {
+				position: absolute;
+				right: -20px;
+				top: 25px;
+				font-size: 12px;
+			}
+		}
+	}
+}
 </style>