app/pages/index/com/serviceAdvantages.vue

<script setup>
defineProps(['style']);
import sheep from '@/sheep';
</script>

<template>
  <view class="service-advantages">
    <view class="service-item">
      <view class="service-content">
        <image class="service-icon" :src="sheep.$url.static('/static/home/zytd.png')" />
        <view class="service-text">
          <text class="title">专业团队</text>
          <text class="desc">专注于小企业\n经验丰富</text>
        </view>
      </view>
    </view>
    <view class="service-item">
      <view class="service-content">
        <image class="service-icon" :src="sheep.$url.static('/static/home/zyzh.png')" />
        <view class="service-text">
          <text class="title">资源整合</text>
          <text class="desc">整合多方资源\n助力企业发展</text>
        </view>
      </view>
    </view>
    <view class="service-item">
      <view class="service-content">
        <image class="service-icon" :src="sheep.$url.static('/static/home/dzfw.png')" />
        <view class="service-text">
          <text class="title">定制服务</text>
          <text class="desc">按需定制\n精准服务</text>
        </view>
      </view>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.service-advantages {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  // width: 100vw;

  .service-item {
    width: calc(33.33% - 8px);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding: 8px 18px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 8px;
    background-color: #ffffff;
    position: relative;

    .service-content {
      width: 72px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      position: relative;

      .service-icon {
        width: 48px;
        height: 48px;
        position: relative;
        flex-shrink: 0;
        margin: -1px 0 0;
      }

      .service-text {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        position: relative;

        .title {
          flex-shrink: 0;
          font-size: 14px;
          font-family: 'PingFang SC';
          font-weight: normal;
          line-height: 20px;
          color: var(--333, #333333);
          white-space: pre;
        }

        .desc {
          flex-shrink: 0;
          text-align: center;
          font-size: 12px;
          font-family: 'PingFang SC';
          font-weight: normal;
          line-height: 17px;
          color: var(--999, #999999);
        }
      }
    }
  }
}
</style>