feat：竹谱页 进一步适配系统缩放

src/views/BambooBookView.vue

@@ -260,11 +260,11 @@ onMounted(() => {
       }
       .zhupu-box {
         // margin-top: 10%;
-        margin-top: 20px;
+        margin-top: calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
         // font-size: 1.8em;
         font-size: calc(24px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
         line-height:calc(29px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
-        line-height: 28.13px;
+        // line-height: 28.13px;
         letter-spacing: 0.2em;
       }
     }
@@ -312,7 +312,7 @@ onMounted(() => {
       justify-content: center;
       .top {
         width: 100%;
-        height: calc(100% - 60px);
+        height: calc(100% - 60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
         position: relative;
         img {
           width: 100%;
@@ -330,8 +330,8 @@ onMounted(() => {
         display: flex;
         justify-content: space-evenly;
         .btn {
-          width: 60px;
-          height: 60px;
+          width: calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          height: calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           // font-size: 38px;
           font-size:calc(38px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           line-height:calc(52px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
@@ -393,21 +393,21 @@ onMounted(() => {
           // font-size: 20px;
           font-size:calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           // line-height: 48px;
-          padding: 10px;
-          margin: 0 30px 0 60px;
+          padding: calc(10px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+          margin: 0 calc(30px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0 calc(60px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           // height: 70%;
         }
         .category-item {
           display: flex;
           flex-direction: column;
           align-items: center;
-          margin: 0 20px 0 20px;
+          margin: 0 calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign")) 0 calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           .small-img {
-            width: 200px;
-            height: 150px;
+            width: calc(200px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
+            height: calc(150px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
           }
           > div {
-            margin-top: 10px;
+            margin-top: calc(10px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
             color: #7b916b;
             font-size:calc(20px * v-bind("windowHeight") / v-bind("windowHeightDesign"));
             line-height:calc(24px * v-bind("windowHeight") / v-bind("windowHeightDesign"));