CPCenterData/src/views/screen/out-industry.vue

<template>
    <div class="eb-container" ref="appRef">
        <!-- 背景框 -->
        <MainTitle class="title" :title="title" :show-menu="false" :show-go-back="true" :show-logout="false"></MainTitle>
        <div class="main-content">
            <div class="left-content">
                <div
                    class="tab-item"
                    :class="{ 'select-tab': index == selectTab }"
                    v-for="(item, index) in tabList"
                    :key="index"
                    @click="changeTab(item, index)"
                >
                    {{ item.tabName }}
                </div>
            </div>
            <div class="right-content">
                <newsTemplate :typeCode="typeCode" @openCultural="openCultural"></newsTemplate>
            </div>
        </div>
        <commonModal v-model="detaillModal" width="1000" :title="currCultural.title">
            <div class="detail-container">
                <!-- 富文本 -->
                <div class="richText" v-html="currCultural.content" v-if="currCultural.contentType == '0'"></div>
                <!-- 图片列表 -->
                <div style="width: 100%; display: flex; flex-direction: column;align-items: center;">
                    <img :src="item" v-for="(item, index) in currCultural.imageList" :key="index" style="width: 100%;margin-bottom: 10px;"/>
                </div>
                <!-- 视频 -->
                <LivePlayer
                    v-if="detaillModal && currCultural.contentType == '2'"
                    :videoUrl="currCultural.mediaUrl"
                    :live="false"
                    fluent
                    autoplay
                    stretch
                    :hide-big-play-button="true"
                    :muted="false"
                    alt="正在加载中..."
                ></LivePlayer>
            </div>
        </commonModal>
    </div>
</template>

<script>
import { useIndex } from "../../utils/utilsDramAdmin.js";
import MainTitle from "./components/MainTitle.vue";
import CommonModal from "@/views/common-components/common-modal.vue";
import LivePlayer from "@liveqing/liveplayer";
import organization from './components/organization.vue'
import newsTemplate from "./components/news-template.vue";

export default {
    name: "publicService",
    components: {
        MainTitle,
        CommonModal,
        LivePlayer,
        organization,
        newsTemplate
    },
    data() {
        return {
            title: "产业发展",
            typeCode: "",
            selectTab: 0,
            currCultural: {},
            tabList: [
                {
                    tabName: "现代种养业",
                    typeCode: "PLANTING"
                },
                {
                    tabName: "乡土特色产业",
                    typeCode: "SPECIAL"
                },
            ],
            detaillModal: false,
            richText:
                "五粮液旅游景区是由五粮液集团建设，由四川五粮液文化旅游开发有限公司运营管理的特大型工业旅游景区。<br>景区于2006年被原国家旅游局评定为全国工业旅游示范点，2017年被评定为国家AAAA级旅游景区，2019年被四川省命名为首批省级工业旅游示范基地。 景区由501明清古窖池群、503明代古窖泥活态保护群落和江北总部基地三大片区构成，占地面积12平方公里，规划面积18平方公里。拥有五粮液酒文化博览馆、安乐神泉等景点。",
            slides: [
                {
                    src: require("@/assets/pbImage/lz.png")
                },
                {
                    src: require("@/assets/pbImage/lz.png")
                },
                {
                    src: require("@/assets/pbImage/lz.png")
                }
            ],
            value3: 0,
            setting: {
                autoplay: false,
                autoplaySpeed: 2000,
                dots: "inside",
                radiusDot: false,
                trigger: "click",
                arrow: "hover",
                height: "600px"
            }
        };
    },
    watch: {},
    created() {},
    computed: {},
    mounted() {
        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
        calcRate();
        windowDraw();
        this.changeTab(this.tabList[0], 0)

    },
    beforeDestroy() {
    },
    computed: {},
    watch: {},
    methods: {
        changeTab(item, index) {
            this.typeCode = item.typeCode
            if (this.selectTab == index) return;
            this.selectTab = index;
        },
        openCultural (data) {
            this.detaillModal = true
            this.currCultural = data
        },

    }
};
</script>

<style lang="less" scoped>
@import "../../styles/fonts/font.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: url("../../assets/pbImage/bg.png") no-repeat;
    background-size: 100% 100%;

    .main-content {
        position: absolute;
        top: 120px;
        left: 50%;
        transform: translateX(-50%);
        width: 1800px;
        height: 880px;
        display: flex;
        justify-content: space-between;

        .left-content {
            width: 310px;
            height: 100%;
            background: url("../../assets/pbImage/left-content.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 10px 0;

            .tab-item {
                width: 278px;
                height: 62px;
                background: url("../../assets/pbImage/tab-bg.png") no-repeat;
                background-size: 100% 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-family: PingFang SC;
                font-size: 20px;
                font-weight: 400;
                color: #ffffff;
                margin-bottom: 20px;
            }

            .select-tab {
                background: url("../../assets/pbImage/tab-select.png") no-repeat;
                color: #a59e68;
            }
        }

        .right-content {
            width: 1450px;
            height: 100%;
            background: url("../../assets/pbImage/right-content.png") no-repeat;
            background-size: 100% 100%;
            overflow-y: auto;
        }
        .right-content::-webkit-scrollbar {
            width: 10px;
            // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
        }

        .right-content::-webkit-scrollbar-thumb {
            background: #ccc; // 滑块颜色
            border-radius: 5px; // 滑块圆角
        }
    }
}

.bottom {
    width: 1920px;
    height: 30px;
    position: fixed;
    left: 0;
    bottom: 0;
    background: url("../../assets/pbImage/bottom.png") no-repeat;
    background-size: 100% 100%;
}
</style>