init

src/components/PreviewInMobileClient/index.vue

@@ -11,21 +11,21 @@
       </div>
       <div class="item" v-if="data.type === 1">
         <div class="msg" style="width: 100%">
-          <div class="word-title" v-if="data.title">
+          <div class="word-title pd_0_12" v-if="data.title">
             {{ data.title }}
           </div>
           <div class="word-time">
             2024-01-29 10:10:11
           </div>
-          <div class="word" v-if="data.textText1">
+          <div class="word pd_0_12" v-if="data.textText1">
             {{ data.textText1 }}
           </div>
-          <div class="word" v-if="textContext">
+          <div class="word pd_0_12" v-if="textContext">
             <div v-for="val in textContext">
               {{val.n}} : {{val.v}}
             </div>
           </div>
-          <div class="word" v-if="data.textText2">
+          <div class="word pd_0_12" v-if="data.textText2">
             {{ data.textText2 }}
           </div>
         </div>
@@ -33,15 +33,19 @@
       <div class="item" v-if="data.type === 2">
         <div class="msg" style="width: 100%">
           <div class="miniprogram">
-            <div style="position: relative;">
+            <div class='img_panel' style="position: relative;">
+              <div class="img_title">
+                <span>测试文字title</span>
+              </div>
+              <div class="img-box">
                 <img class="mini-img" :src="imageFunc(data.oneImageImage)" @click="goTo(data.oneImageLinkType,data.oneImageLinkUrl)"/>
-              <span style="position: absolute; bottom: 0; left: 0;">添加文字...添加文字...添加文字...</span>
               </div>
-            <div class="word-title" v-if="data.title">
-              {{ data.title }}
             </div>
-            <div class="word" v-if="data.oneImageText && data.oneImageTitleType === 0">
+            <div class="word-title" style="margin-top: 10px;font-weight: bold;">
-              {{ data.oneImageText }}
+             测试数据标题
+            </div>
+            <div class="word">
+              测试数据文本
             </div>
           </div>
         </div>
@@ -49,30 +53,38 @@
       <div class="item" v-if="data.type === 3">
         <div class="msg" style="width: 100%">
           <div class="miniprogram" >
-            <div class="mini-img" :style="{'background-image': 'https://nono-1257812345.cos.ap-shanghai.myqcloud.com/images/avatar/woman.png'}">
+            <div class='img_panel' style="position: relative;">
+              <div class="img-box" style="position: relative;">
+                <img class="mini-img" src="" alt="">
+                <div class="img_desc">3211</div>
+              </div>
+              <div class="msg-list">
+                <div class="msg-list_item" v-for="item in 2">
+                  <div class="text">123</div>
+                  <div class="img"></div>
                 </div>
-            <div>
-              <div>12231231</div>
-              <img class="mini-img" :src="imageFunc(data.oneImageImage)" @click="goTo(data.oneImageLinkType,data.oneImageLinkUrl)"/>
               </div>
-            <div>
-              <div>12231231</div>
-              <img class="mini-img" :src="imageFunc(data.oneImageImage)" @click="goTo(data.oneImageLinkType,data.oneImageLinkUrl)"/>
             </div>
           </div>
         </div>
       </div>
 
       <div class="item" v-if="data.type === 4">
-        <div class="msg" style="width: 100%">
+        <div class="msg">
           <div class="miniprogram">
-            <img class="mini-img" :src="imageFunc(data.onlyImage)"/>
+            <div class='img_panel' style="position: relative;">
+              <img class="mini-img" src="https://nono-1257812345.cos.ap-shanghai.myqcloud.com/cai/2024/01/29/4c8a98ad0de14341a5fbf1a4787e45dd.png" alt="">
+<!--              <div class="img-box" style="position: relative;">
+                <img class="mini-img" src="" alt="">
+              </div>-->
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </template>
+<!--cursor: pointer;-->
 <script>
 export default {
   name: 'PreviewClient',
@@ -111,6 +123,22 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
+.pd_12 {
+  padding: 12px!important;
+}
+
+.pd_0_12 {
+  padding: 0 12px!important;
+}
+
+.pd_l_12 {
+  padding-left: 12px!important;
+}
+
+.pd_r_12 {
+  padding-left: 12px!important;
+}
+
 .preview {
   margin: 0 auto;
   position: relative;
@@ -122,7 +150,7 @@ export default {
 
   .title {
     position: absolute;
-    top: 37px;
+    top: 28px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 14px;
@@ -190,14 +218,16 @@ export default {
 
         .word-title {
           font-weight: bold;
-          padding: 4px 12px;
+          padding: 4px 0;
+          font-size: 14px;
+          color: #000;
         }
         .word-time{
           color: #99a9bf;
           padding: 0px 12px;
         }
         .word {
-          padding: 5px 12px;
+          margin-top: 3px;
         }
 
         .image {
@@ -211,10 +241,59 @@ export default {
 
         .miniprogram {
           padding: 12px;
-          .mini-img {
+          .img-box {
-            margin: 10px 0;
+            border-radius: 6px;
             width: 100%;
             height: 120px;
+            background: #DCDFE6;
+            overflow: hidden;
+            .mini-img {
+              height: 100%;
+              width: 100%;
+            }
+            .img_desc {
+              position: absolute;
+              left: 18px;
+              bottom: 18px;
+              color: #fff;
+              font-size: 14px;
+            }
+          }
+          .img_panel {
+            .img_title {
+              padding: 0 10px;
+              border-radius: 20px;
+              line-height: 20px;
+              position: absolute;
+              right: 18px;
+              top: 10px;
+              background: #000000;
+              opacity: 0.4;
+              span {
+                opacity: 1;
+                color: #fff;
+              }
+            }
+          }
+
+          .msg-list {
+            &_item {
+              height: 80px;
+              padding: 10px;
+              line-height: 60px;
+              box-sizing: border-box;
+              display: flex;
+              border-bottom: 1px solid #E4E7ED;
+              .text {
+                color: #000;
+                flex-grow: 1;
+              }
+              .img {
+                width: 60px;
+                height: 60px;
+                background:  #99a9bf;
+              }
+            }
           }
         }
       }

src/views/cai/sysPush/add-sys-push-dialog.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog title="新增系统推送" :close-on-click-modal="false" :visible.sync="open" width="900px" append-to-body>
-    <el-row>
+    <el-row :gutter="`10`">
       <el-col style="width: 550px">
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-form-item label="群体类型" prop="groupId">
@@ -157,9 +157,6 @@
           </el-form-item>
         </el-form>
       </el-col>
-      <el-col style="width: 10px">
-        <div style="width: 100%"></div>
-      </el-col>
       <el-col style="width: 200px;">
         <preview-client :data="form" :textContext="textContext" :imageContext="imageContext"></preview-client>
       </el-col>