You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
801 lines
19 KiB
801 lines
19 KiB
<template>
|
|
<view>
|
|
<!-- #ifdef H5 -->
|
|
<view v-if="showHeader" class="status" :style="{position:headerPosition,top:statusTop}"></view>
|
|
<view v-if="showHeader" class="header" :style="{position:headerPosition,top:headerTop}"></view>
|
|
<!-- 占位 -->
|
|
<view v-if="showHeader" class="place"></view>
|
|
<!-- #endif -->
|
|
<view class="user">
|
|
<!-- 头像 -->
|
|
<view class="left">
|
|
<image :src="imagewxUrl+imgadres" v-if="!user.headerImg"></image>
|
|
<image :src="user.headerImg" v-else></image>
|
|
</view>
|
|
<!-- 昵称 -->
|
|
<view class="right">
|
|
<!-- #ifdef MP -->
|
|
<view class="username" v-if="user && user.infoCompleteStatus == 1" @click="jumplogin">点击获取信息</view>
|
|
<view class="username" v-else>{{user.name}}</view>
|
|
<!-- #endif -->
|
|
<!-- #ifdef H5 -->
|
|
<view class="username">{{user.name}}</view>
|
|
<!-- #endif -->
|
|
<view class="font14 fcor333">{{userphone}}</view>
|
|
</view>
|
|
</view>
|
|
<!-- 优惠券，卡券 -->
|
|
<view class="headcoun width100">
|
|
<view class="height80 alijus width92 border-8r backcorfff">
|
|
<view class="width45 fotct" @click="jumppage(5)">
|
|
<view class="width100 font12 fcor333"><text class="font20 marglerig">{{textnum}} </text> 张</view>
|
|
<view class="width100 font18 fcor333 mart5">卡券</view>
|
|
</view>
|
|
<view style="width: 1px;height: 50px;background-color: #f6f6f6;">
|
|
</view>
|
|
<view class="width45 fotct" @click="jumppage(6)">
|
|
<view class="width100 font12 fcor333"><text class="font20 marglerig">{{textSend}} </text> 张</view>
|
|
<view class="width100 font18 fcor333 mart5">优惠券</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单-余额 -->
|
|
<view class="order">
|
|
<!-- 订单类型 -->
|
|
<view class="title width94">
|
|
<view class="width70 fontwig6">订单</view>
|
|
<view class="width30 alijusend font14 fcor999" @click="toOrderList(-1)">全部订单<image class="icon15"
|
|
mode="widthFix" src="../../../static/img/jt.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="box" v-for="(row,index) in orderList" :key="index" @tap="toOrderList(index)">
|
|
<uni-badge style="width: 20px;position: absolute; left: 18%;" v-if="row.text == '待支付' && therrNum "
|
|
:text="therrNum" type="error" size="normal"></uni-badge>
|
|
<uni-badge style="width: 20px;position: absolute; left: 42%;"
|
|
v-if="row.text == '已支付' && orderPayNum " :text="orderPayNum" type="error" size="normal">
|
|
</uni-badge>
|
|
<view class="img">
|
|
<image :src="row.icon" class="icon40" mode="widthFix"></image>
|
|
</view>
|
|
<view class="text mart10">{{row.text}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="width90 mart10 height60">
|
|
<swiper circular="true" interval="3000" autoplay="true">
|
|
<swiper-item v-for="(swiper,index) in nopaylist" :key="index">
|
|
<view class="alijusstart border-8r backcor9 height60 ">
|
|
<image mode="widthFix" class="icon40 margle10" src="../../../static/img/user/user5.png">
|
|
</image>
|
|
<view class="width50 margle10">
|
|
<view class="font15 fcor333 fontspec">等待付款</view>
|
|
<view class="font12 fcor666 fontspec mart5">剩余时间: 13:44</view>
|
|
</view>
|
|
<view class="topay">
|
|
去支付
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 我的资产 -->
|
|
<view class="order">
|
|
<view class="title width94">
|
|
<view class="width70 fontwig6 alijusstart">我的资产
|
|
<image mode="widthFix" class="icon30" v-if="assetsstu == 2" @click="updatestu(2)"
|
|
src="../../../static/img/user/user6.png"></image>
|
|
<image mode="widthFix" class="icon20 margle" v-if="assetsstu == 1" @click="updatestu(1)"
|
|
src="../../../static/img/user/user14.png"></image>
|
|
</view>
|
|
<view class="width30 alijusend font14 fcor999" @click="jumppage(4)">进入卡包<image class="icon15"
|
|
mode="widthFix" src="../../../static/img/jt.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="mart15 width90 alijus fotct paddbotm10">
|
|
<view class="width31">
|
|
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
|
|
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
|
|
<view class="fontspec font14 fcor333 mart5">积分余额</view>
|
|
</view>
|
|
<view class="width31">
|
|
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
|
|
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
|
|
<view class="fontspec font14 fcor333 mart5">油卡余额</view>
|
|
</view>
|
|
<view class="width31">
|
|
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 2">****</view>
|
|
<view class="fontspec font20 fcor333 fontwig6" v-if="assetsstu == 1">¥2400</view>
|
|
<view class="fontspec font14 fcor333 mart5">工会卡余额</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 商务中心 -->
|
|
<view class="order">
|
|
<view class="title width94">
|
|
<view class="width70 fontwig6">商务中心</view>
|
|
</view>
|
|
<view class="width90 alijus fotct paddbotm10 mart10">
|
|
<view class="width31" @click="jumppage(1)">
|
|
<image mode="widthFix" class="icon45" src="../../../static/img/user/user7.png"></image>
|
|
<view class="fontspec font14 fcor333 mart5">门店登陆</view>
|
|
</view>
|
|
<view class="width31" @click="jumppage(2)">
|
|
<image mode="widthFix" class="icon45" src="../../../static/img/user/user8.png"></image>
|
|
<view class="fontspec font14 fcor333 mart5">代理商登陆</view>
|
|
</view>
|
|
<view class="width31" @click="jumppage(3)">
|
|
<image mode="widthFix" class="icon45" src="../../../static/img/user/user9.png"></image>
|
|
<view class="fontspec font14 fcor333 mart5">我的推广</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 其他 -->
|
|
<view class="order">
|
|
<view class="height20 width94">
|
|
</view>
|
|
<view class="list">
|
|
<view class="box" v-for="(row,index) in czList" :key="index" @tap="toPage(row.url,row.text)">
|
|
<view class="img" v-if="row.text != '客服' ">
|
|
<image :src="row.img" class="icon40" mode="widthFix"></image>
|
|
</view>
|
|
<button open-type="contact" style="background-color: transparent;" class="img" show-message-card
|
|
session-from send-message-path send-message-title v-if="row.text == '客服' ">
|
|
<image class="icon40" mode="widthFix" :src="row.img"></image>
|
|
</button>
|
|
<view class="text mart10">{{row.text}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="place-bottom"></view>
|
|
<!-- <authorize></authorize> -->
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
loginByPhone,
|
|
findUser,
|
|
loginOut
|
|
} from "../../../Utils/Api.js";
|
|
// import authorize from '../../../components/Authorize';
|
|
import uniBadge from "../../../components/uni-badge/components/uni-badge/uni-badge.vue";
|
|
let app = getApp()
|
|
export default {
|
|
components: {
|
|
// authorize,
|
|
uniBadge
|
|
},
|
|
data() {
|
|
return {
|
|
imagewxUrl: app.globalData.imageWxImg,
|
|
imgadres: 'head.png',
|
|
headerPosition: "fixed",
|
|
textnum: '',
|
|
textSend: '',
|
|
therrNum: '',
|
|
rechargeOrderNum: '', //话费待支付
|
|
whetherCheckNum: '', //未查看数量
|
|
orderPayNum: '', //支付订单数量
|
|
headerTop: null,
|
|
statusTop: null,
|
|
showHeader: true,
|
|
//个人信息,
|
|
user: "",
|
|
// 订单类型
|
|
orderList: [{
|
|
text: '待支付',
|
|
icon: "../../../static/img/user/user1.png"
|
|
},
|
|
{
|
|
text: '已支付',
|
|
icon: "../../../static/img/user/user2.png"
|
|
},
|
|
{
|
|
text: '已完成',
|
|
icon: "../../../static/img/user/user3.png"
|
|
}, {
|
|
text: '已退款',
|
|
icon: "../../../static/img/user/user4.png"
|
|
}
|
|
],
|
|
huafeiList: [{
|
|
text: '待支付',
|
|
icon: "fukuan"
|
|
},
|
|
{
|
|
text: '已支付',
|
|
icon: "fahuo"
|
|
},
|
|
{
|
|
text: '已完成',
|
|
icon: "shouhuo"
|
|
}, {
|
|
text: '已取消',
|
|
icon: "pingjia"
|
|
}, {
|
|
text: '已退款',
|
|
icon: "tuihuo"
|
|
}
|
|
],
|
|
//操作列表
|
|
czList: '',
|
|
nopaylist: [1, 2, 3, 4, 5],
|
|
assetsstu: 2,
|
|
userphone:'' // 手机号
|
|
}
|
|
},
|
|
//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
|
|
onPullDownRefresh() {
|
|
setTimeout(function() {
|
|
uni.stopPullDownRefresh();
|
|
}, 1000);
|
|
},
|
|
onPageScroll(e) {
|
|
//兼容iOS端下拉时顶部漂移
|
|
this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute";
|
|
this.headerTop = e.scrollTop >= 0 ? null : 0;
|
|
this.statusTop = e.scrollTop >= 0 ? null : -this.statusHeight + 'px';
|
|
},
|
|
onLoad() {
|
|
this.statusHeight = 0;
|
|
// #ifdef H5
|
|
this.showHeader = true;
|
|
// this.statusHeight = plus.navigator.getStatusbarHeight();
|
|
// #endif
|
|
if (!app.globalData.userInfo) {
|
|
this.findUser()
|
|
}
|
|
},
|
|
onReady() {
|
|
//此处，演示,每次页面初次渲染都把登录状态重置
|
|
uni.setStorage({
|
|
key: 'UserInfo',
|
|
data: false,
|
|
success: function() {},
|
|
fail: function(e) {}
|
|
});
|
|
},
|
|
onShow() {
|
|
if (app.globalData.userInfo) {
|
|
this.findUser();
|
|
}
|
|
// #ifdef MP
|
|
if (!app.globalData.userInfo.isSetPayPwd) {
|
|
this.czList = [{
|
|
url: '/pages/goods/recording/recording',
|
|
text: '积分记录',
|
|
img: '../../../static/img/user/user10.png'
|
|
},
|
|
|
|
{
|
|
url: '../../login/updatePas/updatePas',
|
|
text: '支付密码',
|
|
img: '../../../static/img/user/user11.png'
|
|
}, {
|
|
url: '',
|
|
text: '客服',
|
|
img: '../../../static/img/user/user13.png'
|
|
}
|
|
]
|
|
return;
|
|
}
|
|
this.czList = [{
|
|
url: '/pages/goods/recording/recording',
|
|
text: '积分记录',
|
|
img: '../../../static/img/user/user10.png'
|
|
},
|
|
{
|
|
url: '../../login/updatePas/resetPas',
|
|
text: '支付密码',
|
|
img: '../../../static/img/user/user11.png'
|
|
}, {
|
|
url: '',
|
|
text: '客服',
|
|
img: '../../../static/img/user/user13.png'
|
|
}
|
|
]
|
|
// #endif
|
|
// #ifdef H5
|
|
if (!app.globalData.userInfo.isSetPayPwd) {
|
|
this.czList = [{
|
|
url: '/pages/goods/recording/recording',
|
|
text: '积分记录',
|
|
img: '../../../static/img/ghkpay.png'
|
|
},
|
|
{
|
|
url: '../../login/updatePas/updatePas',
|
|
text: '支付密码',
|
|
img: '../../../static/img/user/user11.png'
|
|
}, {
|
|
url: '',
|
|
text: '退出登录',
|
|
img: '../../../static/img/user/user12.png'
|
|
}, {
|
|
url: '',
|
|
text: '客服',
|
|
img: '../../../static/img/user/user13.png'
|
|
}
|
|
]
|
|
return;
|
|
}
|
|
this.czList = [{
|
|
url: '../../../subPages/cardsList/cardsList',
|
|
text: '卡包',
|
|
img: '../../../static/img/ghkpay.png'
|
|
},
|
|
{
|
|
url: '../../login/updatePas/resetPas',
|
|
text: '支付密码',
|
|
img: '../../../static/img/user/user11.png'
|
|
},
|
|
{
|
|
url: '',
|
|
text: '退出登录',
|
|
img: '../../../static/img/exit.png'
|
|
}, {
|
|
url: '',
|
|
text: '客服',
|
|
img: '../../../static/img/user/user13.png'
|
|
}
|
|
]
|
|
// #endif
|
|
},
|
|
methods: {
|
|
findUser() {
|
|
let params;
|
|
findUser(params).then(res => {
|
|
if (res.return_code == '000000') {
|
|
app.globalData.userInfo = res.return_data;
|
|
this.user = res.return_data;
|
|
this.textnum = res.return_data.unusedCouponNum;
|
|
this.textSend = res.return_data.unusedDiscount;
|
|
this.therrNum = res.return_data.unpaid;
|
|
this.whetherCheckNum = res.return_data.whetherCheckNum;
|
|
this.orderPayNum = res.return_data.orderPayNum;
|
|
this.rechargeOrderNum = res.return_data.rechargeOrderNum;
|
|
this.geTel(this.user.phone);
|
|
uni.setStorage({
|
|
key: "user",
|
|
data: res.return_data
|
|
})
|
|
}
|
|
});
|
|
},
|
|
//跳转用户信息
|
|
jumplogin() {
|
|
uni.navigateTo({
|
|
url: '../../userLogin/userLogin'
|
|
})
|
|
},
|
|
toOrderList(index) {
|
|
uni.navigateTo({
|
|
url: '../../user/order_list/order_list?tbIndex=' + index
|
|
})
|
|
},
|
|
// 隐藏手机号
|
|
geTel(tel) {
|
|
var reg = /^(\d{3})\d{4}(\d{4})$/;
|
|
this.userphone = tel.replace(reg, "$1****$2");
|
|
},
|
|
// 资产查看状态
|
|
updatestu(item) {
|
|
if (item == 1) {
|
|
this.assetsstu = 2;
|
|
}
|
|
if (item == 2) {
|
|
this.assetsstu = 1;
|
|
}
|
|
},
|
|
// 推广
|
|
jumppage(item) {
|
|
if (item == 1) {
|
|
uni.navigateTo({
|
|
url: '../../login/login?id=1'
|
|
})
|
|
}
|
|
if (item == 2) {
|
|
uni.navigateTo({
|
|
url: '../../login/login?id=2'
|
|
})
|
|
}
|
|
if (item == 3) {
|
|
uni.navigateTo({
|
|
url: '/pages/user/myPromotion/myPromotion'
|
|
})
|
|
}
|
|
if (item == 4) {
|
|
uni.navigateTo({
|
|
url: '../../../subPages/cardsList/cardsList'
|
|
})
|
|
}
|
|
if (item == 5) {
|
|
uni.navigateTo({
|
|
url: '/pages/user/mineCoupons/mineCoupons'
|
|
})
|
|
}
|
|
if (item == 6) {
|
|
uni.navigateTo({
|
|
url: '../../user/coupon/coupon'
|
|
})
|
|
}
|
|
},
|
|
toPage(url, item) {
|
|
if (item != '客服') {
|
|
uni.navigateTo({
|
|
url: url
|
|
})
|
|
}
|
|
// #ifdef H5
|
|
if (item == '客服') {
|
|
uni.showModal({
|
|
title: '客服',
|
|
content: '4006780738',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: '4006780738', //电话号码
|
|
success: function(e) {
|
|
console.log(e);
|
|
},
|
|
fail: function(e) {
|
|
console.log(e);
|
|
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
// #endif
|
|
if (item == '退出登录') {
|
|
uni.showModal({
|
|
title: '退出登录',
|
|
content: '是否退出当前账号',
|
|
success: function(res) {
|
|
if (res.confirm) {
|
|
loginOut().then(res => {
|
|
if (res.return_code == '000000') {
|
|
app.globalData.userInfo = '';
|
|
app.globalData.token = '';
|
|
uni.setStorage({
|
|
key: "user",
|
|
data: ''
|
|
})
|
|
uni.setStorage({
|
|
key: "token",
|
|
data: ''
|
|
})
|
|
// location.reload();
|
|
uni.navigateTo({
|
|
url: '/pages/login/register'
|
|
})
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.status {
|
|
width: 100%;
|
|
height: 0;
|
|
position: fixed;
|
|
z-index: 10;
|
|
background-color: #0083f5;
|
|
top: 0;
|
|
/* #ifdef APP-PLUS */
|
|
height: var(--status-bar-height); //覆盖样式
|
|
/* #endif */
|
|
|
|
}
|
|
|
|
.header {
|
|
width: 92%;
|
|
padding: 0 4%;
|
|
height: 100upx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 10;
|
|
background-color: #0083f5;
|
|
/* #ifdef APP-PLUS */
|
|
top: var(--status-bar-height);
|
|
|
|
/* #endif */
|
|
.icon-btn {
|
|
width: 120upx;
|
|
height: 60upx;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
|
|
.icon {
|
|
color: #fff;
|
|
width: 60upx;
|
|
height: 60upx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
font-size: 42upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
button::after {
|
|
border: none
|
|
}
|
|
|
|
.headcoun {
|
|
background: linear-gradient(to bottom, #e8eff4, #f5f5f5);
|
|
height: 100px;
|
|
}
|
|
|
|
.topay {
|
|
width: 70px;
|
|
height: 25px;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
line-height: 25px;
|
|
border-radius: 20px;
|
|
border: 1px solid #009DFF;
|
|
color: #009DFF;
|
|
}
|
|
|
|
.place {
|
|
background-color: #0083f5;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
text-align: right;
|
|
height: 100upx;
|
|
/* #ifdef APP-PLUS */
|
|
margin-top: var(--status-bar-height);
|
|
|
|
/* #endif */
|
|
image {
|
|
width: 30px;
|
|
height: 30px;
|
|
}
|
|
}
|
|
|
|
.place-bottom {
|
|
height: 200upx;
|
|
}
|
|
|
|
swiper {
|
|
height: 60px !important;
|
|
}
|
|
|
|
swiper-item {
|
|
height: 60px !important;
|
|
}
|
|
|
|
.user {
|
|
width: 96%;
|
|
padding: 0 4%;
|
|
display: flex;
|
|
align-items: center;
|
|
// position: relative;
|
|
padding-bottom: 40rpx;
|
|
background: linear-gradient(to bottom, #6fbdee, #e8eff4);
|
|
|
|
.left {
|
|
width: 20vw;
|
|
height: 20vw;
|
|
flex-shrink: 0;
|
|
margin-right: 20upx;
|
|
border: solid 1upx #fff;
|
|
border-radius: 100%;
|
|
|
|
image {
|
|
width: 20vw;
|
|
height: 20vw;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
.right {
|
|
width: 100%;
|
|
|
|
.username {
|
|
font-size: 36upx;
|
|
color: #333333;
|
|
}
|
|
|
|
.signature {
|
|
color: #eee;
|
|
font-size: 28upx;
|
|
}
|
|
}
|
|
|
|
.erweima {
|
|
flex-shrink: 0;
|
|
width: 100px;
|
|
height: 30px;
|
|
border-radius: 15px 0px 0px 15px;
|
|
padding: 0;
|
|
margin-left: 5vw;
|
|
background-color: #1391f6;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.icon {
|
|
color: #7b6335;
|
|
font-size: 42upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order {
|
|
.title {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
font-size: 36upx;
|
|
height: 80upx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
width: 92%;
|
|
margin: 30rpx 4% 30rpx 4%;
|
|
padding: 0rpx 0% 40rpx 0%;
|
|
background-color: #fff;
|
|
box-shadow: 0rpx 0rpx 25rpx rgba(0, 0, 0, 0.1);
|
|
border-radius: 15rpx;
|
|
|
|
.list {
|
|
display: flex;
|
|
padding-bottom: 10upx;
|
|
|
|
.box {
|
|
width: 25%;
|
|
|
|
.img {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.text {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 28upx;
|
|
color: #3d3d3d;
|
|
}
|
|
}
|
|
}
|
|
|
|
.balance-info {
|
|
display: flex;
|
|
padding: 10upx 0;
|
|
|
|
.left {
|
|
width: 75%;
|
|
display: flex;
|
|
|
|
.box {
|
|
width: 50%;
|
|
font-size: 28upx;
|
|
|
|
.num {
|
|
width: 100%;
|
|
height: 50upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
color: #f9a453;
|
|
}
|
|
|
|
.text {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
color: #3d3d3d;
|
|
font-size: 28upx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
border-left: solid 1upx #17e6a1;
|
|
width: 25%;
|
|
|
|
.box {
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 50upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
|
|
.icon {
|
|
font-size: 45upx;
|
|
color: #e78901;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 28upx;
|
|
color: #3d3d3d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolbar {
|
|
width: 92%;
|
|
margin: 0 4% 0 4%;
|
|
padding: 0 0 20upx 0;
|
|
background-color: #fff;
|
|
box-shadow: 0upx 0upx 25upx rgba(0, 0, 0, 0.1);
|
|
border-radius: 15upx;
|
|
|
|
.title {
|
|
padding-top: 10upx;
|
|
margin: 0 0 10upx 3%;
|
|
font-size: 30upx;
|
|
height: 80upx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.box {
|
|
width: 25%;
|
|
margin-bottom: 40upx;
|
|
|
|
.img {
|
|
width: 23vw;
|
|
height: 10.5vw;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 9vw;
|
|
height: 9vw;
|
|
}
|
|
}
|
|
|
|
.text {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
font-size: 26upx;
|
|
color: #3d3d3d;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|