Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
96b3bb7e by 杨威
Options

整体布局，样式调整

1 parent 3d63876f
Inline Side-by-side
Showing 6 changed files with 85 additions and 34 deletions
...@@ -327,7 +327,7 @@ export default { ...@@ -327,7 +327,7 @@ export default {
327 .basic_layer { 327 .basic_layer {
328 width: 100%; 328 width: 100%;
329 position: relative; 329 position: relative;
330 color: #ffffff; 330 color: #4a4a4a;
331 cursor: pointer; 331 cursor: pointer;
332 .layer_text { 332 .layer_text {
333 flex: 1; 333 flex: 1;
......
...@@ -710,7 +710,7 @@ export default { ...@@ -710,7 +710,7 @@ export default {
710 .basic_layer { 710 .basic_layer {
711 width: 100%; 711 width: 100%;
712 position: relative; 712 position: relative;
713 color: #ffffff; 713 color: #4a4a4a;
714 cursor: pointer; 714 cursor: pointer;
715 -moz-user-select: none; 715 -moz-user-select: none;
716 -o-user-select: none; 716 -o-user-select: none;
......
...@@ -7,9 +7,24 @@ ...@@ -7,9 +7,24 @@
7 class="logo-img" 7 class="logo-img"
8 src="@/assets/images/logo-realestate.png" 8 src="@/assets/images/logo-realestate.png"
9 alt="" 9 alt=""
10 @click="toHome"
10 /> 11 />
11 <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span> 12 <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span>
12 </div> 13 </div>
14
15 <div class="search-box">
16 <el-input
17 maxlength="28"
18 v-model="treeKey"
19 class="searchInput"
20 placeholder="请输入关键字"
21 ><i
22 slot="suffix"
23 class="el-input__icon el-icon-search"
24 @click="inputChange"
25 ></i
26 ></el-input>
27 </div>
13 <div class="treeModule" :style="{height:treeHeight+'px'}"> 28 <div class="treeModule" :style="{height:treeHeight+'px'}">
14 <LineTree :pd="pd" v-if="lineTreeVisible" @itemClick="itemClick"></LineTree> 29 <LineTree :pd="pd" v-if="lineTreeVisible" @itemClick="itemClick"></LineTree>
15 </div> 30 </div>
...@@ -17,25 +32,26 @@ ...@@ -17,25 +32,26 @@
17 <el-container class="calcWidth"> 32 <el-container class="calcWidth">
18 <el-header> 33 <el-header>
19 <div class="header-top"> 34 <div class="header-top">
20 <div class="top-items" @click="toggleClick"> 35 <!-- <div class="top-items" @click="toggleClick">
21 <i class="iconfont iconsuojin" v-show="!isActive"></i> 36 <i class="iconfont iconsuojin" v-show="!isActive"></i>
22 <i class="iconfont iconzhankai" v-show="isActive"></i> 37 <i class="iconfont iconzhankai" v-show="isActive"></i>
23 </div> 38 </div> -->
24 <div 39 <div
25 class="top-items" 40 class="top-items"
26 v-for="(item, index) in headTop" 41 v-for="(item, index) in headTop"
27 :key="index + '1'" 42 :key="index + '1'"
28 :class="{ 'is-active': item.select }" 43 :class="{ 'is-active': item.select }"
29 :style="{'height':item.name == '首页' && item.select ? '70'+'px' : '71'+'px'}" 44 :style="{'height':item.name == '首页' && item.select ? '64'+'px' : '65'+'px'}"
30 @click="selectTopItems(index)" 45 @click="selectTopItems(index)"
31 > 46 >
32 <i :class="item.icon"></i> 47 <i :class="item.icon"></i>
33 <span>{{ item.name }}</span> 48 <span>{{ item.name }}</span>
34 </div> 49 </div>
35 50 </div>
36 <div class="top-items tuOrShu" > 51 <div class="right-tools">
37 <i class="iconfont icondiqiu" style="color:#006CFF;font-size:30px" title="图形管理" v-if="!isMap" @click="goMap"></i> 52 <div class="tuOrShu">
38 <i class="iconfont iconxinxi" style="color:#006CFF;font-size:30px" title="属性管理" v-else @click="goBack"></i> 53 <i class="iconfont icondiqiu" title="图形管理" v-if="!isMap" @click="goMap"></i>
54 <i class="iconfont iconxinxi" title="属性管理" v-else @click="goBack"></i>
39 </div> 55 </div>
40 </div> 56 </div>
41 <!-- <div class="header-bottom"> 57 <!-- <div class="header-bottom">
...@@ -131,6 +147,7 @@ export default { ...@@ -131,6 +147,7 @@ export default {
131 treeHeight:0, 147 treeHeight:0,
132 routerInfo:null, 148 routerInfo:null,
133 lineTreeVisible:false, 149 lineTreeVisible:false,
150 treeKey:'',
134 }; 151 };
135 }, 152 },
136 computed: { 153 computed: {
...@@ -251,7 +268,7 @@ export default { ...@@ -251,7 +268,7 @@ export default {
251 }) 268 })
252 } 269 }
253 this.$nextTick(()=>{ 270 this.$nextTick(()=>{
254 this.treeHeight = this.$el.clientHeight - 120; 271 this.treeHeight = this.$el.clientHeight - 117;
255 }); 272 });
256 }, 273 },
257 methods: { 274 methods: {
...@@ -424,6 +441,12 @@ export default { ...@@ -424,6 +441,12 @@ export default {
424 path: "/viewMap", 441 path: "/viewMap",
425 query: routerQuery 442 query: routerQuery
426 }); 443 });
444 },
445 toHome(){
446 this.$router.push({ path: "/panel" });
447 },
448 inputChange(){
449
427 } 450 }
428 }, 451 },
429 }; 452 };
...@@ -444,20 +467,26 @@ export default { ...@@ -444,20 +467,26 @@ export default {
444 .el-header { 467 .el-header {
445 background-color: #fff; 468 background-color: #fff;
446 padding: 0 !important; 469 padding: 0 !important;
447 height: 72px!important; 470 height: 66px!important;
471 position: relative;
448 .header-top { 472 .header-top {
449 height: 72px; 473 height: 66px;
450 // border-bottom: 1px solid#EAEAEA; 474 // border-bottom: 1px solid#EAEAEA;
451 box-sizing: border-box; 475 box-sizing: border-box;
476 background-image: url('../assets/images/banner.png');
477 display: flex;
478 flex-grow: 1;
479 justify-content: center;
480 align-items: center;
452 .top-items { 481 .top-items {
453 cursor: pointer; 482 cursor: pointer;
454 height: 72px; 483 height: 66px;
455 padding: 0 30px; 484 padding: 0 30px;
456 font-size: 18px; 485 font-size: 18px;
457 line-height: 72px; 486 line-height: 66px;
458 float: left; 487 float: left;
459 position: relative; 488 position: relative;
460 color: #4a4a4a; 489 color: #ffffff;
461 // border-left: 1px solid #EAEAEA; 490 // border-left: 1px solid #EAEAEA;
462 /*border-right: 1px solid #EAEAEA;*/ 491 /*border-right: 1px solid #EAEAEA;*/
463 i { 492 i {
...@@ -472,10 +501,11 @@ export default { ...@@ -472,10 +501,11 @@ export default {
472 color: #000; 501 color: #000;
473 } 502 }
474 } 503 }
504 .top-items:hover{
505 background: hsla(0,0%,100%,.2);
506 }
475 .top-items.is-active { 507 .top-items.is-active {
476 color: #006cff; 508 background: hsla(0,0%,100%,.2);
477 height: 71px;
478 border-bottom: 1px solid #FFF;
479 } 509 }
480 } 510 }
481 .header-bottom { 511 .header-bottom {
...@@ -484,40 +514,60 @@ export default { ...@@ -484,40 +514,60 @@ export default {
484 border-bottom: 1px solid rgba(234, 234, 234, 1); 514 border-bottom: 1px solid rgba(234, 234, 234, 1);
485 box-sizing: border-box; 515 box-sizing: border-box;
486 } 516 }
487 517 .right-tools{
488 .tuOrShu{
489 float: right !important; 518 float: right !important;
519 position: absolute;
520 right: 18px;
521 top: 20px;
522 .tuOrShu{
490 .iconfont{ 523 .iconfont{
491 font-size: 21px; 524 color:#ffffff;
525 font-size:30px
492 } 526 }
493 } 527 }
494 } 528 }
529
530 }
495 .el-aside { 531 .el-aside {
496 width: 290px !important; 532 width: 290px !important;
497 background-color: #1d50dd; 533 background-color: #ffffff;
498 color: #333; 534 color: #333;
499 // text-align: center; 535 // text-align: center;
500 overflow: hidden; 536 overflow: hidden;
501 transition: width 0.3s; 537 transition: width 0.3s;
502 .logo-box { 538 .logo-box {
503 width: 100%; 539 width: 100%;
504 height: 120px; 540 height: 66px;
505 border-bottom: 1px solid rgba(255, 255, 255, 0.2); 541 border-bottom: 1px solid rgba(255, 255, 255, 0.2);
506 padding: 30px 0 28px 0;
507 box-sizing: border-box; 542 box-sizing: border-box;
508 display: flex; 543 padding: 10px;
509 flex-direction: column;
510 justify-content: space-between;
511 align-items: center;
512 transition: width 0.3s; 544 transition: width 0.3s;
545 background-color: #287CC5;
513 .logo-img { 546 .logo-img {
514 width: 38px; 547 width: 44px;
515 height: 38px; 548 float: left;
516 } 549 }
517 .logo-text { 550 .logo-text {
518 font-size: 18px; 551 padding-left: 10px;
519 color: rgba(255, 255, 255, 1); 552 color: #ffffff;
520 line-height: 14px; 553 line-height: 44px;
554 font-size: 23px;
555 }
556 }
557 .search-box{
558 height: 48px;
559 background-color: #3FA2E1;
560 box-sizing: border-box;
561 padding: 9px 30px;
562 .searchInput{
563 /deep/ .el-input__inner{
564 height: 30px;
565 line-height: 30px;
566 border-radius: 15px;
567 }
568 /deep/ .el-input__suffix{
569 top: -5px!important;
570 }
521 } 571 }
522 } 572 }
523 .treeModule { 573 .treeModule {
...@@ -556,7 +606,7 @@ export default { ...@@ -556,7 +606,7 @@ export default {
556 z-index: 1; 606 z-index: 1;
557 pointer-events: none; 607 pointer-events: none;
558 -webkit-box-shadow: inset -14px 0px 16px red; 608 -webkit-box-shadow: inset -14px 0px 16px red;
559 box-shadow: inset -23px 0px 16px #1d50dd; 609 box-shadow: inset -23px 0px 16px #ffffff;
560 transition: 0.3s; 610 transition: 0.3s;
561 } 611 }
562 .w0{ 612 .w0{
......
...@@ -88,6 +88,7 @@ ...@@ -88,6 +88,7 @@
88 this.queryData.pageNo=this.pageNo; 88 this.queryData.pageNo=this.pageNo;
89 this.getData(this.queryData); 89 this.getData(this.queryData);
90 this.$nextTick(()=>{ 90 this.$nextTick(()=>{
91 console.log(this.$refs.dataGrid.offsetHeight,'this.$refs.dataGrid.offsetHeight');
91 this.tableHeight = this.$refs.dataGrid.offsetHeight - 68; 92 this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
92 }) 93 })
93 }, 94 },
......