fixbug: 完善主题

jsxiaosi · Jan 8, 2022 · 54bd9e7 · 54bd9e7
1 parent 992a5c3
commit 54bd9e7
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 112 deletions.
diff --git a/index.html b/index.html
@@ -1,113 +1,112 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Vite App</title>
-	</head>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
 
-	<body>
-		<div id="app">
-			<style>
-				* {
-					margin: 0;
-					padding: 0;
-				}
+  <body>
+    <div id="app">
+      <style>
+        * {
+          margin: 0;
+          padding: 0;
+        }
 
-				html,
-				body {
-					width: 100%;
-					height: 100%;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					background: #000;
-					overflow: hidden;
-					font-family: 'Reggae One', cursive;
-				}
+        html,
+        body {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: #000;
+          overflow: hidden;
+          font-family: 'Reggae One', cursive;
+        }
 
-				p {
-					font-size: 8vw;
-					overflow: hidden;
-					-webkit-text-stroke: 3px #ffffff;
-				}
+        p {
+          font-size: 8vw;
+          overflow: hidden;
+          -webkit-text-stroke: 3px #7272a5;
+        }
 
-				span {
-					display: block;
-					font-size: 20px;
-					overflow: hidden;
-					color: green;
-					text-align: center;
-				}
+        span {
+          display: block;
+          font-size: 20px;
+          overflow: hidden;
+          color: green;
+          text-align: center;
+        }
 
-				p::before {
-					content: ' ';
-					width: 100%;
-					height: 100%;
-					position: absolute;
-					left: 0;
-					top: 0;
-					background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
-					mix-blend-mode: multiply;
-				}
+        p::before {
+          content: ' ';
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          left: 0;
+          top: 0;
+          background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
+          mix-blend-mode: multiply;
+        }
 
