zq
2 months ago
12 changed files with 1355 additions and 59 deletions
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: 49 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,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,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