Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(omi-template): 教育/课程模板 增加"名师风采"与"学生评价“ #900

Merged
merged 2 commits into from
Jul 11, 2024

Conversation

YYForReal
Copy link
Contributor

@YYForReal YYForReal commented Jul 10, 2024

关联issue:#884

实现效果

  1. feat: 增加以轮播图方式展示的名师风采(单slide横向)和学生评价(多slide横向)。

image

  1. style: 优化第一次实现的课程列表的固定样式,后续内容也能适配暗黑模式。

image

image

(这里应该分批commit的,不小心忘记了,下次注意。)

修改点

  1. 引入轮播图组件swiper
npm install swiper

故更新后应该需要更新项目依赖npm install 一下。

  1. 拷贝同仓库omiu的swiper封装组件,omiu/src/components/swiper

去除Collapse的引用,增加slidesPreViewspaceBetweenautoPlay属性声明。

  1. 修改原本固定的样式类。(学习点)

背景色 将卡片写死的 bg-white 修改为 bg-background ,可以兼容暗黑模式修改。

如 固定的灰色字体 text-gray-700 样式可以修改为 dark:text-foreground

遗留问题(下一步计划)

  1. fix:轮播图的自动轮播、不同宽度下的slidesPreView的自动调整。

  2. style:计划引入 o-ripple 以及 增加 悬浮图片缩放特效。

@dntzhang dntzhang merged commit dbb08a7 into Tencent:master Jul 11, 2024
1 check passed
@YYForReal YYForReal deleted the dev-omi-template-edu-2 branch July 12, 2024 02:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants