1025 lines
34 KiB
Vue
1025 lines
34 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" @click="handleBack">
|
|
<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>
|
|
<text class="timeText" @click="handleShowPopup">{{`${startDate}-${endDate}`}}</text>
|
|
<!-- <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="https://eshangtech.com/ShopICO/ahyd-BID/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">{{ sumObj['车流增加，服务区营收减少'] || 0 }}</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">{{ sumObj['车流增加，门店的营收减少'] || 0 }}</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">{{ sumObj['车流增加，营收增长不匹配 '] || 0 }}</text>
|
|
</view>
|
|
|
|
<view class="contentItem" style="margin-bottom: 0">
|
|
<view style="display: flex;align-items: center">
|
|
<image class="itemIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/dataIcon.png"/>
|
|
<text class="contentText">车流减少，营收降低不匹配</text>
|
|
</view>
|
|
<text class="value">{{ sumObj['车流减少，营收降低不匹配'] || 0 }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="servicepartContent">
|
|
<view class="contentTitle">
|
|
<image class="contentIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/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="selectTab===1?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(1)">
|
|
<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="selectTab===2?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(2)">
|
|
<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="selectTab===3?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(3)">
|
|
<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="selectTab===4?'scrollItem selectScroll':'scrollItem'" @click="handleChangeWarningTab(4)">
|
|
<image class="itemImg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/dataIcon.png"/>
|
|
<text class="text">减少</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="fixedRight" @click="handleShowPopup">
|
|
<image class="filterIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/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" v-for="(item,index) in dataList" :key="index">
|
|
<view class="itemTop">
|
|
<view class="itemTopLeft">
|
|
<image v-if="index<=2" class="topItemIcon" :src="index===0?'https://eshangtech.com/ShopICO/ahyd-BID/warning/sort1st.png':index===1?'https://eshangtech.com/ShopICO/ahyd-BID/warning/sort2st.png':index===2?'https://eshangtech.com/ShopICO/ahyd-BID/warning/sort3st.png':''"/>
|
|
<view class="otherIcon" v-else>{{index + 1}}</view>
|
|
<text class="name">{{ item.ServerpartName.split('服务区')[0] || '' }}</text>
|
|
<text class="unit">/服务区</text>
|
|
<image class="message"/>
|
|
</view>
|
|
|
|
<view class="itemTopRight" @click="handleGoDetail(item)">
|
|
<view class="warningNotice" v-if="item.ShopINCList && item.ShopINCList.length>0">
|
|
<image class="notice" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/warningIcon.png"/>
|
|
<text class="shopNumber">{{ `${item.ShopINCList.length}个门店` }}</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="https://eshangtech.com/ShopICO/ahyd-BID/warning/revenueBg.png"/>
|
|
</view>
|
|
<view class="secondItemTop">
|
|
<text class="itemTopName">对客销售</text>
|
|
<text class="itemTopUnit">/万元</text>
|
|
</view>
|
|
<view :class="item.RevenueINC.curYearData<item.RevenueINC.lYearData?'itemGreenValue':'itemValue' ">{{ item.RevenueINC.curYearData?$util.getMoney(item.RevenueINC.curYearData / 10000):'-' }}</view>
|
|
<view class="addRate">
|
|
<!-- 增长-->
|
|
<text :class="item.RevenueINC.increaseData>0?'redValue':item.RevenueINC.increaseData<0?'greenValue':''" style="margin-right: 8rpx">{{item.RevenueINC.increaseData?$util.getMoney(item.RevenueINC.increaseData / 10000):'-' }}</text>
|
|
<!-- 增幅-->
|
|
<text :class="item.RevenueINC.increaseRate>0?'redValue':item.RevenueINC.increaseRate<0?'greenValue':''">{{item.RevenueINC.increaseRate?`${item.RevenueINC.increaseRate}%`:'-' }}</text>
|
|
<text class="unit">同比</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="secondItem">
|
|
<view class="bgBox">
|
|
<image class="bg" src="https://eshangtech.com/ShopICO/ahyd-BID/warning/carBg.png"/>
|
|
</view>
|
|
<view class="secondItemTop">
|
|
<text class="itemTopName">入区车流</text>
|
|
<text class="itemTopUnit">/万辆</text>
|
|
</view>
|
|
<view :class="item.BayonetINC.curYearData<item.BayonetINC.lYearData?'itemGreenValue':'itemValue' ">{{ item.BayonetINC.curYearData?$util.getMoney(item.BayonetINC.curYearData / 10000):'-' }}</view>
|
|
<view class="addRate">
|
|
<!-- 增长-->
|
|
<text :class="item.BayonetINC.increaseData>0?'redValue':item.BayonetINC.increaseData<0?'greenValue':''" style="margin-right: 8rpx">{{item.BayonetINC.increaseData?$util.getMoney(item.BayonetINC.increaseData / 10000):'-' }}</text>
|
|
<!-- 增幅-->
|
|
<text :class="item.BayonetINC.increaseRate>0?'redValue':item.BayonetINC.increaseRate<0?'greenValue':''">{{item.BayonetINC.increaseRate?`${item.BayonetINC.increaseRate}%`:'-' }}</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="filterTimeBox">
|
|
<picker class="timeSelect" mode="date" fields="month" :end="end" @change="handleGetStartTime">{{startDate}}</picker>
|
|
<span class="timeSelect" style="margin: 0 4rpx">-</span>
|
|
<picker class="timeSelect" mode="date" fields="month" :start="start" :end="end" @change="handleGetEndTime">{{endDate}}</picker>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="filterBox" style="margin-top: 48rpx">
|
|
<view class="filterTitle">经营模式</view>
|
|
<view class="filterItemList">
|
|
<view :class="statisticsType===1?'filterItem selectFilterItem':'filterItem'" @click="handleChangeStaticType(1)">便利店</view>
|
|
<view :class="statisticsType===2?'filterItem selectFilterItem':'filterItem'" @click="handleChangeStaticType(2)">餐饮客房</view>
|
|
<view :class="statisticsType===3?'filterItem selectFilterItem':'filterItem'" @click="handleChangeStaticType(3)">商铺租赁</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="filterBox" style="margin-top: 48rpx">
|
|
<view class="filterTitle">经营业态</view>
|
|
<view class="filterItemList">
|
|
<view :class="shopTrade===item.value?'filterItem selectFilterItem':'filterItem'" v-for="(item,index) in shopTradeList" :key="index" @click="handleChangeShopTrade(item.value)">{{item.label}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="filterBox" style="margin-top: 48rpx">
|
|
<view class="filterTitle">排行类型</view>
|
|
<view class="filterItemList">
|
|
<view :class="sorterType===1?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSorterType(1)">全局排行</view>
|
|
<view :class="sorterType===2?'filterItem selectFilterItem':'filterItem'" @click="handleChangeSorterType(2)">管理排行</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="button" @click="handleSubmit">确定</view>
|
|
</view>
|
|
</uniPopup>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import moment from "moment";
|
|
import request from '@/util/index.js'
|
|
import UniPopup from "../../components/uni-popup.vue";
|
|
import {wrapTreeNode} from "../../util/dateTime";
|
|
export default {
|
|
name: "index",
|
|
components: {UniPopup},
|
|
data(){
|
|
return {
|
|
menu:{},
|
|
showPop:false,// 弹出框
|
|
// datetimerange:[moment().format('YYYY/MM'),moment().format('YYYY/MM')]
|
|
startDate: moment().subtract(1,'months').format('YYYY/MM'),//开始时间
|
|
endDate: moment().subtract(1,'months').format('YYYY/MM'),// 结束时间
|
|
start: moment().subtract(1,'months').format('YYYY/MM'),// 结束时间开始范围
|
|
end: moment().format('YYYY/MM'),// 结束的时间范围
|
|
useInfo:{},// 用户信息
|
|
statisticsType: 0,// 经营模式
|
|
shopTrade: 0,// 经营业态
|
|
shopTradeList:[],// 经营业态数组
|
|
sorterType:2,// 排行类型
|
|
selectTab: 1,// 选择的tab
|
|
dataList: [],// 遍历的展示数组
|
|
sumObj:{},// 合计对象
|
|
}
|
|
},
|
|
onLoad(query){
|
|
let systemInfo = uni.getSystemInfoSync()
|
|
this.menu = uni.getMenuButtonBoundingClientRect()
|
|
|
|
let userInfo = uni.getStorageSync('vuex')
|
|
userInfo = JSON.parse(userInfo)
|
|
this.useInfo = JSON.parse(JSON.stringify(userInfo))
|
|
this.handleBrandType()
|
|
|
|
this.handleGetWarningNumber()
|
|
this.handleGetPageData()
|
|
},
|
|
methods:{
|
|
// 显示弹出框
|
|
handleShowPopup(){
|
|
this.showPop = true
|
|
},
|
|
// 隐藏弹出框
|
|
hidePopup(){
|
|
this.showPop = false
|
|
},
|
|
// 修改开始时间
|
|
handleGetStartTime(e){
|
|
console.log('e',e)
|
|
this.start = e.detail.value
|
|
this.startDate = moment(e.detail.value).format('YYYY/MM')
|
|
},
|
|
// 修改结束时间
|
|
handleGetEndTime(e){
|
|
this.endDate = moment(e.detail.value).format('YYYY/MM')
|
|
},
|
|
// 经营业态数据
|
|
async handleBrandType(){
|
|
const req ={
|
|
FieldExplainField: 'BusinessTradeIds',
|
|
sessionName: 'BusinessTradeIds'
|
|
}
|
|
const data = await request.$webGet('EShangApiMain/FrameWork/GetFieldEnumTree',req)
|
|
const list = wrapTreeNode(data.Result_Data.List)
|
|
this.shopTradeList = list
|
|
},
|
|
// 修改经营模式
|
|
handleChangeStaticType(e){
|
|
if (this.statisticsType===e){
|
|
this.statisticsType = 0
|
|
}else{
|
|
this.statisticsType = e
|
|
}
|
|
},
|
|
// 修改经营业态
|
|
handleChangeShopTrade(e){
|
|
if (this.shopTrade===e){
|
|
this.shopTrade = 0
|
|
}else{
|
|
this.shopTrade = e
|
|
}
|
|
},
|
|
// 修改预警类型的tab
|
|
handleChangeWarningTab(e){
|
|
this.selectTab = e
|
|
this.dataList = []
|
|
this.handleGetPageData()
|
|
},
|
|
// 修改排行类型
|
|
handleChangeSorterType(e){
|
|
if (this.sorterType===e){
|
|
this.sorterType = 0
|
|
}else{
|
|
this.sorterType = e
|
|
}
|
|
},
|
|
// 确定按钮
|
|
handleSubmit(){
|
|
this.showPop = false
|
|
this.handleGetPageData()
|
|
},
|
|
// 跳转详情
|
|
handleGoDetail(obj){
|
|
let date = ''
|
|
if (this.startDate === this.endDate){
|
|
let month = new Date(this.startDate).getMonth() + 1
|
|
date = `${month<10?'0'+month:month}月`
|
|
}else{
|
|
date = `${moment(this.startDate).format('YYYYMM')}-${moment(this.endDate).format('YYYYMM')}`
|
|
}
|
|
|
|
this.$util.toNextRoute('navigateTo', `/pages/earlyWarning/detail?obj=${JSON.stringify(obj)}&date=${date}`)
|
|
},
|
|
// 返回上一级
|
|
handleBack(){
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
// 异常合计数量
|
|
async handleGetWarningNumber(){
|
|
const req = {
|
|
StatisticsStartMonth: moment(this.startDate).format('YYYYMM'),
|
|
StatisticsEndMonth: moment(this.endDate).format('YYYYMM'),
|
|
BusinessTradeType: this.statisticsType || '',
|
|
shopTrade: this.shopTrade || ''
|
|
}
|
|
const data = await request.$webGet('/CommercialApi/Revenue/GetMonthINCAnalysisSummary',req)
|
|
console.log('data2312312',data)
|
|
let list = data.Result_Data.List
|
|
let obj = {}
|
|
if (list && list.length>0){
|
|
list.forEach(item=>{
|
|
obj[item.name] = item.value
|
|
})
|
|
}
|
|
this.sumObj = obj
|
|
},
|
|
// 请求页面数据
|
|
async handleGetPageData(){
|
|
uni.showLoading({
|
|
title: '正在加载...'
|
|
})
|
|
const params = {
|
|
pushProvinceCode: this.useInfo.userData.ProvinceCode || '340000',
|
|
StatisticsStartMonth: moment(this.startDate).format('YYYYMM'),
|
|
StatisticsEndMonth: moment(this.endDate).format('YYYYMM'),
|
|
businessRegion:1,
|
|
calcQOQ: false,
|
|
calcYOY: true,
|
|
calcBayonet: true,
|
|
// showLevel: 1,
|
|
BusinessTradeType: this.statisticsType || '',
|
|
shopTrade: this.shopTrade || '',
|
|
showLevel: this.sorterType || '',
|
|
}
|
|
|
|
let req = {}
|
|
if (this.selectTab===1){
|
|
req = {
|
|
...params,
|
|
showBayonet: 1,
|
|
showRevenue: 2,
|
|
showLevel: 1
|
|
}
|
|
}else if(this.selectTab===2){
|
|
req = {
|
|
...params,
|
|
showBayonet: 1,
|
|
showRevenue: 2,
|
|
showLevel: 2
|
|
}
|
|
}else if(this.selectTab===3){
|
|
req = {
|
|
...params,
|
|
showBayonet: 1,
|
|
showRevenue: 1,
|
|
}
|
|
}else if(this.selectTab===4){
|
|
req = {
|
|
...params,
|
|
showBayonet: 2,
|
|
showRevenue: 2,
|
|
}
|
|
}
|
|
const data = await request.$webGet('CommercialApi/Revenue/GetMonthINCAnalysis',req)
|
|
if (data.Result_Data.List && data.Result_Data.List.length>0){
|
|
let list = wrapTreeNode(data.Result_Data.List)
|
|
console.log('list',list)
|
|
|
|
let res = []
|
|
list.forEach(item=>{
|
|
if (item.children && item.children.length>0){
|
|
item.children.forEach((subItem)=>{
|
|
if (subItem.children && subItem.children.length>0){
|
|
subItem.children.forEach((thirdItem)=>{
|
|
res.push(thirdItem)
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
console.log('res',res)
|
|
this.dataList = res
|
|
}
|
|
uni.hideLoading()
|
|
}
|
|
}
|
|
}
|
|
</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%;
|
|
}
|
|
}
|
|
.timeText{
|
|
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
line-height: 40rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.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;
|
|
}
|
|
.otherIcon{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-image: url("https://eshangtech.com/ShopICO/ahyd-BID/warning/sortOther.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 600;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
line-height: 24rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
.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;
|
|
margin-left: 4rpx;
|
|
}
|
|
.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;
|
|
}
|
|
.itemGreenValue{
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #127E5B;
|
|
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;
|
|
}
|
|
.greenValue{
|
|
font-family: DINAlternate, DINAlternate;
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #127E5B;
|
|
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: 1050rpx;
|
|
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;
|
|
}
|
|
.selectFilterItem{
|
|
color: #2363FF;
|
|
background: #ECF2FF;
|
|
}
|
|
.filterItem:nth-child(3){
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.filterTimeBox{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 24rpx;
|
|
.timeSelect{
|
|
width: calc((100% - 20px)/2);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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>
|