gx

src/view/work.vue

@@ -2,12 +2,23 @@
   <div class="module">
     <div class="displayFlex left_bg">
       <div class="flex1">
-        <div class="yd_title" :class="zxjz ? 'left_1' : 'left_1_1'" @click="zxjzChange()" style="cursor: pointer"></div>
+        <div
+          class="yd_title"
+          :class="zxjz ? 'left_1' : 'left_1_1'"
+          @click="zxjzChange()"
+          style="cursor: pointer"
+        ></div>
         <div class="choose">
-          <div :class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'" @click="jzChange(0, '1')">
+          <div
+            :class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(0, '1')"
+          >
             教育
           </div>
-          <div :class="jz[0].choose == '2' ? 'choose_1' : 'choose_2'" @click="jzChange(0, '2')">
+          <div
+            :class="jz[0].choose == '2' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(0, '2')"
+          >
             医疗
           </div>
           <!-- <div
@@ -19,7 +30,10 @@
         </div>
         <eP1 :list="data.education"></eP1>
         <div class="choose">
-          <div :class="jz[1].choose == '1' ? 'choose_1' : 'choose_2'" @click="jzChange(1, '1')">
+          <div
+            :class="jz[1].choose == '1' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(1, '1')"
+          >
             住房
           </div>
           <!-- <div
@@ -35,7 +49,7 @@
             临时救助
           </div>
         </div>
-        <eP2 :list="data.housing" ></eP2>
+        <eP2 :list="data.housing"></eP2>
       </div>
     </div>
     <div class="displayFlex center_bg">
@@ -56,7 +70,12 @@
             <span>金额(元)</span>
             <!-- <span>数据对比</span> -->
           </div>
-          <div class="rolling">
+          <div
+            class="rolling"
+            ref="mainRef"
+            @mouseenter="stopAutoScroll"
+            @mouseleave="startAutoScroll"
+          >
             <div
               v-for="(item, index) in data.lifeAssistance.subsidyInformation"
               :key="index"
@@ -74,13 +93,22 @@
       <div class="flex1">
         <div class="yd_title right_1"></div>
         <div class="choose">
-          <div :class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'" @click="jzChange(2, '1')">
+          <div
+            :class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(2, '1')"
+          >
             困难残疾人
           </div>
-          <div :class="jz[2].choose == '2' ? 'choose_1' : 'choose_2'" @click="jzChange(2, '2')">
+          <div
+            :class="jz[2].choose == '2' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(2, '2')"
+          >
             困难军人
           </div>
-          <div :class="jz[2].choose == '3' ? 'choose_1' : 'choose_2'" @click="jzChange(2, '3')">
+          <div
+            :class="jz[2].choose == '3' ? 'choose_1' : 'choose_2'"
+            @click="jzChange(2, '3')"
+          >
             困难职工
           </div>
         </div>
@@ -89,7 +117,11 @@
       <div class="flex1">
         <div class="yd_title right_2"></div>
         <div class="dyh">
-          <div class="czr-bj" v-for="(item, index) in data.diversification.hszhxms" :key="index">
+          <div
+            class="czr-bj"
+            v-for="(item, index) in data.diversification.hszhxms"
+            :key="index"
+          >
             <div class="czrBox">
               <div>发起单位:</div>
               <div>{{ item.fqdw }}</div>
@@ -197,7 +229,7 @@ const getData = async () => {
   await http.get("/api/ggfwyth/succour").then((res) => {
     if (res.code == 200) {
       console.log(res.data);
-      data.diversification.hszhxms = res.data.diversification.hszhxms
+      data.diversification.hszhxms = res.data.diversification.hszhxms;
       // 专项救助模块
       // 教育&医疗
       data.education.data = res.data.specialAssistance.education.data;
@@ -221,9 +253,42 @@ const getData = async () => {
     }
   });
 };
+
+//自动滚动
+const mainRef = ref(null);
+let isAutoScrolling = true;
+
+const stopAutoScroll = () => {
+  isAutoScrolling = false;
+};
+
+const startAutoScroll = () => {
+  isAutoScrolling = true;
+  autoScroll();
+};
+
+const autoScroll = () => {
+  if (!isAutoScrolling) return;
+
+  const mainEl = mainRef.value;
+  mainEl.scrollTop += 1; // 每次滚动的距离
+
+  if (mainEl.scrollTop + 1 >= mainEl.scrollHeight - mainEl.clientHeight) {
+    setTimeout(() => {
+      mainEl.scrollTo({ top: 0, behavior: "smooth" });
+      setTimeout(autoScroll, 2000); // 2秒后再次滚动到底部
+    }, 1000); // 暂停1秒后开始快速滚回顶部
+  } else {
+    requestAnimationFrame(autoScroll);
+  }
+};
+
 onBeforeMount(() => {
   getData();
 });
+onMounted(() => {
+  startAutoScroll();
+});
 </script>
 
 <style lang="scss" scoped>
@@ -757,32 +822,29 @@ onBeforeMount(() => {
   width: 100%;
 
   .czr-bj {
-  width: 480px;
+    width: 480px;
-  // height: calc(100% - 26px);
+    // height: calc(100% - 26px);
-  background: rgba(0, 103, 165, 0.18);
+    background: rgba(0, 103, 165, 0.18);
-  box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
+    box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
-  border-radius: 2px;
+    border-radius: 2px;
-  padding: 20px 26px 1px 32px;
+    padding: 20px 26px 1px 32px;
-  margin: 0 auto 12px;
+    margin: 0 auto 12px;
-  // box-sizing: border-box;
+    // box-sizing: border-box;
 
-  .czrBox {
+    .czrBox {
-    height: 22px;
+      height: 22px;
-    font-weight: 500;
+      font-weight: 500;
-    font-size: 16px;
+      font-size: 16px;
-    color: #FFFFFF;
+      color: #ffffff;
-    line-height: 22px;
+      line-height: 22px;
-    letter-spacing: 3px;
+      letter-spacing: 3px;
-    text-shadow: 0px 0px 17px rgba(0, 255, 254, 0.5);
+      text-shadow: 0px 0px 17px rgba(0, 255, 254, 0.5);
-    display: flex;
+      display: flex;
-    justify-content: space-between;
+      justify-content: space-between;
-    margin-bottom: 20px;
+      margin-bottom: 20px;
+    }
   }
-
 }
-}
-
-
 
 .school {
   display: flex;
@@ -830,7 +892,7 @@ onBeforeMount(() => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    // padding-left: 6px;
+    padding-left: 6px;
 
     .fundingContent {
       display: flex;