|
|
@@ -6,24 +6,42 @@
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="screen-logo">
|
|
|
- <img src="./img/logo.png"/>
|
|
|
+ <img src="./img/bg-img-1.jpg"/>
|
|
|
+ <div class="screen-logo-title">
|
|
|
+ <div class="screen-logo-title-cn">
|
|
|
+ 海南社会管理信息化平台
|
|
|
+ </div>
|
|
|
+ <div class="screen-logo-title-en">
|
|
|
+ HAINAN Social management information platform
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</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 class="screen-info-block">
|
|
|
+ <template v-for="(item, index) in InfoMapper">
|
|
|
+ <div v-if="index > 0" class="screen-info-label-line"></div>
|
|
|
+ <div class="screen-info-label __hover" @click="switchInfo(index)">{{item.label}}</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="screen-info-input">
|
|
|
+ <el-input v-model="infoInput">
|
|
|
+ <template #suffix>
|
|
|
+ <img src="./img/info-input-img.png" class="__hover"/>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="screen-info-download __hover">下载</div>
|
|
|
</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/>
|
|
|
+ <img src="./img/bottom-label.png"/>{{item.label}}<img src="./img/bottom-icon.png"/>
|
|
|
</div>
|
|
|
<div class="screen-href-block-content">
|
|
|
<template v-for="(h, hI) in item.children">
|
|
|
- <div class="shbc-item">
|
|
|
- <img/>{{h.label}}
|
|
|
+ <div class="shbc-item __hover">
|
|
|
+ <img src="./img/bottom-item-label.png"/>{{h.label}}
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -48,10 +66,10 @@
|
|
|
{{item.enLabel}}
|
|
|
</div>
|
|
|
<div class="info-item-line"/>
|
|
|
- <div class="info-item-en-remark">
|
|
|
+ <div class="info-item-remark">
|
|
|
{{item.remark}}
|
|
|
</div>
|
|
|
- <div class="info-item-button" @click="switchInfo(index)">
|
|
|
+ <div class="info-item-button __hover" @click="switchInfo(index)">
|
|
|
查看详情+
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -77,12 +95,20 @@ import {
|
|
|
} 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 BgImg2 from './img/bg-img-2.jpg'
|
|
|
+import BgImg3 from './img/bg-img-3.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'
|
|
|
+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-2.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'
|
|
|
+import InfoMain6 from './img/info-main-2.jpg'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'App',
|
|
|
@@ -90,14 +116,14 @@ 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 BgImgMapper = [BgImg1, BgImg2, BgImg3]
|
|
|
+ const HrefMapper = window.cusConfig[window.cusConfig.version].screenHref
|
|
|
const ref_infoDialog = ref(null)
|
|
|
const ref_screenBg = ref(null)
|
|
|
const state = reactive({
|
|
|
bgImgIndex: 0,
|
|
|
showInfo: false,
|
|
|
- infoIndex: 0,
|
|
|
+ infoIndex: -1,
|
|
|
InfoMapper: [
|
|
|
{
|
|
|
label: '平台简介',
|
|
|
@@ -110,38 +136,39 @@ export default defineComponent({
|
|
|
label: '领导关怀',
|
|
|
enLabel: 'Pagsasgg Fgasgas',
|
|
|
remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
- subImg: InfoSub1,
|
|
|
+ subImg: InfoSub2,
|
|
|
mainImg: InfoMain2,
|
|
|
},
|
|
|
{
|
|
|
label: '组织架构',
|
|
|
enLabel: 'Pagsasgg Fgasgas',
|
|
|
remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
- subImg: InfoSub1,
|
|
|
- mainImg: InfoMain1,
|
|
|
+ subImg: InfoSub3,
|
|
|
+ mainImg: InfoMain3,
|
|
|
},
|
|
|
{
|
|
|
label: '总体规划',
|
|
|
enLabel: 'Pagsasgg Fgasgas',
|
|
|
remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
- subImg: InfoSub1,
|
|
|
- mainImg: InfoMain2,
|
|
|
+ subImg: InfoSub4,
|
|
|
+ mainImg: InfoMain4,
|
|
|
},
|
|
|
{
|
|
|
label: '大厅职能',
|
|
|
enLabel: 'Pagsasgg Fgasgas',
|
|
|
remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
- subImg: InfoSub1,
|
|
|
- mainImg: InfoMain1,
|
|
|
+ subImg: InfoSub5,
|
|
|
+ mainImg: InfoMain5,
|
|
|
},
|
|
|
{
|
|
|
label: '成果展示',
|
|
|
enLabel: 'Pagsasgg Fgasgas',
|
|
|
remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
- subImg: InfoSub1,
|
|
|
- mainImg: InfoMain2,
|
|
|
+ subImg: InfoSub6,
|
|
|
+ mainImg: InfoMain6,
|
|
|
},
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ infoInput: ''
|
|
|
});
|
|
|
const switchInfo = (ind) => {
|
|
|
if (ind === state.infoIndex) {
|
|
|
@@ -197,8 +224,18 @@ export default defineComponent({
|
|
|
|
|
|
<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;
|
|
|
@@ -212,6 +249,7 @@ export default defineComponent({
|
|
|
background-repeat: no-repeat;
|
|
|
background-attachment: fixed;
|
|
|
background-position: center;
|
|
|
+ background-size: auto 100%;
|
|
|
animation-duration: 5s;
|
|
|
}
|
|
|
}
|
|
|
@@ -220,6 +258,29 @@ export default defineComponent({
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
+ width: 1085px;
|
|
|
+ height: 147px;
|
|
|
+ background-image: url("./img/logo-bg.png");
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >img {
|
|
|
+ width: 85px;
|
|
|
+ height: 86px;
|
|
|
+ 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;
|
|
|
@@ -227,18 +288,62 @@ export default defineComponent({
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
color: #ffffff;
|
|
|
- background-color: black;
|
|
|
+ background-image: url("./img/info-bg.png");
|
|
|
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-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-label {
|
|
|
+ .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 {
|
|
|
@@ -249,23 +354,48 @@ export default defineComponent({
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
- background-image: url("./img/bottom-bg.png");
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
+ background-color: #031336;
|
|
|
+ padding: 25px 25px 25px 21px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(5, auto);
|
|
|
+ column-gap: 22px;
|
|
|
.screen-href-block {
|
|
|
- width: calc((100% - 140px) / 5);
|
|
|
+ width: 100%;
|
|
|
height: 161px;
|
|
|
.screen-href-block-head {
|
|
|
- color: #82d6ff;
|
|
|
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, auto);
|
|
|
+ gap: 10px;
|
|
|
.shbc-item {
|
|
|
- color: #ffffff;
|
|
|
- height: 45px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #FFFFFF;
|
|
|
+ height: 48px;
|
|
|
+ background: #071F47;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >img {
|
|
|
+ margin: 0 8px 0 13px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -273,7 +403,7 @@ export default defineComponent({
|
|
|
.info-dialog {
|
|
|
z-index: 2;
|
|
|
position: absolute;
|
|
|
- top: 200px;
|
|
|
+ top: 172px;
|
|
|
width: 100%;
|
|
|
height: 674px;
|
|
|
display: flex;
|
|
|
@@ -290,7 +420,7 @@ export default defineComponent({
|
|
|
width: 350px;
|
|
|
height: 100%;
|
|
|
background-color: #ffffff;
|
|
|
- padding: 20px;
|
|
|
+ padding: 18px 20px 24px;
|
|
|
box-sizing: border-box;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -298,21 +428,68 @@ export default defineComponent({
|
|
|
width: 100%;
|
|
|
}
|
|
|
.info-item-label {
|
|
|
- font-size: 32px;
|
|
|
+ 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-en-label {}
|
|
|
.info-item-line {
|
|
|
- width: 100px;
|
|
|
- height: 20px;
|
|
|
- background-color: #d50a91;
|
|
|
+ width: 49px;
|
|
|
+ height: 4px;
|
|
|
+ background: #4381FE;
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ .info-item-remark {
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #959595;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 4;
|
|
|
+ -webkit-box-orient: vertical; //垂直排列
|
|
|
}
|
|
|
- .info-item-remark {}
|
|
|
.info-item-button {
|
|
|
+ height: 34px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: auto;
|
|
|
margin-left: auto;
|
|
|
- border: 1px solid #1a1a1a;
|
|
|
- padding: 5px 10px;
|
|
|
- border-radius: 20px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
caozhaorui
