<template>
    <!-- 政务服务 -->
    <div class="eb-container" ref="appRef">
        <!-- 背景框 -->
        <div class="bg">
            <MainTitle class="mainTitle" :title="title"></MainTitle>
            <div class="left-one">
                <div
                    class="title-box-medium"
                    style="justify-content: space-between; align-items: center"
                >
                    <span>基本概况</span>
                    <DatePicker
                        v-model="date"
                        class="menu"
                        type="month"
                        placeholder="请选择日期"
                        style="width: 100px;margin-right: 20px;"
                    >
                    </DatePicker>
                </div>
                <div class="databox">
                    <div
                        class="base-item"
                        v-for="(item, index) in baseList"
                        :key="index"
                    >
                        <img :src="item.img" />
                        <div class="content">
                            <span class="name">{{ item.name }}</span>
                            <div class="num">
                                <CountTo
                                    :startVal="0"
                                    :endVal="item.num"
                                    :duration="2000"
                                />
                                <span v-if="item.name == '满意率'">%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-two">
                <div class="title-box-medium">
                    <span>评价分析</span>
                </div>
                <div class="databox">
                    <div
                        class="data-item"
                        v-for="(item, index) in assessList"
                        :key="index"
                    >
                        <img :src="item.img" />
                        <div class="content">
                            <span class="name">{{ item.name }}</span>
                            <div style="display: flex; align-items: end">
                                <span class="num">
                                    <CountTo
                                        :startVal="0"
                                        :endVal="item.num"
                                        :duration="2000"
                                    />
                                </span>
                                <span class="text">条评价</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left-three">
                <div
                    class="title-box-medium"
                    style="justify-content: space-between; align-items: center"
                >
                    <span>办件结果公开</span>
                    <span
                        @click="resultMore"
                        style="cursor: pointer; font-size: 16px; margin-right: 20px;"
                        >查看更多</span
                    >
                </div>
                <div class="databox">
                    <div class="title">
                        <div class="title-name">办理部门</div>
                        <div class="title-name">申请人</div>
                        <div class="title-name">申请事项</div>
                        <div class="title-name">申请时间</div>
                        <div class="title-name">办理状态</div>
                    </div>
                    <vueSeamlessScroll
                        :data="resultList"
                        :class-option="defaultOption"
                        style="width: 726px; height: 180px; overflow: hidden"
                    >
                        <div class="list">
                            <div
                                class="list-item"
                                v-for="(item, index) in resultList"
                                :key="index"
                            >
                                <div>
                                    <span>{{ item.yJDeptName }}</span>
                                </div>
                                <div>
                                    <span>{{ item.applicantName }}</span>
                                </div>
                                <div>
                                    <span class="color">{{
                                        item.eventName
                                    }}</span>
                                </div>
                                <div>
                                    <span>{{
                                        formatDate(item.createTimestamp)
                                    }}</span>
                                </div>
                                <div>
                                    <span>{{ item.handleStatusName }}</span>
                                </div>
                            </div>
                        </div>
                    </vueSeamlessScroll>
                </div>
            </div>
            <div class="right-one">
                <div class="title-box-large">
                    <span>办事分析</span>
                </div>
                <div class="databox">
                    <div class="left">
                        <div class="title-box">
                            <img
                                :src="
                                    require('@/assets/screenView/title-icon.png')
                                "
                            />
                            <span class="title">区(县)级单位</span>
                        </div>
                        <vueSeamlessScroll
                            :data="bsList"
                            :class-option="defaultOption"
                            style="width: 100%; height: 450px; overflow: hidden"
                        >
                            <div class="list">
                                <div
                                    class="list-item"
                                    v-for="(item, index) in bsList"
                                    :key="index"
                                >
                                    <div class="rank">{{ index + 1 }}</div>
                                    <span class="name">{{
                                        item.dept_name
                                    }}</span>
                                    <div class="content">
                                        <div class="content-item">
                                            <span class="text">办件量:</span>
                                            <span class="num">
                                                <CountTo
                                                    :startVal="0"
                                                    :endVal="
                                                        Number(item.affairNum)
                                                    "
                                                    :duration="2000"
                                                />
                                            </span>
                                        </div>
                                        <div class="content-item">
                                            <span class="text">差评数:</span>
                                            <span class="num">
                                                <CountTo
                                                    :startVal="0"
                                                    :endVal="
                                                        Number(
                                                            item.eval_bad_amount
                                                        )
                                                    "
                                                    :duration="2000"
                                            /></span>
                                        </div>
                                        <div class="content-item">
                                            <span class="text"
                                                >按期整改数:</span
                                            >
                                            <span class="num">
                                                <CountTo
                                                    :startVal="0"
                                                    :endVal="
                                                        Number(item.replyRate)
                                                    "
                                                    :duration="2000"
                                            /></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </vueSeamlessScroll>
                    </div>
                    <div class="right">
                        <div class="title-box">
                            <img
                                :src="
                                    require('@/assets/screenView/title-icon.png')
                                "
                            />
                            <span class="title">镇(乡)、街道</span>
                        </div>
                        <vueSeamlessScroll
                            :data="townBsList"
                            :class-option="defaultOption"
                            style="width: 100%; height: 450px; overflow: hidden"
                        >
                            <div class="list">
                                <div
                                    class="list-item"
                                    v-for="(item, index) in townBsList"
                                    :key="index"
                                >
                                    <div class="rank">{{ index + 1 }}</div>
                                    <span class="name">{{
                                        item.AREA_NAME
                                    }}</span>
                                    <div class="content">
                                        <div class="content-item">
                                            <span class="text">办件量:</span>
                                            <span class="num">
                                                <CountTo
                                                    :startVal="0"
                                                    :endVal="
                                                        Number(item.affairNum)
                                                    "
                                                    :duration="2000"
                                                />
                                            </span>
                                        </div>
                                        <div class="content-item">
                                            <span class="text">差评数:</span>
                                            <span class="num">
                                                <CountTo
                                                    :startVal="0"
                                                    :endVal="
                                                        Number(
                                                            item.eval_bad_amount
                                                        )
                                                    "
                                                    :duration="2000"
                                            /></span>
                                        </div>
                                        <div class="content-item">
                                            <span class="text"
                                                >按期整改数:</span
                                            >
                                            <span class="num">
                                                <CountTo
                                                    :startVal="0"
                                                    :endVal="
                                                        Number(item.replyRate)
                                                    "
                                                    :duration="2000"
                                            /></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </vueSeamlessScroll>
                    </div>
                </div>
            </div>
            <div class="right-bottom-one">
                <div
                    class="title-box-680"
                    style="justify-content: space-between; align-items: center"
                >
                    <span>评价公开</span>
                    <span
                        style="cursor: pointer; font-size: 16px;margin-right: 20px;"
                        @click="showMore"
                        >查看更多</span
                    >
                </div>
                <div class="databox">
                    <vueSeamlessScroll
                        :data="pjList"
                        :class-option="defaultOption"
                        style="width: 628px; height: 240px; overflow: hidden"
                    >
                        <div class="list">
                            <div
                                class="list-item"
                                v-for="(item, index) in pjList"
                                :key="index"
                            >
                                <div class="base">
                                    <div class="left">
                                        <img
                                            :src="
                                                require('@/assets/screenView/dphoto.png')
                                            "
                                        />
                                        <span class="name">{{
                                            item.peopleNameShow
                                        }}</span>
                                    </div>
                                    <div class="right">
                                        <span>{{ item.evalChannelShow }}</span>
                                        <span style="margin-left: 10px">{{
                                            formatTime(item.createTime)
                                        }}</span>
                                    </div>
                                </div>
                                <div class="rate">
                                    <Rate
                                        allow-half
                                        v-model="item.score"
                                    ></Rate>
                                    <span class="text"
                                        >整体服务:{{ item.scoreShow }}</span
                                    >
                                </div>

                                <div
                                    class="tag"
                                    v-show="item.childrens.length > 0"
                                >
                                    <div
                                        class="tag-item11"
                                        v-for="(item1, index) in item.childrens"
                                        :key="index"
                                    >
                                        {{ item1.childrenName }}
                                    </div>
                                </div>

                                <div class="between">
                                    <span>评价范围:{{ item.eventName }}({{item.acceptDeptName}})</span>
                                </div>
                            </div>
                        </div>
                    </vueSeamlessScroll>
                </div>
            </div>
            <div class="right-bottom-two">
                <div class="title-box-308">
                    <span>天府通办</span>
                </div>
                <div class="databox">
                    <img
                        style="width: 216px; height: 216px; border-radius: 10px"
                        :src="require('@/assets/largeScreen/tftb.png')"
                    />
                </div>
            </div>
        </div>

        <commonModal title="评价公开" v-model="showModal" width="800">
            <div class="pj-container">
                <pjList
                    v-if="showModal"
                    :date="getCurrentDate(this.date)"
                ></pjList>
            </div>
        </commonModal>
        <commonModal
            title="办件结果公开"
            v-model="showResultModal"
            width="1000"
        >
            <div class="pj-container">
                <result v-if="showResultModal"></result>
            </div>
        </commonModal>
    </div>
