kubbo/dvcp_v2_wechat_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

积分兑换

Browse Source
This commit is contained in:
liuye
2023-04-11 09:30:41 +08:00
parent 7e0acdafbf
commit 9df0e30f96
6 changed files with 1091 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
src/project/fengdu/AppRedemptionPoints/AppRedemptionPoints.vue Normal file
View File

@@ -0,0 +1,297 @@
<template>
<div class="AppRedemptionPoints">
<div class="fixed-top">
<div class="header">
<div class="num">
<p>积分余额</p>
<h3>562</h3>
</div>
<div class="btn" @click="toMyOrder">我的订单</div>
</div>
<div class="search">
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="76" font-size="28" bg-color="#fff" inactive-color="#8891A1"
active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
<div class="type-select">
<div :class="currentType == index ? 'item active' : 'item'" v-for="(item, index) in typeList" :key="index" @click="typeClick(index)">
{{item}}
<span v-if="index == 1" class="down-icon">⏷</span>
</div>
</div>
<div class="point-select" v-if="currentType == 1">
<u-tabs :list="pointTypeList" :is-scroll="true" :current="currentPoint" height="80" font-size="24" bg-color="#fff" inactive-color="#666666"
active-color="#4181FF" bar-width="0" :bold="false" @change="pointClick" ></u-tabs>
</div>
</div>
</div>
<div class="list-content">
<u-waterfall v-model="flowList">
<template v-slot:left="{leftList}">
<div v-for="(item, index) in leftList" :key="index" @click="toProductDetail()">
<div class="item">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
<div class="type type0">京东低价商品</div>
<div class="content">
<p class="text">无染(wuro)本色抽纸无染(wuro)本色抽纸无无染(wuro)本色抽纸无染(wuro)本色抽</p>
<div class="item-money">
<h3>50积分</h3>
<p>+￥2.00</p>
<span>兑换后再付</span>
</div>
<div class="btn btn0">去兑换</div>
</div>
</div>
</div>
</template>
<template v-slot:right="{rightList}">
<div v-for="(item, index) in rightList" :key="index">
<div class="item">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
<div class="type type0">京东低价商品</div>
<div class="content">
<p class="text">无染(wuro)本色抽纸无染(wuro)本色抽纸无无染(wuro)本色抽纸无染(wuro)本色抽</p>
<div class="item-money">
<h3>50积分</h3>
</div>
<div class="btn btn0">去兑换</div>
</div>
</div>
</div>
</template>
</u-waterfall>
</div>
<!-- <AiEmpty v-else></AiEmpty> -->
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'AppRedemptionPoints',
appName: '积分兑换',
data() {
return {
tabList: [{name: '全部'}, {name: '免费兑'}, {name: '京东低价商品'}],
currentTabs: 0,
barStyle: {
'width': '20px',
'height': '3px',
'border-radius': '2px',
'bottom': '-3px',
'background': '#2D7DFF'
},
typeList: ['最新上架', '积分', '我可兑换的'],
currentType: 1,
pointTypeList: [{name: '全部'}, {name: '50分以下'}, {name: '100分以下'}, {name: '200分以下'}, {name: '5000分以下'}],
currentPoint: 0,
leftList: [1,1,1,1,1,11,1,1],
rightList: [1,1,1,1,1,11,1,1],
flowList: [1,1,1,1,1,11,1,1],
}
},
computed: {
...mapState(['user']),
},
onLoad() {
},
methods: {
changeTab(index) {
this.currentTabs = index
// this.getListInit()
},
typeClick(index) {
this.currentType = index
// this.getListInit()
},
pointClick(index) {
this.currentPoint = index
// this.getListInit()
},
toProductDetail() {
uni.navigateTo({url: './productDetails'})
},
toMyOrder() {
uni.navigateTo({url: './myOrderList'})
}
},
onReachBottom() {
// this.current = this.current + 1
// this.getList()
},
}
</script>
<style lang="scss" scoped>
.AppRedemptionPoints {
.fixed-top {
background-color: #f3f6f9;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.header {
display: flex;
justify-content: space-between;
padding: 32px 24px;
background-color: #fff;
margin-bottom: 24px;
.num {
p {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24px;
color: #999;
line-height: 34px;
}
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 66px;
color: #FF6900;
line-height: 92px;
}
}
.btn {
width: 168px;
height: 64px;
border: 1px solid #4181FF;
line-height: 62px;
border-radius: 44px;
box-sizing: border-box;
text-align: center;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 26px;
color: #4181FF;
margin-top: 28px;
}
}
.search {
background-color: #fff;
.type-select {
display: flex;
border-top: 1px solid #D8D8D8;
line-height: 84px;
.item {
flex: 1;
text-align: center;
font-family: PingFangSC-Regular;
font-size: 26px;
color: #8891A1;
.down-icon {
display: inline-block;
margin-left: 8px;
transition: all 0.3s ease-in-out;
transform: rotate(0deg);
}
}
.active {
color: #4181FF;
.down-icon {
transform: rotate(180deg);
}
}
}
}
.list-content {
padding: 480px 0 24px 24px;
background-color: #f3f6f9;
.item {
width: calc(100% - 24px);
background-color: #fff;
border-radius: 20px;
position: relative;
margin-bottom: 24px;
img {
width: 100%;
height: 340px;
}
.type {
padding: 8px 16px;
font-family: PingFangSC-Regular;
font-size: 20px;
line-height: 28px;
color: #FFF;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
position: absolute;
top: 0;
right: 0;
}
.type0 {
background-color: #E64E39;
}
.type1 {
background-color: #FF6900;
}
.content {
padding: 16px 16px 24px;
position: relative;
.text {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 26px;
color: #222;
line-height: 38px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 12px;
}
.item-money {
width: calc(100% - 160px);
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 34px;
color: #FF6900;
line-height: 48px;
}
p {
font-family: PingFangSC;
font-weight: 600;
font-size: 26px;
color: #4181FF;
}
span {
display: inline-block;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 8px;
color: #4181FF;
line-height: 22px;
}
}
.btn {
padding: 14px 32px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 22px;
line-height: 28px;
border-radius: 44px;
position: absolute;
bottom: 24px;
right: 16px;
}
.btn0 {
background-color: #2D7DFF;
color: #FFF;
}
.btn1 {
background-color: #E2E2E2;
color: #666;
}
}
}
.item:nth-of-type(2n-1) {
margin-right: 22px;
}
}
}
</style>

