gx

src/view/work.vue

@@ -2,50 +2,27 @@
   <div class="module">
     <div class="displayFlex left_bg">
       <div class="flex1">
-        <div
+        <div class="yd_title" :class="zxjz ? 'left_1' : 'left_1_1'" @click="zxjzChange()" style="cursor: pointer"></div>
-          class="yd_title"
-          :class="zxjz ? 'left_1' : 'left_1_1'"
-          @click="zxjzChange()"
-          style="cursor: pointer"
-        ></div>
         <div class="choose">
-          <div
+          <div :class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'" @click="jzChange(0, '1')">
-            :class="jz[0].choose == '1' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(0, '1')"
-          >
             教育
           </div>
-          <div
+          <div :class="jz[0].choose == '2' ? 'choose_1' : 'choose_2'" @click="jzChange(0, '2')">
-            :class="jz[0].choose == '2' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(0, '2')"
-          >
             医疗
           </div>
-          <div
+          <div :class="jz[0].choose == '3' ? 'choose_1' : 'choose_2'" @click="jzChange(0, '3')">
-            :class="jz[0].choose == '3' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(0, '3')"
-          >
             就业
           </div>
         </div>
         <eP1></eP1>
         <div class="choose">
-          <div
+          <div :class="jz[1].choose == '1' ? 'choose_1' : 'choose_2'" @click="jzChange(1, '1')">
-            :class="jz[1].choose == '1' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(1, '1')"
-          >
             住房
           </div>
-          <div
+          <div :class="jz[1].choose == '2' ? 'choose_1' : 'choose_2'" @click="jzChange(1, '2')">
-            :class="jz[1].choose == '2' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(1, '2')"
-          >
             自然灾害
           </div>
-          <div
+          <div :class="jz[1].choose == '3' ? 'choose_1' : 'choose_2'" @click="jzChange(1, '3')">
-            :class="jz[1].choose == '3' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(1, '3')"
-          >
             临时救助
           </div>
         </div>
@@ -71,11 +48,7 @@
             <!-- <span>数据对比</span> -->
           </div>
           <div class="rolling">
-            <div
+            <div v-for="(item, index) in 20" :key="index" class="fundingContent">
-              v-for="(item, index) in 20"
-              :key="index"
-              class="fundingContent"
-            >
               <span class="spot">城乡居民最低生活保障金</span>
               <span class="spot">99,126,474</span>
               <!-- <span class="spot">70.88</span> -->
@@ -88,22 +61,13 @@
       <div class="flex1">
         <div class="yd_title right_1"></div>
         <div class="choose">
-          <div
+          <div :class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'" @click="jzChange(2, '1')">
-            :class="jz[2].choose == '1' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(2, '1')"
-          >
             困难残疾人
           </div>
-          <div
+          <div :class="jz[2].choose == '2' ? 'choose_1' : 'choose_2'" @click="jzChange(2, '2')">
-            :class="jz[2].choose == '2' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(2, '2')"
-          >
             困难军人
           </div>
-          <div
+          <div :class="jz[2].choose == '3' ? 'choose_1' : 'choose_2'" @click="jzChange(2, '3')">
-            :class="jz[2].choose == '3' ? 'choose_1' : 'choose_2'"
-            @click="jzChange(2, '3')"
-          >
             困难职工
           </div>
         </div>
@@ -111,42 +75,27 @@
       </div>
       <div class="flex1">
         <div class="yd_title right_2"></div>
-        <div style="margin-top: 20px">
+        <div class="dyh">
-          <div class="czr-bj">
+          <div class="czr-bj" v-for="(item, index) in data.diversification.hszhxms" :key="index">
             <div class="czrBox">
-              <div class="situation situation1"></div>
+              <div>发起单位:</div>
-              <div class="column">
+              <div>{{ item.fqdw }}</div>
-                <!-- <div v-for="item in data.diversification.hszhxms">
-                  发起单位: {{ item.fqdw }}
-                  <br>
-                  项目名称: {{item.xmmc}}
-                  <br>
-                  公众筹款金额(元): {{ item.gzzcje }}
-                  <br>
-                  捐赠支出金额: {{ item.jzzcje }}
-                  <br>
-                  捐赠人次: {{ item.jzrc }}
-                </div> -->
-              </div>
             </div>
             <div class="czrBox">
-              <div class="situation situation2"></div>
+              <div>项目名称:</div>
-              <div class="column">
+              <div>{{ item.xmmc }}</div>
-                <div v-for="item in data.diversification.hszhxms">
-                  发起单位: {{ item.fqdw }}
-                  <br />
-                  项目名称: {{ item.xmmc }}
-                  <br />
-                  公众筹款金额(元): {{ item.gzzcje }}
-                  <br />
-                  捐赠支出金额: {{ item.jzzcje }}
-                  <br />
-                  捐赠人次: {{ item.jzrc }}
-                </div>
             </div>
             <div class="czrBox">
-                <div class="situation situation3"></div>
+              <div>公众筹款金额(元):</div>
+              <div>{{ item.gzzcje }}</div>
             </div>
+            <div class="czrBox">
+              <div>捐赠支出金额:</div>
+              <div>{{ item.jzzcje }}</div>
+            </div>
+            <div class="czrBox">
+              <div>捐赠人次:</div>
+              <div>{{ item.jzrc }}</div>
             </div>
           </div>
         </div>
