效果图:
注意:给父元素 num-item
添加 position: relative;
,添加伪类:
.num-item:after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
width: 0;
height: 46rpx;
border: 2rpx solid #dcdcdc;
}
.num-item:last-of-type:after {
border: none;
}
方法一:
组件:
<template>
<view class="num-con">
<view class="num-item" v-for="(item, index) in categoryItem" :key="index">
<view class="name">
<text>{{ item.name }}</text>
</view>
<view class="value">
<text :style="{ color: item.color }">{{ item.value }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
name: "statisticalNum",
props: {
categoryItem: {
type: Array,
default: () => [],
},
},
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.num-con {
width: 100%;
height: 146rpx;
background: #fefefe;
box-shadow: 0rpx 2rpx 20rpx rgba(0, 0, 0, 0.04);
border-radius: 20rpx;
display: flex;
align-items: center;
.num-item {
width: 25%;
height: 98rpx;
position: relative;
.name {
font-size: 26rpx;
color: #666666;
text-align: center;
line-height: 32rpx;
}
.value {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
text-align: center;
line-height: 76rpx;
}
}
.num-item:after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
width: 0;
height: 80rpx;
border: 2rpx solid #dcdcdc;
}
.num-item:last-of-type:after {
border: none;
}
}
</style>
页面调用:
<statistical-num :categoryItem="categoryItem"></statistical-num>
data 数据
categoryItem: [
{ name: "今日告警次数", value: 0, },
{ name: "今日异常企业", value: 0, },
{ name: "企业总数", value: 0, },
{ name: "设备总数", value: 0, },
],
方法二:
这种方法是左边第一列自适应宽度,右侧铺满
<template>
<view class="total-container">
<view class="total-box">
<view
class="total-item"
v-for="(item, index) in categoryItem"
:key="index"
>
<view class="name">{{ item.name }}</view>
<view class="number" :style="{ color: item.color }">{{
item.value
}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "statisticalNum",
props: {
categoryItem: {
type: Array,
default: () => [],
},
},
data() {
return {};
},
};
</script>
<style lang="less" scoped>
.total-box {
display: flex;
padding: 20rpx 0rpx 20rpx 0rpx;
background: #fefefe;
border-radius: 20rpx;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.04);
.total-item {
flex: 1;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20rpx 0 20rpx 0;
text-align: center;
.name {
width: 100%;
margin-bottom: 16rpx;
font-size: 26rpx;
color: #676767;
}
.num {
font-size: 40rpx;
font-family: PingFang SC;
font-weight: bold;
text-align: center;
line-height: 76rpx;
}
}
.total-item:after {
position: absolute;
right: 0;
top: 50%;
transform: translate(0, -50%);
content: "";
width: 0;
height: 46rpx;
border: 2rpx solid #dcdcdc;
}
.total-item:first-of-type {
flex: unset;
}
.total-item:last-of-type:after {
border: none;
}
}
.total-container {
width: 100%;
}
</style>