悬浮栏联调完成

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. 26
      src/mixins/article/index.js
  5. 89
      src/pages/aboutUs/index.vue

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

@ -82,6 +82,18 @@
</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>
</template>
<script>
@ -94,7 +106,8 @@ export default {
showDefaultPath: ['/home', '/iasf'], //
showContactPath: ['/news', '/sfel', '/talent', '/careers', '/edu', '/news'], //
columns: [],
modules: []
modules: [],
floatings: [],
};
},
computed: {
@ -107,6 +120,7 @@ export default {
watch: {
'$route': {
handler () {
this.getFloating()
if (this.$route.path === '/iasf') {
this.isIasf = true
this.getInfo()
@ -118,6 +132,7 @@ export default {
},
mounted () {
this.getColumn()
},
methods: {
//
@ -146,6 +161,20 @@ export default {
}
}).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) {
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) {
.footer {
padding: 64px 10% 25px;

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

@ -1,26 +1,26 @@
import Setting from '@/setting'
import Util from '@/libs/util'
export default {
data() {
data () {
return {
id: +this.$route.query.id
}
},
computed: {
site() {
site () {
return this.$route.query.siteId || this.$store.state.content.site
}
},
mounted() {
mounted () {
},
methods: {
// 点击栏目回调
columnTo(to) {
const { typeId,menuVisible } = to
columnTo (to) {
const { typeId, menuVisible } = to
// 跳转链接
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
const cType = to.connectionType
if (cType !== 2) { // 非站外链接
@ -42,9 +42,9 @@ export default {
if (to.isOpen) {
var userAgent = navigator.userAgent;
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
if(isSafari) {
if (isSafari) {
window.location.href = href
}else {
} else {
window.open(href)
}
} else {
@ -52,11 +52,11 @@ export default {
}
} else if (typeId !== 4 || (typeId === 4 && !to.children.length)) {
// 常规栏目跳转到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) { // 链接
let href = item.linkAddress
const cType = item.connectionType
@ -78,9 +78,9 @@ export default {
if (item.isOpen) {
var userAgent = navigator.userAgent;
var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
if(isSafari) {
if (isSafari) {
window.location.href = href
}else {
} else {
window.open(href)
}
} else {

@ -185,20 +185,6 @@
</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>
</template>
@ -215,33 +201,15 @@ export default {
active: '',
clients: [1, 2, 3, 4, 5],
sr: null,
floatings: [],
}
},
components: {
scroll
},
mounted () {
this.getFloating()
},
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 () {
const sr = ScrollReveal()
@ -305,11 +273,6 @@ export default {
}
}).catch(err => { })
},
//
topping () {
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
},
//
toQues () {
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) {
.wrap {
.banner {

Loading…
Cancel
Save