领导关怀放大测试

src/views/common/static.ts

@@ -15,6 +15,16 @@ import InfoMain4 from './img/info-main-4.png'
 import InfoMain5 from './img/info-main-5.png'
 import LogoIcon from './img/logo-icon.png'
 import LogoIconZwww from './img/logo-icon_zwww.png'
+import LdghSon1 from './img/ldgh-son_1.png'
+import LdghSon2 from './img/info-sub-1.png'
+import LdghSon3 from './img/info-sub-2.png'
+import LdghSon4 from './img/info-sub-3.png'
+import LdghSon5 from './img/info-sub-4.png'
+import LdghSon6 from './img/info-sub-5.png'
+import LdghSon7 from './img/info-sub-5.png'
+import LdghSon8 from './img/ldgh-son_1.png'
+import LdghSon9 from './img/ldgh-son_1.png'
+import LdghSon10 from './img/ldgh-son_1.png'
 import store from '@/store/index'
 
 export const logoIcon = window?.cusConfig?.version === 'zwww' ? LogoIconZwww : LogoIcon
@@ -37,6 +47,10 @@ export const infoMapper = [
     remark: '中央、海南省委省政府对社管平台的建设高度重视，相关领导多次到社管平台调研指导工作，并作出一系列重要批示。',
     subImg: InfoSub2,
     mainImg: InfoMain2,
+    ldghSonImg: [
+      LdghSon1, LdghSon2, LdghSon3, LdghSon4, LdghSon5,
+      LdghSon6, LdghSon7, LdghSon8, LdghSon9, LdghSon10,
+    ]
   },
   {
     label: '职能定位',

src/views/pc/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pc-main">
-    <div class="pc-bg" ref="ref_pcBg" @click="showInfo = false, infoCurrent = ''">
+    <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>
@@ -20,7 +20,7 @@
       <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>
+          <div class="pc-info-label __hover" @click="item.href ? toHref(item) : switchInfo(item)">{{item.label}}</div>
         </template>
       </div>
 <!--      <div class="pc-info-input">-->
@@ -49,7 +49,22 @@
       </template>
     </div>
     <div v-show="showInfo" class="info-dialog animate__animated animate__fadeInRight" ref="ref_infoDialog">
-      <img :src="infoCurrent"/>
+      <img :src="infoCurrent?.mainImg"/>
+      <div class="ldgh-son" v-if="infoCurrent?.ldghSonImg">
+        <template v-for="(s, sI) in infoCurrent.ldghSonImg">
+          <div class="ldgh-son-item">
+            <el-image
+                :src="s"
+                :zoom-rate="1.2"
+                :initial-index="sI"
+                :preview-src-list="infoCurrent.ldghSonImg"
+                fit="cover"
+                :preview-teleported="true"
+                :hide-on-click-modal="true"
+            />
+          </div>
+        </template>
+      </div>
     </div>
   </div>
 </template>
@@ -81,7 +96,7 @@ export default defineComponent({
     const state = reactive({
       bgImgIndex: 0,
       showInfo: false,
-      infoCurrent: '',
+      infoCurrent: <any>{},
       InfoMapper: infoMapper,
       infoInput: '',
       LogoIcon: logoIcon,
@@ -93,12 +108,12 @@ export default defineComponent({
       window.open(val.href, '_blank')
     }
 
-    const switchInfo = (img) => {
-      if (img === state.infoCurrent) {
+    const switchInfo = (item: any) => {
+      if (item.mainImg === state.infoCurrent.mainImg) {
         return
       }
       nextTick(() => {
-        state.infoCurrent = img
+        state.infoCurrent = item
         state.showInfo = false
         setTimeout(() => {
           state.showInfo = true
@@ -337,6 +352,28 @@ export default defineComponent({
       >img {
         width: 100%;
       }
+      .ldgh-son {
+        position: absolute;
+        top: 174px;
+        left: 104px;
+        width: 1206px;
+        height: 344px;
+        //border: 1px solid #000000;
+        display: grid;
+        grid-template-rows: repeat(2, 94px);
+        grid-template-columns: repeat(5, 194px);
+        row-gap: 158px;
+        column-gap: 60px;
+        .ldgh-son-item {
+          //border: 1px solid #000000;
+          cursor: pointer;
+          .el-image {
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+          }
+        }
+      }
     }
   }
 </style>

src/views/screen/index.vue

@@ -54,6 +54,21 @@
           <template v-if="infoIndex === index">
             <div class="info-item-active animate__animated">
               <img :src="item.mainImg"/>
+              <div class="ldgh-son" v-if="item?.ldghSonImg">
+                <template v-for="(s, sI) in item.ldghSonImg">
+                  <div class="ldgh-son-item">
+                    <el-image
+                        :src="s"
+                        :zoom-rate="1.2"
+                        :initial-index="sI"
+                        :preview-src-list="item.ldghSonImg"
+                        fit="cover"
+                        :preview-teleported="true"
+                        :hide-on-click-modal="true"
+                    />
+                  </div>
+                </template>
+              </div>
             </div>
           </template>
           <template v-else>
@@ -373,9 +388,32 @@ export default defineComponent({
       .info-item-active {
         width: 1425px;
         height: 100%;
+        position: relative;
         >img {
           width: 100%;
         }
+        .ldgh-son {
+          position: absolute;
+          top: 174px;
+          left: 104px;
+          width: 1206px;
+          height: 344px;
+          //border: 1px solid #000000;
+          display: grid;
+          grid-template-rows: repeat(2, 94px);
+          grid-template-columns: repeat(5, 194px);
+          row-gap: 158px;
+          column-gap: 60px;
+          .ldgh-son-item {
+            //border: 1px solid #000000;
+            cursor: pointer;
+            .el-image {
+              width: 100%;
+              height: 100%;
+              opacity: 0;
+            }
+          }
+        }
       }
       .info-item {
         width: 350px;