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 @@ ...@@ -34,9 +34,7 @@
34 methods: { 34 methods: {
35 jumpNav(val) { 35 jumpNav(val) {
36 this[val] = !this[val]; 36 this[val] = !this[val];
37 debugger
38 }, 37 },
39
40 } 38 }
41 } 39 }
42 </script> 40 </script>
...@@ -59,6 +57,7 @@ ...@@ -59,6 +57,7 @@
59 .nav-box { 57 .nav-box {
60 width: 306px !important; 58 width: 306px !important;
61 text-align: center; 59 text-align: center;
60 cursor: pointer;
62 } 61 }
63 62
64 .selected { 63 .selected {
...@@ -70,7 +69,7 @@ ...@@ -70,7 +69,7 @@
70 69
71 .selected span { 70 .selected span {
72 display: inline-block; 71 display: inline-block;
73 transform: translateY(-23.2px); 72 transform: translateY(-15.2px);
74 font-size: 30px; 73 font-size: 30px;
75 } 74 }
76 75
......
1 <template> 1 <template>
2 <div class="container"> 2 <div class="container">
3 leftAssert 3 <div class="assert-list"
4 :class="[isAssert?'a-selected':'a-no-selected']"
5 @click="changeSelect('isAssert')">
6 <div class="expend">
7 <img src="../assets/一张图/icon_资源目录.png" alt="">
8 </div>
9 <div class="name">资源目录</div>
10 </div>
11 <div style="margin-top: 16px;" v-show='isAssert'>
12 <treeSearch @foldAssert='foldAssert'></treeSearch>
13 </div>
14
15 <div class="assert-list"
16 :class="[isZTFX?'a-selected':'a-no-selected']"
17 @click="changeSelect('isZTFX')"
18 style="margin-top: 30px;">
19 <div class="expend">
20 <img src="../assets/一张图/icon_专题分析.png" alt="">
21 </div>
22 <div class="name">专题分析</div>
23 </div>
24 <div style="margin-top: 16px;" v-show='isZTFX'>
25 <treeSearch @foldAssert='foldAssert'></treeSearch>
26 </div>
27
28 <div class="assert-list"
29 :class="[isFASC?'a-selected':'a-no-selected']"
30 @click="changeSelect('isFASC')"
31 style="margin-top: 30px;">
32 <div class="expend">
33 <img src="../assets/一张图/icon_方案审查.png" alt="">
34 </div>
35 <div class="name">方案审查</div>
36 </div>
37 <div style="margin-top: 16px;" v-show='isFASC'>
38 <treeSearch @foldAssert='foldAssert'></treeSearch>
39 </div>
40
4 </div> 41 </div>
5 </template> 42 </template>
6 43
7 <script> 44 <script>
8 export default { 45
46 import treeSearch from './treeSearch';
47
48
49 export default {
9 name: 'leftAssert', 50 name: 'leftAssert',
10 components: {}, 51 components: {
52 treeSearch
53 },
11 data() { 54 data() {
12 return {} 55 return {
56 isAssert: true,
57 isZTFX: false,
58 isFASC: false,
59
60 keepKey: ['isAssert', 'isZTFX', 'isFASC'],
61
62 }
13 }, 63 },
14 mounted() {}, 64 mounted() {},
15 methods: { 65 methods: {
16 66 changeSelect(val) {
67 this.keepKey.forEach(ele => {
68 if(val == ele) this[ele] = true; else this[ele] = false;
69 })
70 },
71 foldAssert() {
72 this.isAssert = false;
73 }
17 } 74 }
18 } 75 }
19 </script> 76 </script>
20 77
21 <style lang="sass" scoped> 78 <style scoped>
22 .container {} 79 .container {
80 color: #fff;
81 }
82
83 .assert-list {
84 width: 206px;
85 height: 36px;
86 display: flex;
87 align-items: center;
88 background-size: 100% 100%;
89 background-repeat: no-repeat;
90 cursor: pointer;
91 }
92
93 .a-selected{
94 background-image: url('../assets/一张图/bg_资源目录.png');
95 }
96
97 .a-no-selected {
98 background-image: url('../assets/一张图/bg_专题分析.png');
99 }
100
101 .assert-list .expend {
102 transform: translate(20.7px, 2px);
103 }
104
105 .assert-list .name {
106 transform: translateX(56px);
107 line-height: 36px;
108 }
23 </style> 109 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 <div class="container"> 2 <div class="container">
3 mapPop 3 <div class="list-box">
4 <span>规划项目</span>
5 <span>综合楼</span>
6 </div>
7 <div class="list-box">
8 <span>建设单位</span>
9 <span>青海人和顺置业有限公司</span>
10 </div>
11 <div class="list-box">
12 <span>规划用地性质</span>
13 <span>B2商务设施用地</span>
14 </div>
15 <div class="list-box">
16 <span>总用地面积</span>
17 <span>26.245</span>
18 </div>
19 <div class="list-box">
20 <span>净用地面积</span>
21 <span>26.07</span>
22 </div>
23 <div class="list-box">
24 <span>其他面积</span>
25 <span>0</span>
26 </div>
4 </div> 27 </div>
5 </template> 28 </template>
6 29
...@@ -9,7 +32,8 @@ mapPop ...@@ -9,7 +32,8 @@ mapPop
9 name: 'mapPop', 32 name: 'mapPop',
10 components: {}, 33 components: {},
11 data() { 34 data() {
12 return {} 35 return {
36 }
13 }, 37 },
14 mounted() {}, 38 mounted() {},
15 methods: { 39 methods: {
...@@ -18,6 +42,24 @@ mapPop ...@@ -18,6 +42,24 @@ mapPop
18 } 42 }
19 </script> 43 </script>
20 44
21 <style lang="sass" scoped> 45 <style scoped>
22 .container {} 46 .container {
47 color: #fff;
48 background: rgba(4, 10, 10, 0.57);
49 box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.50);
50 padding: 4px 14px 14px 14px;
51 font-size: 16px;
52 }
53
54 .list-box span:nth-of-type(1){
55 display: inline-block;
56 width: 98px;
57 margin-right: 20px;
58 color: rgba(255, 255, 255, .7);
59 }
60
61 .list-box span:nth-of-type(2){
62 margin-top: 14px;
63 display: inline-block;
64 }
23 </style> 65 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -103,4 +103,9 @@ ...@@ -103,4 +103,9 @@
103 border: 1px solid rgba(23, 34, 38, 0.57); 103 border: 1px solid rgba(23, 34, 38, 0.57);
104 color: #fff; 104 color: #fff;
105 } 105 }
106
107 >>>.el-input__suffix {
108 color: #fff;
109 font-size: 17px;
110 }
106 </style> 111 </style>
...\ No newline at end of file ...\ No newline at end of file
......
1 <template>
2 <div class="container">
3 <div class="serach">
4
5 </div>
6 <div class="tree">
7 <div class="box">
8 <div>
9 <div class="input-box">
10 <el-input v-model="search" style="width: 158px; height: 36px;" placeholder="请输入"
11 suffix-icon="el-icon-search" @change='handleSearch()'></el-input>
12 </div>
13 </div>
14 <div class="tree-main">
15 <el-tree :data="data" show-checkbox node-key="id" :default-expanded-keys="[2, 3]"
16 :default-checked-keys="[5]" :props="defaultProps">
17 </el-tree>
18 </div>
19
20 </div>
21 </div>
22 <div class="fold" @click="foldAssert()">
23 <i class="el-icon-arrow-up"></i>
24 </div>
25 </div>
26 </template>
27 <script>
28 export default {
29 data() {
30 return {
31 search: '',
32 data: [{
33 id: 1,
34 label: '一级 1',
35
36 }, {
37 id: 2,
38 label: '一级 2',
39 // children: [{
40 // id: 5,
41 // label: '二级 2-1'
42 // }, {
43 // id: 6,
44 // label: '二级 2-2'
45 // }]
46 }],
47 }
48 },
49 mounted() {
50
51 },
52 components: {},
53 methods: {
54 handleSearch() {
55
56 },
57 foldAssert() {
58 this.$emit('foldAssert');
59 }
60 }
61 }
62 </script>
63 <style scoped>
64 .container {
65 width: 206px;
66 /* border: 1px solid red; */
67 }
68
69 .serach {
70 height: 32px;
71 width: 100%;
72 background-image: url('../assets/一张图/list_上端.png');
73 background-size: 100% 100%;
74 background-repeat: no-repeat;
75 }
76
77 .tree {
78 background-image: url('../assets/一张图/list_中端.png');
79 background-size: 100% 100%;
80 background-repeat: no-repeat;
81 }
82
83 .tree .box {
84 transform: translate(24px, -14px);
85
86 }
87
88 .tree-main {
89 margin-top: 26px;
90 transform: translateX(-24px);
91 }
92
93 .fold {
94 background-image: url('../assets/一张图/list_下端.png');
95 background-size: 100% 100%;
96 background-repeat: no-repeat;
97 height: 32px;
98 /* width: 158px; */
99 display: flex;
100 justify-content: center;
101 align-items: center;
102 cursor: pointer;
103 }
104
105 >>>input::-webkit-input-placeholder {
106 font-size: 16px;
107 color: rgba(255, 255, 255, 0.78) !important;
108 }
109
110 >>>.el-input__inner {
111 background: rgba(0, 0, 0, 0.58) !important;
112 border: 1px solid rgba(0, 0, 0, 0.58);
113 color: #fff;
114 }
115
116 >>>.el-input__suffix {
117 /* color: #fff; */
118 /* font-size: 17px; */
119 }
120
121 >>>.el-tree {
122 background: transparent;
123 color: #fff;
124 }
125
126 >>>.el-tree-node__content:hover {
127 background: transparent;
128 }
129
130 >>>.el-tree-node:focus>.el-tree-node__content {
131 background-color: transparent;
132 }
133
134 >>>.el-checkbox__inner {
135 border: 1px solid #000;
136 background-color: #000;
137 }
138 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -29,6 +29,12 @@ ...@@ -29,6 +29,12 @@
29 <div class="bottomNav"> 29 <div class="bottomNav">
30 <bottomNav></bottomNav> 30 <bottomNav></bottomNav>
31 </div> 31 </div>
32 <div class="leftAssert">
33 <leftAssert></leftAssert>
34 </div>
35 <div class="mapPop">
36 <mapPop></mapPop>
37 </div>
32 <div id="cesiumContainer" style="width:100%;height:100%;"></div> 38 <div id="cesiumContainer" style="width:100%;height:100%;"></div>
33 <!-- <el-button @click="testfun" class="testbtn"></el-button> --> 39 <!-- <el-button @click="testfun" class="testbtn"></el-button> -->
34 <!-- <el-select @change="selectChanged" class="testbtn"> 40 <!-- <el-select @change="selectChanged" class="testbtn">
...@@ -40,17 +46,22 @@ ...@@ -40,17 +46,22 @@
40 46
41 import tool from "../assets/js/map/tool"; 47 import tool from "../assets/js/map/tool";
42 48
43 import TopTitle from '../components/topTitle'; 49 import TopTitle from '../components/topTitle';
44 import rightTopFunc from '../components/rightTopFunc'; 50 import rightTopFunc from '../components/rightTopFunc';
45 import rightFunc from '../components/rightFunc'; 51 import rightFunc from '../components/rightFunc';
46 import bottomNav from '../components/bottomNav'; 52 import bottomNav from '../components/bottomNav';
53 import leftAssert from '../components/leftAssert';
54 import mapPop from '../components/mapPop';
55
47 56
48 export default { 57 export default {
49 components: { 58 components: {
50 TopTitle, 59 TopTitle,
51 rightTopFunc, 60 rightTopFunc,
52 rightFunc, 61 rightFunc,
53 bottomNav 62 bottomNav,
63 leftAssert,
64 mapPop
54 }, 65 },
55 data() { 66 data() {
56 return { 67 return {
...@@ -249,7 +260,8 @@ ...@@ -249,7 +260,8 @@
249 z-index: 1000; 260 z-index: 1000;
250 color: red; 261 color: red;
251 width: 100%; 262 width: 100%;
252 height: 86.5px; 263 /* height: 86.5px; */
264 height: 124.5px;
253 } 265 }
254 .rightTopFunc { 266 .rightTopFunc {
255 position: absolute; 267 position: absolute;
...@@ -269,4 +281,18 @@ ...@@ -269,4 +281,18 @@
269 z-index: 1000; 281 z-index: 1000;
270 bottom: 40px; 282 bottom: 40px;
271 } 283 }
284
285 .leftAssert {
286 position: absolute;
287 z-index: 1000;
288 left: 32px;
289 top: 149px;
290 }
291
292 .mapPop {
293 position: absolute;
294 z-index: 1000;
295 right: 371px;
296 top: 566px;
297 }
272 </style> 298 </style>
...\ No newline at end of file ...\ No newline at end of file
......