修改样式

dist/css/PeriodExchange.209e2180.css

@@ -1 +0,0 @@
-.mheader[data-v-61d0e2e4]{height:.44rem;overflow:hidden}.m-nav-header[data-v-61d0e2e4]{position:absolute;left:0;top:0;width:100%;height:.44rem;line-height:.44rem;background-color:#14928a;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#fff}.m-nav-header.fixed[data-v-61d0e2e4]{position:fixed;z-index:99}.m-nav-header .m-nav-bar__title[data-v-61d0e2e4]{max-width:60%;margin:0 auto;color:#fff;font-weight:500;font-size:.16rem}.m-nav-header .m-nav-bar__left[data-v-61d0e2e4],.m-nav-header .m-nav-bar__right[data-v-61d0e2e4]{position:absolute;bottom:0}.m-nav-header .m-nav-bar__left[data-v-61d0e2e4]{left:.12rem}.m-nav-header .m-nav-bar__left .arrow-left[data-v-61d0e2e4]{font-size:.21rem;vertical-align:middle}.m-nav-header .m-nav-bar__right[data-v-61d0e2e4]{right:.12rem}.periodExchange[data-v-07afe4e9]{min-height:100vh;position:relative}.periodExchange .logo[data-v-07afe4e9]{width:.5rem;height:.5rem;border-radius:50%;overflow:hidden;margin-right:.13rem}.periodExchange[data-v-07afe4e9] .van-cell{padding:.26rem .16rem .88rem}.periodExchange .exchangeText[data-v-07afe4e9]{font-size:.18rem;color:#1a1a1a}.periodExchange .info[data-v-07afe4e9]{font-size:.16rem;color:grey}.activeList[data-v-07afe4e9]{padding:0 .16rem;margin-top:-.6rem;position:relative;z-index:99}.activeList .active[data-v-07afe4e9]{position:relative;margin-bottom:.15rem;line-height:0}.activeList img[data-v-07afe4e9]{width:100%}.activeList .icon_question[data-v-07afe4e9]{position:absolute;bottom:.06rem;right:.12rem;color:#e94a47;font-size:.18rem}.popupContent[data-v-07afe4e9]{padding:.4rem .16rem .1rem}.pay_btn[data-v-07afe4e9]{background:#14928a;line-height:.45rem;color:#fff;font-size:.18rem;border-radius:.5rem;text-align:center;position:absolute;width:90%;margin-left:5%;bottom:.2rem}

src/views/app/PeriodExchange.vue

@@ -18,9 +18,16 @@
         </van-cell-group>
 
         <div class="activeList">
+            <h2>陪练课说明：</h2>
+
             <div class="active" @click="onPayOrder(item)" v-for="(item, index) in dataList" :key="index">
-                <van-icon name="question-o" @click.stop="onMore(item)" class="icon_question" />
-                <img :src="item.coverImg" alt="">
+                <van-icon name="question-o" v-if="imageStatus" @click.stop="onMore(item)" class="icon_question" />
+                <!-- <img :src="item.coverImg" alt=""> -->
+                <van-image :src="item.coverImg" @load="onImageLoad">
+                    <template v-slot:loading>
+                        <van-loading type="spinner" size="20" />
+                    </template>
+                </van-image>
             </div>
         </div>
     
@@ -49,7 +56,8 @@ export default {
             dataList: [],
             isClick: false,
             popupShow: false,
-            popupContent: null
+            popupContent: null,
+            imageStatus: false
         }
     },
     mounted() {
@@ -108,6 +116,9 @@ export default {
                 this.$toast.clear()
             }
         },
+        onImageLoad() {
+            this.imageStatus = true
+        },
         onPayOrder(item) {
             // activitiesId
             if(this.isClick) {
@@ -168,6 +179,7 @@ export default {
 .periodExchange {
     min-height: 100vh;
     position: relative;
+    background: #fff;
     .logo {
         width: .5rem;
         height: .5rem;
@@ -176,23 +188,45 @@ export default {
         margin-right: .13rem;
     }
     /deep/.van-cell {
-        padding: .26rem .16rem .88rem;
+        margin-top: -1px;
+        padding: .26rem .16rem .15rem;
+        background: #14928A;
     }
     .exchangeText {
         font-size: .18rem;
-        color: #1A1A1A;
+        color: #FFFFFF;
     }
     .info {
-        font-size: .16rem;
-        color: #808080;
+        font-size: .14rem;
+        color: #ccc;
     }
     
 }
 .activeList {
-    padding: 0 .16rem;
-    margin-top: -.6rem;
+    padding: .15rem .16rem 0;
+    // margin-top: -.6rem;
     position: relative;
-    z-index: 99;
+    z-index: 49;
+    h2 {
+        font-size: .16rem;
+        color: #444;
+        padding-left: .15rem;
+        padding-bottom: .15rem;
+        position: relative;
+        &::before {
+            content: ' ';
+            width: .04rem;
+            height: .15rem;
+            background:#14928A;
+            border-radius: .02rem;
+            position: absolute;
+            left: .02rem;
+            top: .05rem;
+        }
+        span {
+            float: right;
+        }
+    }
     .active {
         position: relative;
         margin-bottom: .15rem;
@@ -204,6 +238,7 @@ export default {
     }
     .icon_question {
         position: absolute;
+        z-index: 10;
         bottom: .06rem;
         right: .12rem;
         color: #E94A47;
@@ -213,6 +248,11 @@ export default {
 .popupContent {
     padding: .4rem .16rem .1rem;
 }
+.van-image {
+    display: block;
+    width: 100%;
+    min-width: 1rem;
+}
 .pay_btn {
     background: #14928A;
     line-height: 0.45rem;