<template>
|
<div class="container">
|
<el-container>
|
<el-container>
|
<el-aside class="aside">
|
<h5 class="aside-title">所有产品</h5>
|
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
|
<el-sub-menu index="1">
|
<template #title>
|
<el-icon>
|
<location />
|
</el-icon>
|
<span>工业信息化</span>
|
</template>
|
<el-menu-item index="1-1">lims系统</el-menu-item>
|
<el-menu-item index="1-2">JIT系统</el-menu-item>
|
</el-sub-menu>
|
<el-menu-item index="2">
|
<el-icon><icon-menu /></el-icon>
|
<span>SaaS</span>
|
</el-menu-item>
|
<el-menu-item index="3">
|
<el-icon>
|
<setting />
|
</el-icon>
|
<span>C端</span>
|
</el-menu-item>
|
</el-menu>
|
</el-aside>
|
<el-main>
|
<div class="main-up">
|
<img src="http://192.168.1.201:9000/portal/product_2.png" class="main-image" alt="">
|
</div>
|
<div class="main-down">
|
<h5 class="section-title">推荐产品</h5>
|
<div class="card-container">
|
<el-card v-for="(item, index) in 3" :key="index" class="card">
|
<img src="http://192.168.1.201:9000/portal/bg.png" class="card-image" />
|
<div class="card-content">
|
<span class="card-title">智慧校园门户网站</span>
|
</div>
|
<div class="card-content">
|
<span class="card-description">提供全流程、一体化的数据</span>
|
</div>
|
</el-card>
|
</div>
|
</div>
|
</el-main>
|
</el-container>
|
</el-container>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { Document, Menu as IconMenu, Location, Setting } from '@element-plus/icons-vue';
|
|
const handleOpen = (key: string, keyPath: string[]) => {
|
console.log(key, keyPath);
|
};
|
|
const handleClose = (key: string, keyPath: string[]) => {
|
console.log(key, keyPath);
|
};
|
</script>
|
|
<style scoped>
|
.container {
|
margin: 70px;
|
height: 100%;
|
}
|
|
.aside {
|
width: 200px;
|
}
|
|
.aside-title {
|
margin-bottom: 10px;
|
}
|
|
.main-up {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
/* padding: 20px; */
|
}
|
|
.main-image {
|
width: 800px;
|
height: 250px;
|
}
|
|
.main-down {
|
margin-top: 10px;
|
}
|
|
.section-title {
|
margin-bottom: 10px;
|
}
|
|
.card-container {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
}
|
|
.card {
|
width: 200px;
|
height: 200px;
|
margin: 10px;
|
}
|
|
.card-image {
|
width: 100%;
|
height: 80px;
|
object-fit: cover;
|
}
|
|
.card-content {
|
text-align: center;
|
}
|
|
.card-title {
|
font-weight: bold;
|
}
|
|
.card-description {
|
color: gray;
|
}
|
</style>
|
