fix
This commit is contained in:
huangjinming
parent
94bef74e15
commit
954b3c3fe4
@ -29,7 +29,7 @@
|
||||
class="mySwiper"
|
||||
>
|
||||
<swiper-slide v-for="(item, index) of imageList" :key="index">
|
||||
<div :class="activeIndex !== index?'img-container':''">
|
||||
<div >
|
||||
<img class="img" :src="item.imgSrc" />
|
||||
</div>
|
||||
</swiper-slide>
|
||||
@ -209,7 +209,7 @@ const handSlideNext = () => {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background: #fff;
|
||||
|
||||
|
||||
/* Center slide text vertically */
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
@ -311,6 +311,7 @@ const handSlideNext = () => {
|
||||
.mySwiper .swiper-slide-thumb-active {
|
||||
opacity: 1;
|
||||
// border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
|
||||
@ -318,12 +319,12 @@ const handSlideNext = () => {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.swiper-slide {
|
||||
position: relative;
|
||||
// border-radius: 12px;
|
||||
border-radius: 12px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -334,6 +335,7 @@ const handSlideNext = () => {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.5); /* 黑色遮罩，0.5 为透明度 */
|
||||
pointer-events: none; /* 让遮罩层不影响图片的鼠标交互 */
|
||||
}
|
||||
|
||||
@ -23,8 +23,9 @@
|
||||
<div class="slogan">
|
||||
<div class="slogan-text">
|
||||
<ScrollAnimatedText>
|
||||
Come to be COMMENDER! Enjoy 3D CEBG and fight against other players!
|
||||
</ScrollAnimatedText>
|
||||
Come to be COMMENDER! Enjoy 3D CEBG and fight against other
|
||||
players!
|
||||
</ScrollAnimatedText>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -51,9 +52,9 @@
|
||||
</div>
|
||||
<div class="sloagn">
|
||||
<ScrollAnimatedText>
|
||||
Undefinable pattern, incredible gaming experience and excited NFT in
|
||||
CEBG!
|
||||
</ScrollAnimatedText>
|
||||
Undefinable pattern, incredible gaming experience and excited NFT in
|
||||
CEBG!
|
||||
</ScrollAnimatedText>
|
||||
</div>
|
||||
<DameplaySwiperCard></DameplaySwiperCard>
|
||||
</div>
|
||||
@ -83,7 +84,6 @@ const ratio = ref(0.2); //视差偏移率
|
||||
|
||||
const positionY1 = ref(0); //背景Y轴偏移量
|
||||
|
||||
|
||||
const videoModal = ref(null);
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
@ -98,7 +98,6 @@ function handleScroll() {
|
||||
document.body.scrollTop;
|
||||
positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -285,7 +284,7 @@ function handleScroll() {
|
||||
}
|
||||
.slogan-text {
|
||||
font-size: 16px;
|
||||
font-family: 'Poppins';
|
||||
font-family: "Poppins";
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
}
|
||||
@ -316,8 +315,6 @@ function handleScroll() {
|
||||
.gallery-img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.gameplay-bottom {
|
||||
@ -389,7 +386,7 @@ function handleScroll() {
|
||||
.sloagn {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-family: 'Poppins';
|
||||
font-family: "Poppins";
|
||||
color: #e6f8ff;
|
||||
line-height: 32px;
|
||||
margin-bottom: 71px;
|
||||
|
||||
@ -67,6 +67,7 @@ p {
|
||||
// color: transparent;
|
||||
}
|
||||
.bottom-top {
|
||||
text-align: center;
|
||||
background-size: 100% 0%;
|
||||
background-position: bottom right;
|
||||
}
|
||||
|
||||
@ -267,8 +267,21 @@ function test(index, sc) {
|
||||
background: url("@/assets/img/home/weapon/weapon-bg.png") no-repeat;
|
||||
height: 115px;
|
||||
width: 220px;
|
||||
position: relative;
|
||||
background-size: contain;
|
||||
}
|
||||
.weapon-moss-active-bg:hover{
|
||||
background: url("@/assets/img/home/weapon/weapon-active-bg.png") no-repeat;
|
||||
}
|
||||
.weapon-moss-active-bg ::before{
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100px;
|
||||
background: url("@/assets/img/home/weapon/weapon-bottom-boder.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.weapon-moss-bg ::before {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
|
||||
@ -87,7 +87,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gameplay-left">
|
||||
<div class="gameplay-left" ref="gameplayLeft">
|
||||
<div class="pve-img">
|
||||
<img
|
||||
v-if="isPveTab"
|
||||
@ -121,7 +121,9 @@ const isPveTab = ref(false);
|
||||
const positionY1 = ref(0); //背景Y轴偏移量
|
||||
|
||||
const animatedElement = ref(null);
|
||||
const gameplayLeft = ref(null);
|
||||
let animationPlayed = false;
|
||||
let animationgameplay = false;
|
||||
|
||||
function onScroll(event) {
|
||||
const scrollTop = window.scrollY;
|
||||
@ -139,6 +141,22 @@ function onScroll(event) {
|
||||
});
|
||||
}
|
||||
}
|
||||
function onGamePlayScroll(event) {
|
||||
const scrollTop = window.scrollY;
|
||||
const windowHeight = window.innerHeight;
|
||||
|
||||
const boxRect = gameplayLeft.value.getBoundingClientRect();
|
||||
const boxTop = boxRect.bottom;
|
||||
|
||||
if (boxTop <= windowHeight && !animationgameplay) {
|
||||
animationgameplay = true;
|
||||
gsap.to(gameplayLeft.value, {
|
||||
x: -950,
|
||||
opacity: 1,
|
||||
duration: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
const handTabActive = (isTab) => {
|
||||
isPveTab.value = !isPveTab.value;
|
||||
};
|
||||
@ -151,6 +169,7 @@ function handleScroll() {
|
||||
}
|
||||
onMounted(() => {
|
||||
window.addEventListener("scroll", onScroll);
|
||||
window.addEventListener("scroll", onGamePlayScroll);
|
||||
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
|
||||
let bgTest = document.getElementById("bgTest");
|
||||
|
||||
@ -163,8 +182,6 @@ onBeforeUnmount(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.what-cebg {
|
||||
// background: rgba(38, 54, 67, 1);
|
||||
// background:url('@/assets/img/home/what-bg.jpg') no-repeat;
|
||||
position: relative;
|
||||
.what-bg {
|
||||
position: absolute;
|
||||
@ -230,16 +247,7 @@ onBeforeUnmount(() => {
|
||||
position: relative;
|
||||
.what-content {
|
||||
display: flex;
|
||||
// .slogan-center {
|
||||
// font-size: 16px;
|
||||
// font-family: Arial;
|
||||
// font-weight: bold;
|
||||
// width: 683px;
|
||||
// letter-spacing: 1.5px;
|
||||
// height: 100px;
|
||||
// color: #ffffff;
|
||||
// line-height: 28px;
|
||||
// }
|
||||
|
||||
.monster {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
@ -253,10 +261,6 @@ onBeforeUnmount(() => {
|
||||
height: 482px;
|
||||
}
|
||||
}
|
||||
// .monster.animate {
|
||||
// left: -190px;
|
||||
// opacity: 1;
|
||||
// }
|
||||
|
||||
.content-right {
|
||||
z-index: 2;
|
||||
@ -410,82 +414,6 @@ onBeforeUnmount(() => {
|
||||
transform: scaleX(1, 1);
|
||||
transition: all 0.25s ease-in;
|
||||
}
|
||||
// .pve-right {
|
||||
// // margin-top: 30px;
|
||||
// width: 196px;
|
||||
// height: 62px;
|
||||
// position: relative;
|
||||
// background-image: url("@/assets/img/home/pvp-btn.png");
|
||||
// background-position: center;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: cover;
|
||||
// // border: 1px solid #333;
|
||||
// // overflow: hidden;
|
||||
// transition: background-image 1s;
|
||||
// }
|
||||
// .pve-right::after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// background: url("@/assets/img/home/pvp-btn-active.png") no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// opacity: 1;
|
||||
// transform: scaleX(1, 1);
|
||||
// clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
||||
// transition: all 0.3s ease-in;
|
||||
// }
|
||||
// .pve-right:hover:after {
|
||||
// clip-path: polygon(
|
||||
// calc(50% + 0px) calc(50% + 150px),
|
||||
// calc(50% + 150px) calc(50% + 0px),
|
||||
// calc(50% + 0px) calc(50% - 150px),
|
||||
// calc(50% - 150px) calc(50% - 0px)
|
||||
// );
|
||||
// opacity: 1;
|
||||
// transition: all 0.25s ease-in;
|
||||
// transform: scaleX(1, 1);
|
||||
// }
|
||||
// .pve-right-active {
|
||||
// // margin-top: 30px;
|
||||
// width: 196px;
|
||||
// height: 62px;
|
||||
// position: relative;
|
||||
// background-image: url("@/assets/img/home/pvp-btn.png") ;
|
||||
// background-position: center;
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: cover;
|
||||
// transition: background-image 1s;
|
||||
// }
|
||||
|
||||
// .pve-right-active::after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// background: url("@/assets/img/home/pvp-btn-active.png")no-repeat;
|
||||
// background-size:100% 100%;
|
||||
// transform: scaleX(1,1);
|
||||
// opacity: 1;
|
||||
// clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
|
||||
// // transform-origin: center;
|
||||
// transition: transform 0.3s ease-in;
|
||||
// }
|
||||
// .pve-right-active:hover::after {
|
||||
// opacity: 1;
|
||||
// clip-path: polygon(
|
||||
// calc(50% + 0px) calc(50% + 150px),
|
||||
// calc(50% + 150px) calc(50% + 0px),
|
||||
// calc(50% + 0px) calc(50% - 150px),
|
||||
// calc(50% - 150px) calc(50% - 0px)
|
||||
// );
|
||||
// transition: transform 0.3s ease-in;
|
||||
// transform: scaleX(1,1);
|
||||
// }
|
||||
}
|
||||
.pve-right {
|
||||
// margin-top: 30px;
|
||||
@ -581,6 +509,8 @@ onBeforeUnmount(() => {
|
||||
display: flex;
|
||||
// background: #59a2d0;
|
||||
.gameplay-left {
|
||||
position: absolute;
|
||||
right: -950px;
|
||||
.pve-img {
|
||||
width: 710px;
|
||||
height: 400px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user