初始化

docs/advanced/showcase/showcase.md

@@ -0,0 +1,81 @@
+# ⭐ 优秀案例
+
+我们非常欢迎大家一起贡献优秀的案例，欢迎在此 [issue](https://github.com/feige996/unibest/issues/139) 提交案例。
+
+`unibest` 已被很多公司和团队在生产环境使用，下面是一些优秀的案例：
+
+<script setup>
+   import bairun from './佰润.png'
+   import jinhuopingtai from './进货平台.png'
+   import chengzhanggui from './橙掌柜.png'
+   import yundapai from './云打牌.png'
+   import jiansuotong from './监所通.png'
+   import jiansuoyou from './监所邮.png'
+const  cases = [
+    {
+        name: '佰润', 
+        desc: '月销200w+',  
+        image: bairun,
+    },
+    {
+        name: '进货平台', 
+        desc: '月销200w+',  
+        image: jinhuopingtai,
+    },
+    {
+        name: '橙掌柜', 
+        desc: '月销200w+',  
+        image: chengzhanggui,
+    },
+    {
+        name: '云打牌记账本', 
+        desc: '',  
+        image:yundapai,
+    },
+    {
+        name: '监所通', 
+        desc: '出入所管理',  
+        image:jiansuotong,
+    },
+    {
+        name: '监所邮', 
+        desc: '寄信管理',  
+        image: jiansuoyou,
+    },
+]
+</script>
+
+<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-desc">{{ item.desc }}</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-desc {
+  margin-left: 10px;
+  font-size: 14px;
+  color: #999;
+}
+
+:deep(.el-card__body .el-image) {
+  width: 100%;
+  border-radius: 4px;
+}
+</style>