增加点击显示隐藏，取消箭头，取消时间，增加按钮跳转

FrontCode2/sunshine_levy/src/views/index.vue

@@ -50,6 +50,8 @@
             <img src="@/assets/img/project.png" />
           </div>
           <span class="projectTitle">{{ item.name }}</span>
+
+          <div class="absolute0"></div>
         </div>
         <!-- 补偿协议图标 -->
         <div class="projectRight">
@@ -57,6 +59,8 @@
             <img src="@/assets/img/yhxy.png" />
           </div>
           <span>{{ item.currentState }}</span>
+
+          <div class="absolute"></div>
         </div>
       </div>
       <div class="projectCenter">
@@ -95,6 +99,8 @@
         <div class="assess">
           <van-image :src="require('@/assets/img/assess_1.png')" />
           <span>分户评估结果</span>
+
+          <div class="absolute1"></div>
         </div>
         <div
           :key="assess.id"
@@ -123,6 +129,8 @@
         <div class="assess2">
           <van-image :src="require('@/assets/img/assess_2.png')" />
           <span>补偿结果</span>
+
+          <div class="absolute2"></div>
         </div>
         <div
           :key="protocol.id"
@@ -353,6 +361,8 @@ export default {
     if (sessionStorage.getItem("mode") == "older") {
       $(".container").addClass("old_container");
     }
+
+    this.setDisplay();
   },
   methods: {
     // 获取数据
@@ -557,6 +567,108 @@ export default {
         .catch(error => {
           console.log(error);
         });
+    },
+
+    /**
+     * @项目折叠与隐藏
+     */
+
+    setDisplay() {
+      $(".absolute").click(e => {
+        if (
+          $(e.target.parentNode.parentNode)
+            .find(".projectCenter")
+            .css("display") == "none"
+        ) {
+          $(e.target.parentNode.parentNode)
+            .find(".projectCenter")
+            .css("display", "block");
+
+          $(e.target.parentNode)
+            .find("i")
+            .css("transform", "rotate(45deg)");
+        } else {
+          $(e.target.parentNode.parentNode)
+            .find(".projectCenter")
+            .css("display", "none");
+
+          $(e.target.parentNode)
+            .find("i")
+            .css("transform", "rotate(-45deg)");
+        }
+      });
+
+      $(".absolute0").click(e => {
+        if (
+          $(e.target.parentNode.parentNode.parentNode)
+            .find(".projectCenter")
+            .css("display") == "none"
+        ) {
+          $(e.target.parentNode.parentNode.parentNode)
+            .find(".projectCenter")
+            .css("display", "block");
+
+          $(e.target.parentNode)
+            .find("i")
+            .css("transform", "rotate(45deg)");
+        } else {
+          $(e.target.parentNode.parentNode.parentNode)
+            .find(".projectCenter")
+            .css("display", "none");
+
+          $(e.target.parentNode)
+            .find("i")
+            .css("transform", "rotate(-45deg)");
+        }
+      });
+
+      $(".absolute1").click(e => {
+        if (
+          $(e.target.parentNode.parentNode)
+            .find(".assessCenter1")
+            .css("display") == "none"
+        ) {
+          $(e.target.parentNode.parentNode)
+            .find(".assessCenter1")
+            .css("display", "block");
+
+          $(e.target.parentNode)
+            .find("i")
+            .css("transform", "rotate(45deg)");
+        } else {
+          $(e.target.parentNode.parentNode)
+            .find(".assessCenter1")
+            .css("display", "none");
+
+          $(e.target.parentNode)
+            .find("i")
+            .css("transform", "rotate(-45deg)");
+        }
+      });
+
+      $(".absolute2").click(e => {
+        if (
+          $(e.target.parentNode.parentNode)
+            .find(".assessCenter2")
+            .css("display") == "none"
+        ) {
+          $(e.target.parentNode.parentNode)
+            .find(".assessCenter2")
+            .css("display", "block");
+
+          $(e.target.parentNode)
+            .find("i")
+            .css("transform", "rotate(45deg)");
+        } else {
+          $(e.target.parentNode.parentNode)
+            .find(".assessCenter2")
+            .css("display", "none");
+
+          $(e.target.parentNode)
+            .find("i")
+            .css("transform", "rotate(-45deg)");
+        }
+      });
     }
   }
 };
