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

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

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

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

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

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

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

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

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