Browse Source

改外观

任一存 2 years ago
parent
commit
a87ab4a06b

+ 13 - 7
src/App.vue

@@ -22,7 +22,7 @@
     <nav
       v-show="!$route.meta.hideNavBar"
       :style="{
-        bottom: isShowNavBar ? '0' : '-112px',
+        bottom: isShowNavBar ? '0' : `-${navBarHeight}`,
       }"
     >
       <button
@@ -216,13 +216,14 @@ export default {
 
     const isShowNavBar = ref(true)
     const activeNavItemIdx = ref(0)
-
+    const navBarHeight = '100px'
     return {
       isShowFadeInMask,
       progress,
 
       isShowNavBar,
       activeNavItemIdx,
+      navBarHeight,
     }
   },
 }
@@ -256,7 +257,11 @@ html, body {
 
 // 字体
 @font-face {
-  font-family: 'Source Han Sans CN-Regular';
+  font-family: 'Source Han Sans CN-Light';
+  src: url('@/assets/style/SOURCEHANSANSCN-LIGHT.OTF');
+}
+@font-face {
+  font-family: 'Source Han Sans CN-Light';
   src: url('@/assets/style/SOURCEHANSANSCN-REGULAR.OTF');
 }
 @font-face {
@@ -348,7 +353,7 @@ html, body {
 <style scoped lang="less">
 .app-view {
   width: 100%;
-  height: calc(100% - 112px);
+  height: calc(100% - v-bind('navBarHeight'));
   position: relative;
   &.higher {
     height: 100%;
@@ -371,7 +376,7 @@ html, body {
     position: fixed;
     left: 0;
     width: 100%;
-    height: 112px;
+    height: v-bind('navBarHeight');
     border-radius: 5px 5px 0 0;
     border-top: solid 1px #D2BD84;
     box-shadow: inset 0px 2px 2px 0px rgba(210,189,132,0.45), 0px -9px 24px 0px rgba(183,162,109,0.25);
@@ -380,11 +385,11 @@ html, body {
     align-items: center;
     transition: all 0.5s;
     // backdrop-filter: blur(10px);
-    background-image: url(@/assets/images/bg-bottom-bar.png);
+    background-image: url(@/assets/images/bg-bottom-bar.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
-    background-color: #0c0d12;
+    // background-color: #0c0d12;
     >button.tab-item {
       font-size: 30px;
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
@@ -402,6 +407,7 @@ html, body {
       }
       &.active {
         opacity: initial;
+        font-weight: bold;
         >img.decorator {
           display: initial;
           position: absolute;

BIN
src/assets/images/bg-bottom-bar.jpg


BIN
src/assets/style/SOURCEHANSANSCN-LIGHT.OTF


+ 2 - 2
src/components/HomeFadeIn.vue

@@ -57,13 +57,13 @@ export default {
     transform: translate(-50%, -50%);
     >span:nth-of-type(1) {
       font-size: 32px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
       color: #FFFFFF;
     }
     >span:nth-of-type(2) {
       font-size: 16px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
       color: #FFFFFF;
     }

+ 1 - 1
src/components/TreasureShare.vue

@@ -177,7 +177,7 @@ export default {
     >.txt {
       flex: 1 0 1px;
       font-size: 20px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.8);
       line-height: 1.5;

+ 5 - 4
src/views/General.vue

@@ -305,7 +305,7 @@ export default {
       padding-left: 13px;
       padding-right: 13px;
       font-size: 16px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
       color: #FFFFFF;
       &:focus {
@@ -313,7 +313,7 @@ export default {
       }
       &::placeholder {
         font-size: 16px;
-        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.5);
       }
@@ -396,6 +396,7 @@ export default {
           height: 8px;
           background: #6D9DC6;
           z-index: 2;
+          box-shadow: 0px 0px 12px 0px #6D9DC6, 0px 0px 8px 0px #6D9DC6;
         }
         >.verticle-line {
           position: absolute;
@@ -444,7 +445,7 @@ export default {
         >span.corp-time {
           display: block;
           font-size: 16px;
-          font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+          font-family: Source Han Sans CN-Light, Source Han Sans CN;
           font-weight: 400;
           color: #FFFFFF;
           opacity: 0.5;
@@ -523,7 +524,7 @@ export default {
     >.txt {
       flex: 1 0 1px;
       font-size: 20px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.8);
       line-height: 1.5;

+ 2 - 2
src/views/History.vue

@@ -256,7 +256,7 @@ export default {
         border-image: linear-gradient(270deg, rgba(78, 96, 112, 1), rgba(78, 96, 112, 0)) 1 1;
         margin-bottom: 15px;
         font-size: 20px;
-        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.5);
         // backdrop-filter: blur(10px); // 会导致产生层叠上下文!!!使得圆点无法在弧线上层!!!
@@ -383,7 +383,7 @@ export default {
         max-height: calc(100vh - 400px);
         overflow: auto;
         font-size: 20px;
-        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: rgba(255, 255, 255, 0.8);
         line-height: 1.5;

+ 1 - 1
src/views/Metaverse.vue

@@ -146,7 +146,7 @@ export default {
     >.txt {
       flex: 1 0 1px;
       font-size: 20px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
       color: rgba(255, 255, 255, 0.8);
       line-height: 1.7;

+ 1 - 1
src/views/Record.vue

@@ -130,7 +130,7 @@ export default {
     bottom: 130px;
     background: #3b3d44;
     border: 1px solid #FFFFFF;
-    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-family: Source Han Sans CN-Light, Source Han Sans CN;
     color: #FFFFFF;
     font-size: 16px;
     padding: 11px 40px;

+ 1 - 1
src/views/Treasure.vue

@@ -157,7 +157,7 @@ onMounted(() => {
         padding: 7px 25px;
         background: linear-gradient(90deg, rgba(176,161,121,0.7) 0%, rgba(0,0,0,0) 100%);
         font-size: 20px;
-        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-family: Source Han Sans CN-Light, Source Han Sans CN;
         font-weight: 400;
         color: #FFFFFF;
         line-height: 1.5;

+ 3 - 3
src/views/TreasureDetail.vue

@@ -437,7 +437,7 @@ export default {
       border-radius: 18px;
       border: 1px solid #fff;
       font-size: 16px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
       color: #fff;
       opacity: 0.7;
@@ -517,7 +517,7 @@ export default {
     >p.main {
       margin-top: 20px;
       font-size: 20px;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
       color: #FFFFFF;
       overflow: hidden;
@@ -533,7 +533,7 @@ export default {
       text-align: center;
       font-size: 20px;
       line-height: 1.5;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-family: Source Han Sans CN-Light, Source Han Sans CN;
       font-weight: 400;
       color: #FFFFFF;
       overflow: auto;