猫舍管理 内容推荐

src/views/ohplay/recommend/index.vue

@@ -23,7 +23,8 @@
         </el-select>
       </el-form-item>
       <el-form-item label="更新时间：">
-        <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" clearable />
+        <el-date-picker v-model="date" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间"
+          clearable />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
@@ -32,21 +33,22 @@
     </el-form>
     <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading">
-      <el-table-column label="内容" prop="content" align="center" />
+      <el-table-column label="内容" prop="content" align="center" show-overflow-tooltip />
       <el-table-column label="图片" align="center" width="100px">
-        <template v-if="scope.row.images" slot-scope="scope">
-          <el-image v-for="item in scope.row.images.split(',')" :key="item" :src="item" />
+        <template slot-scope="scope">
+          <div class="image-box" v-if="scope.row.images">
+            <el-image class="image" v-for="item in scope.row.images.split(',').slice(0, 6)" :key="item"
+              :src="item" />
+          </div>
         </template>
       </el-table-column>
       <el-table-column label="回复/点赞" prop="replyOrLike" align="center" />
       <el-table-column label="内容位置" prop="recommendLocation" align="center" :formatter="locationFormatter" />
       <el-table-column label="权重" prop="recommendWeight" align="center" />
       <el-table-column label="当前状态" prop="recommendStatus" align="center" :formatter="statusFormatter" />
-      <el-table-column label="有效期" align="center">
+      <el-table-column label="有效期" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
-          <div>{{ scope.row.startRecommendTime }}</div>
-          <div>至</div>
-          <div>{{ scope.row.endRecommendTime }}</div>
+          <div>{{ scope.row.startRecommendTime }} 至 {{ scope.row.endRecommendTime }}</div>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
@@ -72,13 +74,19 @@
             <div>{{ dialogList.creatTime }}</div>
           </el-col>
           <el-col :span="5">
-            <el-button v-if="dialogList.isDelete === '0'" type="delete" @click="getChange(dialogList, 1)">隐藏
+            <el-button v-if="dialogList.isDelete === '0'" type="delete" @click="getChange(dialogList, 1)">
+              隐藏
             </el-button>
             <el-button v-else type="text" @click="getChange(dialogList, 0)">显示</el-button>
           </el-col>
         </el-row>
         <div class="item_content">
-          <div>{{ dialogList.content }}</div>
+          <!-- 内容 -->
+          <div style="padding: 20px 0;">{{ dialogList.content }}</div>
+          <!-- 图片 -->
+          <div class="image-box" v-if="dialogList.images">
+            <el-image class="image" v-for="item in dialogList.images.split(',')" :key="item" :src="item" />
+          </div>
           <div style="margin-top: 10px">点赞：{{ dialogList.likeNum }}</div>
         </div>
         <!-- 评论 -->
@@ -230,12 +238,12 @@ export default {
     },
 
     // 搜索
-    getSearch(){
+    getSearch() {
       this.form.pageNum = 1
       this.getList()
     },
 
-    getRefresh(){
+    getRefresh() {
       this.form = {
         pageNum: 1,
         pageSize: 10
@@ -302,4 +310,15 @@ export default {
     }
   }
 }
+
+.image-box {
+  display: flex;
+  flex-wrap: wrap;
+  width: 150px;
+
+  .image {
+    width: 50px;
+    height: 50px;
+  }
+}
 </style>