From 56e84be682df368aaac733212adb79ad7b3d7561 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 25 Apr 2025 15:03:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E5=8A=A8?=
=?UTF-8?q?=E7=94=BB=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
common/css/animation.css | 132 +++++++++---------
.../modules/custom/data-group-rendering.vue | 54 ++++---
.../diy/modules/custom/data-rendering.vue | 59 ++++----
3 files changed, 129 insertions(+), 116 deletions(-)
diff --git a/common/css/animation.css b/common/css/animation.css
index 65f61840..fc011e84 100644
--- a/common/css/animation.css
+++ b/common/css/animation.css
@@ -1,7 +1,47 @@
+/* // 放大缩小 */
+.scale-up-center {
+ -webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+ animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
+}
-/*
-* 垂直放大
-*/
+.scale-up-center-infinite {
+ -webkit-animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
+ animation: scale-up-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
+}
+
+@keyframes scale-up-center {
+ 0% {
+ -webkit-transform: scale(0.5);
+ transform: scale(0.5);
+ }
+ 100% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+ }
+/* // 中心缩小 */
+.scale-out-center {
+ -webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+ animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
+}
+.scale-out-center-infinite {
+ -webkit-animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
+ animation: scale-out-center 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) infinite both;
+}
+
+@keyframes scale-out-center {
+ 0% {
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 1;
+ }
+ 100% {
+ -webkit-transform: scale(0);
+ transform: scale(0);
+ opacity: 1;
+ }
+}
+/* // 垂直放大 */
.scale-up-ver-bottom {
-webkit-animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-ver-bottom 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
@@ -37,9 +77,7 @@
transform: rotate(0);
}
}
-/*
-* 交替垂直放大
-*/
+/* // 交替垂直放大 */
.scale-up-ver-bottom-alternate {
-webkit-animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
animation: scale-up-ver-bottom-alternate 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
@@ -62,9 +100,7 @@
transform-origin: 0% 100%;
}
}
-/*
-* 中间区域放大
-*/
+// 中间区域放大
.scale-up-ver-center {
-webkit-animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: scale-up-ver-center 1s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
@@ -85,10 +121,8 @@
}
}
-/*
-* 淡出
-.
-*/fade-out-fwd {
+/* // 淡出 */
+.fade-out-fwd {
-webkit-animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: fade-out-fwd 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@@ -108,9 +142,7 @@
opacity: 0;
}
}
-/*
-* 淡入
-*/
+/* // 淡入 */
.fade-in-bck {
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
@@ -119,9 +151,7 @@
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) infinite both;
}
-/*
-* 淡入淡出
-*/
+/* // 淡入淡出 */
.fade-in-bck-alternate {
-webkit-animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
animation: fade-in-bck 2s cubic-bezier(0.390, 0.575, 0.565, 1.000) alternate both;
@@ -142,9 +172,7 @@
opacity: 1;
}
}
-/*
-* 文字铺开
-*/
+/* //文字铺开 */
.tracking-in-expand {
-webkit-animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 2s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
@@ -168,9 +196,7 @@
}
}
-/*
-* 心跳
-*/
+/* // 心跳 */
.heartbeat {
-webkit-animation: heartbeat 1s ease-in-out both;
animation: heartbeat 1s ease-in-out both;
@@ -216,9 +242,7 @@
}
}
-/*
-* 脉动
-*/
+/* // 脉动 */
.pulsate-bck {
-webkit-animation: pulsate-bck 1s ease-in-out both;
animation: pulsate-bck 1s ease-in-out both;
@@ -244,9 +268,7 @@
}
}
-/*
-* 向上弹跳
-*/
+/* // 向上弹跳 */
.bounce-top {
-webkit-animation: bounce-top 1.5s both;
animation: bounce-top 1.5s both;
@@ -283,9 +305,7 @@
}
}
-/*
-* 向下弹跳
-*/
+/* // 向下弹跳 */
.bounce-bottom {
-webkit-animation: bounce-bottom 1.5s both;
animation: bounce-bottom 1.5s both;
@@ -322,9 +342,7 @@
}
}
-/*
-* 向左弹跳
-*/
+/* // 向左弹跳 */
.bounce-left {
-webkit-animation: bounce-left 1.5s both;
animation: bounce-left 1.5s both;
@@ -360,9 +378,7 @@
animation-timing-function: ease-in;
}
}
-/*
-* 向右弹跳
-*/
+/* // 向右弹跳 */
.bounce-right {
-webkit-animation: bounce-right 1.5s both;
animation: bounce-right 1.5s both;
@@ -398,9 +414,7 @@
animation-timing-function: ease-in;
}
}
-/*
-* 左侧弹跳
-*/
+/* // 左侧弹跳 */
.bounce-in-left {
-webkit-animation: bounce-in-left 2s both;
animation: bounce-in-left 2s both;
@@ -463,9 +477,7 @@
}
}
-/*
-* 翻转
-*/
+/* // 翻转 */
.flip-in-diag-2-tl {
-webkit-animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: flip-in-diag-2-tl 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
@@ -488,9 +500,7 @@
}
}
-/*
-* 从左滑动
-*/
+/* // 从左滑动 */
.slide-in-left {
-webkit-animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
@@ -514,9 +524,7 @@
}
}
-/*
-* 在fwd中心滑动
-*/
+/* // 在fwd中心滑动 */
.slide-in-fwd-center {
-webkit-animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-fwd-center 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
@@ -539,9 +547,7 @@
opacity: 1;
}
}
-/*
-* 左前轮旋转
-*/
+/* // 左前轮旋转 */
.swirl-in-left-fwd {
-webkit-animation: swirl-in-left-fwd 2s ease-out both;
animation: swirl-in-left-fwd 2s ease-out both;
@@ -566,9 +572,7 @@
opacity: 1;
}
}
-/*
-* 摇动
-*/
+/* // 摇动 */
.shake-bottom {
-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
@@ -605,9 +609,7 @@
transform-origin: 50%;
}
}
-/*
-* 震动
-*/
+/* // 震动 */
.vibrate {
-webkit-animation: vibrate 0.3s linear both;
animation: vibrate 0.3s linear both;
@@ -643,9 +645,7 @@
transform: translate(0);
}
}
-/*
-* 模糊显示
-*/
+/* // 模糊显示 */
.text-focus-in {
-webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
@@ -668,9 +668,7 @@
}
}
-/*
-* 果冻
-*/
+/* // 果冻 */
.jello-horizontal {
-webkit-animation: jello-horizontal 0.9s both;
animation: jello-horizontal 0.9s both;
diff --git a/pages/diy/components/diy/modules/custom/data-group-rendering.vue b/pages/diy/components/diy/modules/custom/data-group-rendering.vue
index 040be7f0..53109774 100644
--- a/pages/diy/components/diy/modules/custom/data-group-rendering.vue
+++ b/pages/diy/components/diy/modules/custom/data-group-rendering.vue
@@ -1,21 +1,23 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -120,7 +122,7 @@ export default {
},
computed: {
get_percentage_count() {
- return (num, data_follow, type, is_auto = '0', max_size = 0, key = '') => {
+ return (num, data_follow, type, is_auto = '0', max_size = 0, key = '', is_enable = '0') => {
// 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
if (['left', 'top'].includes(type)) {
const { id = '', type: follow_type = 'left' } = data_follow || { id: '', type: 'left' };
@@ -145,14 +147,20 @@ export default {
}
}
} else {
- // 微信小程序图片等比缩放对小数点后的内容支持的不是特别的好，需要取向上取整数
- if (key == 'img' && ['width', 'height'].includes(type)) {
- // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
- return `${ Math.round(num * this.propScale) }px`;
+ // 如果隐藏了，返回宽高为空的值
+ if (is_enable == '1') {
+ // 微信小程序图片等比缩放对小数点后的内容支持的不是特别的好，需要取向上取整数
+ if (key == 'img' && ['width', 'height'].includes(type)) {
+ // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
+ return `${ Math.round(num * this.propScale) }px`;
+ } else {
+ // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
+ return `${num * this.propScale}px`;
+ }
} else {
- // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
- return `${num * this.propScale}px`;
+ return `0px`;
}
+
}
}
};
diff --git a/pages/diy/components/diy/modules/custom/data-rendering.vue b/pages/diy/components/diy/modules/custom/data-rendering.vue
index ef920d17..d7409c7b 100644
--- a/pages/diy/components/diy/modules/custom/data-rendering.vue
+++ b/pages/diy/components/diy/modules/custom/data-rendering.vue
@@ -1,24 +1,26 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -131,7 +133,7 @@ export default {
},
computed: {
get_percentage_count() {
- return (num, data_follow, type, is_auto = '0', max_size = 0, key = '') => {
+ return (num, data_follow, type, is_auto = '0', max_size = 0, key = '', is_enable = '0') => {
// 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
if (['left', 'top'].includes(type)) {
const { id = '', type: follow_type = 'left' } = data_follow || { id: '', type: 'left' };
@@ -156,13 +158,18 @@ export default {
}
}
} else {
- // 微信小程序图片等比缩放对小数点后的内容支持的不是特别的好，需要取向上取整数
- if (key == 'img' && ['width', 'height'].includes(type)) {
- // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
- return `${ Math.round(num * this.propScale) }px`;
+ // 如果隐藏了，返回宽高为空的值
+ if (is_enable == '1') {
+ // 微信小程序图片等比缩放对小数点后的内容支持的不是特别的好，需要取向上取整数
+ if (key == 'img' && ['width', 'height'].includes(type)) {
+ // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
+ return `${ Math.round(num * this.propScale) }px`;
+ } else {
+ // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
+ return `${num * this.propScale}px`;
+ }
} else {
- // 如果is_auto未设置或条件不满足，则根据比例缩放num并返回
- return `${num * this.propScale}px`;
+ return `0px`;
}
}
}