feat: 短剧组推广 - H5样式 & build H5

qwh5/src/views/extend.vue

@@ -29,7 +29,7 @@ const getUserInfo = () => {
     Toast.clear();
     if (res.rst) {
       if (getQueryString('jumpLink')) {
-        // 注：测试参数拼接如果修改，playletGroupH5.vue 中 handleGetPlayletGroup() 处参数拼接也要同步修改
+        // 注：url 参数拼接如果修改，playletGroupH5.vue 中 handleGetPlayletGroup() 处参数拼接也要同步修改
         let jumpLink = decodeURIComponent(getQueryString('jumpLink'))
         if (jumpLink.indexOf('?') != -1) {
           let url = jumpLink + '&params=' + res.rst.external_userid + '&userId=' + res.rst.external_userid;

qwh5/src/views/playletGroupH5.vue

@@ -16,10 +16,12 @@
 
     <div class="playlet-wrap">
       <div class="playlet-item" v-for="(item, idx) in playletGroup.list" :key="idx" @click="onClickPlay(item)">
+        <div class="cover-wrap">
+          <!-- cover contain fill none scale-down -->
+          <van-image class="p-img" :src="item.playlet_cover" radius="10" fit="contain" />
+          <img class="play-btn" src="@/assets/img/play-btn.png" />
+        </div>
         <div class="p-name">{{ item.playlet_name }}</div>
-        <!-- cover contain fill none scale-down -->
-        <van-image class="p-img" :src="item.playlet_cover" radius="10" fit="contain" />
-        <img class="play-btn" src="@/assets/img/play-btn.png" />
       </div>
     </div>
   </div>
@@ -241,7 +243,6 @@ const changeTitleClick = () => {
   // S 竖版 1行2个剧
   .playlet-wrap {
     display: flex;
-    align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     .playlet-item {
@@ -249,29 +250,32 @@ const changeTitleClick = () => {
       width: 48%;
       // height: 250px;
       margin-bottom: 16px;
-      position: relative;
       background-color: #fff;
       padding: 10px;
+      .cover-wrap {
+        position: relative;
+        .p-img {
+          width: 100%;
+          height: 220px;
+        }
+        .play-btn {
+          width: 40px;
+          height: 40px;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+      }
       .p-name {
-        padding: 6px 6px 3px;
+        padding: 6px;
+        text-align: center;
         font-size: 16px;
-        color: #333;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .p-img {
-        margin-top: 10px;
-        width: 100%;
-        height: 220px;
-      }
-      .play-btn {
-        width: 40px;
-        height: 40px;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
+        color: #555;
+        font-weight: 700;
+        // white-space: nowrap;
+        // overflow: hidden;
+        // text-overflow: ellipsis;
       }
     }
   }