-				p::after {
-					content: '';
-					background: radial-gradient(circle, #fff, #000 50%);
-					background-size: 25% 25%;
-					position: absolute;
-					top: -100%;
-					left: -100%;
-					right: 0;
-					bottom: 0;
-					mix-blend-mode: color-dodge;
-					animation: mix 2s linear infinite;
-				}
+        p::after {
+          content: '';
+          background: radial-gradient(circle, #fff, #000 50%);
+          background-size: 25% 25%;
+          position: absolute;
+          top: -100%;
+          left: -100%;
+          right: 0;
+          bottom: 0;
+          mix-blend-mode: color-dodge;
+          animation: mix 2s linear infinite;
+        }
 
-				@keyframes mix {
-					to {
-						transform: translate(50%, 50%);
-					}
-				}
-			</style>
-			<div class="g-container">
-				<p>SuperCuteXiaoSi</p>
-				<span class="_develop"></span>
-			</div>
-		</div>
-		<script>
-			// 此代码仅用于开发环境的友好提示，项目打包前请去掉这段js代码 This code is only used as a friendly reminder of the development environment, please remove this js code before packaging the project
-			window.onload = function () {
-				;(function () {
-					const ua = navigator.userAgent.toLowerCase()
-					const re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/
-					const m = ua.match(re)
-					const Sys = {
-						browser: m[1].replace(/version/, "'safari"),
-						version: m[2],
-					}
+        @keyframes mix {
+          to {
+            transform: translate(50%, 50%);
+          }
+        }
+      </style>
+      <div class="g-container">
+        <p>SuperCuteXiaoSi</p>
+        <span class="_develop"></span>
+      </div>
+    </div>
+    <script>
+      // 此代码仅用于开发环境的友好提示，项目打包前请去掉这段js代码 This code is only used as a friendly reminder of the development environment, please remove this js code before packaging the project
+      window.onload = function () {
+        (function () {
+          const ua = navigator.userAgent.toLowerCase();
+          const re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
+          const m = ua.match(re);
+          const Sys = {
+            browser: m[1].replace(/version/, "'safari"),
+            version: m[2],
+          };
 
-					const browser = Array.of('chrome', 'firefox').includes(Sys.browser)
-					const version = parseFloat(Sys.version)
+          const browser = Array.of('chrome', 'firefox').includes(Sys.browser);
+          const version = parseFloat(Sys.version);
 
-					const el = document.querySelector('._develop')
+          const el = document.querySelector('._develop');
 
-					if (el) {
-						if (browser && version >= 90) {
-							let success = document.createTextNode('哈哈哈哈哈！帅吧？ 😃')
-							el.appendChild(success)
-						} else {
-							let warn =
-								document.createTextNode('你这浏览器不行啊，换一个吧！😯')
-							el.appendChild(warn)
-							el.style.color = 'red'
-						}
-					}
-					return Sys
-				})()
-			}
-		</script>
-		<script type="module" src="/src/main.ts"></script>
-	</body>
+          if (el) {
+            if (browser && version >= 90) {
+              let success = document.createTextNode('哈哈哈哈哈！帅吧？ 😃');
+              el.appendChild(success);
+            } else {
+              let warn = document.createTextNode('你这浏览器不行啊，换一个吧！😯');
+              el.appendChild(warn);
+              el.style.color = 'red';
+            }
+          }
+          return Sys;
+        })();
+      };
+    </script>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -39,9 +39,3 @@
   // };
   // req2();
 </script>
-
-<style lang="scss">
-  #app {
-    color: #{$text-color-primary};
-  }
-</style>
diff --git a/src/styles/el-theme.scss b/src/styles/el-theme.scss
@@ -1,7 +1,10 @@
 // 修改element主题
 :root {
   --el-border-color-lighter: #{$text-color-placeholder};
-  --el-text-color-regular: #{$text-color-primary};
+  --el-text-color-primary: #{$text-color-primary};
+  --el-text-color-regular: #{$text-color-regular};
+  --el-text-color-secondary: #{$text-color-secondary};
+  --el-text-color-placeholder: #{$text-color-placeholder};
 }
 
 .el-drawer {
@@ -39,6 +42,6 @@ $menuItemActiveBorderLeft: $mian-color; //二级左描边背景颜色
 
 $app-main-bg-color: $sub-main-bg-content; //app-mian背景颜色
 $navBarColor: $main-bg-color; //顶部导航栏背景颜色
-$navBarBorderBottomColor: $main-bg-color;
+$navBarBorderBottomColor: $text-color-placeholder;
 $BreadcrumbColor: $main-bg-color; //面包屑背景颜色
 $BreadcrumbText: $text-color-primary; //面包屑文字颜色
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -26,6 +26,7 @@ html {
 
 #app {
   // height: 100%;
+  color: #{$text-color-primary};
 }
 
 *,

diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
@@ -33,6 +33,7 @@
     background-color: $menuBg;
     box-shadow: 1px 0 2px rgb(28 29 30 / 8%);
     transition: width 0.28s;
+    border-right: 1px solid #{$text-color-placeholder};
 
     .el-menu-item::before {
       position: absolute;

diff --git a/src/views/index/components/WeDetails.vue b/src/views/index/components/WeDetails.vue
@@ -6,7 +6,7 @@
           <i class="el-icon-user"></i>
           用户名
         </template>
-        小斯斯
+        <span>小斯斯</span>
       </el-descriptions-item>
       <el-descriptions-item>
         <template #label>
@@ -74,5 +74,8 @@
     .el-tag--dark {
       margin-right: 10px !important;
     }
+    .margin-top :deep(.el-descriptions__body) {
+      background-color: #{$main-bg-color};
+    }
   }
 </style>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
@@ -152,19 +152,22 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
+        // color: #{$text-color-primary};
       }
 
       .infinite {
+        border: 1px solid #{$text-color-placeholder};
         .top {
-          width: 95%;
+          // width: 95%;
           height: 40px;
           line-height: 40px;
           display: flex;
           margin: 0 auto;
           font-size: 14px;
-          color: #909399;
+          // color: #909399;
           font-weight: 400;
-          background: #fafafa;
+          background: #{$sub-main-bg-content};
+          border-bottom: 1px solid #{$text-color-placeholder};
 
           li {
             width: 34%;
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,7 @@ html { @@
     #app {
       // height: 100%;
+      color: #{$text-color-primary};
     }
     *,
@@ Expand Down @@