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

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

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

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

@ -1,16 +1,16 @@
<template>
<div class="banner">
<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="andriod">
<img src="../../assets/img/mobile-home/andriod.png" alt="" />
<img src="@/assets/img/mobile-home/andriod.png" alt="" />
</div>
<div class="apple">
<img src="../../assets/img/mobile-home/apple.png" alt="" />
<img src="@/assets/img/mobile-home/apple.png" alt="" />
</div>
<div class="google">
<img src="../../assets/img/mobile-home/google.png" alt="" />
<img src="@/assets/img/mobile-home/google.png" alt="" />
</div>
</div>
</div>

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

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

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

@ -1,6 +1,8 @@
<template>
<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="hero-content">
<swiper
@ -43,8 +45,8 @@ import { ref, onMounted } from "vue";
import { HeroList } from "@/configs/information";
import "swiper/css";
import "swiper/css/navigation";
import { Navigation, Autoplay} from "swiper";
const modules = ref([Navigation,Autoplay]);
import { Navigation, Autoplay } from "swiper";
const modules = ref([Navigation, Autoplay]);
const heroAnimationActive = ref(false);
const swiperIndex = ref(null);
const activeIndex = ref(0);
@ -86,6 +88,8 @@ onMounted(() => {
}
}
.hero-content {
width: 707px;
margin: 0 auto;
// // height: 918px;
// background: #90e2e9;
}

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

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