css

src/mods/conv/AppReturnHomeRegister/Detail.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="detail" v-if="pageShow">
+
     <div class="detail-header">
       <div class="user">
         <div class="header">
@@ -21,28 +22,33 @@
           </div>
           <div class="nucleinPic">
             <img src="./components/resultPic.png" alt="" @click="preview()">
-            <span>核算证明</span>
+            <span>核酸证明</span>
           </div>
         </div>
       </div>
       <div class="card">
         <div class="item-info">
           <div class="item-info__item">
-            <span class="from"></span>
+            <!-- <span class="from"></span> -->
+            <div class="pic">
+              <img class="img" src="./components/start.png"/>
               <div class="lines"></div>
+            </div>
             <span>{{ info.startAreaName }}</span>
           </div>
           <div class="item-info__item">
-            <span class="to"></span>
+            <!-- <span class="to"></span> -->
+            <div class="pic">
+              <img class="img" src="./components/end.png"/>
+            </div>
             <span>{{ info.arriveAreaName }}</span>
           </div>
           <div class="item-info__item">
-            <image src="/static/img/to-date.png"/>
+            <image class="image" src="/static/img/to-date.png"/>
             <span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }} 到达</span>
           </div>
         </div>
       </div>
-    </div>
 
       <div class="info">
       <div class="detail-info">
@@ -124,6 +130,9 @@
 
     </div>
     </div>
+
+    
+  </div>
 </template>
 
 <script>
@@ -198,7 +207,6 @@ export default {
 
   .detail-header {
     padding: 32px 32px 100px 32px;
-    // height: 680px;
     background: linear-gradient(135deg, #6496FF 0%, #4F75FF 100%);
     position: relative;
 
@@ -269,49 +277,59 @@ export default {
       .item-info {
         .item-info__item {
           display: flex;
-          align-items: center;
           margin-bottom: 8px;
-          position: relative;
 
           &:last-child {
             margin-bottom: 0;
           }
+          .pic {
+            position: relative;
+            .img {
+              width: 12px;
+              height: 12px;
+            }
+            .lines {
+              position: absolute;
+              top: 32px;
+              left: 4px;
+              width: 4px;
+              height: 100%;
+              border-left: 4px dotted #CCCCCC;
+            }
+          }
 
-          image {
+          .img {
+              width: 12px;
+              height: 12px;
+              position: relative;
+            }
+          
+
+          .image {
             width: 32px;
             height: 32px;
             margin-right: 16px;
           }
 
-          .from,
+          // .from,
-          .to {
+          // .to {
-            display: inline-block;
+          //   display: inline-block;
-            width: 12px;
+          //   width: 12px;
-            height: 12px;
+          //   height: 12px;
-            border: 2px solid #FFFFFF;
+          //   border: 2px solid #FFFFFF;
-            border-radius: 50%;
+          //   border-radius: 50%;
-          }
+          // }
 
-          .from {
+          // .from {
-            background: #FFBB3B;
+          //   background: #FFBB3B;
-            z-index: 9;
+          //   z-index: 9;
             
-          }
+          // }
-
-          .to {
-            background: #2BD6C0;
-            z-index: 9;
-          }
-
-          .lines {
-            position: absolute;
-            top: 35px;
-            left: 6px;
-            width: 4px;
-            height: 80%;
-            border-left: 4px dotted #CCCCCC;
-          }
 
+          // .to {
+          //   background: #2BD6C0;
+          //   z-index: 9;
+          // }
           span:last-child {
             color: #fff;
             font-size: 28px;
@@ -321,11 +339,9 @@ export default {
       }
     }
 
-  }
-
     .info {
     position: absolute;
-    top: 60%;
+    top: 93%;
     left: 50%;
     width: 100%;
     transform: translate(-50%, 1%);
@@ -404,4 +420,8 @@ export default {
   }
     
   }
+
+  
+
+}
 </style>