|
|
@@ -0,0 +1,140 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <el-form inline label-width="100px" size="mini">
|
|
|
+ <el-form-item label="内容：">
|
|
|
+ <el-input placeholder="请输入内容" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容类型：">
|
|
|
+ <el-select placeholder="请选择内容类型">
|
|
|
+ <el-option />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="内容分类：">
|
|
|
+ <el-select placeholder="请选择内容分类">
|
|
|
+ <el-option />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="当前状态：">
|
|
|
+ <el-select placeholder="请选择当前状态">
|
|
|
+ <el-option />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="更新时间：">
|
|
|
+ <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <el-table :data="tableData">
|
|
|
+ <el-table-column label="内容" align="center" />
|
|
|
+ <el-table-column label="图片" align="center" />
|
|
|
+ <el-table-column label="回复/点赞" align="center" />
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template>
|
|
|
+ <el-button type="text" @click="dialogVisible = true, title = '推荐'">推荐</el-button>
|
|
|
+ <el-button type="text" @click="dialogVisible = true, title = '详情'">详情</el-button>
|
|
|
+ <el-button type="delete">隐藏</el-button>
|
|
|
+ <el-button type="text">显示</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <el-dialog :visible.sync="dialogVisible" :title="title" width="550px">
|
|
|
+ <div v-if="title === '推荐'">
|
|
|
+ <el-form label-width="100px">
|
|
|
+ <el-form-item label="推荐位置：">
|
|
|
+ <el-select placeholder="请选择推荐位置">
|
|
|
+ <el-option />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="推荐权重：">
|
|
|
+ <el-select placeholder="请选择推荐权重">
|
|
|
+ <el-option />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="权重唯一：">
|
|
|
+ <el-select placeholder="权重是否唯一">
|
|
|
+ <el-option />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="推荐日期：">
|
|
|
+ <el-date-picker type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div v-else class="item_box">
|
|
|
+ <div class="dialog_item" v-for="item in 15" :key="item">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="3">
|
|
|
+ <el-avatar />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="16">
|
|
|
+ <div>xxxx</div>
|
|
|
+ <div>2022-03-08 14:08:22</div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="5">
|
|
|
+ <el-button type="delete">隐藏</el-button>
|
|
|
+ <el-button type="text">显示</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <div class="item_content">
|
|
|
+ <div>
|
|
|
+ qwertyuioopasdfghjklzxcvbnm
|
|
|
+ </div>
|
|
|
+ <div style="margin-top: 10px">点赞：10</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="title === '推荐'" slot="footer">
|
|
|
+ <el-button>取消</el-button>
|
|
|
+ <el-button type="primary">确定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tableData: [{
|
|
|
+ id: 1
|
|
|
+ }],
|
|
|
+ // 弹窗
|
|
|
+ dialogVisible: false,
|
|
|
+ title: ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.dialog_item {
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ padding: 10px 0;
|
|
|
+
|
|
|
+ .el-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_content {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.item_box {
|
|
|
+ height: 700px;
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog_item:last-child {
|
|
|
+ border: none;
|
|
|
+}
|
|
|
+</style>
|