@@ -661,11 +773,13 @@ export default {
   justify-content: space-between;
   height: 41px;
   background: url(../assets/img/project_bg.png) no-repeat 0 -2px/101% 120%;
+  position: relative;
   > :nth-child(1) {
     display: flex;
     align-items: center;
     width: 50%;
     height: 100%;
+    position: relative;
     .projectIcon {
       display: flex;
       align-items: center;
@@ -685,6 +799,25 @@ export default {
       overflow: hidden;
       text-overflow: ellipsis;
     }
+
+    i {
+      display: inline-block;
+
+      height: 9px;
+      width: 9px;
+      border-right: 2px solid white;
+      border-bottom: 2px solid white;
+      transform: rotate(45deg);
+      margin-left: 7px;
+    }
+
+    > :last-child {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
   }
   .projectRight {
     display: flex;
@@ -712,6 +845,13 @@ export default {
       line-height: 27px;
     }
   }
+  > :last-child {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
 }
 .projectTitle {
   font-family: PingFangSC-Semibold, PingFang SC;
@@ -757,6 +897,7 @@ export default {
     align-items: center;
     height: 25px;
     padding: 25px 10px 0px;
+    position: relative;
     .van-image {
       width: 24px;
       height: 24px;
@@ -769,6 +910,25 @@ export default {
       font-weight: 400;
       color: #2468f2;
     }
+
+    i {
+      display: inline-block;
+
+      height: 8px;
+      width: 8px;
+      border-right: 2px solid #2468f2;
+      border-bottom: 2px solid #2468f2;
+      transform: rotate(45deg);
+      margin-left: 7px;
+    }
+
+    > :last-child {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
   }
   .assessCenter1 {
     margin: 25px 16px 22px;
@@ -797,6 +957,7 @@ export default {
     align-items: center;
     height: 25px;
     padding: 0 10px;
+    position: relative;
     .van-image {
       width: 24px;
       height: 24px;
@@ -808,6 +969,25 @@ export default {
       font-weight: 400;
       color: #2468f2;
     }
+
+    i {
+      display: inline-block;
+
+      height: 8px;
+      width: 8px;
+      border-right: 2px solid #2468f2;
+      border-bottom: 2px solid #2468f2;
+      transform: rotate(45deg);
+      margin-left: 7px;
+    }
+
+    > :last-child {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
   }
   .assessCenter2 {
     margin: 25px 16px 22px;

FrontCode2/sunshine_levy/src/views/project/index.vue

@@ -21,7 +21,6 @@
           </div>
           <div class="proCenterFlex">
             <div class="proCenterFlexFont">请选择您的征收项目</div>
-            <van-icon color="#9da2a3" name="arrow-down" />
           </div>
         </div>
       </div>
@@ -47,9 +46,6 @@
             <div class="proTitleBox">{{ item.name }}</div>
           </div>
           <van-divider style="margin:8px 0;" />
-          <div class="proDateBox">
-            <div>{{ item.createRecordTime }}</div>
-          </div>
         </div>
       </van-list>
     </div>

FrontCode2/sunshine_levy/src/views/report/agreement.vue

@@ -6,7 +6,6 @@
     <div class="text">为您查询到{{ prjListLength }}条结果</div>
     <div
       :key="index"
-      @click="showPdf(item.id)"
       v-for="(item, index) in info.prjList.bcxyList"
       class="content"
     >
@@ -41,11 +40,13 @@
         <div class="line">
           <img alt src="@/assets/img/hengxian.png" />
         </div>
-        <div class="flex">
+        <div class="smallBox">
           <div class="flex backgroundColor">
             <img alt src="@/assets/img/shijian.png" />
             <span>签订日期：{{ item.signTime }}</span>
           </div>
+
+          <span @click="showPdf(item.id)">查看协议pdf</span>
         </div>
       </el-card>
     </div>
@@ -199,6 +200,20 @@ export default {
           white-space: nowrap;
         }
       }
+
+      .smallBox {
+        display: flex;
+        flex-direction: column;
+        height: auto;
+
+        > :nth-child(2) {
+          text-align: center;
+          margin-top: 10px;
+          padding: 2px 5px;
+          color: #3c70dd;
+          border: 1px solid #2d6df2;
+        }
+      }
     }
   }
 }