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

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

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

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

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

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

@ -8,23 +8,18 @@
</h6>
<ul class="step">
<template v-for="(item, i) in modules[0].list">
<li v-if="item.isEnable"
:key="i">{{ item.title }}</li>
<li v-if="item.isEnable" :key="i">{{ item.title }}</li>
</template>
</ul>
<div class="member-des"
v-html="modules[1].form.des"></div>
<div class="member-des" v-html="modules[1].form.des"></div>
<ul class="param">
<li v-for="(item, i) in modules[2].list"
:key="i">
<img :src="item.pic"
alt="">
<li v-for="(item, i) in modules[2].list" :key="i">
<img :src="item.pic" alt="">
<p class="name">{{ item.title }}</p>
<p class="des">{{ item.des }}</p>
</li>
</ul>
<div class="btn"
@click="qrcodeVisible = true">立即注册 | 0元成会员</div>
<div class="btn" @click="qrcodeVisible = true">立即注册 | 0元成会员</div>
</div>
</div>
</div>
@ -150,179 +145,212 @@ export default {
<style lang="scss" scoped>
@import '../../styles/page/page.scss';
.reg {
padding-bottom: 50px;
background: url(https://www.occupationlab.com/images/member/1.jpg) 0 0/100% 605px no-repeat;
.equity-wrap {
width: 1000px;
padding-top: 20px;
margin: 0 auto;
padding-bottom: 50px;
background: url(https://www.occupationlab.com/images/member/1.jpg) 0 0/100% 605px no-repeat;
.equity-wrap {
width: 1000px;
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;
border-radius: 24px 18px 18px 18px;
box-shadow: 0 0 20px 4px rgba(0, 16, 42, 0.3);
overflow: hidden;
}
.step {
display: flex;
justify-content: space-between;
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;
font-size: 2rem;
font-weight: 600;
text-align: center;
}
.member-des {
margin-top: 60px;
font-size: 1.2rem;
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;
em {
font-style: normal;
color: #e3b871;
}
&: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);
}
}
.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 {
display: flex;
justify-content: space-between;
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;
}
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: 60px;
font-size: 1.2rem;
text-align: center;
color: #fff;
margin-top: 20px;
}
.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;
}
.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%;
}
}
padding: 0;
li {
width: 50%;
}
}
}
}
@media (max-width: 640px) {
.reg {
h6 {
font-size: 1.6rem;
}
.step {
li {
width: 100%;
margin-bottom: 1.1rem !important;
font-size: 0.9rem;
&:last-child {
margin-bottom: 0;
}
}
}
.member-des {
font-size: 1rem;
.reg {
h6 {
font-size: 1.6rem;
}
.step {
li {
width: 100%;
margin-bottom: 1.1rem !important;
font-size: 0.9rem;
&:last-child {
margin-bottom: 0;
}
.param {
li {
.name {
font-size: 0.95rem;
}
.name {
font-size: 0.8rem;
}
}
}
}
.member-des {
font-size: 1rem;
}
.param {
li {
.name {
font-size: 0.95rem;
}
.btn {
width: 100%;
height: 3.5rem;
line-height: 3.5rem;
font-size: 1.1rem;
.name {
font-size: 0.8rem;
}
}
}
.btn {
width: 100%;
height: 3.5rem;
line-height: 3.5rem;
font-size: 1.1rem;
}
}
}
</style>

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

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

Write Preview
Loading…
Cancel
Save