新增 页面
Showing
59 changed files
with
1477 additions
and
27 deletions
src/assets.rar
0 → 100644
No preview for this file type
src/assets/bj_selected .png
0 → 100644
743 Bytes
src/assets/cjll_ over .png
0 → 100644
773 Bytes
src/assets/cmj_ over .png
0 → 100644
826 Bytes
src/assets/dy_selected .png
0 → 100644
664 Bytes
src/assets/icon/感叹号.png
0 → 100644
384 Bytes
src/assets/icon/查询.png
0 → 100644
308 Bytes
src/assets/icon_home.png
0 → 100644
789 Bytes
src/assets/icon_search.png
0 → 100644
655 Bytes
src/assets/icon_业务类型.png
0 → 100644
123 Bytes
src/assets/icon_导入.png
0 → 100644
332 Bytes
src/assets/icon_导出.png
0 → 100644
334 Bytes
src/assets/icon_开始分析.png
0 → 100644
244 Bytes
src/assets/icon_暂停分析.png
0 → 100644
381 Bytes
src/assets/icon_添加.png
0 → 100644
295 Bytes
src/assets/icon_清除分析结果.png
0 → 100644
346 Bytes
src/assets/icon_绘制观察线.png
0 → 100644
271 Bytes
src/assets/list_上端.png
0 → 100644
695 Bytes
src/assets/list_下端.png
0 → 100644
649 Bytes
src/assets/list_中端.png
0 → 100644
143 Bytes
src/assets/ljdj_selected .png
0 → 100644
820 Bytes
src/assets/pic_暂无数据.png
0 → 100644
2.78 KB
src/assets/qc_selected.png
0 → 100644
632 Bytes
src/assets/一张图/icon_专题分析_分析统计.png
0 → 100644
3.43 KB
src/assets/一张图/icon_专题分析_土地处置.png
0 → 100644
3.45 KB
src/assets/一张图/icon_方案审查_辅助审查_光照分析.png
0 → 100644
3.66 KB
src/assets/一张图/icon_方案审查_辅助审查_控高分析.png
0 → 100644
3.27 KB
src/assets/一张图/icon_方案审查_辅助审查_方案对比.png
0 → 100644
3.4 KB
src/assets/实施监督预警/icon_共享.png
0 → 100644
936 Bytes
src/assets/实施监督预警/icon_创新.png
0 → 100644
886 Bytes
src/assets/实施监督预警/icon_协调.png
0 → 100644
892 Bytes
src/assets/实施监督预警/icon_安全.png
0 → 100644
783 Bytes
src/assets/实施监督预警/icon_底险管控.png
0 → 100644
909 Bytes
src/assets/实施监督预警/icon_开放.png
0 → 100644
664 Bytes
src/assets/实施监督预警/icon_指标监测.png
0 → 100644
606 Bytes
src/assets/实施监督预警/icon_生活品质.png
0 → 100644
671 Bytes
src/assets/实施监督预警/icon_结构效率.png
0 → 100644
954 Bytes
src/assets/实施监督预警/icon_绿色.png
0 → 100644
959 Bytes
src/assets/弹窗按钮背景-选中.png
0 → 100644
2.54 KB
src/assets/弹窗按钮背景-默认.png
0 → 100644
1.51 KB
src/assets/成果审查管理/icon_已办项目.png
0 → 100644
450 Bytes
src/assets/成果审查管理/icon_成果审查.png
0 → 100644
490 Bytes
src/assets/成果审查管理/icon_成果查看.png
0 → 100644
490 Bytes
src/assets/批后监管/icon_批后监管.png
0 → 100644
391 Bytes
src/assets/批后监管/icon_案件查处.png
0 → 100644
466 Bytes
src/assets/批后监管/icon_违建数据.png
0 → 100644
741 Bytes
src/assets/顶部1.png
0 → 100644
100 KB
src/components/allSee.vue
0 → 100644
1 | <template> | ||
2 | <div class="container"> | ||
3 | <div class="wrapper"> | ||
4 | <div class="box"> | ||
5 | </div> | ||
6 | </div> | ||
7 | <div class="mian"> | ||
8 | <div class="title"> | ||
9 | <span>通视分析</span> | ||
10 | <span @click="closePop" class="close">×</span> | ||
11 | </div> | ||
12 | |||
13 | <div class="func-input"> | ||
14 | <span>观察点高度</span> | ||
15 | <el-input-number v-model="num" controls-position="right" @change="handleChange" | ||
16 | style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="1" :max="10000"> | ||
17 | </el-input-number> | ||
18 | <span style="margin-left: 12px;">米</span> | ||
19 | </div> | ||
20 | |||
21 | <div class="func-btn"> | ||
22 | <div class="btn-wrapper add-bg" @click="startAnalysis"> | ||
23 | <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt=""> | ||
24 | <span>开始分析</span> | ||
25 | </div> | ||
26 | <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;"> | ||
27 | <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt=""> | ||
28 | <span>清除分析结果</span> | ||
29 | </div> | ||
30 | </div> | ||
31 | |||
32 | </div> | ||
33 | </div> | ||
34 | </template> | ||
35 | |||
36 | <script> | ||
37 | export default { | ||
38 | name: 'allSee', | ||
39 | components: {}, | ||
40 | data() { | ||
41 | return { | ||
42 | step: 0.01, | ||
43 | num: 1, | ||
44 | // isAnalysis: true | ||
45 | } | ||
46 | }, | ||
47 | mounted() {}, | ||
48 | methods: { | ||
49 | closePop() { | ||
50 | this.$emit('closePop', 'allSee') | ||
51 | }, | ||
52 | handleChange() { | ||
53 | |||
54 | }, | ||
55 | startAnalysis() { | ||
56 | // this.isAnalysis = true; | ||
57 | }, | ||
58 | stopAnalysis() { | ||
59 | // this.isAnalysis = false; | ||
60 | } | ||
61 | |||
62 | } | ||
63 | } | ||
64 | </script> | ||
65 | |||
66 | <style scoped> | ||
67 | .container { | ||
68 | position: relative; | ||
69 | color: #fff; | ||
70 | font-size: 16px; | ||
71 | width: 450px; | ||
72 | } | ||
73 | |||
74 | .wrapper { | ||
75 | position: absolute; | ||
76 | width: 100%; | ||
77 | height: 100%; | ||
78 | z-index: 1; | ||
79 | border: 1px solid rgba(151, 151, 151, 0.58); | ||
80 | } | ||
81 | |||
82 | .box { | ||
83 | background: rgba(4, 10, 10, 0.58); | ||
84 | box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5); | ||
85 | /* filter: blur(10px); */ | ||
86 | height: 100px; | ||
87 | position: absolute; | ||
88 | width: 100%; | ||
89 | height: 100%; | ||
90 | z-index: 1; | ||
91 | } | ||
92 | |||
93 | .mian { | ||
94 | position: relative; | ||
95 | width: 100%; | ||
96 | height: 100%; | ||
97 | z-index: 1000; | ||
98 | } | ||
99 | |||
100 | .list-box span:nth-of-type(1) { | ||
101 | display: inline-block; | ||
102 | width: 98px; | ||
103 | margin-right: 20px; | ||
104 | color: rgba(255, 255, 255, .7); | ||
105 | } | ||
106 | |||
107 | .list-box span:nth-of-type(2) { | ||
108 | margin-top: 14px; | ||
109 | display: inline-block; | ||
110 | } | ||
111 | |||
112 | |||
113 | .title { | ||
114 | display: flex; | ||
115 | justify-content: space-between; | ||
116 | border-bottom: 1px solid rgba(255, 255, 255, 0.15); | ||
117 | padding: 18px 24px; | ||
118 | font-size: 20px; | ||
119 | } | ||
120 | |||
121 | |||
122 | .func-input { | ||
123 | display: flex; | ||
124 | align-items: center; | ||
125 | /* justify-content: space-between; */ | ||
126 | padding: 18px 24px 0px 24px; | ||
127 | font-size: 18px; | ||
128 | cursor: pointer; | ||
129 | } | ||
130 | |||
131 | .func { | ||
132 | padding: 18px 24px; | ||
133 | } | ||
134 | |||
135 | |||
136 | |||
137 | .func-btn { | ||
138 | display: flex; | ||
139 | padding: 18px 24px 44px 24px; | ||
140 | align-items: center; | ||
141 | font-size: 18px; | ||
142 | cursor: pointer; | ||
143 | } | ||
144 | |||
145 | .btn-wrapper { | ||
146 | display: flex; | ||
147 | align-items: center; | ||
148 | width: 190px; | ||
149 | height: 36px; | ||
150 | background-image: url('../assets/弹窗按钮背景-默认.png'); | ||
151 | background-size: 100% 100%; | ||
152 | background-repeat: no-repeat; | ||
153 | line-height: 36px; | ||
154 | } | ||
155 | |||
156 | .add-bg { | ||
157 | background-image: url('../assets/弹窗按钮背景-选中.png'); | ||
158 | } | ||
159 | |||
160 | .close { | ||
161 | cursor: pointer; | ||
162 | } | ||
163 | |||
164 | >>>input::-webkit-input-placeholder { | ||
165 | font-size: 16px; | ||
166 | color: rgba(255, 255, 255, 0.78) !important; | ||
167 | } | ||
168 | |||
169 | >>>.el-input__inner { | ||
170 | background: rgba(4, 10, 10, 0.58) !important; | ||
171 | border: 1px solid rgba(23, 34, 38, 0.57); | ||
172 | color: #fff; | ||
173 | } | ||
174 | |||
175 | >>>.el-input__suffix { | ||
176 | color: #fff; | ||
177 | font-size: 17px; | ||
178 | } | ||
179 | |||
180 | >>>.el-input-number__increase, | ||
181 | >>>.el-input-number__decrease { | ||
182 | background: rgba(4, 10, 10, 0.58); | ||
183 | } | ||
184 | |||
185 | >>>.el-input-number.is-controls-right .el-input-number__decrease, | ||
186 | >>>.el-input-number__increase { | ||
187 | border-left: 1px solid rgba(4, 10, 10, 0.58); | ||
188 | } | ||
189 | |||
190 | >>>.el-icon-arrow-up:before, | ||
191 | >>>.el-icon-arrow-down:before { | ||
192 | color: #fff; | ||
193 | } | ||
194 | |||
195 | >>>.el-input-number.is-controls-right .el-input-number__increase { | ||
196 | border-bottom: 1px solid rgba(4, 10, 10, 0.58); | ||
197 | } | ||
198 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/components/horizon.vue
0 → 100644
1 | <template> | ||
2 | <div class="container"> | ||
3 | <div class="wrapper"> | ||
4 | <div class="box"> | ||
5 | </div> | ||
6 | </div> | ||
7 | <div class="mian"> | ||
8 | <div class="title"> | ||
9 | <span>视域分析</span> | ||
10 | <span @click="closePop" class="close">×</span> | ||
11 | </div> | ||
12 | |||
13 | |||
14 | <div class="func-input"> | ||
15 | <span class="text-right">观察点高度</span> | ||
16 | <el-input-number v-model="sdgc" controls-position="right" | ||
17 | style="width:245px; height:38px; margin-left: 12px;" :step='0.1' :min="0" :max="10000"> | ||
18 | </el-input-number> | ||
19 | <span style="margin-left: 12px;">米</span> | ||
20 | </div> | ||
21 | |||
22 | <div class="func-input"> | ||
23 | <span class="text-right">观察方向</span> | ||
24 | <el-input-number v-model="swsd" controls-position="right" | ||
25 | style="width:245px; height:38px; margin-left: 12px;" :step='1' :min="0" :max="360"> | ||
26 | </el-input-number> | ||
27 | <span style="margin-left: 12px;">度</span> | ||
28 | </div> | ||
29 | <div class="func-input"> | ||
30 | <span class="text-right">观察距离</span> | ||
31 | <el-input-number v-model="ymsd" controls-position="right" | ||
32 | style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="10000"> | ||
33 | </el-input-number> | ||
34 | <span style="margin-left: 12px;">米</span> | ||
35 | </div> | ||
36 | |||
37 | <div class="func-input"> | ||
38 | <span class="text-right">水平视场角</span> | ||
39 | <el-input-number v-model="ymsd" controls-position="right" | ||
40 | style="width:245px; height:38px; margin-left: 12px;" :step='1' :min="0" :max="360"> | ||
41 | </el-input-number> | ||
42 | <span style="margin-left: 12px;">度</span> | ||
43 | </div> | ||
44 | |||
45 | <div class="func-input"> | ||
46 | <span class="text-right">垂直视场角</span> | ||
47 | <el-input-number v-model="ymsd" controls-position="right" | ||
48 | style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="360"> | ||
49 | </el-input-number> | ||
50 | <span style="margin-left: 12px;">度</span> | ||
51 | </div> | ||
52 | |||
53 | <div class="func-btn"> | ||
54 | <div class="btn-wrapper add-bg" @click="startAnalysis"> | ||
55 | <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt=""> | ||
56 | <span>开始分析</span> | ||
57 | </div> | ||
58 | <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;"> | ||
59 | <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt=""> | ||
60 | <span>清除分析结果</span> | ||
61 | </div> | ||
62 | </div> | ||
63 | |||
64 | </div> | ||
65 | </div> | ||
66 | </template> | ||
67 | |||
68 | <script> | ||
69 | export default { | ||
70 | name: 'horizon', | ||
71 | components: {}, | ||
72 | data() { | ||
73 | return { | ||
74 | step: 0.01, | ||
75 | num: 1, | ||
76 | sdgc: '', // 水底高程 | ||
77 | swsd: '', // 水位深度 | ||
78 | ymsd: '', // 淹没速度 | ||
79 | |||
80 | |||
81 | isXmbj: true, | ||
82 | // isAnalysis: true | ||
83 | } | ||
84 | }, | ||
85 | mounted() {}, | ||
86 | methods: { | ||
87 | closePop() { | ||
88 | this.$emit('closePop', 'horizon') | ||
89 | }, | ||
90 | startAnalysis() { | ||
91 | |||
92 | }, | ||
93 | stopAnalysis() { | ||
94 | |||
95 | }, | ||
96 | } | ||
97 | } | ||
98 | </script> | ||
99 | |||
100 | <style scoped> | ||
101 | .container { | ||
102 | position: relative; | ||
103 | color: #fff; | ||
104 | font-size: 16px; | ||
105 | width: 450px; | ||
106 | } | ||
107 | |||
108 | .wrapper { | ||
109 | position: absolute; | ||
110 | width: 100%; | ||
111 | height: 100%; | ||
112 | z-index: 1; | ||
113 | border: 1px solid rgba(151, 151, 151, 0.58); | ||
114 | } | ||
115 | |||
116 | .box { | ||
117 | background: rgba(4, 10, 10, 0.58); | ||
118 | box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5); | ||
119 | /* filter: blur(10px); */ | ||
120 | height: 100px; | ||
121 | position: absolute; | ||
122 | width: 100%; | ||
123 | height: 100%; | ||
124 | z-index: 1; | ||
125 | } | ||
126 | |||
127 | .mian { | ||
128 | position: relative; | ||
129 | width: 100%; | ||
130 | height: 100%; | ||
131 | z-index: 1000; | ||
132 | } | ||
133 | |||
134 | .list-box span:nth-of-type(1) { | ||
135 | display: inline-block; | ||
136 | width: 98px; | ||
137 | margin-right: 20px; | ||
138 | color: rgba(255, 255, 255, .7); | ||
139 | } | ||
140 | |||
141 | .list-box span:nth-of-type(2) { | ||
142 | margin-top: 14px; | ||
143 | display: inline-block; | ||
144 | } | ||
145 | |||
146 | |||
147 | .title { | ||
148 | display: flex; | ||
149 | justify-content: space-between; | ||
150 | border-bottom: 1px solid rgba(255, 255, 255, 0.15); | ||
151 | padding: 18px 24px; | ||
152 | font-size: 20px; | ||
153 | } | ||
154 | |||
155 | |||
156 | .func-input { | ||
157 | display: flex; | ||
158 | align-items: center; | ||
159 | /* justify-content: space-between; */ | ||
160 | padding: 18px 24px 0px 24px; | ||
161 | font-size: 18px; | ||
162 | cursor: pointer; | ||
163 | } | ||
164 | |||
165 | .func { | ||
166 | padding: 18px 24px; | ||
167 | } | ||
168 | |||
169 | |||
170 | |||
171 | .func-btn { | ||
172 | display: flex; | ||
173 | padding: 18px 24px 44px 24px; | ||
174 | align-items: center; | ||
175 | font-size: 18px; | ||
176 | cursor: pointer; | ||
177 | } | ||
178 | |||
179 | .btn-wrapper { | ||
180 | display: flex; | ||
181 | align-items: center; | ||
182 | width: 190px; | ||
183 | height: 36px; | ||
184 | background-image: url('../assets/弹窗按钮背景-默认.png'); | ||
185 | background-size: 100% 100%; | ||
186 | background-repeat: no-repeat; | ||
187 | line-height: 36px; | ||
188 | } | ||
189 | |||
190 | .add-bg { | ||
191 | background-image: url('../assets/弹窗按钮背景-选中.png'); | ||
192 | } | ||
193 | |||
194 | |||
195 | .btn-wrapper2 { | ||
196 | display: flex; | ||
197 | align-items: center; | ||
198 | width: 116px; | ||
199 | height: 38px; | ||
200 | background-image: url('../assets/一张图/bg_专题分析.png'); | ||
201 | background-size: 100% 100%; | ||
202 | background-repeat: no-repeat; | ||
203 | text-align: center; | ||
204 | line-height: 38px; | ||
205 | margin-left: 13px; | ||
206 | } | ||
207 | |||
208 | .add-bg2 { | ||
209 | background-image: url('../assets/一张图/bg_资源目录.png'); | ||
210 | } | ||
211 | |||
212 | .close { | ||
213 | cursor: pointer; | ||
214 | } | ||
215 | |||
216 | .center { | ||
217 | display: inline-block; | ||
218 | width: 100%; | ||
219 | height: 100%; | ||
220 | text-align: center; | ||
221 | } | ||
222 | |||
223 | .text-right { | ||
224 | display: inline-block; | ||
225 | width: 90px; | ||
226 | text-align: right; | ||
227 | font-size: 18px; | ||
228 | } | ||
229 | |||
230 | >>>input::-webkit-input-placeholder { | ||
231 | font-size: 16px; | ||
232 | color: rgba(255, 255, 255, 0.78) !important; | ||
233 | } | ||
234 | |||
235 | >>>.el-input__inner { | ||
236 | background: rgba(4, 10, 10, 0.58) !important; | ||
237 | border: 1px solid rgba(23, 34, 38, 0.57); | ||
238 | color: #fff; | ||
239 | } | ||
240 | |||
241 | >>>.el-input__suffix { | ||
242 | color: #fff; | ||
243 | font-size: 17px; | ||
244 | } | ||
245 | |||
246 | >>>.el-input-number__increase, | ||
247 | >>>.el-input-number__decrease { | ||
248 | background: rgba(4, 10, 10, 0.58); | ||
249 | } | ||
250 | |||
251 | >>>.el-input-number.is-controls-right .el-input-number__decrease, | ||
252 | >>>.el-input-number__increase { | ||
253 | border-left: 1px solid rgba(4, 10, 10, 0.58); | ||
254 | } | ||
255 | |||
256 | >>>.el-icon-arrow-up:before, | ||
257 | >>>.el-icon-arrow-down:before { | ||
258 | color: #fff; | ||
259 | } | ||
260 | |||
261 | >>>.el-input-number.is-controls-right .el-input-number__increase { | ||
262 | border-bottom: 1px solid rgba(4, 10, 10, 0.58); | ||
263 | } | ||
264 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/components/kgAnalusis.vue
0 → 100644
1 | <template> | ||
2 | <div class="container"> | ||
3 | <div class="wrapper"> | ||
4 | <div class="box"> | ||
5 | </div> | ||
6 | </div> | ||
7 | <div class="mian"> | ||
8 | <div class="title"> | ||
9 | <span>控高分析</span> | ||
10 | <span @click="closePop" class="close">×</span> | ||
11 | </div> | ||
12 | <div class="func-btn"> | ||
13 | <div class="btn-wrapper add-bg" @click="startAnalysis"> | ||
14 | <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt=""> | ||
15 | <span>开始分析</span> | ||
16 | </div> | ||
17 | <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;"> | ||
18 | <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt=""> | ||
19 | <span>清除分析结果</span> | ||
20 | </div> | ||
21 | </div> | ||
22 | <div class="kg-img"> | ||
23 | <div class="kg-box"> | ||
24 | <img :src="src" alt="" style="width: 100%; height: 100%;"> | ||
25 | <div class="btn-wrapper2"> | ||
26 | <span class="center">左侧立面</span> | ||
27 | </div> | ||
28 | </div> | ||
29 | <div class="kg-box"> | ||
30 | <img :src="src" alt="" style="width: 100%; height: 100%;"> | ||
31 | <div class="btn-wrapper2"> | ||
32 | <span class="center">右侧立面</span> | ||
33 | </div> | ||
34 | </div> | ||
35 | </div> | ||
36 | |||
37 | </div> | ||
38 | </div> | ||
39 | </template> | ||
40 | |||
41 | <script> | ||
42 | export default { | ||
43 | name: 'kgAnalusis', | ||
44 | components: {}, | ||
45 | data() { | ||
46 | return { | ||
47 | src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3820738330,1510784229&fm=26&gp=0.jpg' | ||
48 | } | ||
49 | }, | ||
50 | mounted() {}, | ||
51 | methods: { | ||
52 | closePop() { | ||
53 | this.$emit('closePop', 'kgAnalusis') | ||
54 | }, | ||
55 | startAnalysis() { | ||
56 | |||
57 | }, | ||
58 | stopAnalysis() { | ||
59 | |||
60 | }, | ||
61 | } | ||
62 | } | ||
63 | </script> | ||
64 | |||
65 | <style scoped> | ||
66 | .container { | ||
67 | position: relative; | ||
68 | color: #fff; | ||
69 | font-size: 16px; | ||
70 | width: 450px; | ||
71 | } | ||
72 | |||
73 | .wrapper { | ||
74 | position: absolute; | ||
75 | width: 100%; | ||
76 | height: 100%; | ||
77 | z-index: 1; | ||
78 | border: 1px solid rgba(151, 151, 151, 0.58); | ||
79 | } | ||
80 | |||
81 | .box { | ||
82 | background: rgba(4, 10, 10, 0.58); | ||
83 | box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5); | ||
84 | /* filter: blur(10px); */ | ||
85 | height: 100px; | ||
86 | position: absolute; | ||
87 | width: 100%; | ||
88 | height: 100%; | ||
89 | z-index: 1; | ||
90 | } | ||
91 | |||
92 | .mian { | ||
93 | position: relative; | ||
94 | width: 100%; | ||
95 | height: 100%; | ||
96 | z-index: 1000; | ||
97 | } | ||
98 | |||
99 | .list-box span:nth-of-type(1) { | ||
100 | display: inline-block; | ||
101 | width: 98px; | ||
102 | margin-right: 20px; | ||
103 | color: rgba(255, 255, 255, .7); | ||
104 | } | ||
105 | |||
106 | .list-box span:nth-of-type(2) { | ||
107 | margin-top: 14px; | ||
108 | display: inline-block; | ||
109 | } | ||
110 | |||
111 | |||
112 | .title { | ||
113 | display: flex; | ||
114 | justify-content: space-between; | ||
115 | border-bottom: 1px solid rgba(255, 255, 255, 0.15); | ||
116 | padding: 18px 24px; | ||
117 | font-size: 20px; | ||
118 | } | ||
119 | |||
120 | |||
121 | .func-input { | ||
122 | display: flex; | ||
123 | align-items: center; | ||
124 | /* justify-content: space-between; */ | ||
125 | padding: 18px 24px 0px 24px; | ||
126 | font-size: 18px; | ||
127 | cursor: pointer; | ||
128 | } | ||
129 | |||
130 | .func { | ||
131 | padding: 18px 24px; | ||
132 | } | ||
133 | |||
134 | |||
135 | |||
136 | .func-btn { | ||
137 | display: flex; | ||
138 | padding: 18px 24px 30px 24px; | ||
139 | align-items: center; | ||
140 | font-size: 18px; | ||
141 | cursor: pointer; | ||
142 | } | ||
143 | |||
144 | .btn-wrapper { | ||
145 | display: flex; | ||
146 | align-items: center; | ||
147 | width: 190px; | ||
148 | height: 36px; | ||
149 | background-image: url('../assets/弹窗按钮背景-默认.png'); | ||
150 | background-size: 100% 100%; | ||
151 | background-repeat: no-repeat; | ||
152 | line-height: 36px; | ||
153 | } | ||
154 | |||
155 | .add-bg { | ||
156 | background-image: url('../assets/弹窗按钮背景-选中.png'); | ||
157 | } | ||
158 | |||
159 | |||
160 | .btn-wrapper2 { | ||
161 | position: absolute; | ||
162 | top: 12px; | ||
163 | right: 24px; | ||
164 | display: flex; | ||
165 | align-items: center; | ||
166 | width: 116px; | ||
167 | height: 38px; | ||
168 | background-image: url('../assets/一张图/bg_专题分析.png'); | ||
169 | background-size: 100% 100%; | ||
170 | background-repeat: no-repeat; | ||
171 | text-align: center; | ||
172 | line-height: 38px; | ||
173 | margin-left: 13px; | ||
174 | } | ||
175 | |||
176 | .add-bg2 { | ||
177 | background-image: url('../assets/一张图/bg_资源目录.png'); | ||
178 | } | ||
179 | |||
180 | .close { | ||
181 | cursor: pointer; | ||
182 | } | ||
183 | |||
184 | .center { | ||
185 | display: inline-block; | ||
186 | width: 100%; | ||
187 | height: 100%; | ||
188 | text-align: center; | ||
189 | } | ||
190 | |||
191 | .text-right { | ||
192 | display: inline-block; | ||
193 | width: 90px; | ||
194 | text-align: right; | ||
195 | font-size: 18px; | ||
196 | } | ||
197 | |||
198 | .kg-img { | ||
199 | width: 410px; | ||
200 | padding: 0px 24px 0px 24px; | ||
201 | padding-bottom: 10px; | ||
202 | } | ||
203 | |||
204 | .kg-box { | ||
205 | width: 100%; | ||
206 | height: 180px; | ||
207 | position: relative; | ||
208 | margin-bottom: 20px; | ||
209 | } | ||
210 | |||
211 | >>>input::-webkit-input-placeholder { | ||
212 | font-size: 16px; | ||
213 | color: rgba(255, 255, 255, 0.78) !important; | ||
214 | } | ||
215 | |||
216 | >>>.el-input__inner { | ||
217 | background: rgba(4, 10, 10, 0.58) !important; | ||
218 | border: 1px solid rgba(23, 34, 38, 0.57); | ||
219 | color: #fff; | ||
220 | } | ||
221 | |||
222 | >>>.el-input__suffix { | ||
223 | color: #fff; | ||
224 | font-size: 17px; | ||
225 | } | ||
226 | |||
227 | >>>.el-input-number__increase, | ||
228 | >>>.el-input-number__decrease { | ||
229 | background: rgba(4, 10, 10, 0.58); | ||
230 | } | ||
231 | |||
232 | >>>.el-input-number.is-controls-right .el-input-number__decrease, | ||
233 | >>>.el-input-number__increase { | ||
234 | border-left: 1px solid rgba(4, 10, 10, 0.58); | ||
235 | } | ||
236 | |||
237 | >>>.el-icon-arrow-up:before, | ||
238 | >>>.el-icon-arrow-down:before { | ||
239 | color: #fff; | ||
240 | } | ||
241 | |||
242 | >>>.el-input-number.is-controls-right .el-input-number__increase { | ||
243 | border-bottom: 1px solid rgba(4, 10, 10, 0.58); | ||
244 | } | ||
245 | </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 | <div class="list-box"> | 3 | <div class="wrapper"> |
4 | <span>规划项目</span> | 4 | <div class="box"> |
5 | <span>综合楼</span> | 5 | </div> |
6 | </div> | 6 | </div> |
7 | <div class="list-box"> | 7 | <div class="mian"> |
8 | <span>建设单位</span> | 8 | <div class="list-box"> |
9 | <span>青海人和顺置业有限公司</span> | 9 | <span>规划项目</span> |
10 | </div> | 10 | <span>综合楼</span> |
11 | <div class="list-box"> | 11 | </div> |
12 | <span>规划用地性质</span> | 12 | <div class="list-box"> |
13 | <span>B2商务设施用地</span> | 13 | <span>建设单位</span> |
14 | </div> | 14 | <span>青海人和顺置业有限公司</span> |
15 | <div class="list-box"> | 15 | </div> |
16 | <span>总用地面积</span> | 16 | <div class="list-box"> |
17 | <span>26.245</span> | 17 | <span>规划用地性质</span> |
18 | </div> | 18 | <span>B2商务设施用地</span> |
19 | <div class="list-box"> | 19 | </div> |
20 | <span>净用地面积</span> | 20 | <div class="list-box"> |
21 | <span>26.07</span> | 21 | <span>总用地面积</span> |
22 | </div> | 22 | <span>26.245</span> |
23 | <div class="list-box"> | 23 | </div> |
24 | <span>其他面积</span> | 24 | <div class="list-box"> |
25 | <span>0</span> | 25 | <span>净用地面积</span> |
26 | <span>26.07</span> | ||
27 | </div> | ||
28 | <div class="list-box"> | ||
29 | <span>其他面积</span> | ||
30 | <span>0</span> | ||
31 | </div> | ||
26 | </div> | 32 | </div> |
27 | </div> | 33 | </div> |
28 | </template> | 34 | </template> |
... | @@ -32,8 +38,7 @@ | ... | @@ -32,8 +38,7 @@ |
32 | name: 'mapPop', | 38 | name: 'mapPop', |
33 | components: {}, | 39 | components: {}, |
34 | data() { | 40 | data() { |
35 | return { | 41 | return {} |
36 | } | ||
37 | }, | 42 | }, |
38 | mounted() {}, | 43 | mounted() {}, |
39 | methods: { | 44 | methods: { |
... | @@ -44,21 +49,45 @@ | ... | @@ -44,21 +49,45 @@ |
44 | 49 | ||
45 | <style scoped> | 50 | <style scoped> |
46 | .container { | 51 | .container { |
52 | position: relative; | ||
47 | color: #fff; | 53 | color: #fff; |
54 | font-size: 16px; | ||
55 | } | ||
56 | |||
57 | .wrapper { | ||
58 | position: absolute; | ||
59 | width: 100%; | ||
60 | height: 100%; | ||
61 | z-index: 1; | ||
62 | } | ||
63 | |||
64 | .box { | ||
48 | background: rgba(4, 10, 10, 0.57); | 65 | background: rgba(4, 10, 10, 0.57); |
49 | box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.50); | 66 | box-shadow: 0 4px 9px 0 rgba(0, 0, 0, 0.50); |
67 | /* filter: blur(10px); */ | ||
68 | height: 100px; | ||
69 | position: absolute; | ||
70 | width: 100%; | ||
71 | height: 100%; | ||
72 | z-index: 1; | ||
73 | } | ||
74 | |||
75 | .mian { | ||
76 | position: relative; | ||
50 | padding: 4px 14px 14px 14px; | 77 | padding: 4px 14px 14px 14px; |
51 | font-size: 16px; | 78 | width: 100%; |
79 | height: 100%; | ||
80 | z-index: 1000; | ||
52 | } | 81 | } |
53 | 82 | ||
54 | .list-box span:nth-of-type(1){ | 83 | .list-box span:nth-of-type(1) { |
55 | display: inline-block; | 84 | display: inline-block; |
56 | width: 98px; | 85 | width: 98px; |
57 | margin-right: 20px; | 86 | margin-right: 20px; |
58 | color: rgba(255, 255, 255, .7); | 87 | color: rgba(255, 255, 255, .7); |
59 | } | 88 | } |
60 | 89 | ||
61 | .list-box span:nth-of-type(2){ | 90 | .list-box span:nth-of-type(2) { |
62 | margin-top: 14px; | 91 | margin-top: 14px; |
63 | display: inline-block; | 92 | display: inline-block; |
64 | } | 93 | } | ... | ... |
This diff is collapsed.
Click to expand it.
src/components/tjxAnslysis.vue
0 → 100644
1 | <template> | ||
2 | <div class="container"> | ||
3 | <div class="wrapper"> | ||
4 | <div class="box"> | ||
5 | </div> | ||
6 | </div> | ||
7 | <div class="mian"> | ||
8 | <div class="title"> | ||
9 | <span>天际线分析</span> | ||
10 | <span @click="closePop" class="close">×</span> | ||
11 | </div> | ||
12 | <div class="func-btn"> | ||
13 | <div class="btn-wrapper add-bg" @click="startAnalysis"> | ||
14 | <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt=""> | ||
15 | <span>绘制观察线</span> | ||
16 | </div> | ||
17 | <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;"> | ||
18 | <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_绘制观察线.png" alt=""> | ||
19 | <span>清除分析结果</span> | ||
20 | </div> | ||
21 | </div> | ||
22 | |||
23 | </div> | ||
24 | </div> | ||
25 | </template> | ||
26 | |||
27 | <script> | ||
28 | export default { | ||
29 | name: 'tjxAnslysis', | ||
30 | components: {}, | ||
31 | data() { | ||
32 | return { | ||
33 | |||
34 | } | ||
35 | }, | ||
36 | mounted() {}, | ||
37 | methods: { | ||
38 | closePop() { | ||
39 | this.$emit('closePop', 'tjxAnslysis') | ||
40 | }, | ||
41 | startAnalysis() { | ||
42 | |||
43 | }, | ||
44 | stopAnalysis() { | ||
45 | |||
46 | }, | ||
47 | } | ||
48 | } | ||
49 | </script> | ||
50 | |||
51 | <style scoped> | ||
52 | .container { | ||
53 | position: relative; | ||
54 | color: #fff; | ||
55 | font-size: 16px; | ||
56 | width: 450px; | ||
57 | } | ||
58 | |||
59 | .wrapper { | ||
60 | position: absolute; | ||
61 | width: 100%; | ||
62 | height: 100%; | ||
63 | z-index: 1; | ||
64 | border: 1px solid rgba(151, 151, 151, 0.58); | ||
65 | } | ||
66 | |||
67 | .box { | ||
68 | background: rgba(4, 10, 10, 0.58); | ||
69 | box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5); | ||
70 | /* filter: blur(10px); */ | ||
71 | height: 100px; | ||
72 | position: absolute; | ||
73 | width: 100%; | ||
74 | height: 100%; | ||
75 | z-index: 1; | ||
76 | } | ||
77 | |||
78 | .mian { | ||
79 | position: relative; | ||
80 | width: 100%; | ||
81 | height: 100%; | ||
82 | z-index: 1000; | ||
83 | } | ||
84 | |||
85 | .list-box span:nth-of-type(1) { | ||
86 | display: inline-block; | ||
87 | width: 98px; | ||
88 | margin-right: 20px; | ||
89 | color: rgba(255, 255, 255, .7); | ||
90 | } | ||
91 | |||
92 | .list-box span:nth-of-type(2) { | ||
93 | margin-top: 14px; | ||
94 | display: inline-block; | ||
95 | } | ||
96 | |||
97 | |||
98 | .title { | ||
99 | display: flex; | ||
100 | justify-content: space-between; | ||
101 | border-bottom: 1px solid rgba(255, 255, 255, 0.15); | ||
102 | padding: 18px 24px; | ||
103 | font-size: 20px; | ||
104 | } | ||
105 | |||
106 | |||
107 | .func-input { | ||
108 | display: flex; | ||
109 | align-items: center; | ||
110 | /* justify-content: space-between; */ | ||
111 | padding: 18px 24px 0px 24px; | ||
112 | font-size: 18px; | ||
113 | cursor: pointer; | ||
114 | } | ||
115 | |||
116 | .func { | ||
117 | padding: 18px 24px; | ||
118 | } | ||
119 | |||
120 | |||
121 | |||
122 | .func-btn { | ||
123 | display: flex; | ||
124 | padding: 18px 24px 44px 24px; | ||
125 | align-items: center; | ||
126 | font-size: 18px; | ||
127 | cursor: pointer; | ||
128 | } | ||
129 | |||
130 | .btn-wrapper { | ||
131 | display: flex; | ||
132 | align-items: center; | ||
133 | width: 190px; | ||
134 | height: 36px; | ||
135 | background-image: url('../assets/弹窗按钮背景-默认.png'); | ||
136 | background-size: 100% 100%; | ||
137 | background-repeat: no-repeat; | ||
138 | line-height: 36px; | ||
139 | } | ||
140 | |||
141 | .add-bg { | ||
142 | background-image: url('../assets/弹窗按钮背景-选中.png'); | ||
143 | } | ||
144 | |||
145 | |||
146 | .btn-wrapper2 { | ||
147 | display: flex; | ||
148 | align-items: center; | ||
149 | width: 116px; | ||
150 | height: 38px; | ||
151 | background-image: url('../assets/一张图/bg_专题分析.png'); | ||
152 | background-size: 100% 100%; | ||
153 | background-repeat: no-repeat; | ||
154 | text-align: center; | ||
155 | line-height: 38px; | ||
156 | margin-left: 13px; | ||
157 | } | ||
158 | |||
159 | .add-bg2 { | ||
160 | background-image: url('../assets/一张图/bg_资源目录.png'); | ||
161 | } | ||
162 | |||
163 | .close { | ||
164 | cursor: pointer; | ||
165 | } | ||
166 | |||
167 | .center { | ||
168 | display: inline-block; | ||
169 | width: 100%; | ||
170 | height: 100%; | ||
171 | text-align: center; | ||
172 | } | ||
173 | |||
174 | .text-right { | ||
175 | display: inline-block; | ||
176 | width: 90px; | ||
177 | text-align: right; | ||
178 | font-size: 18px; | ||
179 | } | ||
180 | |||
181 | >>>input::-webkit-input-placeholder { | ||
182 | font-size: 16px; | ||
183 | color: rgba(255, 255, 255, 0.78) !important; | ||
184 | } | ||
185 | |||
186 | >>>.el-input__inner { | ||
187 | background: rgba(4, 10, 10, 0.58) !important; | ||
188 | border: 1px solid rgba(23, 34, 38, 0.57); | ||
189 | color: #fff; | ||
190 | } | ||
191 | |||
192 | >>>.el-input__suffix { | ||
193 | color: #fff; | ||
194 | font-size: 17px; | ||
195 | } | ||
196 | |||
197 | >>>.el-input-number__increase, | ||
198 | >>>.el-input-number__decrease { | ||
199 | background: rgba(4, 10, 10, 0.58); | ||
200 | } | ||
201 | |||
202 | >>>.el-input-number.is-controls-right .el-input-number__decrease, | ||
203 | >>>.el-input-number__increase { | ||
204 | border-left: 1px solid rgba(4, 10, 10, 0.58); | ||
205 | } | ||
206 | |||
207 | >>>.el-icon-arrow-up:before, | ||
208 | >>>.el-icon-arrow-down:before { | ||
209 | color: #fff; | ||
210 | } | ||
211 | |||
212 | >>>.el-input-number.is-controls-right .el-input-number__increase { | ||
213 | border-bottom: 1px solid rgba(4, 10, 10, 0.58); | ||
214 | } | ||
215 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/components/ymAnslysis.vue
0 → 100644
1 | <template> | ||
2 | <div class="container"> | ||
3 | <div class="wrapper"> | ||
4 | <div class="box"> | ||
5 | </div> | ||
6 | </div> | ||
7 | <div class="mian"> | ||
8 | <div class="title"> | ||
9 | <span>淹没分析</span> | ||
10 | <span @click="closePop" class="close">×</span> | ||
11 | </div> | ||
12 | |||
13 | <div class="func-input"> | ||
14 | <span>分析区域</span> | ||
15 | <div class="btn-wrapper2" :class="[isXmbj?'add-bg2': '']" @click="handleIsXmbj(true)"> | ||
16 | <span class="center">项目边界</span> | ||
17 | </div> | ||
18 | <div class="btn-wrapper2" :class="[!isXmbj?'add-bg2': '']" @click="handleIsXmbj(false)"> | ||
19 | <span class="center">绘制</span> | ||
20 | </div> | ||
21 | </div> | ||
22 | |||
23 | <div class="func-input"> | ||
24 | <span>水底高程</span> | ||
25 | <el-input-number v-model="sdgc" controls-position="right" | ||
26 | style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="100000"> | ||
27 | </el-input-number> | ||
28 | <span style="margin-left: 12px;">米</span> | ||
29 | </div> | ||
30 | |||
31 | <div class="func-input"> | ||
32 | <span>水位深度</span> | ||
33 | <el-input-number v-model="swsd" controls-position="right" | ||
34 | style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="100000"> | ||
35 | </el-input-number> | ||
36 | <span style="margin-left: 12px;">米</span> | ||
37 | </div> | ||
38 | <div class="func-input"> | ||
39 | <span>淹没速度</span> | ||
40 | <el-input-number v-model="ymsd" controls-position="right" | ||
41 | style="width:245px; height:38px; margin-left: 12px;" :step='step' :min="0" :max="100000"> | ||
42 | </el-input-number> | ||
43 | <span style="margin-left: 12px;">米</span> | ||
44 | </div> | ||
45 | |||
46 | <div class="func-input"> | ||
47 | <span>当前水位</span> | ||
48 | <span style="margin-left: 36px;">1263.7米</span> | ||
49 | </div> | ||
50 | <div class="func-btn"> | ||
51 | <div class="btn-wrapper add-bg" @click="startAnalysis"> | ||
52 | <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt=""> | ||
53 | <span>开始分析</span> | ||
54 | </div> | ||
55 | <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;"> | ||
56 | <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_暂停分析.png" alt=""> | ||
57 | <span>暂停分析</span> | ||
58 | </div> | ||
59 | </div> | ||
60 | |||
61 | </div> | ||
62 | </div> | ||
63 | </template> | ||
64 | |||
65 | <script> | ||
66 | export default { | ||
67 | name: 'allSee', | ||
68 | components: {}, | ||
69 | data() { | ||
70 | return { | ||
71 | step: 0.01, | ||
72 | num: 1, | ||
73 | sdgc: '', // 水底高程 | ||
74 | swsd: '', // 水位深度 | ||
75 | ymsd: '', // 淹没速度 | ||
76 | |||
77 | |||
78 | isXmbj: true, | ||
79 | // isAnalysis: true | ||
80 | } | ||
81 | }, | ||
82 | mounted() {}, | ||
83 | methods: { | ||
84 | closePop() { | ||
85 | this.$emit('closePop', 'ymAnslysis') | ||
86 | }, | ||
87 | handleChange() { | ||
88 | |||
89 | }, | ||
90 | startAnalysis() { | ||
91 | // this.isAnalysis = true; | ||
92 | }, | ||
93 | stopAnalysis() { | ||
94 | // this.isAnalysis = false; | ||
95 | }, | ||
96 | handleIsXmbj(flag) { | ||
97 | this.isXmbj = flag; | ||
98 | } | ||
99 | } | ||
100 | } | ||
101 | </script> | ||
102 | |||
103 | <style scoped> | ||
104 | .container { | ||
105 | position: relative; | ||
106 | color: #fff; | ||
107 | font-size: 16px; | ||
108 | width: 450px; | ||
109 | } | ||
110 | |||
111 | .wrapper { | ||
112 | position: absolute; | ||
113 | width: 100%; | ||
114 | height: 100%; | ||
115 | z-index: 1; | ||
116 | border: 1px solid rgba(151, 151, 151, 0.58); | ||
117 | } | ||
118 | |||
119 | .box { | ||
120 | background: rgba(4, 10, 10, 0.58); | ||
121 | box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5); | ||
122 | /* filter: blur(10px); */ | ||
123 | height: 100px; | ||
124 | position: absolute; | ||
125 | width: 100%; | ||
126 | height: 100%; | ||
127 | z-index: 1; | ||
128 | } | ||
129 | |||
130 | .mian { | ||
131 | position: relative; | ||
132 | width: 100%; | ||
133 | height: 100%; | ||
134 | z-index: 1000; | ||
135 | } | ||
136 | |||
137 | .list-box span:nth-of-type(1) { | ||
138 | display: inline-block; | ||
139 | width: 98px; | ||
140 | margin-right: 20px; | ||
141 | color: rgba(255, 255, 255, .7); | ||
142 | } | ||
143 | |||
144 | .list-box span:nth-of-type(2) { | ||
145 | margin-top: 14px; | ||
146 | display: inline-block; | ||
147 | } | ||
148 | |||
149 | |||
150 | .title { | ||
151 | display: flex; | ||
152 | justify-content: space-between; | ||
153 | border-bottom: 1px solid rgba(255, 255, 255, 0.15); | ||
154 | padding: 18px 24px; | ||
155 | font-size: 20px; | ||
156 | } | ||
157 | |||
158 | |||
159 | .func-input { | ||
160 | display: flex; | ||
161 | align-items: center; | ||
162 | /* justify-content: space-between; */ | ||
163 | padding: 18px 24px 0px 24px; | ||
164 | font-size: 18px; | ||
165 | cursor: pointer; | ||
166 | } | ||
167 | |||
168 | .func { | ||
169 | padding: 18px 24px; | ||
170 | } | ||
171 | |||
172 | |||
173 | |||
174 | .func-btn { | ||
175 | display: flex; | ||
176 | padding: 18px 24px 44px 24px; | ||
177 | align-items: center; | ||
178 | font-size: 18px; | ||
179 | cursor: pointer; | ||
180 | } | ||
181 | |||
182 | .btn-wrapper { | ||
183 | display: flex; | ||
184 | align-items: center; | ||
185 | width: 190px; | ||
186 | height: 36px; | ||
187 | background-image: url('../assets/弹窗按钮背景-默认.png'); | ||
188 | background-size: 100% 100%; | ||
189 | background-repeat: no-repeat; | ||
190 | line-height: 36px; | ||
191 | } | ||
192 | |||
193 | .add-bg { | ||
194 | background-image: url('../assets/弹窗按钮背景-选中.png'); | ||
195 | } | ||
196 | |||
197 | |||
198 | .btn-wrapper2 { | ||
199 | display: flex; | ||
200 | align-items: center; | ||
201 | width: 116px; | ||
202 | height: 38px; | ||
203 | background-image: url('../assets/一张图/bg_专题分析.png'); | ||
204 | background-size: 100% 100%; | ||
205 | background-repeat: no-repeat; | ||
206 | text-align: center; | ||
207 | line-height: 38px; | ||
208 | margin-left: 13px; | ||
209 | } | ||
210 | |||
211 | .add-bg2 { | ||
212 | background-image: url('../assets/一张图/bg_资源目录.png'); | ||
213 | } | ||
214 | |||
215 | .close { | ||
216 | cursor: pointer; | ||
217 | } | ||
218 | |||
219 | .center { | ||
220 | display: inline-block; | ||
221 | width: 100%; | ||
222 | height: 100%; | ||
223 | text-align: center; | ||
224 | } | ||
225 | |||
226 | >>>input::-webkit-input-placeholder { | ||
227 | font-size: 16px; | ||
228 | color: rgba(255, 255, 255, 0.78) !important; | ||
229 | } | ||
230 | |||
231 | >>>.el-input__inner { | ||
232 | background: rgba(4, 10, 10, 0.58) !important; | ||
233 | border: 1px solid rgba(23, 34, 38, 0.57); | ||
234 | color: #fff; | ||
235 | } | ||
236 | |||
237 | >>>.el-input__suffix { | ||
238 | color: #fff; | ||
239 | font-size: 17px; | ||
240 | } | ||
241 | |||
242 | >>>.el-input-number__increase, | ||
243 | >>>.el-input-number__decrease { | ||
244 | background: rgba(4, 10, 10, 0.58); | ||
245 | } | ||
246 | |||
247 | >>>.el-input-number.is-controls-right .el-input-number__decrease, | ||
248 | >>>.el-input-number__increase { | ||
249 | border-left: 1px solid rgba(4, 10, 10, 0.58); | ||
250 | } | ||
251 | |||
252 | >>>.el-icon-arrow-up:before, | ||
253 | >>>.el-icon-arrow-down:before { | ||
254 | color: #fff; | ||
255 | } | ||
256 | |||
257 | >>>.el-input-number.is-controls-right .el-input-number__increase { | ||
258 | border-bottom: 1px solid rgba(4, 10, 10, 0.58); | ||
259 | } | ||
260 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/components/yyAnslysis.vue
0 → 100644
1 | <template> | ||
2 | <div class="container"> | ||
3 | <div class="wrapper"> | ||
4 | <div class="box"> | ||
5 | </div> | ||
6 | </div> | ||
7 | <div class="mian"> | ||
8 | <div class="title"> | ||
9 | <span>阴影分析</span> | ||
10 | <span @click="closePop" class="close">×</span> | ||
11 | </div> | ||
12 | <div class="func-btn"> | ||
13 | <div class="btn-wrapper add-bg" @click="startAnalysis"> | ||
14 | <img style="width: 20px; height: 20px; margin: 0 5px 0 44px" src="../assets/icon_开始分析.png" alt=""> | ||
15 | <span>开始分析</span> | ||
16 | </div> | ||
17 | <div class="btn-wrapper" @click="stopAnalysis" style="margin-left: 30px;"> | ||
18 | <img style="width: 20px; height: 20px;margin: 0 5px 0 26px" src="../assets/icon_清除分析结果.png" alt=""> | ||
19 | <span>清除分析结果</span> | ||
20 | </div> | ||
21 | </div> | ||
22 | |||
23 | </div> | ||
24 | </div> | ||
25 | </template> | ||
26 | |||
27 | <script> | ||
28 | export default { | ||
29 | name: 'yyAnslysis', | ||
30 | components: {}, | ||
31 | data() { | ||
32 | return { | ||
33 | |||
34 | } | ||
35 | }, | ||
36 | mounted() {}, | ||
37 | methods: { | ||
38 | closePop() { | ||
39 | this.$emit('closePop', 'yyAnslysis') | ||
40 | }, | ||
41 | startAnalysis() { | ||
42 | |||
43 | }, | ||
44 | stopAnalysis() { | ||
45 | |||
46 | }, | ||
47 | } | ||
48 | } | ||
49 | </script> | ||
50 | |||
51 | <style scoped> | ||
52 | .container { | ||
53 | position: relative; | ||
54 | color: #fff; | ||
55 | font-size: 16px; | ||
56 | width: 450px; | ||
57 | } | ||
58 | |||
59 | .wrapper { | ||
60 | position: absolute; | ||
61 | width: 100%; | ||
62 | height: 100%; | ||
63 | z-index: 1; | ||
64 | border: 1px solid rgba(151, 151, 151, 0.58); | ||
65 | } | ||
66 | |||
67 | .box { | ||
68 | background: rgba(4, 10, 10, 0.58); | ||
69 | box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.5); | ||
70 | /* filter: blur(10px); */ | ||
71 | height: 100px; | ||
72 | position: absolute; | ||
73 | width: 100%; | ||
74 | height: 100%; | ||
75 | z-index: 1; | ||
76 | } | ||
77 | |||
78 | .mian { | ||
79 | position: relative; | ||
80 | width: 100%; | ||
81 | height: 100%; | ||
82 | z-index: 1000; | ||
83 | } | ||
84 | |||
85 | .list-box span:nth-of-type(1) { | ||
86 | display: inline-block; | ||
87 | width: 98px; | ||
88 | margin-right: 20px; | ||
89 | color: rgba(255, 255, 255, .7); | ||
90 | } | ||
91 | |||
92 | .list-box span:nth-of-type(2) { | ||
93 | margin-top: 14px; | ||
94 | display: inline-block; | ||
95 | } | ||
96 | |||
97 | |||
98 | .title { | ||
99 | display: flex; | ||
100 | justify-content: space-between; | ||
101 | border-bottom: 1px solid rgba(255, 255, 255, 0.15); | ||
102 | padding: 18px 24px; | ||
103 | font-size: 20px; | ||
104 | } | ||
105 | |||
106 | |||
107 | .func-input { | ||
108 | display: flex; | ||
109 | align-items: center; | ||
110 | /* justify-content: space-between; */ | ||
111 | padding: 18px 24px 0px 24px; | ||
112 | font-size: 18px; | ||
113 | cursor: pointer; | ||
114 | } | ||
115 | |||
116 | .func { | ||
117 | padding: 18px 24px; | ||
118 | } | ||
119 | |||
120 | |||
121 | |||
122 | .func-btn { | ||
123 | display: flex; | ||
124 | padding: 18px 24px 44px 24px; | ||
125 | align-items: center; | ||
126 | font-size: 18px; | ||
127 | cursor: pointer; | ||
128 | } | ||
129 | |||
130 | .btn-wrapper { | ||
131 | display: flex; | ||
132 | align-items: center; | ||
133 | width: 190px; | ||
134 | height: 36px; | ||
135 | background-image: url('../assets/弹窗按钮背景-默认.png'); | ||
136 | background-size: 100% 100%; | ||
137 | background-repeat: no-repeat; | ||
138 | line-height: 36px; | ||
139 | } | ||
140 | |||
141 | .add-bg { | ||
142 | background-image: url('../assets/弹窗按钮背景-选中.png'); | ||
143 | } | ||
144 | |||
145 | |||
146 | .btn-wrapper2 { | ||
147 | display: flex; | ||
148 | align-items: center; | ||
149 | width: 116px; | ||
150 | height: 38px; | ||
151 | background-image: url('../assets/一张图/bg_专题分析.png'); | ||
152 | background-size: 100% 100%; | ||
153 | background-repeat: no-repeat; | ||
154 | text-align: center; | ||
155 | line-height: 38px; | ||
156 | margin-left: 13px; | ||
157 | } | ||
158 | |||
159 | .add-bg2 { | ||
160 | background-image: url('../assets/一张图/bg_资源目录.png'); | ||
161 | } | ||
162 | |||
163 | .close { | ||
164 | cursor: pointer; | ||
165 | } | ||
166 | |||
167 | .center { | ||
168 | display: inline-block; | ||
169 | width: 100%; | ||
170 | height: 100%; | ||
171 | text-align: center; | ||
172 | } | ||
173 | |||
174 | .text-right { | ||
175 | display: inline-block; | ||
176 | width: 90px; | ||
177 | text-align: right; | ||
178 | font-size: 18px; | ||
179 | } | ||
180 | |||
181 | >>>input::-webkit-input-placeholder { | ||
182 | font-size: 16px; | ||
183 | color: rgba(255, 255, 255, 0.78) !important; | ||
184 | } | ||
185 | |||
186 | >>>.el-input__inner { | ||
187 | background: rgba(4, 10, 10, 0.58) !important; | ||
188 | border: 1px solid rgba(23, 34, 38, 0.57); | ||
189 | color: #fff; | ||
190 | } | ||
191 | |||
192 | >>>.el-input__suffix { | ||
193 | color: #fff; | ||
194 | font-size: 17px; | ||
195 | } | ||
196 | |||
197 | >>>.el-input-number__increase, | ||
198 | >>>.el-input-number__decrease { | ||
199 | background: rgba(4, 10, 10, 0.58); | ||
200 | } | ||
201 | |||
202 | >>>.el-input-number.is-controls-right .el-input-number__decrease, | ||
203 | >>>.el-input-number__increase { | ||
204 | border-left: 1px solid rgba(4, 10, 10, 0.58); | ||
205 | } | ||
206 | |||
207 | >>>.el-icon-arrow-up:before, | ||
208 | >>>.el-icon-arrow-down:before { | ||
209 | color: #fff; | ||
210 | } | ||
211 | |||
212 | >>>.el-input-number.is-controls-right .el-input-number__increase { | ||
213 | border-bottom: 1px solid rgba(4, 10, 10, 0.58); | ||
214 | } | ||
215 | </style> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
src/store/storeModules/01.js
0 → 100644
1 | 西双版纳6日5晚游玩 | ||
2 | |||
3 | 西安-西双版纳-西安 住星光夜市附近 | ||
4 | |||
5 | D1 去酒店放行李 女士休息,男士去取车 [剧场]傣秀 [恰饭] 星光夜市 | ||
6 | |||
7 | D2 [游玩] 中科院西双版纳热带植物园 晚上返回酒店 休整后市区转转 恰饭 | ||
8 | |||
9 | D3 [游玩] 野象谷,基诺山寨 晚上返回酒店 恰饭 | ||
10 | |||
11 | D5 [游玩] 西双版纳热带雨林国家公园望天树景区。 | ||
12 | |||
13 | D5 [游玩] 傣族园、 告庄西双景。 | ||
14 | |||
15 | D6 想去哪里就去哪里 | ||
16 | |||
17 | D7 还车,准备回家 | ||
18 | |||
19 | 主要费用 | ||
20 | 机票 西安 - 西双版纳 往返直飞 往返单人3200左右 3200 * 2 6400 | ||
21 | 住宿 两间 10.1~10.7 400 * 6 2400 * 1 4800 | ||
22 | 租车费用 400 每天 7 天 预计2800 (看app中每天送100油卡) | ||
23 | |||
24 | 大约 两人: 6400 + 4800 + 1400 12600(两人) | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
This diff is collapsed.
Click to expand it.
-
Please register or sign in to post a comment