47 lines
1.1 KiB
Markdown
47 lines
1.1 KiB
Markdown
|
# 案例
|
||
|
|
|
||
|
|
我们非常欢迎大家一起贡献优秀的 Demo 与案例，欢迎在此 [issue](https://github.com/Moonofweisheng/wot-design-uni/issues/16) 提交案例。
|
||
|
|
|
||
|
|
Wot UI 已被很多公司和团队在生产环境使用，下面是一些优秀的案例：
|
||
|
|
|
||
|
|
<div class="cases-container">
|
||
|
|
<el-card v-for="(item, index) in cases" :key="index" shadow="hover">
|
||
|
|
<template #header>
|
||
|
|
<span class="case-title">{{ item.name }}</span>
|
||
|
|
<span class="case-description">{{ item.description }}</span>
|
||
|
|
</template>
|
||
|
|
<el-image :src="item.image" />
|
||
|
|
</el-card>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.cases-container {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
|
|
gap: 20px;
|
||
|
|
margin: 20px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.case-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.case-description {
|
||
|
|
margin-left: 10px;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #999;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-card__body .el-image) {
|
||
|
|
width: 100%;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { useCaseData } from '../.vitepress/theme/composables/cases'
|
||
|
|
const { data:cases } = useCaseData()
|
||
|
|
</script>
|
||
|
|
|