智能体商店跳转案例样式问题
This commit is contained in:
parent
51f7f189c0
commit
e90aa60ec3
@ -6,7 +6,7 @@
|
|||||||
<div class="decor decor--deep-purple"></div>
|
<div class="decor decor--deep-purple"></div>
|
||||||
|
|
||||||
<section class="case-hero">
|
<section class="case-hero">
|
||||||
<img class="case-hero__bg" :src="bannerImg" alt="">
|
<img class="case-hero__bg" :src="bannerImg" alt="" @load="refreshTabsOrigin">
|
||||||
<div class="case-container">
|
<div class="case-container">
|
||||||
<div class="case-hero__content">
|
<div class="case-hero__content">
|
||||||
<h1>投策智能体</h1>
|
<h1>投策智能体</h1>
|
||||||
@ -233,7 +233,8 @@ export default {
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
const scroller = this.getScrollContainer()
|
const scroller = this.getScrollContainer()
|
||||||
this.tabsOriginTop = this.getElementTopInScroller(this.$refs.caseTabs, scroller)
|
this.resetScrollTop(scroller)
|
||||||
|
this.refreshTabsOrigin()
|
||||||
scroller.addEventListener('scroll', this.handlePageScroll, { passive: true })
|
scroller.addEventListener('scroll', this.handlePageScroll, { passive: true })
|
||||||
this.handlePageScroll()
|
this.handlePageScroll()
|
||||||
})
|
})
|
||||||
@ -245,6 +246,18 @@ export default {
|
|||||||
getScrollContainer() {
|
getScrollContainer() {
|
||||||
return document.getElementById('homeOut') || window
|
return document.getElementById('homeOut') || window
|
||||||
},
|
},
|
||||||
|
resetScrollTop(scroller) {
|
||||||
|
if (scroller === window) {
|
||||||
|
window.scrollTo(0, 0)
|
||||||
|
} else {
|
||||||
|
scroller.scrollTop = 0
|
||||||
|
}
|
||||||
|
this.isTabsFixed = false
|
||||||
|
},
|
||||||
|
refreshTabsOrigin() {
|
||||||
|
const scroller = this.getScrollContainer()
|
||||||
|
this.tabsOriginTop = this.getElementTopInScroller(this.$refs.caseTabs, scroller)
|
||||||
|
},
|
||||||
getScrollOffset() {
|
getScrollOffset() {
|
||||||
const tabs = this.$el.querySelector('.case-tabs')
|
const tabs = this.$el.querySelector('.case-tabs')
|
||||||
const tabsHeight = tabs ? tabs.offsetHeight : 0
|
const tabsHeight = tabs ? tabs.offsetHeight : 0
|
||||||
@ -311,8 +324,34 @@ export default {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.decision-case-page h1,
|
||||||
|
.decision-case-page h2,
|
||||||
|
.decision-case-page h3,
|
||||||
|
.decision-case-page h4,
|
||||||
|
.decision-case-page p {
|
||||||
|
padding: 0;
|
||||||
|
margin-top: 0;
|
||||||
|
font-family: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decision-case-page button {
|
||||||
|
font-family: inherit;
|
||||||
|
line-height: 1.5;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decision-case-page svg {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decision-case-page img {
|
||||||
|
display: block;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
.case-container {
|
.case-container {
|
||||||
width: min(100%, 1280px);
|
width: 100%;
|
||||||
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 0 24px;
|
padding: 0 24px;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user