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 @@
+
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';