diff --git a/src/assets/images/chart/informations/photo_carousel.png b/src/assets/images/chart/informations/photo_carousel.png new file mode 100644 index 00000000..55cde626 Binary files /dev/null and b/src/assets/images/chart/informations/photo_carousel.png differ diff --git a/src/packages/components/Informations/Mores/ImageCarousel/config.ts b/src/packages/components/Informations/Mores/ImageCarousel/config.ts new file mode 100644 index 00000000..c49fb619 --- /dev/null +++ b/src/packages/components/Informations/Mores/ImageCarousel/config.ts @@ -0,0 +1,44 @@ +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { ImageCarouselConfig } from './index' +import cloneDeep from 'lodash/cloneDeep' +import logo from '@/assets/logo.png' + +export const option = { + // 图片资源列表 + dataset: [ + 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg', + 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg', + 'https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg', + ], + // 自动播放 + autoplay: true, + // 自动播放的间隔(豪秒) + interval: 5000, + // 每页显示的图片数量 + slidesPerview: 1, + // 轮播方向 + direction: "horizontal", + // 拖曳切换 + draggable: true, + // 居中显示 + centeredSlides: false, + // 过渡效果 + effect: "slide", + // 是否显示指示点 + showDots: true, + // 指示器样式 + dotType: "dot", + // 指示器位置 + dotPlacement: "bottom", + // 显示箭头 + showArrow: false, + // 图片样式 + fit: "contain", +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = ImageCarouselConfig.key + public chartConfig = cloneDeep(ImageCarouselConfig) + public option = cloneDeep(option) +} diff --git a/src/packages/components/Informations/Mores/ImageCarousel/config.vue b/src/packages/components/Informations/Mores/ImageCarousel/config.vue new file mode 100644 index 00000000..17c39805 --- /dev/null +++ b/src/packages/components/Informations/Mores/ImageCarousel/config.vue @@ -0,0 +1,168 @@ + + + diff --git a/src/packages/components/Informations/Mores/ImageCarousel/index.ts b/src/packages/components/Informations/Mores/ImageCarousel/index.ts new file mode 100644 index 00000000..8ef11656 --- /dev/null +++ b/src/packages/components/Informations/Mores/ImageCarousel/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' + +export const ImageCarouselConfig: ConfigType = { + key: 'ImageCarousel', + chartKey: 'VImageCarousel', + conKey: 'VCImageCarousel', + title: '轮播图', + category: ChatCategoryEnum.MORE, + categoryName: ChatCategoryEnumName.MORE, + package: PackagesCategoryEnum.INFORMATIONS, + chartFrame: ChartFrameEnum.NAIVE_UI, + image: 'photo_carousel.png' +} diff --git a/src/packages/components/Informations/Mores/ImageCarousel/index.vue b/src/packages/components/Informations/Mores/ImageCarousel/index.vue new file mode 100644 index 00000000..42dc1a73 --- /dev/null +++ b/src/packages/components/Informations/Mores/ImageCarousel/index.vue @@ -0,0 +1,78 @@ + + diff --git a/src/packages/components/Informations/Mores/index.ts b/src/packages/components/Informations/Mores/index.ts index 8fadc441..572ab9e0 100644 --- a/src/packages/components/Informations/Mores/index.ts +++ b/src/packages/components/Informations/Mores/index.ts @@ -1,6 +1,7 @@ import { ImageConfig } from './Image/index' +import { ImageCarouselConfig } from './ImageCarousel/index' import { IframeConfig } from './Iframe/index' import { VideoConfig } from './Video/index' import { WordCloudConfig } from './WordCloud/index' -export default [WordCloudConfig, ImageConfig, VideoConfig, IframeConfig] +export default [ImageConfig, ImageCarouselConfig, VideoConfig, IframeConfig, WordCloudConfig]