全屏左侧按钮

src/icons/svg/font-size.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="font-size-2">
+<path id="Vector" d="M6.66732 3.99984V13.9998H5.33398V3.99984H1.33398V2.6665H10.6673V3.99984H6.66732ZM12.0007 9.33317V13.9998H10.6673V9.33317H8.66732V7.99984H14.0007V9.33317H12.0007Z" fill="currentColor"/>
+</g>
+</svg>

src/views/bookShelf/components/Voicefullscreen.vue

@@ -92,57 +92,17 @@
                 <svg-icon v-else icon-class="like" className="icon-like"></svg-icon>
             </span>
           </div>
-          <div
-            :class="['set-fontSize', bgIndex == 1 ? 'set-fontSize-green' : '']"
-          >
-            <template v-if="hzSize >= 34">
-              <span
-                :class="[
-                  'font-jian-black',
-                  bgIndex == 1 ? 'font-jian-yellow' : '',
-                ]"
-                @click="setFontSize('-')"
-              >
-                <i class="el-icon-minus"></i>
-              </span>
-            </template>
-            <!-- <template v-else>
-              <span
-                :class="[
-                  'font-jian-black',
-                  bgIndex == 1
-                    ? 'font-jian-yellow-disabled'
-                    : 'font-jian-white-disabled',
-                ]"
-              >
-                <i class="el-icon-plus"></i>
-              </span>
-            </template> -->
-            <span
-              :class="['font-img-black', bgIndex == 1 ? 'font-img-yellow' : '']"
-            ></span>
-            <template v-if="hzSize <= 76">
-              <span
-                :class="[
-                  'font-jia-black',
-                  bgIndex == 1 ? 'font-jia-yellow' : '',
-                ]"
-                @click="setFontSize('+')"
-              >
-                <i class="el-icon-plus"></i>
-              </span>
-            </template>
-            <!-- <template v-else>
-              <span
-                :class="[
-                  'font-jia-black',
-                  bgIndex == 1
-                    ? 'font-jia-yellow-disabled'
-                    : 'font-jia-white-disabled',
-                ]"
-              ></span>
-            </template> -->
+          <div :class="['set-fontSize', bgIndex == 1 ? 'set-fontSize-green' : '']">
+            <div
+                @click="setFontSizeFlag=!setFontSizeFlag"
+            >
+                <svg-icon icon-class="font-size"></svg-icon>
+            </div>
+            <div class="font-size-box" :class="[bgIndex == 1 ? 'font-size-box-green' : '']" v-if="setFontSizeFlag">
+                <el-input-number v-model="hzSize" :step="4" :max="76" :min="34"></el-input-number>
+            </div>
           </div>
+          
         </div>
       <!-- </div> -->
     </div>
@@ -431,6 +391,7 @@ export default {
         "‘ll",
         "”",
       ],
