搜索按钮

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

@@ -11,6 +11,7 @@
         width: 480px;
     }
     .g-center {
+        position: relative;
         width: 800px;
     }
     .g-right {
@@ -25,6 +26,53 @@
     margin-bottom: 10px;
 }
 
+.m-search {
+    position: absolute;
+    z-index: 70;
+    top: 560px;
+    left: 0;
+    width: 100%;
+    .btn {
+        position: relative;
+        width: 213px;
+        height: 80px;
+        cursor: pointer;
+        opacity: 0.8;
+
+        > span {
+            position: absolute;
+            top: 0;
+            right: 27px;
+            display: block;
+            line-height: 83px;
+            text-align: right;
+            font-size: 16px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #6fdeff;
+        }
+        > img {
+            display: block;
+            width: 213px;
+            &.btn-bg-hover {
+                display: none;
+            }
+        }
+        &:hover {
+            opacity: 1;
+            > img {
+                .btn-bg {
+                    display: none;
+                }
+
+                .btn-bg-hover {
+                    display: block;
+                }
+            }
+        }
+    }
+}
+
 .m-box {
     .box-title {
         position: relative;
@@ -77,11 +125,11 @@
     height: 423px;
     overflow-y: auto;
 }
-.m-szsq{
-  height: 115px;
+.m-szsq {
+    height: 115px;
 }
-.m-rkfx{
-  height: 253px;
+.m-rkfx {
+    height: 253px;
 }
 
 .m-per {

src/views/dataBoard/renfang/index.vue

@@ -3,8 +3,10 @@
     <div class="g-left">
       <div class="m-box">
         <div class="box-title">
-          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
-               class="box-title-bg" />
+          <img
+            src="~@/assets/images/shuju/main/card-title-bg-480.png"
+            class="box-title-bg"
+          />
           <div class="box-title-txt">房屋概览</div>
         </div>
 
@@ -15,8 +17,10 @@
 
       <div class="m-box">
         <div class="box-title">
-          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
-               class="box-title-bg" />
+          <img
+            src="~@/assets/images/shuju/main/card-title-bg-480.png"
+            class="box-title-bg"
+          />
           <div class="box-title-txt">居民概览</div>
         </div>
 
@@ -30,8 +34,10 @@
       <div class="m-map">
         <div class="m-per">
           <div class="item">
-            <img class="item-icon"
-                 src="~@/assets/images/shuju/renfang/index/per/lnr.png" />
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/lnr.png"
+            />
             <div class="item-info">
               <div>老年人</div>
               <div>
@@ -41,8 +47,10 @@
             </div>
           </div>
           <div class="item">
-            <img class="item-icon"
-                 src="~@/assets/images/shuju/renfang/index/per/qsn.png" />
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/qsn.png"
+            />
             <div class="item-info">
               <div>青少年</div>
               <div>
@@ -52,8 +60,10 @@
             </div>
           </div>
           <div class="item">
-            <img class="item-icon"
-                 src="~@/assets/images/shuju/renfang/index/per/zyz.png" />
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/zyz.png"
+            />
             <div class="item-info">
               <div>志愿者</div>
               <div>
@@ -63,8 +73,10 @@
             </div>
           </div>
           <div class="item">
-            <img class="item-icon"
-                 src="~@/assets/images/shuju/renfang/index/per/dy.png" />
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/dy.png"
+            />
             <div class="item-info">
               <div>党员</div>
               <div>
@@ -74,8 +86,10 @@
             </div>
           </div>
           <div class="item">
-            <img class="item-icon"
-                 src="~@/assets/images/shuju/renfang/index/per/syry.png" />
+            <img
+              class="item-icon"
+              src="~@/assets/images/shuju/renfang/index/per/syry.png"
+            />
             <div class="item-info">
               <div>失业人员</div>
               <div>
@@ -86,27 +100,48 @@
           </div>
         </div>
 
-        <grid-map v-if="orgData.id"
-                  @clickAgency="clickAgencyItem"
-                  :srcGridData="orgData" />
+        <grid-map
+          v-if="orgData.id"
+          @clickAgency="clickAgencyItem"
+          :srcGridData="orgData"
+        />
+      </div>
+
+      <div class="m-search">
+        <div class="btn">
+          <img
+            src="~@/assets/images/shuju/renfang/index/search/btn-bg.png"
+            class="btn-bg"
+          />
+          <img
+            src="~@/assets/images/shuju/renfang/index/search/btn-bg-hover.png"
+            class="btn-bg-hover"
+          />
+          <span>点击搜索</span>
+        </div>
       </div>
 
       <div class="m-box m-cate">
         <div class="box-title">
-          <img src="~@/assets/images/shuju/main/card-title-bg-800.png"
-               class="box-title-bg" />
+          <img
+            src="~@/assets/images/shuju/main/card-title-bg-800.png"
+            class="box-title-bg"
+          />
           <div class="box-title-txt">居民分类分析</div>
 
           <div class="box-title-btn">
             <img src="~@/assets/images/shuju/renfang/index/znyc.png" />
             <span>智能预测</span>
+            <img src="~@/assets/images/shuju/renfang/index/i-hint.png" />
           </div>
         </div>
 
         <div class="list">
-          <div class="item"
-               :key="item.code"
-               v-for="(item, index) in warningData">
+          <div
+            class="item"
+            :key="item.code"
+            v-for="(item, index) in warningData"
+          >
             <div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
             <div class="item-name">{{ item.name }}</div>
             <div class="item-count">
@@ -117,10 +152,11 @@
             </div>
             <div class="item-per">
               <span>较上月</span>
-              <img v-if="false"
-                   src="~@/assets/images/shuju/renfang/index/up.png" />
-              <img v-else
-                   src="~@/assets/images/shuju/renfang/index/down.png" />
+              <img
+                v-if="false"
+                src="~@/assets/images/shuju/renfang/index/up.png"
+              />
+              <img v-else src="~@/assets/images/shuju/renfang/index/down.png" />
               <b>{{ item.count }}</b>
               <span>人</span>
             </div>
@@ -132,8 +168,10 @@
     <div class="g-right">
       <div class="m-box">
         <div class="box-title">
-          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
-               class="box-title-bg" />
+          <img
+            src="~@/assets/images/shuju/main/card-title-bg-480.png"
+            class="box-title-bg"
+          />
           <div class="box-title-txt">数字社区</div>
         </div>
 
@@ -143,8 +181,10 @@
       </div>
       <div class="m-box">
         <div class="box-title">
-          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
-               class="box-title-bg" />
+          <img
+            src="~@/assets/images/shuju/main/card-title-bg-480.png"
+            class="box-title-bg"
+          />
           <div class="box-title-txt">人口分析</div>
         </div>
 
@@ -155,8 +195,10 @@
 
       <div class="m-box">
         <div class="box-title">
-          <img src="~@/assets/images/shuju/main/card-title-bg-480.png"
-               class="box-title-bg" />
+          <img
+            src="~@/assets/images/shuju/main/card-title-bg-480.png"
+            class="box-title-bg"
+          />
           <div class="box-title-txt">人口预警</div>
         </div>
 
@@ -181,7 +223,7 @@ import getQueryPara from "dai-js/modules/getQueryPara";
 export default {
   components: { gridMap, fwgl, jmgl, rkfx, rkyj, szsq },
 
-  data () {
+  data() {
     return {
       orgData: {}, //当前组织对象
       orgId: "",
@@ -191,7 +233,7 @@ export default {
       warningData: [],
     };
   },
-  async mounted () {
+  async mounted() {
     const queryOrgId = getQueryPara("orgId");
     const queryOrgLevel = getQueryPara("orgLevel");
     console.log("orgId", queryOrgId);
@@ -206,7 +248,7 @@ export default {
   },
   methods: {
     //加载组织数据
-    async getWarningList () {
+    async getWarningList() {
       const url = "/epmetuser/statsresiwarn/list";
       let params = {
         id: this.orgData.id,
@@ -230,7 +272,7 @@ export default {
     },
 
     //加载组织数据
-    async loadOrgData () {
+    async loadOrgData() {
       const url = "/gov/org/agency/maporg";
       let params = {
         orgId: this.orgId,