|
@@ -0,0 +1,112 @@
|
|
|
|
|
+<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" />
|
|
|
|
|
+ <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">详情</el-button>
|
|
|
|
|
+ <el-button type="delete">结束推荐</el-button>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ <!-- 弹窗 -->
|
|
|
|
|
+ <el-dialog :visible.sync="dialogVisible" title="详情" width="500px">
|
|
|
|
|
+ <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>
|
|
|
|
|
+ </el-dialog>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ tableData: [{
|
|
|
|
|
+ id: 1
|
|
|
|
|
+ }],
|
|
|
|
|
+ // 弹窗
|
|
|
|
|
+ dialogVisible: false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</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;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+::v-deep .el-dialog__body {
|
|
|
|
|
+ height: 700px;
|
|
|
|
|
+ overflow-y: auto;
|
|
|
|
|
+ overflow-x: hidden;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.dialog_item:last-child {
|
|
|
|
|
+ border: none;
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
