jlzhou
/
base-project
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

update public style

Browse Source
master
管理员 10 months ago
parent 093ad26cc1
commit 952ac01944
3 changed files with 255 additions and 85 deletions
Show Stats Download Patch File Download Diff File

74
bi-ui/src/assets/css/main.scss
Unescape Escape View File

@ -175,6 +175,77 @@
}
}
@property --border-gradient-angle {
syntax: "<angle>";
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 @@
}
}

2
bi-ui/src/components/global/WEffectLight.vue
Unescape Escape View File

@ -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 {

150
bi-ui/src/pages/test/components.vue
Unescape Escape View File

@ -72,10 +72,12 @@ codeRef.setCode('new code');//设置代码
<el-divider />
<h2>工具栏</h2>
<div style="display: flex; justify-content: flex-end; height: 3em; border: 1px solid var(--w-bg-dark-3);">
<w-toolbar /></div>
<w-toolbar />
</div>
<w-code language="html">{{ `<div
style="display: flex; justify-content: flex-end; height: 3em; border: 1px solid var(--w-bg-dark-3);">
<w-toolbar /></div>` }}</w-code>
<w-toolbar />
</div>` }}</w-code>
@ -114,11 +116,13 @@ codeRef.setCode('new code');//设置代码
<h2>开关</h2>
<w-switch :model-value="true" style="width: 4em; margin: .5em;" />
<w-switch :model-value="false" style="width: 4em; margin: .5em;" />
<w-switch v-model="switchValue" off-text="关" on-text="开" :disabled="false" style="width: 4em; margin: .5em; --on-color:red; --off-color: #ccc;" />
<w-switch v-model="switchValue" off-text="关" on-text="开" :disabled="false"
style="width: 4em; margin: .5em; --on-color:red; --off-color: #ccc;" />
{{ switchValue }}
<w-code language="html">{{ ` <w-switch :model-value="true" style="width: 4em; margin: .5em;" />
<w-switch :model-value="false" style="width: 4em; margin: .5em;" />
<w-switch v-model="switchValue" off-text="关" on-text="开" :disabled="false" style="width: 4em; margin: .5em; --on-color:red; --off-color: #ccc;" />
<w-switch v-model="switchValue" off-text="关" on-text="开" :disabled="false"
style="width: 4em; margin: .5em; --on-color:red; --off-color: #ccc;" />
\{\{ switchValue \}\}` }}</w-code>
@ -152,21 +156,32 @@ codeRef.setCode('new code');//设置代码
<div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" /></div>
<div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" char="X" show /></div>
<div class="w-flex">姓名: 张三丰 : <w-sensitive value="张三丰" len="1" char="某" show /></div>
<div class="w-flex">ipv4: 127.0.0.1 : <w-sensitive type="ipv4" value="127.0.0.1" char="X" show/></div>` }}</w-code>
<div class="w-flex">ipv4: 127.0.0.1 : <w-sensitive type="ipv4" value="127.0.0.1" char="X" show /></div>` }}
</w-code>
</el-tab-pane>
<el-tab-pane label="特效">
<h2>杂点背景</h2>
<div style="display: flex; flex-wrap: wrap; color: #FFF;">
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;">内容</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.01">:base="0.01"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.1">:base="0.1"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.5">:base="0.5"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;"
:base="0.01">:base="0.01"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;"
:base="0.1">:base="0.1"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;"
:base="0.5">:base="0.5"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="1">:base="1"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;--bg:#0d0d0d; --noise: #FFF1;" :base="0.1">:base="0.1"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #0d0d0d,#0d0d0d,#3d3d3d,#0d0d0d) ; --noise: #FFF1;" :base="0.2">:base="0.2"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #eee,#fff) ; --noise: #0001;" :base="0.3"><div style="padding: 1em; color: #000;">:base="0.3"</div></w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;--bg:#0d0d0d; --noise: #FFF1;"
:base="0.1">:base="0.1"</w-effect-noise-bg>
<w-effect-noise-bg
style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #0d0d0d,#0d0d0d,#3d3d3d,#0d0d0d) ; --noise: #FFF1;"
:base="0.2">:base="0.2"</w-effect-noise-bg>
<w-effect-noise-bg
style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #eee,#fff) ; --noise: #0001;"
:base="0.3">
<div style="padding: 1em; color: #000;">:base="0.3"</div>
</w-effect-noise-bg>
</div>
<ol>
<li>base: 杂点值,范围: 0~1, 默认:0.05</li>
@ -175,28 +190,48 @@ codeRef.setCode('new code');//设置代码
</ol>
<w-code language="html">{{ ` <div style="display: flex; flex-wrap: wrap; color: #FFF;">
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;">内容</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.01">:base="0.01"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.1">:base="0.1"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.5">:base="0.5"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;"
:base="0.01">:base="0.01"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;"
:base="0.1">:base="0.1"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;"
:base="0.5">:base="0.5"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="1">:base="1"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;--bg:#0d0d0d; --noise: #FFF1;" :base="0.1">:base="0.1"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #0d0d0d,#0d0d0d,#3d3d3d,#0d0d0d) ; --noise: #FFF1;" :base="0.2">:base="0.2"</w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #eee,#fff) ; --noise: #0001;" :base="0.3"><div style="padding: 1em; color: #000;">:base="0.3"</div></w-effect-noise-bg>
<w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;--bg:#0d0d0d; --noise: #FFF1;"
:base="0.1">:base="0.1"</w-effect-noise-bg>
<w-effect-noise-bg
style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #0d0d0d,#0d0d0d,#3d3d3d,#0d0d0d) ; --noise: #FFF1;"
:base="0.2">:base="0.2"</w-effect-noise-bg>
<w-effect-noise-bg
style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #eee,#fff) ; --noise: #0001;"
:base="0.3">
<div style="padding: 1em; color: #000;">:base="0.3"</div>
</w-effect-noise-bg>
</div>` }}</w-code>
<h2>呼吸灯效果</h2>
<w-effect-light><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
<w-effect-light :am="am" style="--key: brightness(150%); --time:1s;"><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
<w-effect-light>
<div style="height: 5em; width: 5em; background-color: var(--w-main);"></div>
</w-effect-light>
<w-effect-light :am="am" style="--key: brightness(150%); --time:1s;">
<div style="height: 5em; width: 5em; background-color: var(--w-main);"></div>
</w-effect-light>
<el-button @click="am = !am;">{{ am ? '暂停' : '播放' }}</el-button>
<w-code language="html">
{{ ` <w-effect-light><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
<w-effect-light :am="am" style="--key: brightness(150%); --time:1s;"><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
{{ ` <w-effect-light>
<div style="height: 5em; width: 5em; background-color: var(--w-main);"></div>
</w-effect-light>
<w-effect-light :am="am" style="--key: brightness(150%); --time:1s;">
<div style="height: 5em; width: 5em; background-color: var(--w-main);"></div>
</w-effect-light>
<el-button @click="am=!am;">\{\{ am?'暂停':'播放' \}\}</el-button>` }}
</w-code>
<h2>干扰动画效果</h2>
<w-effect-noise :am="am1" style="--time:5s;"><div style="height: 5em; width: 5em; background-color: var(--w-main); border-radius: 10em;"></div></w-effect-noise>
<w-effect-noise :am="am1" style="--time:5s;">
<div style="height: 5em; width: 5em; background-color: var(--w-main); border-radius: 10em;"></div>
</w-effect-noise>
<el-button @click="am1 = !am1;">{{ am1 ? '暂停' : '播放' }}</el-button>
<h2>加载动画效果</h2>
@ -205,7 +240,8 @@ codeRef.setCode('new code');//设置代码
<div class="w-inner-loading" style="width: 10em; height: 3em;">
内部加载动画
</div>
<div class="w-inner-loading" style="width: 10em; height: 5em; margin: 1em 0; --size:2em; --bg-color: #0001; --loading-color: red;">
<div class="w-inner-loading"
style="width: 10em; height: 5em; margin: 1em 0; --size:2em; --bg-color: #0001; --loading-color: red;">
内部加载动画
</div>
<w-code language="html">{{ ` <div class="w-loading"></div>
@ -213,13 +249,73 @@ codeRef.setCode('new code');//设置代码
<div class="w-inner-loading" style="width: 10em; height: 3em;">
内部加载动画
</div>
<div class="w-inner-loading" style="width: 10em; height: 5em; margin: 1em 0; --size:2em; --bg-color: #0001; --loading-color: red;">
<div class="w-inner-loading"
style="width: 10em; height: 5em; margin: 1em 0; --size:2em; --bg-color: #0001; --loading-color: red;">
内部加载动画
</div>` }}</w-code>
</div>` }}
</w-code>
<h2>流光边框效果</h2>
<div style="display: grid; gap: 1em; grid-template-columns: repeat(6, 10em);grid-template-rows: 10em;">
<div class="w-border-light"></div>
<div class="w-border-light" style="--border: 5px solid var(--w-error);--time:1s; border-radius: 1em;"></div>
<div class="w-border-light"
style="--border: 5px solid var(--w-error);--time:10s; --border-light-color: var(--w-error-light-5); border-radius: 1em;">
</div>
<div class="w-border-light-1"></div>
<div class="w-border-light-2"></div>
<div class="w-border-light-3"></div>
</div>
<w-code language="html">{{ ` <div class="w-border-light"></div>
<div class="w-border-light" style="--border: 5px solid var(--w-error);--time:1s; border-radius: 1em;"></div>
<div class="w-border-light"
style="--border: 5px solid var(--w-error);--time:10s; --border-light-color: var(--w-error-light-5); border-radius: 1em;">
</div>
<div class="w-border-light-1"></div>
<div class="w-border-light-2"></div>
<div class="w-border-light-3"></div>` }}
</w-code>
<h2>上下部分隐藏</h2>
<div style="display: grid; gap: 1em; grid-template-columns: repeat(6, 10em);grid-template-rows: 10em;">
<div class="w-part-hide" style="background-color: red;"></div>
<div class="w-part-hide" style="background-color: red;--top:0;--bottom:2em;"></div>
<div class="w-part-hide" style="background-color: red;--top:2em;--bottom:0em;"></div>
<div class="w-part-hide" style="background-color: red;--top:2em;--bottom:2em;"></div>
</div>
<w-code language="html">{{ ` <div class="w-part-hide" style="background-color: red;"></div>
<div class="w-part-hide" style="background-color: red;--top:0;--bottom:2em;"></div>
<div class="w-part-hide" style="background-color: red;--top:2em;--bottom:0em;"></div>
<div class="w-part-hide" style="background-color: red;--top:2em;--bottom:2em;"></div>` }}
</w-code>
<h2>印章效果</h2>
<div style="position: relative; height: 10em;">
<div class="w-seal" style="color: red;">
<div>印章效果</div>
</div>
<div class="w-seal" style="color: var(--w-main); font-size: 1.5em; top:0; left:10em; transform: rotate(45deg) scale(.6); ">
<div>PASS</div>
</div>
</div>
<w-code language="html">{{ ` <div style="position: relative; height: 10em;">
<div class="w-seal" style="color: red;">
<div>印章效果</div>
</div>
<div class="w-seal" style="color: var(--w-main); font-size: 1.5em; top:0; left:10em; transform: rotate(45deg) scale(.6); ">
<div>PASS</div>
</div>
</div>` }}
</w-code>
</el-tab-pane>
</el-tabs>
<div style="height: 20vh;"></div>
</div>

Write Preview
Loading…
Cancel
Save