You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.3 KiB
97 lines
3.3 KiB
<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"> |
|
<img src="/images/operation/bg_lg.png" loading="eager" class="size-full object-cover" /> |
|
</div> |
|
<div class="size-full relative hidden sm:block md:block"> |
|
<img 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" |
|
> |
|
<img :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" |
|
> |
|
<img :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" |
|
> |
|
<img :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>
|
|
|