From 040cea7edf96aa67300bc2c42c96af5dc8389d23 Mon Sep 17 00:00:00 2001
From: changtong <2540919286@qq.com>
Date: Fri, 20 Dec 2024 10:58:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=88=B7=E5=A4=96=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/router.js                          |  36 +++
 src/views/screen/components/MainTitle.vue     |   7 +-
 src/views/screen/components/gd-pbService.vue  | 147 +++++++++++
 src/views/screen/components/gdPerson.vue      |  80 ++++++
 src/views/screen/components/gov-service.vue   |  45 ++++
 src/views/screen/components/life-service.vue  |  72 ++++++
 src/views/screen/components/news-template.vue | 169 +++++++++++++
 src/views/screen/components/organization.vue  |  88 +++++++
 src/views/screen/components/outsideTitle.vue  |  36 ++-
 src/views/screen/out-industry.vue             | 216 ++++++++++++++++
 src/views/screen/out-organization.vue         | 237 ++++++++++++++++++
 src/views/screen/out-pbService.vue            | 233 +++++++++++++++++
 src/views/screen/out-side-new.vue             | 205 ---------------
 src/views/screen/out-travel.vue               | 216 ++++++++++++++++
 src/views/screen/outsideHome copy.vue         | 233 +++++++++++++++++
 src/views/screen/outsideHome.vue              |  25 +-
 16 files changed, 1824 insertions(+), 221 deletions(-)
 create mode 100644 src/views/screen/components/gd-pbService.vue
 create mode 100644 src/views/screen/components/gdPerson.vue
 create mode 100644 src/views/screen/components/gov-service.vue
 create mode 100644 src/views/screen/components/life-service.vue
 create mode 100644 src/views/screen/components/news-template.vue
 create mode 100644 src/views/screen/components/organization.vue
 create mode 100644 src/views/screen/out-industry.vue
 create mode 100644 src/views/screen/out-organization.vue
 create mode 100644 src/views/screen/out-pbService.vue
 delete mode 100644 src/views/screen/out-side-new.vue
 create mode 100644 src/views/screen/out-travel.vue
 create mode 100644 src/views/screen/outsideHome copy.vue

diff --git a/src/router/router.js b/src/router/router.js
index ff4a40a..b9fcce2 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -229,6 +229,42 @@ export const screenRouter = [
         },
         component: () => import("@/views/screen/outsideHome.vue")
     },
