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-slide>
</swiper> </swiper>
<div class="swiper-btn-prev" @click="handSlidePrev"> <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>
<div class="swiper-btn-next" @click="handSlideNext"> <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> </div>
</div> </div>
@ -142,7 +142,7 @@ const handSlideNext = () => {
width: 30px; width: 30px;
height: 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; left center;
} }
/*显示当前活动块的图片*/ /*显示当前活动块的图片*/
@ -150,7 +150,7 @@ const handSlideNext = () => {
width: 30px; width: 30px;
height: 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; no-repeat right center;
} }
} }

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

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

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

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