feixinyun/pages/solution.vue

<template>
  <div class="solution-banner"></div>

  <div class="solution-scene">
    <div class="center1440">
      <p class="headline">行业痛点场景</p>
      <div class="scene-content">
        <div
          class="scene-item"
          :style="{ 'background-image': `url(${item.bgImg})` }"
          v-for="item in sceneList"
        >
          <div class="scene-masking">
            <img class="masking-icon masking-img" :src="item.icon" />
            <img class="active-masking-img masking-icon" :src="item.activeIcon" />
            <p class="masking-label">{{ item.label }}</p>
            <p class="masking-value">{{ item.value }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";

import sceneBg_01 from "./../public/images/scene-bg-01.png";
import sceneIocon_01 from "./../public/images/scene_icon_01.png";
import sceneIocon_02 from "./../public/images/scene_icon_02.png";
import sceneIocon_03 from "./../public/images/scene_icon_03.png";
import sceneIocon_04 from "./../public/images/scene_icon_04.png";
import ActiovceneIocon_01 from "./../public/images/scene_01.png";
import ActiovceneIocon_02 from "./../public/images/scene_02.png";
import ActiovceneIocon_03 from "./../public/images/scene_03.png";
import ActiovceneIocon_04 from "./../public/images/scene_04.png";

const sceneList = ref([
  {
    icon: sceneIocon_01,
    activeIcon: ActiovceneIocon_01,
    bgImg: sceneBg_01,
    label: "互联网行业",
    value: "用户隐私安全问题办公系统繁多企业宣传成本高",
  },
  {
    icon: sceneIocon_02,
    activeIcon: ActiovceneIocon_02,
    bgImg: sceneBg_01,
    label: "金融行业",
    value: "用户隐私安全问题办公系统繁多企业宣传成本高",
  },
  {
    icon: sceneIocon_03,
    activeIcon: ActiovceneIocon_03,
    bgImg: sceneBg_01,
    label: "电商行业",
    value: "用户隐私安全问题办公系统繁多企业宣传成本高",
  },
  {
    icon: sceneIocon_04,
    activeIcon: ActiovceneIocon_04,
    bgImg: sceneBg_01,
    label: "物流行业",
    value: "用户隐私安全问题办公系统繁多企业宣传成本高",
  },
]);
</script>
<style lang="scss" scoped>
.solution-banner {
  width: 100%;
  min-height: 560px;
  font-family: var(--family-01);
  font-weight: var(--weight-400);
  background-image: url("../public/images/solution-banner.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  align-items: center;
}

.solution-scene {
  width: 100%;
  .headline {
    text-align: center;
    font-size: 48px;
    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
    font-weight: 400;
    color: #1a1a1a;
    padding: var(--size-90) 0 var(--size-50);
  }
  .scene-content {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding-bottom: 88px;
    .scene-item {
      width: 360px;
      height: 513px;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: cover;
      position: relative;
      .scene-masking {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0 40px;
        cursor: pointer;
        .masking-icon {
          width: 105px;
          height: 105px;
        }
        .active-masking-img {
          display: none;
        }
        .masking-label {
          font-size: 24px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: left;
          color: #ffffff;
          padding-top: 28px;
        }
        .masking-value {
          display: none;
          padding-top: 18px;
          font-size: 16px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: center;
          color: #e6e6e6;
        }
        &:hover {
          background-color: var(--color-05);
          .masking-img {
            display: none;
          }
          .active-masking-img {
            display: inline-block;
          }
          .masking-value {
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>