feat: 新增关于我们

yangyin

2024-06-27 da3c856341ce6ebccec9c8d1ae5e6d05fb638074

feat: 新增关于我们

 src/layout/component/sidebar/waterLeftAside/asideTitle.vue

@@ -60,6 +60,9 @@
    if (id == 1) {
        gotoRoute({ name: 'Scenario' });
    }
    if (id == 4) {
        gotoRoute({ name: 'AboutUs' });
    }
};
</script>
<style scoped lang="scss">

 src/views/project/ch/home/AboutUs.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,70 @@
<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>