143 lines
2.5 KiB
Vue
143 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view class="">
|
||
|
|
<view class="info">
|
||
|
|
<view class="item_box">
|
||
|
|
<view class="item">
|
||
|
|
<view class="title_box f-row aic jcb">
|
||
|
|
<view class="title">
|
||
|
|
{{title}}
|
||
|
|
</view>
|
||
|
|
<view class="f-row aic more" v-if="list.length>6" @click="open=!open">
|
||
|
|
<text>{{!open?'展开':'收起'}}</text>
|
||
|
|
<uni-icons type="down" color="#999999" v-if="!open"></uni-icons>
|
||
|
|
<uni-icons type="up" color="#999999" v-else></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view :class="['data_wrapper',{'close':list.length>6&&open}]">
|
||
|
|
<view class="data_box f-row aic ">
|
||
|
|
<view class="data f-col aic" v-for="item,i in list">
|
||
|
|
<view class="">
|
||
|
|
{{item?.dailyVolume}}
|
||
|
|
</view>
|
||
|
|
<text>{{item.gas}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import {
|
||
|
|
ref,
|
||
|
|
computed,
|
||
|
|
watch,
|
||
|
|
nextTick
|
||
|
|
} from 'vue';
|
||
|
|
const props = defineProps({
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
list: {
|
||
|
|
type: Array,
|
||
|
|
default: function() {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
})
|
||
|
|
const open = ref(false)
|
||
|
|
const moreHeight = ref(null)
|
||
|
|
|
||
|
|
watch(() => props.list, () => {
|
||
|
|
nextTick(() => {
|
||
|
|
uni.createSelectorQuery().select('.data_box').boundingClientRect(data => {
|
||
|
|
moreHeight.value = (data?.height || 0) + 'px'
|
||
|
|
}).exec()
|
||
|
|
})
|
||
|
|
|
||
|
|
}, {
|
||
|
|
immediate: true
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
page {
|
||
|
|
background-color: #F8F8F8;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
.data_wrapper {
|
||
|
|
height: 288rpx;
|
||
|
|
transition: all .3s;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.close {
|
||
|
|
height: v-bind(moreHeight);
|
||
|
|
}
|
||
|
|
|
||
|
|
.info {
|
||
|
|
.item_box {
|
||
|
|
|
||
|
|
.item {
|
||
|
|
width: 690rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
||
|
|
border-radius: 16rpx;
|
||
|
|
padding: 30rpx 0;
|
||
|
|
margin-top: 24rpx;
|
||
|
|
|
||
|
|
.title_box {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
margin-bottom: -20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: #333333;
|
||
|
|
background-image: url('../../static/index/line.png');
|
||
|
|
background-size: 44rpx 13rpx;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: left bottom;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.more {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
|
||
|
|
text {
|
||
|
|
margin-right: 6rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.data_box {
|
||
|
|
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.data {
|
||
|
|
width: 33.33%;
|
||
|
|
margin-top: 60rpx;
|
||
|
|
height: 80rpx;
|
||
|
|
|
||
|
|
view {
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #333333;
|
||
|
|
margin-bottom: 8rpx;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
text {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|