|
|
@@ -1,12 +1,12 @@
|
|
|
<template>
|
|
|
<div class="screen-main">
|
|
|
- <div class="screen-bg" ref="ref_screenBg">
|
|
|
+ <div class="screen-bg" ref="ref_screenBg" @click="showInfo = false, infoIndex = -1">
|
|
|
<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/bg-img-1.jpg"/>
|
|
|
+ <img src="./img/logo-icon.png"/>
|
|
|
<div class="screen-logo-title">
|
|
|
<div class="screen-logo-title-cn">
|
|
|
海南社会管理信息化平台
|
|
|
@@ -20,7 +20,7 @@
|
|
|
<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>
|
|
|
+ <div class="screen-info-label __hover" @click="item.href ? toHref(item) : switchInfo(index)">{{item.label}}</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="screen-info-input">
|
|
|
@@ -69,7 +69,7 @@
|
|
|
<div class="info-item-remark">
|
|
|
{{item.remark}}
|
|
|
</div>
|
|
|
- <div class="info-item-button __hover" @click="switchInfo(index)">
|
|
|
+ <div class="info-item-button __hover" @click="item.href ? toHref(item) : switchInfo(index)">
|
|
|
查看详情+
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -103,12 +103,11 @@ 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 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'
|
|
|
-import InfoMain6 from './img/info-main-2.jpg'
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'App',
|
|
|
@@ -127,45 +126,45 @@ export default defineComponent({
|
|
|
InfoMapper: [
|
|
|
{
|
|
|
label: '平台简介',
|
|
|
- enLabel: 'Pagsasgg Fgasgas',
|
|
|
- remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ enLabel: 'Platform Introduction',
|
|
|
+ remark: '海南社管平台按照“全省一盘棋、全岛同城化”理念，聚焦“二线高效管住””自贸港风险防控“等核心业务需求...',
|
|
|
subImg: InfoSub1,
|
|
|
mainImg: InfoMain1,
|
|
|
},
|
|
|
{
|
|
|
label: '领导关怀',
|
|
|
- enLabel: 'Pagsasgg Fgasgas',
|
|
|
- remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ enLabel: "Leader's Care",
|
|
|
+ remark: '中央、海南省委省政府对社管平台的建设高度重视，相关领导多次到社管平台调研指导工作，并作出一系列重要批示。',
|
|
|
subImg: InfoSub2,
|
|
|
mainImg: InfoMain2,
|
|
|
},
|
|
|
{
|
|
|
label: '组织架构',
|
|
|
- enLabel: 'Pagsasgg Fgasgas',
|
|
|
- remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ enLabel: 'Organization Structure',
|
|
|
+ remark: '中央、海南省委省政府对社管平台的建设高度重视，相关领导多次到社管平台调研指导工作，并作出一系列重要批示。',
|
|
|
subImg: InfoSub3,
|
|
|
mainImg: InfoMain3,
|
|
|
},
|
|
|
{
|
|
|
label: '总体规划',
|
|
|
- enLabel: 'Pagsasgg Fgasgas',
|
|
|
- remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ enLabel: 'Master Planning',
|
|
|
+ remark: '根据顶层设计文件要求，社管平台按照“强化共用、整合通用、开放应用”的架构理念，打造“1551”社会管理业务架构体系...',
|
|
|
subImg: InfoSub4,
|
|
|
mainImg: InfoMain4,
|
|
|
},
|
|
|
{
|
|
|
label: '大厅职能',
|
|
|
- enLabel: 'Pagsasgg Fgasgas',
|
|
|
- remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ enLabel: 'Hall Functions',
|
|
|
+ remark: '社管平台联勤联动工作在建设领导小组统一领导下，由指挥中心负责，联勤协调处指挥调度，情指行组具体落实。',
|
|
|
subImg: InfoSub5,
|
|
|
mainImg: InfoMain5,
|
|
|
},
|
|
|
{
|
|
|
label: '成果展示',
|
|
|
- enLabel: 'Pagsasgg Fgasgas',
|
|
|
- remark: '撒法啊啊啊啊阿斯弗，啊沙发沙发，阿斯弗案说法，是否， 阿斯弗，阿斯弗， 阿萨，发啊，是否， 啊，撒发顺丰，啊，是否，阿斯弗， 阿萨，发，',
|
|
|
+ enLabel: 'Achievement-Exhibition',
|
|
|
+ remark: '近年来，平台通过船舶管控系统精准预警重点海域和重要时段涉海信息，配合海南海警局、海岸警察总队等部门破获了系列重大案件...',
|
|
|
subImg: InfoSub6,
|
|
|
- mainImg: InfoMain6,
|
|
|
+ href: 'http://www.baidu.com'
|
|
|
},
|
|
|
],
|
|
|
infoInput: ''
|
|
|
@@ -268,8 +267,6 @@ export default defineComponent({
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
>img {
|
|
|
- width: 85px;
|
|
|
- height: 86px;
|
|
|
margin: 0 30px 0 50px;
|
|
|
}
|
|
|
.screen-logo-title {
|
|
|
@@ -404,17 +401,22 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ $infoItemWidth: 350px;
|
|
|
+ $infoItemActiveWidth: 1425px;
|
|
|
+ $infoItemSplit: 10px;
|
|
|
.info-dialog {
|
|
|
z-index: 2;
|
|
|
position: absolute;
|
|
|
top: 172px;
|
|
|
- width: 100%;
|
|
|
height: 674px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ left: calc((100% - #{$infoItemWidth * 5} - #{$infoItemActiveWidth} - #{$infoItemSplit * 5}) / 2);
|
|
|
>div {
|
|
|
- margin: 0 5px;
|
|
|
+ margin-right: 10px;
|
|
|
animation-duration: 2s;
|
|
|
+ &:last-child {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
.info-item-active {
|
|
|
width: 1425px;
|
|
|
@@ -453,6 +455,7 @@ export default defineComponent({
|
|
|
margin-top: 20px;
|
|
|
font-size: 20px;
|
|
|
font-weight: normal;
|
|
|
+ line-height: 28px;
|
|
|
color: #959595;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
caozhaorui
