huoran
/
FE_huoran_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

home页样式优化

Browse Source
master
yujialong 6 months ago
parent d6c7ff0402
commit c85c10d515
6 changed files with 394 additions and 764 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/images/footer-bg.png
  2. 3
      src/layouts/footer/index.vue
  3. 189
      src/pages/column/result.vue
  4. 557
      src/pages/home/index.vue
  5. 358
      src/pages/member/index.vue
  6. 51
      src/styles/page/page.scss

BIN
src/assets/images/footer-bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

3
src/layouts/footer/index.vue
Unescape View File

@ -129,8 +129,6 @@ export default {
typeId: '', typeId: '',
isSort: 1 isSort: 1
}).then(({ data }) => { }).then(({ data }) => {
console.log("🚀 ~ file: index.vue:177 ~ this.$post ~ json:", window.innerWidth)
this.columns = data.slice(0, 5) this.columns = data.slice(0, 5)
}).catch(err => { }) }).catch(err => { })
}, },
@ -221,6 +219,7 @@ export default {
color: #fff; color: #fff;
background-color: #091733; background-color: #091733;
overflow: hidden; overflow: hidden;
background: rgba(0, 5, 12, .8) url(../../assets/images/footer-bg.png) no-repeat;
.info { .info {
display: flex; display: flex;

189
src/pages/column/result.vue
Unescape View File

@ -3,29 +3,22 @@
<div class="articles"> <div class="articles">
<div class="top"> <div class="top">
<div class="search"> <div class="search">
<input ref="search" <input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
type="text"
:placeholder="$t('column.titlePlaceholder')"
v-model="title">
<i class="el-icon-search icon"></i> <i class="el-icon-search icon"></i>
</div> </div>
<p class="result">{{ $i18n.locale === 'en' ? `Search results containing "${ title }"` : `包含 “${ title }” 的搜索结果` }} </p> <p class="result">{{ $i18n.locale === 'en' ? `Search results containing "${title}"` : `包含 “${title}” 的搜索结果`
}} </p>
</div> </div>
<ul v-if="articles.length" <ul v-if="articles.length" class="list">
class="list"> <li v-for="(item, i) in articles" :key="i">
<li v-for="(item, i) in articles"
:key="i">
<h6 @click="toArtice(item)">{{ item.title }}</h6> <h6 @click="toArtice(item)">{{ item.title }}</h6>
<div class="des" <div class="des" v-html="item.mainBody"></div>
v-html="item.mainBody"></div>
<Breadcrumb :data.sync="item.routes" /> <Breadcrumb :data.sync="item.routes" />
</li> </li>
</ul> </ul>
<div v-else <div v-else class="none">
class="none"> <img src="@/assets/images/none.png" alt="">
<img src="@/assets/images/none.png"
alt="">
<p class="text">{{ $t('column.nothing') }}</p> <p class="text">{{ $t('column.nothing') }}</p>
</div> </div>
</div> </div>
@ -105,93 +98,109 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { .wrap {
background: url(../../assets/images/result-bg1.png) no-repeat, url(../../assets/images/result-bg2.png) bottom right/auto no-repeat; background: url(../../assets/images/result-bg1.png) no-repeat, url(../../assets/images/result-bg2.png) bottom right/auto no-repeat;
background-color: #fff; background-color: #fff;
} }
.articles { .articles {
width: 70%; width: 70%;
padding-top: 47px; padding-top: 47px;
margin: 0 auto; margin: 0 auto;
} }
.top { .top {
display: flex; display: flex;
align-items: center; align-items: center;
.result {
font-size: 18px; .result {
color: #969696; font-size: 18px;
} color: #969696;
}
} }
.search { .search {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
height: 62px; height: 62px;
margin-right: 30px; margin-right: 30px;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
input {
width: 510px; input {
padding: 0 20px; width: 510px;
font-size: 18px; padding: 0 20px;
color: #333; font-size: 18px;
border: 0; color: #333;
outline: none; border: 0;
background: #f7f7f7; outline: none;
} background: #f7f7f7;
.icon { }
position: absolute;
top: 17px; .icon {
right: 15px; position: absolute;
font-size: 26px; top: 17px;
color: #ccc; right: 15px;
border-radius: 0px 6px 6px 0px; font-size: 26px;
} color: #ccc;
border-radius: 0px 6px 6px 0px;
}
} }
.list { .list {
li { li {
margin-top: 30px; margin-top: 30px;
border-bottom: 1px dashed #e3e3e3; border-bottom: 1px dashed #e3e3e3;
} }
h6 {
margin-bottom: 10px; h6 {
font-size: 22px; margin-bottom: 10px;
color: #1583ff; font-size: 22px;
line-height: 30px; color: #1583ff;
cursor: pointer; line-height: 30px;
} cursor: pointer;
.des { }
font-size: 18px;
line-height: 36px; .des {
color: #333; font-size: 18px;
@include mul-ellipsis(2); line-height: 36px;
} color: #333;
.breadcrumb { @include mul-ellipsis(2);
margin: 15px 0 30px; }
}
.breadcrumb {
margin: 15px 0 30px;
}
} }
.none { .none {
margin-top: 118px; margin-top: 118px;
text-align: center; text-align: center;
.text {
margin-top: 59px; .text {
font-size: 18px; margin-top: 59px;
color: #333; font-size: 18px;
} color: #333;
}
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.articles { .articles {
width: 90%; width: 90%;
} }
.top {
flex-direction: column; .top {
padding: 0 10px; flex-direction: column;
} padding: 0 10px;
.search { }
width: 100%;
margin-right: 0; .search {
margin-bottom: 20px; width: 100%;
input { margin-right: 0;
width: 100%; margin-bottom: 20px;
}
input {
width: 100%;
} }
}
} }
</style> </style>

557
src/pages/home/index.vue
Unescape View File

@ -233,16 +233,7 @@ export default {
} }
.block { .block {
padding-top: 3.15rem; padding-top: 3.1rem;
.b-title {
font-size: 2.25rem;
}
.intro {
font-size: 1.35rem;
margin-bottom: 3.6rem;
}
} }
.card { .card {
@ -254,7 +245,7 @@ export default {
transition: 0.3s; transition: 0.3s;
&:hover { &:hover {
margin-top: -0.9375rem; margin-top: -0.9rem;
} }
} }
@ -265,7 +256,7 @@ export default {
} }
.texts { .texts {
padding-left: 1.375rem; padding-left: 1.4rem;
margin-top: 3rem; margin-top: 3rem;
border-left: 2px solid #dfe4e9; border-left: 2px solid #dfe4e9;
} }
@ -274,7 +265,7 @@ export default {
min-height: 4.5rem; min-height: 4.5rem;
margin-bottom: 1.56rem; margin-bottom: 1.56rem;
line-height: 2rem; line-height: 2rem;
font-size: 1.368rem; font-size: 1.3rem;
color: #333; color: #333;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
@ -284,7 +275,7 @@ export default {
} }
.des { .des {
font-size: 1.024rem; font-size: 1rem;
color: #222; color: #222;
line-height: 30px; line-height: 30px;
} }
@ -301,15 +292,15 @@ export default {
li { li {
display: inline-flex; display: inline-flex;
width: calc((100% - 35px) / 2); width: calc((100% - 35px) / 2);
padding: 2.125rem; padding: 2.1rem;
margin-bottom: 1.75rem; margin-bottom: 1.7rem;
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
overflow: hidden; overflow: hidden;
transition: 0.3s; transition: 0.3s;
&:nth-child(odd) { &:nth-child(odd) {
margin-right: 1.75rem; margin-right: 1.7rem;
} }
&:hover { &:hover {
@ -319,24 +310,24 @@ export default {
img { img {
width: 12.5rem; width: 12.5rem;
height: 7.81rem; height: 7.8rem;
object-fit: cover; object-fit: cover;
} }
.texts { .texts {
width: calc(100% - 220px); width: calc(100% - 220px);
margin-left: 1.25rem; margin-left: 1.2rem;
} }
h6 { h6 {
font-size: 1.28rem; font-size: 1.2rem;
color: #0648a8; color: #0648a8;
@include ellipsis; @include ellipsis;
} }
.des { .des {
margin: 14px 0; margin: 14px 0;
font-size: 1.14rem; font-size: 1.1rem;
color: #333; color: #333;
line-height: 22px; line-height: 22px;
display: -webkit-box; display: -webkit-box;
@ -347,7 +338,7 @@ export default {
} }
.meta { .meta {
font-size: 1.14rem; font-size: 1.1rem;
color: #999; color: #999;
} }
} }
@ -399,8 +390,8 @@ export default {
} }
.glance { .glance {
padding-bottom: 3.125rem; padding-bottom: 3.1rem;
font-size: 2.81rem; font-size: 2.8rem;
font-weight: bold; font-weight: bold;
font-family: SFProDisplay-Bold, SFProDisplay; font-family: SFProDisplay-Bold, SFProDisplay;
text-align: center; text-align: center;
@ -411,7 +402,7 @@ export default {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 3.75rem; margin-top: 3.7rem;
li { li {
width: 27%; width: 27%;
@ -433,14 +424,14 @@ export default {
} }
.text { .text {
font-size: 1.08rem; font-size: 1rem;
margin-top: 1rem; margin-top: 1rem;
line-height: 1.8rem; line-height: 1.8rem;
} }
} }
.about { .about {
padding: 3.848rem 0 9.9rem; padding: 3.8rem 0 10rem;
background: url(../../assets/images/about-bg.png) no-repeat center center; background: url(../../assets/images/about-bg.png) no-repeat center center;
.pic { .pic {
@ -450,7 +441,7 @@ export default {
.line { .line {
display: flex; display: flex;
align-items: center; align-items: center;
margin: 3.125rem 0 1.875rem; margin: 3.1rem 0 1.8rem;
width: 5.5rem; width: 5.5rem;
height: 6px; height: 6px;
background-color: #fff; background-color: #fff;
@ -469,9 +460,9 @@ export default {
.des { .des {
display: block; display: block;
padding: 2.375rem 3.75rem; padding: 2.3rem 3.7rem;
margin-top: 3.78rem; margin-top: 3.7rem;
font-size: 1.35rem; font-size: 1.3rem;
color: #fff; color: #fff;
line-height: 42px; line-height: 42px;
text-align: center; text-align: center;
@ -487,58 +478,27 @@ export default {
} }
} }
@media (min-width: 280px) and (max-width: 1200px) { @media (max-width: 1200px) {
.carousel { .wrap {
height: 21.87rem; margin-top: 90px;
img {
height: 100%;
}
/deep/.el-carousel__container {
height: 21.87rem;
}
}
.about {
.des {
font-size: 1rem;
}
}
.el-carousel__item {
height: 21.87rem;
img {
height: 21.87rem;
}
} }
.block { .block {
padding: 3.125rem 0; padding: 3.1rem 0;
.inner { .inner {
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
.b-title {
font-size: 2rem;
margin-bottom: 1.25rem;
}
.wow {
font-size: 1.5rem;
}
.intro { .intro {
margin-bottom: 1.25rem; margin-bottom: 1rem;
} }
.card { .card {
flex-direction: column; flex-direction: column;
li { li {
margin-top: 1.25rem; margin-top: 1rem;
width: 100%; width: 100%;
} }
} }
@ -563,15 +523,14 @@ export default {
.people { .people {
li { li {
flex-direction: column; flex-direction: column;
margin-bottom: 1.25rem; margin-bottom: 1rem;
.pic { .pic {
width: 100%; width: 100%;
height: 21.875rem;
} }
.texts { .texts {
padding-top: 1.25rem; padding-top: 1rem;
width: 100%; width: 100%;
} }
} }
@ -585,19 +544,20 @@ export default {
.about { .about {
width: 100%; width: 100%;
padding: 1.25rem 0 1.875rem; padding: 1.2rem 0 1.8rem;
.inner { .inner {
width: 95%; width: 95%;
margin: 0 auto; margin: 0 auto;
.line { .line {
margin: 1.25rem 0 1.25rem; margin: 1rem 0;
} }
.des { .des {
margin-top: 1.25rem; margin-top: 1.25rem;
padding: 10px 1.25rem; padding: 10px 1.25rem;
font-size: 1rem;
} }
} }
} }
@ -616,26 +576,7 @@ export default {
} }
} }
@media (min-width: 751px) and (max-width: 920px) { @media (max-width: 480px) {
.news {
flex-direction: column;
li {
width: 100%;
margin-bottom: 0.9375rem;
img {
width: 10rem;
}
.texts {
width: calc(100% - 10rem);
}
}
}
}
@media (min-width: 320px) and (max-width: 375px) {
.wrap { .wrap {
/deep/ .el-carousel { /deep/ .el-carousel {
height: 15rem; height: 15rem;
@ -650,6 +591,7 @@ export default {
img { img {
height: 15rem; height: 15rem;
object-fit: cover;
} }
} }
} }
@ -660,438 +602,85 @@ export default {
.inner { .inner {
.intro { .intro {
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 0.95rem; font-size: 0.8rem;
line-height: 1rem; line-height: 1.6;
}
.card {
li {
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
.pic {
height: auto;
}
}
} }
} }
} }
.about { .card {
.inner { li {
.des { .pic {
line-height: 1.5rem; height: auto;
} }
}
}
}
@media (min-width: 375px) and (max-width: 480px) {
.wrap {
/deep/ .el-carousel {
height: 15rem;
}
/deep/ .el-carousel__container {
height: 15rem;
}
/deep/ .el-carousel__item { .texts {
height: 15rem; margin-top: 1.2rem;
img {
height: 15rem;
} }
} }
}
.block {
padding: 1rem 0;
.inner {
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
li {
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img { h6 {
width: 8rem; font-size: 1rem;
}
}
}
.people {
li {
.pic {
height: auto;
}
}
}
} }
}
.about { .des {
.inner { font-size: .8rem;
.des {
line-height: 1.5rem;
}
} }
} }
}
@media (min-width: 480px) and (max-width: 640px) { .news {
.wrap { li {
/deep/ .el-carousel { padding: 1.2rem;
height: 18rem;
}
/deep/ .el-carousel__container {
height: 18rem;
}
/deep/ .el-carousel__item {
height: 18rem;
img { img {
height: 18rem; width: 8rem;
} }
} }
}
.block {
padding: 1rem 0;
.inner {
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
li {
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people { .texts {
li { margin-left: .8rem;
.pic {
height: auto;
}
}
}
.about {
.des {
line-height: 1.5rem;
}
}
} }
}
}
@media (min-width: 640px) and (max-width: 768px) { h6 {
.wrap { font-size: 1rem;
/deep/ .el-carousel {
height: 20rem;
} }
/deep/ .el-carousel__container { .des {
height: 20rem; font-size: .8rem;
} }
/deep/ .el-carousel__item { .meta {
height: 20rem; font-size: .8rem;
img {
height: 20rem;
}
} }
} }
.block { .people {
padding: 1rem 0; li {
.pic {
.inner { height: auto;
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
li {
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
.pic {
height: auto;
}
}
}
.about {
.des {
line-height: 1.2rem;
}
}
.stat {
flex-direction: row;
li {
width: 30%;
}
} }
} }
}
}
@media (min-width: 768px) and (max-width: 980px) { h6 {
.wrap { font-size: 1.2rem;
/deep/ .el-carousel {
height: 22rem;
}
/deep/ .el-carousel__container {
height: 22rem;
} }
/deep/ .el-carousel__item { .des {
height: 22rem; margin-top: 10px;
font-size: 1rem;
img {
height: 22rem;
}
} }
} }
.block { .about {
padding: 1rem 0;
.inner { .inner {
.intro { .des {
margin-bottom: 1rem; line-height: 1.5rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
flex-direction: row;
li {
width: 47%;
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
flex-direction: row;
&:nth-child(2) {
flex-direction: row-reverse !important;
}
.pic {
width: 47%;
height: auto;
}
.texts {
width: 48%;
}
}
}
.about {
.des {
line-height: 1.2rem;
}
}
.stat {
flex-direction: row;
li {
width: 30%;
}
}
}
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.wrap {
/deep/ .el-carousel {
height: 25rem;
}
/deep/ .el-carousel__container {
height: 25rem;
}
/deep/ .el-carousel__item {
height: 25rem;
img {
height: 25rem;
} }
} }
} }
.block { .glance {
padding: 1rem 0; font-size: 2rem;
.inner {
.intro {
margin-bottom: 1rem;
font-size: 0.95rem;
line-height: 1rem;
}
.card {
flex-direction: row;
li {
width: 47%;
.pic {
height: auto;
}
.texts {
margin-top: 1.2rem;
}
}
}
.news {
li {
padding: 1.2rem;
img {
width: 8rem;
}
}
}
.people {
li {
flex-direction: row;
&:nth-child(2) {
flex-direction: row-reverse !important;
}
.pic {
width: 47%;
height: auto;
}
.texts {
width: 48%;
}
}
}
.stat {
flex-direction: row;
li {
width: 30%;
}
}
}
} }
} }
</style> </style>

358
src/pages/member/index.vue
Unescape View File

@ -8,23 +8,18 @@
</h6> </h6>
<ul class="step"> <ul class="step">
<template v-for="(item, i) in modules[0].list"> <template v-for="(item, i) in modules[0].list">
<li v-if="item.isEnable" <li v-if="item.isEnable" :key="i">{{ item.title }}</li>
:key="i">{{ item.title }}</li>
</template> </template>
</ul> </ul>
<div class="member-des" <div class="member-des" v-html="modules[1].form.des"></div>
v-html="modules[1].form.des"></div>
<ul class="param"> <ul class="param">
<li v-for="(item, i) in modules[2].list" <li v-for="(item, i) in modules[2].list" :key="i">
:key="i"> <img :src="item.pic" alt="">
<img :src="item.pic"
alt="">
<p class="name">{{ item.title }}</p> <p class="name">{{ item.title }}</p>
<p class="des">{{ item.des }}</p> <p class="des">{{ item.des }}</p>
</li> </li>
</ul> </ul>
<div class="btn" <div class="btn" @click="qrcodeVisible = true">立即注册 | 0元成会员</div>
@click="qrcodeVisible = true">立即注册 | 0元成会员</div>
</div> </div>
</div> </div>
</div> </div>
@ -150,179 +145,212 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '../../styles/page/page.scss'; @import '../../styles/page/page.scss';
.reg { .reg {
padding-bottom: 50px; padding-bottom: 50px;
background: url(https://www.occupationlab.com/images/member/1.jpg) 0 0/100% 605px no-repeat; background: url(https://www.occupationlab.com/images/member/1.jpg) 0 0/100% 605px no-repeat;
.equity-wrap {
width: 1000px; .equity-wrap {
padding-top: 20px; width: 1000px;
margin: 0 auto; padding-top: 20px;
margin: 0 auto;
}
.logo {
width: 150px;
}
.equity {
background: url(https://www.occupationlab.com/images/member/2.jpg) 0 0/100% 100% no-repeat;
background-color: #111d42;
border-radius: 24px 18px 18px 18px;
box-shadow: 0 0 20px 4px rgba(0, 16, 42, 0.3);
overflow: hidden;
}
h6 {
position: relative;
margin: 30px 0;
font-size: 2rem;
font-weight: 600;
text-align: center;
color: #fff;
em {
font-style: normal;
color: #e3b871;
} }
.logo {
width: 150px; &:after {
content: 'VIP';
position: absolute;
top: -37px;
left: 0;
width: 100%;
text-align: center;
font-size: 6rem;
font-weight: 700;
color: hsla(0, 0%, 100%, 0.05);
} }
.equity { }
background: url(https://www.occupationlab.com/images/member/2.jpg) 0 0/100% 100% no-repeat;
background-color: #111d42; .step {
border-radius: 24px 18px 18px 18px; display: flex;
box-shadow: 0 0 20px 4px rgba(0, 16, 42, 0.3); justify-content: space-between;
overflow: hidden; padding: 0 80px 0 100px;
li {
position: relative;
font-size: 1.1rem;
color: #a3a3a3;
&:before {
content: '';
position: absolute;
top: -2px;
left: -34px;
width: 24px;
height: 24px;
background: url(https://www.occupationlab.com/images/member/3.png) 0 0/100% 100% no-repeat;
}
} }
h6 { }
position: relative;
margin: 30px 0; .member-des {
font-size: 2rem; margin-top: 60px;
font-weight: 600; font-size: 1.2rem;
text-align: center; text-align: center;
color: #fff;
}
.param {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0 100px;
li {
width: 33.33%;
padding: 10px 20px;
text-align: center;
.name {
margin: 10px 0 10px;
font-size: 1.1rem;
color: #fff; color: #fff;
em { }
font-style: normal;
color: #e3b871; .des {
} font-size: 0.9rem;
&:after { line-height: 1.6;
content: 'VIP'; color: hsla(0, 0%, 100%, 0.7);
position: absolute; }
top: -37px; }
left: 0; }
width: 100%;
text-align: center; .btn {
font-size: 6rem; width: 400px;
font-weight: 700; height: 72px;
color: hsla(0, 0%, 100%, 0.05); margin: 30px auto;
} font-size: 1.4rem;
color: #13192e;
font-weight: 600;
line-height: 72px;
text-align: center;
background-color: #e3b871;
background-image: linear-gradient(233.36deg, #e8ce8c, #f3c169);
border-radius: 38px;
cursor: pointer;
&:hover {
opacity: 0.9;
}
}
}
@media (max-width: 1200px) {
.reg {
h6 {
margin: 20px 0;
}
.equity-wrap {
width: 90%;
.equity {
padding: 0 20px;
}
} }
.step { .step {
display: flex; flex-wrap: wrap;
justify-content: space-between; padding: 0 30px 0 50px;
padding: 0 80px 0 100px;
li { li {
position: relative; width: 50%;
font-size: 1.1rem; padding: 0;
color: #a3a3a3;
&:before { &:first-child,
content: ''; &:nth-child(2) {
position: absolute; margin-bottom: 10px;
top: -2px;
left: -34px;
width: 24px;
height: 24px;
background: url(https://www.occupationlab.com/images/member/3.png) 0 0/100% 100% no-repeat;
}
} }
}
} }
.member-des { .member-des {
margin-top: 60px; margin-top: 20px;
font-size: 1.2rem;
text-align: center;
color: #fff;
} }
.param { .param {
display: flex; padding: 0;
flex-wrap: wrap;
justify-content: space-between; li {
padding: 0 100px; width: 50%;
li { }
width: 33.33%;
padding: 10px 20px;
text-align: center;
.name {
margin: 10px 0 10px;
font-size: 1.1rem;
color: #fff;
}
.des {
font-size: 0.9rem;
line-height: 1.6;
color: hsla(0, 0%, 100%, 0.7);
}
}
}
.btn {
width: 400px;
height: 72px;
margin: 30px auto;
font-size: 1.4rem;
color: #13192e;
font-weight: 600;
line-height: 72px;
text-align: center;
background-color: #e3b871;
background-image: linear-gradient(233.36deg, #e8ce8c, #f3c169);
border-radius: 38px;
cursor: pointer;
&:hover {
opacity: 0.9;
}
}
}
@media (max-width: 1200px) {
.reg {
h6 {
margin: 20px 0;
}
.equity-wrap {
width: 90%;
.equity {
padding: 0 20px;
}
}
.step {
flex-wrap: wrap;
padding: 0 30px 0 50px;
li {
width: 50%;
padding: 0;
&:first-child,
&:nth-child(2) {
margin-bottom: 10px;
}
}
}
.member-des {
margin-top: 20px;
}
.param {
padding: 0;
li {
width: 50%;
}
}
} }
}
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.reg { .reg {
h6 { h6 {
font-size: 1.6rem; font-size: 1.6rem;
} }
.step {
li { .step {
width: 100%; li {
margin-bottom: 1.1rem !important; width: 100%;
font-size: 0.9rem; margin-bottom: 1.1rem !important;
&:last-child { font-size: 0.9rem;
margin-bottom: 0;
} &:last-child {
} margin-bottom: 0;
}
.member-des {
font-size: 1rem;
} }
.param { }
li { }
.name {
font-size: 0.95rem; .member-des {
} font-size: 1rem;
.name { }
font-size: 0.8rem;
} .param {
} li {
.name {
font-size: 0.95rem;
} }
.btn {
width: 100%; .name {
height: 3.5rem; font-size: 0.8rem;
line-height: 3.5rem;
font-size: 1.1rem;
} }
}
} }
.btn {
width: 100%;
height: 3.5rem;
line-height: 3.5rem;
font-size: 1.1rem;
}
}
} }
</style> </style>

51
src/styles/page/page.scss
Unescape View File

@ -2,32 +2,29 @@
.block { .block {
padding: 118px 0; padding: 118px 0;
.b-title { .b-title {
position: relative; z-index: 1;
margin-bottom: 50px; position: relative;
font-size: 3rem; margin-bottom: 37px;
font-family: SFProDisplay-Bold, SFProDisplay; font-size: 30px;
font-weight: bold; text-align: center;
color: #333333; color: #0b1d30;
line-height: 60px;
text-align: center; &:after {
color: #1f1f1f; content: '';
&:after { position: absolute;
content: ''; bottom: -10px;
position: absolute; left: 50%;
top: 70px; width: 30px;
left: 50%; height: 4px;
width: 136px; transform: translate(-50%);
height: 4px; background-color: #006eff;
transform: translateX(-50%); }
background: #1583ff;
}
} }
.intro { .intro {
margin-bottom: 80px; margin: -10px 0 40px;
font-size: 1.6rem; font-size: 18px;
text-align: center; text-align: center;
color: #5b5b5e; color: #5a6b7e;
line-height: 40px;
@include mul-ellipsis(2); @include mul-ellipsis(2);
} }
} }
@ -205,6 +202,14 @@
} }
} }
} }
.block {
.b-title {
font-size: 24px;
}
.intro {
font-size: 16px;
}
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.wrap { .wrap {

Write Preview
Loading…
Cancel
Save