领导关怀适配高度调整

src/store/modules/dialog.js

@@ -4,6 +4,7 @@ export default {
     garden: false, // 种都移风-产业园
     talents: false, // 种都移风-专家墙
     qyjj:false, // 种都移风-企业简介
+    ldgh:false, // 种都移风-领导关怀
   },
   mutations: {
     set_yfcj(state, visible) {
@@ -17,7 +18,10 @@ export default {
     },
     set_qyjj(state, visible) {
       state.qyjj = visible
-    }
+    },
+    set_ldgh(state, visible) {
+      state.ldgh = visible
+    },
   },
   actions: {
     SET_YFCJ(context, visible) {
@@ -32,12 +36,16 @@ export default {
     SET_QYJJ(context, visible){
       context.commit('set_qyjj', visible)
     },
+    SET_LDGH(context, visible){
+      context.commit('set_ldgh', visible)
+    },
     // 确保当前只能显示最近点击的弹窗
     showGlobalDialog(context, type) {
       context.commit('set_yfcj', false)
       context.commit('set_garden', false)
       context.commit('set_talents', false)
       context.commit('set_qyjj', false)
+      context.commit('set_ldgh', false)
       if (type === 'buildLeaderAttach') {
         context.commit('set_yfcj', true)
       } else if (type === 'garden') {
@@ -46,6 +54,8 @@ export default {
         context.commit('set_talents', true)
       }else if (type === 'qyjj') {
         context.commit('set_qyjj', true)
+      }else if (type === 'ldgh') {
+        context.commit('set_ldgh', true)
       }
     }
   },
@@ -53,6 +63,7 @@ export default {
     yfcj: state => state.yfcj,
     garden: state => state.garden,
     talents: state => state.talents,
-    qyjj: state => state.qyjj
+    qyjj: state => state.qyjj,
+    ldgh: state => state.ldgh
   }
 }

src/style/index.scss

@@ -3,6 +3,7 @@
 @import './transition.scss';
 @import './variables.scss';
 @import './mixin.scss';
+@import './media.scss';
 
 body {
   height: 100%;

src/style/media.scss

@@ -0,0 +1,33 @@
+@media screen and (height: 1080px) {
+    .h266 {
+      height: $mini-card + 40px !important;
+    }
+    .h292{
+      height: $small-card + 40px !important;
+    }
+    .h379{
+      height: $medium-card + 40px !important;
+    }
+    .h318{
+      height:$video-card + 40px !important;
+    }
+    .h232{
+      height: $miniS-card + 40px !important;
+    }
+   
+  }
+  .h266{
+    height: $mini-card;
+  }
+  .h292{
+    height: $small-card;
+  }
+  .h379{
+    height: $medium-card;
+  }
+  .h318{
+    height: $video-card;
+  }
+  .h232{
+    height: $miniS-card;
+  }

src/style/variables.scss

@@ -9,6 +9,12 @@ $fontColor:#9ACCFF;
 $titleColor:#fefefe;
 $progressTitleColor:#70c0c5;
 $progressNumColor:#fefefe;
+$medium-card:379px;
+$small-card:292px;
+$mini-card:266px;
+$video-card:318px;
+$miniS-card:232px;
+
 // 加载不同的配置文件
 // @import './layout9216.scss';
 // @import './layout6144.scss';

src/views/next/dialog-module/zdyf-left/ldgh/index.vue

@@ -0,0 +1,154 @@
+<template>
+    <div class="modal" v-show="ldgh">
+        <section>
+            <div class="dialog_header">
+                <div class="close-icon" @click="closeDialog">
+                    <img src="@/assets/images/common/dialog-colse.png" alt="" />
+                </div>
+                <div class="title-container">
+                    <div class="title">{{ dialogTitle }}</div>
+                </div>
+            </div>
+            <div class="dialog_body">
+                <div class="content">
+                        <img src="@/assets/images/index/ldgh.png" alt="">
+                </div>
+            </div>
+        </section>
+    </div>
+</template>
+  
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+    name: '',
+    data() {
+        return {
+            dialogTitle: '领导关怀',
+        
+        }
+    },
+    computed: {
+        ...mapGetters(['ldgh'])
+    },
+    components: {
+    },
+    watch: {
+
+    },
+    created() {
+
+    },
+    methods: {
+        ...mapActions({
+            showGlobalDialog: 'showGlobalDialog'
+        }),
+        closeDialog() {
+            this.showGlobalDialog('')
+        },
+
+    }
+}
+</script>
+  
+<style lang="scss" scoped>
+.modal {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 150;
+
+    >section {
+        display: flex;
+        flex-direction: column;
+        background: url('~@/assets/images/common/dialog-bg-big.png') no-repeat !important;
+        background-size: 100% 100%;
+        width: 1866px;
+        height: 716px;
+        overflow: hidden;
+        padding-bottom: 16px;
+        box-sizing: border-box;
+
+        .dialog_header {
+            position: relative;
+
+            .close-icon {
+                width: 18px;
+                height: 18px;
+                position: absolute;
+                top: 10px;
+                right: 16px;
+                cursor: pointer;
+            }
+
+            .title-container {
+                align-items: center;
+                background: url('~@/assets/images/common/dialog-header.png') no-repeat;
+                background-size: 100% 118%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 60px;
+                font-size: 26px;
+
+                .title {
+                    font-family: zaozigongfang;
+                    letter-spacing: 2px;
+
+                    background-size: 100% 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    height: 60px;
+                    font-size: 26px;
+                    color: #fff;
+                }
+            }
+        }
+
+        .dialog_body {
+            position: relative;
+            overflow-y: scroll;
+            padding: 40px 78px 40px 80px;
+            box-sizing: border-box;
+            flex: 1;
+
+            &::-webkit-scrollbar {
+                width: 3px;
+            }
+
+            &::-webkit-scrollbar-track {
+                border-radius: 10px;
+                background: rgba(12, 129, 254, 0.24);
+            }
+
+            &::-webkit-scrollbar-thumb {
+                border-radius: 10px;
+                background: linear-gradient(270deg, #0063fe, #0095ff);
+            }
+
+            .content {
+                color: #fff;
+                width: 100%;
+                height: 100%;
+                display: flex;
+            }
+
+
+        }
+    }
+
+}
+.m-r16{
+    margin-right: 16px;
+}
+.m-l16{
+    margin-left: 16px;
+}
+</style>
+  

src/views/next/index.vue

@@ -17,10 +17,10 @@
     <ZdyfLeftYfcj />
     <ZdyfRightGarden />
     <ZdyfRightTalents />
-    <ZdyfCenterQyjj/>
-    </div>
+    <ZdyfCenterQyjj />
+    <ZdyfLeftldgh />
   </div>
-</template>
+</div></template>
 
 <script>
 import { debounce } from 'utils/common'
@@ -34,6 +34,7 @@ import ZdyfLeftYfcj from './dialog-module/zdyf-left/yfcj'
 import ZdyfRightGarden from './dialog-module/zdyf-right/kyll/garden.vue'
 import ZdyfRightTalents from './dialog-module/zdyf-right/kyll/talents.vue'
 import ZdyfCenterQyjj from './dialog-module/zdyf-center/qyjj'
+import ZdyfLeftldgh from './dialog-module/zdyf-left/ldgh'
 
 let width = 0
 let height = 0
@@ -57,7 +58,8 @@ export default {
     ZdyfLeftYfcj,
     ZdyfRightTalents,
     ZdyfRightGarden,
-    ZdyfCenterQyjj
+    ZdyfCenterQyjj,
+    ZdyfLeftldgh
   },
   beforeRouteEnter(to, from, next) {
     if (window.location.search) {
@@ -73,6 +75,18 @@ export default {
     next()
   },
   created() {
+    // 获取屏幕高度
+    const screenHeight = window.innerHeight;
+    // 判断屏幕高度并设置变量的值
+    if (screenHeight === 960) {
+      this.height = 960;
+    } else if (screenHeight === 1080) {
+      this.height = 1080;
+    } else {
+      this.height = 960;
+    }
+    console.log(this.height, 'this.height');
+
     if (width && height) {
       this.width = width
       this.height = height

src/views/next/screen-content-left/home-left/index.vue

@@ -1,6 +1,6 @@
 <template>
         <div>
-                <div class='card' style="height: 292px;">
+                <div class='card h292' >
                         <screen-title>
                                 <div slot="left" class="screen-title-left">移风简介</div>
                         </screen-title>
@@ -11,7 +11,7 @@
                                                 <img src="@/assets/images/kyll/garden.png" alt="">
                                                 <p>移风店镇位于即墨区西北部、青岛市版图的中心位置，地处威海、烟台、潍坊2小时经济圈内。距机场18公里、高铁站21公里，毗邻沈海、济青和青新高速，交通优势明显。
                                                 </p>
-                                                <p> 青岛(移风)国际蔬菜花卉种子产业园、即墨农业高新技术开发区均落于境内，将打造全国重要的蔬菜花卉种子研发和繁育中心，成为全国种业“男广州，北青岛”格局承载地。
+                                                <p> 青岛(移风)国际蔬菜花卉种子产业园、即墨农业高新技术开发区均落于境内，将打造全国重要的蔬菜花卉种子研发和繁育中心，成为全国种业“南广州，北青岛”格局承载地。
                                                 </p>
                                         <!-- </section> -->
 
@@ -25,7 +25,7 @@
 
                         </div>
                 </div>
-                <div class='card' style="margin-top: 8px;height: 266px;">
+                <div class='card h266' style="margin-top: 8px;">
                         <screen-title>
                                 <div slot="left" class="screen-title-left">红色移风</div>
                         </screen-title>
@@ -64,7 +64,7 @@
                                 </div>
                         </div> -->
                 </div>
-                <div class='card m-top12' style="height: 318px;">
+                <div class='card h318 m-top12' >
                         <screen-title>
                                 <div slot="left" class="screen-title-left">种都移风</div>
                         </screen-title>

src/views/next/screen-content-left/hsyf-left/index.vue

@@ -1,18 +1,18 @@
 <template>
         <div>
-                <div class='card' style="height: 292px;">
+                <div class='card h292' >
                         <screen-title>
                                 <div slot="left" class="screen-title-left">组织建设</div>
                         </screen-title>
 
                 </div>
-                <div class='card' style="margin-top: 8px;height: 266px;">
+                <div class='card  h292' style="margin-top: 8px;">
                         <screen-title>
                                 <div slot="left" class="screen-title-left">党员分析</div>
                         </screen-title>
 
                 </div>
-                <div class='card m-top12' style="height: 318px;">
+                <div class='card  h292 m-top12'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">党员风采</div>
                         </screen-title>

src/views/next/screen-content-left/szyf-left/index.vue

@@ -1,18 +1,18 @@
 <template>
         <div>
-                <div class='card' style="height: 292px;">
+                <div class='card h266'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">事件处理实况</div>
                         </screen-title>
 
                 </div>
-                <div class='card' style="margin-top: 8px;height: 266px;">
+                <div class='card h379' style="margin-top:8px;">
                         <screen-title>
                                 <div slot="left" class="screen-title-left">事件处理实况</div>
                         </screen-title>
 
                 </div>
-                <div class='card m-top12' style="height: 318px;">
+                <div class='card h232 m-top12' >
                         <screen-title>
                                 <div slot="left" class="screen-title-left">重点维稳人员</div>
                         </screen-title>

src/views/next/screen-content-left/zdyf-left/index.vue

@@ -1,16 +1,16 @@
 <template>
         <div>
-                <div class='card'>
+                <div class='card h292'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">领导关怀</div>
-                                <div slot="right" class="screen-title-right">更多</div>
+                                <div slot="right" class="screen-title-right" @click="set_ldhg(true)">更多</div>
                         </screen-title>
                         <div class="card-item-ldgh">
                                 <img src="@/assets/images/index/banner.png" alt="">
                                 <span>2022年4月10日，习近平总书记在海南省三亚市崖州湾种子实验室考察调研时强调，种子是我国粮食安全的关键。只有用自己的手攥紧中国种子，才能端稳中国饭碗，才能实现粮食安全。种源要做到自主可控，种业科技要自立自强。</span>
                         </div>
                 </div>
-                <div class='card' style="margin-top: 8px;">
+                <div class='card h292' style="margin-top: 8px;">
                         <screen-title>
                                 <div slot="left" class="screen-title-left">移风优势</div>
                         </screen-title>
@@ -49,10 +49,10 @@
                                 </div>
                         </div>
                 </div>
-                <div class='card m-top12'>
+                <div class='card h292 m-top12'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">移风成就</div>
-                                <div slot="right" @click='handelClickShowDialog' class="screen-title-right">发展历程</div>
+                                <div slot="right" @click='set_yfcj(true)' class="screen-title-right">发展历程</div>
                         </screen-title>
                         <div class="card-item-yfcj">
                                 <div class="card-item-yfcj-1" style="color: #7AFAFF; top: 10px; left: 15%">省级农业产业强镇</div>
@@ -83,11 +83,11 @@ export default {
         methods: {
                 ...mapActions({
                         showGlobalDialog: 'showGlobalDialog',
-                        set_yfcj: 'SET_YFCJ'
+                        set_yfcj: 'SET_YFCJ',
+                        set_ldhg: 'SET_LDGH'
                 }),
-                handelClickShowDialog() {
-                        this.set_yfcj(true)
-                }
+             
+                
         },
         components: {},
         computed: {},

src/views/next/screen-content-map/cpt/zdyf-map.vue

@@ -42,10 +42,10 @@ export default {
             darkStyle: {
                 style: "amap://styles/blue",
                 polygonColor: [
-                    // "rgba(255, 100, 60, 0.5)",
+                    "rgba(255, 100, 60, 0.5)",
                     // "rgba(43, 231, 253, 0.35)",
                     "rgba(0, 127, 241, .5)",
-                    // "rgba(255, 255, 50, 0.35)",
+                    "rgba(255, 255, 50, 0.35)",
                 ],
                 lineColor: [
                     // "rgba(255, 180, 150, 0.9)",
@@ -121,22 +121,34 @@ export default {
         ...mapActions({
             set_qyjj: 'SET_QYJJ',
         }),
-        switcMapType(type) {
-            let that = this
-            if (type === 'unit') {
-                this.mapFlag = 'Amap'
-                if (!myMap) {
-                    setTimeout(() => {
-                        that.init(type)
-                    }, 500)
+        async switcMapType(type) {
+            if (type === 'Emap') {
+                this.mapFlag = 'Emap';
+                scene.destroy();
+                myMap = null;
+                return;
+            }
+            this.mapFlag = 'Amap';
+            if (!myMap) {
+                await new Promise(resolve => setTimeout(resolve, 500));
+                await this.init(type);
+            } else {
+                if (polygonLayer) {
+                    scene.removeLayer(polygonLayer);
+                }
+                this.initPolygonLayer(type);
+
+                if (type === 'unit') {
+                    this.initDot(point);
                 } else {
-                    this.initPolygonLayer()
-                    this.initDot(point)
+                    this.removeDotLayers();
                 }
-            } else if (type === 'Emap') {
-                this.mapFlag = 'Emap'
-                scene.destroy();
-                myMap = null
+            }
+        },
+        removeDotLayers() {
+            if (dotTextLayer || dotLayer) {
+                scene.removeLayer(dotTextLayer);
+                scene.removeLayer(dotLayer);
             }
         },
         toProvince() {
@@ -147,7 +159,7 @@ export default {
         },
         init(type) {
             if (!yifengJson) return false;
-           myMap = new GaodeMap({
+            myMap = new GaodeMap({
                 pitch: 40.24716321414439,
                 mapStyle: "amap://styles/darkblue",
                 // style: styleConfig.style,
@@ -175,6 +187,8 @@ export default {
                 } else if (type == 'unit') {
                     this.initDot(point)
                     this.initPolygonLayer()
+                } else if (type == 'resource') {
+                    this.initPolygonLayer(type)
                 }
 
             });
@@ -232,7 +246,7 @@ export default {
                 that.initPolygonLayer()
             });
         },
-        initPolygonLayer() {
+        initPolygonLayer(type) {
             if (roadLayer) {
                 scene.removeLayer(roadLayer);
             }
@@ -249,7 +263,7 @@ export default {
             })
                 .size(300)
                 .source(data)
-                .color("name", styleConfig.polygonColor)
+                .color("name", type == 'resource' ? styleConfig.polygonColor : ['rgba(0, 127, 241, .5)'])
                 .shape("extrude")
                 // .shape("fill")
                 .style({
@@ -312,20 +326,21 @@ export default {
         initDot(data) {
             console.log(data, '点位数据');
             scene.addImage("dotBto", require("@/assets/images/map/dot.png"));
+            scene.addImage("textBg", require("@/assets/images/map/textBg.png"));
             //textOffset改为动态的 this.buttonIndex == 3 [10,60] 否则就是 [-30 60]
             dotTextLayer = new PointLayer({
                 zIndex: 21,
             })
                 .source(data)
                 .shape('name', 'text')
-                .color("#fff")
-                .size(14)
-                .style({
-                    strokeWidth: 3,
+                .color("#000")
+                .size(11)
+                .style({ 
+                    strokeWidth: 1,
                     strokeOpacity: 0.1,
                     fontWeight: '500',
-                    stroke: "#000",
-                    textOffset: this.buttonIndex === 3 ? [10, 60] : [-30, 60],
+                    stroke: "#fff",
+                    textOffset: [10, 0] ,
                     raisingHeight: 300,
                     heightfixed: true,
                     textAnchor: "center-left",
@@ -336,8 +351,8 @@ export default {
                 zIndex: 20,
             })
                 .source(data)
-                .shape("dotBto")
-                .size(20)
+                .shape("textBg")
+                .size(80)
                 .style({
                     layerType: "fillImage",
                     raisingHeight: 300,

src/views/next/screen-content-right/home-right/index.vue

@@ -1,18 +1,18 @@
 <template>
         <div>
-                <div class='card' style="height: 292px;">
+                <div class='card h266'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">和美移风</div>
                         </screen-title>
 
                 </div>
-                <div class='card' style="margin-top: 8px;height: 266px;">
+                <div class='card h318' style="margin-top: 8px;">
                         <screen-title>
                                 <div slot="left" class="screen-title-left">善治移风</div>
                         </screen-title>
 
                 </div>
-                <div class='card m-top12' style="height: 318px;">
+                <div class='card h292 m-top12' >
                         <screen-title>
                                 <div slot="left" class="screen-title-left">文化移风</div>
                         </screen-title>

src/views/next/screen-content-right/hsyf-right/index.vue

@@ -1,18 +1,18 @@
 <template>
         <div>
-                <div class='card' style="height: 292px;">
+                <div class='card h292' >
                         <screen-title>
                                 <div slot="left" class="screen-title-left">党建活动</div>
                         </screen-title>
 
                 </div>
-                <div class='card' style="margin-top: 8px;height: 266px;">
+                <div class='card h292' style="margin-top: 8px;">
                         <screen-title>
                                 <div slot="left" class="screen-title-left">支部风采</div>
                         </screen-title>
 
                 </div>
-                <div class='card m-top12' style="height: 318px;">
+                <div class='card h292 m-top12'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">党务公开</div>
                         </screen-title>

src/views/next/screen-content-right/szyf-right/index.vue

@@ -1,27 +1,18 @@
-<!--
- * @Author: mk 2403457699@qq.com
- * @Date: 2024-01-16 10:06:10
- * @LastEditors: mk 2403457699@qq.com
- * @LastEditTime: 2024-01-25 10:50:11
- * @Description: 介绍一下改动了什么
- * 
- * 
--->
 <template>
         <div>
-                <div class='card' style="height: 292px;">
+                <div class='card h266'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">服务事项分析</div>
                         </screen-title>
 
                 </div>
-                <div class='card' style="margin-top: 8px;height: 266px;">
+                <div class='card h379' style="margin-top: 8px;">
                         <screen-title>
                                 <div slot="left" class="screen-title-left">事件处理实况</div>
                         </screen-title>
 
                 </div>
-                <div class='card m-top12' style="height: 318px;">
+                <div class='card h232  m-top12'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">重点帮扶人员</div>
                         </screen-title>

src/views/next/screen-content-right/zdyf-right/index.vue

@@ -1,13 +1,13 @@
 <template>
         <div>
-                <div class='card'>
+                <div class='card h292'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">成果展示</div>
                         </screen-title>
                         <div style="padding: 16px;box-sizing: border-box;width: 100%;height: 100%; cursor: pointer;"
                                 @click="handelClickJumpMap"> <img src="@/assets/images/material/cgzs.png" alt=""></div>
                 </div>
-                <div class='card m-top12'>
+                <div class='card h292 m-top12'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">科研力量</div>
                         </screen-title>
@@ -34,10 +34,10 @@
                         </div>
 
                 </div>
-                <div class='card m-top12'>
+                <div class='card h292 m-top12'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">移风未来</div>
-                                <div slot="right" class="screen-title-right"><span>在谈项目</span> <span>资源地图</span></div>
+                                <div slot="right" class="screen-title-right"><span>在谈项目</span> <span @click="handelClickShowMap">资源地图</span></div>
                         </screen-title>
                         <div class="card-item-yfwl">
                                 <vue-seamless-scroll :class-option="optionHover1" :data="yfwlList">
@@ -163,6 +163,10 @@ export default {
                 handelClickJumpMap() {
                         this.$EventBus.$emit('switcMapType', 'unit')
                 },
+                handelClickShowMap(){
+                        this.$EventBus.$emit('switcMapType', 'resource')
+                }
+                
         },
         components: {},
         computed: {},
@@ -173,7 +177,6 @@ export default {
 <style lang="scss" scoped>
 .card {
         width: 100%;
-        height: 292px;
 
         &-item-kyll {
                 flex: 1;