<template>
    <div id="news_info_dfzy">
        <div class="news_info_content" v-if="getNews">
            <div class="news_info_top-nav">
                <img class="back" :src="back" @click="goBack" />
                <div class="top-left-left">
                    <div class="zzsx" :style="{'display':getNews.summary==null||getNews.summary==undefined?'none':''}">
                        <span><span style="font-size: 14px;">中心思想：</span><br>{{getNews.summary}}</span>
                    </div>
                </div>
                <div class="top-left">
                    <div class="zyx1">
                        <div>
                            <span>{{txtFlag?'译':'原'}}</span>
                        </div>
                    </div>
                    <div class="top-left-title" v-text="getNews.title" :title="getNews.title"></div>
                    <div class="top-left-from">
                        <span>来源：</span><span v-text="getNews.site_name"></span>&emsp;&emsp;&emsp;
                        <span>发布时间：</span><span v-text="$route.params.key3=='新闻'?getNews.pubdate:getNews.pubTime"></span>
                    </div>
                    <div class="top-left-img" v-show="getNews.website_img!=null&&getNews.website_img.length>0">
                        <el-image v-for="(item,index) in getNews.website_img" :src="NewsPictureUrl+item" :key="index"></el-image>
                    </div>
                    <div class="top-left-content" ref="copy1" v-html="getNews.txt"></div>
                </div>
                <div class="top-left-left">
                    <div style="width:100%;height:200px" id="rmcy">
                        
                    </div>
                    <div class="xgtj-div">
                        <div>相关推荐</div>
                        <ul>
                            <li v-for="(item,index) in xgtj_news_data" v-show="item.id!=getNews.id" :title="item.title_zh==null?item.title:item.title_zh" @click="showInfo(item)"><span>{{index+1+'：'}}</span>{{item.title_zh==null?item.title:item.title_zh}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="bottom-nav">
                <div class="bottom-title">
                    <div class="title-one1" v-if="getNews.tag&&getNews.tag!=''&&getNews.tag.length>0">
                        <el-tag :style="{backgroundColor:returnColor(item),borderColor:returnColor(item)}" effect="dark" v-for="(item,index) in getNews.tag" v-text="item" :key="index" v-if="item"></el-tag>
                    </div>
                    <div class="title-one1" v-else="getNews.tag&&getNews.tag!=''&&getNews.tag.length>0">
                    </div>
                    <div class="title-three">
                        <a class="translation" @click="translation"><i class="el-icon-s-order"></i>{{txtFlag?'原文':'译文'}}</a>&emsp;
                        <a class="copy" @click="copy(0)" :data-clipboard-text="getNews.url"><i class="el-icon-connection"></i><span>
                                原文链接</span></a>&emsp;
                        <a class="copy1" @click="copy(1)" :data-clipboard-text="getNews.txt"><i class="el-icon-document-copy"></i><span> 复制</span></a>&emsp;
                        <a @click="exportWord"><i class="el-icon-download"></i><span> 下载</span></a>&emsp;&emsp;&emsp;&emsp;&emsp;
                    </div>
                </div>
            </div>
        </div>
        <div v-show="visible" :style="{position:'absolute',backgroundColor:'white',left:left+'px',top:top+'px'}" class="contextmenu">
            <!-- <ul>
                <li v-for="(item,index) in collectionFolder" @click.stop="addFolder(item,index)" :style="{'background':(index==selectIndex)?'#f56c6c':''}">
                    <span class="el-icon-folder-opened"></span>&emsp;{{item.name}}
                    <el-button class="delete" type="text" size="mini" @click.stop.native="delectCollectionFolder(item.id)">
                        <i class="el-icon-error"></i>
                    </el-button>
                </li>
            </ul>
            <div>
                <el-button type="" size="mini" @click.stop="addCollectionDefine">确定</el-button>
                <el-button type="danger" size="mini" @click.stop="dialogVisible=true">新增收藏夹</el-button>
            </div> -->
            <ul>
                <li @click="relatedPerson">关联人物</li>
                <li @click="relatedOrganization">关联机构</li>
                <li @click="addCollection">收藏</li>
            </ul>
        </div>
        <!-- <el-dialog title="新增收藏夹" :visible.sync="dialogVisible" width="20%" :before-close="handleClose" center>
            <span class="dialog-content">
                <el-input v-model="input" placeholder="请输入收藏夹名称" @click.stop.native="stopstop"></el-input>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click.stop="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="danger" @click.stop="addCollectionFolder()">确 定</el-button>
            </span>
        </el-dialog> -->
        <el-dialog title="关联人物" :visible.sync="dialogVisiblePerson" width="30%" :before-close="handleClose">
            <el-form ref="form" label-width="120px">
                <el-form-item label="摘要">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请输入内容" v-model="selectText" disabled style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="搜索人物">
                    <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" style="width:70%;"></el-autocomplete>
                </el-form-item>
                <el-form-item label="选择类型">
                    <el-select v-model="personType" style="width:70%;">
                        <!-- <el-option value="相关人物">相关人物</el-option> -->
                        <el-option value="相关舆情">相关舆情</el-option>
                        <el-option value="相关活动">相关活动</el-option>
                        <el-option value="相关专著">相关专著</el-option>
                        <el-option value="相关言论">相关言论</el-option>
                        <el-option value="关键影响人物">关键影响人物</el-option>
                        <el-option value="评价言论">评价言论</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisiblePerson = false">取 消</el-button>
                <el-button type="primary" @click="defineRelatedPerson">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="关联机构" :visible.sync="dialogVisibleOrganization" width="30%" :before-close="handleClose">
            <el-form ref="form" label-width="120px">
                <el-form-item label="摘要">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 10}" placeholder="请输入内容" v-model="selectText" disabled style="width:70%;"></el-input>
                </el-form-item>
                <el-form-item label="搜索机构">
                    <el-autocomplete v-model="state" :fetch-suggestions="querySearchAsyncOrganization" placeholder="请输入内容" @select="handleSelect" style="width:70%;"></el-autocomplete>
                </el-form-item>
                <el-form-item label="选择类型">
                    <el-select v-model="organizationType" style="width:70%;">
                        <!-- <el-option value="相关人物">相关人物</el-option> -->
                        <el-option value="所属基地">所属基地</el-option>
                        <el-option value="所属部队">所属部队</el-option>
                        <el-option value="所属装备">所属装备</el-option>
                        <el-option value="相关舆情">相关舆情</el-option>
                        <el-option value="历史文献">历史文献</el-option>
                        <el-option value="证据资料">证据资料</el-option>
                        <el-option value="关键影响人物">关键影响人物</el-option>
                        <el-option value="评价言论">评价言论</el-option>
                        <el-option value="机构分析报告">机构分析报告</el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleOrganization = false">取 消</el-button>
                <el-button type="primary" @click="defineRelatedOrganization">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="添加收藏" :visible.sync="dialogVisibleCollection" width="20%" :before-close="handleClose">
            <ul>
                <li v-for="(item,index) in collectionFolder" @click.stop="addFolder(item,index)" :style="{'background':(index==selectIndex)?'#f56c6c':''}">
                    <span class="el-icon-folder-opened"></span>&emsp;{{item.name}}
                    <el-button class="delete" type="text" size="mini" @click.stop.native="delectCollectionFolder(item.id)">
                        <i class="el-icon-error"></i>
                    </el-button>
                </li>
            </ul>
            <el-dialog width="30%" title="新增收藏夹" :visible.sync="innerVisible" append-to-body>
                <el-form ref="form" label-width="120px">
                    <el-form-item label="名称">
                        <el-input v-model="collectionName" placeholder="请输入收藏夹名称" style="width:70%;"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button size="mini" @click.stop="innerVisible = false">取 消</el-button>
                    <el-button size="mini" type="danger" @click.stop="addCollectionFolder()">确 定</el-button>
                </span>
            </el-dialog>
            <span slot="footer" class="dialog-footer">
                <el-button type="" size="mini" @click.stop="defineAddCollection">确定</el-button>
                <el-button type="danger" size="mini" @click.stop="innerVisible=true,collectionName=''">新增收藏夹</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import back from "../../assets/img/setting/back.png";
