样式调整

src/pages/fill-order/StepOne.vue

@@ -3,20 +3,29 @@
     <div class="ptc-block">
       <div class="ptc-inner">
         <p class="ptc-label">Choose a version</p>
-        <PtcRadioGroup v-model="state.form.product_id" style="display: flex">
-          <PtcRadio
+        <PtcRadioGroup
+          v-model="state.form.product_id"
+          class="version-list"
+          :class="{ loose: state.productList.length === 2 }"
+        >
+          <div
             v-for="product of state.productList"
             :key="product.id"
-            class="version"
-            :value="product.id"
-            :disabled="!!state.form.renewal"
+            class="version-wrap"
           >
-            <i
-              class="version-icon"
-              :style="{ backgroundImage: `url(${product.image})` }"
-            ></i>
-            <span class="mt18">{{ product.name }}</span>
-          </PtcRadio>
+            <PtcRadio
+              class="version"
+              :value="product.id"
+              :disabled="!!state.form.renewal"
+              :style="{ fontSize: calcFZ(product.name) }"
+            >
+              <i
+                class="version-icon"
+                :style="{ backgroundImage: `url(${product.image})` }"
+              ></i>
+              <p class="version-name ellipsis-2">{{ product.name }}</p>
+            </PtcRadio>
+          </div>
         </PtcRadioGroup>
         <div
           class="version-desc"
@@ -133,6 +142,11 @@ function reviseDiscount() {
   state.form.discount_code = ''
 }
 
+function calcFZ(text: string) {
+  const scale = Math.max(Math.min(5 / text.length, 1), 24 / 56)
+  return 0.56 * scale + 'rem'
+}
+
 async function next() {
   if (!state.form.subscribe_type)
     return Toast('Please choose a subscription method')
@@ -143,16 +157,36 @@ async function next() {
 </script>
 
 <style lang="scss" scoped>
+.version-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.version-wrap {
+  display: flex;
+  margin-bottom: 32px;
+  width: 33.33%;
+  &:nth-child(3n - 1) {
+    justify-content: center;
+  }
+  &:nth-child(3n) {
+    justify-content: flex-end;
+  }
+  .loose & {
+    width: 256px;
+  }
+}
 .version {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  margin-right: 64px;
   width: 212px;
   height: 212px;
   font-size: 56px;
   font-weight: bold;
+  &:nth-child(3n) {
+    margin-right: 0;
+  }
 
   &-icon {
     width: 36px;
@@ -161,31 +195,33 @@ async function next() {
     background-size: contain;
   }
 
-  .mt18 {
+  &-name {
     margin-top: 18px;
+    padding: 0 8px;
+    text-align: center;
   }
 
   &-desc {
     position: relative;
-    margin-top: 32px;
+    // margin-top: 32px;
     padding: 28px 24px;
     line-height: 40px;
     font-size: 28px;
     color: #193059;
     background: #f2f5fb;
-    &::before {
-      content: '';
-      position: absolute;
-      left: 88px;
-      top: 0;
-      transform: translateY(-100%);
-      border-style: solid;
-      border-width: 0 12px 14px;
-      border-color: #f2f5fb transparent;
-    }
-    &.second::before {
-      left: 88px + 276px;
-    }
+    // &::before {
+    //   content: '';
+    //   position: absolute;
+    //   left: 88px;
+    //   top: 0;
+    //   transform: translateY(-100%);
+    //   border-style: solid;
+    //   border-width: 0 12px 14px;
+    //   border-color: #f2f5fb transparent;
+    // }
+    // &.second::before {
+    //   left: 88px + 276px;
+    // }
   }
 }
 

src/pages/password/index.vue

@@ -176,6 +176,7 @@ async function applyReset() {
     margin-top: 98px;
     padding: 0 76px;
     @include media-breakpoint-up(md) {
+      padding: 0;
       min-height: 1084px - 98px;
     }
   }

src/pages/repair/index.scss

@@ -214,7 +214,7 @@
     @include icon('@img/calendar.png', 32px);
   }
   .action {
-    margin: 50px 0 48px;
+    margin-top: 50px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -222,7 +222,7 @@
     color: $primary-color;
   }
   .note {
-    margin-bottom: 48px;
+    margin: 48px 0;
     padding: 24px 22px;
     background: #f2f5fb;
     font-size: 28px;

src/pages/repair/steps/StepFive.vue

@@ -5,9 +5,9 @@
         <i class="alert-icon"></i>
         <p class="alert-message">{{ formattedTime }}</p>
       </div>
-      <div class="action">
+      <!-- <div class="action">
         <i class="icon-calendar"></i><strong>Add to calendar ></strong>
-      </div>
+      </div> -->
       <div class="note">
         <p class="note-title">Preparations：</p>
         <ul class="note-list">

src/style/_mixins.scss

@@ -34,6 +34,20 @@
   }
 }
 
+@mixin ellipsis($line: 1) {
+  @if $line == 1 {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  } @else {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: $line;
+    -webkit-box-orient: vertical;
+  }
+}
+
 $media-breakpoint-map: (
   sm: $breakpoint-sm,
   md: $breakpoint-md,

src/style/atom.scss

@@ -24,6 +24,13 @@
   flex-shrink: 0;
 }
 
+.ellipsis {
+  @include ellipsis();
+  &-2 {
+    @include ellipsis(2);
+  }
+}
+
 .mt48 {
   margin-top: 48px !important;
 }

src/style/components.scss

@@ -13,7 +13,7 @@
 .ptc-inner {
   @include media-breakpoint-up(md) {
     margin: auto;
-    padding: 0 36px;
+    // padding: 0 36px;
     width: 750px;
   }
 }