diff --git a/packages/opendesign/icons/svgs/fill/video-play.svg b/packages/opendesign/icons/svgs/fill/video-play.svg new file mode 100644 index 0000000000000000000000000000000000000000..6224870d06658735fb5af80d5ba1d4233326ee1a --- /dev/null +++ b/packages/opendesign/icons/svgs/fill/video-play.svg @@ -0,0 +1,4 @@ + +video-play + + diff --git a/packages/opendesign/src/_utils/icons.ts b/packages/opendesign/src/_utils/icons.ts index 216ad2fed77b55f8bdd5fc5fd241e758c6142d6d..d5779186b28cf9946b6bc66fa214ffd443179442 100644 --- a/packages/opendesign/src/_utils/icons.ts +++ b/packages/opendesign/src/_utils/icons.ts @@ -34,6 +34,7 @@ import { OIconCalendar, OIconDoubleArrowLeft, OIconDoubleArrowRight, + OIconVideoPlay, } from '../icon-components'; /** @@ -177,15 +178,16 @@ export const IconEyeOn = shallowRef(OIconEye); export const IconEyeOff = shallowRef(OIconEyeOff); /** - * 加载失败的图片 + * 加载失败图标 */ export const IconImageError = shallowRef(OIconImageError); /** - * 加载失败的图片 + * 播放图标 */ -export const IconVideoPlay = shallowRef(OIconChevronRight); +export const IconVideoPlay = shallowRef(OIconVideoPlay); +// 多选框选中图标 export const IconChecked = shallowRef(OIconChecked); /** diff --git a/packages/opendesign/src/_utils/init-icons.ts b/packages/opendesign/src/_utils/init-icons.ts index da82d22b7aab39291ed6822b26be5590ff1b6488..2bcbdd7df1533a3980fb9fe84b5891d40373b089 100644 --- a/packages/opendesign/src/_utils/init-icons.ts +++ b/packages/opendesign/src/_utils/init-icons.ts @@ -16,6 +16,7 @@ import { IconChevronRight, IconEllipsis, IconStar, + IconVideoPlay, } from './icons'; /** @@ -94,15 +95,24 @@ export function initIconChevronRight(icon: Component) { export function initIconDone(icon: Component) { IconDone.value = icon; } + /** * 更多...图标 */ export function initIconEllipsis(icon: Component) { IconEllipsis.value = icon; } + /** * star图标 */ export function initIconStar(icon: Component) { IconStar.value = icon; } + +/** + * 播放图标 + */ +export function initIconVideoPlay(icon: Component) { + IconVideoPlay.value = icon; +} diff --git a/packages/opendesign/src/figure/style/media.scss b/packages/opendesign/src/figure/style/media.scss index 69cd0062a20d37ea0c85a837ffe03f26c015f17e..9158b26a5a8e532c304e12fe568aa2e9ad7f690d 100644 --- a/packages/opendesign/src/figure/style/media.scss +++ b/packages/opendesign/src/figure/style/media.scss @@ -1,5 +1,19 @@ @use '../../_styles/mixin.scss' as *; +.o-figure { + @include respond-to('laptop') { + --figure-play-icon-size: 56px; + } + + @include respond-to('pad') { + --figure-play-icon-size: 48px; + } + + @include respond-to('phone') { + --figure-play-icon-size: 40px; + } +} + .o-figure-title { @include respond-to('pad') { font-size: var(--o-font_size-text1); diff --git a/packages/opendesign/src/figure/style/style.scss b/packages/opendesign/src/figure/style/style.scss index 2ce3d3bb2cefc5d174161261418f296acb541963..3a3b3e885451bfd6f2bef2284210b399e439572c 100644 --- a/packages/opendesign/src/figure/style/style.scss +++ b/packages/opendesign/src/figure/style/style.scss @@ -142,8 +142,13 @@ border-radius: inherit; } .o-figure-play-icon { + display: flex; + justify-content: center; + align-items: center; box-sizing: border-box; - font-size: var(--figure-play-icon-size); + width: var(--figure-play-icon-size); + height: var(--figure-play-icon-size); + font-size: calc(var(--figure-play-icon-size) / 64 * 24); border-radius: 50%; color: var(--o-color-white); background-color: rgba(var(--o-white), 0.2); diff --git a/packages/opendesign/src/figure/style/var.scss b/packages/opendesign/src/figure/style/var.scss index 29bf643c7b83f3aa6bbf1cd00bef886f1e2a9c70..3ba00e204ef7d50d4eb72305a8c11c6b6f8f451e 100644 --- a/packages/opendesign/src/figure/style/var.scss +++ b/packages/opendesign/src/figure/style/var.scss @@ -5,5 +5,5 @@ --figure-radius: 0; --figure-error-color: var(--o-color-control4); --figure-error-size: var(--o-icon_size_control-l); - --figure-play-icon-size: 48px; + --figure-play-icon-size: 64px; } diff --git a/packages/opendesign/src/icon-components/icons.json b/packages/opendesign/src/icon-components/icons.json index b76af57d3ae652c5c182f44e82bdcc80ec88c5e8..41c571038e69c1541a7611d30296c038933cbaac 100644 --- a/packages/opendesign/src/icon-components/icons.json +++ b/packages/opendesign/src/icon-components/icons.json @@ -215,6 +215,12 @@ "componentName": "OIconTime", "path": "fill/time.svg" }, + { + "type": "fill", + "name": "o-icon-video-play", + "componentName": "OIconVideoPlay", + "path": "fill/video-play.svg" + }, { "type": "color", "name": "o-icon-ascend", diff --git a/packages/opendesign/src/icon-components/index.ts b/packages/opendesign/src/icon-components/index.ts index 9d22ff1a7f8cac7e59a4c3fc559d62e08e03ec72..6d0449666d4d8334b8489a927aaba473c37a26a8 100644 --- a/packages/opendesign/src/icon-components/index.ts +++ b/packages/opendesign/src/icon-components/index.ts @@ -34,6 +34,7 @@ export { OIconRefresh } from './OIconRefresh'; export { OIconSearch } from './OIconSearch'; export { OIconStar } from './OIconStar'; export { OIconTime } from './OIconTime'; +export { OIconVideoPlay } from './OIconVideoPlay'; export { OIconAscend } from './OIconAscend'; export { OIconDanger } from './OIconDanger'; export { OIconInfo } from './OIconInfo';