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 425 additions and 147 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">
11 <div style="padding-left: 30px"> 40 <span class="tabFont">{{ tab.name }}</span>
12 <el-link v-for="v in fileList" :href="fillImgUrl(v.url)" :underline="false" class="link" target="_blank" 41 </span>
13 type="primary"> 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">
48 <div style="padding-left: 30px">
49 <el-link v-for="v in fileList" :href="fillImgUrl(v.url)" :underline="false" class="link" target="_blank"
50 type="primary">
14 <span style="border-bottom: 1px solid var(--el-color-primary)"> 51 <span style="border-bottom: 1px solid var(--el-color-primary)">
15 {{ v.name }} 52 {{ v.name }}
16 <el-icon style="margin-left: 10px;position: relative;bottom: -2px"> 53 <el-icon style="margin-left: 10px;position: relative;bottom: -2px">
...@@ -18,18 +55,37 @@ ...@@ -18,18 +55,37 @@
18 </el-icon> 55 </el-icon>
19 </span> 56 </span>
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>
25 </div> 62 <el-empty />
26 </div> 63 </div>
27 </el-col> 64 </div>
28 </el-row> 65
29 </el-card> 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>
30 </div> 88 </div>
31
32 <div style="height: 50px"></div>
33 </div> 89 </div>
34 </template> 90 </template>
35 91
...@@ -46,98 +102,232 @@ const language = useStorage('language', 0) ...@@ -46,98 +102,232 @@ 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 = () => { 136
57 137 const changeTab = (n) => {
58 getppInfo('10000005').then(res => { 138 n = Number(n)
59 if (language.value == 0) { 139 if (language.value === 0) {
60 content.value = res.data.contextZh 140 nowTab.value = list.value[n]
61 fileList.value = JSON.parse(res.data.fileZh) 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) {
170 if (language.value == 0) {
171 content.value = res.data.contextZh
172 fileList.value = JSON.parse(res.data.fileZh)
173 } else {
174 content.value = res.data.contextEn
175 fileList.value = JSON.parse(res.data.fileEn)
176 }
62 } else { 177 } else {
63 content.value = res.data.contextEn 178 content.value = ''
64 fileList.value = JSON.parse(res.data.fileEn) 179 fileList.value = []
65 } 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;-->
80 195 <!-- -->
81 img { 196 <!-- img {-->
82 width: 100% !important; 197 <!-- width: 100% !important;-->
83 max-width: 100% !important; 198 <!-- max-width: 100% !important;-->
84 height: auto !important; 199 <!-- height: auto !important;-->
85 } 200 <!-- }-->
86 } 201 <!--}-->
87 202
88 .leftNav { 203 <!--.leftNav {-->
89 ul { 204 <!-- ul {-->
90 border-right: 2px solid #E5E5E5; 205 <!-- border-right: 2px solid #E5E5E5;-->
91 padding: 0 20px 0 0; 206 <!-- padding: 0 20px 0 0;-->
92 } 207 <!-- }-->
93 208 <!-- -->
94 li { 209 <!-- li {-->
95 margin: 30px 0; 210 <!-- margin: 30px 0;-->
96 padding: 10px; 211 <!-- padding: 10px;-->
97 text-align: right; 212 <!-- text-align: right;-->
98 border-radius: 2px; 213 <!-- border-radius: 2px;-->
99 position: relative; 214 <!-- position: relative;-->
100 font-weight: 600; 215 <!-- font-weight: 600;-->
101 text-transform: uppercase; 216 <!-- text-transform: uppercase;-->
102 font-size: 18px; 217 <!-- font-size: 18px;-->
103 cursor: pointer; 218 <!-- cursor: pointer;-->
104 background: linear-gradient(90deg, rgba(134, 35, 252, 0.1), rgba(69, 61, 234, 0.1)); 219 <!-- background: linear-gradient(90deg, rgba(134, 35, 252, 0.1), rgba(69, 61, 234, 0.1));-->
105 } 220 <!-- }-->
106 221 <!-- -->
107 li::after { 222 <!-- li::after {-->
108 content: ''; 223 <!-- content: '';-->
109 position: absolute; 224 <!-- position: absolute;-->
110 background: #898989; 225 <!-- background: #898989;-->
111 width: 8px; 226 <!-- width: 8px;-->
112 height: 8px; 227 <!-- height: 8px;-->
113 border-radius: 50%; 228 <!-- border-radius: 50%;-->
114 right: -29px; 229 <!-- right: -29px;-->
115 border: 4px solid #fff; 230 <!-- border: 4px solid #fff;-->
116 outline: 2px solid #898989; 231 <!-- outline: 2px solid #898989;-->
117 box-sizing: content-box; 232 <!-- box-sizing: content-box;-->
118 top: 0; 233 <!-- top: 0;-->
119 bottom: 0; 234 <!-- bottom: 0;-->
120 margin: auto; 235 <!-- margin: auto;-->
121 } 236 <!-- }-->
122 237 <!-- -->
123 li.active { 238 <!-- li.active {-->
124 color: #fff; 239 <!-- color: #fff;-->
125 background: #000; 240 <!-- background: #000;-->
126 241 <!-- -->
127 &::after { 242 <!-- &::after {-->
128 outline: 2px solid #000; 243 <!-- outline: 2px solid #000;-->
129 background: #000; 244 <!-- background: #000;-->
130 } 245 <!-- }-->
131 } 246 <!-- }-->
132 } 247 <!--}-->
133 248
134 .infoPart { 249 <!--.infoPart {-->
135 .leftboderTT { 250 <!-- .leftboderTT {-->
136 font-size: 20px; 251 <!-- font-size: 20px;-->
137 color: var(--el-color-primary); 252 <!-- color: var(&#45;&#45;el-color-primary);-->
138 } 253 <!-- }-->
139 } 254 <!--}-->
255
256 <!--.content {-->
257 <!-- margin: 20px 0 0;-->
258 <!-- text-indent: 2em;-->
259 <!-- line-height: 1.8;-->
260 <!-- font-weight: 400;-->
261 <!-- font-size: 16px;-->
262 <!-- color: #29343C;-->
263 <!-- -->
264 <!-- img {-->
265 <!-- max-width: 100%;-->
266 <!-- margin: 20px auto;-->
267 <!-- display: block;-->
268 <!-- }-->
269 <!-- -->
270 <!-- h4 {-->
271 <!-- text-indent: 0-->
272 <!-- }-->
273 <!--}-->
274
275 <!--.mapBox {-->
276 <!-- background: url("@/assets/zhinan/map.png") no-repeat right;-->
277 <!-- height: 375px;-->
278 <!-- background-size: cover;-->
279 <!-- padding: 1px;-->
280 <!-- position: relative;-->
281 <!-- display: flex;-->
282 <!-- -->
283 <!-- .content {-->
284 <!-- background: #fff;-->
285 <!-- width: 60%;-->
286 <!-- left: 40px;-->
287 <!-- padding: 30px;-->
288 <!-- text-indent: 0;-->
289 <!-- line-height: 1;-->
290 <!-- position: absolute;-->
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;
...@@ -145,70 +335,158 @@ const getMenuList = () => { ...@@ -145,70 +335,158 @@ const getMenuList = () => {
145 font-weight: 400; 335 font-weight: 400;
146 font-size: 16px; 336 font-size: 16px;
147 color: #29343C; 337 color: #29343C;
148 338
149 img { 339 img {
150 max-width: 100%; 340 max-width: 100%;
151 margin: 20px auto; 341 margin: 20px auto;
152 display: block; 342 display: block;
153 } 343 }
154 344
155 h4 { 345 h4 {
156 text-indent: 0 346 text-indent: 0
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;
167 364 font-size: 16px;
168 .content { 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 }
376
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;
387 background: #fff;
388 }
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 }
395
396 .tabFont {
397 margin-left: 20px;
398 }
399
400 .flexBody {
401 display: flex;
402 background: #fff;
403 margin-bottom: 20px;
404 }
405
406 .infoPart {
407 padding: 20px;
408 flex: 1;
409
410 & > h3 {
411 font-size: 24px;
412 color: var(--el-color-primary);
413 }
414 }
415
416 .forWei {
417 display: none;
418 }
419
420 @media (max-width: 500px) {
421 .box {
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 {
169 background: #fff; 438 background: #fff;
170 width: 60%; 439 padding: 10px;
171 left: 40px; 440 margin: 0 15px
172 padding: 30px; 441 }
173 text-indent: 0; 442 .newsLine {
174 line-height: 1; 443 .item {
175 position: absolute; 444 height: 50px;
176 height: 90%; 445
177 top: 0; 446 .date {
178 bottom: 0; 447 height: 34px;
179 margin: auto; 448 width: 44px;
180 } 449 margin: 0;
181 450
182 451 .day {
183 div { 452 font-size: 16px;
184 padding-left: 60px; 453 }
185 } 454
186 455 p {
187 .phone { 456 font-size: 12px;
188 background: url("@/assets/dance/map01.png") no-repeat left; 457 }
189 background-size: 30px; 458 }
190 } 459
191 460 h3 {
192 .address { 461 font-size: 14px;
193 background: url("@/assets/dance/map02.png") no-repeat left; 462 }
194 background-size: 30px; 463 }
195 margin: 50px 0; 464
196 } 465 .go {
197 466 display: none;
198 .email { 467 }
199 background: url("@/assets/dance/map03.png") no-repeat left; 468
200 background-size: 30px; 469 .item-body {
201 } 470 width: 80%;
202 471 }
203 h4 {
204 margin: 0;
205 font-size: 16px;
206 color: #AAAAAA;
207 } 472 }
208 473 }
209 p { 474
210 margin: 13px 0 0; 475 .wTabtop {
476 :deep(.el-tabs__header) {
477 background: #fff;
478 padding: 10px 15px 0;
211 } 479 }
212 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!