|
|
@@ -0,0 +1,431 @@
|
|
|
+<template>
|
|
|
+ <div class="pc-main">
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts">
|
|
|
+import {
|
|
|
+ defineComponent,
|
|
|
+ ref,
|
|
|
+ nextTick,
|
|
|
+ onMounted,
|
|
|
+ watch,
|
|
|
+ computed,
|
|
|
+ ComponentInternalInstance,
|
|
|
+ reactive,
|
|
|
+ toRefs,
|
|
|
+ getCurrentInstance
|
|
|
+} from 'vue'
|
|
|
+import {useStore} from 'vuex'
|
|
|
+import BgImg1 from './img/bg-img-1.jpg'
|
|
|
+import BgImg2 from './img/bg-img-2.jpg'
|
|
|
+import BgImg3 from './img/bg-img-3.jpg'
|
|
|
+import InfoSub1 from './img/info-sub-1.png'
|
|
|
+import InfoSub2 from './img/info-sub-2.png'
|
|
|
+import InfoSub3 from './img/info-sub-3.png'
|
|
|
+import InfoSub4 from './img/info-sub-4.png'
|
|
|
+import InfoSub5 from './img/info-sub-5.png'
|
|
|
+import InfoSub6 from './img/info-sub-6.png'
|
|
|
+import InfoMain1 from './img/info-main-1.jpg'
|
|
|
+import InfoMain2 from './img/info-main-2.jpg'
|
|
|
+import InfoMain3 from './img/info-main-3.jpg'
|
|
|
+import InfoMain4 from './img/info-main-4.jpg'
|
|
|
+import InfoMain5 from './img/info-main-5.jpg'
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'App',
|
|
|
+ components: {},
|
|
|
+ setup() {
|
|
|
+ const store = useStore()
|
|
|
+ const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
|
|
|
+ const BgImgMapper = [BgImg1, BgImg2, BgImg3]
|
|
|
+ const HrefMapper = window.cusConfig[window.cusConfig.version].screenHref
|
|
|
+ const state = reactive({
|
|
|
+ bgImgIndex: 0,
|
|
|
+ showInfo: false,
|
|
|
+ infoIndex: -1,
|
|
|
+ InfoMapper: [
|
|
|
+ {
|
|
|
+ label: '平台简介',
|
|
|
+ enLabel: 'Platform Introduction',
|
|
|
+ remark: '海南社管平台按照“全省一盘棋、全岛同城化”理念，聚焦“二线高效管住””自贸港风险防控“等核心业务需求...',
|
|
|
+ subImg: InfoSub1,
|
|
|
+ mainImg: InfoMain1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '领导关怀',
|
|
|
+ enLabel: "Leader's Care",
|
|
|
+ remark: '中央、海南省委省政府对社管平台的建设高度重视，相关领导多次到社管平台调研指导工作，并作出一系列重要批示。',
|
|
|
+ subImg: InfoSub2,
|
|
|
+ mainImg: InfoMain2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '组织架构',
|
|
|
+ enLabel: 'Organization Structure',
|
|
|
+ remark: '中央、海南省委省政府对社管平台的建设高度重视，相关领导多次到社管平台调研指导工作，并作出一系列重要批示。',
|
|
|
+ subImg: InfoSub3,
|
|
|
+ mainImg: InfoMain3,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总体规划',
|
|
|
+ enLabel: 'Master Planning',
|
|
|
+ remark: '根据顶层设计文件要求，社管平台按照“强化共用、整合通用、开放应用”的架构理念，打造“1551”社会管理业务架构体系...',
|
|
|
+ subImg: InfoSub4,
|
|
|
+ mainImg: InfoMain4,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '大厅职能',
|
|
|
+ enLabel: 'Hall Functions',
|
|
|
+ remark: '社管平台联勤联动工作在建设领导小组统一领导下，由指挥中心负责，联勤协调处指挥调度，情指行组具体落实。',
|
|
|
+ subImg: InfoSub5,
|
|
|
+ mainImg: InfoMain5,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '成果展示',
|
|
|
+ enLabel: 'Achievement-Exhibition',
|
|
|
+ remark: '近年来，平台通过船舶管控系统精准预警重点海域和重要时段涉海信息，配合海南海警局、海岸警察总队等部门破获了系列重大案件...',
|
|
|
+ subImg: InfoSub6,
|
|
|
+ href: 'http://www.baidu.com'
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ infoInput: ''
|
|
|
+ });
|
|
|
+ const switchInfo = (ind) => {
|
|
|
+ if (ind === state.infoIndex) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ nextTick(() => {
|
|
|
+ state.showInfo = false
|
|
|
+ state.infoIndex = ind
|
|
|
+ for (let i = 0; i < ref_infoDialog.value.children.length; i++) {
|
|
|
+ const delay = 0
|
|
|
+ if (i >= state.infoIndex) {
|
|
|
+ ref_infoDialog.value.children[i].className = 'info-dialog-block animate__animated animate__fadeInRight'
|
|
|
+ ref_infoDialog.value.children[i].classList.add(`animate__delay-${delay}s`)
|
|
|
+ } else {
|
|
|
+ ref_infoDialog.value.children[i].className = 'info-dialog-block animate__animated animate__fadeInLeft'
|
|
|
+ ref_infoDialog.value.children[i].classList.add(`animate__delay-${delay}s`)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ state.showInfo = true
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const toHref = (val) => {
|
|
|
+ window.open(val.href, '_blank')
|
|
|
+ }
|
|
|
+ onMounted(() => {
|
|
|
+ setInterval(() => {
|
|
|
+ const len = BgImgMapper.length - 1
|
|
|
+ if (state.bgImgIndex === len) {
|
|
|
+ state.bgImgIndex = 0
|
|
|
+ ref_screenBg.value.children[Math.abs(state.bgImgIndex - len)].classList.add('animate__fadeIn')
|
|
|
+ ref_screenBg.value.children[Math.abs(state.bgImgIndex - len)].classList.remove('animate__fadeOut')
|
|
|
+ ref_screenBg.value.children[Math.abs(len - len)].classList.add('animate__fadeOut')
|
|
|
+ ref_screenBg.value.children[Math.abs(len - len)].classList.remove('animate__fadeIn')
|
|
|
+ } else {
|
|
|
+ state.bgImgIndex++
|
|
|
+ ref_screenBg.value.children[Math.abs(state.bgImgIndex - len)].classList.add('animate__fadeIn')
|
|
|
+ ref_screenBg.value.children[Math.abs(state.bgImgIndex - len)].classList.remove('animate__fadeOut')
|
|
|
+ ref_screenBg.value.children[Math.abs(state.bgImgIndex - 1 - len)].classList.add('animate__fadeOut')
|
|
|
+ ref_screenBg.value.children[Math.abs(state.bgImgIndex - 1 - len)].classList.remove('animate__fadeIn')
|
|
|
+ }
|
|
|
+ }, 5000)
|
|
|
+ })
|
|
|
+ return {
|
|
|
+ ...toRefs(state),
|
|
|
+ BgImgMapper,
|
|
|
+ HrefMapper,
|
|
|
+ switchInfo,
|
|
|
+ ref_infoDialog,
|
|
|
+ ref_screenBg,
|
|
|
+ toHref
|
|
|
+ }
|
|
|
+ }
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .screen-main {
|
|
|
+ font-family: 微软雅黑;
|
|
|
+ line-height: 1;
|
|
|
+ text-align: justify;
|
|
|
+ // 部署start
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ // 部署end
|
|
|
+ // 本地start
|
|
|
+ //width: 3840px;
|
|
|
+ //height: 100vh;
|
|
|
+ //overflow: auto;
|
|
|
+ // 本地end
|
|
|
+ position: relative;
|
|
|
+ .screen-bg {
|
|
|
+ z-index: 1;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ >div {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-attachment: fixed;
|
|
|
+ background-position: center;
|
|
|
+ background-size: auto 100%;
|
|
|
+ animation-duration: 5s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-logo {
|
|
|
+ z-index: 2;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 1085px;
|
|
|
+ height: 147px;
|
|
|
+ background-image: url("./img/logo-bg.png");
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >img {
|
|
|
+ margin: 0 30px 0 50px;
|
|
|
+ }
|
|
|
+ .screen-logo-title {
|
|
|
+ .screen-logo-title-cn {
|
|
|
+ font-size: 51px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-bottom: 19px;
|
|
|
+ }
|
|
|
+ .screen-logo-title-en {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-info {
|
|
|
+ z-index: 2;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ color: #ffffff;
|
|
|
+ background-image: url("./img/info-bg.png");
|
|
|
+ height: 70px;
|
|
|
+ width: 1366px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .screen-info-block {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: auto;
|
|
|
+ .screen-info-label-line {
|
|
|
+ margin: 0 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 1px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ .screen-info-label {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-info-input {
|
|
|
+ margin-left: 57px;
|
|
|
+ width: 210px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 14px;
|
|
|
+ $inputBgColor: #17396F;
|
|
|
+ :deep(.el-input) {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: $inputBgColor;
|
|
|
+ border-radius: 14px;
|
|
|
+ .el-input__wrapper {
|
|
|
+ background: $inputBgColor;
|
|
|
+ box-shadow: unset;
|
|
|
+ border-radius: 14px;
|
|
|
+ .el-input__inner {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .el-input__suffix {
|
|
|
+ padding-right: 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-info-download {
|
|
|
+ width: 54px;
|
|
|
+ height: 28px;
|
|
|
+ background: #17396F;
|
|
|
+ border-radius: 14px;
|
|
|
+ display: grid;
|
|
|
+ place-items: center;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin: 0 30px 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-href {
|
|
|
+ opacity: 0.8;
|
|
|
+ width: 100%;
|
|
|
+ height: 207px;
|
|
|
+ z-index: 2;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-color: #031336;
|
|
|
+ padding: 25px 25px 25px 21px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, calc((100% - 22px * 4) / 5));
|
|
|
+ column-gap: 22px;
|
|
|
+ .screen-href-block {
|
|
|
+ width: 100%;
|
|
|
+ height: 161px;
|
|
|
+ .screen-href-block-head {
|
|
|
+ height: 45px;
|
|
|
+ background: #0C3165;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #82D6FF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ >img {
|
|
|
+ &:first-child {
|
|
|
+ margin: 0 11px 0 17px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ margin: 0 1px 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-href-block-content {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, calc((100% - 10px * 2) / 3));
|
|
|
+ gap: 10px;
|
|
|
+ .shbc-item {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #FFFFFF;
|
|
|
+ height: 48px;
|
|
|
+ background: #071F47;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >img {
|
|
|
+ margin: 0 8px 0 13px;
|
|
|
+ }
|
|
|
+ >p {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $infoItemWidth: 350px;
|
|
|
+ $infoItemActiveWidth: 1425px;
|
|
|
+ $infoItemSplit: 10px;
|
|
|
+ .info-dialog {
|
|
|
+ z-index: 2;
|
|
|
+ position: absolute;
|
|
|
+ top: 172px;
|
|
|
+ height: 674px;
|
|
|
+ display: flex;
|
|
|
+ left: calc((100% - #{$infoItemWidth * 5} - #{$infoItemActiveWidth} - #{$infoItemSplit * 5}) / 2);
|
|
|
+ >div {
|
|
|
+ margin-right: 10px;
|
|
|
+ animation-duration: 2s;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-item-active {
|
|
|
+ width: 1425px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .info-item {
|
|
|
+ width: 350px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 18px 20px 24px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ >img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .info-item-label {
|
|
|
+ margin-top: 26px;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: bolder;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .info-item-en-label {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #959595;
|
|
|
+ }
|
|
|
+ .info-item-line {
|
|
|
+ width: 49px;
|
|
|
+ height: 4px;
|
|
|
+ background: #4381FE;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ .info-item-remark {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: normal;
|
|
|
+ line-height: 28px;
|
|
|
+ color: #959595;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 4;
|
|
|
+ -webkit-box-orient: vertical; //垂直排列
|
|
|
+ }
|
|
|
+ .info-item-button {
|
|
|
+ height: 34px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: auto;
|
|
|
+ margin-left: auto;
|
|
|
+ padding: 0 14px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid rgba(67, 129, 254, 0.5);
|
|
|
+ border-radius: 17px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #959595;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: #4381fe;
|
|
|
+ .info-item-label {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .info-item-en-label {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .info-item-line {
|
|
|
+ background-color: rgba(255, 255, 255, 0.5);
|
|
|
+ }
|
|
|
+ .info-item-remark {
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ .info-item-button {
|
|
|
+ background: rgba(255, 255, 255, 0.5);
|
|
|
+ border-color: #4381FE;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
CzRger
