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-14 15:59:12 +08:00
parent 8c84cb2e9d
commit 3f57fc684e
15 changed files with 194 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
mobile/src/assets/img/about/Introduction背景.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 149 KiB

28
mobile/src/assets/img/about/boder-bottom.svg Normal file
View File

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 270 32" style="enable-background:new 0 0 270 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EC2E5B;}
.st1{fill:#DC5C7F;}
.st2{fill:#0F6569;}
.st3{fill:#CEC3C3;}
.st4{fill:#8AF4E1;}
</style>
<rect x="0" y="26.96" class="st3" width="270" height="4.98"/>
<rect x="257" y="17" transform="matrix(3.637960e-11 1 -1 3.637960e-11 282 -237)" class="st3" width="5" height="11"/>
<rect x="246.5" y="15.5" transform="matrix(1.299298e-11 1 -1 1.299298e-11 271.5 -235.5)" class="st3" width="14" height="5"/>
<rect x="257" y="10" transform="matrix(3.128679e-11 1 -1 3.128679e-11 273 -246)" class="st3" width="5" height="7"/>
<rect x="259.5" y="14.5" transform="matrix(-1.306944e-09 1 -1 -1.306944e-09 277.5 -243.5)" class="st3" width="2" height="5"/>
<rect x="237" y="20" transform="matrix(-1 -5.000708e-10 5.000708e-10 -1 486 45)" class="st3" width="12" height="5"/>
<rect x="255" y="10" transform="matrix(-3.950789e-11 -1 1 -3.950789e-11 255 280)" class="st3" width="25" height="5"/>
<rect x="256" y="2" transform="matrix(6.966730e-10 -1 1 6.966730e-10 256 265)" class="st3" width="9" height="5"/>
<rect x="7.5" y="8" transform="matrix(-9.094885e-12 -1 1 -9.094885e-12 -3 23)" class="st3" width="5" height="10"/>
<rect x="9.25" y="15.25" transform="matrix(3.750873e-11 -1 1 3.750873e-11 -1.25 34.25)" class="st3" width="14.5" height="5"/>
<rect x="8.5" y="18.5" transform="matrix(-4.365336e-12 -1 1 -4.365336e-12 -11.5 33.5)" class="st3" width="5" height="8"/>
<rect x="21" y="20" class="st3" width="12" height="5"/>
<rect x="-5.75" y="16.25" transform="matrix(-6.394014e-11 1 -1 -6.394014e-11 21.25 16.25)" class="st3" width="16.5" height="5"/>
<rect x="5.25" y="1.75" transform="matrix(7.402222e-10 -1 1 7.402222e-10 5.25 13.75)" class="st3" width="8.5" height="5"/>
<rect x="-1.75" y="1.75" transform="matrix(7.402222e-10 -1 1 7.402222e-10 -1.75 6.75)" class="st3" width="8.5" height="5"/>
<rect x="7" y="17.5" transform="matrix(-4.002071e-12 -1 1 -4.002071e-12 -10.5 29.5)" class="st3" width="5" height="5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

14
mobile/src/assets/img/about/boder-center.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 270 32" style="enable-background:new 0 0 270 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EC2E5B;}
.st1{fill:#DC5C7F;}
.st2{fill:#0F6569;}
.st3{fill:#CEC3C3;}
.st4{fill:#8AF4E1;}
</style>
<polyline class="st3" points="5,0 5,32 0,32 0,0 "/>
<polyline class="st3" points="270,0 270,32 265,32 265,0 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 605 B

36
mobile/src/assets/img/about/boder-top.svg Normal file
View File

@ -0,0 +1,36 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 270 32" style="enable-background:new 0 0 270 32;" xml:space="preserve">
<style type="text/css">
.st0{fill:#EC2E5B;}
.st1{fill:#DC5C7F;}
.st2{fill:#0F6569;}
.st3{fill:#CEC3C3;}
.st4{fill:#8AF4E1;}
</style>
<g>
<rect x="132.17" y="1.29" transform="matrix(0.7071 -0.7071 0.7071 0.7071 36.6264 96.6665)" class="st4" width="5.66" height="5.66"/>
<polygon class="st3" points="144,3.11 135,12.04 126,3.11 0,3.11 0,8.09 125,8.09 135,18 145,7.98 270,7.98 270,3 "/>
<rect x="8" y="7" transform="matrix(8.730855e-12 -1 1 8.730855e-12 -2 23)" class="st3" width="5" height="11"/>
<rect x="9.5" y="14.5" transform="matrix(3.183238e-11 -1 1 3.183238e-11 -0.5 33.5)" class="st3" width="14" height="5"/>
<rect x="8" y="18" transform="matrix(1.382456e-11 -1 1 1.382456e-11 -11 32)" class="st3" width="5" height="7"/>
<rect x="8.5" y="15.5" transform="matrix(1.350600e-09 -1 1 1.350600e-09 -8.5 27.5)" class="st3" width="2" height="5"/>
<rect x="21" y="10" class="st3" width="12" height="5"/>
<rect x="-8.5" y="18.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 23.5 18.5)" class="st3" width="22" height="5"/>
<rect x="6.5" y="26.5" transform="matrix(-1.089878e-09 1 -1 -1.089878e-09 38.5 19.5)" class="st3" width="6" height="5"/>
<rect x="257.5" y="17" transform="matrix(-3.565255e-11 1 -1 -3.565255e-11 282 -238)" class="st3" width="5" height="10"/>
<rect x="246.25" y="14.75" transform="matrix(-8.241959e-11 1 -1 -8.241959e-11 270.75 -236.25)" class="st3" width="14.5" height="5"/>
<rect x="256.5" y="8.5" transform="matrix(-4.074537e-11 1 -1 -4.074537e-11 271.5 -246.5)" class="st3" width="5" height="8"/>
<rect x="237" y="10" transform="matrix(-1 -6.196693e-10 6.196693e-10 -1 486 25)" class="st3" width="12" height="5"/>
<rect x="259.25" y="13.75" transform="matrix(1.088090e-10 -1 1 1.088090e-10 251.25 283.75)" class="st3" width="16.5" height="5"/>
<rect x="257.75" y="26.75" transform="matrix(-1.188958e-09 1 -1 -1.188958e-09 289.75 -231.25)" class="st3" width="5.5" height="5"/>
<rect x="264.75" y="26.75" transform="matrix(-1.188958e-09 1 -1 -1.188958e-09 296.75 -238.25)" class="st3" width="5.5" height="5"/>
<rect x="258" y="12.5" transform="matrix(-4.074537e-11 1 -1 -4.074537e-11 275.5 -245.5)" class="st3" width="5" height="5"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

0
mobile/src/assets/img/about/TEAM图.png → mobile/src/assets/img/about/card-bg.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 668 KiB

After

Width:  |  Height:  |  Size: 668 KiB

0
mobile/src/assets/img/about/灰色机甲.png → mobile/src/assets/img/about/mission.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 299 KiB

After

Width:  |  Height:  |  Size: 299 KiB

0
mobile/src/assets/img/about/TEAM装饰线.png → mobile/src/assets/img/about/team-boder.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

0
mobile/src/assets/img/about/废墟2.png → mobile/src/assets/img/about/vision-btoom-boder.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.2 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

0
mobile/src/assets/img/about/Vision装饰.png → mobile/src/assets/img/about/vision-title-boder.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
mobile/src/assets/img/about/底部背景.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 64 KiB

41
mobile/src/components/about/Grid9Panel.vue
View File

@ -1,16 +1,16 @@
<template> <template>
<div class="bg bg-content"> <div class="bg bg-content">
<div class="bg-middle"></div>
<div class="bg-up"></div> <div class="bg-up"></div>
<div class="bg-middle"></div>
<div class="bg-down"></div> <div class="bg-down"></div>
<div class="copy-writing"> <!-- <div class="copy-writing">
<div class="name">{{ (teamItem.name) }}</div> <div class="name">{{ (teamItem.name) }}</div>
<div class="title">{{teamItem.title}}</div> <div class="title">{{teamItem.title}}</div>
<div class="team-boder"> <div class="team-boder">
<img src="@/assets/img/about/team-card-boder.png" alt="" /> <img src="@/assets/img/about/team-card-boder.png" alt="" />
</div> </div>
<div class="slogan" v-html="teamItem.slogan "></div> <div class="slogan" v-html="teamItem.slogan "></div>
</div> </div> -->
</div> </div>
</template> </template>
<script setup> <script setup>
@ -19,14 +19,18 @@ defineProps(["teamItem"]);
<style lang="scss" scoped> <style lang="scss" scoped>
.bg { .bg {
width: 100%; width: 100%;
padding-left: 15px; // padding-left: 15px;
margin-left: 45px;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 38px; bottom: 38px;
height: 96px; display: flex;
// align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden; overflow: hidden;
// height: 400px; min-height: 210px;
min-height: 96px; max-height: 865px;
} }
.copy-writing { .copy-writing {
@ -44,7 +48,7 @@ defineProps(["teamItem"]);
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
} }
.title{ .title {
margin: 0 auto; margin: 0 auto;
font-size: 20px; font-size: 20px;
font-family: "Big John"; font-family: "Big John";
@ -82,26 +86,27 @@ defineProps(["teamItem"]);
.bg-up { .bg-up {
position: absolute; position: absolute;
top: 0; top: 0;
height: 32px; height: 70px;
width: 300px; width: 610px;
background: url("@/assets/img/about/boder-top.svg") no-repeat; background: url("@/assets/img/about/boder-top.svg") no-repeat;
background-size: 300px 32px; background-size: 610px 70px;
} }
.bg-middle { .bg-middle {
position: absolute; position: absolute;
top: 22px; top: 70px;
height: calc(100% - 22px); // flex: 1;
width: 300px; height: calc(100% - 140px);
width: 610px;
background: url("@/assets/img/about/boder-center.svg") repeat-y; background: url("@/assets/img/about/boder-center.svg") repeat-y;
background-size: 300px 32px; background-size: 610px 70px;
} }
.bg-down { .bg-down {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
height: 32px; height: 70px;
width: 300px; width: 610px;
background: url("@/assets/img/about/boder-bottom.svg") no-repeat; background: url("@/assets/img/about/boder-bottom.svg") no-repeat;
background-size: 300px 32px; background-size: 610px 70px;
} }
</style> </style>

41
mobile/src/components/about/IntroductionBanner.vue
View File

@ -38,19 +38,23 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
padding-top: 62px; padding-top: 120px;
// background-color: #265d90; background-color: #265d90;
padding-bottom: 116px; padding-bottom: 317px;
position: relative; position: relative;
.banner-boder { .banner-boder {
width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
img{
width: 100%;
}
} }
.introduction-bg { .introduction-bg {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 120px;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 100%; width: 100%;
@ -62,31 +66,38 @@
} }
} }
.content { .content {
//width: 1440px; width: 100%;
margin: 0 auto; margin: 0 auto;
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
.title { .title {
padding-top: 170px; padding-top: 133px;
font-size: 48px; // font-size: 48px;
text-align: center;
padding-left: 40px; padding-left: 40px;
font-size: 60px;
font-family: "Big John"; font-family: "Big John";
font-weight: 400; font-weight: 400;
color: #ffffff; color: #ffffff;
} }
.title-boder { .title-boder {
width: 689px; width: 707px;
height: 58px; height: 71px;
padding-bottom: 30px; margin: 0 auto;
//height: 58px;
padding-top: 45px;
padding-bottom: 87px;
} }
.slogan { .slogan {
width: 447px; width: 712px;
margin: 0 auto;
padding-top: 40px; padding-top: 40px;
margin-left: 40px; // margin-left: 40px;
font-size: 16px; font-size: 26px;
font-family: Arial; font-family: Arial;
font-weight: bold; font-weight: bold;
color: #ffffff; color: #ffffff;
line-height: 42px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.cebg-batlegrounds { .cebg-batlegrounds {

116
mobile/src/components/about/VisionMission.vue
View File

@ -10,11 +10,6 @@
</div> </div>
<div class="content"> <div class="content">
<div class="content-top"> <div class="content-top">
<div class="content-left">
<div class="mission">
<img src="@/assets/img/about/mission.png" alt="" />
</div>
</div>
<div class="content-right"> <div class="content-right">
<div class="title">Vision & Mission</div> <div class="title">Vision & Mission</div>
<div class="title-boder"> <div class="title-boder">
@ -26,12 +21,17 @@
has excellent economy design that allows players to feel the joy has excellent economy design that allows players to feel the joy
of playing while being able to earntokens. of playing while being able to earntokens.
</div> </div>
<div class="cebg-batlegrounds"> <!-- <div class="cebg-batlegrounds">
At the same time, a community co-creation and sharing mechanism is At the same time, a community co-creation and sharing mechanism is
used to disrupt the existing content and value sharing model so used to disrupt the existing content and value sharing model so
that creativity and value can flourish in the community. that creativity and value can flourish in the community.
</div> -->
</div> </div>
</div> </div>
<div class="content-left">
<div class="mission">
<img src="@/assets/img/about/mission.png" alt="" />
</div>
</div> </div>
</div> </div>
<div class="content-bottom"> <div class="content-bottom">
@ -41,29 +41,11 @@
</div> </div>
<div class="card-list"> <div class="card-list">
<div class="card-item" v-for="team in cardText"> <div class="card-item" v-for="team in cardText">
<div class="cardbg"> <!-- <div class="cardbg">
<img src="@/assets/img/about/card-bg.png" alt="" /> <img src="@/assets/img/about/card-bg.png" alt="" />
</div> </div> -->
<Grid9Panel class="grid" :teamItem="team"></Grid9Panel> <Grid9Panel class="grid" :teamItem="team"></Grid9Panel>
</div> </div>
<!-- <div class="card-item">
<div class="cardbg">
<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 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>
</div> </div>
@ -124,19 +106,23 @@ function handleScroll() {
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
// padding-top: 62px; // padding-top: 62px;
background-color: RGBA(40, 98, 150, 1); // background-color: RGBA(40, 98, 150, 1);
padding-bottom: 116px; padding-bottom: 116px;
position: relative; position: relative;
.banner-boder { .banner-boder {
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
img {
width: 100%;
}
} }
.vision-title { .vision-title {
position: absolute; position: absolute;
right: 0; left: 194px;
top: 0; top: 0;
font-size: 210px; transform: translate(-50%, -50%);
font-size: 100px;
font-family: "Big John"; font-family: "Big John";
font-weight: 400; font-weight: 400;
color: #e6e6e6; color: #e6e6e6;
@ -154,47 +140,56 @@ function handleScroll() {
z-index: -3; z-index: -3;
} }
.content { .content {
width: 1440px; // width: 1440px;
margin: 0 auto; margin: 0 auto;
.content-top { .content-top {
display: flex; // display: flex;
justify-content: space-between; // justify-content: space-between;
.title { .title {
padding-top: 174px; padding-top: 13px;
font-size: 48px; text-align: center;
margin-left: 49px; // margin-left: 49px;
font-size: 60px;
font-family: "Big John"; font-family: "Big John";
font-weight: 400; font-weight: 400;
color: #000000; color: #000000;
} }
.title-boder { .title-boder {
width: 689px; padding-top: 35px;
height: 58px; width: 707px;
padding-bottom: 30px; margin: 0 auto;
height: 71px;
margin-bottom: 30px;
img {
width: 100%;
}
} }
.slogan { .slogan {
width: 622px; width: 712px;
padding-top: 36px; margin: 0 auto;
margin-left: 49px; padding-top: 87px;
font-size: 16px; // margin-left: 49px;
font-size: 26px;
font-family: Arial; font-family: Arial;
font-weight: bold; font-weight: bold;
color: #000000; color: #000000;
display: flex; line-height: 42px;
flex-direction: column; flex-direction: column;
.cebg-batlegrounds { .cebg-batlegrounds {
// padding-top: 30px; // padding-top: 30px;
} }
} }
.mission { .mission {
padding-top: 13px; margin-top: 44px;
width: 656px; margin-left: 22px;
height: 587px; width: 638px;
height: 539px;
// margin-bottom: 67px;
img { img {
max-width: 100%; width: 638px;
height: auto; height: 539px;
object-fit: cover; object-fit: cover;
} }
} }
@ -210,26 +205,30 @@ function handleScroll() {
} }
.team-title { .team-title {
position: absolute; position: absolute;
top: -10px; top: 10px;
left: 642px; left: 50%;
font-size: 26px; font-size: 26px;
font-family: "Big John"; font-family: "Big John";
font-weight: 400; font-weight: 400;
color: #d74458; color: #d74458;
transform: translate(-50%, -50%);
} }
} }
.card-list { .card-list {
padding-top: 100px; padding-top: 100px;
padding-bottom: 251px; padding-bottom: 251px;
width: 100%; width: 710px;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
.card-item { .card-item {
position: relative; position: relative;
width: 330px;
background: rgba(236, 46, 91, 1); background: rgba(236, 46, 91, 1);
border-radius: 12px; border-radius: 12px;
height: 456px; width: 710px;
height: 930px;
margin-bottom: 65px;
.cardbg { .cardbg {
position: absolute; position: absolute;
// left: 30px; // left: 30px;
@ -237,6 +236,8 @@ function handleScroll() {
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 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; border-radius: 12px;
width: 270px;
height: 270px;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -260,12 +261,15 @@ function handleScroll() {
} }
} }
.grid { .grid {
width: 100%; width: 610px;
height: 96px; height: 96px;
min-height: 210px;
max-height: 865px;
cursor: pointer; cursor: pointer;
animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
animation: myfirstnone 0.5s alternate 1 forwards; animation: myfirstnone 0.5s alternate 1 forwards;
} }
.card-item:hover { .card-item:hover {
transform: scale(1.019) translate(0px, -15px); transform: scale(1.019) translate(0px, -15px);
} }
@ -279,12 +283,12 @@ function handleScroll() {
height: 96px; height: 96px;
} }
100% { 100% {
height: 396px; height: 835px;
} }
} }
@keyframes myfirstnone { @keyframes myfirstnone {
0% { 0% {
height: 396px; height: 835px;
} }
100% { 100% {
height: 96px; height: 96px;

5
mobile/src/components/layout/NavBar.vue
View File

@ -1,4 +1,4 @@
<template> <template>ight
<div class="nav"> <div class="nav">
<div class="nav-logo"> <div class="nav-logo">
<img src="../../assets/img/home/nav-logo.png" alt="" /> <img src="../../assets/img/home/nav-logo.png" alt="" />
@ -101,6 +101,9 @@ function onLinkTo(item, index) {
.avatar-icon { .avatar-icon {
width: 68px; width: 68px;
height: 84px; height: 84px;
img{
width: 100%;
}
} }
.nav-btn { .nav-btn {
width: 84px; width: 84px;

4
mobile/src/views/AboutView.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div> <div>
<IntroductionBanner></IntroductionBanner> <IntroductionBanner></IntroductionBanner>
<VisionMission></VisionMission>
</div> </div>
</template> </template>
@ -10,8 +11,7 @@ import VisionMission from "@/components/about/VisionMission.vue";
import Roadmap from "@/components/about/Roadmap.vue"; import Roadmap from "@/components/about/Roadmap.vue";
import Whitepaper from "@/components/about/Whitepaper.vue"; import Whitepaper from "@/components/about/Whitepaper.vue";
import LatestNews from "@/components/about/LatestNews.vue"; import LatestNews from "@/components/about/LatestNews.vue";
import NavBar from "@/components/home/NavBar.vue";
import FooterBar from "@/components/home/FooterBar.vue";
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>