feat: improve kaifain solution details page mobile styles

kaifain_v2/components/ApiDoc.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   .api-doc
-    .b-tabs.is-vertical
+    .b-tabs(:class="{'is-vertical': !isMobile, 'is-mobile': isMobile}")
       nav.tabs(v-show="routes.length > 1")
         ul
           li(
@@ -94,7 +94,9 @@ export default Vue.extend({
 
   data() {
     return {
-      curIndex: 0
+      curIndex: 0,
+      // @ts-ignore
+      isMobile: this.$deviceType.isMobile()
     }
   },
 
@@ -110,29 +112,46 @@ export default Vue.extend({
 @import '../assets/styles/vars';
 
 .api-doc {
-  .tabs {
-    margin-right: 1.5rem;
-    border-right: 1px solid #eaeaea;
+  .b-tabs {
+    .tabs {
+      li {
+        font-size: 0.875rem;
+
+        // a {
+        //   // padding: 0.75rem 0 0.75em 1rem;
+        // }
+
+        &.is-active {
+          a {
+            color: $primary;
+            border-color: $primary;
+          }
+        }
+      }
+    }
 
-    li {
-      font-size: 0.875rem;
+    .tab-content {
+      flex: 1;
+      overflow: hidden;
+    }
 
-      a {
-        padding: 0.75rem 0 0.75em 1rem;
-        border: 0;
-      }
+    &.is-vertical {
+      .tabs {
+        margin-right: 1.5rem;
+        border-right: 1px solid #eaeaea;
 
-      &.is-active {
         a {
-          color: $primary;
+          padding: 0.75rem 0 0.75em 1rem;
+          border: 0;
         }
       }
     }
-  }
 
-  .b-tabs .tab-content {
-    flex: 1;
-    overflow: hidden;
+    &.is-mobile {
+      .tab-content {
+        padding: 2em 0 0 0;
+      }
+    }
   }
 
   h2 {

kaifain_v2/components/PanelApiCell.vue

@@ -116,7 +116,7 @@ export default Vue.extend({
   @media screen and (max-width: 480px) {
     .figure {
       margin-left: 0;
-      margin-right: 1.5em;
+      margin-right: 1.25em;
     }
 
     .icon {
@@ -125,7 +125,7 @@ export default Vue.extend({
     }
 
     .actions {
-      margin: 1em -1em 0 -4.5em;
+      margin: 1em -1em 0 -4.25em;
     }
   }
 }

kaifain_v2/pages/solution.vue

@@ -194,7 +194,7 @@ export default Vue.extend({
 
     skus(): any[] | null {
       // @ts-ignore
-      return this.data && this.data.is_signing == 1 && this.data.skus && this.data.skus.length ? this.data.skus.sort((a, b) => a.price - b.price) : null
+      return this.data && this.data.is_signing == 1 && this.data.skus && this.data.skus.length ? this.data.skus.filter(item => !item.label.startsWith('test')).sort((a, b) => a.price - b.price) : null
     },
 
     skuMap() {
@@ -651,9 +651,11 @@ export default Vue.extend({
 
   @media screen and (max-width: 768px) {
     .summary {
+      padding: 88px 0 64px;
+
       .cover {
-        width: 128px;
-        height: 128px;
+        width: 112px;
+        height: 112px;
         border-radius: 28px;
       }
     }