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

update 单位换算

Browse Source
master
管理员 10 months ago
parent b264e46bdb
commit a4dd16682c
4 changed files with 121 additions and 57 deletions
Show Stats Download Patch File Download Diff File

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

@ -189,13 +189,15 @@
.w-border-light-3 {
position: relative;
border: none !important;
animation-play-state: running;
animation-play-state: inherit;
--border: .2em solid var(--w-main-dark-3);
--border-light-color: var(--w-main-light-3);
--border-light-color: #FFF9;
--time: 5s;
&::before {
content: '';
pointer-events: none;
@ -287,7 +289,41 @@
border-radius: 1em;
}
@property --data-num {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
.w-breathing {
--filter: brightness(110%);
--transform: scale(1.1);
--time: 1.3s;
--data-num: 0;
--data-num-to: 1;
animation: w-am-breathing var(--time) infinite linear;
animation-play-state: inherit;
}
@keyframes w-am-breathing {
0% {
filter: none;
transform: none;
}
45% {
filter: var(--filter);
transform: var(--transform);
--data-num: var(--data-num-to);
}
90% {
filter: none;
transform: none;
}
}

5
bi-ui/src/components/global/WEffectBreathing.vue
Unescape Escape View File

@ -0,0 +1,5 @@
<template>
<div class="w-breathing">
<slot></slot>
</div>
</template>

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

@ -1,50 +1,10 @@
<template>
<div class="WEffectLight" :class="{ 'am': props.am }">
<div class="w-breathing">
<slot></slot>
</div>
</template>
<script setup>
import { IdGenerator } from "@/util";
//唯一标识
const uid = IdGenerator.next();
const props = defineProps({
am: {
type: Boolean,
default: true
}
})
</script>
<style lang="scss" scoped>
@layer {
.WEffectLight {
--key: brightness(110%);
--time: 1.7s;
animation: am-WEffectLight var(--time) infinite linear;
animation-play-state: paused;
&.am {
animation-play-state: running;
}
}
@keyframes am-WEffectLight {
0% {
// filter: brightness(100%);
}
40% {
filter: var(--key);
}
80% {
// filter: brightness(100%);
}
}
<style scoped>
.w-breathing {
--transform: none;
}
</style>

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

@ -211,27 +211,90 @@ codeRef.setCode('new code');//设置代码
</div>` }}</w-code>
<h2>呼吸灯效果</h2>
<div
style="display: grid; grid-template-columns: repeat(10, 5em); grid-template-rows: 5em; gap: 1em; margin-bottom: 1em;">
<w-effect-light>
<div style="height: 5em; width: 5em; background-color: var(--w-main);"></div>
<div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
</w-effect-light>
<w-effect-light style="--time:3s; --filter: brightness(150%);">
<div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
</w-effect-light>
<w-effect-light style="--time:5s; --filter: hue-rotate(360deg); background-color: var(--w-main);">
</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-breathing>
<div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
</w-effect-breathing>
<div class="w-breathing" style="background-color: var(--w-main);"></div>
<div class="w-breathing"
style="background-color: var(--w-main); --time:2s; --filter: brightness(70%) opacity(0); --transform: skew(-5deg) scale(1.2);">
</div>
<div class="w-breathing w-flex"
style="background-color: var(--w-main); --time:3s;--filter:none;--transform:none; --data-num: .3; --data-num-to: 1; box-shadow: 0 0 calc(2em * var(--data-num)) #000;">
<div style="height: 3em; width: calc(3em * var(--data-num)); background-color: #FFF3; border-radius: 100%;">
</div>
</div>
</div>
<w-effect-light :style="{ 'animation-play-state': am ? 'running' : 'paused' }"
style="--filter: brightness(150%); --time:2s; ">
<div
style="height: 5em; width: 5em; background-color: var(--w-main); border-radius: 1em; margin-bottom: .5em;">
</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>
{{ `
<div
style="display: grid; grid-template-columns: repeat(10, 5em); grid-template-rows: 5em; gap: 1em; margin-bottom: 1em;">
<w-effect-light>
<div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
</w-effect-light>
<w-effect-light style="--time:3s; --filter: brightness(150%);">
<div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
</w-effect-light>
<w-effect-light style="--time:5s; --filter: hue-rotate(360deg); background-color: var(--w-main);">
</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-breathing>
<div style="height: 100%; width: 100%; background-color: var(--w-main);"></div>
</w-effect-breathing>
<div class="w-breathing" style="background-color: var(--w-main);"></div>
<div class="w-breathing"
style="background-color: var(--w-main); --time:2s; --filter: brightness(70%) opacity(0); --transform: skew(-5deg) scale(1.2);">
</div>
<div class="w-breathing w-flex"
style="background-color: var(--w-main); --time:3s;--filter:none;--transform:none; --data-num: .3; --data-num-to: 1; box-shadow: 0 0 calc(2em * var(--data-num)) #000;">
<div style="height: 3em; width: calc(3em * var(--data-num)); background-color: #FFF3; border-radius: 100%;">
</div>
</div>
</div>
<w-effect-light :style="{ 'animation-play-state': am ? 'running' : 'paused' }"
style="--filter: brightness(150%); --time:2s; ">
<div
style="height: 5em; width: 5em; background-color: var(--w-main); border-radius: 1em; margin-bottom: .5em;">
</div>
</w-effect-light>
<el-button @click="am=!am;">\{\{ am?'暂停':'播放' \}\}</el-button>` }}
<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>
<el-button @click="am1 = !am1;">{{ am1 ? '暂停' : '播放' }}</el-button>
<h2>加载动画效果</h2>
@ -351,7 +414,7 @@ codeRef.setCode('new code');//设置代码
<div>10rem = <b v-text="unit.rem2px(10)"></b>px</div>
<div>10em = <b v-if="emRef1" v-text="unit.em2px(emRef1,'10em')"></b>px</div>
</div>
<script>
<script>
import { ref,useTemplateRef } from 'vue';
const emRef1 = ref(undefined);
const emRef2 = useTemplateRef("emRef2");

Write Preview
Loading…
Cancel
Save