|
|
@@ -1,5 +1,65 @@
|
|
|
<template>
|
|
|
-啊沙发沙发
|
|
|
+ <div class="screen-main">
|
|
|
+ <div class="screen-bg" ref="ref_screenBg">
|
|
|
+ <template v-for="(item, index) in BgImgMapper">
|
|
|
+ <div :style="`background-image: url(${item});`" class="animate__animated"/>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="screen-logo">
|
|
|
+ <img src="./img/logo.png"/>
|
|
|
+ </div>
|
|
|
+ <div class="screen-info">
|
|
|
+ <template v-for="(item, index) in InfoMapper">
|
|
|
+ <div v-if="index > 0" class="screen-info-label-line"></div>
|
|
|
+ <div class="screen-info-label" @click="switchInfo(index)">{{item.label}}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="screen-href">
|
|
|
+ <template v-for="(item, index) in HrefMapper">
|
|
|
+ <div class="screen-href-block">
|
|
|
+ <div class="screen-href-block-head">
|
|
|
+ <img/>{{item.label}}<img/>
|
|
|
+ </div>
|
|
|
+ <div class="screen-href-block-content">
|
|
|
+ <template v-for="(h, hI) in item.children">
|
|
|
+ <div class="shbc-item">
|
|
|
+ <img/>{{h.label}}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div v-show="showInfo" class="info-dialog" ref="ref_infoDialog">
|
|
|
+ <template v-for="(item, index) in InfoMapper">
|
|
|
+ <div class="info-dialog-block animate__animated">
|
|
|
+ <template v-if="infoIndex === index">
|
|
|
+ <div class="info-item-active animate__animated">
|
|
|
+ <img :src="item.mainImg"/>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="info-item animate__animated">
|
|
|
+ <img :src="item.subImg"/>
|
|
|
+ <div class="info-item-label">
|
|
|
+ {{item.label}}
|
|
|
+ </div>
|
|
|
+ <div class="info-item-en-label">
|
|
|
+ {{item.enLabel}}
|
|
|
+ </div>
|
|
|
+ <div class="info-item-line"/>
|
|
|
+ <div class="info-item-en-remark">
|
|
|
+ {{item.remark}}
|
|
|
+ </div>
|
|
|
+ <div class="info-item-button" @click="switchInfo(index)">
|
|
|
+ 查看详情+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts">
|
|
|
@@ -16,6 +76,13 @@ import {
|
|
|
getCurrentInstance
|
|
|
} from 'vue'
|
|
|
import {useStore} from 'vuex'
|
|
|
+import BgImg1 from './img/bg-img-1.jpg'
|
|
|
+import BgImg2 from './img/bg-img-2.png'
|
|
|
+import BgImg3 from './img/bg-img-3.png'
|
|
|
+import BgImg4 from './img/bg-img-4.jpg'
|
|
|
+import InfoSub1 from './img/info-sub-1.png'
|
|
|
+import InfoMain1 from './img/info-main-1.png'
|
|
|
+import InfoMain2 from './img/info-main-2.png'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'App',
|
|
|
@@ -23,14 +90,231 @@ export default defineComponent({
|
|
|
setup() {
|
|
|
const store = useStore()
|
|
|
const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
|
|
|
+ const BgImgMapper = [BgImg1, BgImg2, BgImg3, BgImg4]
|
|
|
+ const HrefMapper = window.cusConfig?.screenHref
|
|
|
+ const ref_infoDialog = ref(null)
|
|
|
+ const ref_screenBg = ref(null)
|
|
|
const state = reactive({
|
|
|
+ bgImgIndex: 0,
|
|
|
+ showInfo: false,
|
|
|
+ infoIndex: 0,
|
|
|
+ InfoMapper: [
|
|
|
+ {
|
|
|
+ label: '平台简介',
|
|
|
+ enLabel: 'Pagsasgg Fgasgas',
|
|
|
+ remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ subImg: InfoSub1,
|
|
|
+ mainImg: InfoMain1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '领导关怀',
|
|
|
+ enLabel: 'Pagsasgg Fgasgas',
|
|
|
+ remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ subImg: InfoSub1,
|
|
|
+ mainImg: InfoMain2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '组织架构',
|
|
|
+ enLabel: 'Pagsasgg Fgasgas',
|
|
|
+ remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ subImg: InfoSub1,
|
|
|
+ mainImg: InfoMain1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '总体规划',
|
|
|
+ enLabel: 'Pagsasgg Fgasgas',
|
|
|
+ remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ subImg: InfoSub1,
|
|
|
+ mainImg: InfoMain2,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '大厅职能',
|
|
|
+ enLabel: 'Pagsasgg Fgasgas',
|
|
|
+ remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ subImg: InfoSub1,
|
|
|
+ mainImg: InfoMain1,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '成果展示',
|
|
|
+ enLabel: 'Pagsasgg Fgasgas',
|
|
|
+ remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ subImg: InfoSub1,
|
|
|
+ mainImg: InfoMain2,
|
|
|
+ },
|
|
|
+ ]
|
|
|
});
|
|
|
+ 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
|
|
|
+ })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ 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
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ .screen-main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ 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;
|
|
|
+ animation-duration: 5s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-logo {
|
|
|
+ z-index: 2;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .screen-info {
|
|
|
+ z-index: 2;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ color: #ffffff;
|
|
|
+ background-color: black;
|
|
|
+ height: 70px;
|
|
|
+ width: 1374px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .screen-info-label-line {
|
|
|
+ margin: 0 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ width: 1px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ .screen-info-label {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screen-href {
|
|
|
+ opacity: 0.8;
|
|
|
+ width: 100%;
|
|
|
+ height: 207px;
|
|
|
+ z-index: 2;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ background-image: url("./img/bottom-bg.png");
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ .screen-href-block {
|
|
|
+ width: calc((100% - 140px) / 5);
|
|
|
+ height: 161px;
|
|
|
+ .screen-href-block-head {
|
|
|
+ color: #82d6ff;
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+ .screen-href-block-content {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, auto);
|
|
|
+ .shbc-item {
|
|
|
+ color: #ffffff;
|
|
|
+ height: 45px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-dialog {
|
|
|
+ z-index: 2;
|
|
|
+ position: absolute;
|
|
|
+ top: 200px;
|
|
|
+ width: 100%;
|
|
|
+ height: 674px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ >div {
|
|
|
+ margin: 0 5px;
|
|
|
+ animation-duration: 2s;
|
|
|
+ }
|
|
|
+ .info-item-active {
|
|
|
+ width: 1425px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .info-item {
|
|
|
+ width: 350px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ >img {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .info-item-label {
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: bolder;
|
|
|
+ }
|
|
|
+ .info-item-en-label {}
|
|
|
+ .info-item-line {
|
|
|
+ width: 100px;
|
|
|
+ height: 20px;
|
|
|
+ background-color: #d50a91;
|
|
|
+ }
|
|
|
+ .info-item-remark {}
|
|
|
+ .info-item-button {
|
|
|
+ margin-left: auto;
|
|
|
+ border: 1px solid #1a1a1a;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
caozhaorui
