|
|
@@ -1,147 +1,288 @@
|
|
|
<template>
|
|
|
<div class="container yanxuan-special_container">
|
|
|
- <div class="author-content">
|
|
|
- <div class="top">
|
|
|
- <div>专栏作者</div>
|
|
|
- <el-button type="primary" @click="addAuthorDlgVisible = true">新建作者</el-button>
|
|
|
- </div>
|
|
|
- <div class="author-ul">
|
|
|
- <div class="author-li" v-for="item in authorInfoData" :key="item.Id">
|
|
|
- <div class="avatar">
|
|
|
- <img :src="item.HeadImg" alt="" />
|
|
|
- </div>
|
|
|
- <div class="info-content">
|
|
|
- <p class="info-name">{{ item.SpecialName }}</p>
|
|
|
- <p>昵称：{{ item.NickName }}</p>
|
|
|
- <p>{{ item.RealName }}-{{ item.Mobile }}</p>
|
|
|
- <p>{{ item.CompanyName }}</p>
|
|
|
- </div>
|
|
|
- <div class="switch-box">
|
|
|
- <el-switch style="display: block" @change="switchAuthorChange(item)" v-model="item.Status" :active-value="1" :inactive-value="2" active-color="#13ce66" inactive-color="#ff4949">
|
|
|
- </el-switch>
|
|
|
- </div>
|
|
|
+ <el-card style="margin-bottom: 20px">
|
|
|
+ <span @click="tlableClickHandler(item)" :class="['top-table-item', item.value == topLableActive && 'top-table-item-active']" v-for="item in topLableList" :key="item.value">{{ item.name }}</span>
|
|
|
+ </el-card>
|
|
|
+ <el-card>
|
|
|
+ <template v-if="topLableActive == 1">
|
|
|
+ <div class="report-stuts-content">
|
|
|
+ <span
|
|
|
+ @click="reportStatusClickHandler(item)"
|
|
|
+ :class="['top-table-item', 'report-stuts-list', item.value == reportStatusActive && 'top-table-item-active']"
|
|
|
+ v-for="item in reportStutsList"
|
|
|
+ :key="item.value"
|
|
|
+ >{{ item.name }}</span
|
|
|
+ >
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="examine-content">
|
|
|
- <p>待审核内容</p>
|
|
|
- <template v-if="specialListData.length > 0">
|
|
|
- <div class="content-box-examine" v-for="item in specialListData" :key="item.Id">
|
|
|
- <div class="info-box" style="margin-bottom: 20px">
|
|
|
- <div class="avatar">
|
|
|
- <img :src="item.HeadImg" alt="" />
|
|
|
- </div>
|
|
|
- <div class="info-content">
|
|
|
- <p class="info-name">{{ item.NickName || item.RealName }}</p>
|
|
|
- <p>{{ item.PublishTime }}</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content-detial" v-html="item.Content"></div>
|
|
|
- <div class="look-all-txt" v-if="item.ContentHasImg || item.isShowBtn" @click="lookAllDetails(item)">查看全文</div>
|
|
|
- <div class="file-box" v-for="(key, indexs) in item.Docs" :key="indexs" @click="handleOperation(key)">
|
|
|
- <img :src="key.DocIcon" alt="" />
|
|
|
- {{ key.DocName }}.{{ key.DocSuffix }}
|
|
|
- </div>
|
|
|
- <div class="img-box">
|
|
|
- <template v-if="item.ImgUrl">
|
|
|
- <!-- <el-image style="width: 112px; height: 112px" fit="fill" v-for="(key, index) in item.ImgUrl.split(',')" :key="index" :src="key" :preview-src-list="item.ImgUrl.split(',')"> </el-image> -->
|
|
|
- <img style="width: 112px; height: 112px" v-for="(key, index) in item.ImgUrl.split(',')" :key="index" :src="key" @click="showPreviewHandles(key)" />
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <template v-if="item.Tags">
|
|
|
- <div class="lable-li" v-for="(key, index) in item.Tags.split(',')" :key="index">{{ key }}</div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div class="bottom-button">
|
|
|
- <div @click="submitRejectDlgHandler(item)">驳回</div>
|
|
|
- <div @click="openMessage(item)">通过</div>
|
|
|
- </div>
|
|
|
+ <div style="margin-bottom: 20px" v-if="reportStatusActive == 2">
|
|
|
+ <el-select placeholder="请选择文章类型" clearable v-model="reportStatus" @change="conditionChange">
|
|
|
+ <el-option
|
|
|
+ v-for="item in [
|
|
|
+ { label: '笔记', value: 1 },
|
|
|
+ { label: '观点', value: 0 },
|
|
|
+ ]"
|
|
|
+ :label="item.label"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <date-picker style="margin: 0 20px; width: 240px" v-model="issueTime" type="date" range placeholder="发布时间" value-type="format" @change="conditionChange"> </date-picker>
|
|
|
+ <el-input @input="reportTitleHandle" v-model="reportTitle" placeholder="请输入文章标题" clearable style="display: inline-block; width: 240px">
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <div class="no-data" v-else>
|
|
|
- <div style="text-align: center">
|
|
|
- <img src="~@/assets/img/data_m/table_no.png" alt="" style="display: block; width: 135px; height: 112px; margin: 0 auto" />
|
|
|
- <span>暂无数据</span>
|
|
|
+ <div v-else style="margin-bottom: 20px; display: flex; justify-content: space-between">
|
|
|
+ <div>
|
|
|
+ <el-select placeholder="作者状态" clearable v-model="authorStatus" @change="conditionChange">
|
|
|
+ <el-option
|
|
|
+ v-for="item in [
|
|
|
+ { label: '启用', value: 1 },
|
|
|
+ { label: '禁用', value: 2 },
|
|
|
+ ]"
|
|
|
+ :label="item.label"
|
|
|
+ :key="item.value"
|
|
|
+ :value="item.value"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ <el-input @value="authorColumnValueHandler" v-model="authorColumnValue" placeholder="请输入专栏名称" clearable style="display: inline-block; width: 240px">
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="addAuthorDlgVisible = true">新建作者</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-table :data="tableData" border @sort-change="sortChangeHandle">
|
|
|
+ <template v-if="topLableActive == 1">
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in reportTableColums"
|
|
|
+ :width="item.widthsty"
|
|
|
+ :key="item.key"
|
|
|
+ :prop="item.key"
|
|
|
+ :label="item.label"
|
|
|
+ align="center"
|
|
|
+ :sortable="item.label == 'PV/UV' ? true : false"
|
|
|
+ >
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span v-if="item.label != 'PV/UV'" @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
|
|
|
+ <div class="pv-uv-download" v-else>
|
|
|
+ <span>{{ row.Pv }} / {{ row.Uv }}</span>
|
|
|
+ <a :href="exportPvUv(row)" download>
|
|
|
+ <img src="~@/assets/img/rai_m/pvuv_download.png" alt="" />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center" v-if="reportStatusActive != 2">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span class="editsty" v-if="reportStatusActive == 3" @click="reasonRejection(row)">驳回理由</span>
|
|
|
+ <span class="editsty" v-if="reportStatusActive == 1" @click="toExamineHandler(row)">审核</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-table-column v-for="item in authorTableColums" :width="item.widthsty" :key="item.key" :prop="item.key" :label="item.label" align="center" :sortable="isShowSortable(item)">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <span v-if="item.label != '总PV/UV'" @click="handleRowClick(row, item.key)" :style="handleRowStyle(item.key)">{{ handleRowContent(row, item.key) }}</span>
|
|
|
+ <span v-else>{{ row.Pv }} / {{ row.Uv }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="状态" align="center" width="200">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-switch
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949"
|
|
|
+ @change="switchChangeHandler(row)"
|
|
|
+ v-model="row.Status"
|
|
|
+ :active-value="1"
|
|
|
+ :inactive-value="2"
|
|
|
+ active-text="已启用"
|
|
|
+ inactive-text="已禁用"
|
|
|
+ ></el-switch>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </template>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <el-col :span="24" class="toolbar">
|
|
|
+ <m-page :total="total" :page_no="page_no" :pageSize="10" @handleCurrentChange="handleCurrentChange" />
|
|
|
+ </el-col>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </el-card>
|
|
|
+ <collect-fans-dlg :iscollectFansDlgShow.sync="iscollectFansDlgShow" :collectFansDlgText.sync="collectFansDlgText" :collectFansDlgItem.sync="collectFansDlgItem" />
|
|
|
<special-dlg :addAuthorDlgVisible.sync="addAuthorDlgVisible" :submitRejectDlgVisible.sync="submitRejectDlgVisible" :submitRejectId="submitRejectId" />
|
|
|
- <el-image-viewer v-if="showPreview" :urlList="previewImages" :on-close="closeViewer" :zIndex="99999"></el-image-viewer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import ElImageViewer from "element-ui/packages/image/src/image-viewer";
|
|
|
-import SpecialDlg from "./components/specialDlg.vue";
|
|
|
+import { TopLableList, ReportStutsList, TableColums, AuthorTableColums } from "./components/yanXuanLable";
|
|
|
import { raiInterface } from "@/api/api.js";
|
|
|
-import { async } from "@antv/x6/lib/registry/marker/async";
|
|
|
+import mPage from "@/components/mPage.vue";
|
|
|
+import CollectFansDlg from "./components/collectFansDlg.vue";
|
|
|
+import SpecialDlg from "./components/specialDlg.vue";
|
|
|
+
|
|
|
export default {
|
|
|
name: "",
|
|
|
- components: { SpecialDlg, ElImageViewer },
|
|
|
+ components: { mPage, CollectFansDlg, SpecialDlg },
|
|
|
props: {},
|
|
|
data() {
|
|
|
return {
|
|
|
+ page_no: 1,
|
|
|
+ total: 0, //条数
|
|
|
+ PageSize: 10, //每页显示几条
|
|
|
+ topLableActive: 1,
|
|
|
+ reportStatusActive: 1,
|
|
|
+ tableData: [],
|
|
|
+ reportStatus: "", //文章类型
|
|
|
+ authorStatus: "", // 作者状态
|
|
|
+ reportTitle: "", //文章标题
|
|
|
+ issueTime: [], // 文章发布时间
|
|
|
+ authorColumnValue: "", // 专栏名称
|
|
|
+ iscollectFansDlgShow: false,
|
|
|
+ collectFansDlgText: "",
|
|
|
+ collectFansDlgItem: {},
|
|
|
addAuthorDlgVisible: false,
|
|
|
- submitRejectDlgVisible: false, // 驳回的显示
|
|
|
- submitRejectId: 0, // 驳回的ID
|
|
|
- authorInfoData: [], // 作者信息列表
|
|
|
- specialListData: [], // 审核列表
|
|
|
- showPreview: false, //
|
|
|
- previewImages: [],
|
|
|
};
|
|
|
},
|
|
|
- watch: {},
|
|
|
- created() {},
|
|
|
+ computed: {
|
|
|
+ // 头部lable
|
|
|
+ topLableList() {
|
|
|
+ return TopLableList;
|
|
|
+ },
|
|
|
+ // 文章的状态
|
|
|
+ reportStutsList() {
|
|
|
+ return ReportStutsList;
|
|
|
+ },
|
|
|
+ reportTableColums() {
|
|
|
+ return TableColums(this.reportStatusActive);
|
|
|
+ },
|
|
|
+ authorTableColums() {
|
|
|
+ return AuthorTableColums;
|
|
|
+ },
|
|
|
+ },
|
|
|
mounted() {
|
|
|
- this.getAuthorList();
|
|
|
- this.getSpecialList();
|
|
|
- this.$nextTick(() => {});
|
|
|
- // let rowNum = Math.round($(".content-detial").height() / parseFloat($(".content-detial").css("line-height")));
|
|
|
+ this.getyanxuanReportSpecial();
|
|
|
},
|
|
|
methods: {
|
|
|
- showPreviewHandles(item) {
|
|
|
- console.log(123);
|
|
|
- this.showPreview = true;
|
|
|
- this.previewImages = [item];
|
|
|
+ // 点击了头部的tlble
|
|
|
+ tlableClickHandler(item) {
|
|
|
+ this.topLableActive = item.value;
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getyanxuanReportSpecial();
|
|
|
},
|
|
|
- closeViewer() {
|
|
|
- this.showPreview = false;
|
|
|
- document.querySelector("body").classList.remove("el-popup-imageView--hidden");
|
|
|
+ // 文章的状态点击
|
|
|
+ reportStatusClickHandler(item) {
|
|
|
+ this.reportStatusActive = item.value;
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getyanxuanReportSpecial();
|
|
|
},
|
|
|
- // 审核通过的确认按钮
|
|
|
- openMessage(item) {
|
|
|
- this.$confirm("确定通过此内容在小程序展示吗？", "审核通过", {
|
|
|
- confirmButtonText: "确定",
|
|
|
- cancelButtonText: "取消",
|
|
|
- type: "warning",
|
|
|
- })
|
|
|
- .then(async () => {
|
|
|
- const res = await raiInterface.yanxuan_specialEnable({
|
|
|
- Id: item.Id,
|
|
|
- Status: 1,
|
|
|
- });
|
|
|
- if (res.Ret === 200) {
|
|
|
- this.$message.success("审核成功!");
|
|
|
- this.getSpecialList();
|
|
|
- }
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.$message({
|
|
|
- type: "info",
|
|
|
- message: "已取消",
|
|
|
- });
|
|
|
- });
|
|
|
+ /* 表格行的样式 */
|
|
|
+ handleRowStyle(key) {
|
|
|
+ if (key == "Title" && this.reportStatusActive == 2) {
|
|
|
+ return "color: #409eff; cursor: pointer";
|
|
|
+ } else if (key == "SpecialName" && (this.reportStatusActive == 2 || this.reportStatusActive == 3)) {
|
|
|
+ return "color: #409eff; cursor: pointer";
|
|
|
+ } else if (key == "ArticleCollectNum" && this.topLableActive == 1) {
|
|
|
+ return "color: #409eff; cursor: pointer";
|
|
|
+ } else {
|
|
|
+ const style = {
|
|
|
+ FansNum: "color: #409eff; cursor: pointer",
|
|
|
+ };
|
|
|
+ return style[key] ? style[key] : "";
|
|
|
+ }
|
|
|
},
|
|
|
- // 获取作者列表
|
|
|
- async getAuthorList() {
|
|
|
- const res = await raiInterface.yanxuan_specialAuthorList();
|
|
|
+ /* 表格行的点击事件 */
|
|
|
+ handleRowClick(row, key) {
|
|
|
+ if (key === "Title" && this.reportStatusActive == 2) {
|
|
|
+ let href = `${process.env.CYGX_WEB}/column/detail/${row.Id}`;
|
|
|
+ window.open(href, "_blank");
|
|
|
+ } else if (key === "SpecialName" && (this.reportStatusActive == 2 || this.reportStatusActive == 3)) {
|
|
|
+ let href = `${process.env.CYGX_WEB}/column/view/${row.SpecialAuthorId}`;
|
|
|
+ window.open(href, "_blank");
|
|
|
+ } else if (key === "ArticleCollectNum" || key === "FansNum") {
|
|
|
+ // 收藏的数量
|
|
|
+ this.iscollectFansDlgShow = true;
|
|
|
+ this.collectFansDlgText = key === "ArticleCollectNum" ? "收藏详情" : "粉丝详情";
|
|
|
+ this.collectFansDlgItem = row;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 表格行的数据处理 */
|
|
|
+ handleRowContent(row, key) {
|
|
|
+ if (key == "Type") {
|
|
|
+ return row[key] == 1 ? "笔记" : "观点";
|
|
|
+ } else if (key == "Source") {
|
|
|
+ return row[key] == 1 ? "纪要" : row[key] == 2 ? "图表" : row[key] == 3 ? "纪要/图表" : row[key] == 4 ? "产业资源包" : row[key] == 5 ? "报告" : "活动";
|
|
|
+ } else if (key == "ActivityType") {
|
|
|
+ return row[key] == 1 ? "线上" : `线下(${row["City"]})`;
|
|
|
+ } else if (key == "RegisterPlatform") {
|
|
|
+ return row[key] == 1 ? "小程序" : row[key] == 2 ? "网页版" : row[key] == 3 ? "策略平台" : "";
|
|
|
+ } else {
|
|
|
+ return row[key];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 是否显示
|
|
|
+ isShowSortable(item) {
|
|
|
+ return item.label == "总PV/UV" || item.label == "开通时间" || item.label == "已发布文章";
|
|
|
+ },
|
|
|
+ // 排序事件
|
|
|
+ sortChangeHandle(params) {
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getyanxuanReportSpecial(params.prop, params.order);
|
|
|
+ },
|
|
|
+ // 选择的change事件
|
|
|
+ conditionChange() {
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getyanxuanReportSpecial();
|
|
|
+ },
|
|
|
+ // 获取数据
|
|
|
+ async getyanxuanReportSpecial(SortType, SortParam) {
|
|
|
+ let params = {
|
|
|
+ CurrentIndex: this.page_no,
|
|
|
+ PageSize: this.PageSize,
|
|
|
+ Status: this.topLableActive == 1 ? this.reportStatusActive : this.authorStatus,
|
|
|
+ KeyWord: this.topLableActive == 1 ? this.reportTitle : this.authorColumnValue,
|
|
|
+ Type: this.reportStatus,
|
|
|
+ StartDate: this.issueTime[0],
|
|
|
+ EndDate: this.issueTime[1],
|
|
|
+ SortType,
|
|
|
+ SortParam,
|
|
|
+ };
|
|
|
+ const res =
|
|
|
+ this.topLableActive == 1 && (this.reportStatusActive == 1 || this.reportStatusActive == 2)
|
|
|
+ ? await raiInterface.yanxuanReportSpecial(params)
|
|
|
+ : this.topLableActive == 1 && this.reportStatusActive == 3
|
|
|
+ ? await raiInterface.yanxuanApprovalLogList(params)
|
|
|
+ : this.topLableActive == 2
|
|
|
+ ? await raiInterface.getYanxuanSpecialAuthor(params)
|
|
|
+ : "";
|
|
|
if (res.Ret === 200) {
|
|
|
- this.authorInfoData = res.Data || [];
|
|
|
+ this.tableData = res.Data.List || [];
|
|
|
+ this.total = res.Data.Paging.Totals;
|
|
|
}
|
|
|
},
|
|
|
- // 作者的关闭或者打开
|
|
|
- async switchAuthorChange(item) {
|
|
|
+ // 审核
|
|
|
+ toExamineHandler(item) {
|
|
|
+ let href = `${process.env.CYGX_WEB}/column/check/${item.Id}`;
|
|
|
+ window.open(href, "_blank");
|
|
|
+ },
|
|
|
+ exportPvUv() {},
|
|
|
+ // 分页
|
|
|
+ handleCurrentChange(page) {
|
|
|
+ this.page_no = page;
|
|
|
+ this.getyanxuanReportSpecial();
|
|
|
+ },
|
|
|
+ // 驳回理由
|
|
|
+ reasonRejection(item) {
|
|
|
+ this.$alert(item.Reason, "驳回理由", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ customClass: "yanxuan-special-msg-box",
|
|
|
+ callback: (action) => {},
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 作者的禁用启用
|
|
|
+ async switchChangeHandler(item) {
|
|
|
const res = await raiInterface.yanxuan_specialAuthorEnable({
|
|
|
UserId: item.UserId,
|
|
|
Status: item.Status,
|
|
|
@@ -150,207 +291,104 @@ export default {
|
|
|
this.$message.success("操作成功!");
|
|
|
}
|
|
|
},
|
|
|
- // 审核列表
|
|
|
- async getSpecialList() {
|
|
|
- const res = await raiInterface.yanxuan_specialList();
|
|
|
- if (res.Ret === 200) {
|
|
|
- this.specialListData = res.Data || [];
|
|
|
-
|
|
|
- this.$nextTick(() => {
|
|
|
- this.specialListData.forEach((item, index) => {
|
|
|
- let h = document.getElementsByClassName("content-detial")[index].clientHeight;
|
|
|
- this.$set(item, "isShowBtn", h >= 134 ? true : false);
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- // 驳回的弹框显示
|
|
|
- submitRejectDlgHandler(item) {
|
|
|
- this.submitRejectId = item.Id;
|
|
|
- this.submitRejectDlgVisible = true;
|
|
|
+ authorColumnValueHandler() {
|
|
|
+ this.reportStatus = ""; //文章类型
|
|
|
+ this.authorStatus = ""; // 作者状态
|
|
|
+ this.reportTitle = ""; //文章标题
|
|
|
+ this.issueTime = []; // 文章发布时间
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getyanxuanReportSpecial();
|
|
|
},
|
|
|
- handleOperation: _.debounce(function (item) {
|
|
|
- const url = item.DocUrl;
|
|
|
- if (!url) {
|
|
|
- this.$message.warning("文件错误");
|
|
|
- return;
|
|
|
- }
|
|
|
- const reg = /\.(pdf)$/;
|
|
|
- // pdf
|
|
|
- if (reg.test(url)) {
|
|
|
- window.open(url, "_blank");
|
|
|
- } else {
|
|
|
- window.open("https://view.officeapps.live.com/op/view.aspx?src=" + url, "_blank");
|
|
|
- }
|
|
|
- }, 200),
|
|
|
- lookAllDetails(item) {
|
|
|
- let url =
|
|
|
- process.env.NODE_ENV === "production"
|
|
|
- ? `https://web.hzinsights.com/column/detail/${item.Id}`
|
|
|
- : process.env.NODE_ENV === `test`
|
|
|
- ? `https://clpttest.hzinsights.com/column/detail/${item.Id}`
|
|
|
- : `https://clpttest.hzinsights.com/column/detail/${item.Id}`;
|
|
|
- window.open(url, "_blank");
|
|
|
+ reportTitleHandle() {
|
|
|
+ this.reportStatus = ""; //文章类型
|
|
|
+ this.authorStatus = ""; // 作者状态
|
|
|
+ this.issueTime = []; // 文章发布时间
|
|
|
+ this.authorColumnValue = "";
|
|
|
+ this.page_no = 1;
|
|
|
+ this.getyanxuanReportSpecial();
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang="scss">
|
|
|
-div {
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
+<style scoped lang="scss">
|
|
|
.yanxuan-special_container {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .author-content {
|
|
|
- width: 400px;
|
|
|
- height: calc(100vh - 118px);
|
|
|
+ .top-table-item {
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 30px;
|
|
|
+ text-align: center;
|
|
|
+ width: 120px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
border-radius: 4px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 20px;
|
|
|
- box-sizing: border-box;
|
|
|
- flex-shrink: 0;
|
|
|
- .top {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- }
|
|
|
- .author-ul {
|
|
|
- padding-bottom: 10px;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- overflow-y: auto;
|
|
|
- .author-li {
|
|
|
- flex: 1;
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- border-bottom: 1px solid #dcdfe6;
|
|
|
- margin: 10px 0;
|
|
|
- .switch-box {
|
|
|
- width: 30px;
|
|
|
- flex-shrink: 0;
|
|
|
- }
|
|
|
+ color: #409eff;
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ border: 1px solid #b3d8ff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .report-stuts-content {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ span:nth-child(2) {
|
|
|
+ position: relative;
|
|
|
+ margin: 0 60px 0 30px;
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: -30px;
|
|
|
+ top: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 2px;
|
|
|
+ height: 20px;
|
|
|
+ background: #000;
|
|
|
+ }
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ right: -30px;
|
|
|
+ top: 10px;
|
|
|
+ display: inline-block;
|
|
|
+ width: 2px;
|
|
|
+ height: 20px;
|
|
|
+ background: #000;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .info-content {
|
|
|
- flex: 1;
|
|
|
- padding-left: 16px;
|
|
|
- color: #999999;
|
|
|
- p {
|
|
|
- margin: 5px 0;
|
|
|
- }
|
|
|
+ .report-stuts-list {
|
|
|
+ color: #000;
|
|
|
+ background-color: rgba(255, 255, 255, 0.5);
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .top-table-item-active {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #409eff;
|
|
|
+ border: none;
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
- .avatar {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- border-radius: 50%;
|
|
|
- overflow: hidden;
|
|
|
- background: #d9d9d9;
|
|
|
- flex-shrink: 0;
|
|
|
+ .pv-uv-download {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
img {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-left: 10px;
|
|
|
}
|
|
|
}
|
|
|
- .info-name {
|
|
|
- font-size: 16px;
|
|
|
- color: #333;
|
|
|
- font-weight: 500;
|
|
|
- }
|
|
|
- .examine-content {
|
|
|
- margin-left: 20px;
|
|
|
- padding: 20px;
|
|
|
- flex: 1;
|
|
|
- background: #fff;
|
|
|
- flex-direction: 0;
|
|
|
- overflow: hidden;
|
|
|
- .no-data {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .content-box-examine {
|
|
|
- padding: 30px 0;
|
|
|
- border-bottom: 1px solid #dcdfe6;
|
|
|
- }
|
|
|
- .info-box {
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- .content-detial {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 8;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- max-height: 300px;
|
|
|
- }
|
|
|
- }
|
|
|
- .look-all-txt {
|
|
|
- color: #409eff;
|
|
|
- font-size: 16px;
|
|
|
- margin-top: 20px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .file-box {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-top: 20px;
|
|
|
- height: 64px;
|
|
|
- cursor: pointer;
|
|
|
- img {
|
|
|
- width: 27px;
|
|
|
- height: 27px;
|
|
|
- margin-right: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
- .img-box {
|
|
|
- margin: 20px 0;
|
|
|
- height: 112px;
|
|
|
- img {
|
|
|
- object-fit: fill !important;
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- .lable-li {
|
|
|
- display: inline-block;
|
|
|
- padding: 4px 20px;
|
|
|
- height: 28px;
|
|
|
- border-radius: 48px;
|
|
|
- margin: 0 15px 15px 0;
|
|
|
- border: 1px solid #409eff;
|
|
|
- background-color: #eaf3fe;
|
|
|
- color: #409eff;
|
|
|
- }
|
|
|
- .bottom-button {
|
|
|
- margin: 50px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- color: #fff;
|
|
|
- div {
|
|
|
- cursor: pointer;
|
|
|
- width: 120px;
|
|
|
- height: 40px;
|
|
|
- padding: 10px 46px 10px 46px;
|
|
|
- border-radius: 4px;
|
|
|
- background: #c54322;
|
|
|
- }
|
|
|
- div:nth-child(2) {
|
|
|
- margin-left: 20px;
|
|
|
- background: #67c23a;
|
|
|
- }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.yanxuan-special-msg-box {
|
|
|
+ border: none;
|
|
|
+ .el-message-box__header {
|
|
|
+ background: #3385ff;
|
|
|
+ .el-message-box__title,
|
|
|
+ .el-message-box__close {
|
|
|
+ color: #fff !important;
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-/deep/.el-image {
|
|
|
- img {
|
|
|
- object-fit: fill !important;
|
|
|
+ .el-message-box__btns {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
bding