Skip to content

杨炀 / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
3abc6e9b by zrj
Options

8.19 sjs

1 parent 839dafe3
Inline Side-by-side
Showing 2 changed files with 396 additions and 118 deletions
src/viewsPc/about/operation.vue
1 <template> 1 <template>
2 <div> 2 <div>
3 <div class="mt20"/> 3 <!-- <div class="mt20"/>-->
4 <!-- <div class="box">-->
5 <!-- <el-card>-->
6 <!-- <el-row>-->
7 <!-- <el-col>-->
8 <!-- <div class="infoPart pd20">-->
9 <!-- <h3 class="leftboderTT">{{ language == 0 ? '操作手册' : 'The Manual' }}</h3>-->
10 <!-- <br>-->
11 <!-- <div style="padding-left: 30px">-->
12 <!-- <el-link v-for="v in fileList" :href="fillImgUrl(v.url)" :underline="false" class="link" target="_blank"-->
13 <!-- type="primary">-->
14 <!-- <span style="border-bottom: 1px solid var(&#45;&#45;el-color-primary)">-->
15 <!-- {{ v.name }}-->
16 <!-- <el-icon style="margin-left: 10px;position: relative;bottom: -2px">-->
17 <!-- <Download/>-->
18 <!-- </el-icon>-->
19 <!-- </span>-->
20
21 <!-- </el-link>-->
22 <!-- </div>-->
23 <!-- <div class="contentBox">-->
24 <!-- <div v-html="content"></div>-->
25 <!-- </div>-->
26 <!-- </div>-->
27 <!-- </el-col>-->
28 <!-- </el-row>-->
29 <!-- </el-card>-->
30 <!-- </div>-->
31 <!-- -->
32 <!-- <div style="height: 50px"></div>-->
4 <div class="box"> 33 <div class="box">
5 <el-card> 34 <div class=" mt30" />
6 <el-row> 35 <div class="flexBody">
7 <el-col> 36 <el-tabs v-model="activeIndex" class="forPc" tab-position="left" @tab-change="changeTab">
8 <div class="infoPart pd20"> 37 <el-tab-pane v-for="(tab,index) in (language===0?list:list_en)" :label="tab.name" :name="index">
9 <h3 class="leftboderTT">{{ language == 0 ? '操作手册' : 'The Manual' }}</h3> 38 <template #label>
10 <br> 39 <span class="custom-tabs-label">
40 <span class="tabFont">{{ tab.name }}</span>
41 </span>
42 </template>
43 </el-tab-pane>
44 </el-tabs>
45 <div v-loading="loading" class="infoPart">
46 <h3 class="leftboderTT">{{ nowTab.name }}</h3>
47 <div class="content">
11 <div style="padding-left: 30px"> 48 <div style="padding-left: 30px">
12 <el-link v-for="v in fileList" :href="fillImgUrl(v.url)" :underline="false" class="link" target="_blank" 49 <el-link v-for="v in fileList" :href="fillImgUrl(v.url)" :underline="false" class="link" target="_blank"
13 type="primary"> 50 type="primary">
...@@ -20,16 +57,35 @@ ...@@ -20,16 +57,35 @@
20 57
21 </el-link> 58 </el-link>
22 </div> 59 </div>
23 <div class="contentBox"> 60 <div v-if="content" v-html="content" />
24 <div v-html="content"></div> 61 <div v-else>
62 <el-empty />
25 </div> 63 </div>
26 </div> 64 </div>
27 </el-col>
28 </el-row>
29 </el-card>
30 </div>
31 65
32 <div style="height: 50px"></div> 66 <!-- <div v-if="activeName===8" class="content flex">-->
67 <!-- <label>{{ language === 0 ? '点击下载' : 'DownLoad' }}：</label>-->
68 <!-- <div v-if="fileList.length>0">-->
69 <!-- <div v-for="f in fileList" :key="f">-->
70 <!-- <a v-if="route.query.cptId" :href="fillImgUrl(f.url) " class="text-primary" target="_blank">-->
71 <!-- <el-icon style="position: relative;top: 2px">-->
72 <!-- <download />-->
73 <!-- </el-icon>-->
74 <!-- {{ f.name }}-->
75 <!-- </a>-->
76 <!-- <a v-else :href="fillImgUrl(f.fileUrl) " class="text-primary" target="_blank">-->
77 <!-- <el-icon style="position: relative;top: 2px">-->
78 <!-- <download />-->
79 <!-- </el-icon>-->
80 <!-- {{ f.name }}-->
81 <!-- </a>-->
82 <!-- </div>-->
83 <!-- </div>-->
84 <!-- <div v-else>{{ language == 0 ? '暂无' : 'No Data' }}</div>-->
85 <!-- </div>-->
86 </div>
87 </div>
88 </div>
33 </div> 89 </div>
34 </template> 90 </template>
35 91
...@@ -46,16 +102,71 @@ const language = useStorage('language', 0) ...@@ -46,16 +102,71 @@ const language = useStorage('language', 0)
46 const activeIndex = ref(0) 102 const activeIndex = ref(0)
47 const content = ref('') 103 const content = ref('')
48 const fileList = ref([]) 104 const fileList = ref([])
105 const list = ref([{
106 name:'注册登录',
107 code:'30000010',
108 },{
109 name:'签证申请',
110 code:'30000011',
111 },{
112 name:'酒店预定',
113 code:'30000012',
114 },{
115 name:'接送服务',
116 code:'30000013',
117 }])
118 const list_en = ref([{
119 name:'Registration',
120 },{
121 name:'Visa Service',
122 },{
123 name:'Hotel Reservation',
124 },{
125 name:'Transportation Service',
126 }])
127 const loading = ref(false)
128 const nowTab = ref({})
49 129
50 onMounted(() => { 130 onMounted(() => {
51 if (route.query.activeIndex) { 131 if (route.query.activeIndex) {
52 activeIndex.value = route.query.activeIndex 132 activeIndex.value = route.query.activeIndex
53 } 133 }
54 getMenuList() 134 changeTab(0)
55 }) 135 })
56 const getMenuList = () => {
57 136
58 getppInfo('10000005').then(res => { 137 const changeTab = (n) => {
138 n = Number(n)
139 if (language.value === 0) {
140 nowTab.value = list.value[n]
141 } else {
142 nowTab.value = list_en.value[n]
143 }
144 activeIndex.value = n
145
146 // if (n == 8) {
147 // if (route.query.cptId) {
148 // getMatch()
149 // } else {
150 // var obj = { sortId: 30000009, language: 1 }
151 // if (language.value == 1) {
152 // obj.language = 2
153 // }
154 // getZNList(obj).then(res => {
155 // fileList.value = res.rows
156 // for (const f of fileList.value) {
157 // f.fileUrl = JSON.parse(f.picUrl)[0].url
158 // }
159 // console.log(fileList.value)
160 // })
161 // }
162 // } else {
163 //
164 // }
165
166 loading.value = true
167 getppInfo(list.value[n].code).then(res => {
168 loading.value = false
169 if (res.data) {
59 if (language.value == 0) { 170 if (language.value == 0) {
60 content.value = res.data.contextZh 171 content.value = res.data.contextZh
61 fileList.value = JSON.parse(res.data.fileZh) 172 fileList.value = JSON.parse(res.data.fileZh)
...@@ -63,81 +174,160 @@ const getMenuList = () => { ...@@ -63,81 +174,160 @@ const getMenuList = () => {
63 content.value = res.data.contextEn 174 content.value = res.data.contextEn
64 fileList.value = JSON.parse(res.data.fileEn) 175 fileList.value = JSON.parse(res.data.fileEn)
65 } 176 }
177 } else {
178 content.value = ''
179 fileList.value = []
180 }
181
66 }) 182 })
67 } 183 }
68
69 </script> 184 </script>
70 185
71 <style lang="scss" scoped> 186 <!--<style lang="scss" scoped>-->
72 .link { 187 <!--.link {-->
73 font-size: 16px; 188 <!-- font-size: 16px;-->
74 display: block; 189 <!-- display: block;-->
75 margin-bottom: 10px; 190 <!-- margin-bottom: 10px;-->
76 } 191 <!--}-->
77 192
78 :deep(.contentBox ) { 193 <!--:deep(.contentBox ) {-->
79 max-width: 1000px; 194 <!-- max-width: 1000px;-->
195 <!-- -->
196 <!-- img {-->
197 <!-- width: 100% !important;-->
198 <!-- max-width: 100% !important;-->
199 <!-- height: auto !important;-->
200 <!-- }-->
201 <!--}-->
80 202
81 img { 203 <!--.leftNav {-->
82 width: 100% !important; 204 <!-- ul {-->
83 max-width: 100% !important; 205 <!-- border-right: 2px solid #E5E5E5;-->
84 height: auto !important; 206 <!-- padding: 0 20px 0 0;-->
85 } 207 <!-- }-->
86 } 208 <!-- -->
87 209 <!-- li {-->
88 .leftNav { 210 <!-- margin: 30px 0;-->
89 ul { 211 <!-- padding: 10px;-->
90 border-right: 2px solid #E5E5E5; 212 <!-- text-align: right;-->
91 padding: 0 20px 0 0; 213 <!-- border-radius: 2px;-->
92 } 214 <!-- position: relative;-->
215 <!-- font-weight: 600;-->
216 <!-- text-transform: uppercase;-->
217 <!-- font-size: 18px;-->
218 <!-- cursor: pointer;-->
219 <!-- background: linear-gradient(90deg, rgba(134, 35, 252, 0.1), rgba(69, 61, 234, 0.1));-->
220 <!-- }-->
221 <!-- -->
222 <!-- li::after {-->
223 <!-- content: '';-->
224 <!-- position: absolute;-->
225 <!-- background: #898989;-->
226 <!-- width: 8px;-->
227 <!-- height: 8px;-->
228 <!-- border-radius: 50%;-->
229 <!-- right: -29px;-->
230 <!-- border: 4px solid #fff;-->
231 <!-- outline: 2px solid #898989;-->
232 <!-- box-sizing: content-box;-->
233 <!-- top: 0;-->
234 <!-- bottom: 0;-->
235 <!-- margin: auto;-->
236 <!-- }-->
237 <!-- -->
238 <!-- li.active {-->
239 <!-- color: #fff;-->
240 <!-- background: #000;-->
241 <!-- -->
242 <!-- &::after {-->
243 <!-- outline: 2px solid #000;-->
244 <!-- background: #000;-->
245 <!-- }-->
246 <!-- }-->
247 <!--}-->
93 248
94 li { 249 <!--.infoPart {-->
95 margin: 30px 0; 250 <!-- .leftboderTT {-->
96 padding: 10px; 251 <!-- font-size: 20px;-->
97 text-align: right; 252 <!-- color: var(&#45;&#45;el-color-primary);-->
98 border-radius: 2px; 253 <!-- }-->
99 position: relative; 254 <!--}-->
100 font-weight: 600;
101 text-transform: uppercase;
102 font-size: 18px;
103 cursor: pointer;
104 background: linear-gradient(90deg, rgba(134, 35, 252, 0.1), rgba(69, 61, 234, 0.1));
105 }
106 255
107 li::after { 256 <!--.content {-->
108 content: ''; 257 <!-- margin: 20px 0 0;-->
109 position: absolute; 258 <!-- text-indent: 2em;-->
110 background: #898989; 259 <!-- line-height: 1.8;-->
111 width: 8px; 260 <!-- font-weight: 400;-->
112 height: 8px; 261 <!-- font-size: 16px;-->
113 border-radius: 50%; 262 <!-- color: #29343C;-->
114 right: -29px; 263 <!-- -->
115 border: 4px solid #fff; 264 <!-- img {-->
116 outline: 2px solid #898989; 265 <!-- max-width: 100%;-->
117 box-sizing: content-box; 266 <!-- margin: 20px auto;-->
118 top: 0; 267 <!-- display: block;-->
119 bottom: 0; 268 <!-- }-->
120 margin: auto; 269 <!-- -->
121 } 270 <!-- h4 {-->
271 <!-- text-indent: 0-->
272 <!-- }-->
273 <!--}-->
122 274
123 li.active { 275 <!--.mapBox {-->
124 color: #fff; 276 <!-- background: url("@/assets/zhinan/map.png") no-repeat right;-->
125 background: #000; 277 <!-- height: 375px;-->
126 278 <!-- background-size: cover;-->
127 &::after { 279 <!-- padding: 1px;-->
128 outline: 2px solid #000; 280 <!-- position: relative;-->
129 background: #000; 281 <!-- display: flex;-->
130 } 282 <!-- -->
131 } 283 <!-- .content {-->
132 } 284 <!-- background: #fff;-->
133 285 <!-- width: 60%;-->
134 .infoPart { 286 <!-- left: 40px;-->
135 .leftboderTT { 287 <!-- padding: 30px;-->
136 font-size: 20px; 288 <!-- text-indent: 0;-->
137 color: var(--el-color-primary); 289 <!-- line-height: 1;-->
138 } 290 <!-- position: absolute;-->
139 } 291 <!-- height: 90%;-->
292 <!-- top: 0;-->
293 <!-- bottom: 0;-->
294 <!-- margin: auto;-->
295 <!-- }-->
296 <!-- -->
297 <!-- -->
298 <!-- div {-->
299 <!-- padding-left: 60px;-->
300 <!-- }-->
301 <!-- -->
302 <!-- .phone {-->
303 <!-- background: url("@/assets/dance/map01.png") no-repeat left;-->
304 <!-- background-size: 30px;-->
305 <!-- }-->
306 <!-- -->
307 <!-- .address {-->
308 <!-- background: url("@/assets/dance/map02.png") no-repeat left;-->
309 <!-- background-size: 30px;-->
310 <!-- margin: 50px 0;-->
311 <!-- }-->
312 <!-- -->
313 <!-- .email {-->
314 <!-- background: url("@/assets/dance/map03.png") no-repeat left;-->
315 <!-- background-size: 30px;-->
316 <!-- }-->
317 <!-- -->
318 <!-- h4 {-->
319 <!-- margin: 0;-->
320 <!-- font-size: 16px;-->
321 <!-- color: #AAAAAA;-->
322 <!-- }-->
323 <!-- -->
324 <!-- p {-->
325 <!-- margin: 13px 0 0;-->
326 <!-- }-->
140 327
328 <!--}-->
329 <!--</style>-->
330 <style lang="scss" scoped>
141 .content { 331 .content {
142 margin: 20px 0 0; 332 margin: 20px 0 0;
143 text-indent: 2em; 333 text-indent: 2em;
...@@ -157,58 +347,146 @@ const getMenuList = () => { ...@@ -157,58 +347,146 @@ const getMenuList = () => {
157 } 347 }
158 } 348 }
159 349
160 .mapBox { 350 h4.leftboderTT {
161 background: url("@/assets/zhinan/map.png") no-repeat right; 351 text-indent: 0;
162 height: 375px; 352 font-size: 20px;
163 background-size: cover; 353 color: var(--el-color-primary);
164 padding: 1px; 354
165 position: relative; 355 span {
356 color: #929AA0;
357 font-size: 16px;
358 margin-left: 5px;
359 }
360 }
361
362 .custom-tabs-label {
166 display: flex; 363 display: flex;
364 font-size: 16px;
365 align-items: center;
366 }
367
368 :deep(.el-tabs--left .el-tabs__item.is-left) {
369 margin: 0 0 20px;
370 }
371
372 :deep(.el-tabs--left .el-tabs__active-bar.is-left) {
373 left: 0 !important;
374 right: auto !important;
375 }
167 376
168 .content { 377 :deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after) {
378 display: none;
379 }
380
381 :deep(.el-tabs__nav) {
382 float: none;
383 }
384
385 :deep(.el-tabs__item.is-active) {
386 font-size: 15px;
169 background: #fff; 387 background: #fff;
170 width: 60%; 388 }
171 left: 40px;
172 padding: 30px;
173 text-indent: 0;
174 line-height: 1;
175 position: absolute;
176 height: 90%;
177 top: 0;
178 bottom: 0;
179 margin: auto;
180 }
181 389
390 :deep(.el-tabs--left .el-tabs__header.is-left) {
391 padding: 30px 0 30px 30px;
392 background: #F4F9FE;
393 min-width: 280px;
394 }
182 395
183 div { 396 .tabFont {
184 padding-left: 60px; 397 margin-left: 20px;
185 } 398 }
186 399
187 .phone { 400 .flexBody {
188 background: url("@/assets/dance/map01.png") no-repeat left; 401 display: flex;
189 background-size: 30px; 402 background: #fff;
190 } 403 margin-bottom: 20px;
404 }
405
406 .infoPart {
407 padding: 20px;
408 flex: 1;
191 409
192 .address { 410 & > h3 {
193 background: url("@/assets/dance/map02.png") no-repeat left; 411 font-size: 24px;
194 background-size: 30px; 412 color: var(--el-color-primary);
195 margin: 50px 0;
196 } 413 }
414 }
415
416 .forWei {
417 display: none;
418 }
197 419
198 .email { 420 @media (max-width: 500px) {
199 background: url("@/assets/dance/map03.png") no-repeat left; 421 .box {
200 background-size: 30px; 422 width: 100%
423 }
424 .forWei {
425 display: block;
426 }
427 .forPc {
428 display: none
429 }
430 :deep(.el-tabs__nav-scroll) {
431 overflow: auto;
432 }
433 .flexBody {
434 display: block;
435 background: transparent;
436 }
437 .infoPart {
438 background: #fff;
439 padding: 10px;
440 margin: 0 15px
201 } 441 }
442 .newsLine {
443 .item {
444 height: 50px;
202 445
203 h4 { 446 .date {
447 height: 34px;
448 width: 44px;
204 margin: 0; 449 margin: 0;
450
451 .day {
205 font-size: 16px; 452 font-size: 16px;
206 color: #AAAAAA;
207 } 453 }
208 454
209 p { 455 p {
210 margin: 13px 0 0; 456 font-size: 12px;
457 }
211 } 458 }
212 459
460 h3 {
461 font-size: 14px;
462 }
463 }
464
465 .go {
466 display: none;
467 }
468
469 .item-body {
470 width: 80%;
471 }
472 }
473 }
474
475 .wTabtop {
476 :deep(.el-tabs__header) {
477 background: #fff;
478 padding: 10px 15px 0;
479 }
480
481 :deep(.el-tabs__content) {
482 padding: 0 10px;
483 }
484
485 }
486
487 @media (max-width: 768px) {
488 .infoPart .leftboderTT {
489 font-size: 16px;
490 }
213 } 491 }
214 </style> 492 </style>
......
src/viewsPc/center/info/reservationInfo.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class="pd20"> 2 <div class="pd20">
3 <div style="margin-bottom: 20px"> 3 <div style="margin-bottom: 20px">
4 <el-button type="primary" @click="downloadAll">{{ language == 0 ? '合并生成缴费单' : 'Download Consolidated Invoice' }}</el-button> 4 <el-button type="primary" @click="downloadAll">{{ language == 0 ? '合并生成缴费单' : 'Download Consolidated Invoice' }}</el-button>
5 <el-button type="primary" @click="showDialog">合并上传缴费单</el-button> 5 <!-- <el-button type="primary" @click="showDialog">合并上传缴费单</el-button>-->
6 </div> 6 </div>
7 <div v-for="b in list" class="item"> 7 <div v-for="b in list" class="item">
8 <div class="title"> 8 <div class="title">
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!