+    {
+        path: "/out-pbService",
+        name: "out-pbService",
+        title: "交互屏公共服务",
+        meta: {
+            open: true
+        },
+        component: () => import("@/views/screen/out-pbService.vue")
+    },
+    {
+        path: "/out-organization",
+        name: "out-organization",
+        title: "交互屏组织振兴",
+        meta: {
+            open: true
+        },
+        component: () => import("@/views/screen/out-organization.vue")
+    },
+    {
+        path: "/out-travel",
+        name: "out-travel",
+        title: "交互屏文化旅游",
+        meta: {
+            open: true
+        },
+        component: () => import("@/views/screen/out-travel.vue")
+    },
+    {
+        path: "/out-industry",
+        name: "out-industry",
+        title: "交互屏产业发展",
+        meta: {
+            open: true
+        },
+        component: () => import("@/views/screen/out-industry.vue")
+    }
 ];
 
 export const routers = [
diff --git a/src/views/screen/components/MainTitle.vue b/src/views/screen/components/MainTitle.vue
index 1731f9a..ecd2ee1 100644
--- a/src/views/screen/components/MainTitle.vue
+++ b/src/views/screen/components/MainTitle.vue
@@ -20,6 +20,7 @@
             :src="require('@/assets/largeScreen/back.png')"
         />
         <img
+            v-if="showLogout"
             class="logout"
             title="退出登录"
             @click="logout"
@@ -188,6 +189,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        showLogout: {
+            type: Boolean,
+            default: true,
+        },
     },
     data() {
         let self = this;
@@ -769,7 +774,7 @@ export default {
     .goBack {
         position: absolute;
         cursor: pointer;
-        top: 20px;
+        top: 35px;
         right: 70px;
         width: 26px;
         height: 26px;
diff --git a/src/views/screen/components/gd-pbService.vue b/src/views/screen/components/gd-pbService.vue
new file mode 100644
index 0000000..3677382
--- /dev/null
+++ b/src/views/screen/components/gd-pbService.vue
@@ -0,0 +1,147 @@
+<template>
+    <div class="gd-container">
+        <div class="top">
+            <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="gd-main">
+            <newsTemplate v-if="selectTab == 0" @openCultural="openCultural" :typeCode="typeCode"></newsTemplate>
+            <gdPerson v-if="selectTab == 1"></gdPerson>
+        </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>
+                <!-- 图片列表 -->
+                <!-- <carousel-3d
+                    :autoplay="true"
+                    :autoplayTimeout="3000"
+                    :perspective="35"
+                    :display="3"
+                    :animationSpeed="1000"
+                    :width="300"
+                    :height="270"
+                    controlsVisible
+                    :controlsHeight="60"
+                    v-if="currCultural.contentType == '1'"
+                >
+                    <slide v-for="(item, i) in currCultural.imageList" :index="i" :key="i">
+                        <template slot-scope="obj">
+                            <img style="width: 100%; height: 280px" :src="item" />
+                        </template>
+                    </slide>
+                </carousel-3d> -->
+                <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 gdPerson from './gdPerson.vue'
+import newsTemplate from './news-template.vue'
+import commonModal from '@/views/common-components/common-modal.vue'
+
+
+export default {
+    name: "",
+    components: {gdPerson, newsTemplate, commonModal},
+    data() {
+        return {
+            tabList: [
+                {
+                    tabName: "规章制度"
+                },
+                {
+                    tabName: "公服人员"
+                }
+            ],
+            selectTab: 0,
+            typeCode: "RULES",
+            detaillModal: false,
+            currCultural: {}
+        };
+    },
+    watch: {},
+    created() {},
+    computed: {},
+    mounted () {
+    },
+    beforeDestroy() {},
+    computed: {},
+    watch: {},
+    methods: {
+        changeTab (item, index) {
+            if (this.selectTab == index) return
+            this.selectTab = index
+        },
+        openCultural (data) {
+            this.detaillModal = true
+            this.currCultural = data
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.gd-container {
+    width: 100%;
+    // height: 100%;
+
+    .top {
+        width: 100%;
+        height: 100px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .tab-item {
+                width: 200px;
+                height: 50px;
+                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;
+                margin-right: 10px;
+            }
+
+            .select-tab {
+                background: url("../../../assets/pbImage/tab-select.png") no-repeat;
+                background-size: 100% 100%;
+                color: #a59e68;
+            }
+    }
+
+    .gd-main {
+        width: 100%;
+    }
+
+}
+</style>
diff --git a/src/views/screen/components/gdPerson.vue b/src/views/screen/components/gdPerson.vue
new file mode 100644
index 0000000..95d74d3
--- /dev/null
+++ b/src/views/screen/components/gdPerson.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="gd-container">
+        <div class="item" v-for="(item,index) in personList" :key="index">
+            <img :src="item.image" />
+            <span>{{ item.name }}</span>
+            <span>{{ item.post }}</span>
+            <span>{{ item.phone }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "",
+    components: {},
+    data() {
+        return {
+            areaCode: this.$route.query.areaCode,
+            personList: []
+        };
+    },
+    watch: {},
+    created() {},
+    computed: {},
+    mounted () {
+        this.initData()
+    },
+    beforeDestroy() {},
+    computed: {},
+    watch: {},
+    methods: {
+        initData() {
+            let params = {
+                areaCode: this.areaCode,
+                pageNum: 1,
+                pageSize: 10
+            };
+            this.$http.post("/server/queryServerPeopleInfoPage", this.common.request(params)).then(res => {
+                if (res.data.code == 200) {
+                    this.personList = res.data.data.records
+                } else {
+                    this.$Message.error("查询失败");
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.gd-container {
+    width: 100%;
+    // height: 100%;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(auto-fill, 333px);
+    grid-gap: 30px 50px;
+
+    .item {
+        background: url("../../../assets/pbImage/page-item-bg.png") no-repeat;
+        background-size: 100% 100%;
+        padding: 10px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        img {
+            width: 140px;
+            height: 196px;
+        }
+
+        span {
+            margin-top: 10px;
+            font-size: 16px;
+            color: #ffffff;
+        }
+    }
+}
+</style>
diff --git a/src/views/screen/components/gov-service.vue b/src/views/screen/components/gov-service.vue
new file mode 100644
index 0000000..abb545f
--- /dev/null
+++ b/src/views/screen/components/gov-service.vue
@@ -0,0 +1,45 @@
+<template>
+    <div class="gov-container">
+        <img :src="require('@/assets/pbImage/gov.png')" />
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "",
+    components: {
+    },
+    data() {
+        return {
+        };
+    },
+    watch: {},
+    created() {},
+    computed: {},
+    mounted () {
+    },
+    beforeDestroy() {},
+    computed: {},
+    watch: {},
+    methods: {
+
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.gov-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+        width: 500px;
+        height: 500px;
+    }
+}
+
+</style>
diff --git a/src/views/screen/components/life-service.vue b/src/views/screen/components/life-service.vue
new file mode 100644
index 0000000..91a3fe2
--- /dev/null
+++ b/src/views/screen/components/life-service.vue
@@ -0,0 +1,72 @@
+<template>
+    <div class="life-container">
+        <div class="life-item">
+            <img :src="require('@/assets/pbImage/sf.png')" />
+            <span>收费易水费缴纳</span>
+        </div>
+        <div class="life-item">
+            <img :src="require('@/assets/pbImage/df.png')" />
+            <span>国网四川电力电费缴纳</span>
+        </div>
+        <div class="life-item">
+            <img :src="require('@/assets/pbImage/qf.png')" />
+            <span>天康燃气气费缴纳</span>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: "",
+    components: {
+    },
+    data() {
+        return {
+
+        };
+    },
+    watch: {},
+    created() {},
+    computed: {},
+    mounted() {},
+    beforeDestroy() {},
+    computed: {},
+    watch: {},
+    methods: {
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.life-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+
+    .life-item {
+        width: 400px;
+        height: 450px;
+        background: url("../../../assets/pbImage/page-item-bg.png") no-repeat;
+        background-size: 100% 100%;
+        padding: 20px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        img {
+            width: 350px;
+            height: 350px;
+        }
+
+        span {
+            margin-top: 20px;
+            font-size: 18px;
+            color: #ffffff;
+        }
+    }
+}
+
+</style>
diff --git a/src/views/screen/components/news-template.vue b/src/views/screen/components/news-template.vue
new file mode 100644
index 0000000..e057f68
--- /dev/null
+++ b/src/views/screen/components/news-template.vue
@@ -0,0 +1,169 @@
+<template>
+    <div class="cultural-container">
+        <div
+            class="item"
+            v-for="(item, i) in contentList"
+            :key="i"
+            @click="openModal(item)"
+        >
+            <img :src="item.coverImage" @error="imgError($event)"/>
+            <span>{{ item.title }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+import LivePlayer from "@liveqing/liveplayer";
+import commonModal from '@/views/common-components/common-modal.vue'
+
+export default {
+    name: "",
+    components: {
+        commonModal,
+        LivePlayer
+    },
+    data() {
+        return {
+            contentList: [],
+            areaCode: this.$route.query.areaCode
+        };
+    },
+    props: {
+        typeCode: {
+            type: [String, Array],
+            default: ""
+        }
+    },
+    created() {},
+    computed: {},
+    mounted () {
+        // this.initData()
+    },
+    beforeDestroy() {},
+    computed: {},
+    watch: {
+        typeCode: {
+            handler (n, o) {
+                if (n) {
+                    this.contentList = []
+                    if (n instanceof Array) {
+                        for (let index = 0; index < n.length; index++) {
+                            this.initData(n[index])
+                        }
+                    } else {
+                        this.initData(n)
+                    }
+                }
+            },
+            immediate: true
+        }
+    },
+    methods: {
+        openModal (item) {
+            if (item.contentType == "3") {
+                this.jumpWindow(item.webLink, item.title)
+                return
+            }
+            this.$emit("openCultural", item);
+        },
+        initData(typeCode) {
+            let params = {
+                page: 1,
+                pageSize: 1000,
+                typeCode: typeCode,
+                areaCode: this.areaCode,
+                hasParent: "0",
+                published: "1"
+            };
+
+            this.$http
+                .post("/content/queryContentInfo", this.common.request(params))
+                .then(res => {
+                    if (res.data.code == 200) {
+                        this.contentList = this.contentList.concat(res.data.data.records)
+                        this.contentList.forEach(item => {
+                            if (item.imageList) {
+                                item.imageList = JSON.parse(item.imageList);
+                            }
+                        });
+                    } else {
+                        that.$Message.error("请求异常");
+                    }
+                });
+        },
+        imgError (e) {
+            console.log(e)
+            e.target.src = "https://ts1.cn.mm.bing.net/th/id/R-C.28204f240ef56dd586dbf63a6f93d194?rik=Iksn500RUnMMww&riu=http%3a%2f%2fwww.job5156.com%2fpublic%2fimages%2ferror_404.jpg&ehk=53lHWiMWDHpkD0lX71vxLYkSGkqpBnBwz8Ly5VhrgyU%3d&risl=&pid=ImgRaw&r=0"
+        },
+        // 跳转窗口
+        jumpWindow (url, title) {
+            let iWidth = 800; // 出窗口的宽度:
+            let iHeight = 500; // 弹出窗口的高度;
+            // window.screen.height获得屏幕的高，window.screen.width获得屏幕的宽
+            let iTop = (window.screen.height - 30 - iHeight) / 2;
+            // 获得窗口的垂直位置
+            let iLeft = (window.screen.width - 10 - iWidth) / 2;
+            // 获得窗口的水平位置;
+            let windowProperty = `height=${iHeight},innerHeight=${iHeight},width=${iWidth},innerWidth=${iWidth},top=${iTop},left=${iLeft},toolbar=no,menubar=no,scrollbars=auto,resizeable=no ,location=no, status=no`;
+            window.open(url, title, windowProperty);
+        },
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.cultural-container {
+    width: 100%;
+    // height: 100%;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(auto-fill, 235px);
+    grid-gap: 30px 50px;
+
+    .item {
+        background: url("../../../assets/pbImage/page-item-bg.png") no-repeat;
+        background-size: 100% 100%;
+        padding: 10px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        img {
+            width: 280px;
+            height: 157px;
+        }
+
+        span {
+            display: inline-block;
+            width: 90%;
+            margin-top: 10px;
+            font-size: 16px;
+            color: #ffffff;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+    }
+}
+
+// .cultural-container .item:nth-child(-n + 4) {
+// 	height: 93%;
+// }
+
+.detail-container {
+    width: 100%;
+    height: 100px;
+
+    .richText {
+        color: #ffffff;
+        font-size: 16px;
+    }
+
+    .imgs {
+        width: 100%;
+        height: 600px;
+    }
+}
+</style>
diff --git a/src/views/screen/components/organization.vue b/src/views/screen/components/organization.vue
new file mode 100644
index 0000000..7b9ebad
--- /dev/null
+++ b/src/views/screen/components/organization.vue
@@ -0,0 +1,88 @@
+<template>
+    <div class="organ-container">
+
+        <div class="item" v-for="(item,index) in leaderList" :key="index">
+            <img :src="item.image" />
+            <span>{{ item.name }}</span>
+            <span>{{ item.job }}</span>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "",
+    components: {},
+    data() {
+        return {
+            areaCode: this.$route.query.areaCode,
+            leaderList: []
+        };
+    },
+    watch: {},
+    created() {},
+    computed: {},
+    mounted() {
+        this.initData()
+    },
+    beforeDestroy() {},
+    computed: {},
+    watch: {},
+    methods: {
+        initData() {
+            let params = {
+                areaCode: this.areaCode,
+                page:1,
+                pageSize: 20
+            };
+            this.$http.post("/screen/queryLeaderInfoPage", this.common.request(params)).then(res => {
+                if (res.data.code == 200) {
+                    this.leaderList = res.data.data.records
+                } else {
+                    this.$Message.error("查询失败");
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.organ-container {
+    width: 100%;
+    // height: 100%;
+    padding: 20px;
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(auto-fill, 333px);
+    grid-gap: 30px 50px;
+
+    .item {
+        background: url("../../../assets/pbImage/page-item-bg.png") no-repeat;
+        background-size: 100% 100%;
+        padding: 20px 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
+        img {
+            width: 140px;
+            height: 196px;
+        }
+
+        span {
+            display: inline-block;
+            text-align: center;
+            width: 90%;
+            margin-top: 10px;
+            font-size: 16px;
+            color: #ffffff;
+        }
+    }
+}
+
+.organ-container .item:nth-child(-n + 6) {
+	height: 98%;
+}
+</style>
diff --git a/src/views/screen/components/outsideTitle.vue b/src/views/screen/components/outsideTitle.vue
index 2263f64..05d2b65 100644
--- a/src/views/screen/components/outsideTitle.vue
+++ b/src/views/screen/components/outsideTitle.vue
@@ -1,8 +1,11 @@
 <template>
     <!--   主标题 开始     -->
     <div class="Main-title">
-        <!-- <span class="title">{{ title }}</span> -->
-         <img class="logo" :src="require('@/assets/kyzx.png')" />
+        <div class="left">
+            <img :src="require('@/assets/pbImage/cp.png')" />
+            <span class="title">村级广播电视公共服务</span>
+            <span class="subTitle">{{ title }}</span>
+        </div>
         <div class="right-box">
             <div class="top">
                 <div class="dateBox">
@@ -160,12 +163,29 @@ export default {
     justify-content: space-between;
     align-items: center;
     position: relative;
-    .logo {
-        position: absolute;
-        top: 0;
-        left: 10px;
-        width: 700px;
-        height: 120px;
+    .left {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        img {
+            width: 76px;
+            height: 100px;
+        }
+        span {
+            font-family: "ShiShangZhongHeiJianTi";
+            background: linear-gradient(180deg, #FFFFFF 27.08%, #BCDDFF 100%);
+            background-clip: text;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+
+        }
+        .title{
+            font-size: 64px;
+            margin-left: 20px;
+        }
+        .subTitle {
+            font-size: 32px;
+        }
     }
     .title {
         font-family: "ShiShangZhongHeiJianTi";
diff --git a/src/views/screen/out-industry.vue b/src/views/screen/out-industry.vue
new file mode 100644
index 0000000..880abc7
--- /dev/null
+++ b/src/views/screen/out-industry.vue
@@ -0,0 +1,216 @@
+<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>
diff --git a/src/views/screen/out-organization.vue b/src/views/screen/out-organization.vue
new file mode 100644
index 0000000..9f00080
--- /dev/null
+++ b/src/views/screen/out-organization.vue
@@ -0,0 +1,237 @@
+<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">
+                <organization v-if="selectTab == 0"></organization>
+                <newsTemplate v-if="selectTab == 1 || selectTab == 2" :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>
+                <!-- 图片列表 -->
+                <!-- <carousel-3d
+                    :autoplay="true"
+                    :autoplayTimeout="3000"
+                    :perspective="35"
+                    :display="3"
+                    :animationSpeed="1000"
+                    :width="300"
+                    :height="270"
+                    controlsVisible
+                    :controlsHeight="60"
+                    v-if="currCultural.contentType == '1'"
+                >
+                    <slide v-for="(item, i) in currCultural.imageList" :index="i" :key="i">
+                        <template slot-scope="obj">
+                            <img style="width: 100%; height: 280px" :src="item" />
+                        </template>
+                    </slide>
+                </carousel-3d> -->
+                <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: ""
+                },
+                {
+                    tabName: "三务公开",
+                    typeCode: ["party", "wealth", "outdoor"]
+                },
+                {
+                    tabName: "基层党建",
+                    typeCode: "BUILDING"
+                },
+            ],
+            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.selectTab[0], 0)
+    },
+    beforeDestroy() {
+    },
+    computed: {},
+    watch: {},
+    methods: {
+        changeTab(item, index) {
+            if (this.selectTab == index) return;
+            this.selectTab = index;
+            this.typeCode = item.typeCode
+        },
+        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>
diff --git a/src/views/screen/out-pbService.vue b/src/views/screen/out-pbService.vue
new file mode 100644
index 0000000..e41e02f
--- /dev/null
+++ b/src/views/screen/out-pbService.vue
@@ -0,0 +1,233 @@
+<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">
+                <gdPbService v-if="selectTab == 0"></gdPbService>
+                <newsTemplate v-if="selectTab == 1" @openCultural="openCultural" :typeCode="typeCode"></newsTemplate>
+                <govService v-if="selectTab == 2"></govService>
+                <lifeService v-if="selectTab == 3"></lifeService>
+            </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 gisMap from "./components/gisMapOfCounty.vue";
+import vueSeamlessScroll from "vue-seamless-scroll";
+import CommonModal from "@/views/common-components/common-modal.vue";
+import LivePlayer from "@liveqing/liveplayer";
+import gdPbService from "./components/gd-pbService.vue";
+import newsTemplate from "./components/news-template.vue";
+import govService from "./components/gov-service.vue";
+import lifeService from "./components/life-service.vue";
+
+export default {
+    name: "publicService",
+    components: {
+        MainTitle,
+        gisMap,
+        vueSeamlessScroll,
+        CommonModal,
+        LivePlayer,
+        gdPbService,
+        newsTemplate,
+        govService,
+        lifeService
+    },
+    data() {
+        return {
+            title: "公共服务",
+            selectTab: 0,
+            currCultural: {},
+            tabList: [
+                {
+                    tabName: "广电公服",
+                    typeCode: ""
+                },
+                {
+                    tabName: "文化服务",
+                    typeCode: "WHSERVICE"
+                },
+                {
+                    tabName: "政务服务",
+                    typeCode: ""
+                },
+                {
+                    tabName: "生活服务",
+                    typeCode: ""
+                }
+            ],
+            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.selectTab[0], 0)
+
+    },
+    beforeDestroy() {
+    },
+    computed: {},
+    watch: {},
+    methods: {
+        changeTab(item, index) {
+            if (this.selectTab == index) return;
+            this.selectTab = index;
+            this.typeCode = item.typeCode;
+        },
+        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>
diff --git a/src/views/screen/out-side-new.vue b/src/views/screen/out-side-new.vue
deleted file mode 100644
index 58687bf..0000000
--- a/src/views/screen/out-side-new.vue
+++ /dev/null
@@ -1,205 +0,0 @@
-<template>
-    <div class="container" ref="appRef">
-        <common-live-player
-            :videoUrl="currentVideo.playUrl"
-            :muted="false"
-            @ended="ended"
-        ></common-live-player>
-    </div>
-</template>
-
-<script>
-import { useIndex } from "@/utils/utilsDramAdmin";
-import CommonLivePlayer from "@/views/common-components/common-live-player.vue";
-export default {
-    name: "OutSide",
-    components: {
-        CommonLivePlayer,
-    },
-    data() {
-        return {
-            title: "智慧广电示范区",
-            videoList: [],
-            index: 0,
-            currentVideo: {},
-        };
-    },
-    created() {},
-    mounted() {
-        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
-        calcRate();
-        windowDraw();
-        this.queryTvList();
-    },
-    beforeDestroy() {},
-    methods: {
-        ended() {
-            this.index += 1;
-            if (this.index > this.videoList.length - 1) {
-                this.index = 0;
-            }
-            this.onClick(this.index);
-        },
-        // 自动播放点击
-        onClick(index) {
-            this.currentVideo = this.videoList[index];
-        },
-        // 查询电视新闻列表
-        queryTvList() {
-            let url = "/links/getTVInfoPage";
-            let params = {
-                page: 0,
-            };
-
-            this.$http.post(url, this.common.request(params)).then((res) => {
-                if (res && res.data.code >= 200 && res.data.code < 400) {
-                    this.videoList = res.data.data.contentList.splice(0, 10);
-                    this.videoList = this.videoList.map((item) => ({
-                        ...item,
-                        playUrl: item.playInfo.playUrl,
-                    }));
-                    this.onClick(0);
-                } else {
-                    this.$Message.error("获取数据失败");
-                }
-            });
-        },
-    },
-};
-</script>
-
-<style lang="less" scoped>
-.box-title {
-    display: block;
-    width: 100%;
-    font-family: "ShiShangZhongHeiJianTi";
-    font-size: 30px;
-    background: linear-gradient(180deg, #ffffff 27.08%, #bcddff 100%);
-    margin: 5px 0;
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    writing-mode: unset;
-}
-.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% 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .main {
-        width: 100%;
-        height: 920px;
-        padding: 0 30px;
-        display: flex;
-        justify-content: space-between;
-        .video-box {
-            width: 1350px;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-        }
-        .right-box {
-            width: 480px;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            .contetn-box {
-                width: 100%;
-                height: 680px;
-                display: flex;
-                flex-direction: column;
-                justify-content: space-between;
-
-                .list {
-                    width: 100%;
-                    height: 625px;
-                    .list-item {
-                        width: 100%;
-                        height: 130px;
-                        margin-bottom: 10px;
-                        display: flex;
-                        justify-content: space-between;
-                        .content {
-                            width: 255px;
-                            height: 100%;
-                            display: flex;
-                            flex-direction: column;
-                            justify-content: space-between;
-
-                            .content-title {
-                                width: 100%;
-                                color: #ffffff;
-                                font-size: 18px;
-                                display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
-                                -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
-                                text-overflow: ellipsis; /* 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
-                                -webkit-line-clamp: 3;
-                                overflow: hidden;
-                            }
-                            .tag {
-                                display: flex;
-                                justify-content: space-between;
-                                align-items: center;
-                                color: #d8d4d4;
-                                font-size: 15px;
-                            }
-                        }
-                        img {
-                            width: 200px;
-                            height: 122px;
-                            border-radius: 4px;
-                        }
-                    }
-
-                    .item-box {
-                        width: 100%;
-                        display: flex;
-                        flex-direction: column;
-                        margin-bottom: 30px;
-
-                        img {
-                            width: 100%;
-                            height: 270px;
-                            border-radius: 4px;
-                        }
-                    }
-                }
-            }
-            .qrcode-box {
-                width: 100%;
-                height: 220px;
-                display: flex;
-                justify-content: space-between;
-                img {
-                    width: 200px;
-                    height: 200px;
-                }
-                span {
-                    font-family: "ShiShangZhongHeiJianTi";
-                    font-size: 18px;
-                    background: linear-gradient(
-                        180deg,
-                        #ffffff 27.08%,
-                        #bcddff 100%
-                    );
-                    margin: 5px 0;
-                    background-clip: text;
-                    -webkit-background-clip: text;
-                    -webkit-text-fill-color: transparent;
-                }
-            }
-        }
-    }
-}
-</style>
diff --git a/src/views/screen/out-travel.vue b/src/views/screen/out-travel.vue
new file mode 100644
index 0000000..5f8b040
--- /dev/null
+++ b/src/views/screen/out-travel.vue
@@ -0,0 +1,216 @@
+<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: "SCENE"
+                },
+                {
+                    tabName: "乡村非物质文化",
+                    typeCode: "CULTURE"
+                },
+            ],
+            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>
diff --git a/src/views/screen/outsideHome copy.vue b/src/views/screen/outsideHome copy.vue
new file mode 100644
index 0000000..8a92464
--- /dev/null
+++ b/src/views/screen/outsideHome copy.vue	
@@ -0,0 +1,233 @@
+<template>
+    <div class="container" ref="appRef" :class="{ red: name == '一曼村' }">
+        <div class="main-title">
+            <outsideTitle :title="title"></outsideTitle>
+        </div>
+        <div class="main">
+            <div class="main-left">
+                <div class="video">
+                    <LivePlayer
+                        fluent
+                        autoplay
+                        :loop="true"
+                        :videoUrl="videoUrl"
+                        stretch
+                        :hide-big-play-button="true"
+                        :muted="false"
+                        aspect="513:292"
+                        alt="正在加载中..."
+                    ></LivePlayer>
+                </div>
+                <div class="card" @click="toPage('/out-pbService')">
+                    <img :src="require('@/assets/pbImage/card-icon1.png')" />
+                    <span>公共服务</span>
+                </div>
+            </div>
+            <div class="main-right">
+                <div
+                    class="card card2"
+                    @click="toPage('/out-organization')"
+                >
+                    <img :src="require('@/assets/pbImage/card-icon2.png')" />
+                    <span>组织振兴</span>
+                </div>
+                <div class="card card3" @click="toPage('/out-travel')">
+                    <img :src="require('@/assets/pbImage/card-icon3.png')" />
+                    <span>文化旅游</span>
+                </div>
+                <div class="card card4" @click="toPage('/out-industry')">
+                    <img :src="require('@/assets/pbImage/card-icon4.png')" />
+                    <span>产业发展</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import outsideTitle from "./components/outsideTitle.vue";
+import { useIndex } from "../../utils/utilsDramAdmin.js";
+import LivePlayer from "@liveqing/liveplayer";
+
+export default {
+    name: "",
+    components: {
+        outsideTitle,
+        LivePlayer
+    },
+    data() {
+        return {
+            title: "·" + this.$route.query.areaName + "公服代办点",
+            name: this.$route.query.areaName,
+            areaCode: this.$route.query.areaCode,
+            videoUrl: ""
+        };
+    },
+    created() {},
+    mounted() {
+        const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
+        calcRate();
+        windowDraw();
+        this.initData();
+    },
+    beforeDestroy() {},
+    methods: {
+        initData() {
+            let params = {
+                areaCode: this.areaCode
+            };
+            this.$http
+                .post("/area/info/getById", this.common.request(params))
+                .then(res => {
+                    if (res.data.code == 200) {
+                        this.videoUrl = res.data.data.map4;
+                    } else {
+                        this.$Message.error("操作失败");
+                    }
+                });
+        },
+        toPage (path) {
+            this.$router.push(
+                {
+                    path: path,
+                    query: {
+                        areaName: this.name,
+                        areaCode: this.areaCode
+                    }
+                }
+            )
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+/deep/ .video-wrapper {
+    border-radius: 12px;
+}
+
+/deep/ .ivu-page {
+    color: #fff;
+    background-color: transparent;
+}
+
+/deep/ .ivu-page-next,
+/deep/ .ivu-page-prev,
+/deep/ .ivu-page-item,
+/deep/ .ivu-page-options-elevator input {
+    background-color: transparent;
+    color: #fff;
+    text-align: center;
+}
+
+/deep/ .ivu-page-next a,
+/deep/ .ivu-page-prev a,
+/deep/ .ivu-page-item a {
+    color: #fff;
+}
+
+.red {
+    background-image: url("../../assets/pbImage/red-bg.png") !important;
+}
+.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/pbImage/out-bg.png");
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .main-title {
+        width: 1788px;
+        height: 100px;
+        position: absolute;
+        top: 30px;
+    }
+
+    .main {
+        position: absolute;
+        top: 152px;
+        width: 1790px;
+        height: 890px;
+        display: flex;
+        justify-content: space-between;
+
+        .main-left {
+            width: 1026px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .video {
+                width: 100%;
+                height: 584px;
+            }
+            .card {
+                width: 100%;
+                height: 280px;
+                background: url("../../assets/pbImage/card1.png") no-repeat;
+                background-size: 100% 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                img {
+                    width: 158px;
+                    height: 158px;
+                }
+                span {
+                    font-family: ShiShangZhongHeiJianTi;
+                    font-size: 84px;
+                    font-weight: 400;
+                    text-align: center;
+                    color: #ffffff;
+                    margin-left: 45px;
+                }
+            }
+        }
+        .main-right {
+            width: 742px;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            .card {
+                width: 100%;
+                height: 280px;
+                background-color: #fff;
+                background-size: 100% 100%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                img {
+                    width: 158px;
+                    height: 158px;
+                }
+                span {
+                    font-family: ShiShangZhongHeiJianTi;
+                    font-size: 84px;
+                    font-weight: 400;
+                    text-align: center;
+                    color: #ffffff;
+                    margin-left: 45px;
+                }
+            }
+            .card2 {
+                background: url("../../assets/pbImage/card2.png") no-repeat;
+            }
+            .card3 {
+                background: url("../../assets/pbImage/card3.png") no-repeat;
+            }
+            .card4 {
+                background: url("../../assets/pbImage/card4.png") no-repeat;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/views/screen/outsideHome.vue b/src/views/screen/outsideHome.vue
index 1d09de7..8a92464 100644
--- a/src/views/screen/outsideHome.vue
+++ b/src/views/screen/outsideHome.vue
@@ -18,7 +18,7 @@
                         alt="正在加载中..."
                     ></LivePlayer>
                 </div>
-                <div class="card" @click="$router.push('out-pbService')">
+                <div class="card" @click="toPage('/out-pbService')">
                     <img :src="require('@/assets/pbImage/card-icon1.png')" />
                     <span>公共服务</span>
                 </div>
@@ -26,16 +26,16 @@
             <div class="main-right">
                 <div
                     class="card card2"
-                    @click="$router.push('out-organization')"
+                    @click="toPage('/out-organization')"
                 >
                     <img :src="require('@/assets/pbImage/card-icon2.png')" />
                     <span>组织振兴</span>
                 </div>
-                <div class="card card3" @click="$router.push('out-travel')">
+                <div class="card card3" @click="toPage('/out-travel')">
                     <img :src="require('@/assets/pbImage/card-icon3.png')" />
                     <span>文化旅游</span>
                 </div>
-                <div class="card card4" @click="$router.push('out-industry')">
+                <div class="card card4" @click="toPage('/out-industry')">
                     <img :src="require('@/assets/pbImage/card-icon4.png')" />
                     <span>产业发展</span>
                 </div>
@@ -57,9 +57,9 @@ export default {
     },
     data() {
         return {
-            title: "·" + window.$localStorage.getItem("name") + "公服代办点",
-            name: window.$localStorage.getItem("name"),
-            areaCode: window.$localStorage.getItem("areaCode"),
+            title: "·" + this.$route.query.areaName + "公服代办点",
+            name: this.$route.query.areaName,
+            areaCode: this.$route.query.areaCode,
             videoUrl: ""
         };
     },
@@ -85,6 +85,17 @@ export default {
                         this.$Message.error("操作失败");
                     }
                 });
+        },
+        toPage (path) {
+            this.$router.push(
+                {
+                    path: path,
+                    query: {
+                        areaName: this.name,
+                        areaCode: this.areaCode
+                    }
+                }
+            )
         }
     }
 };