</template>

<script>
import { useIndex } from "../../utils/dynamic";
import MainTitle from "./components/MainTitle.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import commonModal from "@/views/common-components/common-modal.vue";
import pjList from "./components/gov-service/pjList.vue";
import result from "./components/gov-service/result.vue";
import { CountTo } from "vue-count-to";
import { duration } from "moment";

export default {
    name: "govService",
    components: { MainTitle, vueSeamlessScroll, commonModal, pjList, result },
    data() {
        return {
            title: "智慧广电政务服务数据中心",
            curentName: "下拉",
            menuList: [
                {
                    name: "全县",
                },
                {
                    name: "社会保障局",
                },
            ],
            date: this.getCurrentDate(new Date()),
            baseList: [
                {
                    name: "办件数(件)",
                    img: require("@/assets/screenView/base-1.png"),
                    num: "",
                },
                {
                    name: "收到差评数(次)",
                    img: require("@/assets/screenView/base-2.png"),
                    num: "",
                },
                {
                    name: "满意率",
                    img: require("@/assets/screenView/base-3.png"),
                    num: "",
                },
            ],
            assessList: [
                {
                    name: "政务服务网",
                    img: require("@/assets/screenView/icon-1.png"),
                    num: "",
                },
                {
                    name: "天府通办",
                    img: require("@/assets/screenView/icon-1.png"),
                    num: "",
                },
                {
                    name: "办事大厅",
                    img: require("@/assets/screenView/icon-1.png"),
                    num: "",
                },
                {
                    name: "短信",
                    img: require("@/assets/screenView/icon-1.png"),
                    num: "",
                },
                {
                    name: "服务热线",
                    img: require("@/assets/screenView/icon-1.png"),
                    num: "",
                },
                {
                    name: "二维码评价",
                    img: require("@/assets/screenView/icon-1.png"),
                    num: "",
                },
            ],
            resultList: [],
            bsList: [],
            townBsList: [],
            pjList: [],
            defaultOption: {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            },
            showModal: false,
            showResultModal: false,
        };
    },
    watch: {
        date(n, o) {
            this.queryBase();
            this.querypjfx();
            this.queryResult();
            this.queryCounty();
            this.queryTown();
        },
    },
    created() {},
    computed: {},
    beforeDestroy() {},
    mounted() {
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();
        this.queryAssess();
    },
    methods: {
        menuClick(name) {
            this.curentName = name;
        },
        formatTime(time) {
            let date = new Date(Number(time));
            let year = date.getFullYear(); //获取完整的年份(4位)
            let month =
                date.getMonth() + 1 > 9
                    ? date.getMonth() + 1
                    : "0" + (date.getMonth() + 1); //获取当前月份(0-11,0代表1月)
            let strDate =
                date.getDate() > 9 ? date.getDate() : "0" + date.getDate(); // 获取当前日(1-31)
            let hour =
                date.getHours() > 9 ? date.getHours() : "0" + date.getHours(); //获取当前小时(0 ~ 23)
            let minute =
                date.getMinutes() > 9
                    ? date.getMinutes()
                    : "0" + date.getMinutes(); //获取当前分钟(0 ~ 59)
            let second =
                date.getSeconds() > 9
                    ? date.getSeconds()
                    : "0" + date.getSeconds(); //获取当前秒数(0 ~ 59)
            date =
                year +
                "-" +
                month +
                "-" +
                strDate +
                " " +
                hour +
                ":" +
                minute +
                ":" +
                second;
            return date;
        },
        formatDate(time) {
            let date = new Date(time);
            let year = date.getFullYear(); //获取完整的年份(4位)
            let month =
                date.getMonth() + 1 > 9
                    ? date.getMonth() + 1
                    : "0" + (date.getMonth() + 1); //获取当前月份(0-11,0代表1月)
            let strDate =
                date.getDate() > 9 ? date.getDate() : "0" + date.getDate(); // 获取当前日(1-31)
            date = year + "-" + month + "-" + strDate;
            return date;
        },
        getCurrentDate(time) {
            let date = new Date(time);
            date =
                date.getFullYear() +
                "-" +
                (date.getMonth() + 1 > 9
                    ? date.getMonth() + 1
                    : "0" + (date.getMonth() + 1));
            return date;
        },
        // 基本概况
        queryBase() {
            let params = {
                areaCode: "511502000000",
                shardkey: "5115",
                date: this.getCurrentDate(this.date),
            };
            console.log(params);
            this.$http
                .post("/queryEvaluateReview", this.common.request(params))
                .then((res) => {
                    if (res.data.code == 200) {
                        let data = res.data.data.data;
                        this.baseList[0].num = Number(data.bjCount);
                        this.baseList[1].num = Number(data.badCount);
                        if (Number(data.zgRate) < 1) {
                            this.baseList[2].num =
                                Number(data.zgRate).toFixed(2) * 100;
                        } else {
                            this.baseList[2].num = Number(data.zgRate) * 100;
                        }
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    this.$Message.error("查询失败");
                });
        },
        // 评价分析
        querypjfx() {
            let params = {
                areaCode: "511502000000",
                shardKey: "5115",
                dataTime: this.getCurrentDate(this.date),
            };
            console.log(params);
            this.$http
                .post("/getChannel", this.common.request(params))
                .then((res) => {
                    if (res.data.code == 200) {
                        let data = JSON.parse(res.data.data.ifResultInfo);
                        this.assessList[0].num = Number(data.zwNum);
                        this.assessList[1].num = Number(data.tbNum);
                        this.assessList[2].num = Number(data.bsNum);
                        this.assessList[3].num = Number(data.dxNum);
                        this.assessList[4].num = Number(data.rxNum);
                        this.assessList[5].num = Number(data.appNum);
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    this.$Message.error("查询失败");
                });
        },
        // 办件结果公开
        queryAssess() {
            let params = {
                areaCode: "511502000000",
                page: 1,
                pageSize: 10,
                fields: "",
            };
            console.log(params);
            this.$http
                .post("/affairPublicity", this.common.request(params))
                .then((res) => {
                    if (res.data.code == 200) {
                        this.resultList = res.data.data.rows;
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    this.$Message.error("查询失败");
                });
        },
        // 评价
        queryResult() {
            let params = {
                fields: "",
                pageSize: 5,
                page: 1,
                areaCode: "511502000000",
                objCode: "",
                sidx: "create_time",
                sord: "desc",
                shardKey: "5115",
                dataTime: this.getCurrentDate(this.date),
                score: "",
            };
            this.$http
                .post("/getPublishList", this.common.request(params))
                .then((res) => {
                    if (res.data.code == 200) {
                        this.pjList = res.data.data.rows;
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    this.$Message.error("查询失败");
                });
        },
        // 办事分析 区县级
        queryCounty() {
            let params = {
                areaCode: "511502000000",
                sort: "0",
                shardkey: "5115",
                date: this.getCurrentDate(this.date),
            };
            console.log(params);
            this.$http
                .post("/getDeptAnalysis", this.common.request(params))
                .then((res) => {
                    if (res.data.code == 200) {
                        let data = res.data.data.data;
                        this.bsList = data;
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    this.$Message.error("查询失败");
                });
        },
        // 办事分析 区县级
        queryTown() {
            let params = {
                areaCode: "511502000000",
                sort: "0",
                shardkey: "5115",
                date: this.getCurrentDate(this.date),
            };
            console.log(params);
            this.$http
                .post("/getcuntryAnalysis", this.common.request(params))
                .then((res) => {
                    if (res.data.code == 200) {
                        let data = res.data.data.data;
                        this.townBsList = data;
                    } else {
                        this.$Message.error(res.data.msg);
                    }
                })
                .catch((err) => {
                    this.$Message.error("查询失败");
                });
        },

        showMore() {
            this.showModal = true;
        },
        resultMore() {
            this.showResultModal = true;
        },
    },
};
</script>

<style lang="less" scoped>
@import "../../styles/pbStyle.less";

/deep/ .ivu-date-picker {
    height: 40px !important;
}
/deep/ .ivu-input {
    height: 30px !important;
    margin-top: 5px;
    background: url("../../assets/screenView/menuBg.png") no-repeat;
    background-size: 100% 100%;
    border: unset;
    color: #ffffff;
}

/deep/ .ivu-rate-star {
    margin-right: 4px;
}

/deep/ .menu .ivu-picker-panel-body {
    float: right !important;
    background: url("../../assets/screenView/box.png") no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
}

/deep/ .menu .ivu-select-dropdown {
    top: 30px !important;
    right: 0 !important;
    background: unset !important;
}

.eb-container {
    width: 1920px;
    height: 1080px;
    transform: scale(var(--scale)) translate(-50%, -50%);
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url("../../assets/largeScreen/page-bg.png");
    background-size: 100%;

    .bg {
        width: 1920px;
        height: 1056px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.16);
        .mainTitle {
            pointer-events: all;
        }

        .left-one {
            position: fixed;
            width: 778px;
            height: 227px;
            top: 112px;
            left: 57px;
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 99;

            .databox {
                .content-pub-style(761px, 176px);
                padding: 20px;

                display: flex;
                justify-content: center;
                align-items: center;

                .base-item {
                    width: 240px;
                    height: 72px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    img {
                        width: 72px;
                        height: 72px;
                    }

                    .content {
                        width: 160px;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .name {
                            font-family: "PingFang SC";
                            font-size: 20px;
                            text-align: left;
                            color: #f2f6fa;
                        }

                        .num {
                            font-family: "Furore";
                            font-size: 28px;
                            text-align: left;
                            background: linear-gradient(
                                to top,
                                #c1ebff,
                                #ffffff
                            );
                            -webkit-background-clip: text;
                            color: transparent;
                        }
                    }
                }
            }
        }

        .left-two {
            position: fixed;
            width: 778px;
            height: 355px;
            top: 344px;
            left: 57px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .databox {
                .content-pub-style(761px, 304px);
                padding: 20px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                align-items: space-between;

                .data-item {
                    width: 232px;
                    height: 114px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 15px;
                    background: url("../../assets/screenView/item-bg.png")
                        no-repeat;
                    background-size: 100% 100%;

                    img {
                        width: 58px;
                        height: 52px;
                    }

                    .content {
                        width: 130px;
                        height: 70px;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;

                        .name {
                            font-family: "YouSheBiaoTiHei";
                            font-size: 24px;
                            background: linear-gradient(
                                to top,
                                #c1ebff,
                                #ffffff
                            );
                            -webkit-background-clip: text;
                            color: transparent;
                        }

                        .num {
                            font-family: "Furore";
                            font-size: 30px;
                            background: linear-gradient(
                                to top,
                                #c1ebff,
                                #ffffff
                            );
                            -webkit-background-clip: text;
                            color: transparent;
                        }

                        .text {
                            margin: 0 0 5px 5px;
                            font-family: "PingFang SC";
                            font-size: 12px;
                            text-align: left;
                            background: linear-gradient(
                                to top,
                                #c1ebff,
                                #ffffff
                            );
                            -webkit-background-clip: text;
                            color: transparent;
                        }
                    }
                }
            }
        }

        .left-three {
            position: fixed;
            width: 778px;
            height: 320px;
            top: 706px;
            left: 57px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .databox {
                .content-pub-style(761px, 272px);
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 10px 0;

                .title {
                    width: 726px;
                    height: 48px;
                    background: url("../../assets/screenView/w-title-bg.png")
                        no-repeat;
                    background-size: 100% 100%;
                    display: grid;
                    grid-template-columns: 18% 18% 28% 18% 18%;
                    grid-template-rows: 100%;

                    .title-name {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-family: "PingFang SC";
                        font-size: 18px;
                        font-weight: 700;
                        color: #f2f6fa;
                    }
                }

                .list {
                    width: 726px;
                    display: flex;
                    flex-direction: column;

                    .list-item {
                        width: 100%;
                        height: 64px;
                        display: grid;
                        grid-template-columns: 18% 18% 28% 18% 18%;
                        grid-template-rows: 100%;

                        div {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }

                        span {
                            text-align: center;
                            font-size: 16px;
                            color: #ffffff;
                            padding: 0 5px;
                        }

                        .color {
                            color: #46d3ff;
                        }
                    }
                }
            }
        }

        .right-one {
            position: fixed;
            width: 1008px;
            height: 584px;
            top: 112px;
            left: 855px;
            display: flex;
            flex-direction: column;
            align-items: center;

            .databox {
                .content-pub-style(991px, 534px);
                padding: 20px;

                display: flex;
                justify-content: space-between;

                .left {
                    width: 467px;
                    height: 488px;

                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .title-box {
                        display: flex;
                        align-items: center;

                        img {
                            width: 14px;
                            height: 14px;
                        }

                        .title {
                            margin-left: 10px;
                            font-family: "YouSheBiaoTiHei";
                            font-size: 20px;
                            text-align: left;
                            background: linear-gradient(
                                180deg,
                                #ecf4fe 37.5%,
                                #5982b5 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }

                    .list {
                        width: 100%;
                        display: flex;
                        flex-direction: column;

                        .list-item {
                            width: 100%;
                            height: 82px;
                            background: url("../../assets/screenView/bs-bg.png")
                                no-repeat;
                            background-size: 100% 100%;

                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            padding: 10px 0 10px 50px;
                            margin-bottom: 10px;
                            position: relative;

                            .rank {
                                position: absolute;
                                left: 17px;
                                top: 10px;
                                width: 20px;
                                height: 24px;
                                background: url("../../assets/screenView/rank-bg.png")
                                    no-repeat;
                                background-size: 100% 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: "Furore";
                                font-size: 12px;
                                color: #dee9ff;
                            }

                            .name {
                                font-family: "PingFang SC";
                                font-size: 16px;
                                font-weight: 400;
                                line-height: 24px;
                                letter-spacing: 0em;
                                text-align: left;
                                color: #ffffff;
                            }

                            .content {
                                width: 415px;
                                height: 25px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .content-item {
                                    width: 130px;
                                    height: 100%;
                                    display: flex;
                                    align-items: center;

                                    .text {
                                        font-family: "PingFang SC";
                                        font-size: 16px;
                                        font-weight: 400;
                                        line-height: 24px;
                                        letter-spacing: 0em;
                                        text-align: left;
                                        color: #ffffff;
                                    }

                                    .num {
                                        margin-left: 2px;
                                        font-family: "ShiShangZhongHeiJianTi";
                                        font-size: 18px;
                                        font-weight: 400;
                                        line-height: 24px;
                                        letter-spacing: 0em;
                                        text-align: left;
                                        color: #a9e0ff;
                                    }
                                }
                            }
                        }
                    }
                }

                .right {
                    width: 467px;
                    height: 488px;

                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .title-box {
                        display: flex;
                        align-items: center;

                        img {
                            width: 14px;
                            height: 14px;
                        }

                        .title {
                            margin-left: 10px;
                            font-family: "YouSheBiaoTiHei";
                            font-size: 20px;
                            text-align: left;
                            background: linear-gradient(
                                180deg,
                                #ecf4fe 37.5%,
                                #5982b5 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }

                    .list {
                        width: 100%;
                        display: flex;
                        flex-direction: column;

                        .list-item {
                            width: 100%;
                            height: 82px;
                            background: url("../../assets/screenView/bs-bg.png")
                                no-repeat;
                            background-size: 100% 100%;

                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            padding: 10px 0 10px 50px;
                            margin-bottom: 10px;
                            position: relative;

                            .rank {
                                position: absolute;
                                left: 17px;
                                top: 10px;
                                width: 20px;
                                height: 24px;
                                background: url("../../assets/screenView/rank-bg.png")
                                    no-repeat;
                                background-size: 100% 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: "Furore";
                                font-size: 12px;
                                color: #dee9ff;
                            }

                            .name {
                                font-family: "PingFang SC";
                                font-size: 16px;
                                font-weight: 400;
                                line-height: 24px;
                                letter-spacing: 0em;
                                text-align: left;
                                color: #ffffff;
                            }

                            .content {
                                width: 415px;
                                height: 25px;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;

                                .content-item {
                                    width: 130px;
                                    height: 100%;
                                    display: flex;
                                    align-items: center;

                                    .text {
                                        font-family: "PingFang SC";
                                        font-size: 16px;
                                        font-weight: 400;
                                        line-height: 24px;
                                        letter-spacing: 0em;
                                        text-align: left;
                                        color: #ffffff;
                                    }

                                    .num {
                                        margin-left: 2px;
                                        font-family: "ShiShangZhongHeiJianTi";
                                        font-size: 18px;
                                        font-weight: 400;
                                        line-height: 24px;
                                        letter-spacing: 0em;
                                        text-align: left;
                                        color: #a9e0ff;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        .right-bottom-one {
            position: fixed;
            width: 680px;
            height: 320px;
            top: 706px;
            left: 855px;

            display: flex;
            flex-direction: column;
            align-items: center;
            .databox {
                .content-pub-style(663px, 272px);
                display: flex;
                justify-content: center;
                align-items: center;

                .list {
                    width: 628px;
                    display: flex;
                    flex-direction: column;

                    .list-item {
                        width: 100%;
                        height: 114px;
                        background: url("../../assets/screenView/pj-bg.png")
                            no-repeat;
                        background-size: 100% 100%;
                        padding: 10px 0;
                        margin-bottom: 10px;

                        .base {
                            width: 100%;
                            height: 24px;
                            padding: 0 15px;

                            display: flex;
                            justify-content: space-between;

                            .left {
                                height: 100%;
                                display: flex;
                                align-items: center;

                                img {
                                    width: 24px;
                                    height: 24px;
                                }

                                .name {
                                    font-family: "PingFang SC";
                                    font-size: 16px;
                                    font-weight: 700;
                                    color: #f2f6fa;
                                    margin-left: 15px;
                                }
                            }

                            .right {
                                height: 100%;
                                display: flex;
                                align-items: center;
                                font-family: "PingFang SC";
                                font-size: 14px;
                                color: #f2f6fa;
                            }
                        }

                        .rate {
                            width: 100%;
                            height: 20px;
                            padding-left: 54px;
                            display: flex;
                            align-items: center;
                            margin-bottom: 5px;

                            .text {
                                font-family: "PingFang SC";
                                font-size: 14px;
                                font-weight: 400;
                                color: #f2f6fa;
                                margin-left: 10px;
                            }
                        }

                        .tag {
                            width: 100%;
                            height: 26px;
                            padding-left: 54px;
                            display: flex;
                            align-items: center;
                            margin-bottom: 5px;

                            .tag-item11 {
                                width: 144px;
                                height: 100%;
                                background: url("../../assets/screenView/tag-bg.png")
                                    no-repeat;
                                font-family: "PingFang SC";
                                font-size: 10px;
                                color: #46f4ff;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                margin-right: 5px;
                            }
                        }

                        .between {
                            width: 100%;
                            padding-left: 54px;
                            font-family: "PingFang SC";
                            font-size: 12px;
                            color: #f2f6fa;

                            span {
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                word-break: break-all;
                            }
                        }
                    }
                }
            }
        }

        .right-bottom-two {
            position: fixed;
            width: 308px;
            height: 320px;
            top: 706px;
            left: 1555px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .databox {
                .content-pub-style(291px, 272px);
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
}

.pj-container {
    width: 100%;
}
</style>
