悬浮栏联调完成

master
yujialong 6 months ago
parent 1c83eb570a
commit ed27c99085
  1. 3
      src/api/index.js
  2. 82
      src/layouts/footer/index.vue
  3. 2
      src/layouts/home/index.vue
  4. 24
      src/mixins/article/index.js
  5. 89
      src/pages/aboutUs/index.vue

@ -22,8 +22,7 @@ export default {
oneLevelChecksThemAll: `/iasf/sysColumn/oneLevelChecksThemAll`, oneLevelChecksThemAll: `/iasf/sysColumn/oneLevelChecksThemAll`,
queryArticlesByColumnType: `/iasf/sysColumn/queryArticlesByColumnType`, queryArticlesByColumnType: `/iasf/sysColumn/queryArticlesByColumnType`,
seoList: `/iasf/seo/list`, seoList: `/iasf/seo/list`,
listFloating: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/floatingBarList`, columnDisplayFloatingBar: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/columnDisplayFloatingBar`,
findFloating: `/iasf/SysFloatingColumnSchemeService/SysFloatingColumnScheme/findById`,
listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`, listMarketing: `/nakadai/nakadai/mall/marketing/promotion/pagingQueryList`,
// 产品中心 // 产品中心

@ -82,6 +82,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tool">
<div v-for="(item, i) in floatings" :key="i" class="float">
<div class="item" :style="{ backgroundImage: 'url(' + item.pictureAddress + ')' }"></div>
<div class="popup">
<p v-if="item.schemeTitle" class="tips">{{ item.schemeTitle }}</p>
<div v-html="item.schemeContentJson"></div>
</div>
</div>
<div class="item topping" @click="topping"></div>
</div>
</div> </div>
</template> </template>
<script> <script>
@ -94,7 +106,8 @@ export default {
showDefaultPath: ['/home', '/iasf'], // showDefaultPath: ['/home', '/iasf'], //
showContactPath: ['/news', '/sfel', '/talent', '/careers', '/edu', '/news'], // showContactPath: ['/news', '/sfel', '/talent', '/careers', '/edu', '/news'], //
columns: [], columns: [],
modules: [] modules: [],
floatings: [],
}; };
}, },
computed: { computed: {
@ -107,6 +120,7 @@ export default {
watch: { watch: {
'$route': { '$route': {
handler () { handler () {
this.getFloating()
if (this.$route.path === '/iasf') { if (this.$route.path === '/iasf') {
this.isIasf = true this.isIasf = true
this.getInfo() this.getInfo()
@ -118,6 +132,7 @@ export default {
}, },
mounted () { mounted () {
this.getColumn() this.getColumn()
}, },
methods: { methods: {
// //
@ -146,6 +161,20 @@ export default {
} }
}).catch(err => { }) }).catch(err => { })
}, },
//
async getFloating () {
const { id } = this.$route.query
if (id) {
const { data } = await this.$post(`${this.api.columnDisplayFloatingBar}?columnId=${id}`)
this.floatings = data
console.log("🚀 ~ getFloating ~ this.floatings:", this.floatings)
}
},
//
topping () {
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
},
// //
isLink (linkName) { isLink (linkName) {
return linkName !== '无' && linkName !== '' return linkName !== '无' && linkName !== ''
@ -389,6 +418,57 @@ export default {
} }
} }
.tool {
z-index: 10;
position: fixed;
bottom: 100px;
right: 30px;
.item {
width: 45px;
height: 45px;
margin-bottom: 10px;
border: 1px solid #e5e5e5;
cursor: pointer;
background-color: #fff;
background-position: center center;
background-repeat: no-repeat;
&:hover {
border-color: #1692ff;
}
}
.topping {
background: #fff url(https://huorantech.com/images/index/top.png) center center/auto no-repeat;
&:hover {
background-image: url(https://huorantech.com/images/index/top-1.png);
background-color: #006eff;
}
}
.popup {
position: absolute;
display: none;
top: -100px;
right: 45px;
padding: 20px;
background-color: #fff;
background-clip: padding-box;
border-right: 25px solid transparent;
box-shadow: 0px 0px 8px 0 rgba(231, 231, 231, 0.3) inset;
}
.float {
position: relative;
&:hover .popup {
display: block;
}
}
}
@media (max-width: 1500px) { @media (max-width: 1500px) {
.footer { .footer {
padding: 64px 10% 25px; padding: 64px 10% 25px;

@ -25,7 +25,7 @@ export default {
}, },
components: { components: {
vHead, vHead,
vFooter vFooter,
}, },
computed: { computed: {
isHome () { isHome () {

@ -1,26 +1,26 @@
import Setting from '@/setting' import Setting from '@/setting'
import Util from '@/libs/util' import Util from '@/libs/util'
export default { export default {
data() { data () {
return { return {
id: +this.$route.query.id id: +this.$route.query.id
} }
}, },
computed: { computed: {
site() { site () {
return this.$route.query.siteId || this.$store.state.content.site return this.$route.query.siteId || this.$store.state.content.site
} }
}, },
mounted() { mounted () {
}, },
methods: { methods: {
// 点击栏目回调 // 点击栏目回调
columnTo(to) { columnTo (to) {
const { typeId,menuVisible } = to const { typeId, menuVisible } = to
// 跳转链接 // 跳转链接
if (typeId === 2) { if (typeId === 2) {
if ( menuVisible === 1 && to.children.find(i=>i.menuVisible ===1)) return if (menuVisible === 1 && to.children.find(i => i.menuVisible === 1)) return
let href = to.linkAddress let href = to.linkAddress
const cType = to.connectionType const cType = to.connectionType
if (cType !== 2) { // 非站外链接 if (cType !== 2) { // 非站外链接
@ -42,9 +42,9 @@ export default {
if (to.isOpen) { if (to.isOpen) {
var userAgent = navigator.userAgent; var userAgent = navigator.userAgent;
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent); var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
if(isSafari) { if (isSafari) {
window.location.href = href window.location.href = href
}else { } else {
window.open(href) window.open(href)
} }
} else { } else {
@ -52,11 +52,11 @@ export default {
} }
} else if (typeId !== 4 || (typeId === 4 && !to.children.length)) { } else if (typeId !== 4 || (typeId === 4 && !to.children.length)) {
// 常规栏目跳转到column页,长页栏目直接获取path // 常规栏目跳转到column页,长页栏目直接获取path
this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${to.id}&siteId=${this.site}`).catch(err => {}) this.$router.push(`/${typeId === 3 ? to.path : 'column'}?id=${to.id}&siteId=${this.site}`).catch(err => { })
} }
}, },
// 跳转文章页面 // 跳转文章页面
toArtice(item) { toArtice (item) {
if (item.articleTemplate === 24) { // 链接 if (item.articleTemplate === 24) { // 链接
let href = item.linkAddress let href = item.linkAddress
const cType = item.connectionType const cType = item.connectionType
@ -78,9 +78,9 @@ export default {
if (item.isOpen) { if (item.isOpen) {
var userAgent = navigator.userAgent; var userAgent = navigator.userAgent;
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent); var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
if(isSafari) { if (isSafari) {
window.location.href = href window.location.href = href
}else { } else {
window.open(href) window.open(href)
} }
} else { } else {

@ -185,20 +185,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="tool">
<template v-for="(item, i) in floatings">
<div v-for="(module, j) in item.modules" :key="j" class="float">
<div class="item" :style="{ backgroundImage: 'url(' + module.pictureAddress + ')' }"></div>
<div class="popup">
<p v-if="module.schemeTitle" class="tips">{{ module.schemeTitle }}</p>
<div v-html="module.schemeContentJson"></div>
</div>
</div>
</template>
<div class="item topping"></div>
</div>
</div> </div>
</template> </template>
@ -215,33 +201,15 @@ export default {
active: '', active: '',
clients: [1, 2, 3, 4, 5], clients: [1, 2, 3, 4, 5],
sr: null, sr: null,
floatings: [],
} }
}, },
components: { components: {
scroll scroll
}, },
mounted () { mounted () {
this.getFloating()
}, },
methods: { methods: {
//
async getFloating () {
const { data } = await this.$post(this.api.listFloating, {
siteId: this.site,
search: '',
pageNum: 1,
pageSize: 10,
isForeground: 1,
})
data.records.map(async e => {
const { data } = await this.$post(`${this.api.findFloating}?id=${e.floatingBarSchemeId}`)
this.$set(e, 'modules', data.floatingColumnSchemeModules)
// e.modules = data.floatingColumnSchemeModules
})
this.floatings = data.records
console.log("🚀 ~ getFloating ~ this.floatings:", this.floatings)
},
// //
initAnimate () { initAnimate () {
const sr = ScrollReveal() const sr = ScrollReveal()
@ -305,11 +273,6 @@ export default {
} }
}).catch(err => { }) }).catch(err => { })
}, },
//
topping () {
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
},
// //
toQues () { toQues () {
window.open('https://www.wjx.cn/vm/wB0RcMm.aspx') window.open('https://www.wjx.cn/vm/wB0RcMm.aspx')
@ -1231,56 +1194,6 @@ export default {
} }
} }
.tool {
z-index: 10;
position: fixed;
bottom: 100px;
right: 30px;
.item {
width: 45px;
height: 45px;
margin-bottom: 10px;
border: 1px solid #e5e5e5;
cursor: pointer;
background-color: #fff;
background-position: center center;
background-repeat: no-repeat;
&:hover {
border-color: #1692ff;
}
}
.topping {
background: #fff url(https://huorantech.com/images/index/top.png) center center/auto no-repeat;
&:hover {
background-image: url(https://huorantech.com/images/index/top-1.png);
background-color: #006eff;
}
}
.popup {
position: absolute;
display: none;
top: -100px;
right: 45px;
padding: 20px;
background-color: #fff;
background-clip: padding-box;
border-right: 25px solid transparent;
}
.float {
position: relative;
&:hover .popup {
display: block;
}
}
}
@media (max-width: 1730px) { @media (max-width: 1730px) {
.wrap { .wrap {
.banner { .banner {

Loading…
Cancel
Save