website/components/pageLayout/operation.vue

<template>
  <div class="max-w-[1920px] relative mx-auto">
    <h2 class="title-font py-11 pb-20 md:py-8 sm:py-4">运维系统</h2>
    <div class="size-full relative -left-48 sm:hidden md:hidden">
      <NuxtImg
        format="webp"
        src="/images/operation/bg_lg.png"
        loading="eager"
        class="size-full object-cover"
      />
    </div>
    <div class="size-full relative hidden sm:block md:block">
      <NuxtImg
        format="webp"
        src="/images/operation/bg_sm.png"
        loading="eager"
        class="size-full object-cover"
      />
    </div>
    <div class="flex flex-col gap-8 absolute right-28 top-1/2 -translate-y-1/2 md:hidden sm:hidden">
      <div
        v-for="(item, index) in operationList"
        :key="index"
        class="h-[96px] w-[397px] pl-3 bg-[rgba(85,85,86,0.38)] flex items-center"
      >
        <div
          style="background-image: linear-gradient(134deg, #3023ae 0%, #6dacd7 100%)"
          class="w-[115px] h-full flex items-center justify-center"
        >
          <NuxtImg
            format="webp"
            :src="item.icon"
            class="size-16 md:size-14 sm:size-7 object-cover"
          />
        </div>
        <h6
          class="text-[26px] md:text-xl sm:text-[10px] pl-8 sm:leading-[10px] text-white font-bold"
        >
          {{ item.title }}
        </h6>
      </div>
    </div>
    <div class="hidden md:block sm:block w-full relative -top-[10rem] sm:-top-[2rem]">
      <div class="flex flex-wrap md:gap-6 sm:gap-2 justify-center">
        <div
          v-for="(item, index) in operationList.slice(0, 2)"
          :key="index"
          class="md:h-[66px] md:w-[210px] sm:w-[100px] sm:h-[28px] md:pl-2 sm:pl-1 bg-[rgba(85,85,86,0.38)] flex items-center"
        >
          <div
            style="background-image: linear-gradient(134deg, #3023ae 0%, #6dacd7 100%)"
            class="md:w-[64px] sm:w-[32px] h-full flex items-center justify-center"
          >
            <NuxtImg format="webp" :src="item.icon" class="md:size-8 sm:size-4 object-cover" />
          </div>
          <h6
            class="text-[26px] md:text-xl sm:text-[10px] md:pl-6 sm:pl-2 sm:leading-[10px] text-white font-bold"
          >
            {{ item.title }}
          </h6>
        </div>
      </div>
      <div class="flex flex-wrap md:gap-6 sm:gap-2 justify-center mt-4">
        <div
          v-for="(item, index) in operationList.slice(2, 5)"
          :key="index"
          class="md:h-[66px] md:w-[210px] sm:w-[100px] sm:h-[28px] md:pl-2 sm:pl-1 bg-[rgba(85,85,86,0.38)] flex items-center"
        >
          <div
            style="background-image: linear-gradient(134deg, #3023ae 0%, #6dacd7 100%)"
            class="md:w-[64px] sm:w-[32px] h-full flex items-center justify-center"
          >
            <NuxtImg format="webp" :src="item.icon" class="md:size-8 sm:size-4 object-cover" />
          </div>
          <h6
            class="text-[26px] md:text-xl sm:text-[10px] md:pl-6 sm:pl-2 sm:leading-[10px] text-white font-bold"
          >
            {{ item.title }}
          </h6>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const operationList = [
  {
    title: '设备信息',
    icon: '/images/operation/8icon1.png',
  },
  {
    title: '设备自检',
    icon: '/images/operation/8icon2.png',
  },
  {
    title: '设备日志',
    icon: '/images/operation/8icon3.png',
  },
  {
    title: 'OTA升级',
    icon: '/images/operation/8icon4.png',
  },
  {
    title: '网络配置',
    icon: '/images/operation/8icon5.png',
  },
]
</script>

<style scoped></style>