精选动态

src/project/fengdu/AppNewFarmerBank/handpick.vue

@@ -9,7 +9,7 @@
           <span>99+</span>
         </div>
       </div>
-      <div class="bottom">
+      <div class="bottom" @click="$linkTo(`./pickDetail`)">
         <img src="https://cdn.cunwuyun.cn/fengdu/img-jifenlist.png" alt="">
       </div>
     </div>

src/project/fengdu/AppNewFarmerBank/pickDetail.vue

@@ -1,6 +1,21 @@
 <template>
   <div class="pickDetail">
-
+    <div class="container">
+      <div class="title">房前屋后卫生</div>
+      <p class="avatar">李维民</p>
+      <div class="content">
+        百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年在国务院举办午，
+        庆祝中国共产党成立100周年在国务院举办午，庆祝中7月1日上午，庆祝中国共产党成立100周年在国务院举办午，
+        庆祝中国共产党成立100周年在国务院举办午，
+        庆祝中7月1日上午，庆祝中国共产党成立100周年在国务院举办午，庆祝中国共产党成立100周年在国务院
+      </div>
+      <div class="imgs" v-if="images.length">
+        <image v-for="(img, i) in images" @click="preview(img.url, images)" :key="i" class="banner" :src="img.url"/>
+      </div>
+      <div class="imgs" v-if="videos.length">
+        <video v-for="(video, ins) in videos" :key="ins" class="file-img" :src="video.url"/>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,11 +25,17 @@ export default {
   appName: '精选动态',
   data() {
     return {
-
+      images: [],
+      videos: [],
     }
   },
   method: {
-    
+    preview(url, imgs) {
+      uni.previewImage({
+        urls: imgs.map((v) => v.url),
+        current: url,
+      })
+    },
   },
   onLoad(o) {
 
@@ -24,6 +45,48 @@ export default {
 
 <style lang="scss" scoped>
 .pickDetail {
+  padding-top: 32px;
+  box-sizing: border-box;
+  .container {
+    padding: 32px;
+    box-sizing: border-box;
+    background: #FFF;
+    .title {
+      font-size: 34px;
+      font-weight: 600;
+      color: #333333;
+    }
+    .avatar {
+      font-size: 26px;
+      font-weight: 400;
+      color: #999999;
+      margin-top: 16px;
+    }
+    .content {
+      margin-top: 32px;
+      font-size: 28px;
+      font-weight: 400;
+      color: #333333;
+      background: #FFF;
+    }
+    .imgs {
+      display: flex;
+      flex-wrap: wrap;
+      padding: 20px 32px;
+      box-sizing: border-box;
+      background: #FFF;
 
+      image,
+      video {
+        width: 226px;
+        height: 226px;
+        margin: 0 4px 4px 0;
+      }
+      image:nth-child(3n + 0),
+      video:nth-child(3n + 0) {
+        margin: 0;
+      }
+    }
+  }
 }
 </style>