<template>
    <!-- 旅游资源中心 -->
    <div class="eb-container" ref="appRef">
        <!-- 背景框 -->
        <div class="bg">
            <MainTitle :title="title"></MainTitle>
            <div class="main">
                <div class="top">
                    <div class="left" @click="leaderState = true">
                        <!-- 基本概况 -->
                        <div class="baseInfo">
                            <div class="title-box-samll">
                                <span>基本概况</span>
                            </div>
                            <div class="databox">
                                <div class="databox-top">
                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/jidinghe.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>馆藏文物</span>
                                            <span>
                                                {{ baseInfo.collectionNum }}
                                                <font
                                                    style="
                                                        font-size: 14px;
                                                        margin-left: 2px;
                                                    "
                                                    >件</font
                                                >
                                            </span>
                                        </div>
                                    </div>
                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/jidinghe.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>年接待游客</span>
                                            <span>
                                                {{ baseInfo.visitorsYear }}
                                                <font
                                                    style="
                                                        font-size: 14px;
                                                        margin-left: 2px;
                                                    "
                                                    >人次</font
                                                >
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="bottom-title">
                                    <img
                                        :src="
                                            require('../../assets/screenView/keliuIcon.png')
                                        "
                                    />
                                    <span class="title">基础信息</span>
                                </div>

                                <div class="base">
                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/renkou.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>开馆时间(年)</span>
                                            <span>
                                                {{ baseInfo.openingYears }}
                                            </span>
                                        </div>
                                    </div>
                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/xiaqu.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>投入资金(万元)</span>
                                            <span>{{
                                                baseInfo.investment
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/renkou.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>占地面积(㎡)</span>
                                            <span>{{
                                                baseInfo.establishmentTime
                                            }}</span>
                                        </div>
                                    </div>

                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/xiaqu.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>建筑面积(㎡)</span>
                                            <span>{{
                                                baseInfo.buildingArea
                                            }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="bottom-title">
                                    <img
                                        :src="
                                            require('../../assets/screenView/keliuIcon.png')
                                        "
                                    />
                                    <span class="title">展品分类</span>
                                </div>
                                <div class="peopleChart">
                                    <div class="dataChart">
                                        <div
                                            class="pieChart"
                                            id="pieChart"
                                        ></div>
                                        <div class="pieContent">
                                            <div
                                                class="contentItem"
                                                v-for="(
                                                    item, index
                                                ) in collectionProportion"
                                                :key="index"
                                            >
                                                <div class="line">
                                                    <div
                                                        class="dataline"
                                                        :style="{
                                                            backgroundColor:
                                                                item.color,
                                                        }"
                                                    ></div>
                                                    <div
                                                        class="defaultline"
                                                    ></div>
                                                </div>
                                                <span class="name">{{
                                                    item.collectionName
                                                }}</span>
                                                <span class="num">{{
                                                    item.count
                                                }}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="zhong" @click="changeVideo($event)">
                        <!-- 视频 -->
                        <div class="videoBox">
                            <LivePlayer
                                ref="livePlayer"
                                :poster="videoInfo.coverImage"
                                :videoUrl="videoUrl"
                                fluent
                                :autoplay="true"
                                :muted="false"
                                alt="正在加载中"
                            >
                            </LivePlayer>
                        </div>
                        <!-- 视频列表 -->
                        <vueSeamlessScroll
                            :data="tabData"
                            :class-option="vidoeListOption"
                            class="scrollBox"
                        >
                            <div class="activityBox">
                                <div
                                    class="activityItem"
                                    v-for="(item, index) in tabData"
                                    :key="index"
                                    :data-obj="JSON.stringify(item)"
                                >
                                    <img :src="item.coverImage" />
                                    <span>{{ item.title }}</span>
                                </div>
                            </div>
                        </vueSeamlessScroll>
                    </div>
                    <div class="right">
                        <!-- 来馆统计 -->
                        <div class="culturalDataInfo">
                            <div class="title-box-samll">
                                <span>来馆统计</span>
                            </div>
                            <div class="databox">
                                <div class="baseInfo">
                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/xiaqu.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>预约访问量(人)</span>
                                            <span>{{
                                                baseInfoT.platformVisits
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/gendi.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>来馆总人次(人)</span>
                                            <span>{{
                                                baseInfoT.totalNumber
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/hushu.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>今日来馆人数(人)</span>
                                            <span>{{
                                                baseInfoT.todayNumber
                                            }}</span>
                                        </div>
                                    </div>
                                    <div class="data-item">
                                        <img
                                            :src="
                                                require('@/assets/screenView/renkou.png')
                                            "
                                        />
                                        <div class="content">
                                            <span>本月来馆人数(人)</span>
                                            <span>{{
                                                baseInfoT.monthNumber
                                            }}</span>
                                        </div>
                                    </div>
                                </div>

                                <div class="bottom-title">
                                    <img
                                        :src="
                                            require('../../assets/screenView/keliuIcon.png')
                                        "
                                    />
                                    <span class="title">活动举办统计</span>
                                </div>

                                <div class="barChart" id="barChart2"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bottom">
                    <div class="left">
                        <!-- 博物馆藏品 -->
                        <div class="collection" @click="openModal($event)">
                            <div class="title-box-large" style="width: 100%">
                                <span>馆藏精品</span>
                            </div>
                            <vueSeamlessScroll
                                :data="collectionList"
                                :class-option="collectionOption"
                                class="scrollBox"
                            >
                                <div class="databox">
                                    <div
                                        class="dataItem"
                                        v-for="(item, index) in collectionList"
                                        :key="index"
                                        :data-index="index"
                                    >
                                        <img :src="item.coverImage" :data-index="index" />
                                        <span :data-index="index" class="name">{{
                                            item.title
                                        }}</span>
                                        <span :data-index="index" class="time">{{
                                            item.tagName
                                        }}</span>
                                    </div>
                                </div>
                            </vueSeamlessScroll>
                        </div>
                    </div>
                    <div class="right">
                        <div class="borrowRead">
                            <div class="title-box-samll">
                                <span>博物馆资讯</span>
                            </div>
                            <div class="databox">
                                <div
                                    style="width: 100%; height: 100%;"
                                    @click="
                                        openInfo($event, queryContentInfoList)
                                    "
                                >
                                    <vue-seamless-scroll
                                        :data="queryContentInfoList"
                                        :class-option="infoOption"
                                        style="
                                            width: 100%;
                                            height: 100%;
                                            overflow: hidden;
                                        "
                                    >
                                        <div class="list">
                                            <div
                                                class="info-item"
                                                style="
                                                    display: flex;
                                                    overflow: hidden;
                                                    gap: 15px;
                                                    margin-bottom: 10px;
                                                "
                                                v-for="(
                                                    item, index
                                                ) in queryContentInfoList"
                                                :key="index"
                                                :data-index="index"
                                            >
                                                <img
                                                    :src="item.coverImage"
                                                    style="
                                                        width: 50%;
                                                        height: 120px;
                                                    "
                                                    :data-index="index"
                                                />
                                                <div
                                                    style="
                                                        width: 50%;
                                                        display: flex;
                                                        flex-direction: column;
                                                        justify-content: space-between;
                                                    "
                                                    :data-index="index"
                                                >
                                                    <div
                                                        style="
                                                            font-size: 16px;
                                                            color: #fff;
                                                        "
                                                        class="title"
                                                        :data-index="index"
                                                    >
                                                        {{ item.title }}
                                                    </div>
                                                    <div
                                                        style="
                                                            margin-top: 10px;
                                                            font-size: 14px;
                                                            color: #c1c1c1;
                                                        "
                                                        :data-index="index"
                                                    >
                                                        {{ item.createTime }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </vue-seamless-scroll>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <common-modal
            v-model="imgTextModal"
            @close="imgTextModal = false"
            :title="info.title"
        >
            <modalDetail
                :current-activity="info"
                :imgTextModal="imgTextModal"
            ></modalDetail>
        </common-modal>
    </div>
</template>

<script>
import { useIndex } from "../../utils/utilsDramAdmin";
import MainTitle from "./components/MainTitle.vue";
import VideoPlay from "../common-components/common-video";
import vueSeamlessScroll from "vue-seamless-scroll";
import * as echarts from "echarts";
import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import commonModal from "@/views/common-components/common-modal.vue";
import modalDetail from "./components/modalDetail.vue";
import LivePlayer from "@liveqing/liveplayer";

export default {
    name: "MuseumBigDataScreen",
    components: {
        MainTitle,
        VideoPlay,
        vueSeamlessScroll,
        modalDetail,
        commonModal,
        Swiper,
        SwiperSlide,
        directive,
        LivePlayer,
    },
    data() {
        return {
            title: "翠屏博物馆大数据中心",
            imgTextModal: false,
            info: {},
            collectionList: [],
            videoUrl: "",
            videoInfo: {},
            leaderState: false, //基本概况弹窗
            collectionState: false,
            vidoeList: [],
            isVideo: true,
            baseInfo: {},
            baseInfoT: {}, //真实数据
            tabData: [],
            tabDataList: [],
            pltChannelId: "",
            deviceId: "",
            areaCode: window.$localStorage.getItem("areaCode"),
            //博物馆重要通知
            museumNotice: {},
            //博物馆馆藏文物占比
            collectionProportion: [],
            noticeState: false,
            currentCollect: {},
            color: ["#205dcc", "#18f2c9", "#ffe381", "#1ce119"],
            swiperOptions: {
                on: {
                    slideChange: function () {
                        self.realIndex = this.realIndex;
                    },
                },
                pagination: {
                    el: ".swiper-pagination",
                },
                centeredSlides: true,
                // 设置点击箭头
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            },
            queryContentInfoList: [],
            infoOption: {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 4, // 开始无缝滚动的数据量 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)
            },
        };
    },
    computed: {
        collectionOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 2, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
        vidoeListOption() {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 2, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },
    mounted() {
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();

        this.queryBaseInfo(); //基础数据
        this.queryCollectionProportion(); // 展品分类
        this.queryCulturePerson(); // 来馆统计
        this.queryActivityCount(); // 活动举办统计

        this.getScreenVideo(); //查询摄像头

        this.getAllAntique(); // 获取博物馆藏品

        this.queryContentInfo(); //查询博物馆资讯
    },
    beforeDestroy() {
        echartsClear();
    },
    methods: {
        openModal(e){
            let index = e.target.dataset.index
            let data = this.collectionList[index]
            this.info = data
            this.imgTextModal = true
        },
        // 打开资讯
        openInfo(e, list) {
            let index = e.target.dataset.index;
            let data = list[index];
            if (data.contentType == "3") {
                this.common.openWindow(data);
            } else {
                this.info = data;
                this.imgTextModal = true;
            }
        },
        // 查询博物馆资讯
        queryContentInfo() {
            this.$http
                .post(
                    "/content/queryContentInfo",
                    this.common.request({
                        areaCode: "",
                        hasParent: "0",
                        page: 1,
                        typeCode: "BWGINFO",
                        pageSize: 10,
                    })
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        this.queryContentInfoList = res.data.data.records;
                    }
                });
        },
        queryCulturePerson() {
            let params = {
                areaCode: "2021030823390056",
                page: 1,
                pageSize: 10,
                type: "museumCount",
            };
            this.$http
                .post(
                    "/screen/getScreenSurveyPage",
                    this.common.request(params)
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        const data = res.data.data.records;
                        if (data) {
                            this.baseInfoT = {
                                platformVisits: data[0].value,
                                totalNumber: data[1].value,
                                todayNumber: data[2].value,
                                monthNumber: data[3].value,
                            };
                        }
                    } else {
                        this.$Message.error("查询基础数据有误");
                    }
                });
        },
        initBarChart2(data) {
            let myChart = echarts.init(document.getElementById("barChart2"));
            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985",
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    axisLabel: {
                        margin: 10,
                        interval: 0,
                        color: "#ffffff",
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                    data: data.xData,
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#35414c",
                        },
                    },
                    axisLabel: {
                        color: "#ffffff",
                        textStyle: {
                            fontSize: 12,
                        },
                    },
                },
                grid: {
                    top: "15%",
                    bottom: "10%",
                    width: "87%",
                    height: "75%",
                },
                series: [
                    {
                        data: data.yData,
                        type: "bar",
                        barWidth: "16px",
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                1,
                                0,
                                0,
                                [
                                    {
                                        offset: 1,
                                        color: "#4D3511",
                                    },
                                    {
                                        offset: 0,
                                        color: "#F2B04E",
                                    },
                                ]
                            ),
                        },
                    },
                ],
            };
            myChart.setOption(option);
            echartsFocus(myChart, data.xData.length);
        },
        initChartPie(data) {
            let myChart = echarts.init(document.getElementById("pieChart"));
            let total = 0;
            data.forEach((item) => {
                total += item.count;
            });
            var chartData = [];
            for (var i = 0; i < data.length; i++) {
                chartData.push({
                    value: data[i].count,
                    name: data[i].collectionName,
                    itemStyle: {
                        normal: {
                            shadowBlur: 20,
                        },
                    },
                });
            }
            var seriesOption = [
                {
                    name: "",
                    type: "pie",
                    clockWise: false,
                    radius: [45, 60],
                    avoidLabelOverlap: false,
                    legendHoverLink: false,
                    hoverOffset: 4,
                    label: {
                        show: true,
                        position: "center",
                        formatter: (item) => {
                            return `{percent|${Math.round(
                                (item.value / total) * 100
                            )}%}\n{sexName|${item.name}}`;
                        },
                        align: "center",
                        color: "#ffffff",
                        verticalAlign: "middle",
                        // 此处重点，字体大小设置为0
                        textStyle: {
                            fontSize: "0",
                        },
                    },
                    emphasis: {
                        label: {
                            show: true,
                            rich: {
                                percent: {
                                    fontSize: 20,
                                    color: "#fff",
                                },
                                sexName: {
                                    fontSize: 10,
                                    color: "#ccc",
                                },
                            },
                        },
                    },
                    data: chartData,
                },
            ];
            let option = {
                color: this.color,
                tooltip: {
                    show: true,
                },
                toolbox: {
                    show: false,
                },
                series: seriesOption,
            };
            myChart.setOption(option);
            echartsFocus(myChart, data.length);
        },
        changeVideo(e) {
            if (e.target.className == "activityItem") {
                const obj = JSON.parse(e.target.dataset.obj);
                this.isVideo = true;
                this.videoUrl = obj.url;
                this.videoInfo = obj;
            }
        },
        queryBaseInfo() {
            let params = {
                areaCode: "2021030823390056",
                page: 1,
                pageSize: 10,
                type: "museumBaseInfo",
            };
            this.$http
                .post(
                    "/screen/getScreenSurveyPage",
                    this.common.request(params)
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        const data = res.data.data.records;
                        if (data) {
                            this.baseInfo = {
                                collectionNum: data[0].value,
                                visitorsYear: data[1].value,
                                openingYears: data[2].value,
                                investment: data[3].value,
                                establishmentTime: data[4].value,
                                buildingArea: data[5].value,
                            };
                        }
                    } else {
                        this.$Message.error("查询基础数据有误");
                    }
                });
        },
        // 获取近半年活动数据
        queryActivityCount() {
            let params = {
                areaCode: "2021030823390056",
                page: 1,
                pageSize: 10,
                type: "museumActivityCount",
            };
            this.$http
                .post(
                    "/screen/getScreenSurveyPage",
                    this.common.request(params)
                )
                .then((res) => {
                    if (res.data.code === 200) {
                        const data = res.data.data.records.reduce(
                            (acc, cur) => {
                                acc.xData.push(cur.label);
                                acc.yData.push(cur.value);
                                return acc;
                            },
                            { xData: [], yData: [] }
                        );
                        this.initBarChart2(data);
                    } else {
                        this.$Message.error("查询基础数据有误");
                    }
                });
        },
        //查询博物馆的馆藏文物分类
        queryCollectionProportion() {
            let params = {
                areaCode: "2021030823390056",
                page: 1,
                pageSize: 10,
                type: "museumType",
            };
            this.$http
                .post(
                    "/screen/getScreenSurveyPage",
                    this.common.request(params)
                )
                .then(
                    (res) => {
                        if (res.data.code === 200) {
                            this.collectionProportion =
                                res.data.data.records.map((record) => ({
                                    collectionName: record.label,
                                    count: record.value,
                                    color: this.color[
                                        Math.floor(
                                            Math.random() * this.color.length
                                        )
                                    ],
                                }));
                            this.initChartPie(this.collectionProportion);
                        } else {
                            this.$Message.error("出错了");
                        }
                    },
                    (response) => {
                        this.$Message.error("出错了");
                    }
                );
        },
        //获取博物馆藏品
        getAllAntique() {
            this.$http
                .post(
                    "/content/queryContentInfo",
                    this.common.request({
                        areaCode: "2021030823390056",
                        hasChild: 1,
                        hasParent: 1,
                        page: 1,
                        pageSize: 100,
                        startAndEndDate: [],
                        typeCode: "COLLECTION",
                    })
                )
                .then(
                    (res) => {
                        if (res.data.code === 200) {
                            this.collectionList = res.data.data.records
                            this.collectionList.forEach(item => {
                                if (item.imageList) {
                                    item.imageList = JSON.parse(item.imageList)
                                }
                            })
                        } else {
                            this.$Message.error("出错了");
                        }
                    },
                    (response) => {
                        this.$Message.error("出错了");
                    }
                );
        },
        // 查询视频
        getScreenVideo() {
            let params = {
                areaCode: "2021030823390056",
                type: "museumMonitor",
            };
            this.$http
                .post("/screen/getScreenVideoList", this.common.request(params))
                .then(
                    (res) => {
                        if (res.data.code === 200) {
                            this.tabData = res.data.data.map((d) => ({
                                url: d.urlList,
                                title: d.title,
                                coverImage: d.coverImage,
                            }));
                            this.videoInfo = this.tabData[0];
                            this.videoUrl = this.tabData[0].url;
                        } else {
                            this.$Message.error("出错了");
                        }
                    },
                    (response) => {
                        this.$Message.error("出错了");
                    }
                );
        },
    },
};
</script>

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

