diff --git a/report-ui/src/assets/styles/anji.scss b/report-ui/src/assets/styles/anji.scss index 1cfe79a4..ee5d1587 100644 --- a/report-ui/src/assets/styles/anji.scss +++ b/report-ui/src/assets/styles/anji.scss @@ -77,3 +77,21 @@ .el-table td { padding: 6px 0; } + +@keyframes turn { + 0% { + -webkit-transform: rotate(0deg); + } + 25% { + -webkit-transform: rotate(90deg); + } + 50% { + -webkit-transform: rotate(180deg); + } + 75% { + -webkit-transform: rotate(270deg); + } + 100% { + -webkit-transform: rotate(360deg); + } +} diff --git a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js index 9e039cb3..37fff15b 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js +++ b/report-ui/src/views/bigscreenDesigner/designer/tools/configure/widget-image.js @@ -1,6 +1,6 @@ /* * @Descripttion: 图片json - * @version: + * @version: * @Author: qianlishi * @Date: 2021-08-29 07:07:23 * @LastEditors: qianlishi @@ -30,6 +30,14 @@ export const widgetImage = { placeholder: '', value: false, }, + { + type: 'el-slider', + label: '旋转速度', + name: 'rotationSpeed', + required: false, + placeholder: '', + value: 70 + }, { type: 'el-slider', label: '透明度', diff --git a/report-ui/src/views/bigscreenDesigner/designer/widget/widgetImage.vue b/report-ui/src/views/bigscreenDesigner/designer/widget/widgetImage.vue index afbd2eab..16794c43 100644 --- a/report-ui/src/views/bigscreenDesigner/designer/widget/widgetImage.vue +++ b/report-ui/src/views/bigscreenDesigner/designer/widget/widgetImage.vue @@ -41,7 +41,8 @@ export default { return { imageAdress: this.transStyle.imageAdress, "border-radius": this.transStyle.borderRadius + "px", - opacity: this.transStyle.transparency / 100 + opacity: this.transStyle.transparency / 100, + animation: this.transStyle.startRotate? "turn "+(101-this.transStyle.rotationSpeed)/10+"s linear infinite":"none" }; } }, @@ -74,21 +75,5 @@ export default { .startImg { animation: turn 1s linear infinite; } -@keyframes turn { - 0% { - -webkit-transform: rotate(0deg); - } - 25% { - -webkit-transform: rotate(90deg); - } - 50% { - -webkit-transform: rotate(180deg); - } - 75% { - -webkit-transform: rotate(270deg); - } - 100% { - -webkit-transform: rotate(360deg); - } -} +