单屏基础

src/views/pc/index.vue

@@ -1,6 +1,57 @@
 <template>
   <div class="pc-main">
-
+    <div class="pc-bg" ref="ref_pcBg" @click="showInfo = false, infoCurrent = ''">
+      <template v-for="(item, index) in BgImgMapper">
+        <div :style="`background-image: url(${item});`" class="animate__animated"/>
+      </template>
+    </div>
+    <div class="pc-logo">
+      <img src="../common/img/logo-icon.png"/>
+      <div class="pc-logo-title">
+        <div class="pc-logo-title-cn">
+          海南社会管理信息化平台
+        </div>
+        <div class="pc-logo-title-en">
+          HAINAN Social management information platform
+        </div>
+      </div>
+    </div>
+    <div class="pc-info">
+      <div class="pc-info-block">
+        <template v-for="(item, index) in InfoMapper">
+          <div v-if="index > 0" class="pc-info-label-line"></div>
+          <div class="pc-info-label __hover" @click="item.href ? toHref(item) : switchInfo(item.mainImg)">{{item.label}}</div>
+        </template>
+      </div>
+      <div class="pc-info-input">
+        <el-input v-model="infoInput">
+          <template #suffix>
+            <img src="../common/img/info-input-img.png" class="__hover"/>
+          </template>
+        </el-input>
+      </div>
+      <div class="pc-info-download __hover">下载</div>
+    </div>
+    <div class="pc-href">
+      <div class="pc-href-before-block"/>
+      <template v-for="(item, index) in HrefMapper">
+        <div class="pc-href-block">
+          <div class="pc-href-block-head">
+            <img src="../common/img/bottom-label.png"/>{{item.label}}<img src="../common/img/bottom-icon.png"/>
+          </div>
+          <div class="pc-href-block-content">
+            <template v-for="(h, hI) in item.children">
+              <div class="phbc-item __hover" @click="toHref(h)">
+                <img src="../common/img/bottom-item-label.png"/><p>{{h.label}}</p>
+              </div>
+            </template>
+          </div>
+        </div>
+      </template>
+    </div>
+    <div v-show="showInfo" class="info-dialog animate__animated animate__fadeInRight" ref="ref_infoDialog">
+      <img :src="infoCurrent"/>
+    </div>
   </div>
 </template>
 
@@ -17,120 +68,57 @@ import {
   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'
+import {bgImgMapper, infoMapper} from '../common/static'
 
 export default defineComponent({
   name: 'App',
   components: {},
   setup() {
-    const store = useStore()
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const BgImgMapper = [BgImg1, BgImg2, BgImg3]
+    const BgImgMapper = bgImgMapper
     const HrefMapper = window.cusConfig[window.cusConfig.version].screenHref
+    const ref_infoDialog = ref(null)
+    const ref_pcBg = ref(null)
     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'
-        },
-      ],
+      infoCurrent: '',
+      InfoMapper: infoMapper,
       infoInput: ''
     });
-    const switchInfo = (ind) => {
-      if (ind === state.infoIndex) {
+
+    const toHref = (val: { href: string | URL | undefined }) => {
+      window.open(val.href, '_blank')
+    }
+
+    const switchInfo = (img) => {
+      if (img === state.infoCurrent) {
         return
       }
       nextTick(() => {
+        state.infoCurrent = img
         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')
+          ref_pcBg.value.children[Math.abs(state.bgImgIndex - len)].classList.add('animate__fadeIn')
+          ref_pcBg.value.children[Math.abs(state.bgImgIndex - len)].classList.remove('animate__fadeOut')
+          ref_pcBg.value.children[Math.abs(len - len)].classList.add('animate__fadeOut')
+          ref_pcBg.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')
+          ref_pcBg.value.children[Math.abs(state.bgImgIndex - len)].classList.add('animate__fadeIn')
+          ref_pcBg.value.children[Math.abs(state.bgImgIndex - len)].classList.remove('animate__fadeOut')
+          ref_pcBg.value.children[Math.abs(state.bgImgIndex - 1 - len)].classList.add('animate__fadeOut')
+          ref_pcBg.value.children[Math.abs(state.bgImgIndex - 1 - len)].classList.remove('animate__fadeIn')
         }
       }, 5000)
     })
