<template>
|
<div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] relative pr-[32px] pb-[50px] pl-[32px] pt-[42px] w100">
|
<div class="about-us-container">
|
<div class="about-us-box flex flex-col">
|
<h1>产品与服务</h1>
|
<div class="mt-[12px] w100 flex flex-wrap gap-[12px]">
|
<div class="product_item row_layout">
|
<img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
|
<div class="content">
|
<h2>智能监控</h2>
|
<p>智能监控系统，可实时监控设备状态，并提供预警、报警、远程控制等功能。</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts"></script>
|
<style scoped lang="scss">
|
.about-us-container {
|
--title: 14px;
|
--normal: 12px;
|
--gap: 12px;
|
--maxWidth: 864px;
|
--color: #5dccef;
|
|
width: 100%;
|
display: flex;
|
-webkit-box-orient: vertical;
|
-webkit-box-direction: normal;
|
-ms-flex-direction: column;
|
flex-direction: column;
|
box-sizing: border-box;
|
padding: 0 24px;
|
height: calc(100% - 42px);
|
align-items: center;
|
overflow-y: auto;
|
.about-us-box {
|
margin: auto 0;
|
max-width: 864px;
|
padding: 24px 0;
|
h1 {
|
font-size: 18px;
|
font-weight: 600;
|
color: #333;
|
}
|
.product_item {
|
box-sizing: border-box;
|
min-width: 0;
|
width: calc(50% - var(--gap) / 2);
|
padding: var(--gap);
|
border-radius: 8px;
|
color: #fff;
|
background-color: var(--color);
|
.product_item:first-child {
|
color: #5dccef;
|
}
|
}
|
.row_layout {
|
display: -webkit-box;
|
display: -ms-flexbox;
|
display: flex;
|
align-items: flex-start;
|
gap: var(--gap);
|
}
|
}
|
}
|
</style>
|
