fix: 样式问题修复

src/components/GoodAction.vue

@@ -18,7 +18,7 @@
 
 <script>
 const LEFT_BTN_CLICK_EVENT = "leftClick";
-const RIGHT_BTN_CLICK_EVENT = "rightClick";
+const RIGHT_BTN_CLICK_EVENT = "click";
 export default {
   name: "GoodAction",
   props: {
@@ -45,7 +45,6 @@ export default {
     },
     rightClick() {
       // TODO
-      this.$router.push("/goods/inform");
       this.$emit(RIGHT_BTN_CLICK_EVENT, {});
     }
   }

src/views/Goods/detail.less

@@ -39,11 +39,14 @@
     border-radius: @border-radius-md;
     margin-bottom: 12px;
     align-items: center;
+    padding: 9px 16px;
     &::after {
       display: none;
     }
     &__title {
       color: #333333;
+      display: flex;
+      align-items: center;
     }
   }
   &-item_nobg {
@@ -77,6 +80,11 @@
       color: @black;
       margin-right: 4px;
     }
+    .cr-switch {
+      /deep/ &__control {
+        box-shadow: none;
+      }
+    }
     .cr-tag {
       margin: 0 auto 0 8px;
       color: @white !important;
@@ -95,7 +103,8 @@
     /deep/ .cr-checkbox__label {
       font-size: @font-size-11;
       color: @gray-4;
-      line-height: @line-height-lg;
+      margin-left: 5px;
+      // line-height: @line-height-lg;
     }
     &-link {
       margin-top: -3.5px;

src/views/Goods/detail.vue

@@ -59,7 +59,7 @@
         <div class="insure-form-pact" slot="footer">
           <cr-checkbox
             shape="round"
-            icon-size="12px"
+            icon-size="13px"
             v-model="formData.pact"
             checked-color="#FFC842"
           >
@@ -91,7 +91,7 @@
     </div>
     <detail-footer />
     <copyright />
-    <good-action />
+    <good-action @click="goInsureState = true" />
     <protocol-iframe
       v-model="popupShow"
       :title="pupopData.title"

src/views/Goods/modules/CompactCellGroup.vue

@@ -103,7 +103,7 @@ export default {
   &_br {
     /deep/ .cr-cell__value {
       flex: none;
-      width: 165px;
+      width: 70%;
     }
   }
 }

src/views/Goods/modules/DetailHeader.vue

@@ -78,7 +78,6 @@ export default {
       font-weight: normal !important;
       strong {
         font-weight: bold;
-        margin: 0 3px;
       }
     }
   }

src/views/Goods/modules/GoInsureDialog.vue

 <template>
-  <transition name="panel-fade">
-    <cr-popup
-      v-model="show"
-      :style="{ backgroundColor: 'transparent' }"
-      closeable
-      get-container="body"
-      close-icon="close"
-      class="panel-wrap"
-    >
-      <div class="panel">
-        <div class="panel-head">
-          <h4>
-            立即拥有
-            <br />30万重疾轻症保障
-          </h4>
-        </div>
-        <div class="panel-body">
-          <compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" />
-          <div class="pay-tip">*不满意可随时退保</div>
-          <div class="pay-protocol">
-            <div class="pay-protocol-tip">投保前请阅读</div>
-            <div class="pay-protocol-link">
-              <a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
-              <i></i>
-              <a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
-              <i></i>
-              <a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
-              <i></i>
-              <a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
-            </div>
+  <cr-popup
+    v-model="show"
+    :style="{ backgroundColor: 'transparent' }"
+    closeable
+    get-container="body"
+    close-icon="close"
+    class="panel-wrap"
+  >
+    <div class="panel">
+      <div class="panel-head">
+        <h4>
+          立即拥有
+          <br />30万重疾轻症保障
+        </h4>
+      </div>
+      <div class="panel-body">
+        <compactCellGroup class="pay-det" :cell-data="payCellData" :text-bold="true" />
+        <div class="pay-tip">*不满意可随时退保</div>
+        <div class="pay-protocol">
+          <div class="pay-protocol-tip">投保前请阅读</div>
+          <div class="pay-protocol-link">
+            <a href="javascript:;" @click="openIframePupop(0)">保险条款</a>
+            <i></i>
+            <a href="javascript:;" @click="openIframePupop(1)">健康告知</a>
+            <i></i>
+            <a href="javascript:;" @click="openIframePupop(2)">投保须知与声明</a>
+            <i></i>
+            <a href="javascript:;" @click="openIframePupop(3)">服务协议</a>
           </div>
-          <cr-button type="warning" size="large" block @click="go">好的 继续</cr-button>
         </div>
+        <cr-button type="warning" size="large" block @click="go">好的 继续</cr-button>
       </div>
-    </cr-popup>
-  </transition>
+    </div>
+  </cr-popup>
 </template>
 
 <script>
@@ -84,33 +82,6 @@ export default {
 
 <style lang="less" scoped>
 @import "../../../style/var.less";
-.panel-fade-enter-active {
-  animation: dialog-fadein 0.4s;
-  .panel {
-    animation: dialog-zoom 0.4s;
-  }
-}
-
-@keyframes dialog-fadein {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes dialog-zoom {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.1);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
 .panel {
   background-color: @white;
   border-radius: @border-radius-md;
@@ -149,6 +120,36 @@ export default {
   }
 }
 .pay {
+  &-det {
+    padding-left: 34px;
+    position: relative;
+    &::after,
+    &::before {
+      content: " ";
+      display: block;
+      position: absolute;
+      left: 18px;
+      width: 8px;
+      height: 8px;
+      border-radius: @border-radius-max;
+      border: 1px solid @black;
+    }
+    &::before {
+      background-color: @orange-light;
+      top: 24px;
+    }
+    &::after {
+      bottom: 26.5px;
+    }
+    /deep/ & > div:first-child {
+      position: absolute;
+      left: 22.5px;
+      top: 35px;
+      height: 14px;
+      width: 0;
+      border-right: 1px dotted @gray-4;
+    }
+  }
   &-tip {
     font-size: @font-size-12;
     color: @gray-4;