@@ -231,6 +180,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.education.data[0] = res.data.specialAssistance.education.data[0];
       // 教育&医疗&就业
@@ -308,6 +258,7 @@ onBeforeMount(() => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .left_1_1 {
   background-image: url(@/assets/images/work/new_qtjz.png);
   background-repeat: no-repeat;
@@ -337,6 +288,7 @@ onBeforeMount(() => {
   background-repeat: no-repeat;
   background-size: 100% 100%;
 }
+
 .right_2 {
   background-image: url(@/assets/images/work/new_dyh.png);
   background-repeat: no-repeat;
@@ -583,11 +535,13 @@ onBeforeMount(() => {
     top: 3px;
   }
 }
+
 .choose {
   display: flex;
   justify-content: center;
   margin-top: 47px;
   margin-bottom: 20px;
+
   .choose_1 {
     cursor: pointer;
     width: 124px;
@@ -604,6 +558,7 @@ onBeforeMount(() => {
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
+
   .choose_2 {
     cursor: pointer;
     width: 124px;
@@ -631,6 +586,7 @@ onBeforeMount(() => {
 .flex11 {
   padding: 12px 0;
 }
+
 .czr-sl {
   display: flex;
 
@@ -766,56 +722,51 @@ onBeforeMount(() => {
   }
 }
 
-.czr-bj {
+.dyh {
-  width: 529px;
+  margin-top: 10px;
-  height: 350px;
+  overflow: hidden;
+  height: 380px;
+  overflow-y: auto;
+  width: 100%;
+
+  .czr-bj {
+  width: 480px;
   // height: calc(100% - 26px);
   background: rgba(0, 103, 165, 0.18);
   box-shadow: inset 0px 0px 58px 0px rgba(37, 175, 252, 0.47);
   border-radius: 2px;
-  padding: 20px 0 0 14px;
+  padding: 20px 26px 1px 32px;
+  margin: 0 auto 12px;
   // box-sizing: border-box;
 
   .czrBox {
-    height: 118px;
+    height: 22px;
-    .column {
+    font-weight: 500;
-      height: calc(100% - 26px);
+    font-size: 16px;
-      overflow-y: auto;
+    color: #FFFFFF;
-      font-size: 14px;
+    line-height: 22px;
-      color: #ffffff;
+    letter-spacing: 3px;
-      padding-left: 18px;
+    text-shadow: 0px 0px 17px rgba(0, 255, 254, 0.5);
-      padding-right: 18px;
+    display: flex;
-    }
+    justify-content: space-between;
-  }
+    margin-bottom: 20px;
-
-  .situation {
-    width: 495px;
-    height: 26px;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .situation1 {
-    background-image: url(@/assets/images/work/dyh.png);
-  }
-
-  .situation2 {
-    background-image: url(@/assets/images/work/dyh2.png);
-  }
-
-  .situation3 {
-    background-image: url(@/assets/images/work/dyh1.png);
   }
 }
+}
+
+
+
 .school {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
 }
+
 .fundingBox {
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .funding {
     width: 520px;
     height: 34px;
@@ -828,6 +779,7 @@ onBeforeMount(() => {
     display: flex;
     align-items: center;
     justify-content: space-around;
+
     // align-items: center;
     // justify-content: center;
     // flex-direction: column;
@@ -841,6 +793,7 @@ onBeforeMount(() => {
       letter-spacing: 3px;
     }
   }
+
   .rolling {
     width: 100%;
     height: 200px;
@@ -873,6 +826,7 @@ onBeforeMount(() => {
         width: 70%;
         padding-left: 38px;
       }
+
       span:nth-child(2) {
         width: 30%;
         // padding-left: 50px;
@@ -880,11 +834,13 @@ onBeforeMount(() => {
     }
   }
 }
+
 .rating {
   width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .ratingBtn {
     display: flex;
     // align-items: center;
@@ -895,7 +851,8 @@ onBeforeMount(() => {
       background-image: url(@/assets/eduImg/jyImg19.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
-      cursor: pointer; /* 添加指针样式以指示可点击 */
+      cursor: pointer;
+      /* 添加指针样式以指示可点击 */
     }
 
     .ratingImg {
@@ -905,6 +862,7 @@ onBeforeMount(() => {
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
+
     .onImg.active {
       width: 62px;
       height: 29px;
@@ -912,6 +870,7 @@ onBeforeMount(() => {
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
+
     span {
       height: 100%;
       display: flex;
@@ -940,20 +899,24 @@ onBeforeMount(() => {
   }
 }
 
-.column::-webkit-scrollbar {
+.dyh::-webkit-scrollbar {
-  display: none; /* Chrome Safari */
+  display: none;
+  /* Chrome Safari */
 }
+
 /* 滚动条整体部分 */
 .rolling::-webkit-scrollbar {
   width: 5px;
   // height: 10px;
 }
+
 /* 滚动槽 */
 .rolling::-webkit-scrollbar-track {
   border-radius: 1px;
   background: rgba(0, 128, 231, 0.56);
   -webkit-box-shadow: inset 0 0 6px rgba(139, 139, 139, 0.3);
 }
+
 /* 滚动条滑块样式 */
 .rolling::-webkit-scrollbar-thumb {
   background-clip: content-box;