@opendesign-plus-test/components 0.0.1-rc.82 → 0.0.1-rc.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. package/dist/chunk-OElCookieNotice.cjs.js +1 -1
  2. package/dist/chunk-OElCookieNotice.es.js +10 -10
  3. package/dist/components/config-provider/OPlusConfigProvider.vue.d.ts +2 -2
  4. package/dist/components/config-provider/index.d.ts +3 -3
  5. package/dist/components/meeting/composables/useMeetingConfig.d.ts +1 -1
  6. package/dist/components.cjs.js +33 -33
  7. package/dist/components.css +1 -1
  8. package/dist/components.es.js +1511 -1504
  9. package/dist/treeshaking/components/banner/OBanner.css +37 -37
  10. package/dist/treeshaking/components/banner/OBanner.vue.mjs +1 -1
  11. package/dist/treeshaking/components/banner/OBanner.vue2.mjs +2 -1
  12. package/dist/treeshaking/components/banner/OBanner2.css +10 -10
  13. package/dist/treeshaking/components/config-provider/OPlusConfigProvider.vue.d.ts +2 -2
  14. package/dist/treeshaking/components/config-provider/index.d.ts +3 -3
  15. package/dist/treeshaking/components/cookie-notice/OCookieNotice.vue.mjs +1 -1
  16. package/dist/treeshaking/components/cookie-notice/OCookieNotice.vue2.mjs +1 -1
  17. package/dist/treeshaking/components/cookie-notice/OCookieNotice2.css +62 -62
  18. package/dist/treeshaking/components/events/OEventsApply.vue.mjs +1 -1
  19. package/dist/treeshaking/components/header/OHeader.css +12 -12
  20. package/dist/treeshaking/components/header/OHeader.vue.mjs +1 -1
  21. package/dist/treeshaking/components/header/OHeader.vue2.mjs +1 -1
  22. package/dist/treeshaking/components/header/components/HeaderContent.css +235 -235
  23. package/dist/treeshaking/components/header/components/HeaderContent.vue.mjs +1 -1
  24. package/dist/treeshaking/components/header/components/HeaderContent.vue2.mjs +3 -2
  25. package/dist/treeshaking/components/header/components/HeaderNav.css +26 -26
  26. package/dist/treeshaking/components/header/components/HeaderNav.vue.mjs +1 -1
  27. package/dist/treeshaking/components/header/components/HeaderNav.vue2.mjs +1 -1
  28. package/dist/treeshaking/components/meeting/composables/useMeetingConfig.d.ts +1 -1
  29. package/dist/treeshaking/i18n/index.mjs +1 -1
  30. package/dist/treeshaking/shared/theme.mjs +13 -0
  31. package/package.json +4 -1
  32. package/docs/design.md +0 -27
  33. package/docs/design_banner.md +0 -41
  34. package/docs/design_section.md +0 -27
  35. package/plugins/css-inject-plugin.ts +0 -37
  36. package/scripts/build.js +0 -17
  37. package/scripts/generate-components-index.js +0 -62
  38. package/src/assets/events/svg-icons/icon-checked.svg +0 -3
  39. package/src/assets/events/svg-icons/icon-competition.svg +0 -7
  40. package/src/assets/events/svg-icons/icon-events.svg +0 -4
  41. package/src/assets/events/svg-icons/icon-release.svg +0 -4
  42. package/src/assets/events/svg-icons/icon-summit.svg +0 -4
  43. package/src/assets/meeting/empty.png +0 -0
  44. package/src/assets/meeting/svg-icons/icon-all.svg +0 -4
  45. package/src/assets/meeting/svg-icons/icon-backward.svg +0 -4
  46. package/src/assets/meeting/svg-icons/icon-calendar.svg +0 -3
  47. package/src/assets/meeting/svg-icons/icon-cancel.svg +0 -4
  48. package/src/assets/meeting/svg-icons/icon-captions.svg +0 -4
  49. package/src/assets/meeting/svg-icons/icon-close-captions.svg +0 -6
  50. package/src/assets/meeting/svg-icons/icon-close-fullscreen.svg +0 -6
  51. package/src/assets/meeting/svg-icons/icon-copy.svg +0 -4
  52. package/src/assets/meeting/svg-icons/icon-create.svg +0 -5
  53. package/src/assets/meeting/svg-icons/icon-delete.svg +0 -7
  54. package/src/assets/meeting/svg-icons/icon-empty.svg +0 -65
  55. package/src/assets/meeting/svg-icons/icon-event.svg +0 -4
  56. package/src/assets/meeting/svg-icons/icon-export.svg +0 -3
  57. package/src/assets/meeting/svg-icons/icon-forward.svg +0 -4
  58. package/src/assets/meeting/svg-icons/icon-fullscreen.svg +0 -6
  59. package/src/assets/meeting/svg-icons/icon-help.svg +0 -3
  60. package/src/assets/meeting/svg-icons/icon-important.svg +0 -4
  61. package/src/assets/meeting/svg-icons/icon-info.svg +0 -3
  62. package/src/assets/meeting/svg-icons/icon-meet.svg +0 -4
  63. package/src/assets/meeting/svg-icons/icon-meeting-message.svg +0 -5
  64. package/src/assets/meeting/svg-icons/icon-meeting.svg +0 -4
  65. package/src/assets/meeting/svg-icons/icon-play.svg +0 -5
  66. package/src/assets/meeting/svg-icons/icon-playing-tip.svg +0 -7
  67. package/src/assets/meeting/svg-icons/icon-playing.svg +0 -5
  68. package/src/assets/meeting/svg-icons/icon-question.svg +0 -4
  69. package/src/assets/meeting/svg-icons/icon-sound.svg +0 -5
  70. package/src/assets/meeting/svg-icons/icon-speaker.svg +0 -3
  71. package/src/assets/meeting/svg-icons/icon-summit.svg +0 -4
  72. package/src/assets/meeting/svg-icons/icon-telligent.svg +0 -3
  73. package/src/assets/meeting/svg-icons/icon-tip.svg +0 -3
  74. package/src/assets/meeting/svg-icons/icon-todo.svg +0 -4
  75. package/src/assets/meeting/transparent.png +0 -0
  76. package/src/assets/styles/element-plus.scss +0 -283
  77. package/src/assets/svg-icons/icon-arrow-left.svg +0 -3
  78. package/src/assets/svg-icons/icon-avatar-line.svg +0 -3
  79. package/src/assets/svg-icons/icon-caret-left.svg +0 -3
  80. package/src/assets/svg-icons/icon-caret-right.svg +0 -3
  81. package/src/assets/svg-icons/icon-chevron-down.svg +0 -3
  82. package/src/assets/svg-icons/icon-chevron-right.svg +0 -3
  83. package/src/assets/svg-icons/icon-chevron-up.svg +0 -3
  84. package/src/assets/svg-icons/icon-close.svg +0 -3
  85. package/src/assets/svg-icons/icon-delete-hover.svg +0 -4
  86. package/src/assets/svg-icons/icon-delete.svg +0 -7
  87. package/src/assets/svg-icons/icon-filter.svg +0 -3
  88. package/src/assets/svg-icons/icon-header-back.svg +0 -3
  89. package/src/assets/svg-icons/icon-header-delete.svg +0 -3
  90. package/src/assets/svg-icons/icon-header-menu.svg +0 -3
  91. package/src/assets/svg-icons/icon-header-person.svg +0 -3
  92. package/src/assets/svg-icons/icon-header-search.svg +0 -4
  93. package/src/assets/svg-icons/icon-image-close.svg +0 -4
  94. package/src/assets/svg-icons/icon-image-upload.svg +0 -3
  95. package/src/assets/svg-icons/icon-image-zoomin.svg +0 -3
  96. package/src/assets/svg-icons/icon-loading.svg +0 -4
  97. package/src/assets/svg-icons/icon-locale.svg +0 -3
  98. package/src/assets/svg-icons/icon-log-off.svg +0 -3
  99. package/src/assets/svg-icons/icon-message.svg +0 -3
  100. package/src/assets/svg-icons/icon-moon.svg +0 -3
  101. package/src/assets/svg-icons/icon-outlink.svg +0 -3
  102. package/src/assets/svg-icons/icon-overview.svg +0 -3
  103. package/src/assets/svg-icons/icon-refresh.svg +0 -3
  104. package/src/assets/svg-icons/icon-search.svg +0 -3
  105. package/src/assets/svg-icons/icon-setting.svg +0 -3
  106. package/src/assets/svg-icons/icon-sun.svg +0 -3
  107. package/src/assets/svg-icons/icon-tips.svg +0 -3
  108. package/src/components/activity/OActivityApproval.vue +0 -868
  109. package/src/components/activity/OActivityForm.vue +0 -548
  110. package/src/components/activity/OActivityMyCalendar.vue +0 -1540
  111. package/src/components/activity/composables/useActivityConfig.ts +0 -141
  112. package/src/components/activity/config.ts +0 -1
  113. package/src/components/activity/index.ts +0 -24
  114. package/src/components/activity/types.ts +0 -95
  115. package/src/components/banner/OBanner.vue +0 -288
  116. package/src/components/banner/OBannerContent.vue +0 -175
  117. package/src/components/banner/index.ts +0 -18
  118. package/src/components/banner/types.ts +0 -39
  119. package/src/components/common/AppAvatar.vue +0 -83
  120. package/src/components/common/ClientOnly.vue +0 -13
  121. package/src/components/common/ContentWrapper.vue +0 -82
  122. package/src/components/common/MoreText.vue +0 -124
  123. package/src/components/common/ThFilter.vue +0 -330
  124. package/src/components/config-provider/OPlusConfigProvider.vue +0 -32
  125. package/src/components/config-provider/index.ts +0 -10
  126. package/src/components/cookie-notice/OCookieNotice.vue +0 -575
  127. package/src/components/cookie-notice/index.ts +0 -10
  128. package/src/components/element-plus/OElCookieNotice.vue +0 -603
  129. package/src/components/element-plus/index.ts +0 -3
  130. package/src/components/events/OEventsApply.vue +0 -509
  131. package/src/components/events/OEventsCalendar.vue +0 -600
  132. package/src/components/events/OEventsList.vue +0 -461
  133. package/src/components/events/config.ts +0 -35
  134. package/src/components/events/index.ts +0 -24
  135. package/src/components/events/types.ts +0 -84
  136. package/src/components/events/utils.ts +0 -9
  137. package/src/components/footer/OFooter.vue +0 -577
  138. package/src/components/footer/index.ts +0 -10
  139. package/src/components/header/OHeader.vue +0 -157
  140. package/src/components/header/OHeaderMobile.vue +0 -184
  141. package/src/components/header/components/HeaderContent.vue +0 -1125
  142. package/src/components/header/components/HeaderNav.vue +0 -278
  143. package/src/components/header/components/HeaderNavMobile.vue +0 -380
  144. package/src/components/header/index.ts +0 -18
  145. package/src/components/header/types.ts +0 -96
  146. package/src/components/header-language-switcher/OHeaderLanguageSwitcher.vue +0 -249
  147. package/src/components/header-language-switcher/index.ts +0 -10
  148. package/src/components/header-search/OHeaderSearch.vue +0 -628
  149. package/src/components/header-search/index.ts +0 -10
  150. package/src/components/header-source-code/OHeaderSourceCode.vue +0 -151
  151. package/src/components/header-source-code/index.ts +0 -10
  152. package/src/components/header-theme/OHeaderTheme.vue +0 -132
  153. package/src/components/header-theme/index.ts +0 -10
  154. package/src/components/header-user/OHeaderUser.vue +0 -249
  155. package/src/components/header-user/index.ts +0 -10
  156. package/src/components/meeting/OMeetingCalendar.vue +0 -943
  157. package/src/components/meeting/OMeetingForm.vue +0 -1131
  158. package/src/components/meeting/OMeetingMyCalendar.vue +0 -1628
  159. package/src/components/meeting/OMeetingPlayback.vue +0 -469
  160. package/src/components/meeting/OMeetingSigCalendar.vue +0 -500
  161. package/src/components/meeting/components/OMeetingCalendarList.vue +0 -626
  162. package/src/components/meeting/components/OMeetingCalendarSelector.vue +0 -213
  163. package/src/components/meeting/components/OMeetingDetail.vue +0 -285
  164. package/src/components/meeting/components/OMeetingPlaybackSubtitles.vue +0 -615
  165. package/src/components/meeting/components/OMeetingPlaybackVideo.vue +0 -741
  166. package/src/components/meeting/components/OMeetingSigAside.vue +0 -205
  167. package/src/components/meeting/composables/useMeetingConfig.ts +0 -108
  168. package/src/components/meeting/config.ts +0 -48
  169. package/src/components/meeting/index.ts +0 -45
  170. package/src/components/meeting/types.ts +0 -270
  171. package/src/components/meeting/utils.ts +0 -70
  172. package/src/components/search/OSearchInput.vue +0 -526
  173. package/src/components/search/composables/useImageSearch.ts +0 -157
  174. package/src/components/search/composables/useKeywordHighlight.ts +0 -30
  175. package/src/components/search/composables/useSearchHistory.ts +0 -75
  176. package/src/components/search/index.ts +0 -23
  177. package/src/components/search/internal/HighlightText.vue +0 -37
  178. package/src/components/search/internal/SearchImageInput.vue +0 -498
  179. package/src/components/search/internal/SearchPanel.vue +0 -431
  180. package/src/components/search/types.ts +0 -25
  181. package/src/components/section/OSection.vue +0 -178
  182. package/src/components/section/index.ts +0 -10
  183. package/src/draft/Banner.vue +0 -265
  184. package/src/draft/ButtonCards.vue +0 -106
  185. package/src/draft/Feature.vue +0 -134
  186. package/src/draft/Footer.vue +0 -519
  187. package/src/draft/HorizontalAnchor.vue +0 -165
  188. package/src/draft/ItemSwiper.vue +0 -133
  189. package/src/draft/Logo.vue +0 -141
  190. package/src/draft/LogoCard.vue +0 -75
  191. package/src/draft/LogoV2.vue +0 -19
  192. package/src/draft/MainCard.vue +0 -38
  193. package/src/draft/MultiCard.vue +0 -95
  194. package/src/draft/MultiIconCard.vue +0 -74
  195. package/src/draft/OInfoCard.vue +0 -176
  196. package/src/draft/Process.vue +0 -81
  197. package/src/draft/Section.vue +0 -167
  198. package/src/draft/SingleTabCard.vue +0 -85
  199. package/src/draft/SliderCard.vue +0 -111
  200. package/src/env.d.ts +0 -16
  201. package/src/i18n/en.ts +0 -278
  202. package/src/i18n/index.ts +0 -56
  203. package/src/i18n/zh.ts +0 -268
  204. package/src/index.ts +0 -18
  205. package/src/shared/provide.ts +0 -6
  206. package/src/shims-vue-dompurify-html.d.ts +0 -17
  207. package/src/vue.d.ts +0 -10
  208. package/tsconfig.json +0 -37
  209. package/vite.config.ts +0 -123
  210. package/vite.treeshaking.config.ts +0 -127