BIN
src/project/fengdu/AppRedemptionPoints/img/success.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

250
src/project/fengdu/AppRedemptionPoints/myOrderList.vue Normal file
View File

@@ -0,0 +1,250 @@
<template>
<div class="myOrderList">
<div class="fixed-top">
<u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="90" font-size="28" bg-color="#fff" inactive-color="#8891A1"
active-color="#1D2229 " :bar-style="barStyle" @change="changeTab" ></u-tabs>
</div>
<div class="list-content">
<div class="item">
<div class="time-flex">
<p>2022-05-25 17:45</p>
<div>已完成</div>
</div>
<div class="flex">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
<div class="type type0"><p>京东低价商品</p></div>
<div class="flex-right">
<p>无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)无染(wuro)本色抽纸无染无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)无染(wuro)</p>
<div class="num-flex">
<h3>50积分<span>+2元</span></h3>
<div>x 1</div>
</div>
</div>
</div>
<p class="tips"><span>兑换成功后，点击「去购买」前往京东低价购买</span></p>
<p class="remark">备注：不太好用不太好用不太好用不太好用不太好用不太好用不太好用不太好用不太好用不太好用不太好用</p>
<div class="flex-btn">
<p>核销码:<span>58555</span></p>
<div class="btn">取消订单</div>
</div>
<div class="flex-btn">
<p></p>
<div class="btn confirm">去购买</div>
</div>
</div>
</div>
<!-- <AiEmpty v-else></AiEmpty> -->
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'myOrderList',
appName: '我的订单',
data() {
return {
tabList: [{name: '全部'}, {name: '待核销'}, {name: '已完成'}, {name: '已取消'}],
currentTabs: 0,
barStyle: {
'width': '20px',
'height': '3px',
'border-radius': '2px',
'bottom': '3px',
'background': '#2D7DFF'
},
}
},
computed: {
...mapState(['user']),
},
onLoad() {
},
methods: {
changeTab(index) {
this.currentTabs = index
// this.getListInit()
},
},
onReachBottom() {
// this.current = this.current + 1
// this.getList()
},
}
</script>
<style lang="scss" scoped>
.myOrderList {
min-height: 100%;
.fixed-top {
background-color: #fff;
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.list-content {
padding: 112px 24px 24px;
background-color: #F3F6F9;
.item {
width: 100%;
background: #FFF;
border-radius: 16px;
.time-flex {
padding: 0 32px;
line-height: 64px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #666;
display: flex;
justify-content: space-between;
border-bottom: 1px solid #ddd;
div {
color: #2D7DFF;
}
}
.flex {
padding: 32px 32px 0;
display: flex;
position: relative;
margin-bottom: 20px;
img {
width: 166px;
height: 166px;
border-radius: 16px;
margin-right: 20px;
}
.type {
position: absolute;
left: 32px;
bottom: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
width: 166px;
text-align: center;
line-height: 34px;
font-family: PingFangSC-Regular;
font-size: 18px;
color: #FFF;
p {
scale: 0.9;
}
}
.type0 {
background-color: #E64E39;
}
.type1 {
background-color: #FF6900;
}
.flex-right {
width: calc(100% - 186px);
p {
word-break: break-all;
font-family: PingFangSC-Regular;
font-size: 26px;
color: #222;
line-height: 34px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 50px;
}
.num-flex {
display: flex;
h3 {
width: calc(100% - 100px);
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 34px;
color: #FF6900;
line-height: 48px;
span {
display: inline-block;
font-size: 34px;
color: #4181FF;
margin-left: 8px;
}
}
div {
width: 100px;
text-align: right;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 24px;
color: #222;
line-height: 48px;
}
}
}
}
.tips {
display: inline-block;
padding: 12px;
line-height: 36px;
background: #F5FCF5;
border-radius: 16px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #3BBC37;
margin: 0 32px 16px 32px;
span {
display: inline-block;
scale: 0.9;
}
}
.remark {
font-family: PingFangSC-Regular;
font-size: 24px;
color: #666;
line-height: 34px;
word-break: break-all;
margin: 0 32px 24px 32px;
}
.flex-btn {
padding: 0 32px 32px;
display: flex;
justify-content: space-between;
p {
height: 56px;
line-height: 56px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #666;
span {
display: inline-block;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 28px;
color: #2D7DFF;
margin-left: 8px;
}
}
.btn {
width: 136px;
text-align: center;
line-height: 54px;
border: 1px solid #CCC;
border-radius: 44px;
font-family: PingFangSC-Regular;
font-size: 22px;
color: #666;
}
.confirm {
border: 1px solid #2D7DFF;
background-color: #2D7DFF;
color: #fff;
}
}
}
}
}
</style>

257
src/project/fengdu/AppRedemptionPoints/placeOrder.vue Normal file
View File

@@ -0,0 +1,257 @@
<template>
<div class="placeOrder">
<div class="header-info">
<div class="flex">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
<div class="type type0"><p>京东低价商品</p></div>
<div class="flex-right">
<p>无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)无染(wuro)本色抽纸无染无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)无染(wuro)</p>
<div>
<u-number-box v-model="value" @change="valChange" input-height="44" size="24" :min="1" :max="100"></u-number-box>
</div>
<h3>50积分<span>+￥2.00</span></h3>
</div>
</div>
<p class="tips"><span>兑换成功后，点击「去购买」前往京东低价购买</span></p>
</div>
<div class="content">
<div class="item-flex" @click="show=true">
<div class="label">订单备注</div>
<div class="value color-999">无备注<u-icon name="arrow-right" color="#bbb" size="24"></u-icon></div>
</div>
<div class="item-flex">
<div class="label">积分余额</div>
<div class="value color-FF6900">562积分</div>
</div>
<div class="item-flex">
<div class="label">支付积分</div>
<div class="value">减100积分</div>
</div>
<div class="item-flex">
<div class="label">京东支付</div>
<div class="value color-999">¥4.00</div>
</div>
</div>
<u-popup v-model="show" mode="bottom">
<div class="textarea">
<u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入备注" :clearable="false" maxlength="1000" />
<p>字数{{value.length}}/1000</p>
</div>
<div class="btn">
<span @click="value=''">清空内容</span>
<span class="confirm" @click="confirm">保存</span>
</div>
</u-popup>
<div class="bottom-btn" @click="toSuccess()">
<div>提交订单</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'placeOrder',
appName: '提交订单',
data() {
return {
value: 1,
show: false
}
},
computed: {
...mapState(['user']),
},
onLoad() {
},
methods: {
valChange(e) {
console.log('当前值为: ' + e.value)
},
toSuccess() {
uni.navigateTo({url: './successOrder'})
}
},
onReachBottom() {
// this.current = this.current + 1
// this.getList()
},
}
</script>
<style lang="scss" scoped>
.placeOrder {
.header-info {
padding: 48px 32px;
background-color: #fff;
margin-bottom: 24px;
.flex {
margin-bottom: 32px;
display: flex;
position: relative;
img {
width: 166px;
height: 166px;
border-radius: 16px;
margin-right: 20px;
}
.type {
position: absolute;
left: 0;
bottom: 0;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
width: 166px;
text-align: center;
line-height: 34px;
font-family: PingFangSC-Regular;
font-size: 18px;
color: #FFF;
p {
scale: 0.9;
}
}
.type0 {
background-color: #E64E39;
}
.type1 {
background-color: #FF6900;
}
.flex-right {
width: calc(100% - 186px);
p {
word-break: break-all;
font-family: PingFangSC-Regular;
font-size: 26px;
color: #222;
line-height: 34px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 22px;
}
div {
text-align: right;
}
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 34px;
color: #FF6900;
line-height: 48px;
span {
display: inline-block;
font-size: 34px;
color: #4181FF;
margin-left: 8px;
}
}
}
}
.tips {
display: inline-block;
padding: 12px;
line-height: 36px;
background: #F5FCF5;
border-radius: 16px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #3BBC37;
span {
display: inline-block;
scale: 0.9;
}
}
}
.content {
padding: 0 32px;
background-color: #fff;
.item-flex {
display: flex;
padding: 30px 0;
font-size: 26px;
line-height: 34px;
font-family: PingFangSC-Regular;
.label {
color: #222;
width: 120px;
}
.value {
width: calc(100% - 120px);
text-align: right;
color: #222;
}
.color-FF6900 {
color: #FF6900;
}
.color-999 {
color: #999;
}
}
}
.textarea {
margin: 32px 32px 24px;
width: calc(100% - 64px);
padding: 16px;
box-sizing: border-box;
background: #f7f7f7;
border-radius: 8px;
p {
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #999;
line-height: 36px;
text-align: right;
}
}
.btn {
padding: 0 32px 24px;
height: 64px;
display: flex;
justify-content: space-between;
span {
display: inline-block;
line-height: 64px;
font-size: 26px;
font-family: PingFangSC-Regular, PingFang SC;
color: #666;
}
.confirm {
width: 144px;
text-align: center;
background: #1365dd;
border-radius: 32px;
font-size: 28px;
font-family: PingFangSC-Regular, PingFang SC;
color: #fff;
}
}
.bottom-btn {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
padding: 20px 32px;
box-sizing: border-box;
div {
width: 100%;
height: 88px;
line-height: 88px;
text-align: center;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #FFF;
background: #4181FF;
}
}
}
</style>

171
src/project/fengdu/AppRedemptionPoints/productDetails.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<div class="productDetails">
<img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
<div class="type type0">免费兑</div>
<div class="product-info">
<p>无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)本色抽纸</p>
<h3>50积分<span>+￥2.00<span>（兑换后再付）</span></span></h3>
<div>零售单价¥10.00</div>
<span class="tips">免费兑换商品，可到固定的兑换点进行「核销兑换」</span>
</div>
<div class="product-content">
<p>商品描述：</p>
<p>“本色”最早起源于南朝刘勰《文心雕龙》_
“李”蟹悬架于栗龍登花《文温襞垄总理”寿事集色一
做过解释，“本色”就是求真，特别较真，有时候有点犟。泉林本色对“本色”的解释是对于生活是一种健康、环保的生活观念。
泉林本色是公司在长期的发展过程中逐渐打造的高端产品产品主要是涉岌泉秣本色生活角箱浆纸。产品种美包括软箱面巾纸、
盒抽面巾纸、卷纸、空心卷纸、实心卷纸、扁卷纸、手帕纸、饕币纸、珍宝纸、擦手纸、礼品套装等，种类齐全，在各个生活
的细微之处全面呵护消费者的健康。
</p>
</div>
<div class="btn" @click="toPlaceOrder()">
<div class="status0">立即兑换</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'productDetails',
appName: '兑换商品',
data() {
return {
}
},
computed: {
...mapState(['user']),
},
onLoad() {
},
methods: {
toPlaceOrder() {
uni.navigateTo({url: './placeOrder'})
}
},
onReachBottom() {
// this.current = this.current + 1
// this.getList()
},
}
</script>
<style lang="scss" scoped>
.productDetails {
background-color: #f3f6f9;
position: relative;
img {
width: 100%;
height: 750px;
}
.type {
position: absolute;
top: 0;
right: 0;
line-height: 42px;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 30px;
color: #FFF;
padding: 16px 16px 16px 36px;
border-bottom-left-radius: 40px;
}
.type0 {
background-color: #E64E39;
}
.type1 {
background-color: #FF6900;
}
.product-info {
padding: 32px;
background-color: #fff;
margin-bottom: 24px;
p {
word-break: break-all;
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 48px;
color: #222;
letter-spacing: 0;
line-height: 76px;
margin-bottom: 8px;
}
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 44px;
color: #FF6900;
margin-bottom: 8px;
span {
font-size: 44px;
color: #4181FF;
margin-left: 8px;
span {
font-weight: 400;
font-family: PingFangSC-Regular;
font-size: 32px;
}
}
}
div {
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24px;
color: #999;
line-height: 34px;
margin-bottom: 24px;
text-decoration: line-through;
}
.tips {
display: inline-block;
padding: 12px;
line-height: 36px;
background: #F5FCF5;
border-radius: 16px;
font-family: PingFangSC-Regular;
font-size: 24px;
color: #3BBC37;
}
}
.product-content {
padding: 34px 64px 162px;
background-color: #fff;
p {
font-family: PingFangSC-Regular;
font-size: 32px;
color: #666;
line-height: 60px;
}
}
.btn {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #fff;
padding: 20px 32px;
box-sizing: border-box;
div {
width: 100%;
height: 88px;
line-height: 88px;
text-align: center;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
}
.status0 {
color: #FFF;
background: #4181FF;
}
.status1 {
color: #666;
background: #E2E2E2;
}
}
}
</style>

