781 lines
24 KiB
Vue
781 lines
24 KiB
Vue
<template>
|
||
<view class="earlyWarningBox">
|
||
<view class="earlyTop">
|
||
<view class="earlyTopBg"></view>
|
||
<view class="headerBox" :style="{top:menu.top + 'px',height:menu.height+'px'}">
|
||
<view class="backIconBox">
|
||
<image class="backIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/navigation-left.svg"/>
|
||
</view>
|
||
<view class="timeBox">
|
||
<view class="timeIconBox">
|
||
<image class="timeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/selectIcon.svg"/>
|
||
</view>
|
||
<!-- <uni-datetime-picker v-model="datetimerange" type="daterange"/>-->
|
||
<!-- <picker class="timeSelect" mode="date" fields="month" :end="end" onChange="handleGetStartTime(e)">{{startDate}}</picker>-->
|
||
<!-- <span class="timeSelect" style="margin: 0 4rpx">-</span>-->
|
||
<!-- <picker class="timeSelect" mode="date" fields="month" :end="end">{{endDate}}</picker>-->
|
||
<image class="downIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/downIcon.svg"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="errorWarning" :style="{top: menu.bottom + 18 + 'px'}">
|
||
<view class="errorTitle">
|
||
<image class="warningIcon" src="/static/images/warning/warningIcon.png"/>
|
||
<text class="title">经营异常预警</text>
|
||
</view>
|
||
<view class="errorContent">
|
||
<view class="contentItem">
|
||
<view style="display: flex;align-items: center">
|
||
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/accountIcon.svg"/>
|
||
<text class="contentText">车流增加，服务区经营减少</text>
|
||
</view>
|
||
<text class="value">15</text>
|
||
</view>
|
||
|
||
<view class="contentItem">
|
||
<view style="display: flex;align-items: center">
|
||
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/entryIcon.svg"/>
|
||
<text class="contentText">车流增加，门店的营收减少</text>
|
||
</view>
|
||
<text class="value">24</text>
|
||
</view>
|
||
|
||
<view class="contentItem">
|
||
<view style="display: flex;align-items: center">
|
||
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/payIcon.svg"/>
|
||
<text class="contentText">车流增加，营收增长不匹配</text>
|
||
</view>
|
||
<text class="value">18</text>
|
||
</view>
|
||
|
||
<view class="contentItem" style="margin-bottom: 0">
|
||
<view style="display: flex;align-items: center">
|
||
<image class="itemIcon" src="/static/images/warning/dataIcon.png"/>
|
||
<text class="contentText">车流减少，营收降低不匹配</text>
|
||
</view>
|
||
<text class="value">13</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="servicepartContent">
|
||
<view class="contentTitle">
|
||
<image class="contentIcon" src="/static/images/warning/foodIcon.png"/>
|
||
<view class="titleBox">
|
||
<text class="title">服务区数据</text>
|
||
<text class="desc">/同比去年</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="selectBox">
|
||
<scroll-view scroll-x="true" class="scrollBox">
|
||
<view style="display: inline-block">
|
||
<view class="scrollItem selectScroll">
|
||
<image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/accountIcon.svg"/>
|
||
<text class="text">经营</text>
|
||
</view>
|
||
</view>
|
||
<view style="display: inline-block">
|
||
<view class="scrollItem">
|
||
<image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/entryIcon.svg"/>
|
||
<text class="text">营收</text>
|
||
</view>
|
||
</view>
|
||
<view style="display: inline-block">
|
||
<view class="scrollItem">
|
||
<image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/merchantAccount/payIcon.svg"/>
|
||
<text class="text">增长</text>
|
||
</view>
|
||
</view>
|
||
<view style="display: inline-block">
|
||
<view class="scrollItem">
|
||
<image class="itemImg" src="/static/images/warning/dataIcon.png"/>
|
||
<text class="text">减少</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="fixedRight" @click="handleShowPopup">
|
||
<image class="filterIcon" src="/static/images/warning/filter.png"/>
|
||
筛选
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dataList">
|
||
<view class="listTitle">
|
||
<view class="sortItem" style="width: 50%">
|
||
<text class="sortName">服务区名称</text>
|
||
</view>
|
||
|
||
<view class="sortItem" style="width: 25%">
|
||
<text class="sortName">对客销售</text>
|
||
<view class="sortIconBox">
|
||
<image class="upIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg"/>
|
||
<image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg"/>
|
||
</view>
|
||
</view>
|
||
<view class="sortItem" style="width: 25%">
|
||
<text class="sortName">入区车流</text>
|
||
<view class="sortIconBox">
|
||
<image class="upIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/upDesc.svg"/>
|
||
<image class="bottomIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/car/downDesc.svg"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="listContent">
|
||
<view class="listItem">
|
||
<view class="itemTop">
|
||
<view class="itemTopLeft">
|
||
<image class="topItemIcon"/>
|
||
<text class="name">新桥</text>
|
||
<text class="unit">/服务区</text>
|
||
<image class="message"/>
|
||
</view>
|
||
|
||
<view class="itemTopRight">
|
||
<view class="warningNotice">
|
||
<image class="notice" src="/static/images/warning/warningIcon.png"/>
|
||
<text class="shopNumber">5个门店</text>
|
||
</view>
|
||
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/goMore.svg"/>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="itemContent">
|
||
<view class="secondItem">
|
||
<view class="bgBox">
|
||
<image class="bg" src="/static/images/warning/revenueBg.png"/>
|
||
</view>
|
||
<view class="secondItemTop">
|
||
<text class="itemTopName">对客销售</text>
|
||
<text class="itemTopUnit">/万元</text>
|
||
</view>
|
||
<view class="itemValue">55.08</view>
|
||
<view class="addRate">
|
||
<!-- 增长-->
|
||
<text class="redValue" style="margin-right: 8rpx">+3.54</text>
|
||
<!-- 增幅-->
|
||
<text class="redValue">+1.37%</text>
|
||
<text class="unit">同比</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="secondItem">
|
||
<view class="bgBox">
|
||
<image class="bg" src="/static/images/warning/carBg.png"/>
|
||
</view>
|
||
<view class="secondItemTop">
|
||
<text class="itemTopName">入区车流</text>
|
||
<text class="itemTopUnit">/辆</text>
|
||
</view>
|
||
<view class="itemValue">55.08</view>
|
||
<view class="addRate">
|
||
<!-- 增长-->
|
||
<text class="redValue" style="margin-right: 8rpx">+3.54</text>
|
||
<!-- 增幅-->
|
||
<text class="redValue">+1.37%</text>
|
||
<text class="unit">同比</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<uniPopup type="bottom" :round="true" :show="showPop" @hidePopup="hidePopup">
|
||
<view class="uniPopup">
|
||
<view class="uniPopupTop">
|
||
<text class="uniPopupTitle">筛选</text>
|
||
<image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
|
||
</view>
|
||
<view class="filterBox">
|
||
<view class="filterTitle">经营模式</view>
|
||
<view class="filterItemList">
|
||
<view class="filterItem">便利店</view>
|
||
<view class="filterItem">餐饮客房</view>
|
||
<view class="filterItem">商铺租赁</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="filterBox" style="margin-top: 48rpx">
|
||
<view class="filterTitle">经营业态</view>
|
||
<view class="filterItemList">
|
||
<view class="filterItem">餐饮主食</view>
|
||
<view class="filterItem">休闲小吃</view>
|
||
<view class="filterItem">生活零售</view>
|
||
<view class="filterItem">汽车服务</view>
|
||
<view class="filterItem">司乘体验</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="filterBox" style="margin-top: 48rpx">
|
||
<view class="filterTitle">排行类型</view>
|
||
<view class="filterItemList">
|
||
<view class="filterItem">全局排行</view>
|
||
<view class="filterItem">管理排行</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="button">确定</view>
|
||
</view>
|
||
</uniPopup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import moment from "moment";
|
||
import UniDatetimePicker
|
||
from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue";
|
||
import UniPopup from "../../components/uni-popup.vue";
|
||
export default {
|
||
name: "index",
|
||
components: {UniPopup, UniDatetimePicker},
|
||
data(){
|
||
return {
|
||
menu:{},
|
||
showPop:false,// 弹出框
|
||
datetimerange:[moment().format('YYYY/MM'),moment().format('YYYY/MM')]
|
||
// startDate: moment().format('YYYY/MM'),//开始时间
|
||
// endDate: moment().format('YYYY/MM'),// 结束时间
|
||
// end: moment().format('YYYY/MM'),//结束的时间范围
|
||
}
|
||
},
|
||
onLoad(query){
|
||
let systemInfo = uni.getSystemInfoSync()
|
||
this.menu = uni.getMenuButtonBoundingClientRect()
|
||
},
|
||
methods:{
|
||
// 显示弹出框
|
||
handleShowPopup(){
|
||
this.showPop = true
|
||
},
|
||
// 隐藏弹出框
|
||
hidePopup(){
|
||
this.showPop = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.earlyWarningBox{
|
||
width: 100%;
|
||
background: #F3F3F3;
|
||
.earlyTop{
|
||
width: 100%;
|
||
height: 616rpx;
|
||
background: #F3F3F3;
|
||
position: relative;
|
||
.earlyTopBg{
|
||
width: 100%;
|
||
height: 430rpx;
|
||
background: linear-gradient( 180deg, #D8E3FF 0%, #F3F3F3 100%);
|
||
}
|
||
.headerBox{
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.backIconBox{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 18rpx;
|
||
.backIcon{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.timeBox{
|
||
display: flex;
|
||
align-items: center;
|
||
.timeIconBox{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 12rpx;
|
||
.timeIcon{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.timeSelect{
|
||
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.downIcon{
|
||
width: 30rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.errorWarning{
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 32rpx;
|
||
position: absolute;
|
||
left: 0;
|
||
.errorTitle{
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient( 180deg, #F2F3FF 0%, #F7F8FF 100%);
|
||
border-top-right-radius: 16rpx;
|
||
border-top-left-radius: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
.warningIcon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.title{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #212226;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.errorContent{
|
||
width: 100%;
|
||
//height: 328rpx;
|
||
background: #FFFFFF;
|
||
border-bottom-right-radius: 16rpx;
|
||
border-bottom-left-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
.contentItem{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
.itemIcon{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.contentText{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.value{
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #160002;
|
||
line-height: 42rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.servicepartContent{
|
||
width: 100%;
|
||
height: calc(100vh - 616rpx);
|
||
border-top-left-radius: 32rpx;
|
||
border-top-right-radius: 32rpx;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 32rpx 0 32rpx 32rpx;
|
||
.contentTitle{
|
||
display: flex;
|
||
align-items: center;
|
||
.contentIcon{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
.titleBox{
|
||
margin-left: 12rpx;
|
||
.title{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #212226;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.desc{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #786B6C;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.selectBox{
|
||
width: 100%;
|
||
height: 72rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 28rpx;
|
||
.scrollBox{
|
||
width: calc(100% - 132rpx);
|
||
height: 72rpx;
|
||
display: flex;
|
||
white-space: nowrap;
|
||
.scrollItem{
|
||
background: #F5F5F5;
|
||
border-radius: 8rpx;
|
||
margin-right: 16rpx;
|
||
padding: 16rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.itemImg{
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.text{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #786B6C;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.selectScroll{
|
||
background: #ECF2FF!important;
|
||
.text{
|
||
color: #2363FF!important;
|
||
}
|
||
}
|
||
}
|
||
.fixedRight{
|
||
width: 132rpx;
|
||
height: 72rpx;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 22rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
.filterIcon{
|
||
width: 24rpx;
|
||
height: 28rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.dataList{
|
||
width: calc(100% - 32rpx);
|
||
height: calc(100% - 200rpx);
|
||
margin-top: 24rpx;
|
||
.listTitle{
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #F1F1F1;
|
||
padding-bottom: 16rpx;
|
||
.titleName{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #786B6C;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.sortItem{
|
||
display: flex;
|
||
align-items: center;
|
||
.sortName{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #786B6C;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.sortIconBox{
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 16rpx;
|
||
.upIcon{
|
||
width: 16rpx;
|
||
height: 12rpx;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
.bottomIcon{
|
||
width: 16rpx;
|
||
height: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.listContent{
|
||
width: 100%;
|
||
height: calc(100% - 60rpx);
|
||
margin-top: 24rpx;
|
||
.listItem{
|
||
width: 100%;
|
||
margin-bottom: 40rpx;
|
||
.itemTop{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.itemTopLeft{
|
||
display: flex;
|
||
align-items: center;
|
||
.topItemIcon{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
.name{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.unit{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9A9A9A;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.message{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
|
||
.itemTopRight{
|
||
display: flex;
|
||
align-items: center;
|
||
.warningNotice{
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 16rpx;
|
||
.notice{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
.shopNumber{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #FF4C0A;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
.moreIcon{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.itemContent{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 16rpx;
|
||
.secondItem{
|
||
width: calc((100% - 18rpx) / 2);
|
||
background: #F7F8FA;
|
||
border-radius: 8rpx;
|
||
padding: 16rpx 24rpx;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
.bg{
|
||
position: absolute;
|
||
bottom: 0;
|
||
right: 0;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
overflow: hidden;
|
||
.bg{
|
||
width: 144rpx;
|
||
height: 144rpx
|
||
}
|
||
}
|
||
.secondItemTop{
|
||
margin-bottom: 16rpx;
|
||
.itemTopName{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.itemTopUnit{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #9A9A9A;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
.itemValue{
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #E83944;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.addRate{
|
||
.redValue{
|
||
font-family: DINAlternate, DINAlternate;
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #E83944;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.unit{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #9A9A9A;
|
||
line-height: 32rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.uniPopup{
|
||
width: 100%;
|
||
height: 976rpx;
|
||
box-sizing: border-box;
|
||
padding: 32rpx;
|
||
.uniPopupTop{
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
.uniPopupTitle{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 32rpx;
|
||
color: #160002;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.close{
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
|
||
.filterBox{
|
||
margin-top: 40rpx;
|
||
.filterTitle{
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 600;
|
||
font-size: 28rpx;
|
||
color: #212226;
|
||
line-height: 40rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
.filterItemList{
|
||
margin: 24rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.filterItem{
|
||
width: calc((100% - 32rpx)/3);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 16rpx;
|
||
margin-bottom: 16rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #160002;
|
||
line-height: 40rpx;
|
||
text-align: right;
|
||
font-style: normal;
|
||
background: #F5F5F5;
|
||
border-radius: 8rpx;
|
||
padding: 12rpx 0;
|
||
}
|
||
.filterItem:nth-child(3){
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.button{
|
||
background: #2363FF;
|
||
border-radius: 8rpx;
|
||
width: calc(100% - 64rpx);
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #FFFFFF;
|
||
line-height: 44rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: fixed;
|
||
bottom: 32rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
</style>
|