feat(info-card): 模块介绍组件

src/core/libs/svgs.ts

@@ -2,4 +2,7 @@ import polygon16 from '@/assets/svgs/polygon-16.svg'
 import frame from '@/assets/svgs/frame.svg'
 import peoples from '@/assets/svgs/peoples.svg'
 import right from '@/assets/svgs/right.svg'
-export { polygon16, frame, peoples, right }
+import wechat from '@/assets/svgs/wechat.svg'
+import award from '@/assets/svgs/award.svg'
+import camera from '@/assets/svgs/camera.svg'
+export { polygon16, frame, peoples, right, wechat, award, camera }

src/pages.json

@@ -94,17 +94,18 @@
       }
     },
     {
-      "path": "pages/spread/index",
+      "path": "pages/home/offline-activity/index",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "设计传播"
+        "navigationBarTitleText": "线下活动",
+        "navigationBarBackgroundColor": "#fff"
       }
     },
     {
-      "path": "pages/home/offline-activity/index",
+      "path": "pages/home/spread/index",
       "type": "page",
       "style": {
-        "navigationBarTitleText": "线下活动",
+        "navigationBarTitleText": "设计传播",
         "navigationBarBackgroundColor": "#fff"
       }
     },

src/pages/home/components/info-card.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import Card from '@/components/card.vue'
+
+const props = defineProps<{
+  title: string
+  desc: string
+}>()
+</script>
+<template>
+  <card custom-class="my-6">
+    <div class="my-7.5 text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]">
+      {{ props.title }}
+    </div>
+    <div
+      class="w-[319px] h-[264px] text-justify text-black/40 text-base font-normal font-['PingFang SC'] leading-relaxed"
+    >
+      {{ props.desc }}
+    </div>
+  </card>
+</template>

src/pages/home/components/menus.vue

@@ -20,7 +20,7 @@ const items = [
     id: 3,
     title: '设计传播',
     desc: '运营推广',
-    path: '/pages/spread/index',
+    path: '/pages/home/spread/index',
     icon: '/static/svgs/iconly-glass-play.svg',
   },
   {

src/pages/home/offline-activity/index.vue

@@ -38,6 +38,7 @@ const tab = ref<number>(0)
       </block>
     </wd-tabs>
     <offline-activity-item class="my-6"></offline-activity-item>
+    <offline-activity-item class="my-6"></offline-activity-item>
   </view>
 </template>
 

src/pages/home/spread/index.vue

@@ -0,0 +1,70 @@
+<route lang="json5">
+{ style: { navigationBarTitleText: '设计传播', navigationBarBackgroundColor: '#fff' } }
+</route>
+
+<script setup lang="ts">
+import Card from '@/components/card.vue'
+import { award, camera, wechat } from '@/core/libs/svgs'
+import InfoCard from '../components/info-card.vue'
+
+const current = ref<number>(0)
+
+const swiperList = ref([
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/redpanda.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/moon.jpg',
+  'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
+])
+const menus = ref([
+  { title: '微信代运营', icon: wechat, class: 'col-start-1 row-start-1 row-end-3 items-start!' },
+  { title: '设计奖项', icon: award, class: 'col-start-2 row-start-1' },
+  { title: '案例拍摄', icon: camera, class: 'col-start-2 row-start-2' },
+])
+function handleClick(e) {
+  console.log(e)
+}
+function onChange(e) {
+  console.log(e)
+}
+</script>
+
+<template>
+  <view class="px-3.5">
+    <wd-swiper
+      custom-class="my-6 h-32 rounded-2xl overflow-hidden"
+      :list="swiperList"
+      autoplay
+      v-model:current="current"
+      @click="handleClick"
+      @change="onChange"
+    ></wd-swiper>
+    <view class="my-6 grid grid-gap-2.5">
+      <template v-for="it of menus" :key="it.title">
+        <card :custom-class="[it.class, 'flex justify-between items-center']">
+          <div
+            class="my-3.5 text-black/40 text-base font-normal font-['PingFang SC'] leading-[10.18px]"
+          >
+            {{ it.title }}
+          </div>
+          <view class="h-full flex items-end">
+            <div
+              class="w-[42px] h-[42px] flex justify-center items-center bg-white rounded-full border border-solid border-[#ececec]"
+            >
+              <wd-img :src="it.icon" width="23" height="23"></wd-img>
+            </div>
+          </view>
+        </card>
+      </template>
+    </view>
+    <info-card
+      title="筑巢荟-设计传播"
+      desc="我们为您精心打造了一个独特且极具价值的游学项目。这个项目的核心旨在全方位提升您作为设计师的能力。
+在这里，您将拥有无比优质的游学资源。我们与全球知名的设计学府、顶尖设计工作室以及具有代表性的经典建筑和室内空间建立了紧密合作。您将有机会深入这些卓越的场所，亲身体验最前沿的设计理念和实践。
+参与专业的研讨会和工作坊，与同行们分享见解、碰撞思维火花，进一步深化对设计的理解。
+"
+    ></info-card>
+  </view>
+</template>
+
+<style scoped lang="scss"></style>

src/pages/spread/index.vue

@@ -1,11 +0,0 @@
-<route lang="json5">
-{ style: { navigationBarTitleText: '设计传播' } }
-</route>
-
-<script setup lang="ts"></script>
-
-<template>
-  <view></view>
-</template>
-
-<style scoped lang="scss"></style>

src/types/uni-pages.d.ts

@@ -11,8 +11,8 @@ interface NavigateToOptions {
        "/pages/messages/index" |
        "/pages/mine/index" |
        "/pages/publish/index" |
-       "/pages/spread/index" |
        "/pages/home/offline-activity/index" |
+       "/pages/home/spread/index" |
        "/pages/home/study-tour/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}