46 lines
1.1 KiB
Markdown
46 lines
1.1 KiB
Markdown
|
# Cases
|
||
|
|
|
||
|
|
We warmly welcome everyone to contribute excellent demos and cases. Feel free to submit cases in this [issue](https://github.com/Moonofweisheng/wot-design-uni/issues/16).
|
||
|
|
|
||
|
|
Wot UI is being used in production environments by many companies and teams. Here are some excellent cases:
|
||
|
|
|
||
|
|
<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>
|