CSS 伪类 after 右侧线

最新推荐文章于 2023-08-20 12:23:24 发布

Windyluna

最新推荐文章于 2023-08-20 12:23:24 发布

阅读量1.1k

点赞数

分类专栏： CSS 文章标签： css css3

本文链接：https://blog.csdn.net/windyluna/article/details/123052789

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

该博客介绍了两种在Vue中实现统计数值展示组件的方法。第一种方法使用了百分比宽度和伪类来创建分隔效果，适用于均匀分布的数据展示；第二种方法则通过设置相对定位和绝对定位实现自适应布局，第一列自适应宽度，右侧则铺满。示例代码详细展示了如何在组件中定义样式和结构，以达到美观且功能齐全的统计数字展示。

摘要由CSDN通过智能技术生成

效果图：
在这里插入图片描述

注意：给父元素 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>