@@ -1,141 +0,0 @@
1
- import { computed } from 'vue';
2
- import { useI18n } from '@/i18n';
3
-
4
- export const useActivityConfig = () => {
5
- const { t } = useI18n();
6
-
7
- const activityTypeMap = computed(() => new Map([
8
- [
9
- 1,
10
- {
11
- label: t('meeting.offline'),
12
- value: 1,
13
- },
14
- ],
15
- [
16
- 2,
17
- {
18
- label: t('meeting.online'),
19
- value: 2,
20
- },
21
- ],
22
- [
23
- 3,
24
- {
25
- label: t('meeting.onlineOffline'),
26
- value: 3,
27
- },
28
- ],
29
- ]));
30
-
31
- const statusMap = computed(() => new Map([
32
- [
33
- 1,
34
- {
35
- id: 'draft',
36
- label: t('meeting.statusDraft'),
37
- text: t('meeting.statusDraft'),
38
- value: 1,
39
- },
40
- ],
41
- [
42
- 2,
43
- {
44
- id: 'under-review',
45
- label: t('meeting.statusUnderReview'),
46
- text: t('meeting.statusPending'),
47
- value: 2,
48
- },
49
- ],
50
- [
51
- 3,
52
- {
53
- id: 'registration',
54
- label: t('meeting.statusRegistering'),
55
- text: t('meeting.statusApproved'),
56
- value: 3,
57
- },
58
- ],
59
- [
60
- 4,
61
- {
62
- id: 'in-progress',
63
- label: t('meeting.statusInProgress'),
64
- text: t('meeting.statusApproved'),
65
- value: 4,
66
- },
67
- ],
68
- [
69
- 5,
70
- {
71
- id: 'ended',
72
- label: t('meeting.statusEnded'),
73
- text: t('meeting.statusEnded'),
74
- value: 5,
75
- },
76
- ],
77
- [
78
- 6,
79
- {
80
- id: 'modified',
81
- label: t('meeting.statusModified'),
82
- text: t('meeting.statusModified'),
83
- value: 6,
84
- },
85
- ],
86
- [
87
- 7,
88
- {
89
- id: 'reject',
90
- label: t('meeting.statusRejected'),
91
- text: t('meeting.statusRejected'),
92
- value: 7,
93
- },
94
- ],
95
- ]));
96
-
97
- const approvalStatusMap = computed(() => new Map([
98
- [
99
- 'all',
100
- {
101
- label: t('common.all'),
102
- value: 'all',
103
- },
104
- ],
105
- [
106
- 'rejected',
107
- {
108
- label: t('meeting.statusRejected'),
109
- value: 'rejected',
110
- },
111
- ],
112
- [
113
- 'approved',
114
- {
115
- label: t('meeting.statusApproved'),
116
- value: 'approved',
117
- },
118
- ],
119
- [
120
- 'publish',
121
- {
122
- label: t('meeting.statusPending'),
123
- value: 'publish',
124
- },
125
- ],
126
- [
127
- 'cancel',
128
- {
129
- label: t('meeting.statusCanceled'),
130
- value: 'cancel',
131
- },
132
- ],
133
- ]));
134
-
135
- return {
136
- t,
137
- activityTypeMap,
138
- statusMap,
139
- approvalStatusMap,
140
- };
141
- };
@@ -1 +0,0 @@
1
- export const WEBSITE_REGEXP = /^https?:\/\/\S+/;
@@ -1,24 +0,0 @@
1
- import _OActivityForm from './OActivityForm.vue';
2
- import _OActivityApproval from './OActivityApproval.vue';
3
- import _OActivityMyCalendar from './OActivityMyCalendar.vue';
4
- import type { App } from 'vue';
5
-
6
-
7
- const OActivityForm = Object.assign(_OActivityForm, {
8
- install(app: App) {
9
- app.component('OActivityForm', _OActivityForm);
10
- },
11
- });
12
- const OActivityApproval = Object.assign(_OActivityApproval, {
13
- install(app: App) {
14
- app.component('OActivityApproval', _OActivityApproval);
15
- },
16
- });
17
- const OActivityMyCalendar = Object.assign(_OActivityMyCalendar, {
18
- install(app: App) {
19
- app.component('OActivityMyCalendar', OActivityMyCalendar);
20
- },
21
- });
22
-
23
- export { OActivityForm, OActivityApproval, OActivityMyCalendar };
24
- export * from './types';
@@ -1,95 +0,0 @@
1
- // 活动新增、修改
2
- export interface ParamsItemT {
3
- id?: number; // 活动id
4
- title: string; // 活动名称
5
- start_date: string; // 活动起始日期
6
- end_date: string; // 活动结束日期
7
- register_end_date: string; // 报名截止时间
8
- activity_type: string | number; // 活动类型
9
- synopsis: string; // 活动简介
10
- register_url: string; // 报名网址
11
- content_url: string; // 活动详情网址
12
- address: string; // 活动地址
13
- start: string; // 活动开始时间
14
- end: string; // 活动结束时间
15
- schedules?: string;
16
- is_publish: string; // 是否发布 true-发布审核 false-发布为草稿
17
- update_activity_id?: string | number;
18
- email_list?: string; // 邮件列表
19
- organizer?: string; // 主办方
20
- approver: string; // 审批人
21
- status?: number; // 状态
22
- }
23
-
24
- export interface ActivityFormPropsT {
25
- data?: ParamsItemT;
26
- creatActivity: any;
27
- editActivity: any;
28
- admins: string[];
29
- organizers: {
30
- id: number;
31
- name: string;
32
- }[];
33
- }
34
-
35
- export interface TypeOptionT {
36
- label: string;
37
- value: number;
38
- }
39
-
40
- export interface ActivityItemT {
41
- activity_mode: number;
42
- activity_type: number;
43
- address: string;
44
- approver: string;
45
- approve_record: object;
46
- start_date: string;
47
- end: string;
48
- end_date: string;
49
- id: number;
50
- is_delete: number; // 1-已取消 0-正常
51
- live_address: string;
52
- register_end_date: string;
53
- register_url: string;
54
- content_url: string;
55
- start: string;
56
- status: number; // 1-草稿 2-审核中 3-报名中 4-进行中 5-已结束 6-已修改 7-驳回
57
- synopsis: string;
58
- title: string;
59
- update_activity_id: number;
60
- user: string;
61
- sponsor: string; // 创建人
62
- create_time: string; // 创建时间
63
- isExpired?: number; // 计算属性表示是否过期
64
- sub_id?: string;
65
- dateRange?: string; // 计算属性
66
- }
67
-
68
- export interface ReviewParamsT {
69
- page: number;
70
- size: number;
71
- status: string;
72
- activity_mode?: string;
73
- is_delete?: number;
74
- search: string;
75
- sponsor: string;
76
- order_by: string;
77
- }
78
-
79
- export interface ActivityTablePropsT {
80
- getTableDataRequest: any;
81
- applicantList: string[];
82
- cancelActivityRequest: any;
83
- deleteActivityRequest: any;
84
- approveActivityRequest: any;
85
- rejectActivityRequest: any;
86
- getActivityDetailRequest: any;
87
- }
88
-
89
- export interface MyActivityCalendarPropsT {
90
- getListRequest: any;
91
- revokeActivityRequest: any;
92
- deleteActivityRequest: any;
93
- editActivityRequest: any;
94
- getActivityDetailRequest: any;
95
- }
@@ -1,288 +0,0 @@
1
- <script setup lang="ts">
2
- import { OCarousel, OCarouselItem, OFigure } from '@opensig/opendesign';
3
- import { computed } from 'vue';
4
-
5
- import { useScreen, useTheme } from '@opendesign-plus/composables';
6
- import ContentWrapper from '../common/ContentWrapper.vue';
7
- import BannerContent from './OBannerContent.vue';
8
- import type { BannerItem } from './types';
9
-
10
- const props = defineProps<{
11
- options?: BannerItem | BannerItem[];
12
- size?: 'large' | 'medium' | 'small' | 'tiny';
13
- contentJustifyCenter?: boolean;
14
- autoPlay?: boolean;
15
- }>();
16
-
17
- const emit = defineEmits<{
18
- (e: 'click', href: string | undefined): void;
19
- }>();
20
-
21
- const { isLight } = useTheme();
22
- const { isPhone } = useScreen();
23
-
24
- // 单个 Banner(非数组,或仅含一项的数组)
25
- const singleBanner = computed((): BannerItem | undefined => {
26
- if (!props.options) return undefined;
27
- if (Array.isArray(props.options)) {
28
- return props.options.length === 1 ? props.options[0] : undefined;
29
- }
30
- return props.options;
31
- });
32
-
33
- // 多个 Banner(数组且超过一项)
34
- const multiBanner = computed((): BannerItem[] | undefined => {
35
- if (!Array.isArray(props.options) || props.options.length <= 1) return undefined;
36
- return props.options;
37
- });
38
- </script>
39
-
40
- <template>
41
- <div :class="['home-banner', size]">
42
- <!-- 单个 Banner 的情况 -->
43
- <div v-if="singleBanner" class="content-height">
44
- <div v-if="size === 'tiny'">
45
- {{ singleBanner.title }}
46
- </div>
47
-
48
- <BannerContent
49
- v-else-if="!isPhone"
50
- :info="singleBanner"
51
- :size="size"
52
- :content-justify-center="contentJustifyCenter"
53
- :is-phone="isPhone"
54
- :is-light="isLight"
55
- @click="emit('click', $event)"
56
- />
57
-
58
- <ContentWrapper v-else class="banner-wrapper">
59
- <OFigure
60
- class="banner-bg"
61
- :src="singleBanner.bg"
62
- fit="cover"
63
- />
64
- </ContentWrapper>
65
- </div>
66
-
67
- <!-- 多个 Banner 轮播的情况 -->
68
- <div v-else-if="multiBanner" class="content-height">
69
- <OCarousel
70
- v-if="!isPhone"
71
- class="banner-carousel"
72
- effect="toggle"
73
- active-class="current-slide"
74
- indicator-click
75
- :auto-play="autoPlay"
76
- >
77
- <OCarouselItem
78
- v-for="(info, index) in multiBanner"
79
- :key="index"
80
- class="banner-item"
81
- :class="`banner-item${index}`"
82
- >
83
- <BannerContent
84
- :info="info"
85
- :size="size"
86
- :content-justify-center="contentJustifyCenter"
87
- :is-phone="isPhone"
88
- :is-light="isLight"
89
- @click="emit('click', $event)"
90
- />
91
- </OCarouselItem>
92
- </OCarousel>
93
-
94
- <OCarousel
95
- v-else
96
- class="banner-carousel"
97
- effect="gallery"
98
- indicator-click
99
- arrow="never"
100
- :auto-play="autoPlay"
101
- >
102
- <OCarouselItem
103
- v-for="(info, index) in multiBanner"
104
- :key="index"
105
- class="banner-item"
106
- :class="`banner-item${index}`"
107
- >
108
- <ContentWrapper class="banner-wrapper">
109
- <OFigure
110
- class="banner-bg"
111
- :src="info.bg"
112
- @click="emit('click', info.href)"
113
- />
114
- </ContentWrapper>
115
- </OCarouselItem>
116
- </OCarousel>
117
- </div>
118
-
119
- <!-- 没有 Banner 数据的情况 -->
120
- <div v-else class="content-height">
121
- <p>No data.</p>
122
- </div>
123
- </div>
124
- </template>
125
-
126
- <style lang="scss" scoped>
127
- .home-banner {
128
- overflow: hidden;
129
- position: relative;
130
-
131
- &.tiny {
132
- @include display2;
133
- font-weight: 500;
134
- margin: var(--o-gap-8) 0;
135
- color: var(--o-color-info1);
136
- }
137
-
138
- .content-height {
139
- height: 100%;
140
- }
141
-
142
- &.large {
143
- --banner-height: 460px;
144
- height: var(--banner-height);
145
-
146
- @include respond-to('laptop-pc_s') {
147
- --banner-height: 400px;
148
- }
149
-
150
- @include respond-to('pad_h') {
151
- --banner-height: 360px;
152
- }
153
-
154
- @include respond-to('<=pad_v') {
155
- --banner-height: 184px;
156
- }
157
- }
158
-
159
- &.medium {
160
- --banner-height: 360px;
161
- height: var(--banner-height);
162
-
163
- @include respond-to('laptop-pc_s') {
164
- --banner-height: 280px;
165
- }
166
-
167
- @include respond-to('pad_h') {
168
- --banner-height: 220px;
169
- }
170
-
171
- @include respond-to('<=pad_v') {
172
- --banner-height: 120px;
173
- }
174
- }
175
-
176
- &.small {
177
- --banner-height: 280px;
178
- height: var(--banner-height);
179
-
180
- @include respond-to('laptop-pc_s') {
181
- --banner-height: 220px;
182
- }
183
-
184
- @include respond-to('pad_h') {
185
- --banner-height: 180px;
186
- }
187
-
188
- @include respond-to('<=pad_v') {
189
- display: none;
190
- }
191
- }
192
-
193
- :deep(.o-btn) {
194
- border-radius: var(--btn-height);
195
- }
196
- }
197
-
198
- .banner-carousel {
199
- width: 100%;
200
- height: 100%;
201
- @include respond-to('>pad_v') {
202
- --carousel-indicator-offset: 53px;
203
- }
204
-
205
- @include respond-to('<=pad_v') {
206
- --carousel-indicator-offset: 1px;
207
- }
208
-
209
- :deep(.o-carousel-indicator-bar) {
210
- height: 24px;
211
- }
212
- }
213
-
214
- .banner-item {
215
- width: 100%;
216
- height: 100%;
217
- }
218
-
219
- @keyframes fade-up {
220
- from {
221
- transform: translateY(var(--d));
222
- opacity: 0;
223
- }
224
- to {
225
- transform: translateY(0);
226
- opacity: 1;
227
- }
228
- }
229
-
230
- .current-slide {
231
- .banner-title {
232
- animation: fade-up 400ms ease-in;
233
- }
234
- .banner-subtitle {
235
- animation: fade-up 400ms ease-in;
236
- }
237
- .banner-text {
238
- animation: fade-up 400ms ease-in;
239
- }
240
- .banner-opts {
241
- animation: fade-up 400ms ease-in;
242
- }
243
- }
244
- </style>
245
-
246
- <style lang="scss" scoped>
247
- // 定制修改item1
248
- .banner-item0 {
249
- .banner-attach {
250
- height: 120px;
251
-
252
- @include respond-to('pad') {
253
- height: 80px;
254
- }
255
- }
256
- }
257
-
258
- .banner-item1 {
259
- .banner-attach {
260
- height: 156px;
261
-
262
- @include respond-to('pad') {
263
- height: 120px;
264
- }
265
- }
266
- }
267
-
268
- // 定制修改item2
269
- .banner-item2 {
270
- .banner-content {
271
- width: 100%;
272
- justify-content: center;
273
- }
274
- .banner-attach {
275
- height: 38%;
276
- margin-top: -60px;
277
- object-fit: contain;
278
- }
279
- }
280
-
281
- .banner-wrapper {
282
- height: 100%;
283
-
284
- .banner-bg {
285
- height: 100%;
286
- }
287
- }
288
- </style>
@@ -1,175 +0,0 @@
1
- <script setup lang="ts">
2
- import { OButton, OFigure } from '@opensig/opendesign';
3
- import ContentWrapper from '../common/ContentWrapper.vue';
4
- import type { BannerContentProps } from './types';
5
-
6
- defineProps<BannerContentProps>();
7
-
8
- // 内联定义 emits 类型
9
- const emit = defineEmits<{
10
- (e: 'click', href: string | undefined): void;
11
- }>();
12
-
13
- const onClick = (href: string | undefined, hasBtn: string | undefined) => {
14
- if (href && !hasBtn) {
15
- window.open(href);
16
- emit('click', href);
17
- }
18
- };
19
- </script>
20
-
21
- <template>
22
- <OFigure
23
- class="banner-bg"
24
- :src="info.bg"
25
- :class="{
26
- 'with-sticky-bg': info.withStickyBg,
27
- 'cursor-pointer': info.href && !info.btn,
28
- }"
29
- :style="{
30
- '--pad-offset': info.pad_offset,
31
- }"
32
- @click="onClick(info.href, info.btn)"
33
- >
34
- <ContentWrapper class="banner-wrapper" :class="['banner-wrapper', contentJustifyCenter ? 'content-center' : '']">
35
- <div class="banner-content">
36
- <img v-if="!isPhone && info.attach" :src="info.attach" class="banner-attach" />
37
-
38
- <!-- 标题 -->
39
- <div
40
- :class="{
41
- 'banner-title': true,
42
- 'text-dark': info.text_theme === 'dark'
43
- }"
44
- v-if="info.title"
45
- >
46
- {{ info.title }}
47
- </div>
48
- <!-- 副标题 -->
49
- <div
50
- :class="{
51
- 'banner-subtitle': true,
52
- 'text-dark': info.text_theme === 'dark'
53
- }"
54
- v-if="info.subtitle"
55
- >
56
- {{ info.subtitle }}
57
- </div>
58
- <div
59
- class="banner-text"
60
- v-if="info.bg_text"
61
- :style="{
62
- backgroundImage: `url(${info.bg_text})`,
63
- '--pc-width': info.pc_text_width,
64
- '--pc-height': info.pc_text_height,
65
- '--pad-width': info.pad_text_width,
66
- '--pad-height': info.pad_text_height,
67
- }"
68
- ></div>
69
- <!-- 操作按钮 -->
70
- <div v-if="info.btn" class="banner-opts">
71
- <OButton
72
- :href="info.href"
73
- target="_blank"
74
- variant="solid"
75
- color="primary"
76
- :size="size === 'tiny' ? undefined : size"
77
- >
78
- {{ info.btn }}
79
- </OButton>
80
- </div>
81
- </div>
82
- </ContentWrapper>
83
- </OFigure>
84
- </template>
85
-
86
- <style lang="scss" scoped>
87
- .banner-bg {
88
- width: 100%;
89
- height: 100%;
90
-
91
- :deep(.o-figure-img) {
92
- width: 100%;
93
- height: 100%;
94
- }
95
-
96
- @include respond-to('pad') {
97
- :deep(.o-figure-img) {
98
- transition: object-position 0.3s ease;
99
- object-position: var(--pad-offset);
100
- }
101
- }
102
-
103
- @include respond-to('phone') {
104
- --figure-radius: 4px;
105
- }
106
- }
107
-
108
- .banner-wrapper {
109
- height: 100%;
110
-
111
- &.content-center {
112
- display: flex;
113
- justify-content: center;
114
-
115
- & .banner-content {
116
- align-items: center;
117
- }
118
- }
119
- }
120
-
121
- .banner-content {
122
- height: 100%;
123
- display: inline-flex;
124
- flex-direction: column;
125
- justify-content: center;
126
- position: relative;
127
- }
128
-
129
- .banner-title {
130
- @include display1;
131
- color: var(--o-color-info1);
132
- font-weight: 500;
133
- margin-bottom: 8px;
134
-
135
- &.text-dark {
136
- color: var(--o-color-info1-inverse);
137
- }
138
-
139
- @include respond-to('<=pad_v') {
140
- font-size: 22px;
141
- line-height: 30px;
142
- }
143
- }
144
-
145
- .banner-subtitle {
146
- color: var(--o-color-info1);
147
- margin-top: 8px;
148
- font-size: 16px;
149
-
150
- &.text-dark {
151
- color: var(--o-color-info1-inverse);
152
- }
153
- }
154
-
155
- .banner-text {
156
- height: var(--pc-height);
157
- width: var(--pc-width);
158
- background-size: contain;
159
- background-repeat: no-repeat;
160
-
161
- @include respond-to('pad') {
162
- height: var(--pad-height);
163
- width: var(--pad-width);
164
- }
165
- }
166
-
167
- .banner-opts {
168
- margin-top: 24px;
169
- --d: 20px;
170
- }
171
-
172
- .cursor-pointer {
173
- cursor: pointer;
174
- }
175
- </style>