+      setFontSizeFlag: false
     };
   },
   computed: {
@@ -981,7 +942,7 @@ export default {
     background: #fff;
   }
   &.bg2 {
-    background: linear-gradient(180deg, #274533 0%, #385f45 100%);
+    background: linear-gradient(180deg, #274533 0%, #13392E 100%);
   }
   &-top {
     height: 100%;
@@ -1031,7 +992,7 @@ export default {
       box-sizing: border-box;
       text-align: center;
       &.select-bg-blue {
-        background: rgba(255, 255, 255, 0.1);
+        background: #0E2B23;
         border: 1px solid rgba(0, 0, 0, 0.1);
       }
       > div {
@@ -1066,7 +1027,7 @@ export default {
             background: #fff;
           }
           &.bg-green {
-            background: linear-gradient(180deg, #274533 0%, #385f45 100%);
+            background: linear-gradient(180deg, #274533 0%, #13392E 100%);
           }
         }
       }
@@ -1081,86 +1042,19 @@ export default {
         padding: 12px;
     }
     .set-fontSize {
-      padding: 0 20px;
-      height: 56px;
-      background: #ffffff;
-      border: 1px solid rgba(0, 0, 0, 0.1);
+      position: relative;
       border-radius: 40px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      cursor: pointer;
+      border: 1px solid rgba(0, 0, 0, 0.1);
       &-green {
-        background: rgba(255, 255, 255, 0.1);
+        background: #0E2B23;
         border: 1px solid rgba(0, 0, 0, 0.1);
+        color: #fff;
       }
-      > span {
-        width: 24px;
-        height: 24px;
-        margin: 0 4px;
-        &.font-jian {
-        //   &-black {
-        //     background: url("../../../assets/NPC/jian-black.png") no-repeat left
-        //       top;
-        //     background-size: 100% 100%;
-        //     cursor: pointer;
-        //   }
-        //   &-yellow {
-        //     background: url("../../../assets/NPC/jian-white.png") no-repeat left
-        //       top;
-        //     background-size: 100% 100%;
-        //     cursor: pointer;
-        //   }
-        //   &-white-disabled {
-        //     background: url("../../../assets/NPC/jian-white-disabled.png")
-        //       no-repeat left top;
-        //     background-size: 100% 100%;
-        //     cursor: pointer;
-        //   }
-        //   &-yellow-disabled {
-        //     background: url("../../../assets/NPC/jian-yellow-disabled.png")
-        //       no-repeat left top;
-        //     background-size: 100% 100%;
-        //     cursor: pointer;
-        //   }
-        }
-        &.font-img {
-        //   &-black {
-        //     background: url("../../../assets/NPC/fontSize-black.png") no-repeat
-        //       left top;
-        //     background-size: 100% 100%;
-        //   }
-        //   &-yellow {
-        //     background: url("../../../assets/NPC/fontSize-white.png") no-repeat
-        //       left top;
-        //     background-size: 100% 100%;
-        //   }
-        }
-        &.font-jia {
-        //   &-black {
-        //     background: url("../../../assets/NPC/jia-black.png") no-repeat left
-        //       top;
-        //     background-size: 100% 100%;
-        //     cursor: pointer;
-        //   }
-        //   &-yellow {
-        //     background: url("../../../assets/NPC/jia-white.png") no-repeat left
-        //       top;
-        //     background-size: 100% 100%;
-        //     cursor: pointer;
-        //   }
-        //   &-white-disabled {
-        //     background: url("../../../assets/NPC/jia-white-disabled.png")
-        //       no-repeat left top;
-        //     background-size: 100% 100%;
-        //     cursor: pointer;
-        //   }
-        //   &-yellow-disabled {
-        //     background: url("../../../assets/NPC/jia-yellow-disabled.png")
-        //       no-repeat left top;
-        //     background-size: 100% 100%;
-        //     cursor: pointer;
-        //   }
-        }
+      .font-size-box{
+        position: absolute;
+        top: 0;
+        left: -160px;
       }
     }
     // .top-middle {
@@ -1516,4 +1410,50 @@ export default {
   position: absolute;
   left: -1000px;
 }
+</style>
+<style lang="scss">
+.font-size-box{
+    width: 144px;
+    .el-input-number{
+        width: 100%;
+    }
+    .el-input-number__decrease{
+        border-radius: 40px 0 0 40px;
+        border-right-color: #DDD;
+    }
+    .el-input-number__increase{
+        border-radius: 0 40px 40px 0;
+        border-left-color: #DDD;
+    }
+    .el-input__inner{
+        border-radius: 40px;
+        border-color: #DDD;
+        background: #fff;
+        color: #000;
+        font-weight: 700;
+    }
+    .el-input-number__decrease, .el-input-number__increase{
+        background: #fff;
+        color: #000;
+        font-weight: 700;
+    }
+    &-green{
+        .el-input-number__decrease{
+            border-right-color: #235446;
+        }
+        .el-input-number__increase{
+            border-left-color: #235446;
+        }
+        .el-input__inner{
+            border-color: #265A4B;
+            background: #13392E;
+            color: #fff;
+        }
+        .el-input-number__decrease, .el-input-number__increase{
+            background: #265A4B;
+            color: #fff;
+        }
+    }
+    
+}
 </style>