27 changed files with 8284 additions and 3201 deletions
File diff suppressed because it is too large
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1 @@ |
|||
{"v":"4.8.0","meta":{"g":"LottieFiles AE 3.5.3","a":"","k":"","d":"","tc":""},"fr":29.9700012207031,"ip":0,"op":36.0000014663101,"w":500,"h":500,"nm":"Comp 1","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.886],"y":[1.074]},"o":{"x":[0.098],"y":[0.184]},"t":0,"s":[0]},{"t":28.0000011404634,"s":[361]}],"ix":10},"p":{"a":0,"k":[250,272,0],"ix":2},"a":{"a":0,"k":[3,9,0],"ix":1},"s":{"a":0,"k":[114,114,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"a":0,"k":[130,130],"ix":2},"p":{"a":0,"k":[0,0],"ix":3},"nm":"Ellipse Path 1","mn":"ADBE Vector Shape - Ellipse","hd":false},{"ty":"st","c":{"a":0,"k":[0.480536935844,0.805985813515,0.932549091414,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[3,11],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 2","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[3.75,-53.5,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[80,80,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-6.213],[6.213,0],[0,6.213],[-6.213,0]],"o":[[0,6.213],[-6.213,0],[0,-6.213],[6.213,0]],"v":[[11.25,0],[0,11.25],[-11.25,0],[0,-11.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.06274510175,0.823529422283,0.972549021244,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Layer 1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.934],"y":[1.075]},"o":{"x":[0.082],"y":[0.144]},"t":0,"s":[0]},{"t":28.0000011404634,"s":[-359]}],"ix":10},"p":{"a":0,"k":[249.75,270,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[7.456,0],[0,0],[0,7.456],[0,0],[-7.456,0],[0,0],[0,-7.456],[0,0]],"o":[[0,0],[-7.456,0],[0,0],[0,-7.456],[0,0],[7.456,0],[0,0],[0,7.456]],"v":[[0,39.75],[0,39.75],[-13.5,26.25],[-13.5,-26.25],[0,-39.75],[0,-39.75],[13.5,-26.25],[13.5,26.25]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"gf","o":{"a":0,"k":100,"ix":10},"r":1,"bm":0,"g":{"p":3,"k":{"a":0,"k":[0.318,0.78,0.294,0.98,0.605,0.502,0.551,0.943,0.892,0.224,0.808,0.906],"ix":9}},"s":{"a":0,"k":[1.25,51],"ix":5},"e":{"a":0,"k":[-1.99,-35.4],"ix":6},"t":1,"nm":"Gradient Fill 1","mn":"ADBE Vector Graphic - G-Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":36.0000014663101,"st":0,"bm":0}],"markers":[]} |
|||
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
@ -0,0 +1,115 @@ |
|||
<!-- src/components/GlobalLoading.vue --> |
|||
<template> |
|||
<div class="content-loading-overlay" v-if="isLoading"> |
|||
<div class="loading-content"> |
|||
<div ref="lottieContainer" class="animation-container"></div> |
|||
<!-- <div class="loading-text">{{ text }}</div> --> |
|||
</div> |
|||
</div> |
|||
<div v-else> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import lottie from 'lottie-web' |
|||
import { mapState } from 'vuex' |
|||
import defaultAnimation from '@/assets/loadingAni.json' // 导入JSON文件 |
|||
export default { |
|||
name: 'GlobalLoading', |
|||
data() { |
|||
return { |
|||
text: '加载中', |
|||
autoplay: true, |
|||
animationData: defaultAnimation, |
|||
animInstance: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['isLoading', 'loadingText']) |
|||
}, |
|||
mounted() { |
|||
this.$nextTick(()=>{ |
|||
this.initAnimation() |
|||
}) |
|||
}, |
|||
methods: { |
|||
initAnimation() { |
|||
console.log('1====000000'); |
|||
this.animInstance = lottie.loadAnimation({ |
|||
container: this.$refs.lottieContainer, |
|||
renderer: 'svg', |
|||
loop: true, |
|||
// autoplay: true, |
|||
animationData: this.animationData |
|||
}) |
|||
console.log(this.animInstance,'this.animInstance---'); |
|||
if (this.animInstance) { |
|||
this.animInstance.play() |
|||
} |
|||
}, |
|||
show(text = '加载中...') { |
|||
this.text = text |
|||
this.isLoading = true |
|||
if (this.animInstance) { |
|||
this.animInstance.play() |
|||
} |
|||
}, |
|||
hide() { |
|||
this.isLoading = false |
|||
if (this.animInstance) { |
|||
this.animInstance.stop() |
|||
} |
|||
}, |
|||
setAnimationData(data) { |
|||
this.animationData = data |
|||
this.initAnimation() |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
if (this.animInstance) { |
|||
this.animInstance.destroy() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
|
|||
.global-loading { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0, 0, 0, 0.5); |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 9999; |
|||
} |
|||
/* 关键样式 */ |
|||
.content-loading-overlay { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(255, 255, 255, 0.8); |
|||
z-index: 1000; /* 确保高于内容 */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.loading-content { |
|||
text-align: center; |
|||
} |
|||
|
|||
.animation-container { |
|||
width: 160px; |
|||
height: 160px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,98 @@ |
|||
<template> |
|||
<div class="content-loading-overlay" v-if="isLoading"> |
|||
<div class="loading-content"> |
|||
<div ref="animationContainer" class="animation-container"></div> |
|||
</div> |
|||
</div> |
|||
<div v-else> |
|||
<slot></slot> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import lottie from 'lottie-web' |
|||
import { mapState } from 'vuex' |
|||
import defaultAnimation from '@/assets/loadingAni.json' // 导入JSON文件 |
|||
|
|||
export default { |
|||
name: 'Loading', |
|||
data() { |
|||
return { |
|||
anim: null |
|||
} |
|||
}, |
|||
computed: { |
|||
...mapState(['isLoading', 'loadingText']) |
|||
}, |
|||
watch: { |
|||
isLoading(newVal) { |
|||
if (newVal) { |
|||
this.$nextTick(()=>{ |
|||
this.playAnimation() |
|||
}) |
|||
} else { |
|||
this.stopAnimation() |
|||
} |
|||
} |
|||
}, |
|||
mounted() { |
|||
if (this.isLoading) { |
|||
this.playAnimation() |
|||
} |
|||
}, |
|||
beforeDestroy() { |
|||
this.stopAnimation() |
|||
}, |
|||
methods: { |
|||
playAnimation() { |
|||
this.anim = lottie.loadAnimation({ |
|||
container: this.$refs.animationContainer, |
|||
renderer: 'svg', |
|||
loop: true, |
|||
autoplay: true, |
|||
animationData: defaultAnimation // 你的JSON动画路径 |
|||
}) |
|||
if (this.anim) { |
|||
this.anim.play() |
|||
} |
|||
}, |
|||
stopAnimation() { |
|||
if (this.anim) { |
|||
this.anim.stop() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.content-loading-overlay { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background: rgba(255, 255, 255, 0.8); |
|||
z-index: 1000; |
|||
/* 确保高于内容 */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.loading-content { |
|||
text-align: center; |
|||
} |
|||
|
|||
.animation-container { |
|||
width: 180px; |
|||
height: 180px; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.loading-text { |
|||
margin-top: 20px; |
|||
font-size: 16px; |
|||
color: #333; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,104 @@ |
|||
<template> |
|||
<el-tooltip |
|||
v-bind="mergedProps" |
|||
:disabled="disabled" |
|||
:visible="controlledVisible" |
|||
@show="handleShow" |
|||
@hide="handleHide" |
|||
> |
|||
<slot></slot> |
|||
|
|||
<!-- 用于自定义提示内容 --> |
|||
<template v-if="$slots.content" #content> |
|||
<slot name="content"></slot> |
|||
</template> |
|||
</el-tooltip> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'EnhancedTooltip', |
|||
props: { |
|||
content: String, |
|||
placement: {//位置 |
|||
type: String, |
|||
default: 'top' |
|||
}, |
|||
effect: {//主题颜色 |
|||
type: String, |
|||
default: 'dark' |
|||
}, |
|||
disabled: Boolean, |
|||
// 控制模式，如果为true则需要手动控制显示/隐藏 |
|||
manual: Boolean, |
|||
// 延迟显示/隐藏（毫秒） |
|||
openDelay: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
closeDelay: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 是否在点击后隐藏（适用于点击触发） |
|||
hideAfterClick: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
controlledVisible: false |
|||
} |
|||
}, |
|||
computed: { |
|||
mergedProps() { |
|||
return { |
|||
effect: this.effect, |
|||
placement: this.placement, |
|||
content: this.content, |
|||
openDelay: this.openDelay, |
|||
closeDelay: this.closeDelay, |
|||
hideAfterClick: this.hideAfterClick, |
|||
...this.$attrs |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
handleShow() { |
|||
if (this.manual) { |
|||
this.controlledVisible = true |
|||
} |
|||
this.$emit('show') |
|||
}, |
|||
handleHide() { |
|||
if (this.manual) { |
|||
this.controlledVisible = false |
|||
} |
|||
this.$emit('hide') |
|||
}, |
|||
// 手动显示方法 |
|||
show() { |
|||
if (this.manual && !this.disabled) { |
|||
this.controlledVisible = true |
|||
} |
|||
}, |
|||
// 手动隐藏方法 |
|||
hide() { |
|||
if (this.manual) { |
|||
this.controlledVisible = false |
|||
} |
|||
}, |
|||
// 切换显示/隐藏状态 |
|||
toggle() { |
|||
if (this.manual && !this.disabled) { |
|||
this.controlledVisible = !this.controlledVisible |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 可以添加一些自定义样式 */ |
|||
</style> |
|||
@ -0,0 +1,161 @@ |
|||
<template> |
|||
<button |
|||
class="hover-button" |
|||
:class="{ 'hover-effect': hoverEffect }" |
|||
@mouseenter="isHovered = true" |
|||
@mouseleave="isHovered = false" |
|||
@click="$emit('click')" |
|||
> |
|||
<!-- 图片/图标部分 --> |
|||
<div class="button-icon"> |
|||
<slot name="icon"> |
|||
<img |
|||
v-if="defaultIcon || hoverIcon" |
|||
:src="isHovered && hoverIcon ? hoverIcon : defaultIcon" |
|||
:alt="iconAlt" |
|||
/> |
|||
<span v-else class="default-icon-placeholder"></span> |
|||
</slot> |
|||
</div> |
|||
|
|||
<!-- 文字部分 --> |
|||
<span |
|||
class="button-text" |
|||
:style="{ |
|||
color: isHovered && hoverTextColor ? hoverTextColor : defaultTextColor |
|||
}" |
|||
> |
|||
<slot>{{ buttonText }}</slot> |
|||
</span> |
|||
</button> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HoverButton', |
|||
props: { |
|||
// 按钮文字 |
|||
buttonText: { |
|||
type: String, |
|||
default: '按钮' |
|||
}, |
|||
// 默认图标 |
|||
defaultIcon: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 悬停图标 |
|||
hoverIcon: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
// 图标alt文本 |
|||
iconAlt: { |
|||
type: String, |
|||
default: '按钮图标' |
|||
}, |
|||
// 默认文字颜色 |
|||
defaultTextColor: { |
|||
type: String, |
|||
default: '#333333' |
|||
}, |
|||
// 悬停文字颜色 |
|||
hoverTextColor: { |
|||
type: String, |
|||
default: '#007bff' |
|||
}, |
|||
// 是否启用悬停效果 |
|||
hoverEffect: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 按钮类型 (primary, danger, success等) |
|||
type: { |
|||
type: String, |
|||
default: 'default', |
|||
validator: value => ['default', 'primary', 'danger', 'success', 'warning'].includes(value) |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isHovered: false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.hover-button { |
|||
font-family: Microsoft YaHei UI; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 8px 16px; |
|||
border: 1px solid #ddd; |
|||
border-radius: 4px; |
|||
background-color: white; |
|||
cursor: pointer; |
|||
transition: all 0.3s ease; |
|||
font-size: 14px; |
|||
outline: none; |
|||
background: #F2F3F5; |
|||
border: 1px solid #BABDC2; |
|||
} |
|||
|
|||
.hover-button.hover-effect:hover { |
|||
background: #F2F7FF; |
|||
border-color: #006AFF; |
|||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* 按钮类型样式 */ |
|||
.hover-button.primary { |
|||
background-color: #007bff; |
|||
border-color: #007bff; |
|||
color: white; |
|||
} |
|||
|
|||
.hover-button.danger { |
|||
background-color: #dc3545; |
|||
border-color: #dc3545; |
|||
color: white; |
|||
} |
|||
|
|||
.hover-button.success { |
|||
background-color: #28a745; |
|||
border-color: #28a745; |
|||
color: white; |
|||
} |
|||
|
|||
.hover-button.warning { |
|||
background-color: #ffc107; |
|||
border-color: #ffc107; |
|||
color: #212529; |
|||
} |
|||
|
|||
/* 图标样式 */ |
|||
.button-icon { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.button-icon img { |
|||
width: 20px; |
|||
height: 20px; |
|||
transition: opacity 0.3s ease; |
|||
} |
|||
|
|||
.default-icon-placeholder { |
|||
display: inline-block; |
|||
width: 20px; |
|||
height: 20px; |
|||
background-color: #ddd; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
/* 文字样式 */ |
|||
.button-text { |
|||
transition: color 0.3s ease; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,126 @@ |
|||
<template> |
|||
<div |
|||
class="svg-icon-wrapper" |
|||
:style="{ width: size + 'px', height: size + 'px' }" |
|||
@click="handleClick" |
|||
@mouseenter="isHovered = true" |
|||
@mouseleave="isHovered = false" |
|||
> |
|||
<div |
|||
class="svg-icon" |
|||
v-html="svgContent" |
|||
:style="{ |
|||
'--icon-color': isHovered ? hoverColor : color, |
|||
'--icon-hover-color': hoverColor |
|||
}" |
|||
></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'SvgIcon', |
|||
props: { |
|||
// SVG文件路径（必须） |
|||
path: { |
|||
type: String, |
|||
required: true, |
|||
validator: value => value.endsWith('.svg') |
|||
}, |
|||
// 图标大小（像素） |
|||
size: { |
|||
type: Number, |
|||
default: 24 |
|||
}, |
|||
// 默认颜色 |
|||
color: { |
|||
type: String, |
|||
default: '#333333' |
|||
}, |
|||
// 悬停颜色 |
|||
hoverColor: { |
|||
type: String, |
|||
default: '#409EFF' |
|||
}, |
|||
// 禁用状态 |
|||
disabled: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
svgContent: '', |
|||
isHovered: false |
|||
} |
|||
}, |
|||
watch: { |
|||
path: { |
|||
immediate: true, |
|||
handler: 'loadSvg' |
|||
} |
|||
}, |
|||
methods: { |
|||
async loadSvg() { |
|||
try { |
|||
// 使用动态import加载SVG文件 |
|||
const response = await fetch(this.path) |
|||
if (!response.ok) throw new Error('SVG加载失败') |
|||
this.svgContent = await response.text() |
|||
|
|||
// 如果SVG中有fill属性，替换为currentColor以便CSS控制 |
|||
this.svgContent = this.svgContent.replace(/fill="[^"]*"/g, 'fill="currentColor"') |
|||
} catch (error) { |
|||
console.error('加载SVG图标失败:', error) |
|||
this.svgContent = '' |
|||
} |
|||
}, |
|||
handleClick(event) { |
|||
if (!this.disabled) { |
|||
this.$emit('click', event) |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.svg-icon-wrapper { |
|||
display: inline-flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
} |
|||
|
|||
.svg-icon-wrapper:hover { |
|||
opacity: 0.8; |
|||
} |
|||
|
|||
.svg-icon { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
color: var(--icon-color); |
|||
transition: color 0.3s; |
|||
} |
|||
|
|||
.svg-icon:hover { |
|||
color: var(--icon-hover-color); |
|||
} |
|||
|
|||
.svg-icon-wrapper[disabled] { |
|||
cursor: not-allowed; |
|||
opacity: 0.5; |
|||
} |
|||
|
|||
.svg-icon >>> path { |
|||
fill: currentColor; |
|||
} |
|||
|
|||
.svg-icon >>> circle { |
|||
fill: currentColor; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,29 @@ |
|||
import Vue from 'vue' |
|||
import GlobalLoading from '@/components/GlobalLoading.vue' |
|||
|
|||
const LoadingConstructor = Vue.extend(GlobalLoading) |
|||
let loadingInstance = null |
|||
|
|||
export default { |
|||
show(text) { |
|||
if (!loadingInstance) { |
|||
loadingInstance = new LoadingConstructor({ |
|||
el: document.createElement('div') |
|||
}) |
|||
document.body.appendChild(loadingInstance.$el) |
|||
} |
|||
loadingInstance.show(text) |
|||
}, |
|||
|
|||
hide() { |
|||
if (loadingInstance) { |
|||
loadingInstance.hide() |
|||
} |
|||
}, |
|||
|
|||
setAnimation(animationData) { |
|||
if (loadingInstance) { |
|||
loadingInstance.setAnimationData(animationData) |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,747 @@ |
|||
html { |
|||
scroll-behavior: smooth; /* 使整个页面的滚动平滑 */ |
|||
} |
|||
body { |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 14px; |
|||
margin: 0; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
|
|||
p { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
} |
|||
.point{ |
|||
cursor: pointer; |
|||
} |
|||
.mt16{ |
|||
margin-top: 16px; |
|||
} |
|||
.mt32{ |
|||
margin-top: 32px; |
|||
} |
|||
.mb32{ |
|||
margin-bottom: 32px; |
|||
} |
|||
.hide{ |
|||
display: none !important; |
|||
} |
|||
.column{ |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
.mb24{ |
|||
margin-bottom: 24px; |
|||
} |
|||
.mt12{ |
|||
margin-top: 12px; |
|||
} |
|||
.mt10{ |
|||
margin-top: 10px; |
|||
} |
|||
.ceshi{ |
|||
transition: all .5s; |
|||
box-sizing: border-box; |
|||
/* main/main_stardard */ |
|||
border: 1px solid #006AFF !important; |
|||
/* 蓝色阴影_常规 */ |
|||
box-shadow: 0px 4px 16px 0px rgba(17, 55, 143, 0.12); |
|||
} |
|||
::v-deep .el-radio__original { |
|||
display: none !important; |
|||
} |
|||
|
|||
.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) |
|||
.el-radio__inner { |
|||
box-shadow: none !important; |
|||
} |
|||
.el-tabs__item.is-active { |
|||
letter-spacing: 0.08em; |
|||
/* main/main_stardard */ |
|||
color: #006AFF; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.el-tabs__nav-wrap::after { |
|||
content: none; |
|||
} |
|||
|
|||
.addStore { |
|||
margin-top: 12px; |
|||
border-radius: 4px; |
|||
opacity: 1; |
|||
/* text/text_white_2 */ |
|||
border: 1px dashed #BABDC2; |
|||
padding: 15px 20px; |
|||
color: #626573; |
|||
justify-content: center; |
|||
img{ |
|||
margin-right: 12px; |
|||
} |
|||
} |
|||
@keyframes fadeInOut { |
|||
0% { |
|||
opacity: 0; |
|||
} |
|||
50% { |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
opacity: 0; |
|||
} |
|||
} |
|||
|
|||
.ellipsis{ |
|||
|
|||
} |
|||
|
|||
.el-container { |
|||
height: 100%; |
|||
|
|||
.el-main { |
|||
padding: 0; |
|||
} |
|||
} |
|||
|
|||
.min-width { |
|||
min-width: 1200px; |
|||
} |
|||
|
|||
// 公共类名 |
|||
.mb24 { |
|||
margin-bottom: 24px; |
|||
} |
|||
|
|||
// 多数左右布局。中间带竖线 |
|||
.min-flex { |
|||
min-width: 1100px; |
|||
max-width: 1556px; |
|||
width: 84.75%; |
|||
margin: 0 auto; |
|||
} |
|||
.min-flex-right { |
|||
min-width: 1033px; |
|||
max-width: 1556px; |
|||
width: 84.75%; |
|||
margin: 0 auto; |
|||
.flex-common{ |
|||
.flex-left, |
|||
.flex-right { |
|||
min-width: 440px; |
|||
max-width: 590px; |
|||
flex: 1; |
|||
} |
|||
.flex-line { |
|||
margin: 0 33px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.desc { |
|||
font-size: 12px; |
|||
font-weight: normal; |
|||
line-height: 13px; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz"auto; |
|||
/* text/text_4 */ |
|||
color: #8A9099; |
|||
} |
|||
.borderNone{ |
|||
border: none !important; |
|||
} |
|||
.flex-common { |
|||
padding: 32px 36px; |
|||
background-color: #fff; |
|||
|
|||
h3 { |
|||
text-align: left; |
|||
margin: 0 0 32px 0; |
|||
span{ |
|||
margin-left: 12px; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
letter-spacing: 0.08em; |
|||
color: #626573; |
|||
} |
|||
} |
|||
|
|||
.flex-wrap { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.flex-line { |
|||
border-left: 1px solid #DFE2E6; |
|||
margin: 0 54px; |
|||
} |
|||
|
|||
.flex-left, |
|||
.flex-right { |
|||
min-width: 460px; |
|||
max-width: 590px; |
|||
flex: 1; |
|||
} |
|||
.flex-left-desc{ |
|||
/* body/body 2_regular */ |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 14px; |
|||
font-weight: normal; |
|||
line-height: normal; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz" auto; |
|||
/* text/text_1 */ |
|||
color: #1E2226; |
|||
text-align: left; |
|||
// margin: ; |
|||
} |
|||
|
|||
} |
|||
|
|||
// end--------- |
|||
//radio 发生change事件时，会有报错 |
|||
::v-deep .el-radio__original { |
|||
display: none !important; |
|||
} |
|||
|
|||
::v-deep.el-radio:focus:not(.is-focus):not(:active):not(.is-disabled) { |
|||
.el-radio__inner { |
|||
box-shadow: none !important; |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-popover { |
|||
display: none !important; |
|||
} |
|||
|
|||
::v-deep.el-popover:focus:not(.is-focus):not(:active):not(.is-disabled) {} |
|||
|
|||
// .el-radio__inner { |
|||
// box-shadow: none !important; |
|||
// } |
|||
/* button==== start */ |
|||
|
|||
.el-button { |
|||
width: 144px; |
|||
height: 46px; |
|||
font-family: Microsoft YaHei UI; |
|||
font-size: 14px; |
|||
letter-spacing: 0.08em; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
transition: all .3s; |
|||
span{ |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
img{ |
|||
margin-right: 6px; |
|||
} |
|||
} |
|||
|
|||
.el-button--normal { |
|||
color: #626573; |
|||
} |
|||
|
|||
.el-button--mild { |
|||
background: #FFFFFF; |
|||
border: 1px solid #006AFF; |
|||
color: #006AFF; |
|||
} |
|||
|
|||
.el-button--primary, |
|||
.el-button--success, |
|||
.el-button--info, |
|||
.el-button--warning, |
|||
.el-button--danger { |
|||
color: #fff !important; |
|||
} |
|||
|
|||
.el-button--medium { |
|||
//中等按钮 |
|||
width: 97px; |
|||
height: 33px; |
|||
font-size: 14px; |
|||
line-height: 14px; |
|||
|
|||
span { |
|||
height: 14px; |
|||
} |
|||
|
|||
} |
|||
|
|||
.el-button--small { |
|||
//小的按钮 |
|||
width: 80px; |
|||
height: 32px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.el-button--mini { |
|||
//迷你按钮 |
|||
width: 80px; |
|||
height: 28px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.el-button--reverseMild { |
|||
background: #E8F0FE; |
|||
color: #006AFF; |
|||
border: none; |
|||
} |
|||
|
|||
.el-button--reverseMild:hover { |
|||
border-color: #F2F7FF !important; |
|||
background-color: #F2F7FF !important; |
|||
} |
|||
|
|||
.el-button--reverseMild.is-disabled, |
|||
.el-button--reverseMild.is-disabled:hover { |
|||
color: #006AFF; |
|||
border-color: #E8F0FE; |
|||
background-color: #E8F0FE; |
|||
opacity: .7; |
|||
} |
|||
|
|||
.el-button--mild.is-disabled, |
|||
.el-button--mild.is-disabled:hover { |
|||
color: #006AFF; |
|||
opacity: .7; |
|||
border-color: #006AFF; |
|||
} |
|||
|
|||
/* button==== end */ |
|||
|
|||
// radio ---start |
|||
.el-radio__input.is-checked .el-radio__inner::after { |
|||
content: ''; |
|||
/* 清空默认的伪元素内容 */ |
|||
width: 14px; |
|||
height: 14px; |
|||
background-image: url('../../assets/radio_checked.svg'); |
|||
/* 使用你的自定义图标 */ |
|||
background-size: contain; |
|||
background-repeat: no-repeat; |
|||
} |
|||
|
|||
.el-radio__label { |
|||
font-weight: normal; |
|||
} |
|||
|
|||
// radio ---end |
|||
|
|||
// input ---start |
|||
.el-input { |
|||
border-radius: 2px; |
|||
border: 1px solid transparent; |
|||
} |
|||
|
|||
.el-input:focus-within { |
|||
transition: all .5s; |
|||
outline: 3px solid #D8E9FA; |
|||
border-color: #006AFF !important; |
|||
} |
|||
|
|||
.is-error .hoverclass { |
|||
border-color: transparent !important; |
|||
} |
|||
|
|||
.is-error .el-input:focus-within { |
|||
outline: none !important; |
|||
border-color: transparent !important; |
|||
} |
|||
|
|||
.el-input__inner { |
|||
height: 100%; |
|||
padding: 10px 12px; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.el-input__prefix { |
|||
display: flex; |
|||
align-items: center; |
|||
left: 12px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.el-input__suffix { |
|||
display: flex; |
|||
align-items: center; |
|||
right: 12px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.el-input__inner:focus { |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.el-input__inner:hover { |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.el-input__inner::placeholder { |
|||
color: #BABDC2; |
|||
} |
|||
|
|||
.el-input--prefix .el-input__inner { |
|||
padding-left: 36px; |
|||
} |
|||
|
|||
.el-input--suffix .el-input__inner { |
|||
padding-right: 36px; |
|||
} |
|||
|
|||
.el-input.is-disabled .el-input__inner { |
|||
background: #F6F7FA !important; |
|||
border-color: #DFE2E6 !important; |
|||
color: #BABDC2 !important; |
|||
} |
|||
|
|||
.hoverclass { |
|||
border-color: #006AFF !important; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
// input ---end |
|||
|
|||
|
|||
// select start |
|||
.el-select { |
|||
width: 100%; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.el-select:hover .el-input__inner { |
|||
transition: all .5s; |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.el-select .el-input.is-focus .el-input__inner { |
|||
border-color: transparent; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.el-select .el-input__inner:focus { |
|||
border-color: transparent; |
|||
} |
|||
|
|||
.el-select>.el-input { |
|||
height: 100%; |
|||
} |
|||
|
|||
// select end |
|||
|
|||
// textarea start |
|||
.el-textarea__inner { |
|||
padding: 10px 12px; |
|||
border-radius: 2px; |
|||
height: 100%; |
|||
} |
|||
|
|||
.el-textarea__inner:hover { |
|||
border-color: #006AFF; |
|||
} |
|||
|
|||
.el-textarea__inner:focus { |
|||
transition: all .5s; |
|||
outline: 3px solid #D8E9FA; |
|||
} |
|||
|
|||
// textarea end |
|||
|
|||
|
|||
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before, |
|||
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before { |
|||
content: ''; |
|||
} |
|||
|
|||
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label::after, |
|||
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label::after { |
|||
content: url(../../assets/require.svg); |
|||
display: inline-block; |
|||
// background-image: url(../../assets/require.svg); |
|||
color: #ff4d4f; |
|||
margin-right: 4px; |
|||
margin-left: 4px; |
|||
} |
|||
|
|||
.form-item1 { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
label { |
|||
min-width: 54px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
label.el-radio { |
|||
margin-right: 24px; |
|||
|
|||
.el-radio__label { |
|||
padding-left: 8px; |
|||
} |
|||
} |
|||
|
|||
label.el-radio:last-child { |
|||
margin-right: 0px; |
|||
} |
|||
|
|||
.form-item-top { |
|||
height: 18px; |
|||
display: flex; |
|||
align-items: center; |
|||
text-align: left; |
|||
} |
|||
|
|||
.form-item-bottom { |
|||
flex: 1; |
|||
} |
|||
|
|||
.rightdesc { |
|||
flex: 1; |
|||
text-align: right; |
|||
font-size: 12px; |
|||
line-height: 13px; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz"auto; |
|||
color: #8A9099; |
|||
} |
|||
|
|||
.form-item { |
|||
margin-bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.el-form-item__content { |
|||
// width: 100%; |
|||
flex: 1; |
|||
position: relative; |
|||
|
|||
.desc_right { |
|||
position: absolute; |
|||
right: 0; |
|||
top: -40px; |
|||
margin: 0; |
|||
font-size: 12px; |
|||
line-height: 40px; |
|||
letter-spacing: 0.08em; |
|||
font-variation-settings: "opsz"auto; |
|||
color: #8A9099; |
|||
} |
|||
} |
|||
|
|||
.w510 { |
|||
width: 510px; |
|||
} |
|||
|
|||
.w388 { |
|||
width: 388px; |
|||
} |
|||
|
|||
.form-item { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.column { |
|||
display: flex; |
|||
flex-direction: column !important; |
|||
align-items: self-start; |
|||
|
|||
.form-item-top { |
|||
width: 100%; |
|||
margin-bottom: 12px; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.form-item-bottom { |
|||
width: 100%; |
|||
} |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
} |
|||
|
|||
.form-top-icon { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
width: 16px; |
|||
height: 16px; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
span { |
|||
color: #1E2226; |
|||
} |
|||
} |
|||
|
|||
|
|||
// table start |
|||
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell { |
|||
background-color: #F6F7FA; |
|||
} |
|||
|
|||
.el-table td.el-table__cell { |
|||
border-bottom: 1px solid#EAECF0; |
|||
} |
|||
|
|||
.el-table--fit { |
|||
border: 1px solid#EAECF0; |
|||
} |
|||
|
|||
.el-button--text { |
|||
padding: 0; |
|||
width: auto !important; |
|||
height: auto !important; |
|||
} |
|||
|
|||
.el-table th.el-table__cell { |
|||
background: #F6F7FA; |
|||
padding: 10px 0; |
|||
} |
|||
|
|||
.el-table th.el-table__cell>.cell { |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
} |
|||
|
|||
.el-table .el-table__cell { |
|||
padding: 18px 0; |
|||
} |
|||
|
|||
.el-table .cell { |
|||
padding-left: 16px; |
|||
padding-right: 16px; |
|||
} |
|||
|
|||
.el-table .el-form-item { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
// table end |
|||
.el-pagination { |
|||
margin-top: 16px; |
|||
display: flex; |
|||
justify-content: flex-end; |
|||
} |
|||
|
|||
// dialog--start |
|||
.el-dialog { |
|||
min-height: 214px; |
|||
max-height: 550px; |
|||
border-radius: 4px; |
|||
background: #FFFFFF; |
|||
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16); |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.el-dialog__header { |
|||
font-size: 20px; |
|||
font-weight: bold; |
|||
line-height: 26px; |
|||
text-align: left; |
|||
letter-spacing: 0.08em; |
|||
color: #1F2026; |
|||
padding: 32px 32px 12px; |
|||
} |
|||
|
|||
.el-dialog__body { |
|||
padding: 0 32px 32px; |
|||
flex: 1; |
|||
} |
|||
} |
|||
|
|||
.el-dialog__footer { |
|||
display: flex; |
|||
justify-content: center; |
|||
padding: 0 32px 32px !important; |
|||
|
|||
.dialog-footer-center { |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
button { |
|||
width: 247px; |
|||
height: 44px; |
|||
} |
|||
} |
|||
.dialog-footer-normal { |
|||
width: 100%; |
|||
justify-content: flex-end !important; |
|||
button { |
|||
width: 96px; |
|||
height: 38px; |
|||
} |
|||
} |
|||
} |
|||
.center { |
|||
.el-dialog .el-dialog__header{ |
|||
text-align: center; |
|||
} |
|||
} |
|||
// dialog--end |
|||
|
|||
// switch --start |
|||
// .el-switch__core{ |
|||
// background-color: #00C261; |
|||
// } |
|||
// .el-switch.is-checked .el-switch__core{ |
|||
// background-color: #BABDC2; |
|||
// } |
|||
// switch --end |
|||
|
|||
// 弹出气泡框 |
|||
.el-popover { |
|||
padding: 32px; |
|||
} |
|||
|
|||
// 日历区间背景颜色 |
|||
.el-date-table td.in-range div { |
|||
background: #F2F7FF; |
|||
} |
|||
|
|||
.flex { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
// 自定义下拉内容框 |
|||
.noraml-jump { |
|||
padding: 24px 10px; |
|||
border-bottom: 1px solid #EAECF0; |
|||
} |
|||
|
|||
.flex-between { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
font-family: Microsoft YaHei UI; |
|||
|
|||
.left b { |
|||
display: block; |
|||
text-align: left; |
|||
margin-bottom: 12px; |
|||
} |
|||
|
|||
.left p { |
|||
letter-spacing: 0.08em; |
|||
text-align: left; |
|||
line-height: 13px; |
|||
font-size: 12px; |
|||
color: #8A9099; |
|||
} |
|||
|
|||
.left .one { |
|||
line-height: 18px; |
|||
font-size: 14px; |
|||
color: #1E2226; |
|||
margin-bottom: 4px; |
|||
} |
|||
} |
|||
Loading…
Reference in new issue