|
|
@ -1,109 +1,112 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="warpper"> |
|
|
|
|
|
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;"> |
|
|
|
|
|
<view class="card-box" v-for="(item, index) in list" :key="index"> |
|
|
|
|
|
<view class="header"> |
|
|
|
|
|
<view class="title">{{item.name}}</view> |
|
|
|
|
|
<view class="desc"> |
|
|
|
|
|
<view class="bottom-btn" @tap="dropdownTap(index)"> |
|
|
|
|
|
{{dropdownName}} |
|
|
|
|
|
<!-- <uni-icons custom-prefix="iconfont" type="icon-required" size="16" color="#888888"></uni-icons> --> |
|
|
|
|
|
<uni-icons size="16" custom-prefix="iconfont" type="m_dow_arrow" color="#888888"></uni-icons> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="down-box" v-if="item.isShowSelect"> |
|
|
|
|
|
<view class="row" v-for="(citem, cindex) in dropdownList" :key="cindex" @tap="dropdownItemTap(cindex)"> |
|
|
|
|
|
<text :class="params.duration == cindex ? 'activeText' : ''">{{citem}}</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="content"> |
|
|
|
|
|
<view class="info"> |
|
|
|
|
|
<view class=""> |
|
|
|
|
|
<view class="value">{{item.totalCapacity}}件</view> |
|
|
|
|
|
<view class="title"> |
|
|
|
|
|
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
|
|
|
|
|
设备产能 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class=""> |
|
|
|
|
|
<view class="value">{{item.totalTime}}h</view> |
|
|
|
|
|
<view class="title"> |
|
|
|
|
|
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
|
|
|
|
|
工作时长 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class=""> |
|
|
|
|
|
<view class="value">{{item.totalAvgStartingUp}}%</view> |
|
|
|
|
|
<view class="title"> |
|
|
|
|
|
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
|
|
|
|
|
开机率 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="shrink-box" v-if="item.collapse"> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">设备图片:</view> |
|
|
|
|
|
<view class="look-over" @tap="previewImg(item.img, [item.img])">点击查看</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">购买年份:</view> |
|
|
|
|
|
<view class="value">{{item.purchasingDate}}年</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">购买金额:</view> |
|
|
|
|
|
<view class="value">{{item.purchaseAmount}}万</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">设备产能:</view> |
|
|
|
|
|
<view class="value">{{item.capacity}}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">成色:</view> |
|
|
|
|
|
<view class="value">{{item.newnessDegree}}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">设备类型:</view> |
|
|
|
|
|
<view class="value">{{item.machineTypeName}}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">最大输纸 长度:</view> |
|
|
|
|
|
<view class="value">{{item.inputMaxSizeLength}}mm</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">最大输纸 宽度:</view> |
|
|
|
|
|
<view class="value">{{item.inputMaxSizeWidth}}mm</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">最大输纸 厚度:</view> |
|
|
|
|
|
<view class="value">{{item.inputMaxThickness}}mm</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">咬口:</view> |
|
|
|
|
|
<view class="value">{{item.lockSeam}}mm</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="see-more"> |
|
|
|
|
|
<view class="" @tap="seemoreTap(index)"> |
|
|
|
|
|
<text>设备详情</text> |
|
|
|
|
|
<image class="icon" :src="item.collapse ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'"></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<uGap></uGap> |
|
|
|
|
|
</view> |
|
|
|
|
|
</scroll-list> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
<view class="warpper"> |
|
|
|
|
|
<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #ffffff"> |
|
|
|
|
|
<view class="card-box" v-for="(item, index) in list" :key="index"> |
|
|
|
|
|
<view class="header"> |
|
|
|
|
|
<view class="title">{{ item.name }}</view> |
|
|
|
|
|
<view class="desc"> |
|
|
|
|
|
<view class="bottom-btn" @tap="dropdownTap(index)"> |
|
|
|
|
|
{{ dropdownName }} |
|
|
|
|
|
<!-- <uni-icons custom-prefix="iconfont" type="icon-required" size="16" color="#888888"></uni-icons> --> |
|
|
|
|
|
<uni-icons size="16" custom-prefix="iconfont" type="m_dow_arrow" color="#888888"></uni-icons> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="down-box" v-if="item.isShowSelect"> |
|
|
|
|
|
<view class="row" v-for="(citem, cindex) in dropdownList" :key="cindex" @tap="dropdownItemTap(cindex)"> |
|
|
|
|
|
<text :class="params.duration == cindex ? 'activeText' : ''">{{ citem }}</text> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="content"> |
|
|
|
|
|
<view class="info"> |
|
|
|
|
|
<view class=""> |
|
|
|
|
|
<view class="value">{{ item.totalCapacity }}件</view> |
|
|
|
|
|
<view class="title"> |
|
|
|
|
|
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
|
|
|
|
|
设备产能 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class=""> |
|
|
|
|
|
<view class="value">{{ item.totalTime }}h</view> |
|
|
|
|
|
<view class="title"> |
|
|
|
|
|
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
|
|
|
|
|
工作时长 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class=""> |
|
|
|
|
|
<view class="value">{{ item.totalAvgStartingUp }}%</view> |
|
|
|
|
|
<view class="title"> |
|
|
|
|
|
<image class="icon" src="/static/imgs/client-detail/address-icon.png"></image> |
|
|
|
|
|
开机率 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="shrink-box" v-if="item.collapse"> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">设备图片:</view> |
|
|
|
|
|
<view class="look-over" @tap="previewImg(item.img, [item.img])">点击查看</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">购买年份:</view> |
|
|
|
|
|
<view class="value">{{ item.purchasingDate }}年</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">购买金额:</view> |
|
|
|
|
|
<view class="value">{{ item.purchaseAmount }}万</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">设备产能:</view> |
|
|
|
|
|
<view class="value">{{ item.capacity }}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">成色:</view> |
|
|
|
|
|
<view class="value">{{ item.newnessDegree }}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">设备类型:</view> |
|
|
|
|
|
<view class="value">{{ item.machineTypeName }}</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">最大输纸 长度:</view> |
|
|
|
|
|
<view class="value">{{ item.inputMaxSizeLength }}mm</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">最大输纸 宽度:</view> |
|
|
|
|
|
<view class="value">{{ item.inputMaxSizeWidth }}mm</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="row"> |
|
|
|
|
|
<view class="left"> |
|
|
|
|
|
<view class="title">最大输纸 厚度:</view> |
|
|
|
|
|
<view class="value">{{ item.inputMaxThickness }}mm</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="right"> |
|
|
|
|
|
<view class="title">咬口:</view> |
|
|
|
|
|
<view class="value">{{ item.lockSeam }}mm</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="see-more"> |
|
|
|
|
|
<view class="" @tap="seemoreTap(index)"> |
|
|
|
|
|
<text>设备详情</text> |
|
|
|
|
|
<image |
|
|
|
|
|
class="icon" |
|
|
|
|
|
:src="item.collapse ? '/static/imgs/client-detail/arrow-up-icon.png' : '/static/imgs/client-detail/arrow-down-icon.png'" |
|
|
|
|
|
></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
<uGap></uGap> |
|
|
|
|
|
</view> |
|
|
|
|
|
</scroll-list> |
|
|
|
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
@ -111,293 +114,293 @@ import lvSelect from './lv-select.vue' |
|
|
import uGap from '@/components/u-gap/u-gap.vue' |
|
|
import uGap from '@/components/u-gap/u-gap.vue' |
|
|
import { getDeviceInfo } from '@/apis/clientDetailApi.js' |
|
|
import { getDeviceInfo } from '@/apis/clientDetailApi.js' |
|
|
export default { |
|
|
export default { |
|
|
components: { lvSelect, uGap }, |
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
isShowSelect: false, |
|
|
|
|
|
dropdownList: ['近30天','近7天', '今日','全部'], // 0:近30天 1:近7天 2:今日 3:全部 |
|
|
|
|
|
option: { |
|
|
|
|
|
size: 10, |
|
|
|
|
|
auto: true, |
|
|
|
|
|
emptyText: '暂无数据~', |
|
|
|
|
|
background: '#F7F8FA', |
|
|
|
|
|
disabled: false |
|
|
|
|
|
}, |
|
|
|
|
|
seemoreFlag: 0, |
|
|
|
|
|
params: { |
|
|
|
|
|
asc: '', |
|
|
|
|
|
desc: '', |
|
|
|
|
|
duration: '3', |
|
|
|
|
|
enterpriseIds: [], |
|
|
|
|
|
}, |
|
|
|
|
|
pagination: { |
|
|
|
|
|
pageNum: 0, // 初始会执行一次下拉加载 |
|
|
|
|
|
pageSize: 10 |
|
|
|
|
|
}, |
|
|
|
|
|
list: [] |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
onLoad() { |
|
|
|
|
|
// this.getList() |
|
|
|
|
|
}, |
|
|
|
|
|
computed:{ |
|
|
|
|
|
dropdownName() { |
|
|
|
|
|
let text = '全部' |
|
|
|
|
|
switch (this.params.duration){ |
|
|
|
|
|
case 0: |
|
|
|
|
|
text = '近30天' |
|
|
|
|
|
break; |
|
|
|
|
|
case 1: |
|
|
|
|
|
text = '近7天' |
|
|
|
|
|
break; |
|
|
|
|
|
case 2: |
|
|
|
|
|
text = '今日' |
|
|
|
|
|
break; |
|
|
|
|
|
case 3: |
|
|
|
|
|
text = '全部' |
|
|
|
|
|
break; |
|
|
|
|
|
default: |
|
|
|
|
|
break; |
|
|
|
|
|
} |
|
|
|
|
|
return text |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
previewImg(img, list) { |
|
|
|
|
|
uni.previewImage({ |
|
|
|
|
|
urls: list, |
|
|
|
|
|
current: img |
|
|
|
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
getList() { |
|
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
getDeviceInfo({ ...this.params, ...this.pagination }) |
|
|
|
|
|
.then(res => { |
|
|
|
|
|
res.records.forEach(el => { |
|
|
|
|
|
el.collapse = false |
|
|
|
|
|
el.isShowSelect = false |
|
|
|
|
|
}) |
|
|
|
|
|
// console.log('设备信息', res.records) |
|
|
|
|
|
if (res) { |
|
|
|
|
|
if (this.pagination.pageNum == 1) { |
|
|
|
|
|
this.list = res.records |
|
|
|
|
|
} else { |
|
|
|
|
|
this.list = this.list.concat(res.records) |
|
|
|
|
|
} |
|
|
|
|
|
// this.list = [] |
|
|
|
|
|
// this.list = [...this.list, ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]] |
|
|
|
|
|
resolve({ list: this.list, total: res.total }) |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(err => { |
|
|
|
|
|
reject(err) |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
seemoreTap(index) { |
|
|
|
|
|
this.list[index].collapse = !this.list[index].collapse |
|
|
|
|
|
}, |
|
|
|
|
|
dropdownTap(index) { |
|
|
|
|
|
this.list[index].isShowSelect = !this.list[index].isShowSelect |
|
|
|
|
|
this.list.forEach((el, i) => { |
|
|
|
|
|
if(i !== index) { |
|
|
|
|
|
this.list[i].isShowSelect = false |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
dropdownItemTap(index) { |
|
|
|
|
|
this.params.duration = index |
|
|
|
|
|
this.downCallback() |
|
|
|
|
|
}, |
|
|
|
|
|
downCallback() { |
|
|
|
|
|
this.pagination.pageNum = 1 |
|
|
|
|
|
this.getList() |
|
|
|
|
|
.then(({ list, total }) => { |
|
|
|
|
|
this.$refs.list.refreshSuccess({ list, total }) |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(() => { |
|
|
|
|
|
this.$refs.list.refreshFail() |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
upCallback() { |
|
|
|
|
|
this.pagination.pageNum++ |
|
|
|
|
|
this.getList() |
|
|
|
|
|
.then(({ list, total }) => { |
|
|
|
|
|
this.$refs.list.loadSuccess({ list, total }) |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(() => { |
|
|
|
|
|
this.$refs.list.loadFail() |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
components: { lvSelect, uGap }, |
|
|
|
|
|
data() { |
|
|
|
|
|
return { |
|
|
|
|
|
isShowSelect: false, |
|
|
|
|
|
dropdownList: ['近30天', '近7天', '今日', '全部'], // 0:近30天 1:近7天 2:今日 3:全部 |
|
|
|
|
|
option: { |
|
|
|
|
|
size: 10, |
|
|
|
|
|
auto: true, |
|
|
|
|
|
emptyText: '暂无数据~', |
|
|
|
|
|
background: '#F7F8FA', |
|
|
|
|
|
disabled: false |
|
|
|
|
|
}, |
|
|
|
|
|
seemoreFlag: 0, |
|
|
|
|
|
params: { |
|
|
|
|
|
asc: '', |
|
|
|
|
|
desc: '', |
|
|
|
|
|
duration: '3', |
|
|
|
|
|
enterpriseIds: [] |
|
|
|
|
|
}, |
|
|
|
|
|
pagination: { |
|
|
|
|
|
pageNum: 0, // 初始会执行一次下拉加载 |
|
|
|
|
|
pageSize: 10 |
|
|
|
|
|
}, |
|
|
|
|
|
list: [] |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
onLoad() { |
|
|
|
|
|
// this.getList() |
|
|
|
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
dropdownName() { |
|
|
|
|
|
let text = '全部' |
|
|
|
|
|
switch (this.params.duration) { |
|
|
|
|
|
case 0: |
|
|
|
|
|
text = '近30天' |
|
|
|
|
|
break |
|
|
|
|
|
case 1: |
|
|
|
|
|
text = '近7天' |
|
|
|
|
|
break |
|
|
|
|
|
case 2: |
|
|
|
|
|
text = '今日' |
|
|
|
|
|
break |
|
|
|
|
|
case 3: |
|
|
|
|
|
text = '全部' |
|
|
|
|
|
break |
|
|
|
|
|
default: |
|
|
|
|
|
break |
|
|
|
|
|
} |
|
|
|
|
|
return text |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
methods: { |
|
|
|
|
|
previewImg(img, list) { |
|
|
|
|
|
uni.previewImage({ |
|
|
|
|
|
urls: list, |
|
|
|
|
|
current: img |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
getList() { |
|
|
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
|
|
getDeviceInfo({ ...this.params, ...this.pagination }) |
|
|
|
|
|
.then((res) => { |
|
|
|
|
|
res.records.forEach((el) => { |
|
|
|
|
|
el.collapse = false |
|
|
|
|
|
el.isShowSelect = false |
|
|
|
|
|
}) |
|
|
|
|
|
// console.log('设备信息', res.records) |
|
|
|
|
|
if (res) { |
|
|
|
|
|
if (this.pagination.pageNum == 1) { |
|
|
|
|
|
this.list = res.records |
|
|
|
|
|
} else { |
|
|
|
|
|
this.list = this.list.concat(res.records) |
|
|
|
|
|
} |
|
|
|
|
|
// this.list = [] |
|
|
|
|
|
// this.list = [...this.list, ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]] |
|
|
|
|
|
resolve({ list: this.list, total: res.total }) |
|
|
|
|
|
} else { |
|
|
|
|
|
reject() |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
.catch((err) => { |
|
|
|
|
|
reject(err) |
|
|
|
|
|
}) |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
seemoreTap(index) { |
|
|
|
|
|
this.list[index].collapse = !this.list[index].collapse |
|
|
|
|
|
}, |
|
|
|
|
|
dropdownTap(index) { |
|
|
|
|
|
this.list[index].isShowSelect = !this.list[index].isShowSelect |
|
|
|
|
|
this.list.forEach((el, i) => { |
|
|
|
|
|
if (i !== index) { |
|
|
|
|
|
this.list[i].isShowSelect = false |
|
|
|
|
|
} |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
dropdownItemTap(index) { |
|
|
|
|
|
this.params.duration = index |
|
|
|
|
|
this.downCallback() |
|
|
|
|
|
}, |
|
|
|
|
|
downCallback() { |
|
|
|
|
|
this.pagination.pageNum = 1 |
|
|
|
|
|
this.getList() |
|
|
|
|
|
.then(({ list, total }) => { |
|
|
|
|
|
this.$refs.list.refreshSuccess({ list, total }) |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(() => { |
|
|
|
|
|
this.$refs.list.refreshFail() |
|
|
|
|
|
}) |
|
|
|
|
|
}, |
|
|
|
|
|
upCallback() { |
|
|
|
|
|
this.pagination.pageNum++ |
|
|
|
|
|
this.getList() |
|
|
|
|
|
.then(({ list, total }) => { |
|
|
|
|
|
this.$refs.list.loadSuccess({ list, total }) |
|
|
|
|
|
}) |
|
|
|
|
|
.catch(() => { |
|
|
|
|
|
this.$refs.list.loadFail() |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss"> |
|
|
<style lang="scss"> |
|
|
.warpper { |
|
|
.warpper { |
|
|
.card-box { |
|
|
|
|
|
.header { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
height: 88rpx; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
padding: 0rpx 36rpx 0rpx 32rpx; |
|
|
|
|
|
.title { |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
color: #000000; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
} |
|
|
|
|
|
.desc { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #888888; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
text-align: right; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
.bottom-btn { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
z-index: 8; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
.down-box { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
margin-top: 14rpx; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
right: 15rpx; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
width: 204rpx; |
|
|
|
|
|
height: 218.9rpx; |
|
|
|
|
|
background: #FFFFFF; |
|
|
|
|
|
border-radius: 6rpx; |
|
|
|
|
|
padding: 0rpx 30rpx; |
|
|
|
|
|
.row { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
height: 54rpx; |
|
|
|
|
|
font-size: 22rpx; |
|
|
|
|
|
color: #323233; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
border-bottom: 1.6rpx solid #EBEDF0; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
.activeText { |
|
|
|
|
|
color: #007AFF; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.down-box::before{ |
|
|
|
|
|
content: ''; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 0; |
|
|
|
|
|
height: 0; |
|
|
|
|
|
border-bottom: solid 12rpx #ffffff; |
|
|
|
|
|
border-right: solid 12rpx transparent; |
|
|
|
|
|
border-left: solid 12rpx transparent; |
|
|
|
|
|
left: 80%; |
|
|
|
|
|
top: -12rpx; |
|
|
|
|
|
margin-left: -12rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.content { |
|
|
|
|
|
border-bottom: 2rpx solid #dddddd; |
|
|
|
|
|
border-top: 2rpx solid #dddddd; |
|
|
|
|
|
.info { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
height: 148rpx; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
.value { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #333333; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
} |
|
|
|
|
|
.title { |
|
|
|
|
|
margin-top: 16rpx; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
color: #888888; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
|
|
|
.icon { |
|
|
|
|
|
width: 32rpx; |
|
|
|
|
|
height: 32rpx; |
|
|
|
|
|
padding-right: 6rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.shrink-box { |
|
|
|
|
|
background: #f7f8fa; |
|
|
|
|
|
padding: 8rpx 36rpx 16rpx 32rpx; |
|
|
|
|
|
.row { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
margin-top: 16rpx; |
|
|
|
|
|
.left { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
width: 60%; |
|
|
|
|
|
} |
|
|
|
|
|
.right { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
width: 40%; |
|
|
|
|
|
} |
|
|
|
|
|
.title { |
|
|
|
|
|
flex: 0 0 140rpx; |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #888888; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
} |
|
|
|
|
|
.value { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #333333; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
} |
|
|
|
|
|
.look-over { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #007aff; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.see-more { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
height: 80rpx; |
|
|
|
|
|
line-height: 80rpx; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
padding: 0rpx 32rpx; |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #007aff; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
.icon { |
|
|
|
|
|
width: 24rpx; |
|
|
|
|
|
height: 24rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.card-box { |
|
|
|
|
|
.header { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
height: 88rpx; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
padding: 0rpx 36rpx 0rpx 32rpx; |
|
|
|
|
|
.title { |
|
|
|
|
|
font-size: 30rpx; |
|
|
|
|
|
color: #000000; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
font-weight: 600; |
|
|
|
|
|
} |
|
|
|
|
|
.desc { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #888888; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
text-align: right; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
.bottom-btn { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
z-index: 8; |
|
|
|
|
|
} |
|
|
|
|
|
.down-box { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
margin-top: 14rpx; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
right: 15rpx; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
width: 204rpx; |
|
|
|
|
|
height: 218.9rpx; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
border-radius: 6rpx; |
|
|
|
|
|
padding: 0rpx 30rpx; |
|
|
|
|
|
.row { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
height: 54rpx; |
|
|
|
|
|
font-size: 22rpx; |
|
|
|
|
|
color: #323233; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
border-bottom: 1.6rpx solid #ebedf0; |
|
|
|
|
|
} |
|
|
|
|
|
.activeText { |
|
|
|
|
|
color: #007aff; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.down-box::before { |
|
|
|
|
|
content: ''; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 0; |
|
|
|
|
|
height: 0; |
|
|
|
|
|
border-bottom: solid 12rpx #ffffff; |
|
|
|
|
|
border-right: solid 12rpx transparent; |
|
|
|
|
|
border-left: solid 12rpx transparent; |
|
|
|
|
|
left: 80%; |
|
|
|
|
|
top: -12rpx; |
|
|
|
|
|
margin-left: -12rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.content { |
|
|
|
|
|
border-bottom: 2rpx solid #dddddd; |
|
|
|
|
|
border-top: 2rpx solid #dddddd; |
|
|
|
|
|
.info { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
justify-content: space-around; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
height: 148rpx; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
.value { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #333333; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-weight: 500; |
|
|
|
|
|
} |
|
|
|
|
|
.title { |
|
|
|
|
|
margin-top: 16rpx; |
|
|
|
|
|
font-size: 24rpx; |
|
|
|
|
|
color: #888888; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
|
|
|
.icon { |
|
|
|
|
|
width: 32rpx; |
|
|
|
|
|
height: 32rpx; |
|
|
|
|
|
padding-right: 6rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.shrink-box { |
|
|
|
|
|
background: #f7f8fa; |
|
|
|
|
|
padding: 8rpx 36rpx 16rpx 32rpx; |
|
|
|
|
|
.row { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
margin-top: 16rpx; |
|
|
|
|
|
.left { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
width: 60%; |
|
|
|
|
|
} |
|
|
|
|
|
.right { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
width: 40%; |
|
|
|
|
|
} |
|
|
|
|
|
.title { |
|
|
|
|
|
flex: 0 0 140rpx; |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #888888; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
} |
|
|
|
|
|
.value { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #333333; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
} |
|
|
|
|
|
.look-over { |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #007aff; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.see-more { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-direction: row; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
height: 80rpx; |
|
|
|
|
|
line-height: 80rpx; |
|
|
|
|
|
background: #ffffff; |
|
|
|
|
|
padding: 0rpx 32rpx; |
|
|
|
|
|
font-size: 28rpx; |
|
|
|
|
|
color: #007aff; |
|
|
|
|
|
letter-spacing: 0; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-weight: 400; |
|
|
|
|
|
.icon { |
|
|
|
|
|
width: 24rpx; |
|
|
|
|
|
height: 24rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |