Browse Source

返回按钮增加文字

shaogen1995 1 year ago
parent
commit
aa44d82ade

+ 17 - 1
src/components/BtnBack.vue

@@ -7,6 +7,12 @@
         alt=""
         draggable="false"
       >
+      <div
+        class="myBtnTxt"
+        :style="`color:${color==='white'?'white':'#96a783'}`"
+      >
+        返回
+      </div>
     </button>
   </div>
 </template>
@@ -41,7 +47,7 @@ const props = defineProps({
 .btn-back{
   position: fixed;
   left: calc(17 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-  bottom: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+  bottom: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
   >button{
@@ -51,9 +57,19 @@ const props = defineProps({
     justify-content: center;
     align-items: center;
     >img{
+      // width: 30px;
+      // height: 30px;
       width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
   }
+  .myBtnTxt{
+    position: absolute;
+    bottom: -14px;
+    left: -10px;
+    font-size: 14px;
+    font-family: KaiTi;
+    writing-mode:horizontal-tb !important;
+  }
 }
 </style>

+ 18 - 20
src/views/BambooBookScene1.vue

@@ -96,7 +96,6 @@ const innerHeight = ref(window.innerHeight + "px")
     bottom: 0;
     right: 0;
 
-
     .xuliezheng {
       width: calc(v-bind(innerWidth));
       // max-width: 30px;
@@ -208,7 +207,7 @@ const innerHeight = ref(window.innerHeight + "px")
       // margin-right: calc(170 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       // margin-bottom: calc(250 /v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     }
-    >.text{
+    > .text {
       width: calc(
         170 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
@@ -226,37 +225,36 @@ const innerHeight = ref(window.innerHeight + "px")
         153 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
-      font-size:  calc(
+      font-size: calc(
         20 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
-      line-height:  calc(
+      line-height: calc(
         30 / v-bind("windowSizeWhenDesignForRef") *
           v-bind("windowSizeInCssForRef")
       );
       text-indent: 2em;
-      color: #7B916B;
-      font-family: 'KaiTi';
+      color: #7b916b;
+      font-family: "KaiTi";
       writing-mode: initial;
       direction: ltr;
-
     }
 
     > .system-btns {
       width: 100%;
-      padding: 0
-        calc(
-          20 / v-bind(windowSizeWhenDesignForRef) *
-            v-bind(windowSizeInCssForRef)
-        );
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      position: absolute;
-      bottom: calc(
-        20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
-      );
-      z-index: 2;
+      // padding: 0
+      //   calc(
+      //     20 / v-bind(windowSizeWhenDesignForRef) *
+      //       v-bind(windowSizeInCssForRef)
+      //   );
+      // display: flex;
+      // flex-direction: column;
+      // justify-content: space-between;
+      // position: absolute;
+      // bottom: calc(
+      //   20 / v-bind(windowSizeWhenDesignForRef) * v-bind(windowSizeInCssForRef)
+      // );
+      // z-index: 2;
     }
   }
 }

+ 4 - 4
src/views/HomeView.vue

@@ -1230,8 +1230,8 @@ div {
       left: 0;
       background: linear-gradient(
         rgba(0, 0, 0, 0),
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0.4)
+        rgba(0, 0, 0, 0.3),
+        rgba(0, 0, 0, 0.8)
       );
       position: absolute;
       bottom: 0;
@@ -1331,8 +1331,8 @@ div {
       left: 0;
       background: linear-gradient(
         rgba(0, 0, 0, 0),
-        rgba(0, 0, 0, 0.1),
-        rgba(0, 0, 0, 0.4)
+        rgba(0, 0, 0, 0.3),
+        rgba(0, 0, 0, 0.8)
       );
       // background: linear-gradient( 180deg, #d9d9d93f 0%, rgba(115,115,115,0) 100%);
       position: absolute;

+ 1 - 0
src/views/ShuangGouSheSeDetail.vue

@@ -325,6 +325,7 @@ const curPercentage = computed(() => {
       right: 0;
       display: flex;
       align-items: center;
+      pointer-events: none;
       & > img {
         width: 40px;
       }