基础信息

src/assets/scss/modules/visual/basicInfoMain.scss

@@ -0,0 +1,96 @@
+.div_top {
+  height: 35px;
+  .router_line {
+    width: 212px;
+    height: 1px;
+    border: 1px solid #ffffff;
+    opacity: 0.09;
+    /* opacity: 0.09; */
+  }
+  .div_router {
+    margin-top: 5px;
+    font-size: 16px;
+
+    .router_parents {
+      color: #a0c3d9;
+
+      .arrow {
+        padding: 0 5px;
+      }
+    }
+
+    .router_child {
+      color: #ffffff;
+    }
+  }
+}
+
+.div_content {
+  display: flex;
+  .div_map {
+    width: 100%;
+  }
+  .div_data {
+    flex: 0 0 562px;
+    margin-left: 12px;
+
+    .div_search {
+      width: 100%;
+      height: 56px;
+      background: #011168;
+      border-radius: 4px;
+      text-align: center;
+      display: flex;
+      justify-content: flex-end;
+
+      .icon {
+        display: flex;
+        align-items: center;
+        margin-left: 29px;
+        margin-top: 16px;
+
+        > img {
+          width: 24px;
+          height: 24px;
+        }
+      }
+
+      .btn {
+        text-align: center;
+        flex: 0 0 113px;
+        height: 56px;
+        background: linear-gradient(90deg, #1a5afd, #26c4ff);
+        font-size: 20px;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 56px;
+        border-radius: 0 4px 4px 0;
+      }
+    }
+
+    .div_infolist {
+      box-sizing: border-box;
+      width: 100%;
+      margin-top: 21px;
+      height: calc(88vh - 77px);
+      color: #fff;
+      background: url('../../../img/modules/visual/warning-box.png') no-repeat
+        center;
+      background-size: 100% 100%;
+      // padding: 45px 21px 35px 24px;
+    }
+  }
+}
+
+.warning-box {
+  box-sizing: border-box;
+  width: 1881px;
+  height: 914px;
+  margin: auto;
+  color: #fff;
+  background: url('../../../img/modules/visual/warning-box.png') no-repeat
+    center;
+  background-size: 100% 100%;
+  padding: 45px 21px 35px 24px;
+}

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

@@ -1,9 +1,8 @@
 <template>
-  <div calss="div_main"
-       style="position: relative">
+  <div style="position: relative">
 
     <!-- 组织路由 -->
-    <div>
+    <div class="div_top">
       <div class="router_line"></div>
       <div class="div_router">
         <span class="router_parents"
@@ -22,16 +21,22 @@
 
       <div class="div_data">
         <div class="div_search">
-          <el-input style="width:200px"
-                    v-model="name"
-                    placeholder="请输入姓名"></el-input>
-
-          <el-button style="margin-left:10px"
-                     type="primary"
-                     icon="el-icon-plus"
-                     @click="handleSearch">搜索</el-button>
+          <el-input size="mini"
+                    WarningColor='warning'
+                    placeholder="请输入姓名"
+                    v-model="name">
+            <i slot="prefix"
+               class="icon">
+              <img src="../../../../assets/img/modules/visual/sousuo.png"
+                   alt />
+            </i>
+          </el-input>
+
+          <div class="btn"
+               @click="handleSearch">搜索</div>
 
         </div>
+        <div class="div_infolist"></div>
       </div>
     </div>
 
@@ -146,7 +151,6 @@ const vueGis = {
 
     },
 
-
     //刷新地图
     async refreshMap (isRefreshView) {
       //加载组织数据
@@ -163,10 +167,8 @@ const vueGis = {
       }
     },
 
-
     //返回上一级组织
     handleBack () {
-
       this.runNum--
       this.runAgency.pop()
       if (this.runNum === 0) {
@@ -184,7 +186,6 @@ const vueGis = {
     //加载组织数据
     async loadOrgData () {
       const url = "/gov/org/agency/maporg"
-      // const url = "http://yapi.elinkservice.cn/mock/245/gov/org/agency/maporg"
       let params = {
         orgId: this.orgId,
         level: this.orgLevel
@@ -194,11 +195,9 @@ const vueGis = {
 
       if (code === 0) {
         this.orgData = data
-        this.runAgency.push(data)
 
         if (data.children && data.children.length > 0) {
           this.subAgencyArray = data.children
-
         }
 
       } else {
@@ -270,7 +269,6 @@ const vueGis = {
     toSubAgency (e) {
       console.log(e)
 
-      //下钻到下一级
       this.subAgencyArray.forEach(item => {
         if (item.id === e.selected[0].id_) {
           this.selPolygonId = item.id
@@ -286,7 +284,6 @@ const vueGis = {
 
       this.refreshMap(true)
 
-
     },
 
     //设置地图定位的中心点和缩放级别
@@ -466,60 +463,27 @@ const vueGis = {
 export default vueGis;
 </script>
 
-<style lang="scss">
-.div_main {
-  background-color: #12a3ff;
-}
-.router_line {
-  width: 106px;
-  height: 1px;
-  border: 1px solid #000000;
-  /* opacity: 0.09; */
-}
-.div_router {
-  margin-top: 5px;
-
-  .router_parents {
-    color: #a0c3d9;
-    font-size: 8px;
-
-    .arrow {
-      padding: 0 5px;
-    }
-  }
-
-  .router_child {
-    color: #ffffff;
-    font-size: 8px;
-  }
-}
-
-.div_search {
-  text-align: center;
-  margin-top: 20px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/basicInfoMain.scss"
+  scoped
+></style>
 
-.div_content {
-  margin-top: 10px;
-  padding: 10px 10px;
-  display: flex;
-}
-
-.div_map {
-  width: 100%;
-}
-.div_data {
-  flex: 0 0 400px;
-  margin-left: 20px;
-  background-color: rgb(233, 235, 235);
-  border-radius: 5px;
-}
-</style>  
-<style>
+<style lang=scss>
 .ol-overlaycontainer-stopevent {
   display: none;
 }
+.el-input__inner[WarningColor="warning"] {
+  background-color: #011168;
+  border-radius: 4px 0 0 4px;
+  height: 56px;
+  border: none;
+  box-shadow: 0 0 10px inset #1a5afd;
+  padding-left: 70px;
+  font-size: 18px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #ffffff;
+  opacity: 0.7;
+}
 </style>