首页又做了一点点

src/assets/scss/dataBoard/renfang/index.scss

@@ -19,6 +19,7 @@
 }
 
 .m-map {
+    position: relative;
     width: 100%;
     height: 650px;
     margin-bottom: 10px;
@@ -77,6 +78,44 @@
     overflow-y: auto;
 }
 
+.m-per {
+    position: absolute;
+    z-index: 100;
+    top: 20px;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+
+    .item {
+        display: flex;
+        width: 160px;
+        
+        img {
+            display: block;
+            margin-right: 16px;
+            width: 48px;
+            height: 48px;
+        }
+        .item-info {
+            font-size: 14px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: rgba(255, 255, 255, 0.65);
+            line-height: 20px;
+            vertical-align: bottom;
+            div {
+                margin-bottom: 6px;
+            }
+            b {
+                font-weight: 500;
+                font-size: 24px;
+                color: #ffffff;
+            }
+        }
+    }
+}
+
 .m-cate {
     .list {
         @include scrollBar;
@@ -97,6 +136,13 @@
 
             &:hover {
                 color: #fff;
+
+                .item-progress {
+                    b::after {
+                        transition: background-position 1.3s;
+                        background-position: -100% -100%;
+                    }
+                }
             }
 
             .item-name {
@@ -148,9 +194,29 @@
                 border-radius: 1px;
                 overflow: hidden;
                 b {
+                    position: relative;
                     display: block;
                     height: 16px;
                     background: linear-gradient(270deg, #6fdeff 0%, rgba(111, 222, 255, 0.1) 100%);
+
+                    &::after {
+                        content: "";
+                        position: absolute;
+                        left: 0;
+                        top: 0;
+                        right: 0;
+                        bottom: 0;
+                        background: linear-gradient(
+                                -45deg,
+                                transparent 40%,
+                                transparent,
+                                rgba(255, 255, 255, 0.5),
+                                transparent 60%
+                            )
+                            no-repeat;
+                        background-size: 200% 200%;
+                        background-position: 200% 200%;
+                    }
                 }
             }
         }

src/views/dataBoard/renfang/index.vue

@@ -28,6 +28,74 @@
 
     <div class="g-center">
       <div class="m-map">
+        <div class="m-per">
+          <div class="item">
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/lnr.png"
+            />
+            <div class="item-info">
+              <div>老年人</div>
+              <div>
+                <b>10.22</b>
+                %
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/qsn.png"
+            />
+            <div class="item-info">
+              <div>青少年</div>
+              <div>
+                <b>10.22</b>
+                %
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/zyz.png"
+            />
+            <div class="item-info">
+              <div>志愿者</div>
+              <div>
+                <b>10.22</b>
+                %
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/dy.png"
+            />
+            <div class="item-info">
+              <div>党员</div>
+              <div>
+                <b>10.22</b>
+                %
+              </div>
+            </div>
+          </div>
+          <div class="item">
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/syry.png"
+            />
+            <div class="item-info">
+              <div>失业人员</div>
+              <div>
+                <b>10.22</b>
+                %
+              </div>
+            </div>
+          </div>
+        </div>
+
         <grid-map
           v-if="orgData.id"
           @clickAgency="clickAgencyItem"