huoran
/
FE_huoran_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页脚配置联调

Browse Source
master
yujialong 6 months ago
parent ed27c99085
commit 5e551daa19
4 changed files with 181 additions and 218 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/api/index.js
  2. 230
      src/layouts/footer/index.vue
  3. 153
      src/pages/aboutUs/index.vue
  4. 15
      src/pages/index/list/index.vue

1
src/api/index.js
Unescape View File

@ -23,6 +23,7 @@ export default {
queryArticlesByColumnType: `/iasf/sysColumn/queryArticlesByColumnType`, queryArticlesByColumnType: `/iasf/sysColumn/queryArticlesByColumnType`,
seoList: `/iasf/seo/list`, seoList: `/iasf/seo/list`,
columnDisplayFloatingBar: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/columnDisplayFloatingBar`, columnDisplayFloatingBar: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/columnDisplayFloatingBar`,
showTheFooterAccordingToTheColumn: `/iasf/SysFooterSetupService/SysFooterSetup/showTheFooterAccordingToTheColumn`,
listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`, listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`,
// 产品中心 // 产品中心

230
src/layouts/footer/index.vue
Unescape View File

@ -1,49 +1,122 @@
<template> <template>
<div> <div>
<div v-if="showDefaultPath.includes($route.path)" :class="['footer', { iasf: isIasf }]"> <div v-if="showDefaultPath.includes($route.path)" :class="['footer', { iasf: isIasf }]">
<template v-if="isIasf"> <div class="mask"></div>
<div class="mask"></div> <ul v-if="isIasf" class="entry">
<ul v-if="isIasf" class="entry"> <li :class="{ 'cursor-pointer': isLink(modules[13].form.link.linkName) }" @click="openLink(modules[14].form)">
<li :class="{ 'cursor-pointer': isLink(modules[13].form.link.linkName) }" @click="openLink(modules[14].form)"> <img class="icon" :src="modules[14].form.pic" alt="">
<img class="icon" :src="modules[14].form.pic" alt=""> <p class="text">{{ modules[14].form.title }}</p>
<p class="text">{{ modules[14].form.title }}</p> </li>
</li> <li :class="{ 'cursor-pointer': isLink(modules[14].form.link.linkName) }" @click="openLink(modules[15].form)">
<li :class="{ 'cursor-pointer': isLink(modules[14].form.link.linkName) }" @click="openLink(modules[15].form)"> <img class="icon" :src="modules[15].form.pic" alt="">
<img class="icon" :src="modules[15].form.pic" alt=""> <p class="text">{{ modules[15].form.title }}</p>
<p class="text">{{ modules[15].form.title }}</p> </li>
</li> <li :class="{ 'cursor-pointer': isLink(modules[15].form.link.linkName) }" @click="openLink(modules[16].form)">
<li :class="{ 'cursor-pointer': isLink(modules[15].form.link.linkName) }" @click="openLink(modules[16].form)"> <img class="icon" :src="modules[16].form.pic" alt="">
<img class="icon" :src="modules[16].form.pic" alt=""> <p class="text">{{ modules[16].form.title }}</p>
<p class="text">{{ modules[16].form.title }}</p> </li>
</li> <li :class="{ 'cursor-pointer': isLink(modules[16].form.link.linkName) }" @click="openLink(modules[17].form)">
<li :class="{ 'cursor-pointer': isLink(modules[16].form.link.linkName) }" @click="openLink(modules[17].form)"> <img class="icon" :src="modules[17].form.pic" alt="">
<img class="icon" :src="modules[17].form.pic" alt=""> <p class="text">{{ modules[17].form.title }}</p>
<p class="text">{{ modules[17].form.title }}</p> </li>
</li> <li :class="{ 'cursor-pointer': isLink(modules[17].form.link.linkName) }" @click="openLink(modules[18].form)">
<li :class="{ 'cursor-pointer': isLink(modules[17].form.link.linkName) }" @click="openLink(modules[18].form)"> <img class="icon" :src="modules[18].form.pic" alt="">
<img class="icon" :src="modules[18].form.pic" alt=""> <p class="text">{{ modules[18].form.title }}</p>
<p class="text">{{ modules[18].form.title }}</p> </li>
</li> </ul>
</ul> </div>
</template>
<div class="relative text-center"> <!-- 这里需要读取后台的页脚设置，有3种样式 -->
<img src="https://huorantech.com/images/about/logo.png" alt=""> <template v-if="footers.length">
<div class="flex j-center a-center m-t-20"> <!-- 常规样式 -->
<div class="flex"> <div v-if="styleId === 1" class="contact">
<div v-for="(item, i) in columns" :key="i" class="column"> <div class="inner">
<h6 @click="columnTo(item)">{{ item.columnName }}</h6> <div class="title">
<ul v-if="item.children.length" class="children"> <h6>{{ footers[0].form.title }}</h6>
<li v-for="(column, j) in item.children" :key="j" @click="columnTo(column)">{{ column.columnName }}</li> <p class="text">{{ footers[0].form.des }}</p>
</ul> </div>
<div class="region">
<img class="dot" src="https://huorantech.com/images/about/dot.png" alt="">
<p class="name">{{ footers[0].form.area }}</p>
</div>
<div class="info">
<img class="logo" :src="footers[1].form.pic" alt="">
<div class="texts">
<div class="item">
<div class="line">
<img class="icon" src="https://huorantech.com/images/about/site.png" alt="">
{{ footers[1].form.siteName }}
</div>
<div class="line">
<img class="icon" src="https://huorantech.com/images/about/address.png" alt="">
{{ footers[1].form.address }}
</div>
</div>
<div class="item">
<div class="line">
<img class="icon" src="https://huorantech.com/images/about/phone.png" alt="">
{{ footers[1].form.phone }}
</div>
<div class="line">
<img class="icon" src="https://huorantech.com/images/about/mail.png" alt="">
{{ footers[1].form.mail }}
</div>contact
</div>
<div class="qrcode">
<img width="103" :src="footers[2].form.pic" alt="">
<p class="text">{{ footers[2].form.title }}</p>
</div>
<div class="qrcode">
<img width="103" :src="footers[3].form.pic" alt="">
<p class="text">{{ footers[3].form.title }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="text-center"> </div>
<p class="meta">广东省深圳市龙华区民治街道红山社区龙光玖钻商务中心南期A座2311</p>
<a class="copyright" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a> <!-- 含网站导航 -->
<div v-else-if="styleId === 2" class="footer">
<div class="relative text-center">
<img :src="footers[0].form.pic" alt="">
<div class="flex j-center a-center m-t-20">
<div class="flex">
<div v-for="(item, i) in columns" :key="i" class="column">
<h6 @click="columnTo(item)">{{ item.columnName }}</h6>
<ul v-if="item.children.length" class="children">
<li v-for="(column, j) in item.children" :key="j" @click="columnTo(column)">{{ column.columnName }}
</li>
</ul>
</div>
</div>
</div>
<div v-html="footers[0].form.info"></div>
</div> </div>
</div> </div>
</div>
<!-- 英文字母 -->
<div v-else-if="styleId === 3" class="footer3">
<div class="inner">
<div class="flex j-between">
<div v-html="footers[0].form.info"></div>
<div class="flex text-center">
<div class="qrcode">
<p class="title">{{ footers[1].form.title }}</p>
<img width="103" :src="footers[1].form.pic" alt="">
<p class="text">{{ footers[1].form.des }}</p>
</div>
<div class="qrcode m-l-30">
<p class="title">{{ footers[2].form.title }}</p>
<img width="103" :src="footers[2].form.pic" alt="">
<p class="text">{{ footers[2].form.des }}</p>
</div>
</div>
</div>
<div v-html="footers[3].form.info"></div>
</div>
</div>
</template>
<div v-if="showContactPath.includes($route.path)" class="contact"> <div v-if="showContactPath.includes($route.path)" class="contact">
<div class="inner"> <div class="inner">
@ -103,11 +176,13 @@ export default {
data () { data () {
return { return {
isIasf: false, isIasf: false,
showDefaultPath: ['/home', '/iasf'], // 展示默认页脚的页面 showDefaultPath: ['/iasf'], // 展示默认页脚的页面
showContactPath: ['/news', '/sfel', '/talent', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面 showContactPath: ['/news', '/sfel', '/talent', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面
columns: [], columns: [],
modules: [], modules: [],
floatings: [], floatings: [],
footers: [],
styleId: 1,
}; };
}, },
computed: { computed: {
@ -121,6 +196,7 @@ export default {
'$route': { '$route': {
handler () { handler () {
this.getFloating() this.getFloating()
this.getFooter()
if (this.$route.path === '/iasf') { if (this.$route.path === '/iasf') {
this.isIasf = true this.isIasf = true
this.getInfo() this.getInfo()
@ -132,7 +208,6 @@ export default {
}, },
mounted () { mounted () {
this.getColumn() this.getColumn()
}, },
methods: { methods: {
// 资讯 // 资讯
@ -167,7 +242,23 @@ export default {
if (id) { if (id) {
const { data } = await this.$post(`${this.api.columnDisplayFloatingBar}?columnId=${id}`) const { data } = await this.$post(`${this.api.columnDisplayFloatingBar}?columnId=${id}`)
this.floatings = data this.floatings = data
console.log("🚀 ~ getFloating ~ this.floatings:", this.floatings) } else {
this.floatings = []
}
},
// 查询页脚
async getFooter () {
const { id } = this.$route.query
if (id) {
const { data } = await this.$post(`${this.api.showTheFooterAccordingToTheColumn}?columnId=${id}`)
if (data.length) {
this.styleId = data[0].floatingBarStyle
this.footers = data[0].footerContent ? JSON.parse(data[0].footerContent) : []
} else {
this.footers = []
}
} else {
this.footers = []
} }
}, },
// 置顶 // 置顶
@ -335,35 +426,29 @@ export default {
.contact { .contact {
position: relative; position: relative;
padding: 0 0 73px 0; padding: 0 0 106px 0;
background: url(../../assets/images/map.png) 0 0 / cover no-repeat; background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
.inner { .inner {
width: 1082px; width: 1200px;
margin: 0 auto; margin: 0 auto;
} }
.title { .title {
width: 419px; width: 419px;
height: 263px; height: 258px;
padding: 147px 0 0 40px; padding: 113px 0 0 43px;
background-color: #0854fe; background-color: #0854fe;
h6 { h6 {
z-index: 2;
position: relative;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 45px; font-size: 46px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #fff; color: #fff;
} }
.text { .text {
margin-top: -65px; font-size: 28px;
font-size: 48px; color: #fff;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px #4073e5;
} }
} }
@ -382,7 +467,7 @@ export default {
} }
.info { .info {
margin: 55px 0 0 8px; margin: 86px 0 0 44px;
.texts { .texts {
display: flex; display: flex;
@ -391,7 +476,7 @@ export default {
} }
.item { .item {
margin-right: 75px; margin-right: 70px;
} }
.line { .line {
@ -410,10 +495,41 @@ export default {
.qrcode { .qrcode {
text-align: center; text-align: center;
&:last-child {
margin-left: 30px;
}
.text { .text {
margin-top: 10px; margin-top: 10px;
font-size: 12px; font-size: 12px;
color: #fff; color: #fff;
white-space: nowrap;
}
}
}
.footer3 {
padding: 30px 0;
background-color: #303246;
.inner {
width: 1200px;
margin: 0 auto;
}
.qrcode {
color: #fff;
img {
margin: 10px 0;
}
.title {
font-size: 14px;
}
.text {
font-size: 12px;
} }
} }
} }

153
src/pages/aboutUs/index.vue
Unescape View File

@ -139,52 +139,6 @@
</scroll> </scroll>
</div> </div>
</div> </div>
<div class="contact">
<div class="inner">
<div class="title">
<h6>{{ modules[10].form.title }}</h6>
<p class="text">{{ modules[10].form.des }}</p>
</div>
<div class="region">
<img class="dot" src="https://huorantech.com/images/about/dot.png" alt="">
<p class="name">深圳</p>
</div>
<div class="info">
<img class="logo" :src="modules[11].form.pic" alt="">
<div class="texts">
<div class="item">
<div class="line">
<img class="icon" src="https://huorantech.com/images/about/site.png" alt="">
{{ modules[11].form.siteName }}
</div>
<div class="line">
<img class="icon" src="https://huorantech.com/images/about/address.png" alt="">
{{ modules[11].form.address }}
</div>
</div>
<div class="item">
<div class="line">
<img class="icon" src="https://huorantech.com/images/about/phone.png" alt="">
{{ modules[11].form.phone }}
</div>
<div class="line">
<img class="icon" src="https://huorantech.com/images/about/mail.png" alt="">
{{ modules[11].form.mail }}
</div>contact
</div>
<div class="qrcode">
<img width="103" :src="modules[12].form.pic" alt="">
<p class="text">{{ modules[12].form.title }}</p>
</div>
<div class="qrcode">
<img width="103" :src="modules[13].form.pic" alt="">
<p class="text">{{ modules[13].form.title }}</p>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
@ -207,7 +161,7 @@ export default {
scroll scroll
}, },
mounted () { mounted () {
}, },
methods: { methods: {
// 初始化动画 // 初始化动画
@ -599,78 +553,6 @@ export default {
} }
} }
.contact {
position: relative;
padding: 0 0 106px 0;
background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
.inner {
padding: 0;
}
.title {
width: 419px;
height: 258px;
padding: 113px 0 0 43px;
background-color: #0854fe;
h6 {
margin-bottom: 20px;
font-size: 46px;
color: #fff;
}
.text {
font-size: 28px;
color: #fff;
}
}
.region {
position: absolute;
top: 152px;
left: 70%;
display: flex;
align-items: center;
font-size: 20px;
color: #fff;
img {
margin-right: 20px;
}
}
.info {
margin: 86px 0 0 44px;
.texts {
display: flex;
align-items: center;
margin-top: 24px;
}
.item {
margin-right: 75px;
}
.line {
display: flex;
align-items: center;
margin-bottom: 20px;
font-size: 16px;
color: #fff;
img {
margin-right: 8px;
}
}
}
.qrcode:last-child {
margin-left: 30px;
}
}
.about { .about {
padding: 130px 0 200px; padding: 130px 0 200px;
background: url(https://huorantech.com/images/index/about2.png) (bottom right) / auto no-repeat, background: url(https://huorantech.com/images/index/about2.png) (bottom right) / auto no-repeat,
@ -1287,25 +1169,6 @@ export default {
.clients { .clients {
width: 100%; width: 100%;
} }
.contact {
.info {
margin-left: 0;
.texts {
flex-direction: column;
align-items: flex-start;
}
.item {
margin: 0 0 30px 0;
}
}
.qrcode:last-child {
margin: 20px 0 0 0;
}
}
} }
} }
@ -1325,20 +1188,6 @@ export default {
max-width: 100%; max-width: 100%;
} }
} }
.contact {
.inner {
width: 100%;
}
.title {
width: 100%;
}
.info {
padding: 0 5%;
}
}
} }
} }
</style> </style>

15
src/pages/index/list/index.vue
Unescape View File

@ -23,8 +23,8 @@
<div class="inner"> <div class="inner">
<ul class="intro"> <ul class="intro">
<template v-for="(item, i) in modules[1].list"> <template v-for="(item, i) in modules[1].list">
<li v-if="item.isEnable" :key="i" :class="[{ 'cursor-pointer': isLink(item.link.linkName) }, 'fadeInDown' + i]" <li v-if="item.isEnable" :key="i"
@click="openLink(item)"> :class="[{ 'cursor-pointer': isLink(item.link.linkName) }, 'fadeInDown' + i]" @click="openLink(item)">
<img :src="item.pic" alt=""> <img :src="item.pic" alt="">
<div class="text"> <div class="text">
<h6>{{ item.title }}</h6> <h6>{{ item.title }}</h6>
@ -61,7 +61,8 @@
<dt>学科类别</dt> <dt>学科类别</dt>
<div class="vals"> <div class="vals">
<dd :class="{ active: categoryId === '' }" @click="categoryClick({ id: '' }, 1)">全部</dd> <dd :class="{ active: categoryId === '' }" @click="categoryClick({ id: '' }, 1)">全部</dd>
<dd :class="{ active: categoryId === 1 }" style="margin-right: 20px" @click="categoryClick({ id: 1 }, 1)">不限 <dd :class="{ active: categoryId === 1 }" style="margin-right: 20px"
@click="categoryClick({ id: 1 }, 1)">不限
</dd> </dd>
<dd v-for="(item, i) in category" :key="i" :class="{ active: categoryId === item.id }" <dd v-for="(item, i) in category" :key="i" :class="{ active: categoryId === item.id }"
@click="categoryClick(item, 1)">{{ item.name }}</dd> @click="categoryClick(item, 1)">{{ item.name }}</dd>
@ -72,7 +73,8 @@
<div class="vals"> <div class="vals">
<dd :class="{ active: professionalCategoryId === '' }" @click="categoryClick({ id: '' }, 2)">全部</dd> <dd :class="{ active: professionalCategoryId === '' }" @click="categoryClick({ id: '' }, 2)">全部</dd>
<dd v-for="(item, i) in professionalClasses" :key="i" <dd v-for="(item, i) in professionalClasses" :key="i"
:class="{ active: professionalCategoryId === item.id }" @click="categoryClick(item, 2)">{{ item.name }} :class="{ active: professionalCategoryId === item.id }" @click="categoryClick(item, 2)">{{ item.name
}}
</dd> </dd>
</div> </div>
</dl> </dl>
@ -174,11 +176,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="copyright">
<!-- <span>© Copyright 2021 Occupation Lab 职站</span> -->
<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
</div>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save