847 lines
21 KiB
Vue
847 lines
21 KiB
Vue
<template>
|
||
<view class="app">
|
||
<head-info :navIndex="4"></head-info>
|
||
<view class="container">
|
||
<custom-tabs type="c1" :value="tabsValue">
|
||
<custom-tab-pane label="场位图" name="c1_1">
|
||
<view></view>
|
||
<view class="searchbox">
|
||
|
||
</view>
|
||
<template v-if="placeTabs == 0">
|
||
<view class="tabs1">
|
||
<view class="boxTop">
|
||
<view class="title">
|
||
堆场
|
||
</view>
|
||
<view class="option">
|
||
<uni-data-select v-model="yardId" :localdata="yardColumns" @change="yardChange"
|
||
placeholder="选择堆场"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="cwBox">
|
||
<view class="cwTitle">
|
||
场位概况
|
||
</view>
|
||
<view class="cwList">
|
||
<view class="cwInfo">
|
||
<view class="infoTitle">
|
||
总车位数
|
||
</view>
|
||
<view class="infoNum">
|
||
{{surveyList.totalSeatAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="cwInfo">
|
||
<view class="infoTitle">
|
||
使用车位数
|
||
</view>
|
||
<view class="infoNum">
|
||
{{surveyList.useSeatAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="cwInfo">
|
||
<view class="infoTitle">
|
||
剩余车位数
|
||
</view>
|
||
<view class="infoNum">
|
||
{{surveyList.remainSeatAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="cwInfo">
|
||
<view class="infoTitle">
|
||
虚拟车位数
|
||
</view>
|
||
<view class="infoNum">
|
||
{{surveyList.virtuaSeatAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="cwInfo">
|
||
<view class="infoTitle">
|
||
可停放货物数量
|
||
</view>
|
||
<view class="infoNum">
|
||
{{surveyList.unparkGoodsAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="cwInfo">
|
||
<view class="infoTitle">
|
||
已停放货物数量
|
||
</view>
|
||
<view class="infoNum">
|
||
{{surveyList.stopGoodsAmout}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="carTabs">
|
||
<custom-tabs type="c2" :value="carTabsValue">
|
||
<custom-tab-pane label="车辆" name="c2_1">
|
||
<view></view>
|
||
<view class="carList">
|
||
<view class="carInfo">
|
||
<view class="infoTitle">
|
||
车辆总数（辆）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{carList.carAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="carInfo">
|
||
<view class="infoTitle">
|
||
外贸出口（辆）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{carList.externalExportCarAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="carInfo">
|
||
|
||
<view class="infoTitle">
|
||
外贸进口（辆）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{carList.externalImportCarAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="carInfo">
|
||
<view class="infoTitle">
|
||
内贸出口（辆）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{carList.domesticExportCarAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="carInfo">
|
||
<view class="infoTitle">
|
||
内贸进口（辆）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{carList.domesticImportCarAmout}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</custom-tab-pane>
|
||
<custom-tab-pane label="备件" name="c2_2">
|
||
<view></view>
|
||
<view class="partsList">
|
||
<view class="partsInfo">
|
||
<view class="infoTitle">
|
||
备件总数（件）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{partsList.partAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="partsInfo">
|
||
<view class="infoTitle">
|
||
外贸出口（件）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{partsList.externalExportPartAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="partsInfo">
|
||
<view class="infoTitle">
|
||
外贸进口（件）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{partsList.externalImportPartAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="partsInfo">
|
||
<view class="infoTitle">
|
||
内贸出口（件）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{partsList.domesticExportPartAmout}}
|
||
</view>
|
||
</view>
|
||
<view class="partsInfo">
|
||
<view class="infoTitle">
|
||
内贸进口（件）
|
||
</view>
|
||
<view class="infoNum">
|
||
{{partsList.domesticImportPartAmout}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</custom-tab-pane>
|
||
</custom-tabs>
|
||
</view>
|
||
<view class="fpList">
|
||
<view class="fpInfo">
|
||
<view class="fpTitle">
|
||
港建库
|
||
</view>
|
||
<view class="fpListInfo">
|
||
<view class="infoTop">
|
||
<view class="infoTopTitle">A1区（12*12）</view>
|
||
<view class="titleRight" @click="toGoPlace">
|
||
<text>车道</text>
|
||
<view class="titleIcon">
|
||
<van-icon name="arrow" color="#fff" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="infoCarNum">
|
||
<text>车位总数：120车位</text>
|
||
<text>使用：40车位</text>
|
||
<text>剩余：40车位</text>
|
||
<text>可停放车辆：300辆</text>
|
||
<text>已停放车辆：300辆</text>
|
||
</view>
|
||
<view class="progressBox">
|
||
<van-progress :percentage="itemSum(2000)" :pivot-text="'1000/' + 2000" />
|
||
</view>
|
||
<view class="carInfoList">
|
||
<view class="carBrand" v-for="item in 4" :key="item">
|
||
<view class="brandTitle">
|
||
保时捷-轿车
|
||
</view>
|
||
<view class="placeInfo">
|
||
400 辆，共5道12车位
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fpListInfo notListInfo">
|
||
<view class="infoTop">
|
||
<view class="infoTopTitle">A1区（12*12）</view>
|
||
<view class="titleRight" @click="toGoPlace">
|
||
<text>车道</text>
|
||
<view class="titleIcon">
|
||
<van-icon name="arrow" color="#fff" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="notTitle">
|
||
未分配
|
||
</view>
|
||
<text>车位总数：120车位</text>
|
||
<text>可停放车辆：300辆</text>
|
||
</view>
|
||
<view class="tipInfo">
|
||
未使用2车道20车位
|
||
</view>
|
||
</view>
|
||
<view class="fpInfo">
|
||
<view class="fpTitle">
|
||
海棠库
|
||
</view>
|
||
<view class="fpListInfo notListInfo">
|
||
<view class="infoTop">
|
||
<view class="infoTopTitle">A1区（12*12）</view>
|
||
<view class="titleRight" @click="toGoPlace">
|
||
<text>车道</text>
|
||
<view class="titleIcon">
|
||
<van-icon name="arrow" color="#fff" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="notTitle">
|
||
未分配
|
||
</view>
|
||
<text>车位总数：120车位</text>
|
||
<text>可停放车辆：300辆</text>
|
||
</view>
|
||
<view class="fpListInfo">
|
||
<view class="carInfoList">
|
||
<view class="infoTop">
|
||
<view class="infoTopTitle">A1区（12*12）</view>
|
||
<view class="titleRight" @click="toGoPlace">
|
||
<text>车道</text>
|
||
<view class="titleIcon">
|
||
<van-icon name="arrow" color="#fff" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="infoCarNum">
|
||
<text>车位总数：120车位</text>
|
||
<text>使用：40车位</text>
|
||
<text>剩余：40车位</text>
|
||
<text>可停放车辆：300辆</text>
|
||
<text>已停放车辆：300辆</text>
|
||
</view>
|
||
<view class="progressBox">
|
||
<van-progress :percentage="itemSum(2000)"
|
||
:pivot-text="'1000/' + 2000" />
|
||
</view>
|
||
</view>
|
||
<view class="carInfoList">
|
||
<view class="carBrand" v-for="item in 4" :key="item">
|
||
<view class="brandTitle">
|
||
保时捷-轿车
|
||
</view>
|
||
<view class="placeInfo">
|
||
400 辆，共5道12车位
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<place @modifyPlaceTabs="modifyPlaceTabs"></place>
|
||
</template>
|
||
</custom-tab-pane>
|
||
<custom-tab-pane label="货物列表" name="c1_2">
|
||
<view></view>
|
||
<view class="tabs2">
|
||
<view class="topOption">
|
||
<view class="option">
|
||
<text>堆场</text>
|
||
<uni-data-select v-model="yardId" :localdata="yardColumns"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>进出口</text>
|
||
<uni-data-select v-model="yardId" :localdata="yardColumns"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>贸易类型</text>
|
||
<uni-data-select v-model="yardId" :localdata="yardColumns"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>船名/航次</text>
|
||
<uni-data-select v-model="yardId" :localdata="yardColumns"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>品牌</text>
|
||
<uni-data-select v-model="yardId" :localdata="yardColumns"></uni-data-select>
|
||
</view>
|
||
<view class="option">
|
||
<text>港口</text>
|
||
<uni-data-select v-model="yardId" :localdata="yardColumns"></uni-data-select>
|
||
</view>
|
||
</view>
|
||
<view class="goodsList">
|
||
<view class="li" v-for="item in 6" :key="item">
|
||
<view class="liLeft">
|
||
<text class="title">车架号/条形码</text>
|
||
<text>堆场名称：高东库</text>
|
||
<text>提单号：TD197906</text>
|
||
<text>品牌：特斯拉</text>
|
||
<text>作业状态：已装船</text>
|
||
<text>场位：A2-09-08</text>
|
||
<text>进出口：进口</text>
|
||
<text>型号：A系列</text>
|
||
<text>作业时间：2023/09/08 14:00</text>
|
||
<text>船名：运程10</text>
|
||
<text>贸易类型：内贸</text>
|
||
<text>车型：轿车</text>
|
||
<text>作业人员：张星星</text>
|
||
<text>航次：HC867468096</text>
|
||
<text>港口：上海港</text>
|
||
<text>车型明细：B系列</text>
|
||
</view>
|
||
<view class="liRight">
|
||
<text>作业记录</text>
|
||
<text>残损</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</custom-tab-pane>
|
||
</custom-tabs>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import HeadInfo from '@/components/head-info/head-info';
|
||
import place from './place.vue';
|
||
export default {
|
||
data() {
|
||
return {
|
||
tabsValue: 0,
|
||
loginObj: {},
|
||
portObj: {},
|
||
yardId: "",
|
||
yardValue: "",
|
||
yardColumns: [],
|
||
// 场位概况
|
||
surveyList: {},
|
||
carTabsValue: 0,
|
||
// 车辆
|
||
carList: {},
|
||
// 备件
|
||
partsList: {},
|
||
// 区域统计车辆情况
|
||
regionList: [],
|
||
// 车道统计车辆情况
|
||
carLine: {},
|
||
// 车位统计车辆情况
|
||
carSeat: {},
|
||
|
||
placeTabs: 0,
|
||
}
|
||
},
|
||
computed: {
|
||
itemSum() {
|
||
return function(item) {
|
||
let sum = 1000 / item * 100
|
||
return sum
|
||
};
|
||
}
|
||
},
|
||
onBackPress(options) {
|
||
// 触发返回就会调用此方法，这里实现的是禁用物理返回，顶部导航栏的自定义返回 uni.navigateBack 仍可使用
|
||
if (options.from == 'backbutton') {
|
||
return true;
|
||
} else if (options.from == 'navigateBack') {
|
||
return false;
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.loginObj = uni.getStorageSync('loginObj')
|
||
this.portObj = uni.getStorageSync('portObj')
|
||
this.yardData()
|
||
},
|
||
components: {
|
||
HeadInfo,
|
||
place
|
||
},
|
||
methods: {
|
||
// 获取堆场数据
|
||
yardData() {
|
||
uni.request({
|
||
url: this.$local + '/api/yard/sel/query/yard?pamId=' + this.portObj.portId,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.statusCode == 200) {
|
||
res.data.data.forEach(v => {
|
||
this.yardColumns.push({
|
||
value: v.pymId,
|
||
text: v.pymName
|
||
})
|
||
})
|
||
this.yardId = this.yardColumns[0].value
|
||
this.getSurvey()
|
||
this.getRegion()
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 堆场数据下拉
|
||
yardChange(e) {
|
||
this.yardId = e
|
||
this.yardColumns.forEach(v => {
|
||
if (e == v.value) {
|
||
this.yardName = v.text
|
||
}
|
||
})
|
||
this.getSurvey()
|
||
this.getRegion()
|
||
},
|
||
// 获取场位概况
|
||
getSurvey() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/situation?pamId=${this.portObj.portId}&pymId=${this.yardId}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.statusCode == 200) {
|
||
this.surveyList = res.data.data
|
||
console.log(this.surveyList)
|
||
this.carList = this.surveyList.carSituation
|
||
this.partsList = this.surveyList.partSituation
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取区域统计车辆情况
|
||
getRegion() {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/region/statistics?pymId=${this.yardId}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.statusCode == 200) {
|
||
this.regionList = res.data.data
|
||
this.regionList.records.forEach(v => {
|
||
this.getLine(v.pyaId)
|
||
this.getSeat(v.pyaId)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取车道统计车辆情况
|
||
getLine(id) {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/line/statistics?pyaId=${id}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.statusCode == 200) {
|
||
this.carLine = res.data.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 获取车位统计车辆情况
|
||
getSeat(id) {
|
||
uni.request({
|
||
url: `${this.$local}/api/yardGoods/monitor/seat/statistics?pyaId=${id}`,
|
||
header: {
|
||
'Content-Type': 'application/json', //自定义请求头信息
|
||
'Authorization': `Bearer ${this.loginObj.access_token}`
|
||
},
|
||
method: 'GET', //请求方式，必须为大写
|
||
success: (res) => {
|
||
if (res.statusCode == 200) {
|
||
this.carSeat = res.data.data
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 点击车道
|
||
toGoPlace() {
|
||
this.placeTabs = 1;
|
||
},
|
||
// 子组件修改值
|
||
modifyPlaceTabs(data) {
|
||
this.placeTabs = data;
|
||
},
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.container {
|
||
display: flex;
|
||
|
||
/deep/.tab .tab-bar {
|
||
height: 66px;
|
||
line-height: 66px;
|
||
font-family: PingFangSC-Semibold;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/deep/.tab .tab-bar-item {
|
||
font-size: 18px;
|
||
height: 66px;
|
||
line-height: 66px;
|
||
}
|
||
|
||
/deep/.tab .tab-bar-item .active-line {
|
||
height: 4px;
|
||
width: calc(100% - 40px);
|
||
padding: 0 10px;
|
||
}
|
||
|
||
/deep/.tab .tab-cont {
|
||
padding: 0;
|
||
}
|
||
|
||
/deep/.tab-pane {
|
||
width: 100%;
|
||
}
|
||
|
||
.searchbox {
|
||
width: 100%;
|
||
height: 48px;
|
||
background: #FAFAFA;
|
||
}
|
||
|
||
.tabs1 {
|
||
padding: 20px;
|
||
background-color: #F3F4F6;
|
||
|
||
.boxTop {
|
||
display: flex;
|
||
|
||
.title {
|
||
margin-right: 20px;
|
||
font-size: 18px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.option {
|
||
width: 200px;
|
||
}
|
||
}
|
||
|
||
.cwBox {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
margin-top: 20px;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
|
||
.cwTitle {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.cwList {
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.cwInfo {
|
||
width: 16%;
|
||
padding: 20px 10px;
|
||
background-color: #ccc;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.carTabs {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
margin-top: 20px;
|
||
border-radius: 8px;
|
||
|
||
/deep/.tab {
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
.carList {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 20px;
|
||
|
||
.carInfo {
|
||
width: 19%;
|
||
padding: 20px;
|
||
background-color: #ccc;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
|
||
.partsList {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 20px;
|
||
|
||
.partsInfo {
|
||
width: 19%;
|
||
padding: 20px;
|
||
background-color: #ccc;
|
||
text-align: center;
|
||
border-radius: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.infoTitle {
|
||
font-size: 16px;
|
||
color: #666;
|
||
}
|
||
|
||
.infoNum {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.fpList {
|
||
width: 100%;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.fpInfo {
|
||
width: 49%;
|
||
|
||
}
|
||
|
||
.fpTitle {
|
||
text-align: center;
|
||
background: #262626;
|
||
padding: 10px;
|
||
color: #fff;
|
||
}
|
||
|
||
.fpListInfo {
|
||
padding: 20px 10px;
|
||
background: #262626;
|
||
color: #fff;
|
||
margin-top: 10px;
|
||
|
||
.infoTop {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.infoTopTitle {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
padding-left: 10px;
|
||
border-left: 5px solid #0079FE;
|
||
}
|
||
|
||
.titleRight {
|
||
display: flex;
|
||
|
||
.titleIcon {
|
||
width: 16px;
|
||
height: 16px;
|
||
background: #0079FE;
|
||
margin-left: 5px;
|
||
line-height: 16px;
|
||
text-align: center;
|
||
border-radius: 50%;
|
||
margin-top: 5px;
|
||
|
||
/deep/.van-icon {
|
||
transform: scale(0.8);
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
|
||
text {
|
||
color: #0079FE;
|
||
margin-top: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.infoCarNum {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-top: 10px;
|
||
|
||
text {
|
||
margin: 10px 20px;
|
||
}
|
||
}
|
||
|
||
.progressBox {
|
||
width: 100%;
|
||
}
|
||
|
||
.carInfoList {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.carBrand {
|
||
width: 32%;
|
||
background-color: #2C2D2D;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
|
||
.brandTitle {
|
||
color: #0079FE;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.notListInfo {
|
||
.notTitle {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin: 30px 0;
|
||
}
|
||
|
||
.infoTop {
|
||
text {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
text {
|
||
margin-right: 30px;
|
||
}
|
||
}
|
||
|
||
.tipInfo {
|
||
width: 100%;
|
||
font-size: 24px;
|
||
color: #5FE515;
|
||
font-weight: bold;
|
||
padding: 20px 0;
|
||
text-align: center;
|
||
background: #fff;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs2 {
|
||
padding: 10px 0;
|
||
|
||
.topOption {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-left: 30px;
|
||
|
||
.option {
|
||
display: flex;
|
||
width: 200px;
|
||
line-height: 35px;
|
||
margin-right: 10px;
|
||
margin-bottom: 10px;
|
||
|
||
text {
|
||
margin-right: 5px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.goodsList {
|
||
padding: 0 30px;
|
||
margin-top: 10px;
|
||
|
||
.li {
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #ccc;
|
||
color: #aaa;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.liLeft {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.title {
|
||
color: #000;
|
||
font-weight: bold;
|
||
}
|
||
|
||
text {
|
||
display: inline-block;
|
||
width: 24%;
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
|
||
.liRight {
|
||
min-width: 60px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
color: #0079FE;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |