Skip to content

刘远 / 3d_dc

Go to a project
Toggle navigation
Toggle navigation pinning
ed63bf9f by 刘远
Options

增加一张蓝图展示页

1 parent c42019a6
Inline Side-by-side
Showing 10 changed files with 313 additions and 17 deletions
No preview for this file type
......@@ -34,9 +34,7 @@
methods: {
jumpNav(val) {
this[val] = !this[val];
debugger
},
}
}
</script>
......@@ -59,6 +57,7 @@
.nav-box {
width: 306px !important;
text-align: center;
cursor: pointer;
}
.selected {
......@@ -70,7 +69,7 @@
.selected span {
display: inline-block;
transform: translateY(-23.2px);
transform: translateY(-15.2px);
font-size: 30px;
}
......
<template>
<div class="container">
leftAssert
<div class="assert-list"
:class="[isAssert?'a-selected':'a-no-selected']"
@click="changeSelect('isAssert')">
<div class="expend">
<img src="../assets/一张图/icon_资源目录.png" alt="">
</div>
<div class="name">资源目录</div>
</div>
<div style="margin-top: 16px;" v-show='isAssert'>
<treeSearch @foldAssert='foldAssert'></treeSearch>
</div>
<div class="assert-list"
:class="[isZTFX?'a-selected':'a-no-selected']"
@click="changeSelect('isZTFX')"
style="margin-top: 30px;">
<div class="expend">
<img src="../assets/一张图/icon_专题分析.png" alt="">
</div>
<div class="name">专题分析</div>
</div>
<div style="margin-top: 16px;" v-show='isZTFX'>
<treeSearch @foldAssert='foldAssert'></treeSearch>
</div>
<div class="assert-list"
:class="[isFASC?'a-selected':'a-no-selected']"
@click="changeSelect('isFASC')"
style="margin-top: 30px;">
<div class="expend">
<img src="../assets/一张图/icon_方案审查.png" alt="">
</div>
<div class="name">方案审查</div>
</div>
<div style="margin-top: 16px;" v-show='isFASC'>
<treeSearch @foldAssert='foldAssert'></treeSearch>
</div>
</div>
</template>
<script>
export default {
import treeSearch from './treeSearch';
export default {
name: 'leftAssert',
components: {},
components: {
treeSearch
},
data() {
return {}
return {
isAssert: true,
isZTFX: false,
isFASC: false,
keepKey: ['isAssert', 'isZTFX', 'isFASC'],
}
},
mounted() {},
methods: {
changeSelect(val) {
this.keepKey.forEach(ele => {
if(val == ele) this[ele] = true; else this[ele] = false;
})
},
foldAssert() {
this.isAssert = false;
}
}
}
</script>
<style lang="sass" scoped>
.container {}
<style scoped>
.container {
color: #fff;
}
.assert-list {
width: 206px;
height: 36px;
display: flex;
align-items: center;
background-size: 100% 100%;
background-repeat: no-repeat;
cursor: pointer;
}
.a-selected{
background-image: url('../assets/一张图/bg_资源目录.png');
}
.a-no-selected {
background-image: url('../assets/一张图/bg_专题分析.png');
}
.assert-list .expend {
transform: translate(20.7px, 2px);
}
.assert-list .name {
transform: translateX(56px);
line-height: 36px;
}
</style>
\ No newline at end of file
......
<template>
<div class="container">
mapPop
<div class="list-box">
<span>规划项目</span>
<span>综合楼</span>
</div>
<div class="list-box">
<span>建设单位</span>
<span>青海人和顺置业有限公司</span>
</div>
<div class="list-box">
<span>规划用地性质</span>
<span>B2商务设施用地</span>
</div>
<div class="list-box">
<span>总用地面积</span>
<span>26.245</span>
</div>
<div class="list-box">
<span>净用地面积</span>
<span>26.07</span>
</div>
<div class="list-box">
<span>其他面积</span>
<span>0</span>
</div>
</div>
</template>
......@@ -9,7 +32,8 @@ mapPop
name: 'mapPop',
components: {},
data() {
return {}
return {
}
},
mounted() {},
methods: {
......@@ -18,6 +42,24 @@ mapPop
}
</script>
<style lang="sass" scoped>
.container {}
<style scoped>
.container {
color: #fff;
background: rgba(4, 10, 10, 0.57);
box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.50);
padding: 4px 14px 14px 14px;
font-size: 16px;
}
.list-box span:nth-of-type(1){
display: inline-block;
width: 98px;
margin-right: 20px;
color: rgba(255, 255, 255, .7);
}
.list-box span:nth-of-type(2){
margin-top: 14px;
display: inline-block;
}
</style>
\ No newline at end of file
......
......@@ -103,4 +103,9 @@
border: 1px solid rgba(23, 34, 38, 0.57);
color: #fff;
}
>>>.el-input__suffix {
color: #fff;
font-size: 17px;
}
</style>
\ No newline at end of file
......
<template>
<div class="container">
<div class="serach">
</div>
<div class="tree">
<div class="box">
<div>
<div class="input-box">
<el-input v-model="search" style="width: 158px; height: 36px;" placeholder="请输入"
suffix-icon="el-icon-search" @change='handleSearch()'></el-input>
</div>
</div>
<div class="tree-main">
<el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
:default-checked-keys="[5]" :props="defaultProps">
</el-tree>
</div>
</div>
</div>
<div class="fold" @click="foldAssert()">
<i class="el-icon-arrow-up"></i>
</div>
</div>
</template>
<script>
export default {
data() {
return {
search: '',
data: [{
id: 1,
label: '一级 1',
}, {
id: 2,
label: '一级 2',
// children: [{
// id: 5,
// label: '二级 2-1'
// }, {
// id: 6,
// label: '二级 2-2'
// }]
}],
}
},
mounted() {
},
components: {},
methods: {
handleSearch() {
},
foldAssert() {
this.$emit('foldAssert');
}
}
}
</script>
<style scoped>
.container {
width: 206px;
/* border: 1px solid red; */
}
.serach {
height: 32px;
width: 100%;
background-image: url('../assets/一张图/list_上端.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.tree {
background-image: url('../assets/一张图/list_中端.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.tree .box {
transform: translate(24px, -14px);
}
.tree-main {
margin-top: 26px;
transform: translateX(-24px);
}
.fold {
background-image: url('../assets/一张图/list_下端.png');
background-size: 100% 100%;
background-repeat: no-repeat;
height: 32px;
/* width: 158px; */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
>>>input::-webkit-input-placeholder {
font-size: 16px;
color: rgba(255, 255, 255, 0.78) !important;
}
>>>.el-input__inner {
background: rgba(0, 0, 0, 0.58) !important;
border: 1px solid rgba(0, 0, 0, 0.58);
color: #fff;
}
>>>.el-input__suffix {
/* color: #fff; */
/* font-size: 17px; */
}
>>>.el-tree {
background: transparent;
color: #fff;
}
>>>.el-tree-node__content:hover {
background: transparent;
}
>>>.el-tree-node:focus>.el-tree-node__content {
background-color: transparent;
}
>>>.el-checkbox__inner {
border: 1px solid #000;
background-color: #000;
}
</style>
\ No newline at end of file
......@@ -29,6 +29,12 @@
<div class="bottomNav">
<bottomNav></bottomNav>
</div>
<div class="leftAssert">
<leftAssert></leftAssert>
</div>
<div class="mapPop">
<mapPop></mapPop>
</div>
<div id="cesiumContainer" style="width:100%;height:100%;"></div>
<!-- <el-button @click="testfun" class="testbtn"></el-button> -->
<!-- <el-select @change="selectChanged" class="testbtn">
......@@ -40,17 +46,22 @@
import tool from "../assets/js/map/tool";
import TopTitle from '../components/topTitle';
import TopTitle from '../components/topTitle';
import rightTopFunc from '../components/rightTopFunc';
import rightFunc from '../components/rightFunc';
import bottomNav from '../components/bottomNav';
import leftAssert from '../components/leftAssert';
import mapPop from '../components/mapPop';
export default {
components: {
TopTitle,
rightTopFunc,
rightFunc,
bottomNav
bottomNav,
leftAssert,
mapPop
},
data() {
return {
......@@ -249,7 +260,8 @@
z-index: 1000;
color: red;
width: 100%;
height: 86.5px;
/* height: 86.5px; */
height: 124.5px;
}
.rightTopFunc {
position: absolute;
......@@ -269,4 +281,18 @@
z-index: 1000;
bottom: 40px;
}
.leftAssert {
position: absolute;
z-index: 1000;
left: 32px;
top: 149px;
}
.mapPop {
position: absolute;
z-index: 1000;
right: 371px;
top: 566px;
}
</style>
\ No newline at end of file
......