fix
@ -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, // 是否直接更换属性值,而不添加备用属性
|
||||
|
Before Width: | Height: | Size: 219 B After Width: | Height: | Size: 219 B |
After Width: | Height: | Size: 219 B |
Before Width: | Height: | Size: 2.9 KiB |
Before Width: | Height: | Size: 3.6 KiB |
Before Width: | Height: | Size: 2.2 KiB |
Before Width: | Height: | Size: 462 KiB |
Before Width: | Height: | Size: 12 KiB |
Before Width: | Height: | Size: 27 KiB |
Before Width: | Height: | Size: 1.4 MiB |
Before Width: | Height: | Size: 7.5 KiB |
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 26 KiB |
Before Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/img/home/header-logo.png
Normal file
After Width: | Height: | Size: 4.4 KiB |
Before Width: | Height: | Size: 302 KiB |
Before Width: | Height: | Size: 25 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 590 KiB |
Before Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 28 KiB |
Before Width: | Height: | Size: 632 KiB |
Before Width: | Height: | Size: 338 KiB |
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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%;
|
||||
|
@ -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;
|
||||
|