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