gx

src/view/dialog/dialog.vue

@@ -15,10 +15,25 @@
           </el-icon>
         </div>
       </template>
+
       <div class="tabelPart">
+        <div class="bo">
+          <div class="title">
+            <div class="title_top">
+              <img src="@/assets/images/table_l.png" alt="" style="margin-right:10px;"/>
+              <div class="name">{{ title }}详情</div>
+              <img src="@/assets/images/table_r.png" alt=""  style="margin-left:10px;"/>
+            </div>
+            <img
+              class="title_botton"
+              src="@/assets/images/table_c.png"
+              alt=""
+            />
+          </div>
+        </div>
         <el-table
           :data="data.tableData"
-          height="calc(100% - 40px)"
+          height="calc(100% - 110px)"
           :header-cell-style="{ background: '#008FCD' }"
         >
           <!-- <el-table-column
@@ -163,7 +178,7 @@ const handle = (current) => {
 }
 
 .tabelPart {
-  height: 60vh;
+  height: 80vh;
   padding: 16px;
   background: linear-gradient(
       270deg,
@@ -212,4 +227,40 @@ const handle = (current) => {
     background-color: rgba(0, 116, 255, 0) !important;
   }
 }
+.bo {
+  width: 100%;
+  display: flex;
+  // align-items: center;
+}
+.title {
+  margin: 10px auto;
+  display: flex;
+  flex-direction: column;
+  &_top {
+    display: flex;
+    align-items: end;
+    img {
+      height: 33px;
+      width: 33px;
+    }
+
+    .name {
+      font-family: PangMenZhengDao, PangMenZhengDao;
+      font-weight: 600;
+      font-size: 33px;
+      color: #ffffff;
+      line-height: 38px;
+      text-align: center;
+      font-style: normal;
+      letter-spacing: 2px;
+      background: linear-gradient(180deg, #ffffff 0%, #51ffef 100%);
+      -webkit-background-clip: text; /*将设置的背景颜色限制在文字中*/
+      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
+    }
+  }
+  &_botton {
+    margin-top: 5px;
+    height: 19px;
+  }
+}
 </style>

src/view/work.vue

@@ -2,23 +2,12 @@
   <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
@@ -30,10 +19,7 @@
         </div>
         <eP1 :list="data.education"></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
@@ -88,22 +74,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 +88,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>
             <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>
@@ -235,6 +197,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 = res.data.specialAssistance.education.data;
@@ -322,6 +285,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;
@@ -351,6 +315,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;
@@ -597,11 +562,13 @@ onBeforeMount(() => {
     top: 3px;
   }
 }
+
 .choose {
   display: flex;
   justify-content: center;
   margin-top: 47px;
   margin-bottom: 20px;
+
   .choose_1 {
     cursor: pointer;
     width: 124px;
@@ -618,6 +585,7 @@ onBeforeMount(() => {
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }
+
   .choose_2 {
     cursor: pointer;
     width: 124px;
@@ -645,6 +613,7 @@ onBeforeMount(() => {
 .flex11 {
   padding: 12px 0;
 }
+
 .czr-sl {
   display: flex;
 
@@ -780,57 +749,52 @@ 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;
@@ -843,6 +807,7 @@ onBeforeMount(() => {
     display: flex;
     align-items: center;
     justify-content: space-around;
+
     // align-items: center;
     // justify-content: center;
     // flex-direction: column;
@@ -856,6 +821,7 @@ onBeforeMount(() => {
       letter-spacing: 3px;
     }
   }
+
   .rolling {
     width: 100%;
     height: 200px;
@@ -888,6 +854,7 @@ onBeforeMount(() => {
         width: 70%;
         padding-left: 38px;
       }
+
       span:nth-child(2) {
         width: 30%;
         // padding-left: 50px;
@@ -895,11 +862,13 @@ onBeforeMount(() => {
     }
   }
 }
+
 .rating {
   width: 50%;
   display: flex;
   flex-direction: column;
   align-items: center;
+
   .ratingBtn {
     display: flex;
     // align-items: center;
@@ -910,7 +879,8 @@ onBeforeMount(() => {
       background-image: url(@/assets/eduImg/jyImg19.png);
       background-repeat: no-repeat;
       background-size: 100% 100%;
-      cursor: pointer; /* 添加指针样式以指示可点击 */
+      cursor: pointer;
+      /* 添加指针样式以指示可点击 */
     }
 
     .ratingImg {
@@ -920,6 +890,7 @@ onBeforeMount(() => {
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
+
     .onImg.active {
       width: 62px;
       height: 29px;
@@ -927,6 +898,7 @@ onBeforeMount(() => {
       background-repeat: no-repeat;
       background-size: 100% 100%;
     }
+
     span {
       height: 100%;
       display: flex;
@@ -955,20 +927,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;