refactor: 重构首页界面

- 首页界面重新调整
- 修复新建问卷 z-index 显示异常问题
- 添加示例组件

src/views/Home/components/Market/Index.vue

@@ -1,21 +1,33 @@
+<script setup lang="ts">
+import { ref, h } from 'vue';
+import { tables } from './hooks/useMarketHooks';
+import TestComponent from './components/TestComponent.vue'
+
+const activeComponet = ref(h(TestComponent, { cn: '报名签到' }))
+
+</script>
+
 <template>
   <!-- 模板 -->
   <div class="market">
     <div>
-      <h4>模板</h4>
+      <small>模板市场</small>
       <span @click="$router.push('/market')">全部模板></span>
     </div>
-    <div class="market_items">
-      <div v-for="item in 8" :key="item"></div>
+
+    <div class="market_table">
+      <div v-for="item in tables" @click="activeComponet = item.component" :key="item.title">{{ item.title }}</div>
     </div>
+    <van-cell class="market_items">
+      <component :is="activeComponet" />
+    </van-cell>
   </div>
 </template>
 
-<script setup lang="ts"></script>
 
 <style scoped>
 .market {
-  & > :first-child {
+  &> :first-child {
     display: flex;
     align-items: end;
     justify-content: space-between;
@@ -27,16 +39,32 @@
     }
   }
 
+  .market_table {
+    display: flex;
+    flex-flow: row nowrap;
+    overflow: scroll;
+    height: 20px;
+    font-size: 13px;
+
+    /* padding: 10px 0; */
+
+    &>div {
+      padding: 0 20px;
+      text-wrap: nowrap;
+    }
+  }
+
   .market_items {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
 
-    div {
+    &>div {
       display: flex;
       overflow: hidden;
       width: calc(196px / 1.2);
-      height: calc(193px / 1.2);
+
+      /* height: calc(193px / 1.2); */
       margin-bottom: 10px;
       border-radius: 10px;
       background-color: white;

src/views/Home/components/Market/components/TestComponent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const { cn } = defineProps({
+    cn: {
+        type: String,
+        required: false,
+        deault: 'default'
+    }
+})
+</script>
+
+<template>
+    <van-row :gutter="4">
+        <van-col :span="10" v-for="item in 2" :key="item"
+            style="display: flex; flex-direction: column; align-items: start; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);">
+            <div style="display: flex; align-items: center; justify-content: space-evenly;width: 100%;">
+                <span>{{ cn }} 模板</span>
+                <img
+                    src="https://files.axshare.com/gsc/DR6075/63/4d/77/634d77293a4d41d1b3d145974a8fb6a7/images/首页_1/u42.svg?pageId=5cc10b9f-56eb-48dc-943a-bfe7afb18a64" />
+            </div>
+
+            <div>
+                <span>引用10次</span> | <span>创建人: 张三</span>
+            </div>
+        </van-col>
+    </van-row>
+</template>
+
+<style lang="sass" scoped>
+
+</style>

src/views/Home/components/Market/hooks/useMarketHooks.ts

@@ -0,0 +1,24 @@
+import TestComponent from '../components/TestComponent.vue'
+import { h } from 'vue'
+
+export const tables = [
+    {
+        title: '报名签到',
+        component: h(TestComponent, { cn: '报名签到' })
+    }, {
+        title: '满意度调研',
+        component: h(TestComponent, { cn: '满意度调研' })
+    }, {
+        title: '快速投票',
+        component: h(TestComponent, { cn: '快速投票' })
+    }, {
+        title: '打分评估',
+        component: h(TestComponent, { cn: '打分评估' })
+    }, {
+        title: 'NPS',
+        component: h(TestComponent, { cn: 'NPS' })
+    }, {
+        title: '考评测试',
+        component: h(TestComponent, { cn: '考评测试' })
+    }
+]