import { get, post, getReplaceColor, delete_util, fileDownload,startLoading,endLoading } from "../../util/http_util";
import Clipboard from "clipboard";
import { queryDictType, queryDictItem } from '../../api/dictitem';
import {} from "../../util/data_util";
import * as echarts from "echarts";
import {option_hot_word  } from "../../constant/echart-options";
import { NewsPictureUrl } from "../../api/publicUrl";
export default {
    name: "",
    data() {
        return {
            NewsPictureUrl: NewsPictureUrl,
            visible: false,
            top: 300,
            left: 300,
            back: back,
            getNews: {},
            collectionFolder: [],
            dialogVisible: false,
            input: '',
            selectText: '',
            collectionData: {},
            selectIndex: -1,
            tmpTxt: '',
            tmpTitle: '',
            txtFlag: true,
            inputVisible: false,
            dialogVisiblePerson: false,
            dialogVisibleOrganization: false,
            personValue: '',
            organizationValue: '',
            personType: '',
            organizationType: '',
            timeout: null,
            state: '',
            selectText: '',
            pickItem: {},
            dialogVisibleCollection: false,
            innerVisible: false,
            collectionName: '',
            colorList: ['#409eff', '#F56C6C', '#67C23A', '#E6A23C', '#909399', '#303133'],
            myChart1:'',
            xgtj_news_data:[],
        };
    },
    methods: {
        echarts_1(data) {
            let _this = this;
            if (_this.myChart1 == null ||_this.myChart1 == "" ||_this.myChart1 == undefined) {
                _this.myChart1 = echarts.init(document.getElementById("rmcy"));
                _this.myChart1.setOption(option_hot_word);
                window.addEventListener("resize", function () {
                    _this.myChart1.resize();
                });
            }
            let datas = [];
            if (data.length > 0) {
                data.forEach((item) => {
                    if(item.word != '' && item.word.length > 1){
                        datas.push(item);
                    }
                });
                let data_all = datas.slice(0,40);
                datas = [];
                data_all.forEach((item) => {
                    datas.push({ name: item.word, value: item.count });
                });
            }
            let options = {
                series: [
                {
                    data: datas,
                },
                ],
            };
            setTimeout(()=>{
                _this.myChart1.setOption(options);
            },300)
        },
        showInfo(item) {
            startLoading();
            this.$route.params.key = item.id;
            this.query();
            endLoading();
        },
        xgtj_news(id){
            this.xgtj_news_data = [];
            post("api/rest/elastic/queryRecommendNews?id="+id)
            .then(res => {
                if(res.length>0){
                    this.xgtj_news_data = res;
                    if(res.length>10){
                        this.xgtj_news_data = res.slice(0,10);
                    }
                }
            })
            .catch((err)=>{
                 this.$message.warning(err.message); 
            });
        },
        goBack() {
            this.$router.back();
        },
        // 点击导出word
        exportWord: function () {
            //后台下载
            fileDownload("api/rest/elastic/"+(this.$route.params.key3=='新闻'?'exportNews':'exportThinkTank')+"?id=" + this.getNews.id, this.tmpTitle ? this.tmpTitle : '未知', 'doc');
        },
        copy(val) {
            let clipboard = "";
            if (val == 0) {
                clipboard = new Clipboard(".copy");
            } else {
                clipboard = new Clipboard(".copy1");
            }
            clipboard.on("success", (e) => {
                this.$message.success("复制成功");
                // 释放内存
                clipboard.destroy();
            });
            clipboard.on("error", (e) => {
                // 不支持复制
                console.log("该浏览器不支持自动复制");
                // 释放内存
                clipboard.destroy();
            });
        },
        //翻译
        translation() {
            if (this.txtFlag) {
                this.getNews.title = this.tmpTitle;
                this.getNews.txt = this.tmpTxt;
                this.txtFlag = false;
            } else {
                this.getNews.title = this.getNews.title_zh;
                this.getNews.txt = this.getNews.txt_zh;
                this.txtFlag = true;
            }
        },
        openMenu(e) {
            this.selectText = '';
            this.selectIndex = -1;
            const menuMinWidth = 300
            const offsetLeft = this.$el.getBoundingClientRect().left - 150; // container margin left
            const offsetWidth = this.$el.offsetWidth - 200; // container width
            const maxLeft = offsetWidth - menuMinWidth; // left boundary
            const left = e.clientX - offsetLeft; // 15: margin right

            if (left > maxLeft) {
                this.left = maxLeft;
            } else {
                this.left = left;
            }

            this.top = e.clientY - 0; // fix 位置bug
            this.selectText = window.getSelection().toString();
            if(this.selectText!=''){
                this.visible = true;
            }
            // this.selectText = window.getSelection().anchorNode.data;
        },
        closeMenu() {
            this.visible = false;
        },
        //关联人物
        relatedPerson() {
            this.state = '';
            this.dialogVisiblePerson = true;
        },
        //关联机构
        relatedOrganization() {
            this.state = '';
            this.dialogVisibleOrganization = true;
        },
        querySearchAsync(queryString, cb) {
            let personList = [];
            post(
                `api/rest/mongo/character/query?pageNum=1&pageSize=100`,
                {
                    module:'DF',
                    name:queryString,
                }
            ).then(res => {
                res.records.forEach(item => {
                    let personObj = {};
                    personObj['value'] = item.xm.value;
                    personObj['address'] = item.rwbh.value;
                    personList.push(personObj);
                })
                // var results = queryString ? personList.filter(this.createStateFilter(queryString)) : personList;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(personList);
                }, 3000 * Math.random());
            })
            .catch((err)=>{
                 this.$message.warning(err.message); 
            });

            post(
                `api/rest/mongo/character/query?pageNum=1&pageSize=100`,
                {
                    module:'DFWW',
                    name:queryString,
                }
            ).then(res => {
                res.records.forEach(item => {
                    let personObj = {};
                    personObj['value'] = item.xm.value;
                    personObj['address'] = item.rwbh.value;
                    personList.push(personObj);
                })
                // var results = queryString ? personList.filter(this.createStateFilter(queryString)) : personList;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(personList);
                }, 3000 * Math.random());
            })
            .catch((err)=>{
                this.$message.warning(err.message); 
            });
        },
        querySearchAsyncOrganization(queryString, cb) {
            let organizationList = [];
            post(
                `api/rest/mongo/organization/queryOrganization?pageNum=1&pageSize=100`,
                {
                    module: "DFWW",
                    name:queryString,
                }
            ).then(res => {
                res.records.forEach(item => {
                    let organizationObj = {};
                    organizationObj['value'] = item.jgfh.value;
                    organizationObj['address'] = item.jgbh.value;
                    organizationList.push(organizationObj);
                })
                // var results = queryString ? organizationList.filter(this.createStateFilter(queryString)) : organizationList;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(organizationList);
                }, 3000 * Math.random());
            })
            .catch((err)=>{
                this.$message.warning(err.message);
            });
            post(
                `api/rest/mongo/organization/queryOrganization?pageNum=1&pageSize=100`,
                {
                    module: "DF",
                    name:queryString,
                }
            ).then(res => {
                res.records.forEach(item => {
                    let organizationObj = {};
                    organizationObj['value'] = item.jgfh.value;
                    organizationObj['address'] = item.jgbh.value;
                    organizationList.push(organizationObj);
                })
                // var results = queryString ? organizationList.filter(this.createStateFilter(queryString)) : organizationList;
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(organizationList);
                }, 3000 * Math.random());
            })
            .catch((err)=>{
                this.$message.warning(err.message);
            });
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        handleSelect(item) {
            this.pickItem = item;
        },
        //确定关联人物
        defineRelatedPerson() {
            let obj = {};
            obj['object'] = this.selectText.trim();
            obj['objectFrom'] = this.getNews.id;
            obj['subject'] = this.pickItem.address;
            obj['relation'] = this.personType;
            obj['objectType'] = '新闻';
            post(`api/rest/3z/resource/addRelatedInfo`, obj).then(res => {
                if (res == 1) {
                    this.$message.success('关联人员成功！');
                    this.dialogVisiblePerson = false;
                } else {
                    this.$message.error('关联人员失败！');
                }
            }).catch(err => {
                this.$message.warning(err.message);
            });

        },
        //确定关联机构
        defineRelatedOrganization() {
            let obj = {};
            obj['object'] = this.selectText.trim();
            obj['objectFrom'] = this.getNews.id;
            obj['subject'] = this.pickItem.address;
            obj['relation'] = this.organizationType;
            obj['objectType'] = '新闻';
            post(`api/rest/3z/resource/addRelatedInfo`, obj).then(res => {
                if (res == 1) {
                    this.$message.success('关联机构成功！');
                    this.dialogVisibleOrganization = false;
                } else {
                    this.$message.error('关联机构失败！');
                }
            }).catch(err => {
                this.$message.warning(err.message);
            });
        },
        handleClose(done) {
            done();
        },
        //收藏
        //查询收藏目录
        searchCollectionFolder() {
            get('api/rest/3z/resource/queryCollectionFolder?collector=' + this.userInfo.account).then(res => {
                this.collectionFolder = res;
            })
        },
        //选择收藏夹
        addFolder(item, index) {
            this.selectIndex = index;
            if (this.selectText != '') {
                this.collectionData.description = this.selectText;
                this.collectionData.folderId = item.id;
                this.collectionData.originId = this.getNews.id;
                this.collectionData.title = this.getNews.title;
                this.collectionData.collector = this.userInfo.account;
            } else {
                this.$message.warning('未选择文字！');
            }
        },
        //选择收藏夹完成上传
        defineAddCollection() {
            if (this.collectionData.folderId != undefined) {
                post('api/rest/resource/addCollection', this.collectionData).then(res => {
                    if (res == 1) {
                        this.$message.success('收藏成功!');
                        this.dialogVisibleCollection = false;
                    }
                });
            } else {
                this.$message.warning('未选择收藏夹！');
                this.dialogVisibleCollection = true;
            }

        },
        addCollection() {
            this.dialogVisibleCollection = true;
        },
        //新增收藏夹名称
        addCollectionFolder() {
            if (this.collectionName != '' && this.collectionName != null) {
                post('api/rest/resource/addCollectionFolder', { name: this.collectionName, collector: this.userInfo.account }).then(res => {
                    if (res == 1) {
                        this.$message.success('新增成功！');
                        this.searchCollectionFolder();
                        this.innerVisible = false;
                    }
                })
            } else {
                this.$message.warning('新增目录不能为空！');
                this.innerVisible = true;
            }
        },
        //删除收藏夹目录
        delectCollectionFolder(id) {
            delete_util('api/rest/resource/removeCollectionFolder?folderId=' + id).then(res => {
                if (res == 1) {
                    this.$message.success("删除成功！");
                    this.searchCollectionFolder();
                }
            });
        },
        //返回颜色
        returnColor(val) {
            if (val == "国际国内热点" || val == "美盟涉华舆情" || val == "台海潮声" || val == "中日交锋" || val == "半岛风云" || val == "南海观澜" || val == "国际大势") {
                return this.colorList[0];
            } else if (val == "25" || val == "26" || val == "27") {
                return this.colorList[1];
            } else if (val == "28" || val == "29" || val == "30") {
                return this.colorList[2];
            } else {
                return this.colorList[3];
            }
        },
        query(){
            this.getNews = {};
            this.myChart1 == null;
            this.echarts_1([]);
            if (this.$route.params.key != null) {
                get("api/rest/elastic/"+this.$route.params.key2+"?id=" + this.$route.params.key)
                    .then((res) => {
                        if(res==null){
                            this.$message.warning('关联的新闻已删除');
                            return
                        }
                        this.getNews = res;
                        if(this.$route.params.key3=='新闻'){
                            // this.getNews.txt_zh&&(this.getNews.txt_zh = this.getNews.txt_zh.replaceAll("<br>","\n").replaceAll("<BR>","\n"));
                            // this.getNews.txt && (this.getNews.txt = this.getNews.txt.replaceAll("<br>","\n").replaceAll("<BR>","\n"));
                            this.tmpTxt = this.getNews.txt;
                            this.tmpTitle = this.getNews.title;
                            this.getNews.txt = this.getNews.txt_zh;
                            this.getNews.title = this.getNews.title_zh;
                            if(this.getNews.hot_word1!=undefined&&this.getNews.hot_word1!=null&&this.getNews.hot_word1.length>0)this.echarts_1(this.getNews.hot_word1);
                        }else if(this.$route.params.key3=='智库'){
                            // this.getNews.txt_zh&&(this.getNews.txt_zh = this.getNews.txt_zh.replaceAll("<br>","\n").replaceAll("<BR>","\n"));
                            // this.getNews.text&&(this.getNews.text = this.getNews.text.replaceAll("<br>","\n").replaceAll("<BR>","\n"));
                            this.tmpTxt = this.getNews.text;
                            this.getNews.txt = this.getNews.text;
                            this.tmpTitle = this.getNews.title;
                            this.getNews.site_name = this.getNews.siteNames.length>0?this.getNews.siteNames[0]:'';
                        }
                        this.getNews.txt = this.getNews.txt.replace(this.$route.params.key1.trim(), "<span style='color:#f38e47'>" + this.$route.params.key1.trim() + "</span>");
                        queryDictItem('01').then(item => {
                            item.forEach(ele => {
                                if (ele.code == res.language_type) {
                                    this.getNews.language_type = ele.name;
                                }

                            });
                        });
                        queryDictItem('02').then(item => {
                            item.forEach(ele => {
                                if (ele.code == res.media_type) {
                                    this.getNews.media_type = ele.name;
                                }
                            });
                        });
                        queryDictItem('03').then(item => {
                            item.forEach(ele => {
                                if (ele.code == res.region_id) {
                                    this.getNews.region_id = ele.name;
                                }

                            });
                        });
                        queryDictItem('04').then(item => {
                            item.forEach(ele => {
                                if (ele.code == res.industry_id) {
                                    this.getNews.industry_id = ele.name;
                                }
                            });
                        });
                    })
                    .catch((err) => {
                        this.$message.warning(err.message);
                        this.getNews = {};
                    });
            }
            this.xgtj_news(this.$route.params.key);
            this.searchCollectionFolder();

        }
    },
    activated() {
        this.query();
    },
    computed: {
        userInfo() {
            if (this.$store.getters.userInfo) {
                return this.$store.getters.userInfo;
            } else {
                return { username: "" };
            }
        }
    },
    watch: {
        visible(value) {
            if (value) {
                document.body.addEventListener('click', this.closeMenu)
            } else {
                document.body.removeEventListener('click', this.closeMenu)
            }
        }
    }
};
</script>

