1

src/views/adminCenter/topic/edit.vue

@@ -31,8 +31,8 @@
                 />
               </template>
             </van-field>
-            <van-field v-model="form.website" name="website" label="网址" placeholder="请输入网址" />
             <van-field v-model="form.origin" name="origin" label="信息来源" placeholder="请输入信息来源" />
+            <van-field v-model="form.website" name="website" label="网址" placeholder="请输入网址" />
             <van-field v-model="form.content" rows="2" autosize label="文章内容" type="textarea" maxlength="200" placeholder="请输入本文内容" show-word-limit />
           </van-form>
         </el-col>

src/views/adminCenter/topic/item.vue

@@ -1,28 +1,32 @@
 <template>
   <div id="item">
     <el-row class="item">
-      <el-col :span="24" style="padding-bottom: 50px;" @click.native="toEdit">{{ data.content }}</el-col>
-      <el-col :span="24" v-if="data.type === '0'">
-        <el-col :span="8" v-for="(i, index) in data.imgUrl" :key="`img${index}`">
-          <template v-if="index < length - 1">
-            <van-image :src="i.url" :width="imgpx" :height="imghpx" fit="scale-down" @click="toPreview(index)"></van-image>
-          </template>
-          <template v-if="index == length - 1 && data.imgUrl.length <= length">
-            <van-image :src="i.url" :width="imgpx" :height="imghpx" fit="scale-down" @click="toPreview(index)"></van-image>
-          </template>
-          <template v-if="index == length - 1 && data.imgUrl.length > length">
-            <van-image src="" :width="imgpx" :height="imghpx" fit="scale-down">
-              <template #error>
-                <el-row>
-                  <el-col :span="24" style="font-size:32px"> <van-icon name="plus" size="28" /> {{ data.imgUrl.length - length + 1 }} </el-col>
-                </el-row>
-              </template>
-            </van-image>
-          </template>
-        </el-col>
+      <el-col :span="24" class="content" @click.native="toEdit">
+        {{ data.content }}
       </el-col>
-      <el-col :span="24" v-if="data.type === '1'" style="text-align:center">
-        <video :src="data.fileUrl[0].url" :width="videopx" :height="videohpx" controls></video>
+      <el-col :span="24" class="other">
+        <span>来源:{{ data.origin || '系统管理员' }}</span>
+        <span>更新时间:{{ data.renew_time || data.create_time || '暂无时间' }}</span>
+      </el-col>
+      <el-col :span="24" class="image" v-if="data.type === '0'">
+        <img :src="tag.url" v-for="(tag, index) in data.imgUrl" :key="index" :style="{ width: data.imgUrl.length == 1 ? '100%' : '47.5%' }" />
+      </el-col>
+      <el-col :span="24" class="video" v-else-if="data.type === '1'">
+        <video
+          controls="controls"
+          preload="meta"
+          x-webkit-airplay="true"
+          webkit-playsinline="true"
+          playsinline="true"
+          x5-video-player-type="h5"
+          x5-video-player-fullscreen="true"
+          controlsList="nodownload"
+          :src="data.fileUrl[0].url"
+          loop="loop"
+        >
+          <source src="movie.ogg" type="video/ogg" />
+          <source src="movie.mp4" type="video/mp4" />
+        </video>
       </el-col>
     </el-row>
   </div>
@@ -45,33 +49,12 @@ export default {
     toEdit() {
       this.$router.push({ path: '/adminCommunity/edit', query: { id: this.data._id } });
     },
-    toPreview(index) {
-      let arr = [];
-      if (this.data.type === '0') arr = this.data.imgUrl.map(i => i.url);
-      ImagePreview({
-        images: arr,
-        startPosition: index,
-      });
-    },
   },
   computed: {
     ...mapState(['user', 'menuParams']),
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
-    imgpx() {
-      return 120;
-    },
-    imghpx() {
-      return this.imgpx * 0.8;
-    },
-    videopx() {
-      console.log(document.body.clientHeight);
-      return document.body.clientWidth * 0.8;
-    },
-    videohpx() {
-      return document.body.clientHeight * (2 / 10);
-    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };
@@ -81,22 +64,42 @@ export default {
 
 <style lang="less" scoped>
 .item {
-  border-bottom: 1px solid #ccc;
-  padding: 8px 0;
-  .el-col:first-child {
-    &:extend(.dl2);
+  border-bottom: 1px solid #f1f1f1;
+  padding: 10px;
+  .title {
+    font-size: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    word-break: break-all;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+  }
+  .other {
+    color: #666;
+    font-size: 13px;
+    margin: 0 0 10px 0;
+    span:nth-child(2) {
+      padding: 0 0 0 10px;
+    }
+  }
+  .image {
+    img {
+      margin: 0 10px 0 0;
+      border-radius: 5px;
+      border: 1px solid #f1f1f1;
+      height: 150px;
+    }
+    img:nth-child(2n) {
+      margin: 0 0 0 0;
+    }
+  }
+  .video {
+    video {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #f1f1f1;
+    }
   }
-}
-.dl2 {
-  font-size: 16px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  word-break: break-all;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-/deep/.van-image__img {
-  border: 1px solid #f1f1f1;
 }
 </style>