From 952ac01944698463dedaf52eef8d4d270faebeaf Mon Sep 17 00:00:00 2001 From: jlzhou <12020042@qq.com> Date: Fri, 28 Feb 2025 08:45:42 +0800 Subject: [PATCH] update public style --- bi-ui/src/assets/css/main.scss | 76 +++++- bi-ui/src/components/global/WEffectLight.vue | 2 +- bi-ui/src/pages/test/components.vue | 262 +++++++++++++------ 3 files changed, 255 insertions(+), 85 deletions(-) diff --git a/bi-ui/src/assets/css/main.scss b/bi-ui/src/assets/css/main.scss index 9a9db95..1866252 100644 --- a/bi-ui/src/assets/css/main.scss +++ b/bi-ui/src/assets/css/main.scss @@ -154,7 +154,7 @@ &::after { position: absolute; content: ''; - font-size: var(--size,1em); + font-size: var(--size, 1em); display: block; width: 1em; height: 1em; @@ -175,6 +175,77 @@ } } + + + @property --border-gradient-angle { + syntax: ""; + inherits: true; + initial-value: 0turn; + } + + .w-border-light, + .w-border-light-1, + .w-border-light-2, + .w-border-light-3 { + position: relative; + border: none !important; + animation-play-state: running; + + --border: .2em solid var(--w-main-dark-3); + --border-light-color: var(--w-main-light-3); + --time: 5s; + + + &::before { + content: ''; + pointer-events: none; + position: absolute; + inset: 0; + border: var(--border); + border-radius: inherit; + } + + + &::after { + content: ''; + pointer-events: none; + position: absolute; + inset: 0; + border: var(--border); + border-color: var(--border-light-color); + border-radius: inherit; + mask-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, #0000, #000 10%, #0000 11%, #0000 50%, #000 60%, #0000 61%); + animation: am-frame var(--time) infinite linear; + animation-play-state: inherit; + } + } + + .w-border-light-1::after { + mask-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, #0000, #000 10%, #0000 11%); + } + + + .w-border-light-3::after { + mask-image: conic-gradient(from var(--border-gradient-angle) at 50% 50%, #0000,#0000 23%, #000 33%, #0000 34%,#0000 56%,#000 66%,#0000 67%, #0000 89%, #000 99%, #0000 100%); + } + + @keyframes am-frame { + 0% { + --border-gradient-angle: 0turn; + } + + 100% { + --border-gradient-angle: 1turn; + } + + } + + .w-part-hide { + --top: 1em; + --bottom: 1em; + mask-image: linear-gradient(to bottom,#0000 0%,#000 var(--top),#000 calc(100% - var(--bottom)), #0000 100%); + } + .w-radio, .w-checkbox { --btn-color-inner: var(--btn-color, currentColor); @@ -217,4 +288,7 @@ } + + + } \ No newline at end of file diff --git a/bi-ui/src/components/global/WEffectLight.vue b/bi-ui/src/components/global/WEffectLight.vue index a1e8153..6cbfbdb 100644 --- a/bi-ui/src/components/global/WEffectLight.vue +++ b/bi-ui/src/components/global/WEffectLight.vue @@ -22,7 +22,7 @@ const props = defineProps({ .WEffectLight { --key: brightness(110%); --time: 1.7s; - animation: am-WEffectLight var(--time) infinite alternate-reverse; + animation: am-WEffectLight var(--time) infinite linear; animation-play-state: paused; &.am { diff --git a/bi-ui/src/pages/test/components.vue b/bi-ui/src/pages/test/components.vue index f025d08..b2f3adc 100644 --- a/bi-ui/src/pages/test/components.vue +++ b/bi-ui/src/pages/test/components.vue @@ -72,10 +72,12 @@ codeRef.setCode('new code');//设置代码

工具栏

-
+ + {{ `
-
` }} + + ` }} @@ -110,116 +112,210 @@ codeRef.setCode('new code');//设置代码 - -

开关

- - - -{{ switchValue }} -{{ ` - - -\{\{ switchValue \}\}` }} + +

开关

+ + + + {{ switchValue }} + {{ ` + + + \{\{ switchValue \}\}` }} - -

主题切换

- - - - -{{ ` - - -` }} + +

主题切换

+ + + + + {{ ` + + + ` }} - +
手机号码: 15111047708 :
手机号码: 15111047708 :
-
手机号码: 15111047708 :
-
姓名: 张三丰 :
-
ipv4: 127.0.0.1 :
- {{ `
手机号码: 15111047708 :
-
手机号码: 15111047708 :
-
手机号码: 15111047708 :
-
姓名: 张三丰 :
-
ipv4: 127.0.0.1 :
` }} +
手机号码: 15111047708 :
+
姓名: 张三丰 :
+
ipv4: 127.0.0.1 :
+ {{ `
手机号码: 15111047708 :
+
手机号码: 15111047708 :
+
手机号码: 15111047708 :
+
姓名: 张三丰 :
+
ipv4: 127.0.0.1 :
` }} + -

杂点背景

-
- 内容 - :base="0.01" - :base="0.1" - :base="0.5" - :base="1" - :base="0.1" - - :base="0.2" -
:base="0.3"
 -
-
    -
  1. base: 杂点值,范围: 0~1, 默认:0.05
    2. -
  2. --bg: 背景颜色
    3. -
  3. --noise: 杂点颜色
    4. -
- {{ `
- 内容 - :base="0.01" - :base="0.1" - :base="0.5" - :base="1" - :base="0.1" - - :base="0.2" -
:base="0.3"
 -
` }} - -

呼吸灯效果

-
-
- {{ am?'暂停':'播放' }} +

杂点背景

+
+ 内容 + :base="0.01" + :base="0.1" + :base="0.5" + :base="1" + :base="0.1" + + :base="0.2" + +
:base="0.3"
+ +
+
    +
  1. base: 杂点值,范围: 0~1, 默认:0.05
    2. +
  2. --bg: 背景颜色
    3. +
  3. --noise: 杂点颜色
    4. +
+ {{ `
+ 内容 + :base="0.01" + :base="0.1" + :base="0.5" + :base="1" + :base="0.1" + + :base="0.2" + +
:base="0.3"
+ +
` }} + +

呼吸灯效果

+ +
+ + +
+ + {{ am ? '暂停' : '播放' }} - {{ `
-
- \{\{ am?'暂停':'播放' \}\}` }} + {{ ` +
+ + +
+ + \{\{ am?'暂停':'播放' \}\}` }}

干扰动画效果

-
- {{ am1?'暂停':'播放' }} + +
+ + {{ am1 ? '暂停' : '播放' }}

加载动画效果

-
-
+
+
内部加载动画
-
+
内部加载动画
- {{ `
-
-
- 内部加载动画 + {{ `
+
+
+ 内部加载动画 +
+
+ 内部加载动画 +
` }} + + +

流光边框效果

+
+
+
+
+
+
+
+
-
- 内部加载动画 -
` }} + {{ `
+
+
+
+
+
+
` }} + +

上下部分隐藏

+
+
+
+
+
+
+ + + {{ `
+
+
+
` }} + + +

印章效果

+
+
+
印章效果
+
+
+
PASS
+
+
+ + + {{ `
+
+
印章效果
+
+
+
PASS
+
+
` }} + + +