人员详情样式写了点

src/assets/scss/people.scss

@@ -2,6 +2,7 @@
 @import "c/function";
 
 .m-people {
+    position: relative;
     width: 850px;
 
     .title {
@@ -22,9 +23,110 @@
         }
     }
 
+    .more {
+        // position: absolute;
+        margin-left: auto;
+        margin-top: -10px;
+        width: 90px;
+        height: 29px;
+        line-height: 29px;
+        background: linear-gradient(90deg, #1a5afd, #26c4ff);
+        border-radius: 15px;
+        font-size: 14px;
+        font-family: PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        text-align: center;
+    }
+
     .ren {
+        position: relative;
+        margin-top: 0;
+        padding-bottom: 15px;
+
         .pic-ren {
             margin: 0 auto;
+            pointer-events: none;
+        }
+        .ren-prop {
+            position: absolute;
+            width: 100px;
+            height: 120px;
+
+            &.z-1 {
+                left: 170px;
+                top: 10px;
+            }
+            &.z-6 {
+                right: 170px;
+                top: 10px;
+            }
+            &.z-2 {
+                left: 55px;
+                top: 110px;
+            }
+            &.z-5 {
+                right: 55px;
+                top: 110px;
+            }
+            &.z-3 {
+                left: 115px;
+                top: 245px;
+            }
+            &.z-4 {
+                right: 115px;
+                top: 245px;
+            }
+
+            > img {
+                margin: 0 auto;
+            }
+            > span {
+                display: block;
+                font-size: 16px;
+                line-height: 30px;
+                font-family: PingFang SC;
+                font-weight: 500;
+                color: #ffffff;
+                text-align: center;
+            }
+
+            &:hover {
+                .ren-cnt {
+                    display: block;
+                }
+            }
+
+            .ren-cnt {
+                position: absolute;
+                z-index: 10;
+                display: none;
+                box-sizing: border-box;
+                top: 60px;
+                left: 90px;
+                padding: 10px;
+                width: 162px;
+                min-height: 60px;
+                background: rgba(#b7c7e0, 0.24);
+                line-height: 20px;
+
+                h5 {
+                    margin: 0;
+                    font-size: 16px;
+                    font-family: PingFang SC;
+                    font-weight: 500;
+                    color: #fefefe;
+                }
+
+                p {
+                    margin: 0;
+                    margin-top: 4px;
+                    font-size: 14px;
+                    font-family: PingFang SC;
+                    font-weight: 400;
+                    color: #fefefe;
+                }
+            }
         }
     }
 }

src/views/modules/visual/basicinfo/people.vue

@@ -7,15 +7,66 @@
             <img src="@/assets/img/shuju/title-tip.png" />
             <span>人员情况</span>
           </div>
+          <div class="more">查看更多</div>
           <div class="ren">
             <img class="pic-ren" src="@/assets/img/shuju/people/ren.png" />
-            <div class="ren-prop">
-              <img class="pic-ren" src="@/assets/img/shuju/people/ren-prop-1.png" />
+            <div class="ren-prop z-1">
+              <img src="@/assets/img/shuju/people/ren-prop-1.png" />
               <span>所属网格</span>
 
               <div class="ren-cnt">
-                <p>所属网格</p>
-                <p>惺惺惜惺惺</p>
+                <h5>所属网格：</h5>
+                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-2">
+              <img src="@/assets/img/shuju/people/ren-prop-2.png" />
+              <span>人员类别</span>
+
+              <div class="ren-cnt">
+                <h5>人员类别：</h5>
+                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-3">
+              <img src="@/assets/img/shuju/people/ren-prop-3.png" />
+              <span>工作单位</span>
+
+              <div class="ren-cnt">
+                <h5>工作单位：</h5>
+                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-4">
+              <img src="@/assets/img/shuju/people/ren-prop-4.png" />
+              <span>志愿者类别</span>
+
+              <div class="ren-cnt">
+                <h5>志愿者类别：</h5>
+                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-5">
+              <img src="@/assets/img/shuju/people/ren-prop-5.png" />
+              <span>房屋信息</span>
+
+              <div class="ren-cnt">
+                <h5>房屋信息：</h5>
+                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
+              </div>
+            </div>
+
+            <div class="ren-prop z-6">
+              <img src="@/assets/img/shuju/people/ren-prop-6.png" />
+              <span>经济状况</span>
+
+              <div class="ren-cnt">
+                <h5>经济状况：</h5>
+                <p>惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺惺惺惜惺惺</p>
               </div>
             </div>
           </div>