<style lang="scss" >
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#news_info_dfzy {
    width: 99%;
    height: 97%;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    .news_info_content {
        width: 100%;
        height: 100%;
        float: left;
        .news_info_top-nav {
            width: 100%;
            height: calc(100% - 40px);
            padding: 10px;
            box-sizing: border-box;
            .back {
                width: 40px;
                height: 40px;
                position: absolute;
                top: 11%;
                right: 80px;
                cursor: pointer;
            }
            .top-left-left{
                width: 15%;
                float: left;
                height: 100%;
                font-size: 12px;
                .zzsx{
                    width: 80%;
                    margin-left: 10%;
                    height: 100%;
                    line-height: 24px;
                    display: flex;
                    align-items: center;
                    color: #aeaeae;
                }
                .xgtj-div{
                    width:100%;
                    height:300px;
                    div{
                        font-weight: 900;
                        margin-left: 11px;
                    }
                    ul{
                        padding: 0;
                        margin: 10px 7px 0px 26px;
                        li{
                            list-style: none;
                            font-size: 12px;
                            color: #cdf9ff;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            line-height: 28px;
                            cursor: pointer;
                        }
                        li:hover{
                            color: #00f9ff;
                            text-decoration: underline;
                        }
                    }
                }
            }
            .top-left {
                width: 70%;
                height: 100%;
                padding: 20px;
                margin: auto;
                box-sizing: border-box;
                overflow-y: auto;
                background: #263b5d29;
                float: left;
                position: relative;
                .zyx1{
                    position: absolute;
                    width: calc(100% - 5px);
                    height: calc(100% - 20px);
                    pointer-events: none;
                    div{
                        width: 100%;
                        height: 100%;
                        position: relative;
                        overflow: hidden;
                        span{
                            position: absolute;
                            top: -4px;
                            left: -30px;
                            display: block;
                            font-size: 15px;
                            color: #ffffff;
                            font-weight: 900;
                            background: #36A8FF;
                            width: 86px;
                            line-height: 30px;
                            text-align: center;
                            transform: rotate(-45deg);
                            letter-spacing: 3px;
                        }
                    }
                }
                &::-webkit-scrollbar {
                    display: none;
                }
                .top-left-title {
                    width: 100%;
                    line-height: 1.5;
                    font-size: 40px;
                    font-weight: 700;
                    text-align: center;
                    color: #6cabef;
                    cursor: pointer;
                }
                .top-left-from {
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    color: #b3b3b3;
                    text-align: center;
                    margin-top: 10px;
                    margin-bottom: 10px;
                }
                .top-left-img {
                    width: 100%;
                    margin-bottom: 20px;
                    text-align: center;
                    .el-image {
                        width: 60%;
                        height: 60%;
                        margin-top: 20px;
                        cursor: pointer;
                    }
                }
                .top-left-content {
                    width: 100%;
                    height: calc(100% - 300px);
                    line-height: 2.2;
                    letter-spacing: 1px;
                    font-size: 18px;
                    text-indent: 2em;
                    em {
                        color: red;
                    }
                    img {
                        max-width: 700px;
                    }
                }
            }
        }
        .bottom-nav {
            width: 100%;
            height: 40px;
            .bottom-title {
                width: 100%;
                height: 40px;
                line-height: 40px;
                display: -webkit-box;
                background-color: #263b5d;
                .title-one1{
                    width: 66.6%;
                    height: 40px;
                    overflow: hidden;
                    span{
                        margin-left: 10px;
                        margin-top: 5px;
                    }
                }
                .title-three {
                    width: 33.3%;
                    height: 100%;
                }
                .title-three {
                    text-align: right;
                    a {
                        cursor: pointer;
                        i {
                            color: #168c96;
                        }
                    }
                    a:hover {
                        color: aquamarine;
                    }
                }
            }
        }
    }
    .contextmenu {
        width: 200px;
        padding: 5px 0px;
        box-sizing: border-box;
        ul {
            margin: 0;
            padding: 0;
            overflow-y: auto;
            list-style: none;
            li {
                height: 30px;
                line-height: 30px;
                padding-left: 20px;
                position: relative;
                font-size: 14px;
                box-sizing: border-box;
                color: black;
                &:hover {
                    cursor: pointer;
                    background-color: #ddd;
                }
                .delete {
                    position: absolute;
                    right: 10px;
                    i {
                        font-size: 16px;
                        color: #ff5454;
                    }
                }
            }
        }
    }

    .el-dialog {
        color: white;
        background: #1d2d46 !important;
        .el-dialog__body {
            .el-form {
                .el-form-item {
                    .el-form-item__label {
                        color: white;
                    }
                    .el-form-item__content {
                        color: white;
                        .el-upload__tip {
                            color: white;
                        }
                    }
                }
            }
            .el-input__inner {
                color: white !important;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }
            textarea {
                color: white !important;
                background: none !important;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }
            .el-icon-document {
                height: auto;
            }

            .el-tag + .el-tag {
                margin-left: 10px;
            }
            .button-new-tag {
                margin-left: 10px;
                height: 32px;
                line-height: 30px;
                padding-top: 0;
                padding-bottom: 0;
            }
            .input-new-tag {
                width: 90px;
                margin-left: 10px;
                vertical-align: bottom;
            }
            ul {
                height: 150px;
                margin: 0;
                padding: 0;
                overflow-y: auto;
                list-style: none;
                li {
                    height: 30px;
                    line-height: 30px;
                    padding-left: 10px;
                    position: relative;
                    box-sizing: border-box;
                    color: white;
                    &:hover {
                        color: white;
                        background-color: #f56c6c;
                    }
                    .delete {
                        position: absolute;
                        right: 10px;
                        i {
                            font-size: 16px;
                            color: #ff5454;
                        }
                    }
                }
            }
        }
    }
}
</style>