feixinyun/pages/products.vue

<template>
  <div class="products">
    <div class="products-content">
      <p class="headline">通知短信</p>
      <p class="explain">
        提供通知类短信服务，三网合一的高质量短信通道，适用于服务通知，物流通知，订单通知，注册及消费信息确认等。
      </p>
    </div>
  </div>
  <!-- 产品优势 -->
  <div class="advantage">
    <div class="advantage-content center1200">
      <p class="conmon-headline">产品优势</p>
      <div class="advantage-box">
        <n-carousel
          class="advantage-carousel"
          autoplay
          :interval="5000"
          :show-dots="false"
          :slides-per-view="3"
          :space-between="20"
          draggable
        >
          <div class="carousel-item" v-for="item in advantageList" :key="item">
            <div class="advantage-left">
              <p class="name">{{ item.label }}</p>
              <p class="value-item" v-for="s in item.explain">
                <span class="val-tag">一</span>
                <span class="val-text">{{ s }}</span>
              </p>
            </div>
            <div class="advantage-right">
              <img :src="item.icon" />
            </div>
          </div>
        </n-carousel>
      </div>
    </div>
  </div>

  <div class="scenario">
    <div class="center1200">
      <p class="conmon-headline">行业应用场景</p>
      <div class="scenario-box">
        <div class="scenario-item" v-for="item in scenarioList">
          <img class="icon" :src="item.icon" />
          <p class="name">{{ item.label }}</p>
          <a href="#">下载模板</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 产品优势
import icon_09 from "../static/icon/icon_09.png";
import icon_10 from "../static/icon/icon_10.png";
import icon_11 from "../static/icon/icon_11.png";
const advantageList = ref([
  {
    label: "5G必达",
    icon: icon_09,
    explain: ["三网合一", "高质量通道", "服务请求秒级相应"],
  },
  {
    label: "99.99%到达率",
    icon: icon_10,
    explain: ["支持大容量，高并发", "平台模板免审核", "运营商直联通道"],
  },
  {
    label: "稳定保障",
    icon: icon_11,
    explain: ["主短信通道+多条备份短信通道", "平台实时监控，智能切换"],
  },
  {
    label: "稳定保障",
    icon: icon_11,
    explain: ["主短信通道+多条备份短信通道", "平台实时监控，智能切换"],
  },
]);

// 行业应用场景
import icon_12 from "../static/icon/icon_12.png";
import icon_13 from "../static/icon/icon_13.png";
import icon_14 from "../static/icon/icon_14.png";
import icon_15 from "../static/icon/icon_15.png";
import icon_16 from "../static/icon/icon_16.png";
const scenarioList = ref([
  {
    label: "用户注册",
    icon: icon_12,
    link: "#",
  },
  {
    label: "找回密码",
    icon: icon_13,
    link: "#",
  },
  {
    label: "物流短信",
    icon: icon_14,
    link: "#",
  },
  {
    label: "消息通知",
    icon: icon_15,
    link: "#",
  },
  {
    label: "生日祝福",
    icon: icon_16,
    link: "#",
  },
]);
</script>

<style lang="scss" scoped>
.conmon-headline {
  text-align: center;
  font-size: var(--size-48);
  font-family: var(--family-01);
  font-weight: var(--weight-400);
  color: var(--color-01);
  padding: var(--size-90) 0 var(--size-50);
}
.products {
  width: 100%;
  min-height: 560px;
  font-family: var(--family-01);
  font-weight: var(--weight-400);
  background-image: url("../public/images/bg_01.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
  .products-content {
    width: 1284px;
    margin: 0 auto;
    font-family: var(--family-01);
    font-weight: var(--weight-400);
    .headline {
      font-size: var(--size-48);
      color: var(--color-01);
    }
    .explain {
      padding-top: var(--size-36);
      font-size: var(--size-24);
      color: var(--color-02);
    }
  }
}

.advantage {
  .advantage-box {
    width: 100%;
    padding-bottom: 88px;
    .advantage-carousel {
      width: 100%;
      height: 187px !important;
      .carousel-item {
        width: 100%;
        height: 187px;
        border-radius: 8px;
        background-color: #f3f5f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .advantage-left {
          flex: 1;
          padding: 25px;
          .name {
            font-size: 24px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            color: #1a1a1a;
            padding-bottom: 18px;
          }
          .value-item {
            width: 100%;
            display: flex;
            font-size: 16px;
            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
            font-weight: 400;
            color: #666666;
            padding-bottom: 10px;
            line-height: 1.3;
            .val-tag {
              flex-shrink: 0;
              padding-right: 10px;
            }
            .val-text {
            }
          }
        }
        .advantage-right {
          flex-shrink: 0;
          width: 122px;
          height: 111px;
        }
      }
    }
    // .advantage-item {
    //   width: calc((100% - 40px) / 3);
    //   height: 187px;
    //   background-color: #f3f5f9;
    // }
  }
}

.scenario {
  width: 100%;
  min-height: 539px;
  font-family: var(--family-01);
  font-weight: var(--weight-400);
  background-image: url("../public/images/home_bg_04.png");
  .scenario-box {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    .scenario-item {
      border-radius: var(--size-8);
      width: calc((100% -  var(--size-216)) / 5);
      height: var(--size-221);
      background-color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: var(--shadow-01);
      .icon {
        width: var(--size-70);
        height: var(--size-70);
        object-fit: contain;
      }
      .name {
        font-size:  var(--size-24);
        font-family: var(--family-01);
        font-weight: var(--weight-400);
        text-align: center;
        color: #1a1a1a;
        padding: var(--size-27) 0 var(--size-11);
      }
    }
  }
}
</style>