This commit is contained in:
huangjinming 2023-03-10 13:12:28 +08:00
parent 823c5727df
commit f22a036474
30 changed files with 93 additions and 38 deletions

View File

@ -7,7 +7,7 @@ module.exports = {
propList: ['*'], // 能转化为vw的属性列表
viewportUnit: 'vw', // 希望使用的视口单位
fontViewportUnit: 'vw', // 字体使用的视口单位
selectorBlackList: ['.bg-middle'], // 需要忽略的CSS选择器不会转为视口单位使用原有的px等单位。
selectorBlackList: [''], // 需要忽略的CSS选择器不会转为视口单位使用原有的px等单位。
minPixelValue: 1, // 设置最小的转换数值如果为1的话只有大于1的值会被转换
mediaQuery: false, // 媒体查询里的单位是否需要转换单位
replace: true, // 是否直接更换属性值,而不添加备用属性

View File

Before

Width:  |  Height:  |  Size: 219 B

After

Width:  |  Height:  |  Size: 219 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 219 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 462 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 302 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 590 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 632 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 338 KiB

View File

@ -4,12 +4,18 @@
<div class="bg-up"></div>
<div class="bg-down"></div>
<div class="copy-writing">
<div class="title">Michael Yue Founder</div>
<div><img src="" alt=""></div>
<div class="slogan">Ops Manager in Shanda Group.</div>
<div class="name">{{ (teamItem.name) }}</div>
<div class="title">{{teamItem.title}}</div>
<div class="team-boder">
<img src="@/assets/img/about/team-card-boder.png" alt="" />
</div>
<div class="slogan" v-html="teamItem.slogan "></div>
</div>
</div>
</template>
<script setup>
defineProps(["teamItem"]);
</script>
<style lang="scss" scoped>
.bg {
width: 100%;
@ -18,7 +24,7 @@
left: 0;
bottom: 38px;
height: 96px;
overflow: hidden;
overflow: hidden;
// height: 400px;
min-height: 96px;
}
@ -29,7 +35,7 @@
height: 400px;
// overflow: hidden;
text-align: center;
.title {
.name {
padding-top: 20px;
width: 270px;
margin: 0 auto;
@ -38,26 +44,41 @@
font-weight: 400;
color: #ffffff;
}
.slogan {
.title{
margin: 0 auto;
width: 222px;
font-size: 20px;
font-family: "Big John";
font-weight: 400;
color: #ffffff;
}
.slogan {
// margin: 0 auto;
width: 66%;
margin-left: 47px;
text-align: center;
font-size: 20px;
font-family: Arial;
font-weight: bold;
color: #ffffff;
line-height: 32px;
// line-height: 32px;
}
}
.copy-writing:hover .title{
.copy-writing:hover .name {
padding-top: 50px;
width: 270px;
margin: 0 auto;
font-size: 22px;
font-family: "Big John";
font-weight: 400;
color: #ffffff;
width: 270px;
margin: 0 auto;
font-size: 22px;
font-family: "Big John";
font-weight: 400;
color: #ffffff;
}
.team-boder {
width: 191px;
height: 4px;
padding-top: 40px;
padding-bottom: 40px;
margin-left: 60px;
}
.bg-up {
position: absolute;
top: 0;

View File

@ -145,8 +145,8 @@ function handleScroll() {
height: 667px;
// z-index: ;
img {
width: 100%;
height: 100%;
width: 820px;
height: 667px;
}
}
.history-bottom-boder {
@ -219,7 +219,8 @@ function handleScroll() {
height: 290px;
background: #1e293b;
border-radius: 12px;
background: url("../../assets/img/about/history-bg.png");
background: url("../../assets/img/about/history-bg.png")no-repeat;
background-size: contain;
font-size: 16px;
font-family: Arial;
font-weight: 400;

View File

@ -40,7 +40,13 @@
<div class="team-title">TEAM</div>
</div>
<div class="card-list">
<div class="card-item">
<div class="card-item" v-for="team in cardText">
<div class="cardbg">
<img src="@/assets/img/about/card-bg.png" alt="" />
</div>
<Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
</div>
<!-- <div class="card-item">
<div class="cardbg">
<img src="@/assets/img/about/card-bg.png" alt="" />
</div>
@ -57,13 +63,7 @@
<img src="@/assets/img/about/card-bg.png" alt="" />
</div>
<Grid9Panel class="grid"></Grid9Panel>
</div>
<div class="card-item">
<div class="cardbg">
<img src="@/assets/img/about/card-bg.png" alt="" />
</div>
<Grid9Panel class="grid"></Grid9Panel>
</div>
</div> -->
</div>
</div>
</div>
@ -81,9 +81,31 @@ import { ref, computed, reactive, onMounted } from "vue";
import Grid9Panel from "./Grid9Panel.vue";
const Y1 = ref(0);
const ratio = ref(0.2); //
const positionY1 = ref(0); //Y
const cardText = [
{
name: "Michael Yue",
title: "Founder",
slogan:
"Co-Founder of Giant Interactive(NASDAQ:GA)<br/>Ops Manager in Shanda Group",
},
{
name: "Yoda",
title: "Gaming Economist",
slogan: "CDO of Foxconn GroupGaming data expert in Giant Interactive",
},
{
name: "Super G.",
title: "Producer",
slogan: "Worked in Shanda Group with 4 million-player games.",
},
{
name: "Xin",
title: "CTO",
slogan:
"In charged of Legend, Legends of the World,The Romance of Legends, etc.",
},
];
onMounted(() => {
window.addEventListener("scroll", handleScroll); //handleScroll
let bgTest = document.getElementById("bgTest");
@ -213,7 +235,7 @@ function handleScroll() {
// left: 30px;
// top: 40px;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation: myfirstcard2 0.5s 1 alternate forwards;
animation: myfirstcard2 0.5s 1 alternate forwards;
border-radius: 12px;
img {
width: 100%;
@ -226,14 +248,13 @@ function handleScroll() {
.card-item:hover .cardbg {
border-radius: 12px;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation: myfirstcard1 0.5s 1 alternate forwards;
animation: myfirstcard1 0.5s 1 alternate forwards;
img {
border-radius: 12px;
opacity: 0.3;
filter: blur(3px);
}
}
}
}
}

View File

@ -13,10 +13,14 @@
/></a>
</div>
<div class="download-item">
<img src="@/assets/img/home/andriod.png" alt="" />
<a href="https://www.cebg.games/release/cebg.apk"
><img src="@/assets/img/home/andriod.png" alt=""
/></a>
</div>
<div class="download-item">
<img src="@/assets/img/home/apple.png" alt="" />
<a href="https://www.cebg.games/release/cebg.apk">
<img src="@/assets/img/home/apple.png" alt=""
/></a>
</div>
</div>
</div>
@ -43,7 +47,7 @@ import Slogan from "./Slogan.vue";
.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%;

View File

@ -1,6 +1,7 @@
<template>
<div>
<div class="header header-top">
<div class="header-logo"><a href="#"> <img src="../../assets/img/home/header-logo.png" alt=""></a></div>
<div class="nav">
<a
class="nav-item duration-200"
@ -142,11 +143,18 @@ function handNavCurent(nav) {
background-color: rgb(255, 255, 255);
width: 100%;
// height: 60px;
display: flex;
align-items: center;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -2px rgba(0, 0, 0, 0.1);
.header-logo{
margin-left: 20PX;
// padding-left: 20px;
width: 54px;
height: 54px;
}
.nav {
padding-left: 252px;
padding-left: 83px;
display: flex;
justify-content: space-between;
width: 1130px;