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

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;