style(view): 优化计算公式图 UI

pages/formula/angle.vue

@@ -118,19 +118,19 @@
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
     .height{
-        top: 210rpx;
+        top: 190rpx;
         left: 410rpx;
     }
     .xiebian{
         left: 320rpx;
-        top: 180rpx;
+        top: 160rpx;
     }
     .angle{
-        left: 320rpx;
-        top: 246rpx;
+        left: 300rpx;
+        top: 210rpx;
     }
     .dibian{
-        left: 350rpx;
-        top: 280rpx;
+        left: 330rpx;
+        top: 240rpx;
     }
 </style>

pages/formula/baoliangwan.vue

@@ -157,14 +157,17 @@
 
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
+    .top{
+        top: 50rpx !important;
+    }
     .qiwan{
         left: 80rpx;
     }
     .leftxiebian{
-        left: 200rpx;
+        left: 210rpx;
     }
     .rightxiebian{
-        left: 440rpx;
+        left: 420rpx;
     }
     .leftxiekou1{
         left: 160rpx;

pages/formula/bianjindanbian.vue

@@ -117,14 +117,14 @@
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
     .result2{
-        top: 80rpx;
+        top: 100rpx;
     }
     .slice1{
         top: 20rpx;
-        left: 360rpx;
+        left: 300rpx;
     }
     .slice2{
         top: 260rpx;
-        left: 330rpx;
+        left: 300rpx;
     }
 </style>

pages/formula/bianjinshuangbian.vue

@@ -119,22 +119,23 @@
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
     .result1{
-        left: 630rpx;
-        top: 70rpx;
+        left: 600rpx;
+        top: 120rpx;
     }
     .result2{
-        left: 630rpx;
-        top: 230rpx;
+        left: 610rpx;
+        top: 210rpx;
     }
     .slice1{
+        top: 50rpx;
         left: 330rpx;
     }
     .slice2{
-        top: 160rpx;
+        top: 145rpx;
         left: 330rpx;
     }
     .slice3{
-        top: 380rpx;
-        left: 350rpx;
+        top: 340rpx;
+        left: 340rpx;
     }
 </style>

pages/formula/downhill.vue

@@ -131,6 +131,12 @@
 
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
+    .top{
+        top: 60rpx !important;
+    }
+    .bottom{
+        top: 245rpx !important;
+    }
     .qiwan{
         left: 120rpx;
     }
@@ -138,9 +144,9 @@
         left: 300rpx;
     }
     .slice1{
-        left: 210rpx;
+        left: 220rpx;
     }
     .slice2{
-        left: 430rpx;
+        left: 450rpx;
     }
 </style>

pages/formula/duochengdengwan.vue

@@ -253,55 +253,57 @@
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
     .diyiceng{
-        left: 150rpx;
+        top: -15rpx;
+        left: 125rpx;
     }
     .diyicengxiebian{
+        top: -15rpx;
         left: 320rpx;
     }
     .slice1{
-        top: 170rpx;
+        top: 155rpx;
         left: 240rpx;
     }
     .slice2{
-        top: 170rpx;
+        top: 155rpx;
         left: 445rpx;
     }
     .dierceng{
-        top: 190rpx;
-        left: 170rpx;
+        top: 150rpx;
+        left: 140rpx;
     }
     .diercengxiebian{
-        top: 190rpx;
+        top: 160rpx;
         left: 340rpx;
     }
     .slice3{
-        top: 350rpx;
+        top: 310rpx;
         left: 260rpx;
     }
     .slice4{
-        top: 350rpx;
+        top: 310rpx;
         left: 445rpx;
     }
     .disanceng{
-        top: 360rpx;
+        top: 305rpx;
         left: 170rpx;
     }
     .disancengxiebian{
-        top: 360rpx;
+        top: 320rpx;
         left: 340rpx;
     }
     .slice5{
-        top: 520rpx;
-        left: 280rpx;
+        top: 450rpx;
+        left: 270rpx;
     }
     .slice6{
-        top: 520rpx;
-        left: 445rpx;
+        top: 450rpx;
+        left: 415rpx;
     }
     .cengjianju1{
-        top: 200rpx;
+        top: 195rpx;
     }
     .cengjianju2{
-        top: 370rpx;
+        top: 345rpx;
     }
 </style>

pages/formula/duochengzhijiao.vue