116
src/project/fengdu/AppRedemptionPoints/successOrder.vue Normal file
View File

@@ -0,0 +1,116 @@
<template>
<div class="successOrder">
<img src="./img/success.png" alt="">
<div v-if="isOrder">
<h3>提交成功</h3>
<p>提交「免费兑」订单成功，扣减 <span>50积分</span></p>
<div class="btn-flex">
<div>返回</div>
<div>查看订单</div>
</div>
</div>
<div v-else>
<h3>兑换成功</h3>
<p>提交「京东低价商品」订单成功，扣减 <span>50积分</span>
可点击下方按钮前往京东商城进行低价购买
</p>
<div class="btn">去购买</div>
</div>
</div>
</template>
<script>
import {mapState} from "vuex";
export default {
name: 'successOrder',
appName: '提交订单',
data() {
return {
isOrder: false
}
},
computed: {
...mapState(['user']),
},
onLoad() {
},
methods: {
},
onReachBottom() {
// this.current = this.current + 1
// this.getList()
},
}
</script>
<style lang="scss" scoped>
uni-page-body{
background-color: #fff;
}
.successOrder {
padding: 0 60px;
text-align: center;
img {
width: 240px;
height: 232px;
margin: 168px auto 32px auto;
}
h3 {
font-family: PingFangSC-SNaNpxibold;
font-weight: 600;
font-size: 40px;
color: #333;
line-height: 56px;
margin-bottom: 16px;
}
p {
color: #333;
font-size: 30px;
font-family: PingFangSC;
line-height: 50px;
text-align: center;
margin-bottom: 80px;
span {
color: #FF6900;
}
}
.btn {
width: 410px;
height: 88px;
line-height: 88px;
background: #2D7DFF;
border-radius: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
color: #FFF;
text-align: center;
margin: 0 auto;
}
.btn-flex {
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 34px;
margin: 0 auto;
div {
display: inline-block;
width: 272px;
text-align: center;
height: 88px;
line-height: 88px;
border-radius: 44px;
color: #FFF;
background-color: #2D7DFF;
}
div:nth-of-type(1) {
background-color: #E5EFFF;
color: #2D7DFF;
margin-right: 26px;
}
}
}
</style>