update:更新页面样式

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

@@ -17,7 +17,7 @@
             <div>
               <span class="proCenterFont">身份证号：</span>
               <span class="proCenterFont" style="color:#626262;">{{
-                info.idCard
+                setIdCard(info.idCard)
               }}</span>
             </div>
           </div>
@@ -68,6 +68,7 @@
 
 <script>
 import "./project.css";
+import $ from "jquery";
 export default {
   data() {
     return {
@@ -85,7 +86,9 @@ export default {
             area: "无数据",
             currentState: "无数据",
             zsbm: "无数据",
-            year: "无数据"
+            year: "无数据",
+            name: "无数据",
+            createRecordTime: "无数据"
           }
         ]
       }
@@ -94,6 +97,19 @@ export default {
   created() {
     this.onInit();
   },
+  mounted() {
+    if (
+      650 >=
+      $(".container")
+        .css("height")
+        .substr(0, 5)
+    ) {
+      $(".bottomContent").addClass("absolute");
+      $(".bottomContent").css("marginBottom", "0");
+    } else {
+      $(".absolute").removeClass("absolute");
+    }
+  },
   methods: {
     // 获取数据
     onInit() {
@@ -106,6 +122,11 @@ export default {
         JSON.stringify(this.$store.state.homeData.data.data)
       );
     },
+    setIdCard(id) {
+      return id == "无数据"
+        ? id
+        : id.substr(0, 6) + "XXXXXXXX" + id.substr(14, 4);
+    },
     // 页面跳转
     gotoDetail(id) {
       if (window.sessionStorage.getItem("type") == "pg") {
@@ -131,6 +152,10 @@ export default {
 </script>
 <style lang="less" scoped>
 .container {
+  .absolute {
+    position: absolute;
+    bottom: 10px;
+  }
   .bottomContent {
     margin-bottom: 10px;
     text-align: center;

FrontCode2/sunshine_levy/src/views/project/project.css

@@ -1,79 +1,75 @@
 .proTopBoxpg {
-  position: absolute;
-
+  /* position: absolute; */
   display: flex;
   justify-content: space-around;
-
   width: 94%;
   height: 220px;
   margin: 10px;
-
   background: url(../../assets/img/zspg.png);
   background-repeat: no-repeat;
   background-size: 100% 90px;
 }
-.proTopBoxxy {
-  position: absolute;
 
+.proTopBoxxy {
+  /* position: absolute; */
   display: flex;
   justify-content: space-around;
-
   width: 94%;
   height: 220px;
   margin: 10px;
-
   background: url(../../assets/img/zsxy.png);
   background-repeat: no-repeat;
   background-size: 100% 90px;
 }
+
 .proCenterBox {
   overflow: hidden;
-
   width: 95%;
   margin-top: 78px;
-
   border-radius: 6px;
   background: rgba(248, 253, 255, 1);
   box-shadow: 1px 1px 3px rgb(202, 201, 201);
 }
+
 .proList {
-  position: absolute;
-  top: 230px;
+  /* position: absolute; */
+  /* top: 230px; */
   bottom: 0;
-
   overflow-y: scroll;
-
   width: 100%;
 }
+
 .proCenterInfo {
   display: flex;
-
   padding-top: 20px;
 }
+
 .proCenterImg {
   width: 45px;
   height: 45px;
   padding-right: 10px;
   padding-left: 15px;
 }
+
+
+/* 协议签订阶段 */
+
 .proCenterFont {
-  font-family: PingFangSC-Regular,
-  PingFang SC;
+  font-family: PingFangSC-Regular, PingFang SC;
   font-size: 14px;
   font-weight: 500;
   line-height: 25px;
-
   height: 25px;
-
   color: #09a4fa;
 }
+
 .proCenterFlex {
   display: flex;
   align-items: center;
   flex-direction: column;
-
   padding-top: 15px;
 }
+
 .proCenterFlexImg {
   width: 20px;
   height: 12px;
@@ -81,71 +77,76 @@
   padding-right: 10px;
   padding-left: 15px;
 }
+
 .proCenterFlexFont {
-  font-family: PingFangSC-Regular,
-  PingFang SC;
+  font-family: PingFangSC-Regular, PingFang SC;
   font-size: 12px;
   font-weight: 400;
   line-height: 25px;
-
   height: 25px;
-
   color: #9da2a3;
 }
+
 .shadow {
   -webkit-box-shadow: rgb(189, 189, 189) 0 0 3px;
-     -moz-box-shadow: rgb(189, 189, 189) 0 0 3px;
-          box-shadow: rgb(189, 189, 189) 0 0 3px;
+  -moz-box-shadow: rgb(189, 189, 189) 0 0 3px;
+  box-shadow: rgb(189, 189, 189) 0 0 3px;
 }
+
 .proListBox {
   height: 127px;
   margin: 15px 20px;
-
   border-radius: 3px;
   background-color: #fff;
 }
+
+
+/* 项目名字 */
+
 .proAreaBox {
   display: flex;
   align-items: center;
   justify-content: space-between;
-
   padding: 10px;
+  font-size: 16px;
 }
+
+
+/* 项目地区 */
+
 .proArea {
   font-family: PingFangSC-Regular;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   line-height: 25px;
-
   height: 25px;
   padding: 3px 17px;
-
   color: #fff;
   border-radius: 4px;
   background: #09a4fa;
 }
+
 .proTitleBox {
-  font-family: PingFangSC-Regular,
-  PingFang SC;
+  font-family: PingFangSC-Regular, PingFang SC;
   font-size: 15px;
   font-weight: 600;
   line-height: 20px;
-
   overflow: hidden;
-
   height: 20px;
   margin-left: 10px;
   padding-left: 7px;
-
   white-space: nowrap;
   text-overflow: ellipsis;
-
   color: #252525;
   border-left: 3px solid #09a4fa;
 }
+
+
+/* 底部日期 */
+
 .proDateBox {
   display: flex;
   flex-direction: row-reverse;
-
   padding-right: 10px;
-}
+  font-size: 12px;
+}