.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/screenView/bg.png");
    background-size: 100%;

    .bg {
        width: 1920px;
        height: 1056px;
        position: relative;
        background-image: url("../../assets/screenView/bg-box.png");
        background-size: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .main {
            width: 1804px;
            height: 920px;
            position: absolute;
            margin: 0 auto;
            top: 105px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .top {
                width: 1804px;
                height: 608px;
                display: flex;
                justify-content: space-between;

                .left {
                    width: 462px;
                    height: 608px;

                    .baseInfo {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;

                        .min-title {
                            width: 462px;
                            height: 46px;
                            background-image: url("../../assets/screenView/minTitle462.png");
                            background-size: 100%;
                            background-color: rgba(29, 37, 47, 0.5);
                            display: flex;
                            align-items: center;

                            span {
                                font-family: "YouSheBiaoTiHei";
                                font-size: 22px;
                                font-weight: 400;
                                line-height: 29px;
                                letter-spacing: 0em;
                                text-align: left;
                                background: linear-gradient(
                                    to top,
                                    #5982b5,
                                    #ecf4fe
                                );
                                -webkit-background-clip: text;
                                color: transparent;
                                margin-left: 44px;
                            }
                        }

                        .databox {
                            .content-pub-style(100%, calc(100% - 20px));
                            margin-top: 10px;
                            padding: 20px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: space-between;

                            .databox-top {
                                width: 100%;
                                display: flex;
                                justify-content: space-between;

                                .data-item {
                                    flex: 1;
                                    height: 74px;
                                    margin-bottom: 15px;
                                    display: flex;
                                    align-items: center;

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

                                    .content {
                                        flex: 1;
                                        height: 74px;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                        margin-left: 10px;

                                        span:nth-child(1) {
                                            font-family: "PingFang SC";
                                            font-size: 20px;
                                            font-weight: 400;
                                            line-height: 28px;
                                            letter-spacing: 0em;
                                            text-align: left;
                                            color: #f2f6fa;
                                        }

                                        span:nth-child(2) {
                                            font-family: "Furore";
                                            font-size: 24px;
                                            font-weight: 400;
                                            line-height: 28px;
                                            letter-spacing: 0em;
                                            text-align: left;
                                            color: #ffffff;
                                        }
                                    }
                                }
                            }

                            .bottom-title {
                                width: 412px;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;

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

                                .title {
                                    font-family: "YouSheBiaoTiHei";
                                    font-size: 20px;
                                    font-weight: 400;
                                    text-align: left;
                                    color: #d5e2f2;
                                    margin-left: 10px;
                                }
                            }

                            .base {
                                width: 412px;
                                height: 120px;
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: space-between;

                                .data-item {
                                    width: 188px;
                                    height: 53px;
                                    margin-bottom: 15px;
                                    display: flex;

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

                                    .content {
                                        width: 130px;
                                        height: 53px;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: space-between;
                                        margin-left: 10px;

                                        span:nth-child(1) {
                                            font-family: "PingFang SC";
                                            font-size: 16px;
                                            font-weight: 400;
                                            color: #ffffff;
                                            text-align: left;
                                        }

                                        span:nth-child(2) {
                                            font-family: "DIN";
                                            font-size: 24px;
                                            font-weight: 400;
                                            color: #ffffff;
                                            text-align: left;
                                        }
                                    }
                                }
                            }

                            .peopleChart {
                                width: 390px;
                                height: 180px;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;

                                .dataChart {
                                    width: 390px;
                                    height: 161px;
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;

                                    .pieChart {
                                        width: 136px;
                                        height: 136px;
                                    }

                                    .pieContent {
                                        width: 216px;
                                        height: 126px;
                                        display: flex;
                                        flex-wrap: wrap;
                                        justify-content: space-between;

                                        .contentItem {
                                            width: 108px;
                                            height: 55px;
                                            display: flex;
                                            margin-bottom: 20px;
                                            flex-direction: column;

                                            .line {
                                                display: flex;

                                                .dataline {
                                                    height: 4px;
                                                    width: 24px;
                                                    margin-right: 5px;
                                                    background-color: #19cd17;
                                                    border-radius: 2px;
                                                }

                                                .defaultline {
                                                    height: 4px;
                                                    width: 40px;
                                                    background-color: #1b424f;
                                                    border-radius: 2px;
                                                }
                                            }

                                            .name {
                                                font-family: "PingFang SC";
                                                font-size: 14px;
                                                font-weight: 300;
                                                line-height: 20px;
                                                letter-spacing: 0em;
                                                color: #909ba8;
                                                text-align: left;
                                                margin: 4px 0 2px;
                                            }

                                            .num {
                                                font-family: "Furore";
                                                font-size: 20px;
                                                font-weight: 400;
                                                line-height: 23px;
                                                letter-spacing: 0em;
                                                color: #ffffff;
                                                text-align: left;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .zhong {
                    width: 846px;
                    height: 608px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .videoBox {
                        width: 846px;
                        height: 479px;
                    }

                    .scrollBox {
                        width: 100%;
                        height: 100%;
                        margin-top: 5px;
                        overflow: hidden;

                        .activityBox {
                            height: 114px;
                            display: flex;
                            align-items: center;

                            .activityItem {
                                width: 176px;
                                height: 114px;
                                position: relative;
                                margin-right: 20px;

                                img {
                                    width: 176px;
                                    height: 114px;
                                    pointer-events: none;
                                    border-radius: 4px;
                                }

                                span {
                                    position: absolute;
                                    display: block;
                                    width: 100%;
                                    height: 30px;
                                    line-height: 30px;
                                    text-align: center;
                                    color: #fff;
                                    bottom: 0;
                                    left: 0;
                                    font-size: 16px;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                    pointer-events: none;
                                    background-color: rgba(0, 0, 0, 0.2);
                                    border-radius: 0 0 4px 4px;
                                }
                            }
                        }
                    }
                }

                .right {
                    width: 462px;
                    height: 608px;

                    .culturalDataInfo {
                        width: 100%;
                        height: calc(100% - 120px);
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;

                        .min-title {
                            width: 462px;
                            height: 46px;
                            background-image: url("../../assets/screenView/minTitle462.png");
                            background-size: 100%;
                            background-color: rgba(29, 37, 47, 0.5);
                            display: flex;
                            align-items: center;

                            span {
                                font-family: "YouSheBiaoTiHei";
                                font-size: 22px;
                                font-weight: 400;
                                line-height: 29px;
                                letter-spacing: 0em;
                                text-align: left;
                                background: linear-gradient(
                                    to top,
                                    #5982b5,
                                    #ecf4fe
                                );
                                -webkit-background-clip: text;
                                color: transparent;
                                margin-left: 44px;
                            }
                        }

                        .databox {
                            .content-pub-style(100%, calc(100% - 20px));
                            margin-top: 10px;
                            display: flex;
                            padding: 20px 0;
                            flex-direction: column;
                            justify-content: space-between;
                            align-items: center;

                            .baseInfo {
                                width: 412px;
                                height: 120px;
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: space-between;

                                .data-item {
                                    width: 188px;
                                    height: 53px;
                                    margin-bottom: 15px;
                                    display: flex;

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

                                    .content {
                                        width: 130px;
                                        height: 53px;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: space-between;
                                        margin-left: 10px;

                                        span:nth-child(1) {
                                            font-family: "PingFang SC";
                                            font-size: 16px;
                                            font-weight: 400;
                                            color: #ffffff;
                                            text-align: left;
                                        }

                                        span:nth-child(2) {
                                            font-family: "DIN";
                                            font-size: 24px;
                                            font-weight: 400;
                                            color: #ffffff;
                                            text-align: left;
                                        }
                                    }
                                }
                            }

                            .bottom-title {
                                width: 412px;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                margin-top: 20px;

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

                                .title {
                                    font-family: "YouSheBiaoTiHei";
                                    font-size: 20px;
                                    font-weight: 400;
                                    text-align: left;
                                    color: #d5e2f2;
                                    margin-left: 10px;
                                }
                            }

                            .barChart {
                                width: 412px;
                                height: calc(134px * 2);
                            }
                        }
                    }
                }
            }

            .bottom {
                width: 1804px;
                height: 292px;
                display: flex;
                justify-content: space-between;

                .left {
                    width: 1328px;
                    height: 292px;

                    .collection {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;

                        .min-title {
                            width: 1328px;
                            height: 46px;
                            //background-image: url("../../assets/screenView/miniTitle1328.png");
                            background-size: 100%;
                            background-color: rgba(29, 37, 47, 0.5);
                            display: flex;
                            align-items: center;

                            span {
                                font-family: "YouSheBiaoTiHei";
                                font-size: 22px;
                                font-weight: 400;
                                line-height: 29px;
                                letter-spacing: 0em;
                                text-align: left;
                                background: linear-gradient(
                                    to top,
                                    #5982b5,
                                    #ecf4fe
                                );
                                -webkit-background-clip: text;
                                color: transparent;
                                margin-left: 44px;
                            }
                        }

                        .scrollBox {
                            .content-pub-style(100%, calc(100% - 10px));
                            margin-top: 10px;
                            overflow: hidden;

                            .databox {
                                height: 236px;
                                display: flex;
                                align-items: center;

                                .dataItem {
                                    width: 230px;
                                    height: 205px;
                                    margin-right: 15px;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: space-between;
                                    align-items: center;

                                    img {
                                        width: 230px;
                                        height: 156px;
                                        pointer-events: none;
                                    }

                                    .name {
                                        font-family: "PingFang SC";
                                        font-size: 16px;
                                        font-weight: 400;
                                        line-height: 22px;
                                        letter-spacing: 0em;
                                        text-align: center;
                                        color: #fff;
                                        pointer-events: none;
                                    }

                                    .time {
                                        font-family: "PingFang SC";
                                        font-size: 12px;
                                        font-weight: 400;
                                        line-height: 17px;
                                        letter-spacing: 0em;
                                        text-align: center;
                                        color: #a4a8ac;
                                        pointer-events: none;
                                    }
                                }
                            }
                        }
                    }
                }

                .right {
                    width: 462px;
                    height: 392px;
                    position: absolute;
                    bottom: 0px;
                    right: 0px;

                    .borrowRead {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;

                        .min-title {
                            width: 462px;
                            height: 46px;
                            background-image: url("../../assets/screenView/minTitle462.png");
                            background-size: 100%;
                            background-color: rgba(29, 37, 47, 0.5);
                            display: flex;
                            align-items: center;

                            span {
                                font-family: "YouSheBiaoTiHei";
                                font-size: 22px;
                                font-weight: 400;
                                line-height: 29px;
                                letter-spacing: 0em;
                                text-align: left;
                                background: linear-gradient(
                                    to top,
                                    #5982b5,
                                    #ecf4fe
                                );
                                -webkit-background-clip: text;
                                color: transparent;
                                margin-left: 44px;
                            }
                        }

                        .databox {
                            .content-pub-style(100%, calc(100% - 20px));
                            margin-top: 10px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            overflow: hidden;
                            padding: 10px;

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

                                .info-item {
                                    width: 100%;
                                    height: 120px;
                                    position: relative;
                                    margin-right: 20px;

                                    .title {
                                        display: -webkit-box;
                                        /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
                                        -webkit-box-orient: vertical;
                                        /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
                                        text-overflow: ellipsis;
                                        /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
                                        -webkit-line-clamp: 2;
                                        overflow: hidden;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.swiper-item {
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

    .swiper-image {
        max-height: 420px;
    }
}

// 基本概况
.volunteerModalT {
    width: 100%;
    height: 100%;
    display: flex;
    margin-bottom: 10px;
    flex-direction: column;
    // align-items: center;
    margin-bottom: 10px;

    img {
        width: 100%;
        height: 350px;
        margin-bottom: 10px;
    }

    .title {
        width: 100%;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .text {
        font-size: 24px;
    }

    .infoTitle {
        width: 100%;
        font-size: 24px;
    }

    .infoBox {
        width: 100%;
        font-size: 18px;
    }
}
</style>