@@ -138,31 +126,24 @@ export default defineComponent({
       ...toRefs(state),
       BgImgMapper,
       HrefMapper,
-      switchInfo,
+      ref_pcBg,
       ref_infoDialog,
-      ref_screenBg,
-      toHref
+      toHref,
+      switchInfo
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
-  .screen-main {
+  .pc-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 {
+    .pc-bg {
       z-index: 1;
       position: relative;
       width: 100%;
@@ -178,61 +159,61 @@ export default defineComponent({
         animation-duration: 5s;
       }
     }
-    .screen-logo {
+    .pc-logo {
       z-index: 2;
       position: absolute;
       top: 0;
       left: 0;
       width: 1085px;
       height: 147px;
-      background-image: url("./img/logo-bg.png");
+      background-image: url("../common/img/logo-bg.png");
       display: flex;
       align-items: center;
       >img {
         margin: 0 30px 0 50px;
       }
-      .screen-logo-title {
-        .screen-logo-title-cn {
+      .pc-logo-title {
+        .pc-logo-title-cn {
           font-size: 51px;
           font-weight: bold;
           color: #FFFFFF;
           margin-bottom: 19px;
         }
-        .screen-logo-title-en {
+        .pc-logo-title-en {
           font-size: 14px;
           font-weight: 400;
           color: #FFFFFF;
         }
       }
     }
-    .screen-info {
+    .pc-info {
       z-index: 2;
       position: absolute;
       right: 0;
       top: 0;
       color: #ffffff;
-      background-image: url("./img/info-bg.png");
+      background-image: url("../common/img/info-bg.png");
       height: 70px;
       width: 1366px;
       display: flex;
       align-items: center;
-      .screen-info-block {
+      .pc-info-block {
         display: flex;
         align-items: center;
         margin-left: auto;
-        .screen-info-label-line {
+        .pc-info-label-line {
           margin: 0 20px;
           background-color: #ffffff;
           width: 1px;
           height: 20px;
         }
-        .screen-info-label {
+        .pc-info-label {
           font-size: 20px;
           font-weight: 400;
           color: #FFFFFF;
         }
       }
-      .screen-info-input {
+      .pc-info-input {
         margin-left: 57px;
         width: 210px;
         height: 28px;
@@ -256,7 +237,7 @@ export default defineComponent({
           }
         }
       }
-      .screen-info-download {
+      .pc-info-download {
         width: 54px;
         height: 28px;
         background: #17396F;
@@ -269,27 +250,44 @@ export default defineComponent({
         margin: 0 30px 0 10px;
       }
     }
-    .screen-href {
-      opacity: 0.8;
-      width: 100%;
-      height: 207px;
+    .pc-href {
+      //opacity: 0.8;
       z-index: 2;
       position: absolute;
       bottom: 0;
-      left: 0;
-      background-color: #031336;
-      padding: 25px 25px 25px 21px;
+      right: 110px;
       box-sizing: border-box;
       display: grid;
       grid-template-columns: repeat(5, calc((100% - 22px * 4) / 5));
       column-gap: 22px;
-      .screen-href-block {
+      $skewXDeg: -30deg;
+      transform: skewX($skewXDeg);
+      .pc-href-before-block {
+        position: absolute;
+        background-color: #395587;
+        width: 80px;
+        height: 280px;
+        left: -80px;
+        bottom: 0;
+      }
+      .pc-href-block {
         width: 100%;
-        height: 161px;
-        .screen-href-block-head {
+        .pc-href-block-head {
+          position: relative;
+          transform: skewX(-$skewXDeg);
+          &:after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background: #0C3165;
+            z-index: -1;
+            transform: skewX($skewXDeg);
+          }
           height: 45px;
-          background: #0C3165;
-          font-size: 28px;
+          font-size: 16px;
           font-weight: 400;
           color: #82D6FF;
           display: flex;
@@ -304,16 +302,30 @@ export default defineComponent({
             }
           }
         }
-        .screen-href-block-content {
+        .pc-href-block-content {
+          background-color: #031336;
+          padding: 20px;
           display: grid;
-          grid-template-columns: repeat(3, calc((100% - 10px * 2) / 3));
-          gap: 10px;
-          .shbc-item {
-            font-size: 20px;
+          grid-template-columns: repeat(1, 100%);
+          row-gap: 10px;
+          .phbc-item {
+            position: relative;
+            transform: skewX(-$skewXDeg);
+            &:after {
+              content: '';
+              position: absolute;
+              top: 0;
+              bottom: 0;
+              left: 0;
+              right: 0;
+              background: #071F47;
+              z-index: -1;
+              transform: skewX($skewXDeg);
+            }
+            font-size: 16px;
             font-weight: normal;
             color: #FFFFFF;
             height: 48px;
-            background: #071F47;
             display: flex;
             align-items: center;
             >img {
@@ -328,104 +340,16 @@ export default defineComponent({
         }
       }
     }
-    $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;
-          }
-        }
-      }
+      left: calc((100% - #{$infoItemActiveWidth}) / 2);
+      width: $infoItemActiveWidth;
+      animation-duration: 2s;
     }
   }
 </style>