newcebg
This commit is contained in:
huangjinming
parent
26b8206abf
commit
241fd941f6
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 320 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 MiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 456 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 208 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 362 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 MiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 235 KiB |
BIN
src/assets/img/home/weapon-bg.png
Normal file
BIN
src/assets/img/home/weapon-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
82
src/components/BgSwitchButton.vue
Normal file
82
src/components/BgSwitchButton.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<button
|
||||
class="background-switch-button"
|
||||
:style="buttonStyle"
|
||||
@mouseover="handleMouseOver"
|
||||
@mouseleave="handleMouseLeave"
|
||||
>
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, defineProps } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
defaultImage: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
hoverImage: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const isHover = ref(false);
|
||||
|
||||
const buttonStyle = computed(() => {
|
||||
return {
|
||||
backgroundImage: isHover.value
|
||||
? `url(${props.hoverImage})`
|
||||
: `url(${props.defaultImage})`,
|
||||
};
|
||||
});
|
||||
|
||||
const handleMouseOver = () => {
|
||||
isHover.value = true;
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
isHover.value = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.background-switch-button {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
width: 170px;
|
||||
height: 60px;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
border: 1px solid #333;
|
||||
overflow: hidden;
|
||||
transition: background-image 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.background-switch-button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transform: scaleX(0);
|
||||
z-index: 0;
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.background-switch-button:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.background-switch-button:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
</style>
|
||||
@ -46,7 +46,7 @@
|
||||
<!-- <div class="chip-top"></div> -->
|
||||
</div>
|
||||
<div class="chip-bg">
|
||||
<img src="../assets/img/home/chip/chip-bg.jpg" alt="" />
|
||||
<img src="../assets/img/home/weapon-bg.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
HERO
|
||||
</div>
|
||||
<div class="hero-bg">
|
||||
<img src="../assets/img/home/hero-bg.jpg" alt="" />
|
||||
<img src="../assets/img/home/weapon-bg.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="centent-right"></div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<vue3dLoader
|
||||
:filePath="filePath"
|
||||
height="400"
|
||||
width="550"
|
||||
width="1250"
|
||||
:controlsOptions="{
|
||||
enablePan:false,
|
||||
enableZoom:false,
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
<WeaponSwiper></WeaponSwiper>
|
||||
</div>
|
||||
<div class="weapon-bg">
|
||||
<img src="../assets/img/home/weapon-bg.jpg" alt="" />
|
||||
<img src="../assets/img/home/weapon-bg.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,8 +13,8 @@
|
||||
}"
|
||||
|
||||
>
|
||||
<SwiperSlide v-for="(slideContent, index) in weaponList" :key="index">
|
||||
<img class="weapon_big_image" :src="slideContent.img" />
|
||||
<SwiperSlide v-for="(slideContent, index) in weaponListBig" :key="index">
|
||||
<Weapon3dLoader :filePath="slideContent.url"></Weapon3dLoader>
|
||||
</SwiperSlide>
|
||||
</swiper>
|
||||
</div>
|
||||
@ -56,6 +56,7 @@
|
||||
import { ref, reactive } from "vue";
|
||||
import { Thumbs, FreeMode, Navigation } from "swiper";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import Weapon3dLoader from "./Weapon3dLoader.vue";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/thumbs";
|
||||
@ -70,7 +71,15 @@ const weaponList = reactive([
|
||||
{ id: 6, img: require("../assets/img/home/weapon/006.png") },
|
||||
{ id: 7, img: require("../assets/img/home/weapon/007.png") },
|
||||
]);
|
||||
|
||||
const weaponListBig = reactive([
|
||||
{ id: 1, url: '/70001.gltf' },
|
||||
{ id: 2, url: '/70002.gltf' },
|
||||
{ id: 3, url: '/70003.gltf' },
|
||||
{ id: 4, url: '/70004.gltf' },
|
||||
{ id: 5, url: '/70005.gltf' },
|
||||
{ id: 6, url: '/70006.gltf' },
|
||||
{ id: 7, url: '/70007.gltf' },
|
||||
]);
|
||||
const modules = [FreeMode, Navigation, Thumbs];
|
||||
const weaponSwiper = ref(null);
|
||||
const weaponThumbsSwiper = ref(null);
|
||||
|
||||
@ -53,26 +53,29 @@
|
||||
<div class="gameplay-img">
|
||||
<img src="../assets/img/home/gameplay.png" alt="" />
|
||||
</div>
|
||||
<div class="pve">
|
||||
<div
|
||||
:class="isPveTab == true ? 'pve-left-active' : 'pve-left'"
|
||||
@click="handTabActive(true)"
|
||||
>
|
||||
<div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
|
||||
<!-- PVP -->
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="isPveTab == false ? 'pve-right-active' : 'pve-right'"
|
||||
@click="handTabActive(false)"
|
||||
>
|
||||
<div :class="isPveTab == false ? 'in-rect-active' : 'in-rect'">
|
||||
<!-- PVE -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gameplay-content">
|
||||
<div class="gameplay-right">
|
||||
<div class="pve">
|
||||
<div
|
||||
:class="isPveTab == true ? 'pve-left-active' : 'pve-left'"
|
||||
@click="handTabActive(true)"
|
||||
>
|
||||
<div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
|
||||
<!-- PVP -->
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:class="isPveTab == false ? 'pve-right-active' : 'pve-right'"
|
||||
@click="handTabActive(false)"
|
||||
>
|
||||
<div
|
||||
:class="isPveTab == false ? 'in-rect-active' : 'in-rect'"
|
||||
>
|
||||
<!-- PVE -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pve-content">
|
||||
<div class="slogan">
|
||||
Each battle contains 40 players by matching through the ELO
|
||||
@ -106,7 +109,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
|
||||
import BgSwitchButton from "../components/BgSwitchButton.vue";
|
||||
const Y1 = ref(0);
|
||||
const ratio = ref(0.2); //视差偏移率
|
||||
const isPveTab = ref(false);
|
||||
@ -159,15 +162,14 @@ function handleScroll() {
|
||||
}
|
||||
}
|
||||
.cebg-game {
|
||||
font-size: 240px;
|
||||
font-family: "BigJohn";
|
||||
|
||||
color: #020304;
|
||||
line-height: 30px;
|
||||
font-size: 180px;
|
||||
font-family: "Big John";
|
||||
font-weight: 400;
|
||||
color: #16252d;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
top: 45px;
|
||||
top: -85px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
|
||||
@ -180,12 +182,11 @@ function handleScroll() {
|
||||
.gameplay-name {
|
||||
position: absolute;
|
||||
text-transform: uppercase;
|
||||
top: 400px;
|
||||
right: 0;
|
||||
top: 500px;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
font-size: 240px;
|
||||
font-size: 180px;
|
||||
font-family: "BigJohn";
|
||||
|
||||
color: #3e7ea6;
|
||||
line-height: 30px;
|
||||
opacity: 0.4;
|
||||
@ -197,8 +198,8 @@ function handleScroll() {
|
||||
|
||||
.content {
|
||||
width: 1440px;
|
||||
padding-top: 152px;
|
||||
padding-bottom: 226px;
|
||||
padding-top: 62px;
|
||||
padding-bottom:168px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
@ -210,7 +211,7 @@ function handleScroll() {
|
||||
display: flex;
|
||||
.monster {
|
||||
position: absolute;
|
||||
top: 157px;
|
||||
top: 20px;
|
||||
left: -220px;
|
||||
z-index: 2;
|
||||
width: 584px;
|
||||
@ -223,8 +224,8 @@ function handleScroll() {
|
||||
.content-right {
|
||||
z-index: 2;
|
||||
width: 792px;
|
||||
padding-left: 484px;
|
||||
// margin: 0 auto;
|
||||
// padding-left: 484px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 202px;
|
||||
text-align: center;
|
||||
.title {
|
||||
@ -244,10 +245,10 @@ function handleScroll() {
|
||||
// height: 168px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #daf1fa;
|
||||
color: #ffffff;
|
||||
}
|
||||
.what-cebg-img {
|
||||
width: 100%;
|
||||
@ -269,13 +270,11 @@ function handleScroll() {
|
||||
flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
.title {
|
||||
width: 544px;
|
||||
// width: 221px;
|
||||
// height: 29px;
|
||||
font-size: 88px;
|
||||
// width: 544px;
|
||||
font-size: 44px;
|
||||
font-family: "Big John";
|
||||
|
||||
color: #1c3045;
|
||||
font-weight: 400;
|
||||
color: #010001;
|
||||
}
|
||||
.gameplay-img {
|
||||
width: 50%;
|
||||
@ -293,81 +292,134 @@ function handleScroll() {
|
||||
// justify-content: flex-end;
|
||||
.pve-left {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
width: 196px;
|
||||
height: 62px;
|
||||
font-size: 28px;
|
||||
font-family: "MEurostile";
|
||||
position: relative;
|
||||
margin-right: 30px;
|
||||
color: #263641;
|
||||
cursor: pointer;
|
||||
padding: 2px; //边框的宽度
|
||||
background: url("../assets/img/home/pve-btn.png") no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("../assets/img/home/pve-btn.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
// border: 1px solid #333;
|
||||
overflow: hidden;
|
||||
transition: background-image 0.3s ease-in-out;
|
||||
}
|
||||
.pve-left:hover {
|
||||
// background-image: none;
|
||||
}
|
||||
.pve-left::before {
|
||||
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;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
}
|
||||
.pve-left:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.pve-left-active {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
width: 196px;
|
||||
height: 62px;
|
||||
font-size: 28px;
|
||||
font-family: "MEurostile";
|
||||
margin-right: 30px;
|
||||
color: #263641;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 2px; //边框的宽度
|
||||
background: url("../assets/img/home/pve-btn-active.png") no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url("../assets/img/home/pve-btn-active.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
// .in-rect-active {
|
||||
// background: url('../assets/img/home/PVP.png')no-repeat;
|
||||
// background-size: contain;
|
||||
// }
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
transition: background-image 0.3s ease-in-out;
|
||||
}
|
||||
.pve-left-active::before {
|
||||
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;
|
||||
}
|
||||
.pve-left-active:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.pve-right {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
font-family: "MEurostile";
|
||||
|
||||
color: #263641;
|
||||
width: 196px;
|
||||
height: 62px;
|
||||
padding: 2px;
|
||||
background: url("../assets/img/home/pvp-btn.png") no-repeat;
|
||||
background-size: contain;
|
||||
// transform: rotate(180deg);
|
||||
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 0.3s ease-in-out;
|
||||
}
|
||||
.pve-right::before {
|
||||
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:hover::before {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
.pve-right-active {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28px;
|
||||
font-family: "MEurostile";
|
||||
|
||||
color: #263641;
|
||||
width: 196px;
|
||||
height: 62px;
|
||||
padding: 2px;
|
||||
background: url("../assets/img/home/pvp-btn-active.png") no-repeat;
|
||||
background-size: contain;
|
||||
// transform: rotate(180deg);
|
||||
position: relative;
|
||||
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;
|
||||
}
|
||||
|
||||
.pve-right-active::before {
|
||||
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);
|
||||
}
|
||||
}
|
||||
.gameplay-content {
|
||||
@ -375,8 +427,8 @@ function handleScroll() {
|
||||
// background: #59a2d0;
|
||||
.gameplay-left {
|
||||
.pve-img {
|
||||
width: 732px;
|
||||
height: 336px;
|
||||
width: 710px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
.gameplay-right {
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="hero-left">
|
||||
<div class="hero-name">HERO</div>
|
||||
<!-- <div class="hero-name">HERO</div> -->
|
||||
<div class="hero-boder">
|
||||
<img src="../assets/img/home/hero/hero-boder.png" alt="" />
|
||||
<!-- <img src="../assets/img/home/hero/hero-boder.png" alt="" /> -->
|
||||
</div>
|
||||
<div class="hero-slogan">
|
||||
CEBG has more than 8 heroes for players to choose, and each of them has
|
||||
<!-- CEBG has more than 8 heroes for players to choose, and each of them has
|
||||
a distinguishing design, skills, and gameplay. All the entry-level
|
||||
heroes are free for all the players, so there is no threshold to this
|
||||
game.
|
||||
game. -->
|
||||
<XyzTransitionGroup class="item-group" xyz="fade down-100% back-5">
|
||||
<div
|
||||
:class="
|
||||
@ -165,12 +165,12 @@
|
||||
<img class="hero_big_image" :src="slideContent.img" />
|
||||
</SwiperSlide>
|
||||
</swiper>
|
||||
<div
|
||||
<!-- <div
|
||||
class="hero-bg"
|
||||
:style="{ transform: 'rotate(' + rotate + 'deg)' }"
|
||||
>
|
||||
<img src="../assets/img/home/hero-swiper-bg.png" alt="" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
class="swiper-btn2-prev"
|
||||
:class="activeIndex == 0 ? 'swiper-button-disabled' : ''"
|
||||
@ -301,33 +301,33 @@ function test(index, sc) {
|
||||
color: #1c3045;
|
||||
}
|
||||
.hero-boder {
|
||||
padding-top: 28px;
|
||||
padding-bottom: 29px;
|
||||
width: 649px;
|
||||
height: 25px;
|
||||
// padding-top: 28px;
|
||||
// padding-bottom: 29px;
|
||||
// width: 649px;
|
||||
// height: 25px;
|
||||
}
|
||||
.hero-slogan {
|
||||
width: 617px;
|
||||
height: 82px;
|
||||
margin-left: 20px;
|
||||
font-size: 18px;
|
||||
font-family: Arial;
|
||||
font-weight: bold;
|
||||
color: #1d2931;
|
||||
line-height: 32px;
|
||||
// width: 617px;
|
||||
// height: 82px;
|
||||
// margin-left: 20px;
|
||||
// font-size: 18px;
|
||||
// font-family: Arial;
|
||||
// font-weight: bold;
|
||||
// color: #1d2931;
|
||||
// line-height: 32px;
|
||||
// padding-bottom: 244px;
|
||||
}
|
||||
.miffy-container {
|
||||
background: url("../assets/img/home/miffy-bg.png") no-repeat;
|
||||
background-size: contain;
|
||||
opacity: 0;
|
||||
top: 890px;
|
||||
top: 590px;
|
||||
position: absolute;
|
||||
// transform: translateY(100px) translateZ(0px);
|
||||
}
|
||||
.miffy-container-active {
|
||||
opacity: 1;
|
||||
top: 890px;
|
||||
top: 590px;
|
||||
position: absolute;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user