huangjinming/cebg-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

newcebg

Browse Source
This commit is contained in:
huangjinming 2023-02-27 14:41:12 +08:00
parent 0b082dfcd1
commit fc3b9854f1
4 changed files with 208 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/home/DameplaySwiperCard.vue
View File

@ -31,10 +31,10 @@
/></swiper-slide>
</swiper>
<div class="swiper-btn-prev" @click="handSlidePrev">
<img src="../assets/img/home/game-swiper-card/next.png" alt="" />
<img src="@/assets/img/home/game-swiper-card/next.png" alt="" />
</div>
<div class="swiper-btn-next" @click="handSlideNext">
<img src="../assets/img/home/game-swiper-card/prev.png" alt="" />
<img src="@/assets/img/home/game-swiper-card/prev.png" alt="" />
</div>
</div>
</div>
@ -142,7 +142,7 @@ const handSlideNext = () => {
width: 30px;
height: 30px;
/*图片路径*/
background: url("../assets/img/home/game-swiper-card/bullet.png") no-repeat
background: url("@/assets/img/home/game-swiper-card/bullet.png") no-repeat
left center;
}
/*显示当前活动块的图片*/
@ -150,7 +150,7 @@ const handSlideNext = () => {
width: 30px;
height: 30px;
/*图片路径*/
background: url("../assets/img/home/game-swiper-card/bullet-active.png")
background: url("@/assets/img/home/game-swiper-card/bullet-active.png")
no-repeat right center;
}
}

88
src/components/home/GameGallerp.vue
View File

@ -165,7 +165,6 @@ function handleScroll() {
line-height: 30px;
opacity: 0.3;
z-index: 1;
}
.content {
width: 1440px;
@ -191,11 +190,55 @@ function handleScroll() {
margin: 59px auto;
margin-bottom: 71px;
}
.btn{
.btn {
width: 100%;
display: flex;
justify-content: center;
}
// .go-to-btn {
// margin-top: 30px;
// width: 196px;
// height: 62px;
// position: relative;
// margin-right: 30px;
// color: #263641;
// cursor: pointer;
// background-image: url("@/assets/img/home/go-to-btn.png");
// background-position: center;
// background-repeat: no-repeat;
// background-size: cover;
// overflow: hidden;
// transition: background-image 0.3s;
// }
// .go-to-btn:hover {
// // background-image: none;
// }
// .go-to-btn::after {
// position: absolute;
// left: 0;
// right: 0;
// top: 0;
// bottom: 0;
// opacity: 1;
// // transition: 0.5s;
// background: url("@/assets/img/home/go-to-btn-active.png") no-repeat;
// background-size: 100% 100%;
// transform: scaleX(1, 1);
// z-index: -1;
// clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
// transition: all 0.3s ease-in-out;
// }
// .go-to-btn: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: all 0.3s ease-in-out;
// transform: scaleX(1, 1);
// }
.go-to-btn {
margin-top: 30px;
width: 196px;
@ -208,29 +251,38 @@ function handleScroll() {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
transition: background-image 0.3s ease-in-out;
// border: 1px solid #333;
// overflow: hidden;
transition: background-image 0.3s;
}
.go-to-btn:hover {
.pve-right-active:hover {
// background-image: none;
}
.go-to-btn::before {
.go-to-btn::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("@/assets/img/home/go-to-btn-active.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease-in-out;
right: 0;
top: 0;
bottom: 0;
background: url("@/assets/img/home/go-to-btn-active.png") no-repeat;
background-size: 100% 100%;
transform: scaleX(1, 1);
opacity: 1;
// z-index: -1;
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transition: all 0.3s ease-in;
}
.go-to-btn:hover::before {
transform: scaleX(1);
.go-to-btn: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: all 0.3s ease-in;
transform: scaleX(1, 1);
}
.slogan {
font-size: 18px;

4
src/components/home/GameIntroduction.vue
View File

@ -26,10 +26,6 @@
</XyzTransitionGroup>
</div>
</transition>
<div class="btn">
<loginButton></loginButton>
</div>
</div>
<div class="game-bg">
<img src="@/assets/img/home/weapon-bg.png" alt="" />

202
src/components/home/WhatCebg.vue
View File

@ -286,40 +286,37 @@ function handleScroll() {
background-repeat: no-repeat;
background-size: cover;
// border: 1px solid #333;
overflow: hidden;
transition: background-image 0.3s ease-in-out;
// overflow: hidden;
transition: background-image 0.3s;
}
.pve-left:hover {
// background-image: none;
}
.pve-left::before {
.pve-left::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("@/assets/img/home/pve-btn-active.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scaleX(0);
transform-origin: center;
opacity: 0;
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
transition: transform 0.3s ease-in-out;
right: 0;
top: 0;
bottom: 0;
background: url("@/assets/img/home/pve-btn-active.png") no-repeat;
background-size: 100% 100%;
transform: scaleX(1,1);
opacity: 1;
// z-index: -1;
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transition: all 0.25s ease-in;
}
.pve-left:hover::before {
.pve-left:hover:after {
opacity: 1;
clip-path: polygon(
0px 0,
100% 0,
100% calc(100% - 0px),
calc(100% - 0px) 100%,
0px 100%,
0 0px
calc(50% + 0px) calc(50% + 150px),
calc(50% + 150px) calc(50% + 0px),
calc(50% + 0px) calc(50% - 150px),
calc(50% - 150px) calc(50% - 0px)
);
transform: scaleX(1);
transition: all 0.25s ease-in;
transform: scaleX(1,1);
}
.pve-left-active {
margin-top: 30px;
@ -333,25 +330,33 @@ function handleScroll() {
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
transition: background-image 0.3s ease-in-out;
transition: background-image 1s ease-in-out;
}
.pve-left-active::before {
.pve-left-active::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("@/assets/img/home/pve-btn.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease-in-out;
right: 0;
top: 0;
bottom: 0;
background: url("@/assets/img/home/pve-btn.png") no-repeat;
background-size:100% 100%;
opacity: 0;
transform: scaleX(1.1);
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transition: transform 0.25s ease-in-out;
}
.pve-left-active:hover::before {
transform: scaleX(1);
.pve-left-active: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;
transform: scaleX(1,1);
transition: all 0.25s ease-in;
}
.pve-right {
// margin-top: 30px;
@ -363,58 +368,117 @@ function handleScroll() {
background-repeat: no-repeat;
background-size: cover;
// border: 1px solid #333;
overflow: hidden;
transition: background-image 0.3s ease-in-out;
// overflow: hidden;
transition: background-image 1s;
}
.pve-right::before {
.pve-right::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("@/assets/img/home/pvp-btn-active.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease-in-out;
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::before {
transform: scaleX(1);
.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-active {
// margin-top: 30px;
width: 196px;
height: 62px;
position: relative;
margin-right: 30px;
color: #263641;
cursor: pointer;
background-image: url("@/assets/img/home/pvp-btn.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
transition: background-image 0.3s ease-in-out;
// border: 1px solid #333;
// overflow: hidden;
transition: background-image 0.3s;
}
.pve-right-active::before {
.pve-right-active:hover {
// background-image: none;
}
.pve-right-active::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("@/assets/img/home/pvp-btn-active.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease-in-out;
}
.pve-right-active:hover::before {
transform: scaleX(1);
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;
// z-index: -1;
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transition: all 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: all 0.3s ease-in;
transform: scaleX(1,1);
}
.gameplay-content {
display: flex;