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

new

Browse Source
This commit is contained in:
huangjinming 2023-03-01 16:38:45 +08:00
parent 4ed30964ee
commit 1350a9cfef
8 changed files with 178 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/home/gallerp-bg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 493 KiB

After

Width:  |  Height:  |  Size: 448 KiB

10
src/components/home/Banner.vue
View File

@ -8,7 +8,9 @@
</div>
<div class="download-center">
<div class="download-item">
<img src="@/assets/img/home/google.png" alt="" />
<a href="https://play.google.com/store/apps/details?id=io.metamask">
<img src="@/assets/img/home/google.png" alt=""
/></a>
</div>
<div class="download-item">
<img src="@/assets/img/home/andriod.png" alt="" />
@ -34,14 +36,14 @@
</template>
<script setup>
import Slogan from './Slogan.vue'
import Slogan from "./Slogan.vue";
</script>
<style lang="scss" scoped>
.banner {
width: 100%;
height: 100vh;
// height: 937px;
height: 937px;
// padding-top: 60px;
// background: url("@/assets/img/home/banner-out.jpg") no-repeat;
// background-size: 100% 100%;
@ -134,7 +136,7 @@ import Slogan from './Slogan.vue'
img {
width: 100%;
height: 100%;
object-fit: cover;
object-fit: cover;
}
}
.boder-bottom {

6
src/components/home/FooterBar.vue
View File

@ -82,13 +82,13 @@
<div class="footer-bottom">
<div class="mailbox">COPYRIGHT © CEBG.ALL RIGHTS RESERVED.</div>
<div class="follow">
<a href="#" class="twiter">
<a href="https://twitter.com/CEBG_GAME" class="twiter">
<img src="@/assets/svg/twitter.svg" alt=""
/></a>
<a href="#" class="telegram">
<a href="https://t.me/CEBG_official" class="telegram">
<img src="@/assets/svg/telegram.svg" alt=""
/></a>
<a href="#" class="dosccord">
<a href="https://discord.gg/8dWX6jpcME" class="dosccord">
<img src="@/assets/svg/discord.svg" alt=""
/></a>
</div>

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

@ -88,6 +88,9 @@
<img src="@/assets/img/home/viod-boder.png" alt="" />
</div>
</div>
<div>
<iframe :src="videoSrc" frameborder='0' allowfullscreen="true" scrolling="no" width="100%" height="100%"></iframe>
</div>
<VideoModal ref="videoModal" :video-src="videoSrc"> </VideoModal>
</div>
</template>
@ -155,7 +158,26 @@ function handleScroll() {
}
const fullscreen = ref(false);
function toggleFullScreen() {
if (this.isFullScreen) {
// 退出全屏
document.exitFullscreen();
this.isFullScreen = false;
} else {
// 进入全屏
const de = document.documentElement;
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
}
this.isFullScreen = true;
}
}
function openFullscreen() {
const elem = document.documentElement;
@ -207,6 +229,12 @@ const handleClick = (item) => {
.gallerp-bottom-boder {
position: absolute;
bottom: 0;
width: 100%;
// height: 100%;
img {
width: 100%;
height: 100%;
}
}
.title {
position: absolute;

26
src/components/home/VideoModal.vue
View File

@ -4,13 +4,15 @@
@cancel="handleCancel"
@ok="handleOk"
:footer="null"
width="100vw"
width="70%"
>
<div class="video-content">
<video
ref="videoPlayer"
:src="videoSrc"
controls
width="1500"
height="600"
preload="auto"
@canplay="handleCanplay"
></video>
@ -44,19 +46,21 @@ function open() {
</script>
<style lang="scss" scoped>
.video-content {
position: relative;
left: 0;
top: 0;
bottom: 0;
right: 0;
video{
object-fit: cover;
}
}
:deep(.ant-modal) {
position: relative;
left: 0;
top: 0;
bottom: 0;
right: 0;
video {
object-fit: cover;
}
}
:deep(.ant-modal) {
width: 100vw !important;
max-width: 100vw !important;
top: 0;
background-color: black !important;;
opacity: 0.6;
padding-bottom: 0;
}

51
src/components/home/Weapon3DLoader.vue
View File

@ -1,29 +1,31 @@
<template>
<vue3dLoader
:filePath="filePath"
height="500"
width="1250"
:controlsOptions="{
enablePan:false,
enableZoom:false,
enableRotate:true
}"
:backgroundColor="'#000000'"
:backgroundAlpha="0.0"
:rotation="rot"
:lights="lights"
/>
<div class="container">
<vue3dLoader
:filePath="filePath"
height="500"
width="1440"
:controlsOptions="{
enablePan: false,
enableZoom: false,
enableRotate: true,
}"
:backgroundColor="'#000000'"
:backgroundAlpha="0.0"
:rotation="rot"
:lights="lights"
/>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { useRafFn } from '@vueuse/core'
import { ref, computed } from "vue";
import { useRafFn } from "@vueuse/core";
const props = defineProps(['filePath'])
const rot = ref({ x:0, y:Math.PI / 2, z:0 });
const props = defineProps(["filePath"]);
const rot = ref({ x: 0, y: Math.PI / 2, z: 0 });
const router = useRafFn(()=>{
rot.value = { x:0, y:rot.value.y-0.01, z:0 }
const router = useRafFn(() => {
rot.value = { x: 0, y: rot.value.y - 0.01, z: 0 };
// console.log('hh s')
});
@ -51,4 +53,11 @@ const lights = ref([
position: { x: 200, y: -200, z: 100 },
},
]);
</script>
</script>
<style lang="scss" scoped>
.viewer-container{
width: 100%;
display: flex;
justify-content: center;
}
</style>

9
src/components/home/WeaponSwiper.vue
View File

@ -120,10 +120,12 @@ function test(index, sc) {
}
.big_weapon {
width: 1136px;
margin-left: 156px;
width: 1440px;
// margin-left: 156px;
height: 400px;
margin: 0 auto;
display: flex;
justify-content: center;
// position: absolute;
// left: 156px;
// bottom: -460px;
@ -135,7 +137,8 @@ function test(index, sc) {
.thumbs_weapon_container {
user-select: none;
position: relative;
padding: 0 40px;
// padding: 0 40px;
width: 1440px;
height: 200px;
.swiper-button-prev::after {

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

@ -49,7 +49,7 @@
</div>
<div class="pve">
<div
:class="isPveTab == true ? 'pve-left-active' : 'pve-left'"
:class="isPveTab == true ? 'pve-left' : 'pve-left-active'"
@click="handTabActive(true)"
>
<div :class="isPveTab == true ? 'in-rect-active' : 'in-rect'">
@ -57,7 +57,7 @@
</div>
</div>
<div
:class="isPveTab == false ? 'pve-right-active' : 'pve-right'"
:class="isPveTab == true ? 'pve-right-active' : 'pve-right'"
@click="handTabActive(false)"
>
<div
@ -109,7 +109,7 @@ const isPveTab = ref(false);
const positionY1 = ref(0); //背景Y轴偏移量
const handTabActive = (isTab) => {
isPveTab.value = isTab;
isPveTab.value = !isPveTab.value
};
onMounted(() => {
window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
@ -321,7 +321,7 @@ function handleScroll() {
transform: scaleX(1, 1);
}
.pve-left-active {
margin-top: 30px;
// margin-top: 30px;
width: 196px;
height: 62px;
margin-right: 30px;
@ -360,44 +360,44 @@ function handleScroll() {
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 {
// // 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;
@ -437,7 +437,7 @@ function handleScroll() {
// transform: scaleX(1,1);
// }
}
.pve-right-active {
.pve-right {
// margin-top: 30px;
width: 196px;
height: 62px;
@ -453,6 +453,51 @@ function handleScroll() {
// overflow: hidden;
transition: background-image 0.3s;
}
.pve-right:hover {
// background-image: none;
}
.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%;
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: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);
}
.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-active.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
// border: 1px solid #333;
// overflow: hidden;
transition: background-image 0.3s;
}
.pve-right-active:hover {
// background-image: none;
}
@ -463,7 +508,7 @@ function handleScroll() {
right: 0;
top: 0;
bottom: 0;
background: url("@/assets/img/home/pvp-btn-active.png") no-repeat;
background: url("@/assets/img/home/pvp-btn.png") no-repeat;
background-size: 100% 100%;
transform: scaleX(1, 1);
opacity: 1;