factoryDirector/src/view/Home/component/whyFactoryDirector.vue

<template>
  <div class="factory-director animate__animated animate__bounceInUp">
    <p class="why">为什么选择云厂长？</p>
    <p class="factory-information">
      智能生产，值得信赖；技术驱动，创新引领，助力制造业企业实现数字化转型
    </p>
    <div class="select-list">
      <div
        class="select-item"
        v-for="item in selectData.numList"
        :key="item.id"
      >
        <img class="select-img" :src="item.image" alt="" />
        <div class="information">
          <p>
            <span class="num">{{ item.number }}</span
            ><span class="plus">+</span>
          </p>
          <p class="introduce">{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import "animate.css";
import { reactive, onMounted } from "vue";
import { whySelect } from "../../../api/home";

interface SelectType {
  numList: any;
}

const selectData = reactive<SelectType>({
  numList: [],
});

const getInfo = () => {
  whySelect().then((res) => {
    selectData.numList = res.data;
  });
};

onMounted(() => {
  getInfo();
});
</script>
<style scoped lang="less">
.factory-director {
  padding: 80px 0 88px;
  .why {
    text-align: center;
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 12px;
  }
  .factory-information {
    font-size: 16px;
    color: #525967;
    text-align: center;
  }
  .select-list {
    display: flex;
    justify-content: space-around;
    width: 70%;
    margin: 0 auto;
    margin-top: 64px;
    .select-item {
      display: flex;
      align-items: center;
      .select-img {
        width: 74px;
        height: 90px;
        margin-right: 16px;
      }
      .num {
        font-size: 60px;
        font-weight: 600;
        color: #444444;
      }
      .plus {
        font-size: 20px;
        color: #444444;
      }
      .introduce {
        font-size: 14px;
        color: #444444;
      }
    }
  }
}
</style>