@@ -267,36 +267,36 @@
         left: 445rpx;
     }
     .dierceng{
-        top: 190rpx;
-        left: 170rpx;
+        top: 160rpx;
+        left: 110rpx;
     }
     .diercengqiwan{
-        top: 190rpx;
+        top: 160rpx;
         left: 340rpx;
     }
     .slice3{
-        top: 350rpx;
+        top: 295rpx;
         left: 260rpx;
     }
     .slice4{
-        top: 350rpx;
-        left: 445rpx;
+        top: 295rpx;
+        left: 430rpx;
     }
     .disanceng{
-        top: 360rpx;
+        top: 300rpx;
         left: 170rpx;
     }
     .disancengqiwan{
-        top: 360rpx;
+        top: 310rpx;
         left: 340rpx;
     }
     .slice5{
-        top: 520rpx;
-        left: 280rpx;
+        top: 445rpx;
+        left: 265rpx;
     }
     .slice6{
-        top: 520rpx;
-        left: 445rpx;
+        top: 445rpx;
+        left: 405rpx;
     }
     .cengjianju1{
         top: 200rpx;

pages/formula/guozhuwan.vue

@@ -156,6 +156,12 @@
 
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
+    .top{
+        top: 50rpx !important;
+    }
+    .bottom{
+        top: 200rpx !important;
+    }
     .qiwan{
         left: 80rpx;
     }
@@ -172,8 +178,8 @@
         left: 260rpx;
     }
     .zhukuan{
-        top: 200rpx;
-        left: 320rpx;
+        top: 190rpx;
+        left: 310rpx;
     }
     .rightxiekou1{
         left: 380rpx;

pages/formula/rightAngle22.vue

@@ -130,26 +130,34 @@
     @import "@/static/css/math.scss";
     .qiwan{
         left: 80rpx;
+        top: 45rpx !important;
     }
     .xiebian1{
         left: 200rpx;
+        top: 50rpx !important;
     }
     .xiebian2{
         left: 310rpx;
+        top: 55rpx !important;
     }
     .xiebian3{
         left: 420rpx;
+        top: 60rpx !important;
     }
     .slice1{
         left: 150rpx;
+        top: 245rpx !important;
     }
     .slice2{
         left: 260rpx;
+        top: 250rpx !important;
     }
     .slice3{
         left: 370rpx;
+        top: 255rpx !important;;
     }
     .slice4{
         left: 480rpx;
+        top: 260rpx !important;;
     }
 </style>

pages/formula/rightAngle30.vue

@@ -141,6 +141,6 @@
         left: 320rpx;
     }
     .slice3{
-        left: 490rpx;
+        left: 470rpx;
     }
 </style>

pages/formula/rightAngle45.vue

@@ -123,6 +123,12 @@
 
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
+    .top{
+        top: 50rpx !important;
+    }
+    .bottom{
+        top: 220rpx !important;
+    }
     .qiwan{
         left: 100rpx;
     }
@@ -130,9 +136,9 @@
         left: 320rpx;
     }
     .slice1{
-        left: 210rpx;
+        left: 215rpx;
     }
     .slice2{
-        left: 430rpx;
+        left: 420rpx;
     }
 </style>

pages/formula/rightAngleHorizontal.vue

@@ -107,7 +107,7 @@
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
     .biangao1,.biangao2{
-        top: -5rpx !important;
+        top: 20rpx !important;
     }
     .biangao1{
         left: 200rpx;

pages/formula/rightAngleVertical.vue

@@ -113,18 +113,20 @@
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
     .result1{
+        top: 35rpx;
         left: 240rpx;
     }
     .result2{
+        top: 35rpx;
         left: 360rpx;
     }
     .biangao,.result3{
-        top: 82rpx;
+        top: 90rpx;
     }
     .biangao{
-        left: 275rpx;
+        left: 290rpx;
     }
     .result3{
-        left: 405rpx;
+        left: 409rpx;
     }
 </style>

pages/formula/santongwanHorizontal.vue

@@ -111,7 +111,7 @@
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
     .cibianheight1{
-        top: 210rpx;
+        top: 230rpx;
         left: 10rpx;
     }
     .cidilength{
@@ -119,19 +119,19 @@
         left: 230rpx;
     }
     .cibianheight2{
-        top: 250rpx;
+        top: 290rpx;
         left: 320rpx;
     }
     .cibianheight3{
         top: 290rpx;
-        left: 445rpx;
+        left: 425rpx;
     }
     .slice1{
         top: 390rpx;
-        left: 180rpx;
+        left: 200rpx;
     }
     .slice2{
-        top: 730rpx;
-        left: 160rpx;
+        top: 735rpx;
+        left: 180rpx;
     }
 </style>

pages/formula/slice.vue

@@ -147,7 +147,7 @@
 <style lang="scss" scoped>
     @import "@/static/css/math.scss";
     .slice1,.slice2{
-        top: -15rpx;
+        top: -5rpx;
     }
     .slice1{
         left: 270rpx;
@@ -156,7 +156,7 @@
         left: 360rpx;
     }
     .slice3{
-        top: 280rpx !important;
+        top: 260rpx !important;
         left: 320rpx;
     }
 </style>

static/css/math.scss

@@ -41,15 +41,15 @@
             position: relative;
             text{
                 position: absolute;
-                font-size: 28rpx;
+                font-size: 24rpx;
                 font-weight: 600;
                 color: $main-color;
                 z-index: 999;
                 &.top{
-                    top: 20rpx;
+                    top: 35rpx;
                 }
                 &.bottom{
-                    top: 260rpx;
+                    top: 225rpx;
                 }
             }
         }