bigDataApp/pages/cb/shuifeizs/components/base.vue

<template>
  <view class="base-container" v-if="dataList.length">
    <view class="base-list">
      <view class="base-item" v-for="(item, index) in dataList" :key="index">
        <view class="base-item-value">{{ item.value }}</view>
        <view class="base-item-label">{{
          item.sfDisplayname || item.sfName
        }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    dataList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
};
</script>
<style scoped lang="scss">
.base-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(100% - 64rpx);
  padding: 16rpx 0;
  margin: 0 32rpx;
  justify-content: space-between;
  border-radius: 16rpx;
  background: linear-gradient(180deg, #edfbfb 0%, #d2f2ed 100%);
  margin-bottom: 30rpx;
  .base-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    .base-item {
      text-align: center;
      .base-item-value {
        width: 150rpx;
        color: #042118;
        font-family: 'Source Han Sans CN VF';
        font-size: 32rpx;
        font-weight: 500;
        text-align: center;
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .base-item-label {
        width: 150rpx;
        color: #687a74;
        font-family: 'Source Han Sans CN VF';
        text-align: center;
        font-size: 28rpx;
        font-weight: 400;
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>