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

fix

Browse Source
This commit is contained in:
huangjinming 2023-03-16 19:50:16 +08:00
parent 3d6c3aceba
commit df23eee7f0
6 changed files with 103 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mobile/src/components/about/IntroductionBanner.vue
View File

@ -39,7 +39,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
padding-top: 120px; padding-top: 120px;
background-color: #265d90; background: linear-gradient(180deg, #286397, #17385F);
padding-bottom: 317px; padding-bottom: 317px;
position: relative; position: relative;
.banner-boder { .banner-boder {
@ -59,7 +59,7 @@
right: 0; right: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -10; // z-index: -10;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;

2
mobile/src/components/global/YouTubeVideo.vue
View File

@ -23,7 +23,7 @@ onBeforeUnmount(() => {
const getVideoId = () => { const getVideoId = () => {
try { try {
const url = new URL(props.src); const url = new URL(props.src);
console.log(url,'urlurlurl'); // console.log(url,'urlurlurl');
return url.searchParams.get("v") || ""; return url.searchParams.get("v") || "";
} catch (error) { } catch (error) {
return ""; return "";

8
mobile/src/components/home/Banner.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="banner"> <div class="banner">
<div class="content"> <div class="content">
<div class="title"><img src="../../assets/img/mobile-home/banner-slogan.png" alt=""></div> <div class="title"><img src="@/assets/img/mobile-home/banner-slogan.png" alt=""></div>
<div class="download-btns"> <div class="download-btns">
<div class="andriod"> <div class="andriod">
<img src="../../assets/img/mobile-home/andriod.png" alt="" /> <img src="@/assets/img/mobile-home/andriod.png" alt="" />
</div> </div>
<div class="apple"> <div class="apple">
<img src="../../assets/img/mobile-home/apple.png" alt="" /> <img src="@/assets/img/mobile-home/apple.png" alt="" />
</div> </div>
<div class="google"> <div class="google">
<img src="../../assets/img/mobile-home/google.png" alt="" /> <img src="@/assets/img/mobile-home/google.png" alt="" />
</div> </div>
</div> </div>
</div> </div>

140
mobile/src/components/home/Gameplay.vue
View File

@ -11,7 +11,7 @@
</div> </div>
<div class="pve"> <div class="pve">
<div <div
:class="isPveTab == true ? 'pve-left' : 'pve-left-active'" :class="isPveTab == true ? 'pvp-left' : 'pvp-left-active'"
@click="handTabActive(true)" @click="handTabActive(true)"
> >
<div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'"> <div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
@ -110,7 +110,11 @@ const handTabActive = (isTab) => {
margin-top: 70px; margin-top: 70px;
margin-left: 75px; margin-left: 75px;
// justify-content: flex-end; // justify-content: flex-end;
.pve-left {
}
.pvp-left {
// margin-top: 30px; // margin-top: 30px;
width: 274px; width: 274px;
height: 86px; height: 86px;
@ -118,7 +122,7 @@ const handTabActive = (isTab) => {
margin-right: 30px; margin-right: 30px;
color: #263641; color: #263641;
cursor: pointer; cursor: pointer;
background-image: url("@/assets/img/home/pve-btn.png"); background-image: url("@/assets/img/mobile-home/pve-btn.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -126,25 +130,25 @@ const handTabActive = (isTab) => {
// overflow: hidden; // overflow: hidden;
transition: background-image 0.3s; transition: background-image 0.3s;
} }
.pve-left:hover { .pvp-left:hover {
// background-image: none; // background-image: none;
} }
.pve-left::after { .pvp-left::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background: url("@/assets/img/home/pve-btn-active.png") no-repeat; background: url("@/assets/img/home/pvp-btn-active.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
transform: scaleX(1, 1); transform: scaleX(1, 1);
opacity: 1; opacity: 1;
// z-index: -1; // z-index: -1;
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transition: all 0.25s ease-in; transition: all 0.3s ease-in;
} }
.pve-left:hover:after { .pvp-left:hover:after {
opacity: 1; opacity: 1;
clip-path: polygon( clip-path: polygon(
calc(50% + 0px) calc(50% + 250px), calc(50% + 0px) calc(50% + 250px),
@ -152,125 +156,53 @@ const handTabActive = (isTab) => {
calc(50% + 0px) calc(50% - 250px), calc(50% + 0px) calc(50% - 250px),
calc(50% - 250px) calc(50% - 0px) calc(50% - 250px) calc(50% - 0px)
); );
transition: all 0.25s ease-in; transition: all 0.3s ease-in;
transform: scaleX(1, 1); transform: scaleX(1, 1);
} }
.pve-left-active { .pvp-left-active {
// margin-top: 30px; // margin-top: 30px;
width: 274px; width: 274px;
height: 86px; height: 86px;
margin-right: 30px;
position: relative; position: relative;
margin-right: 30px;
color: #263641;
cursor: pointer; cursor: pointer;
background-image: url("@/assets/img/home/pve-btn-active.png"); background-image: url("@/assets/img/home/pvp-btn-active.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 1s ease-in-out; // overflow: hidden;
transition: background-image 0.3s;
} }
.pve-left-active::after { .pvp-left-active:hover {
// background-image: none;
}
.pvp-left-active::after {
content: ""; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background: url("@/assets/img/home/pve-btn.png") no-repeat; background: url("@/assets/img/mobile-home/pve-btn.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
opacity: 0; transform: scaleX(1, 1);
transform: scaleX(1.1); opacity: 1;
// z-index: -1;
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
transition: all 0.3s ease-in;
transition: transform 0.25s ease-in-out;
} }
.pve-left-active:hover::after { .pvp-left-active:hover:after {
opacity: 1;
clip-path: polygon( clip-path: polygon(
calc(50% + 0px) calc(50% + 250px), calc(50% + 0px) calc(50% + 250px),
calc(50% + 250px) calc(50% + 0px), calc(50% + 250px) calc(50% + 0px),
calc(50% + 0px) calc(50% - 250px), calc(50% + 0px) calc(50% - 250px),
calc(50% - 250px) calc(50% - 0px) calc(50% - 250px) calc(50% - 0px)
); );
opacity: 1; transition: all 0.3s ease-in;
transform: scaleX(1, 1); 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 { .pve-right {
// margin-top: 30px; // margin-top: 30px;
@ -280,7 +212,7 @@ const handTabActive = (isTab) => {
margin-right: 30px; margin-right: 30px;
color: #263641; color: #263641;
cursor: pointer; cursor: pointer;
background-image: url("@/assets/img/home/pvp-btn.png"); background-image: url("@/assets/img/home/pve-btn.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -298,7 +230,7 @@ const handTabActive = (isTab) => {
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background: url("@/assets/img/home/pvp-btn-active.png") no-repeat; background: url("@/assets/img/home/pve-btn-active.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
transform: scaleX(1, 1); transform: scaleX(1, 1);
opacity: 1; opacity: 1;
@ -325,7 +257,7 @@ const handTabActive = (isTab) => {
margin-right: 30px; margin-right: 30px;
color: #263641; color: #263641;
cursor: pointer; cursor: pointer;
background-image: url("@/assets/img/home/pvp-btn-active.png"); background-image: url("@/assets/img/home/pve-btn-active.png");
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -343,7 +275,7 @@ const handTabActive = (isTab) => {
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
background: url("@/assets/img/home/pvp-btn.png") no-repeat; background: url("@/assets/img/home/pve-btn.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
transform: scaleX(1, 1); transform: scaleX(1, 1);
opacity: 1; opacity: 1;

10
mobile/src/components/home/HeroSweiper.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<div class="hero"> <div class="hero">
<div class="hero-bg"><img src="@/assets/img/mobile-home/hero-bg.png" alt="" /></div> <div class="hero-bg">
<img src="@/assets/img/mobile-home/hero-bg.png" alt="" />
</div>
<div class="title">hero</div> <div class="title">hero</div>
<div class="hero-content"> <div class="hero-content">
<swiper <swiper
@ -43,8 +45,8 @@ import { ref, onMounted } from "vue";
import { HeroList } from "@/configs/information"; import { HeroList } from "@/configs/information";
import "swiper/css"; import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import { Navigation, Autoplay} from "swiper"; import { Navigation, Autoplay } from "swiper";
const modules = ref([Navigation,Autoplay]); const modules = ref([Navigation, Autoplay]);
const heroAnimationActive = ref(false); const heroAnimationActive = ref(false);
const swiperIndex = ref(null); const swiperIndex = ref(null);
const activeIndex = ref(0); const activeIndex = ref(0);
@ -86,6 +88,8 @@ onMounted(() => {
} }
} }
.hero-content { .hero-content {
width: 707px;
margin: 0 auto;
// // height: 918px; // // height: 918px;
// background: #90e2e9; // background: #90e2e9;
} }

6
mobile/src/views/HomeView.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="container"> <div class="container">
<!-- <NavBar></NavBar> -->
<div class="content"> <div class="content">
<Banner></Banner> <Banner></Banner>
<WhatCebg></WhatCebg> <WhatCebg></WhatCebg>
@ -9,13 +8,10 @@
<WeaponSwiper></WeaponSwiper> <WeaponSwiper></WeaponSwiper>
<Chip></Chip> <Chip></Chip>
<GameGallerp></GameGallerp> <GameGallerp></GameGallerp>
<!-- <Grid9Panel></Grid9Panel> -->
</div> </div>
<!-- <FooterBar></FooterBar> -->
</div> </div>
</template> </template>
<script setup> <script setup>
import NavBar from "@/components/layout/NavBar.vue";
import Banner from "@/components/home/Banner.vue"; import Banner from "@/components/home/Banner.vue";
import WhatCebg from "@/components/home/WhatCebg.vue"; import WhatCebg from "@/components/home/WhatCebg.vue";
import Gameplay from "@/components/home/Gameplay.vue"; import Gameplay from "@/components/home/Gameplay.vue";
@ -23,8 +19,6 @@ import Chip from "@/components/home/Chip.vue";
import WeaponSwiper from "@/components/home/WeaponSwiper.vue"; import WeaponSwiper from "@/components/home/WeaponSwiper.vue";
import HeroSweiper from "@/components/home/HeroSweiper.vue"; import HeroSweiper from "@/components/home/HeroSweiper.vue";
import GameGallerp from "@/components/home/GameGallerp.vue"; import GameGallerp from "@/components/home/GameGallerp.vue";
import FooterBar from "@/components/layout/FooterBar.vue";
import Grid9Panel from "@/components/Grid9Panel.vue";
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {