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
<template>
<div>
<div class="mt20"/>
<!-- <div class="mt20"/>-->
<!-- <div class="box">-->
<!-- <el-card>-->
<!-- <el-row>-->
<!-- <el-col>-->
<!-- <div class="infoPart pd20">-->
<!-- <h3 class="leftboderTT">{{ language == 0 ? '操作手册' : 'The Manual' }}</h3>-->
<!-- <br>-->
<!-- <div style="padding-left: 30px">-->
<!-- <el-link v-for="v in fileList" :href="fillImgUrl(v.url)" :underline="false" class="link" target="_blank"-->
<!-- type="primary">-->
<!-- <span style="border-bottom: 1px solid var(&#45;&#45;el-color-primary)">-->
<!-- {{ v.name }}-->
<!-- <el-icon style="margin-left: 10px;position: relative;bottom: -2px">-->
<!-- <Download/>-->
<!-- </el-icon>-->
<!-- </span>-->
<!-- </el-link>-->
<!-- </div>-->
<!-- <div class="contentBox">-->
<!-- <div v-html="content"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </el-card>-->
<!-- </div>-->
<!-- -->
<!-- <div style="height: 50px"></div>-->
<div class="box">
<el-card>
<el-row>
<el-col>
<div class="infoPart pd20">
<h3 class="leftboderTT">{{ language == 0 ? '操作手册' : 'The Manual' }}</h3>
<br>
<div class=" mt30" />
<div class="flexBody">
<el-tabs v-model="activeIndex" class="forPc" tab-position="left" @tab-change="changeTab">
<el-tab-pane v-for="(tab,index) in (language===0?list:list_en)" :label="tab.name" :name="index">
<template #label>
<span class="custom-tabs-label">
<span class="tabFont">{{ tab.name }}</span>
</span>
</template>
</el-tab-pane>
</el-tabs>
<div v-loading="loading" class="infoPart">
<h3 class="leftboderTT">{{ nowTab.name }}</h3>
<div class="content">
<div style="padding-left: 30px">
<el-link v-for="v in fileList" :href="fillImgUrl(v.url)" :underline="false" class="link" target="_blank"
type="primary">
......@@ -20,16 +57,35 @@
</el-link>
</div>
<div class="contentBox">
<div v-html="content"></div>
<div v-if="content" v-html="content" />
<div v-else>
<el-empty />
</div>
</div>
</el-col>
</el-row>
</el-card>
</div>
<div style="height: 50px"></div>
<!-- <div v-if="activeName===8" class="content flex">-->
<!-- <label>{{ language === 0 ? '点击下载' : 'DownLoad' }}：</label>-->
<!-- <div v-if="fileList.length>0">-->
<!-- <div v-for="f in fileList" :key="f">-->
<!-- <a v-if="route.query.cptId" :href="fillImgUrl(f.url) " class="text-primary" target="_blank">-->
<!-- <el-icon style="position: relative;top: 2px">-->
<!-- <download />-->
<!-- </el-icon>-->
<!-- {{ f.name }}-->
<!-- </a>-->
<!-- <a v-else :href="fillImgUrl(f.fileUrl) " class="text-primary" target="_blank">-->
<!-- <el-icon style="position: relative;top: 2px">-->
<!-- <download />-->
<!-- </el-icon>-->
<!-- {{ f.name }}-->
<!-- </a>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div v-else>{{ language == 0 ? '暂无' : 'No Data' }}</div>-->
<!-- </div>-->
</div>
</div>
</div>
</div>
</template>
......@@ -46,16 +102,71 @@ const language = useStorage('language', 0)
const activeIndex = ref(0)
const content = ref('')
const fileList = ref([])
const list = ref([{
name:'注册登录',
code:'30000010',
},{
name:'签证申请',
code:'30000011',
},{
name:'酒店预定',
code:'30000012',
},{
name:'接送服务',
code:'30000013',
}])
const list_en = ref([{
name:'Registration',
},{
name:'Visa Service',
},{
name:'Hotel Reservation',
},{
name:'Transportation Service',
}])
const loading = ref(false)
const nowTab = ref({})
onMounted(() => {
if (route.query.activeIndex) {
activeIndex.value = route.query.activeIndex
}
getMenuList()
changeTab(0)
})
const getMenuList = () => {
getppInfo('10000005').then(res => {
const changeTab = (n) => {
n = Number(n)
if (language.value === 0) {
nowTab.value = list.value[n]
} else {
nowTab.value = list_en.value[n]
}
activeIndex.value = n
// if (n == 8) {
// if (route.query.cptId) {
// getMatch()
// } else {
// var obj = { sortId: 30000009, language: 1 }
// if (language.value == 1) {
// obj.language = 2
// }
// getZNList(obj).then(res => {
// fileList.value = res.rows
// for (const f of fileList.value) {
// f.fileUrl = JSON.parse(f.picUrl)[0].url
// }
// console.log(fileList.value)
// })
// }
// } else {
//
// }
loading.value = true
getppInfo(list.value[n].code).then(res => {
loading.value = false
if (res.data) {
if (language.value == 0) {
content.value = res.data.contextZh
fileList.value = JSON.parse(res.data.fileZh)
......@@ -63,81 +174,160 @@ const getMenuList = () => {
content.value = res.data.contextEn
fileList.value = JSON.parse(res.data.fileEn)
}
} else {
content.value = ''
fileList.value = []
}
})
}
</script>
<style lang="scss" scoped>
.link {
font-size: 16px;
display: block;
margin-bottom: 10px;
}
<!--<style lang="scss" scoped>-->
<!--.link {-->
<!-- font-size: 16px;-->
<!-- display: block;-->
<!-- margin-bottom: 10px;-->
<!--}-->
:deep(.contentBox ) {
max-width: 1000px;
<!--:deep(.contentBox ) {-->
<!-- max-width: 1000px;-->
<!-- -->
<!-- img {-->
<!-- width: 100% !important;-->
<!-- max-width: 100% !important;-->
<!-- height: auto !important;-->
<!-- }-->
<!--}-->
img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
}
.leftNav {
ul {
border-right: 2px solid #E5E5E5;
padding: 0 20px 0 0;
}
<!--.leftNav {-->
<!-- ul {-->
<!-- border-right: 2px solid #E5E5E5;-->
<!-- padding: 0 20px 0 0;-->
<!-- }-->
<!-- -->
<!-- li {-->
<!-- margin: 30px 0;-->
<!-- padding: 10px;-->
<!-- text-align: right;-->
<!-- border-radius: 2px;-->
<!-- position: relative;-->
<!-- font-weight: 600;-->
<!-- text-transform: uppercase;-->
<!-- font-size: 18px;-->
<!-- cursor: pointer;-->
<!-- background: linear-gradient(90deg, rgba(134, 35, 252, 0.1), rgba(69, 61, 234, 0.1));-->
<!-- }-->
<!-- -->
<!-- li::after {-->
<!-- content: '';-->
<!-- position: absolute;-->
<!-- background: #898989;-->
<!-- width: 8px;-->
<!-- height: 8px;-->
<!-- border-radius: 50%;-->
<!-- right: -29px;-->
<!-- border: 4px solid #fff;-->
<!-- outline: 2px solid #898989;-->
<!-- box-sizing: content-box;-->
<!-- top: 0;-->
<!-- bottom: 0;-->
<!-- margin: auto;-->
<!-- }-->
<!-- -->
<!-- li.active {-->
<!-- color: #fff;-->
<!-- background: #000;-->
<!-- -->
<!-- &::after {-->
<!-- outline: 2px solid #000;-->
<!-- background: #000;-->
<!-- }-->
<!-- }-->
<!--}-->
li {
margin: 30px 0;
padding: 10px;
text-align: right;
border-radius: 2px;
position: relative;
font-weight: 600;
text-transform: uppercase;
font-size: 18px;
cursor: pointer;
background: linear-gradient(90deg, rgba(134, 35, 252, 0.1), rgba(69, 61, 234, 0.1));
}
<!--.infoPart {-->
<!-- .leftboderTT {-->
<!-- font-size: 20px;-->
<!-- color: var(&#45;&#45;el-color-primary);-->
<!-- }-->
<!--}-->
li::after {
content: '';
position: absolute;
background: #898989;
width: 8px;
height: 8px;
border-radius: 50%;
right: -29px;
border: 4px solid #fff;
outline: 2px solid #898989;
box-sizing: content-box;
top: 0;
bottom: 0;
margin: auto;
}
<!--.content {-->
<!-- margin: 20px 0 0;-->
<!-- text-indent: 2em;-->
<!-- line-height: 1.8;-->
<!-- font-weight: 400;-->
<!-- font-size: 16px;-->
<!-- color: #29343C;-->
<!-- -->
<!-- img {-->
<!-- max-width: 100%;-->
<!-- margin: 20px auto;-->
<!-- display: block;-->
<!-- }-->
<!-- -->
<!-- h4 {-->
<!-- text-indent: 0-->
<!-- }-->
<!--}-->
li.active {
color: #fff;
background: #000;
&::after {
outline: 2px solid #000;
background: #000;
}
}
}
.infoPart {
.leftboderTT {
font-size: 20px;
color: var(--el-color-primary);
}
}
<!--.mapBox {-->
<!-- background: url("@/assets/zhinan/map.png") no-repeat right;-->
<!-- height: 375px;-->
<!-- background-size: cover;-->
<!-- padding: 1px;-->
<!-- position: relative;-->
<!-- display: flex;-->
<!-- -->
<!-- .content {-->
<!-- background: #fff;-->
<!-- width: 60%;-->
<!-- left: 40px;-->
<!-- padding: 30px;-->
<!-- text-indent: 0;-->
<!-- line-height: 1;-->
<!-- position: absolute;-->
<!-- height: 90%;-->
<!-- top: 0;-->
<!-- bottom: 0;-->
<!-- margin: auto;-->
<!-- }-->
<!-- -->
<!-- -->
<!-- div {-->
<!-- padding-left: 60px;-->
<!-- }-->
<!-- -->
<!-- .phone {-->
<!-- background: url("@/assets/dance/map01.png") no-repeat left;-->
<!-- background-size: 30px;-->
<!-- }-->
<!-- -->
<!-- .address {-->
<!-- background: url("@/assets/dance/map02.png") no-repeat left;-->
<!-- background-size: 30px;-->
<!-- margin: 50px 0;-->
<!-- }-->
<!-- -->
<!-- .email {-->
<!-- background: url("@/assets/dance/map03.png") no-repeat left;-->
<!-- background-size: 30px;-->
<!-- }-->
<!-- -->
<!-- h4 {-->
<!-- margin: 0;-->
<!-- font-size: 16px;-->
<!-- color: #AAAAAA;-->
<!-- }-->
<!-- -->
<!-- p {-->
<!-- margin: 13px 0 0;-->
<!-- }-->
<!--}-->
<!--</style>-->
<style lang="scss" scoped>
.content {
margin: 20px 0 0;
text-indent: 2em;
......@@ -157,58 +347,146 @@ const getMenuList = () => {
}
}
.mapBox {
background: url("@/assets/zhinan/map.png") no-repeat right;
height: 375px;
background-size: cover;
padding: 1px;
position: relative;
h4.leftboderTT {
text-indent: 0;
font-size: 20px;
color: var(--el-color-primary);
span {
color: #929AA0;
font-size: 16px;
margin-left: 5px;
}
}
.custom-tabs-label {
display: flex;
font-size: 16px;
align-items: center;
}
:deep(.el-tabs--left .el-tabs__item.is-left) {
margin: 0 0 20px;
}
:deep(.el-tabs--left .el-tabs__active-bar.is-left) {
left: 0 !important;
right: auto !important;
}
.content {
:deep(.el-tabs--left .el-tabs__nav-wrap.is-left::after) {
display: none;
}
:deep(.el-tabs__nav) {
float: none;
}
:deep(.el-tabs__item.is-active) {
font-size: 15px;
background: #fff;
width: 60%;
left: 40px;
padding: 30px;
text-indent: 0;
line-height: 1;
position: absolute;
height: 90%;
top: 0;
bottom: 0;
margin: auto;
}
}
:deep(.el-tabs--left .el-tabs__header.is-left) {
padding: 30px 0 30px 30px;
background: #F4F9FE;
min-width: 280px;
}
div {
padding-left: 60px;
}
.tabFont {
margin-left: 20px;
}
.phone {
background: url("@/assets/dance/map01.png") no-repeat left;
background-size: 30px;
}
.flexBody {
display: flex;
background: #fff;
margin-bottom: 20px;
}
.infoPart {
padding: 20px;
flex: 1;
.address {
background: url("@/assets/dance/map02.png") no-repeat left;
background-size: 30px;
margin: 50px 0;
& > h3 {
font-size: 24px;
color: var(--el-color-primary);
}
}
.forWei {
display: none;
}
.email {
background: url("@/assets/dance/map03.png") no-repeat left;
background-size: 30px;
@media (max-width: 500px) {
.box {
width: 100%
}
.forWei {
display: block;
}
.forPc {
display: none
}
:deep(.el-tabs__nav-scroll) {
overflow: auto;
}
.flexBody {
display: block;
background: transparent;
}
.infoPart {
background: #fff;
padding: 10px;
margin: 0 15px
}
.newsLine {
.item {
height: 50px;
h4 {
.date {
height: 34px;
width: 44px;
margin: 0;
.day {
font-size: 16px;
color: #AAAAAA;
}
p {
margin: 13px 0 0;
font-size: 12px;
}
}
h3 {
font-size: 14px;
}
}
.go {
display: none;
}
.item-body {
width: 80%;
}
}
}
.wTabtop {
:deep(.el-tabs__header) {
background: #fff;
padding: 10px 15px 0;
}
:deep(.el-tabs__content) {
padding: 0 10px;
}
}
@media (max-width: 768px) {
.infoPart .leftboderTT {
font-size: 16px;
}
}
</style>
......
src/viewsPc/center/info/reservationInfo.vue
......@@ -2,7 +2,7 @@
<div class="pd20">
<div style="margin-bottom: 20px">
<el-button type="primary" @click="downloadAll">{{ language == 0 ? '合并生成缴费单' : 'Download Consolidated Invoice' }}</el-button>
<el-button type="primary" @click="showDialog">合并上传缴费单</el-button>
<!-- <el-button type="primary" @click="showDialog">合并上传缴费单</el-button>-->
</div>
<div v-for="b in list" class="item">
<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!