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 123 additions and 72 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: {
...@@ -386,45 +403,51 @@ export default { ...@@ -386,45 +403,51 @@ export default {
386 this.$store.state.newZdbsm = ''; 403 this.$store.state.newZdbsm = '';
387 }) 404 })
388 }, 405 },
389 goBack(){ 406 goBack(){
390 this.isMap = false; 407 this.isMap = false;
391 var curretRouterInfo = JSON.parse(sessionStorage.getItem("curretRouterInfo")); 408 var curretRouterInfo = JSON.parse(sessionStorage.getItem("curretRouterInfo"));
392 //this.$router.back(-1); 409 //this.$router.back(-1);
393 if(curretRouterInfo){ 410 if(curretRouterInfo){
411 this.$router.push({
412 path: curretRouterInfo.path,
413 query: curretRouterInfo.query
414 });
415 }else {
416 this.$router.back(-1);
417 }
418
419 },
420 goMap(){
421 var curretRouterInfo = {
422 path:this.$route.path,
423 query:this.$route.query
424 }
425 sessionStorage.setItem('curretRouterInfo',JSON.stringify(curretRouterInfo));
426 this.isMap = true;
427 var routerQuery = null;
428 var path = this.$route.path;
429 if(path == "/zd"){
430 routerQuery = {
431 bsm:this.$route.query.bsm,
432 type:"zd"
433 };
434 }else if(path == "/zrz"){
435 routerQuery = {
436 bsm:this.$route.query.bsm,
437 type:"zrz"
438 }
439 }
394 this.$router.push({ 440 this.$router.push({
395 path: curretRouterInfo.path, 441 path: "/viewMap",
396 query: curretRouterInfo.query 442 query: routerQuery
397 }); 443 });
398 }else { 444 },
399 this.$router.back(-1); 445 toHome(){
400 } 446 this.$router.push({ path: "/panel" });
447 },
448 inputChange(){
401 449
402 },
403 goMap(){
404 var curretRouterInfo = {
405 path:this.$route.path,
406 query:this.$route.query
407 } 450 }
408 sessionStorage.setItem('curretRouterInfo',JSON.stringify(curretRouterInfo));
409 this.isMap = true;
410 var routerQuery = null;
411 var path = this.$route.path;
412 if(path == "/zd"){
413 routerQuery = {
414 bsm:this.$route.query.bsm,
415 type:"zd"
416 };
417 }else if(path == "/zrz"){
418 routerQuery = {
419 bsm:this.$route.query.bsm,
420 type:"zrz"
421 }
422 }
423 this.$router.push({
424 path: "/viewMap",
425 query: routerQuery
426 });
427 }
428 }, 451 },
429 }; 452 };
430 </script> 453 </script>
...@@ -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 }
517 .right-tools{
518 float: right !important;
519 position: absolute;
520 right: 18px;
521 top: 20px;
522 .tuOrShu{
523 .iconfont{
524 color:#ffffff;
525 font-size:30px
526 }
527 }
528 }
487 529
488 .tuOrShu{
489 float: right !important;
490 .iconfont{
491 font-size: 21px;
492 }
493 }
494 } 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 },
......