更新UI

src/views/appoint/index.vue

@@ -6,12 +6,12 @@
       :header-info="headerInfo"
     />
     <div class="wrap">
-      <div class="title-1">
+      <!-- <div class="title-1">
         检测预约
       </div>
       <div class="title-2">
         及时接受检测结果检测报告
-      </div>
+      </div> -->
       <div class="choose-section">
         <van-form
           ref="dectionForm"
@@ -173,6 +173,9 @@
       >
         提交
       </van-button>
+      <div class="appoint-tel">
+        客服电话：<a href="tel:400-006-5252">400-006-5252</a>
+      </div>
     </div>
     <SelectHospital
       :external-data="externalData"
@@ -561,6 +564,7 @@ export default {
   overflow: auto;
   box-sizing: border-box;
   color: #ffffff;
+  background: #F3FCFF;
 
   .bg-img {
     width: 100%;
@@ -572,9 +576,6 @@ export default {
   .wrap {
     padding: 0 12px;
     overflow: auto;
-    background: url('https://files.yunqueyi.com/image/png/common/20221213160647748.png')
-  no-repeat top left;
-  background-size: 100% 281px;
   }
   .title-1 {
     font-size: 20px;
@@ -800,6 +801,16 @@ export default {
   .appoint-form-submit-active{
     background: #00BDA5;
   }
+  .appoint-tel{
+    margin-top: 25px;
+    height: 22px;
+    font-size: 14px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #666666;
+    line-height: 22px;
+    text-align: center;
+  }
 }
 ::v-deep {
   .address-wrap {

src/views/insurance-bind-code/insurance-bind-code.vue

 <template>
-  <div class="insurance-binding-code-container" :class="picaWechat == 'wechat' && 'mt20'">
+  <div
+    class="insurance-binding-code-container"
+    :class="picaWechat == 'wechat' && 'mt20'"
+  >
     <page-model
       v-if="picaWechat != 'wechat'"
       ref="PageModel"

src/views/insurance-question-result/insuranceQuestionResult.vue

@@ -6,56 +6,75 @@
       :header-info="headerInfo"
     />
     <div class="insuranceQuestionResult">
-      <div class="icon-item">
-        <img
-          :src="
-            !needDetect
-              ? 'https://files.yunqueyi.com/image/png/common/20221213144514273.png'
-              : 'https://files.yunqueyi.com/image/png/common/20221213144810625.png'
-          "
-        >
-      </div>
-      <div
-        class="font-big"
-        :class="needDetect && 'green'"
-      >
-        {{ !needDetect ? '建议领用' : '暂无需领用' }}
-      </div>
-      <div class="font-normal">
-        {{
-          !needDetect
-            ? '参照本次评估结果，建议您接受防癌早筛检测。坚持良好生活方式，定期接受体检，关注个人健康'
-            : '参照本次评估结果，建议您可暂不进行防癌早筛检测。坚持良好生活方式，定期接受体检，关注个人健康。'
-        }}
-      </div>
-      <div
-        v-if="!needDetect"
-        class="advise"
-      >
-        <div class="fs">
-          建议您进行以下防癌筛查：
-        </div>
-        <div class="ad-fs">
-          {{ detectionName || '' }}
-        </div>
-      </div>
-      <div
-        v-if="!needDetect"
-        class="progress"
-      >
-        <img
-          src="https://files.yunqueyi.com/image/png/common/20221226103307358.png"
-        >
+      <div class="insuranceQuestionResult-info">
+        <template v-if="!needDetect">
+          <div class="info-top">
+            <div class="info-top-title">
+              防癌专家提醒您尽快进行
+            </div>
+            <div class="info-top-name">
+              {{ detectionName }}
+            </div>
+            <div class="info-top-tips">
+              <div class="tips-item">
+                <div class="tips-item-dot" />
+                DNA甲基化检测技术，对比传统肿瘤标志物检查,早期癌变检出率高5-10倍
+              </div>
+              <div class="tips-item">
+                <div class="tips-item-dot" />
+                早期检出、早期干预、实现可逆
+              </div>
+              <div class="tips-item">
+                <div class="tips-item-dot" />
+                检测报告阳性，最高可报销300元复查费用
+              </div>
+            </div>
+          </div>
+          <img
+            src="https://files.yunqueyi.com/image/gif/common/20230228173135233.gif"
+            class="info-btn"
+          >
+
+          <div class="info-tips">
+            点击上方按钮预约，并前往预约的医疗机构采样
+          </div>
+        </template>
+        <template v-else>
+          <div class="info-noNeed">
+            <div class="info-noNeed-title">
+              <div class="text-left" />
+              参照本次评估结果
+              <div class="text-right" />
+            </div>
+            <div class="info-noNeed-result">
+              您可暂不进行防癌早筛检测
+            </div>
+            <div class="info-noNeed-tips">
+              <div class="tips-item">
+                <div class="tips-item-dot" />
+                坚持良好生活方式；
+              </div>
+              <div class="tips-item">
+                <div class="tips-item-dot" />
+                定期接受体检，关注个人健康
+              </div>
+            </div>
+          </div>
+        </template>
       </div>
-      <div
+
+      <!-- <div
         v-if="!needDetect"
         class="custom-style"
 
         @click="toAppoint"
       >
         {{ buttonText || '免费预约检测' }}
-      </div>
-      <div class="tips">
+      </div> -->
+
+      <div
+        class="tips-fixed"
+      >
         注：该问卷评估结果仅供填写人自行参考。
       </div>
     </div>
@@ -151,105 +170,191 @@ export default {
 
 <style lang="scss" scoped>
 .insuranceQuestionResult-box{
-background: #fff;
+  height: 100vh;
+background: #F3FCFF;
 }
 .insuranceQuestionResult {
   width: 100%;
   box-sizing: border-box;
-  padding: 0 16px;
   color: #676869;
   overflow: auto;
   text-align: center;
-  .icon-item {
-    width: 50px;
-    height: 60px;
-    margin: 0 auto;
-    margin-top: 30px;
-    img {
-      width: 100%;
-      height: 100%;
+  background: url('https://files.yunqueyi.com/image/png/common/20230228101352132.png') no-repeat left top;
+  background-size: 100% 209px ;
+
+}
+.insuranceQuestionResult-info{
+  width: 348px;
+  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+  box-shadow: 0px 9px 6px 0px #EBF9F8;
+  border-radius: 20px;
+  border: 1px solid rgba(0,189,165,0.33);
+  margin: 168px auto 54px;
+  .info-top{
+    width: 308px;
+    height: 200px;
+    background: #FFFBF9;
+    border-radius: 11px;
+    margin: 10px auto 20px;
+    overflow: hidden;
+    .info-top-title{
+      margin-top: 25px;
+      height: 21px;
+      font-size: 15px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #EF8337;
+      line-height: 21px;
+
     }
+    .info-top-name{
+      margin-top: 8px;
+      height: 22px;
+      font-size: 20px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #EF8337;
+      line-height: 22px;
+    }
+    .info-top-tips{
+      margin-top: 25px;
+      .tips-item{
+        position: relative;
+        padding-left: 25px;
+        padding-right: 14px;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #212121;
+        line-height: 20px;
+        text-align: left;
+      }
+
+      .tips-item-dot{
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: #EF8337;
+        opacity: 0.8;
+        left: 15px;
+        top: 9px;
+        border-radius: 50%;
+      }
+    }
+
   }
-  .font-big {
-    margin-top: 8px;
-    font-size: 25px;
-    font-weight: 500;
-    color: #ef8337;
-  }
-  .green {
-    color: #179082;
+  .info-btn{
+      position: relative;
+      width: 375px;
+      height: 105px;
+      margin: 0 auto;
+      font-size: 21px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #FFFFFF;
+      left: 50%;
+      transform: translateX(-50%);
+      line-height: 64px;
+      text-align: center;
+      margin-bottom: 20px;
   }
-  .font-normal {
-    margin-top: 15px;
-    font-size: 15px;
+  .info-tips{
+    height: 18px;
+    font-size: 13px;
+    font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
     color: #666666;
+    line-height: 18px;
+    margin-bottom: 38px;
   }
-  .advise {
-    height: 48px;
-    background: #fffbf9;
-    border-radius: 11px;
-    border: 1px solid #fbe0ce;
-    padding: 15px;
-    text-align: center;
-    margin: 16px auto;
-  }
-  .fs {
-    font-size: 12px;
+}
+.tips{
+  height: 21px;
+  font-size: 13px;
+  font-family: PingFangSC-Light, PingFang SC;
+  font-weight: 300;
+  color: #999999;
+  line-height: 21px;
+}
+.info-noNeed{
+  width: 307px;
+  height: 154px;
+  background: #F9FAFB;
+  border-radius: 11px;
+  margin: 22px auto;
+  overflow: hidden;
+  .info-noNeed-title{
+    height: 21px;
+    font-size: 15px;
+    font-family: PingFangSC-Regular, PingFang SC;
     font-weight: 400;
-    color: #999999;
-    margin-bottom:6px ;
+    color: #00BDA5;
+    line-height: 21px;
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+        position: relative;
+        .text-left{
+          width: 20px;
+          height: 1px;
+          background: linear-gradient(270deg, #EEEEEE 0%, #D8D8D8 100%);
+          border-radius: 1px;
+          margin-right: 6px;
+        }
+        .text-right{
+          width: 20px;
+          height: 1px;
+          background: linear-gradient(270deg, #EEEEEE 0%, #D8D8D8 100%);
+          border-radius: 1px;
+          margin-left: 6px;
+        }
   }
-  .ad-fs {
+  .info-noNeed-result{
+    margin-top: 4px;
+    height: 20px;
     font-size: 18px;
+    font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #ef8337;
-  }
-  .custom-style {
-    background: #00bda5;
-    font-size: 16px;
-    color: #ffffff;
-    font-weight: 600;
-    width: 90%;
-    height: 40px;
-    line-height: 40px;
-    border-radius: 40px;
-    //position: absolute;
-    //bottom: 120px;
-    margin: 0 auto;
-    margin-top: 70px;
+    color: #00BDA5;
+    line-height: 20px;
+    margin-bottom: 25px;
   }
-  .tips {
-    font-size: 13px;
-    font-weight: 300;
-    color: #212121;
-    //bottom: 60px;
-    //position: absolute;
-    margin: 0 auto;
-    text-align: center;
-    width: 100%;
-    margin-top: 38px;
-  }
-  .progress {
-    margin-top: 24px;
-    height: 168px;
-    width: 100%;
+  .info-noNeed-tips{
 
-    image {
-      width: 100%;
-      height: 100%;
+    margin-bottom: 25px;
+    .tips-item{
+      position: relative;
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+      line-height: 20px;
+      text-align: left;
+      padding-left:38px ;
+      .tips-item-dot{
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: #179082;
+        opacity: 0.8;
+        left: 27px;
+        top: 9px;
+        border-radius: 50%;
+      }
     }
+
   }
 }
-.loadingShow {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100vw;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: rgba($color: #000000, $alpha: 0.3);
+.tips-fixed{
+  position: fixed;
+  width: 100%;
+  bottom: 70px;
+  height: 21px;
+  font-size: 13px;
+  font-family: PingFangSC-Light, PingFang SC;
+  font-weight: 300;
+  color: #999999;
+  line-height: 21px;
 }
 </style>