sxc-frontend/web/src/components/SsService.vue

<script setup lang="ts">
import {useGlobalStore} from "@/stores/global"
import {onMounted} from "vue";

const global = useGlobalStore()

const itemClass = (index: number) => {
  switch (index % 5) {
    case 0:
      return ' hover-scale'
    case 1:
      return ' hover-scale yellow right'
    case 2:
      return ' center'
    case 3:
      return ' hover-scale yellow bottom no-margin-bottom'
    case 4:
      return ' hover-scale right bottom no-margin-bottom'
  }
}

const emit = defineEmits(['loadService', 'loaded'])

const loadService = (categoryId: number, title: string, cover: string) => {
  emit('loadService', categoryId, title, cover)
}

onMounted(() => {
  emit('loaded', 'service')
})
</script>

<template>
  <div class="service">
    <template v-for="(item, index) in global.categories">
      <div class="service-item" :class="itemClass(index)" @click="loadService(item.id, item.categoryName, item.imgUrl)">
        <div class="service-item-content">
          <div class="service-item-content-child">
            <div class="title">{{ item.categoryName }}</div>
            <div class="subject is-pc">{{ item.profile }}</div>
            <div class="subject is-mobile">{{ item.profileWap }}</div>
          </div>
        </div>
        <div v-if="index === 2" class="service-item-bg">
          <el-image class="service-item-image" fit="contain" :src="getImageUrl(item.imgUrl)"/>
        </div>
        <el-image v-else class="service-item-image" fit="contain" :src="getImageUrl(item.imgUrl)"/>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.service {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: relative;

  .service-item {
    width: calc(50% - 0.44rem);
    position: relative;
    height: 7.5rem;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(250, 255, 253, 0.8), rgba(225, 245, 248, 0.8));
    box-shadow: 0 0.25rem 1.25rem 0 rgba(52, 149, 239, 0.4);
    margin-bottom: 1rem;
    cursor: pointer;
    min-height: var(--min-touch-target);

    .service-item-content {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 1.25);
      display: flex;

      .service-item-content-child {
        position: absolute;
        width: calc(100% - 3rem);

        .title {
          color: #101333;
          font-size: var(--subtitle-font-size);
          font-weight: 600;
        }

        .subject {
          font-size: var(--small-font-size);
          line-height: 1.25em;
          color: #7E8AA2;

          &.is-mobile {
            width: 72%;
          }
        }
      }
    }

    .service-item-image {
      position: absolute;
      bottom: 0;
      right: 3.8rem;
      z-index: 1;
      width: 7.3rem;
      height: 5.56rem;
      opacity: 0.2;
    }

    &.yellow {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(246, 240, 239, 0.7));
    }

    &.right {
      text-align: right;

      .service-item-content {
        justify-content: end;

        .service-item-content-child {
          .subject {
            &.is-mobile {
              float: right;
            }
          }
        }
      }

      .service-item-image {
        right: unset;
        left: 3.8rem;
      }
    }

    &.bottom {
      .service-item-content {
        .service-item-content-child {
          position: absolute;
          bottom: calc(var(--spacing-unit) * 1.5);
        }
      }
    }

    &.no-margin-bottom {
      margin-bottom: 0;
    }

    &.center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      text-align: center;
      width: 12rem;
      height: 12rem;
      border-radius: 6rem;
      box-shadow: inset 0 0.25rem 1.25rem 0 rgba(52, 149, 239, 0.4);
      background: linear-gradient(90deg, #c2dff9, #c6e2fa);

      .service-item-content {
        transition: all 0.3s ease;

        .service-item-content-child {
          .subject {
            &.is-mobile {
              height: 2rem;
              margin: 0 auto;
              overflow: hidden;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
            }
          }
        }
      }

      .service-item-bg {
        transition: all 0.3s ease;
      }

      &:hover {
        .service-item-content {
          transform: scale(1.1);
        }

        .service-item-bg {
          transform: scale(1.1);
        }
      }

      .service-item-content {
        width: 100%;
        padding: unset;

        .service-item-content-child {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .service-item-bg {
        position: absolute;
        top: 1rem;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        border-radius: 5rem;
        z-index: 1;
        background: linear-gradient(180deg, #FFFFFF, #E8EBFF);
        box-shadow: 0 0.25rem 1.25rem 0 rgba(52, 149, 239, 0.4);
      }

      .service-item-image {
        top: 50%;
        left: 50%;
        right: unset;
        bottom: unset;
        width: 6rem;
        height: 6rem;
        transform: translate(-50%, -50%);
      }
    }
  }
}

/* 1080x1920 中等尺寸设备 */
@media screen and (min-width: 751px) and (max-width: 1200px) and (min-height: 1700px) {
  .service {
    .service-item {
      height: 9rem;
      box-shadow: 0 0.5rem 1.5rem 0 rgba(52, 149, 239, 0.5);
      margin-bottom: 1.25rem;

      .service-item-content {
        padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 1.75);

        .service-item-content-child {
          width: calc(100% - 3.5rem);

          .title {
            font-size: 1.25rem; /* 1.125rem → 1.25rem */
            margin-bottom: 0.5rem;
          }
        }
      }

      .service-item-image {
        width: 8.5rem;
        height: 6.5rem;
        right: 4.5rem;
      }

      &.right {
        .service-item-image {
          left: 4.5rem;
        }
      }

      &.bottom {
        .service-item-content {
          .service-item-content-child {
            bottom: calc(var(--spacing-unit) * 2);
          }
        }
      }

      &.center {
        width: 14rem;
        height: 14rem;

        .service-item-content {
          .service-item-content-child {
            .title {
              font-size: 1.5rem; /* 1.25rem → 1.5rem */
            }
          }
        }

        .service-item-bg {
          top: 1.25rem;
          left: 1.25rem;
          right: 1.25rem;
          bottom: 1.25rem;
        }

        .service-item-image {
          width: 7rem;
          height: 7rem;
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .service {
    .service-item {
      &.center {
        width: 10rem;
        height: 10rem;

        .service-item-bg {
          top: 1rem;
          left: 1rem;
          right: 1rem;
          bottom: 1rem;
        }

        .service-item-image {
          width: 4.12rem;
          height: 4.25rem;
        }
      }
    }
  }
}

@media screen and (max-width: 750px) {
  .service {
    .service-item {
      height: 5.25rem;

      .service-item-content {
        padding: 1rem 0.75rem;

        .service-item-content-child {
          width: calc(100% - 1.5rem);
        }
      }

      .service-item-image {
        width: 4.25rem;
        height: 3.81rem;
        right: 2rem;
      }

      &.right {
        .service-item-image {
          left: 2.06rem;
        }
      }

      &.bottom {
        .service-item-content {
          .service-item-content-child {
            bottom: 1rem;
          }
        }
      }

      &.center {
        width: 7.5rem;
        height: 7.5rem;

        .service-item-bg {
          top: 0.75rem;
          left: 0.75rem;
          right: 0.75rem;
          bottom: 0.75rem;
        }

        .service-item-image {
          width: 4.12rem;
          height: 4.25rem;
        }
      }
    }
  }
}
</style>