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 {
.basic_layer {
width: 100%;
position: relative;
color: #ffffff;
color: #4a4a4a;
cursor: pointer;
.layer_text {
flex: 1;
......
......@@ -710,7 +710,7 @@ export default {
.basic_layer {
width: 100%;
position: relative;
color: #ffffff;
color: #4a4a4a;
cursor: pointer;
-moz-user-select: none;
-o-user-select: none;
......
......@@ -7,9 +7,24 @@
class="logo-img"
src="@/assets/images/logo-realestate.png"
alt=""
@click="toHome"
/>
<span class="logo-text" v-show="!textLogo">不动产权籍调查系统</span>
</div>
<div class="search-box">
<el-input
maxlength="28"
v-model="treeKey"
class="searchInput"
placeholder="请输入关键字"
><i
slot="suffix"
class="el-input__icon el-icon-search"
@click="inputChange"
></i
></el-input>
</div>
<div class="treeModule" :style="{height:treeHeight+'px'}">
<LineTree :pd="pd" v-if="lineTreeVisible" @itemClick="itemClick"></LineTree>
</div>
......@@ -17,25 +32,26 @@
<el-container class="calcWidth">
<el-header>
<div class="header-top">
<div class="top-items" @click="toggleClick">
<!-- <div class="top-items" @click="toggleClick">
<i class="iconfont iconsuojin" v-show="!isActive"></i>
<i class="iconfont iconzhankai" v-show="isActive"></i>
</div>
</div> -->
<div
class="top-items"
v-for="(item, index) in headTop"
:key="index + '1'"
:class="{ 'is-active': item.select }"
:style="{'height':item.name == '首页' && item.select ? '70'+'px' : '71'+'px'}"
:style="{'height':item.name == '首页' && item.select ? '64'+'px' : '65'+'px'}"
@click="selectTopItems(index)"
>
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</div>
<div class="top-items tuOrShu" >
<i class="iconfont icondiqiu" style="color:#006CFF;font-size:30px" title="图形管理" v-if="!isMap" @click="goMap"></i>
<i class="iconfont iconxinxi" style="color:#006CFF;font-size:30px" title="属性管理" v-else @click="goBack"></i>
</div>
<div class="right-tools">
<div class="tuOrShu">
<i class="iconfont icondiqiu" title="图形管理" v-if="!isMap" @click="goMap"></i>
<i class="iconfont iconxinxi" title="属性管理" v-else @click="goBack"></i>
</div>
</div>
<!-- <div class="header-bottom">
......@@ -131,6 +147,7 @@ export default {
treeHeight:0,
routerInfo:null,
lineTreeVisible:false,
treeKey:'',
};
},
computed: {
......@@ -251,7 +268,7 @@ export default {
})
}
this.$nextTick(()=>{
this.treeHeight = this.$el.clientHeight - 120;
this.treeHeight = this.$el.clientHeight - 117;
});
},
methods: {
......@@ -424,6 +441,12 @@ export default {
path: "/viewMap",
query: routerQuery
});
},
toHome(){
this.$router.push({ path: "/panel" });
},
inputChange(){
}
},
};
......@@ -444,20 +467,26 @@ export default {
.el-header {
background-color: #fff;
padding: 0 !important;
height: 72px!important;
height: 66px!important;
position: relative;
.header-top {
height: 72px;
height: 66px;
// border-bottom: 1px solid#EAEAEA;
box-sizing: border-box;
background-image: url('../assets/images/banner.png');
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
.top-items {
cursor: pointer;
height: 72px;
height: 66px;
padding: 0 30px;
font-size: 18px;
line-height: 72px;
line-height: 66px;
float: left;
position: relative;
color: #4a4a4a;
color: #ffffff;
// border-left: 1px solid #EAEAEA;
/*border-right: 1px solid #EAEAEA;*/
i {
......@@ -472,10 +501,11 @@ export default {
color: #000;
}
}
.top-items:hover{
background: hsla(0,0%,100%,.2);
}
.top-items.is-active {
color: #006cff;
height: 71px;
border-bottom: 1px solid #FFF;
background: hsla(0,0%,100%,.2);
}
}
.header-bottom {
......@@ -484,40 +514,60 @@ export default {
border-bottom: 1px solid rgba(234, 234, 234, 1);
box-sizing: border-box;
}
.tuOrShu{
.right-tools{
float: right !important;
position: absolute;
right: 18px;
top: 20px;
.tuOrShu{
.iconfont{
font-size: 21px;
color:#ffffff;
font-size:30px
}
}
}
}
.el-aside {
width: 290px !important;
background-color: #1d50dd;
background-color: #ffffff;
color: #333;
// text-align: center;
overflow: hidden;
transition: width 0.3s;
.logo-box {
width: 100%;
height: 120px;
height: 66px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding: 30px 0 28px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 10px;
transition: width 0.3s;
background-color: #287CC5;
.logo-img {
width: 38px;
height: 38px;
width: 44px;
float: left;
}
.logo-text {
font-size: 18px;
color: rgba(255, 255, 255, 1);
line-height: 14px;
padding-left: 10px;
color: #ffffff;
line-height: 44px;
font-size: 23px;
}
}
.search-box{
height: 48px;
background-color: #3FA2E1;
box-sizing: border-box;
padding: 9px 30px;
.searchInput{
/deep/ .el-input__inner{
height: 30px;
line-height: 30px;
border-radius: 15px;
}
/deep/ .el-input__suffix{
top: -5px!important;
}
}
}
.treeModule {
......@@ -556,7 +606,7 @@ export default {
z-index: 1;
pointer-events: none;
-webkit-box-shadow: inset -14px 0px 16px red;
box-shadow: inset -23px 0px 16px #1d50dd;
box-shadow: inset -23px 0px 16px #ffffff;
transition: 0.3s;
}
.w0{
......
......@@ -88,6 +88,7 @@
this.queryData.pageNo=this.pageNo;
this.getData(this.queryData);
this.$nextTick(()=>{
console.log(this.$refs.dataGrid.offsetHeight,'this.$refs.dataGrid.offsetHeight');
this.tableHeight = this.$refs.dataGrid.offsetHeight - 68;
})
},
......