Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
7c9cc085 by 杨威
Options

首页和导航栏调整

1 parent 2aac5d3d
Inline Side-by-side
Showing 5 changed files with 57 additions and 48 deletions
...@@ -42,7 +42,7 @@ export default { ...@@ -42,7 +42,7 @@ export default {
42 this.isShow = true; 42 this.isShow = true;
43 this.tips = tips+'...'; 43 this.tips = tips+'...';
44 }, 44 },
45 loadingHide(tips){ 45 loadingHide(){
46 this.isShow = false; 46 this.isShow = false;
47 } 47 }
48 }, 48 },
......
...@@ -98,6 +98,9 @@ ol, ul { list-style:none; } ...@@ -98,6 +98,9 @@ ol, ul { list-style:none; }
98 ::-webkit-scrollbar-track { 98 ::-webkit-scrollbar-track {
99 border-radius: 0; 99 border-radius: 0;
100 } 100 }
101 /deep/ .el-tabs--border-card{
102 border: 0;
103 }
101 //二级菜单样式 104 //二级菜单样式
102 .tabs{ 105 .tabs{
103 >.el-tabs__content{ 106 >.el-tabs__content{
......
...@@ -12,36 +12,37 @@ ...@@ -12,36 +12,37 @@
12 <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span> 12 <span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span>
13 </div> 13 </div>
14 14
15 <div class="search-box"> 15 <div class="wrap">
16 <el-input 16 <div class="search-box">
17 maxlength="28" 17 <el-input
18 v-model="treeKey" 18 maxlength="28"
19 class="searchInput" 19 v-model="treeKey"
20 placeholder="请输入关键字" 20 class="searchInput"
21 ><i 21 placeholder="请输入关键字"
22 slot="suffix" 22 ><i
23 class="el-input__icon el-icon-search" 23 slot="suffix"
24 @click="inputChange" 24 class="el-input__icon el-icon-search"
25 ></i 25 @click="inputChange"
26 ></el-input> 26 ></i
27 </div> 27 ></el-input>
28 <div class="treeModule" :style="{height:treeHeight+'px'}"> 28 </div>
29 <LineTree :pd="pd" v-if="lineTreeVisible" @itemClick="itemClick"></LineTree> 29 <div class="treeModule" :style="{height:treeHeight+'px'}">
30 <LineTree :pd="pd" v-if="lineTreeVisible" @itemClick="itemClick"></LineTree>
31 </div>
30 </div> 32 </div>
31 </el-aside> 33 </el-aside>
32 <el-container class="calcWidth"> 34 <el-container class="calcWidth">
33 <el-header> 35 <el-header>
34 <div class="header-top"> 36 <div class="header-top">
35 <!-- <div class="top-items" @click="toggleClick"> 37 <div class="top-items" @click="toggleClick">
36 <i class="iconfont iconsuojin" v-show="!isActive"></i> 38 <i class="iconfont iconsuojin" v-show="!isActive"></i>
37 <i class="iconfont iconzhankai" v-show="isActive"></i> 39 <i class="iconfont iconzhankai" v-show="isActive"></i>
38 </div> --> 40 </div>
39 <div 41 <div
40 class="top-items" 42 class="top-items"
41 v-for="(item, index) in headTop" 43 v-for="(item, index) in headTop"
42 :key="index + '1'" 44 :key="index + '1'"
43 :class="{ 'is-active': item.select }" 45 :class="{ 'is-active': item.select }"
44 :style="{'height':item.name == '首页' && item.select ? '64'+'px' : '65'+'px'}"
45 @click="selectTopItems(index)" 46 @click="selectTopItems(index)"
46 > 47 >
47 <i :class="item.icon"></i> 48 <i :class="item.icon"></i>
...@@ -475,11 +476,13 @@ export default { ...@@ -475,11 +476,13 @@ export default {
475 height: 66px; 476 height: 66px;
476 // border-bottom: 1px solid#EAEAEA; 477 // border-bottom: 1px solid#EAEAEA;
477 box-sizing: border-box; 478 box-sizing: border-box;
478 background-image: url('../assets/images/banner.png'); 479 // background-image: url('../assets/images/banner.png');
480 background-color: #006CFF;
479 display: flex; 481 display: flex;
480 flex-grow: 1; 482 flex-grow: 1;
481 justify-content: center; 483 border-left: 1px solid #3E9FFF;
482 align-items: center; 484 // justify-content: center;
485 // align-items: center;
483 .top-items { 486 .top-items {
484 cursor: pointer; 487 cursor: pointer;
485 height: 66px; 488 height: 66px;
...@@ -504,10 +507,10 @@ export default { ...@@ -504,10 +507,10 @@ export default {
504 } 507 }
505 } 508 }
506 .top-items:hover{ 509 .top-items:hover{
507 background: hsla(0,0%,100%,.2); 510 background: #0091FF;
508 } 511 }
509 .top-items.is-active { 512 .top-items.is-active {
510 background: hsla(0,0%,100%,.2); 513 background: #0091FF;
511 } 514 }
512 } 515 }
513 .header-bottom { 516 .header-bottom {
...@@ -536,8 +539,11 @@ export default { ...@@ -536,8 +539,11 @@ export default {
536 background-color: #ffffff; 539 background-color: #ffffff;
537 color: #333; 540 color: #333;
538 // text-align: center; 541 // text-align: center;
539 overflow: hidden; 542 overflow: overlay;
540 transition: width 0.3s; 543 transition: width 0.3s;
544 box-shadow: 1px 0px 2px 1px rgba(49, 132, 245, 0.1);
545 position: relative;
546 z-index: 1000;
541 .logo-box { 547 .logo-box {
542 width: 100%; 548 width: 100%;
543 height: 66px; 549 height: 66px;
...@@ -545,7 +551,7 @@ export default { ...@@ -545,7 +551,7 @@ export default {
545 box-sizing: border-box; 551 box-sizing: border-box;
546 padding: 10px 20px; 552 padding: 10px 20px;
547 transition: width 0.3s; 553 transition: width 0.3s;
548 background-color: #287CC5; 554 background-color: #006CFF;
549 .logo-img { 555 .logo-img {
550 width: 44px; 556 width: 44px;
551 float: left; 557 float: left;
...@@ -557,27 +563,29 @@ export default { ...@@ -557,27 +563,29 @@ export default {
557 font-size: 20px; 563 font-size: 20px;
558 } 564 }
559 } 565 }
560 .search-box{ 566 .wrap{
561 height: 65px; 567 height: calc(100% - 66px);
562 box-sizing: border-box; 568 overflow-x: hidden;
563 padding: 18px 20px; 569 .search-box{
564 border-right: 1px solid #dedede; 570 height: 65px;
565 .searchInput{ 571 box-sizing: border-box;
566 /deep/ .el-input__inner{ 572 padding: 18px 20px;
567 width: 240px; 573 .searchInput{
568 height: 38px; 574 /deep/ .el-input__inner{
569 background: #FFFFFF; 575 width: 240px;
570 border-radius: 4px; 576 height: 38px;
571 border: 1px solid #DEDEDE; 577 background: #FFFFFF;
572 } 578 border-radius: 4px;
573 /deep/ .el-input__suffix{ 579 border: 1px solid #DEDEDE;
574 top: 0!important; 580 }
581 /deep/ .el-input__suffix{
582 top: 0!important;
583 }
575 } 584 }
576 } 585 }
577 } 586 .treeModule {
578 .treeModule { 587 box-sizing: border-box;
579 box-sizing: border-box; 588 }
580 border-right: 1px solid #dedede;
581 } 589 }
582 .logo-box-show { 590 .logo-box-show {
583 width: 64px; 591 width: 64px;
......
...@@ -44,4 +44,5 @@ ...@@ -44,4 +44,5 @@
44 height: 48px; 44 height: 48px;
45 } 45 }
46 } 46 }
47
47 </style> 48 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -347,14 +347,12 @@ export default { ...@@ -347,14 +347,12 @@ export default {
347 float: left; 347 float: left;
348 margin-right: 20px; 348 margin-right: 20px;
349 flex: 1; 349 flex: 1;
350 border: 1px solid #E6E6E6;
351 /deep/ .el-card__body{ 350 /deep/ .el-card__body{
352 padding: 0; 351 padding: 0;
353 } 352 }
354 } 353 }
355 .download { 354 .download {
356 width: 50%; 355 width: 50%;
357 border: 1px solid #E6E6E6;
358 /deep/ .el-card__body{ 356 /deep/ .el-card__body{
359 padding: 0; 357 padding: 0;
360 } 358 }
...@@ -379,7 +377,6 @@ export default { ...@@ -379,7 +377,6 @@ export default {
379 height: 100%; 377 height: 100%;
380 margin-right: 20px; 378 margin-right: 20px;
381 background: #fff; 379 background: #fff;
382 border: 1px solid #E6E6E6;
383 box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5); 380 box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5);
384 /deep/ .el-card__body{ 381 /deep/ .el-card__body{
385 height: calc(100% - 93px); 382 height: calc(100% - 93px);
......