feat: ui optimize

src/views/appointDetails/index.vue

@@ -10,12 +10,12 @@
         <div class="detail-status">
           <img
             v-if="expireFlag"
-            src="https://files.yunqueyi.com/image/png/common/20230301105920798.png"
+            src="https://files.yunqueyi.com/image/png/common/20230804161425552.png"
             alt=""
           >
           <img
             v-else
-            src="https://files.yunqueyi.com/image/png/common/20230804142305549.png"
+            src="https://files.yunqueyi.com/image/png/common/20230804161508175.png"
             alt=""
           >
 
@@ -30,8 +30,14 @@
         <div class="detection-time mb5">
           {{ detailInfo.appointmentTimeStr2 }}
         </div>
-        <div class="detail-top-info">
-          <div class="detail-top-address">
+        <div
+          class="detail-top-info"
+          :class="{ 'navigation-img--active': !isRemark }"
+        >
+          <div
+            class="detail-top-address"
+            :class="{ 'navigation-img--active': isRemark }"
+          >
             <div class="detail-top-address-name">
               {{ detailInfo.hospitalName || '--' }}
             </div>
@@ -48,24 +54,24 @@
             >
               <img
                 class="navigation-img"
-                src="https://files.yunqueyi.com/image/png/common/20230301160437750.png"
+                src="https://files.yunqueyi.com/image/png/common/2023080416441238.png"
               >
-              <div class="navigation-text">
+              <!-- <div class="navigation-text">
                 导航
-              </div>
+              </div> -->
             </div>
           </div>
           <div
-            v-if="
-              detailInfo.hospitalRemarks && detailInfo.hospitalRemarks !== ''
-            "
+            v-if="isRemark"
             class="detail-top-hospitalInfo"
           >
             <img
               src="https://files.yunqueyi.com/image/png/common/20230228181040335.png"
               alt=""
             >
-            {{ detailInfo.hospitalRemarks }}
+            提示备注信息提示备注信息提示备注信息提示{{
+              detailInfo.hospitalRemarks
+            }}
           </div>
         </div>
       </div>
@@ -260,6 +266,12 @@ export default {
   },
   computed: {
     ...mapGetters('home', ['insuranceInfo']),
+    isRemark() {
+      return (
+        this.detailInfo.hospitalRemarks &&
+        this.detailInfo.hospitalRemarks !== ''
+      );
+    },
   },
 
   created() {
@@ -633,8 +645,8 @@ export default {
     color: #212121;
     line-height: 18px;
     img {
-      width: 24px;
-      height: 24px;
+      width: 20px;
+      height: 20px;
       margin-right: 6px;
     }
   }
@@ -654,6 +666,7 @@ export default {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    margin-bottom: 10px;
 
     .cancel-code {
       width: 165px;
@@ -679,12 +692,15 @@ export default {
     }
   }
 
+  .navigation-img--active {
+    background-image: url('https://files.yunqueyi.com/image/png/common/2023080416421136.png') !important;
+    background-position: 100% !important;
+    background-size: cover !important;
+  }
+
   .detail-top-info {
-    background: #f9fafb;
+    background-color: #f9fafb;
     border-radius: 11px;
-    padding-bottom: 10px;
-    background-image: url('https://files.yunqueyi.com/image/png/common/20230804154424560.png');
-    background-position: 100%;
     .detail-top-img {
       position: relative;
       left: 50%;
@@ -696,18 +712,21 @@ export default {
     .detail-top-hospitalInfo {
       position: relative;
       display: flex;
-      padding-left: 27px;
       font-size: 13px;
       font-family: PingFangSC-Regular, PingFang SC;
       font-weight: 400;
       color: #212121;
       line-height: 19px;
       align-items: center;
+      padding: 10px 0 10px 27px;
+      border-top: 1px solid f0f1f2;
+      background-color: #f9fafb;
+      border-radius: 0 0 11px 11px;
 
       img {
         position: absolute;
         left: 12px;
-        top: 1px;
+        top: 12px;
         width: 12px;
         height: 14px;
         margin-right: 5px;
@@ -769,8 +788,8 @@ export default {
       top: 13px;
       right: 12px;
       .navigation-img {
-        width: 28px;
-        height: 28px;
+        width: 36px;
+
         margin-bottom: 4px;
       }
       .navigation-text {