VAVABUY/pages/index/components/newBox.vue

<template>
  <view class="new_box">
    <view class="card_item" v-for="(item, index) in card" :key="index">
      <view class="item_top">
        <view class="item_img">
          <view class="item_square">
            <image
              :src="`../../static/home/new_${index}.png`"
              class="img"
            ></image>
          </view>
        </view>
        <view class="line"></view>
      </view>
      <view class="item_text">
        <view class="item_num">{{ index + 1 }}</view>
        <trans class="text" :_t="item.text" />
      </view>
    </view>

    <view class="middle">
      <view class="truck">
        <image src="/static/home/truck.png" class="img"></image>
      </view>
      <view class="arrow">
        <image src="/static/home/arrow.png" class="img"></image>
      </view>
    </view>
  </view>
</template>

<script setup>
const card = [
  {
    icon: "",
    text: "来自卖家",
  },
  {
    icon: "",
    text: "送货上门",
  },
];
</script>

<style lang="less" scoped>
@import url("@/style.less");

.new_box {
  display: flex;
  justify-content: space-between;
  position: relative;
  .card_item {
    // min-width: 33%;
    color: var(--text);
    font-size: 24rpx;
    font-weight: bold;
    .flex_center();
    flex-direction: column;
    position: relative;
    z-index: 1;

    .item_top {
      position: relative;
      border-radius: 50%;
      padding: 14rpx;
      background-color: var(--bg);
      box-sizing: border-box;

      .item_img {
        background-color: var(--bg);
        border-radius: 50%;
        .flex_center();
        padding: 14rpx;
        border: 2rpx dashed var(--bor-color1);
        .item_square {
          width: 50rpx;
          height: 50rpx;
          .flex_center();
          background-color: #186de1;
          border-radius: 12rpx;
          .img {
            width: 38rpx;
            height: 33rpx;
          }
        }
      }
    }

    .item_text {
      display: flex;
      align-items: center;
      margin-top: 10rpx;

      .item_num {
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        background-color: #186de1;
        display: flex;
        justify-content: center;
        font-size: 24rpx;
        color: var(--light);
        line-height: 32rpx;
        margin-right: 8rpx;
      }

      .text {
        flex: 1;
        display: inline-block;
        text-align: center;
        white-space: nowrap;
      }
    }
  }
  .middle {
    position: absolute;
    top: 16rpx;
    left: 51%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    .truck {
      width: 48rpx;
      height: 48rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .arrow {
      width: 232rpx;
      height: 18rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>