修改委托招聘服务协议图片展示处理

src/views/recruitment/card/EnterpriseEmploymentTwo.vue

@@ -5,9 +5,10 @@
 <script setup>
 // Vue 3 Composition API 的 setup 语法糖
 // 在这里直接编写响应式数据和方法，无需返回
-import { ref, reactive, computed, onMounted } from "vue";
+import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
 import * as echarts from "echarts";
 const enterpriseTwoRef = ref(null);
+let chart = null
 const option = {
   // 添加标题
   title: {
@@ -92,14 +93,29 @@ const option = {
   ]
 };
 
+// 处理图表重绘
+function handleChartResize() {
+  if (chart) {
+    // 先重置图表尺寸
+    chart.resize()
+
+    chart.setOption(option, { notMerge: false, lazyUpdate: true })
+  }
+}
+
 // 生命周期钩子
 onMounted(() => {
   if (enterpriseTwoRef.value) {
-    const chart = echarts.init(enterpriseTwoRef.value);
+    chart = echarts.init(enterpriseTwoRef.value);
     // 设置option
     chart.setOption(option);
   }
+  window.addEventListener('resize', handleChartResize)
 });
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleChartResize);
+})
 </script>
 
 <style lang="scss" scoped></style>

src/views/recruitment/card/LaborSystemTwo.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from "vue";
+import { ref, reactive, computed, onMounted, onUnmounted } from "vue";
 // 引入Echarts
 import * as echarts from "echarts";
 import 'echarts-gl';
@@ -16,6 +16,7 @@ import sichuanJSON from "@/assets/json/sichuan.json";
 import pointImage from "@/assets/images/recruitment/map-point1.png";
 // 获取地图DOM元素
 let map = ref();
+let myMap = null;
 // 注册崇州地图
 echarts.registerMap("sichuan", sichuanJSON);
 const initialPoints = [
@@ -94,12 +95,28 @@ let option = {
     ]
 };
 
+// 处理图表重绘
+function handleChartResize() {
+  if (myMap) {
+    // 先重置图表尺寸
+    myMap.resize()
+
+    myMap.setOption(option, { notMerge: false, lazyUpdate: true })
+  }
+}
+
 // 生命周期钩子
 onMounted(() => {
-  let myMap = echarts.init(map.value);
+  myMap = echarts.init(map.value);
   // 设置配置项
   myMap.setOption(option);
+
+  window.addEventListener('resize', handleChartResize)
 });
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleChartResize);
+})
 </script>
 
 <style lang="scss" scoped>

src/views/recruitment/index.vue

@@ -67,7 +67,7 @@
           :autoplay="true"
         >
           <!-- <el-carousel-item><LaborSystemOne /></el-carousel-item> -->
-          <el-carousel-item><LaborSystemTwo /></el-carousel-item>
+          <el-carousel-item class="isVisibleImg"><LaborSystemTwo /></el-carousel-item>
           <!-- <el-carousel-item><LaborSystemThree /></el-carousel-item> -->
           <!-- <el-carousel-item><LaborSystemFour /></el-carousel-item> -->
         </el-carousel>
@@ -234,6 +234,11 @@ function getWebSocketData() {
 .transition {
   transition: all 0.5s;
 }
+
+.isVisibleImg.el-carousel__item {
+  background: none !important;
+}
+
 .el-carousel {
   margin-top: 0.5vw;
 }