mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 21:22:33 +08:00
'admin-21.09.10:新增功能，具体查看CHANGELOG.md'
This commit is contained in:
lyt
parent
f6ff10c4a9
commit
4f9ddc6c26
13
CHANGELOG.md
13
CHANGELOG.md
@ -2,6 +2,19 @@
|
||||
|
||||
🎉🎉🔥 `vue-next-admin` 基于 vue3.x 、Typescript、vite、Element plus 等，适配手机、平板、pc 的后台开源免费模板库（vue2.x 请切换 vue-prev-admin 分支）
|
||||
|
||||
## 1.1.0
|
||||
|
||||
`2021.09.10`
|
||||
|
||||
- 🌟 更新 依赖更新最新版本
|
||||
- 🎯 优化 小屏模式下登录页二维码遮挡标题问题
|
||||
- 🎉 新增 图片验证器
|
||||
- 🎉 新增 动态复杂表单
|
||||
- 🎉 新增 工作流（未完成）
|
||||
- 🎉 新增 深色主题(伪深色，样式变动大，谨慎更新)
|
||||
|
||||
`2021.08.29`
|
||||
|
||||
## 1.0.18
|
||||
|
||||
`2021.08.29`
|
||||
|
||||
@ -110,6 +110,7 @@ cnpm run build
|
||||
- <a href="https://github.com/likaia/screen-shot" target="_blank">vue-web-screen-shot</a>
|
||||
- <a href="https://github.com/jbaysolutions/vue-grid-layout" target="_blank">vue-grid-layout</a>
|
||||
- <a href="https://github.com/antoniandre/splitpanes" target="_blank">splitpanes</a>
|
||||
- <a href="https://github.com/yimijianfang/vue-drag-verify" target="_blank">vue-drag-verify</a>
|
||||
|
||||
#### 💕 特别感谢
|
||||
|
||||
|
||||
28
package.json
28
package.json
@ -1,19 +1,19 @@
|
||||
{
|
||||
"name": "vue-next-admin",
|
||||
"version": "1.0.18",
|
||||
"version": "1.1.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.21.1",
|
||||
"axios": "^0.21.4",
|
||||
"countup.js": "^2.0.8",
|
||||
"cropperjs": "^1.5.12",
|
||||
"echarts": "^5.1.2",
|
||||
"echarts": "^5.2.0",
|
||||
"echarts-gl": "^2.0.8",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-plus": "^1.1.0-beta.7",
|
||||
"element-plus": "^1.1.0-beta.9",
|
||||
"mitt": "^3.0.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"print-js": "^1.6.0",
|
||||
@ -28,27 +28,27 @@
|
||||
"vue-router": "^4.0.11",
|
||||
"vue-web-screen-shot": "^1.2.0",
|
||||
"vuex": "^4.0.2",
|
||||
"wangeditor": "^4.7.7"
|
||||
"wangeditor": "^4.7.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/axios": "^0.14.0",
|
||||
"@types/clipboard": "^2.0.1",
|
||||
"@types/node": "^16.7.5",
|
||||
"@types/node": "^16.9.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.10.7",
|
||||
"@typescript-eslint/eslint-plugin": "^4.29.3",
|
||||
"@typescript-eslint/parser": "^4.29.3",
|
||||
"@vitejs/plugin-vue": "^1.6.0",
|
||||
"@vue/compiler-sfc": "^3.2.6",
|
||||
"@typescript-eslint/eslint-plugin": "^4.31.0",
|
||||
"@typescript-eslint/parser": "^4.31.0",
|
||||
"@vitejs/plugin-vue": "^1.6.2",
|
||||
"@vue/compiler-sfc": "^3.2.11",
|
||||
"dotenv": "^10.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^7.17.0",
|
||||
"prettier": "^2.3.2",
|
||||
"sass": "^1.38.2",
|
||||
"prettier": "^2.4.0",
|
||||
"sass": "^1.39.2",
|
||||
"sass-loader": "^12.1.0",
|
||||
"typescript": "^4.4.2",
|
||||
"vite": "^2.5.1",
|
||||
"vue-eslint-parser": "^7.10.0"
|
||||
"vite": "^2.5.6",
|
||||
"vue-eslint-parser": "^7.11.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
|
||||
@ -98,12 +98,12 @@ export default {
|
||||
display: inline-block;
|
||||
height: 350px;
|
||||
flex: 1;
|
||||
border: 1px solid #ebeef5;
|
||||
background: #fff;
|
||||
border: var(--el-border-base);
|
||||
background: var(--color-whites);
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
cursor: move;
|
||||
border-radius: 3px;
|
||||
border-radius: var(--el-border-radius-base);
|
||||
.cropper-warp-left-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -124,7 +124,7 @@ export default {
|
||||
.cropper-warp-right-value-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 100%;
|
||||
border-radius: var(--el-border-radius-circle);
|
||||
margin: auto;
|
||||
}
|
||||
.cropper-size {
|
||||
@ -135,7 +135,7 @@ export default {
|
||||
.cropper-warp-right-label {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
color: var(--el-text-color-primary);
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
296
src/components/dragVerify/dragVerify.vue
Normal file
296
src/components/dragVerify/dragVerify.vue
Normal file
@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div
|
||||
ref="dragVerify"
|
||||
class="drag_verify"
|
||||
:style="dragVerifyStyle"
|
||||
@mousemove="dragMoving"
|
||||
@mouseup="dragFinish"
|
||||
@mouseleave="dragFinish"
|
||||
@touchmove="dragMoving"
|
||||
@touchend="dragFinish"
|
||||
>
|
||||
<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle"></div>
|
||||
<div class="dv_text" :style="textStyle" ref="message">
|
||||
<slot name="textBefore" v-if="$slots.textBefore"></slot>
|
||||
{{ message }}
|
||||
<slot name="textAfter" v-if="$slots.textAfter"></slot>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="dv_handler dv_handler_bg"
|
||||
:class="{ goFirst: isOk }"
|
||||
@mousedown="dragStart"
|
||||
@touchstart="dragStart"
|
||||
ref="handler"
|
||||
:style="handlerStyle"
|
||||
>
|
||||
<i :class="handlerIcon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'dragVerify',
|
||||
props: {
|
||||
isPassing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 250,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'swiping to the right side',
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#eee',
|
||||
},
|
||||
progressBarBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
completedBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '4px',
|
||||
},
|
||||
handlerIcon: {
|
||||
type: String,
|
||||
},
|
||||
successIcon: {
|
||||
type: String,
|
||||
},
|
||||
handlerBg: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
textSize: {
|
||||
type: String,
|
||||
default: '14px',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const dragEl = this.$refs.dragVerify;
|
||||
dragEl.style.setProperty('--textColor', this.textColor);
|
||||
dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
|
||||
dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
|
||||
console.log(this.$slots);
|
||||
},
|
||||
computed: {
|
||||
handlerStyle: function () {
|
||||
return {
|
||||
width: this.height + 'px',
|
||||
height: this.height + 'px',
|
||||
background: this.handlerBg,
|
||||
};
|
||||
},
|
||||
message: function () {
|
||||
return this.isPassing ? this.successText : this.text;
|
||||
},
|
||||
dragVerifyStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.height + 'px',
|
||||
lineHeight: this.height + 'px',
|
||||
background: this.background,
|
||||
borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
progressBarStyle: function () {
|
||||
return {
|
||||
background: this.progressBarBg,
|
||||
height: this.height + 'px',
|
||||
borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
textStyle: function () {
|
||||
return {
|
||||
height: this.height + 'px',
|
||||
width: this.width + 'px',
|
||||
fontSize: this.textSize,
|
||||
};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMoving: false,
|
||||
x: 0,
|
||||
isOk: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
dragStart: function (e) {
|
||||
if (!this.isPassing) {
|
||||
this.isMoving = true;
|
||||
this.x = e.pageX || e.touches[0].pageX;
|
||||
}
|
||||
this.$emit('handlerMove');
|
||||
},
|
||||
dragMoving: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.touches[0].pageX) - this.x;
|
||||
var handler = this.$refs.handler;
|
||||
if (_x > 0 && _x <= this.width - this.height) {
|
||||
handler.style.left = _x + 'px';
|
||||
this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
|
||||
} else if (_x > this.width - this.height) {
|
||||
handler.style.left = this.width - this.height + 'px';
|
||||
this.$refs.progressBar.style.width = this.width - this.height / 2 + 'px';
|
||||
this.passVerify();
|
||||
}
|
||||
}
|
||||
},
|
||||
dragFinish: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
|
||||
if (_x < this.width - this.height) {
|
||||
this.isOk = true;
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.$refs.handler.style.left = '0';
|
||||
that.$refs.progressBar.style.width = '0';
|
||||
that.isOk = false;
|
||||
}, 500);
|
||||
this.$emit('passfail');
|
||||
} else {
|
||||
var handler = this.$refs.handler;
|
||||
handler.style.left = this.width - this.height + 'px';
|
||||
this.$refs.progressBar.style.width = this.width - this.height / 2 + 'px';
|
||||
this.passVerify();
|
||||
}
|
||||
this.isMoving = false;
|
||||
}
|
||||
},
|
||||
passVerify: function () {
|
||||
this.$emit('update:isPassing', true);
|
||||
this.isMoving = false;
|
||||
var handler = this.$refs.handler;
|
||||
handler.children[0].className = this.successIcon;
|
||||
this.$refs.progressBar.style.background = this.completedBg;
|
||||
this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
|
||||
this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
|
||||
this.$refs.message.style.color = '#fff';
|
||||
this.$emit('passcallback');
|
||||
},
|
||||
reset: function () {
|
||||
const oriData = this.$options.data();
|
||||
for (const key in oriData) {
|
||||
if (Object.prototype.hasOwnProperty.call(oriData, key)) {
|
||||
this[key] = oriData[key];
|
||||
}
|
||||
}
|
||||
var handler = this.$refs.handler;
|
||||
var message = this.$refs.message;
|
||||
handler.style.left = '0';
|
||||
this.$refs.progressBar.style.width = '0';
|
||||
handler.children[0].className = this.handlerIcon;
|
||||
message.style['-webkit-text-fill-color'] = 'transparent';
|
||||
message.style.animation = 'slidetounlock 3s infinite';
|
||||
message.style.color = this.background;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.drag_verify {
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.drag_verify .dv_handler {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
.drag_verify .dv_handler i {
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.drag_verify .dv_handler .el-icon-circle-check {
|
||||
color: #6c6;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.drag_verify .dv_progress_bar {
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
width: 0px;
|
||||
}
|
||||
.drag_verify .dv_text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
color: transparent;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, var(--textColor)),
|
||||
color-stop(0.4, var(--textColor)),
|
||||
color-stop(0.5, #fff),
|
||||
color-stop(0.6, var(--textColor)),
|
||||
color-stop(1, var(--textColor))
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
animation: slidetounlock 3s infinite;
|
||||
}
|
||||
.drag_verify .dv_text * {
|
||||
-webkit-text-fill-color: var(--textColor);
|
||||
}
|
||||
.goFirst {
|
||||
left: 0px !important;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.goFirst2 {
|
||||
width: 0px !important;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@-webkit-keyframes slidetounlock {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--width) 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slidetounlock2 {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
453
src/components/dragVerify/dragVerifyImg.vue
Normal file
453
src/components/dragVerify/dragVerifyImg.vue
Normal file
@ -0,0 +1,453 @@
|
||||
<template>
|
||||
<div class="drag-verify-container">
|
||||
<div :style="dragVerifyImgStyle">
|
||||
<img ref="checkImg" :src="imgsrc" @load="checkimgLoaded" style="width: 100%" alt="" />
|
||||
<div class="move-bar" :class="{ goFirst: isOk, goKeep: isKeep }" :style="movebarStyle" ref="moveBar" v-show="showBar"></div>
|
||||
<div class="clip-bar" :style="clipbarStyle" ref="clipBar"></div>
|
||||
<div class="refresh" v-if="showRefresh && !isPassing">
|
||||
<i :class="refreshIcon" @click="refreshimg"></i>
|
||||
</div>
|
||||
<div class="tips success" v-if="showTips && isPassing">{{ successTip }}</div>
|
||||
<div class="tips danger" v-if="showTips && !isPassing && showErrorTip">{{ failTip }}</div>
|
||||
</div>
|
||||
<div
|
||||
ref="dragVerify"
|
||||
class="drag_verify"
|
||||
:style="dragVerifyStyle"
|
||||
@mousemove="dragMoving"
|
||||
@mouseup="dragFinish"
|
||||
@mouseleave="dragFinish"
|
||||
@touchmove="dragMoving"
|
||||
@touchend="dragFinish"
|
||||
>
|
||||
<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle">
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
<div class="dv_text" :style="textStyle" ref="message">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="dv_handler dv_handler_bg"
|
||||
:class="{ goFirst: isOk }"
|
||||
@mousedown="dragStart"
|
||||
@touchstart="dragStart"
|
||||
ref="handler"
|
||||
:style="handlerStyle"
|
||||
>
|
||||
<i :class="handlerIcon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'dragVerify',
|
||||
props: {
|
||||
isPassing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 250,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'swiping to the right side',
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#eee',
|
||||
},
|
||||
progressBarBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
completedBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '4px',
|
||||
},
|
||||
handlerIcon: {
|
||||
type: String,
|
||||
},
|
||||
successIcon: {
|
||||
type: String,
|
||||
},
|
||||
handlerBg: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
textSize: {
|
||||
type: String,
|
||||
default: '14px',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
imgsrc: {
|
||||
type: String,
|
||||
},
|
||||
barWidth: {
|
||||
type: Number,
|
||||
default: 70,
|
||||
},
|
||||
barHeight: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
barRadius: {
|
||||
type: Number,
|
||||
default: 2,
|
||||
},
|
||||
showRefresh: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
refreshIcon: {
|
||||
type: String,
|
||||
},
|
||||
showTips: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
successTip: {
|
||||
type: String,
|
||||
default: '验证通过，超过80%用户',
|
||||
},
|
||||
failTip: {
|
||||
type: String,
|
||||
default: '验证未通过，拖动滑块将悬浮图像正确合并',
|
||||
},
|
||||
diffWidth: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const dragEl = this.$refs.dragVerify;
|
||||
dragEl.style.setProperty('--textColor', this.textColor);
|
||||
dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
|
||||
dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
|
||||
},
|
||||
computed: {
|
||||
handlerStyle: function () {
|
||||
return {
|
||||
width: this.height + 'px',
|
||||
height: this.height + 'px',
|
||||
background: this.handlerBg,
|
||||
};
|
||||
},
|
||||
message: function () {
|
||||
return this.isPassing ? '' : this.text;
|
||||
},
|
||||
successMessage: function () {
|
||||
return this.isPassing ? this.successText : '';
|
||||
},
|
||||
dragVerifyStyle: function () {
|
||||
console.log(this.width, 'width');
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.height + 'px',
|
||||
lineHeight: this.height + 'px',
|
||||
background: this.background,
|
||||
borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
dragVerifyImgStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
};
|
||||
},
|
||||
progressBarStyle: function () {
|
||||
return {
|
||||
background: this.progressBarBg,
|
||||
height: this.height + 'px',
|
||||
borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
textStyle: function () {
|
||||
return {
|
||||
height: this.height + 'px',
|
||||
width: this.width + 'px',
|
||||
fontSize: this.textSize,
|
||||
};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMoving: false,
|
||||
x: 0,
|
||||
isOk: false,
|
||||
isKeep: false,
|
||||
movebarStyle: {},
|
||||
clipbarStyle: {},
|
||||
showBar: false,
|
||||
clipBarx: 0,
|
||||
showErrorTip: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
checkimgLoaded: function () {
|
||||
//生成图片缺失位置
|
||||
var barWidth = this.barWidth;
|
||||
var barHeight = this.barHeight;
|
||||
var imgHeight = this.$refs.checkImg.height;
|
||||
var halfWidth = Math.floor(this.width / 2);
|
||||
var refreshHeigth = 25;
|
||||
var tipHeight = 20;
|
||||
var x = halfWidth + Math.ceil(Math.random() * (halfWidth - barWidth));
|
||||
var y = refreshHeigth + Math.floor(Math.random() * (imgHeight - barHeight - refreshHeigth - tipHeight));
|
||||
this.clipbarStyle = {
|
||||
width: barWidth + 'px',
|
||||
height: barHeight + 'px',
|
||||
top: y + 'px',
|
||||
left: x + 'px',
|
||||
'border-radius': this.barRadius + 'px',
|
||||
};
|
||||
this.clipBarx = x;
|
||||
var imgsrc = this.imgsrc;
|
||||
var width = this.width;
|
||||
this.movebarStyle = {
|
||||
background: `url(${imgsrc})`,
|
||||
'background-position': `-${x}px -${y}px`,
|
||||
'background-size': `${width}px`,
|
||||
width: barWidth + 'px',
|
||||
height: barHeight + 'px',
|
||||
top: y + 'px',
|
||||
'border-radius': this.barRadius + 'px',
|
||||
};
|
||||
},
|
||||
dragStart: function (e) {
|
||||
if (!this.isPassing) {
|
||||
this.isMoving = true;
|
||||
this.x = e.pageX || e.touches[0].pageX;
|
||||
}
|
||||
this.showBar = true;
|
||||
this.showErrorTip = false;
|
||||
this.$emit('handlerMove');
|
||||
},
|
||||
dragMoving: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.touches[0].pageX) - this.x;
|
||||
var handler = this.$refs.handler;
|
||||
handler.style.left = _x + 'px';
|
||||
this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
|
||||
this.$refs.moveBar.style.left = _x + 'px';
|
||||
}
|
||||
},
|
||||
dragFinish: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
|
||||
if (Math.abs(_x - this.clipBarx) > this.diffWidth) {
|
||||
this.isOk = true;
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.$refs.handler.style.left = '0';
|
||||
that.$refs.progressBar.style.width = '0';
|
||||
that.$refs.moveBar.style.left = '0';
|
||||
that.isOk = false;
|
||||
}, 500);
|
||||
this.showErrorTip = true;
|
||||
this.$emit('passfail');
|
||||
} else {
|
||||
this.passVerify();
|
||||
}
|
||||
this.isMoving = false;
|
||||
}
|
||||
},
|
||||
passVerify: function () {
|
||||
this.$emit('update:isPassing', true);
|
||||
this.isMoving = false;
|
||||
var handler = this.$refs.handler;
|
||||
handler.children[0].className = this.successIcon;
|
||||
this.$refs.progressBar.style.background = this.completedBg;
|
||||
this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
|
||||
this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
|
||||
this.$refs.progressBar.style.color = '#fff';
|
||||
this.$refs.progressBar.style.fontSize = this.textSize;
|
||||
this.isKeep = true;
|
||||
setTimeout(() => {
|
||||
this.$refs.moveBar.style.left = this.clipBarx + 'px';
|
||||
setTimeout(() => {
|
||||
this.isKeep = false;
|
||||
}, 200);
|
||||
}, 100);
|
||||
this.$emit('passcallback');
|
||||
},
|
||||
reset: function () {
|
||||
this.reImg();
|
||||
this.checkimgLoaded();
|
||||
},
|
||||
reImg: function () {
|
||||
this.$emit('update:isPassing', false);
|
||||
const oriData = this.$options.data();
|
||||
for (const key in oriData) {
|
||||
if (Object.prototype.hasOwnProperty.call(oriData, key)) {
|
||||
this[key] = oriData[key];
|
||||
}
|
||||
}
|
||||
var handler = this.$refs.handler;
|
||||
var message = this.$refs.message;
|
||||
handler.style.left = '0';
|
||||
this.$refs.progressBar.style.width = '0';
|
||||
handler.children[0].className = this.handlerIcon;
|
||||
message.style['-webkit-text-fill-color'] = 'transparent';
|
||||
message.style.animation = 'slidetounlock 3s infinite';
|
||||
message.style.color = this.background;
|
||||
},
|
||||
refreshimg: function () {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
imgsrc: {
|
||||
immediate: false,
|
||||
handler: function () {
|
||||
this.reImg();
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.drag_verify {
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.drag_verify .dv_handler {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
.drag_verify .dv_handler i {
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.drag_verify .dv_handler .el-icon-circle-check {
|
||||
color: #6c6;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.drag_verify .dv_progress_bar {
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
width: 0px;
|
||||
}
|
||||
.drag_verify .dv_text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
color: transparent;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, var(--textColor)),
|
||||
color-stop(0.4, var(--textColor)),
|
||||
color-stop(0.5, #fff),
|
||||
color-stop(0.6, var(--textColor)),
|
||||
color-stop(1, var(--textColor))
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
animation: slidetounlock 3s infinite;
|
||||
}
|
||||
.drag_verify .dv_text * {
|
||||
-webkit-text-fill-color: var(--textColor);
|
||||
}
|
||||
.goFirst {
|
||||
left: 0px !important;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.goKeep {
|
||||
transition: left 0.2s;
|
||||
}
|
||||
.goFirst2 {
|
||||
width: 0px !important;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
.drag-verify-container {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
.move-bar {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
.clip-bar {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.refresh {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips.success {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
color: green;
|
||||
}
|
||||
.tips.danger {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@-webkit-keyframes slidetounlock {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--width) 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slidetounlock2 {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
473
src/components/dragVerify/dragVerifyImgChip.vue
Normal file
473
src/components/dragVerify/dragVerifyImgChip.vue
Normal file
@ -0,0 +1,473 @@
|
||||
<template>
|
||||
<div class="drag-verify-container">
|
||||
<div :style="dragVerifyImgStyle">
|
||||
<img ref="checkImg" crossOrigin="anonymous" :src="imgsrc" @load="checkimgLoaded" style="width: 100%" alt="" />
|
||||
<canvas ref="maincanvas" class="main-canvas"></canvas>
|
||||
<canvas ref="movecanvas" :class="{ goFirst: isOk, goKeep: isKeep }" class="move-canvas"></canvas>
|
||||
<div class="refresh" v-if="showRefresh && !isPassing">
|
||||
<i :class="refreshIcon" @click="refreshimg"></i>
|
||||
</div>
|
||||
<div class="tips success" v-if="showTips && isPassing">{{ successTip }}</div>
|
||||
<div class="tips danger" v-if="showTips && !isPassing && showErrorTip">{{ failTip }}</div>
|
||||
</div>
|
||||
<div
|
||||
ref="dragVerify"
|
||||
class="drag_verify"
|
||||
:style="dragVerifyStyle"
|
||||
@mousemove="dragMoving"
|
||||
@mouseup="dragFinish"
|
||||
@mouseleave="dragFinish"
|
||||
@touchmove="dragMoving"
|
||||
@touchend="dragFinish"
|
||||
>
|
||||
<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle">
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
<div class="dv_text" :style="textStyle" ref="message">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="dv_handler dv_handler_bg"
|
||||
:class="{ goFirst: isOk }"
|
||||
@mousedown="dragStart"
|
||||
@touchstart="dragStart"
|
||||
ref="handler"
|
||||
:style="handlerStyle"
|
||||
>
|
||||
<i :class="handlerIcon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'dragVerifyImgChip',
|
||||
props: {
|
||||
isPassing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 250,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'swiping to the right side',
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#eee',
|
||||
},
|
||||
progressBarBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
completedBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '4px',
|
||||
},
|
||||
handlerIcon: {
|
||||
type: String,
|
||||
},
|
||||
successIcon: {
|
||||
type: String,
|
||||
},
|
||||
handlerBg: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
textSize: {
|
||||
type: String,
|
||||
default: '14px',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
imgsrc: {
|
||||
type: String,
|
||||
},
|
||||
barWidth: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
barRadius: {
|
||||
type: Number,
|
||||
default: 8,
|
||||
},
|
||||
showRefresh: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
refreshIcon: {
|
||||
type: String,
|
||||
},
|
||||
showTips: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
successTip: {
|
||||
type: String,
|
||||
default: '验证通过，超过80%用户',
|
||||
},
|
||||
failTip: {
|
||||
type: String,
|
||||
default: '验证未通过，拖动滑块将悬浮图像正确合并',
|
||||
},
|
||||
diffWidth: {
|
||||
type: Number,
|
||||
default: 20,
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const dragEl = this.$refs.dragVerify;
|
||||
dragEl.style.setProperty('--textColor', this.textColor);
|
||||
dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
|
||||
dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
|
||||
},
|
||||
computed: {
|
||||
handlerStyle: function () {
|
||||
return {
|
||||
width: this.height + 'px',
|
||||
height: this.height + 'px',
|
||||
background: this.handlerBg,
|
||||
};
|
||||
},
|
||||
message: function () {
|
||||
return this.isPassing ? '' : this.text;
|
||||
},
|
||||
successMessage: function () {
|
||||
return this.isPassing ? this.successText : '';
|
||||
},
|
||||
dragVerifyStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.height + 'px',
|
||||
lineHeight: this.height + 'px',
|
||||
background: this.background,
|
||||
borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
dragVerifyImgStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
};
|
||||
},
|
||||
progressBarStyle: function () {
|
||||
return {
|
||||
background: this.progressBarBg,
|
||||
height: this.height + 'px',
|
||||
borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
textStyle: function () {
|
||||
return {
|
||||
height: this.height + 'px',
|
||||
width: this.width + 'px',
|
||||
fontSize: this.textSize,
|
||||
};
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMoving: false,
|
||||
x: 0,
|
||||
isOk: false,
|
||||
isKeep: false,
|
||||
clipBarx: 0,
|
||||
showErrorTip: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
draw: function (ctx, x, y, operation) {
|
||||
var l = this.barWidth;
|
||||
var r = this.barRadius;
|
||||
const PI = Math.PI;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, y);
|
||||
ctx.arc(x + l / 2, y - r + 2, r, 0.72 * PI, 2.26 * PI);
|
||||
ctx.lineTo(x + l, y);
|
||||
ctx.arc(x + l + r - 2, y + l / 2, r, 1.21 * PI, 2.78 * PI);
|
||||
ctx.lineTo(x + l, y + l);
|
||||
ctx.lineTo(x, y + l);
|
||||
ctx.arc(x + r - 2, y + l / 2, r + 0.4, 2.76 * PI, 1.24 * PI, true);
|
||||
ctx.lineTo(x, y);
|
||||
ctx.lineWidth = 2;
|
||||
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)';
|
||||
ctx.stroke();
|
||||
ctx[operation]();
|
||||
ctx.globalCompositeOperation = 'destination-over';
|
||||
},
|
||||
checkimgLoaded: function () {
|
||||
// 生成图片缺失位置
|
||||
var barWidth = this.barWidth;
|
||||
var imgHeight = this.$refs.checkImg.height;
|
||||
var imgWidth = this.$refs.checkImg.width;
|
||||
var halfWidth = Math.floor(this.width / 2);
|
||||
var refreshHeigth = 25;
|
||||
var tipHeight = 20;
|
||||
var x = halfWidth + Math.ceil(Math.random() * (halfWidth - barWidth - this.barRadius - 5));
|
||||
var y = refreshHeigth + Math.floor(Math.random() * (imgHeight - barWidth - refreshHeigth - tipHeight));
|
||||
this.$refs.maincanvas.setAttribute('width', imgWidth);
|
||||
this.$refs.maincanvas.setAttribute('height', imgHeight);
|
||||
this.$refs.maincanvas.style.display = 'block';
|
||||
var canvasCtx = this.$refs.maincanvas.getContext('2d');
|
||||
this.draw(canvasCtx, x, y, 'fill');
|
||||
this.clipBarx = x;
|
||||
var moveCanvas = this.$refs.movecanvas;
|
||||
moveCanvas.setAttribute('width', imgWidth);
|
||||
moveCanvas.setAttribute('height', imgHeight);
|
||||
this.$refs.movecanvas.style.display = 'block';
|
||||
const L = barWidth + this.barRadius * 2 + 3; //实际宽度
|
||||
var moveCtx = this.$refs.movecanvas.getContext('2d');
|
||||
moveCtx.clearRect(0, 0, imgWidth, imgHeight);
|
||||
this.draw(moveCtx, x, y, 'clip');
|
||||
moveCtx.drawImage(this.$refs.checkImg, 0, 0, imgWidth, imgHeight);
|
||||
var y = y - this.barRadius * 2 - 1;
|
||||
const ImageData = moveCtx.getImageData(x, y, L, L);
|
||||
moveCanvas.setAttribute('width', L);
|
||||
moveCanvas.setAttribute('height', imgHeight);
|
||||
moveCtx.putImageData(ImageData, 0, y);
|
||||
},
|
||||
dragStart: function (e) {
|
||||
if (!this.isPassing) {
|
||||
this.isMoving = true;
|
||||
this.x = e.pageX || e.touches[0].pageX;
|
||||
}
|
||||
this.showBar = true;
|
||||
this.showErrorTip = false;
|
||||
this.$emit('handlerMove');
|
||||
},
|
||||
dragMoving: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.touches[0].pageX) - this.x;
|
||||
var handler = this.$refs.handler;
|
||||
handler.style.left = _x + 'px';
|
||||
this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
|
||||
this.$refs.movecanvas.style.left = _x + 'px';
|
||||
}
|
||||
},
|
||||
dragFinish: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.changedTouches[0].pageX) - this.x;
|
||||
if (Math.abs(_x - this.clipBarx) > this.diffWidth) {
|
||||
this.isOk = true;
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.$refs.handler.style.left = '0';
|
||||
that.$refs.progressBar.style.width = '0';
|
||||
that.$refs.movecanvas.style.left = '0';
|
||||
that.isOk = false;
|
||||
}, 500);
|
||||
this.$emit('passfail');
|
||||
this.showErrorTip = true;
|
||||
} else {
|
||||
this.passVerify();
|
||||
}
|
||||
this.isMoving = false;
|
||||
}
|
||||
},
|
||||
passVerify: function () {
|
||||
this.$emit('update:isPassing', true);
|
||||
this.isMoving = false;
|
||||
var handler = this.$refs.handler;
|
||||
handler.children[0].className = this.successIcon;
|
||||
this.$refs.progressBar.style.background = this.completedBg;
|
||||
this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
|
||||
this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
|
||||
this.$refs.progressBar.style.color = '#fff';
|
||||
this.$refs.progressBar.style.fontSize = this.textSize;
|
||||
this.isKeep = true;
|
||||
setTimeout(() => {
|
||||
this.$refs.movecanvas.style.left = this.clipBarx + 'px';
|
||||
setTimeout(() => {
|
||||
this.isKeep = false;
|
||||
this.$refs.maincanvas.style.display = 'none';
|
||||
this.$refs.movecanvas.style.display = 'none';
|
||||
}, 200);
|
||||
}, 100);
|
||||
this.$emit('passcallback');
|
||||
},
|
||||
reset: function () {
|
||||
this.reImg();
|
||||
this.checkimgLoaded();
|
||||
},
|
||||
reImg: function () {
|
||||
this.$emit('update:isPassing', false);
|
||||
const oriData = this.$options.data();
|
||||
for (const key in oriData) {
|
||||
if (Object.prototype.hasOwnProperty.call(oriData, key)) {
|
||||
this[key] = oriData[key];
|
||||
}
|
||||
}
|
||||
var handler = this.$refs.handler;
|
||||
var message = this.$refs.message;
|
||||
handler.style.left = '0';
|
||||
this.$refs.progressBar.style.width = '0';
|
||||
handler.children[0].className = this.handlerIcon;
|
||||
message.style['-webkit-text-fill-color'] = 'transparent';
|
||||
message.style.animation = 'slidetounlock 3s infinite';
|
||||
message.style.color = this.background;
|
||||
this.$refs.movecanvas.style.left = '0px';
|
||||
},
|
||||
refreshimg: function () {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
imgsrc: {
|
||||
immediate: false,
|
||||
handler: function () {
|
||||
this.reImg();
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.drag_verify {
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.drag_verify .dv_handler {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
.drag_verify .dv_handler i {
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.drag_verify .dv_handler .el-icon-circle-check {
|
||||
color: #6c6;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.drag_verify .dv_progress_bar {
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
width: 0px;
|
||||
}
|
||||
.drag_verify .dv_text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
color: transparent;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, var(--textColor)),
|
||||
color-stop(0.4, var(--textColor)),
|
||||
color-stop(0.5, #fff),
|
||||
color-stop(0.6, var(--textColor)),
|
||||
color-stop(1, var(--textColor))
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
animation: slidetounlock 3s infinite;
|
||||
}
|
||||
.drag_verify .dv_text * {
|
||||
-webkit-text-fill-color: var(--textColor);
|
||||
}
|
||||
.goFirst {
|
||||
left: 0px !important;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.goKeep {
|
||||
transition: left 0.2s;
|
||||
}
|
||||
.goFirst2 {
|
||||
width: 0px !important;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
.drag-verify-container {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
.refresh {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips.success {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
color: green;
|
||||
}
|
||||
.tips.danger {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: yellow;
|
||||
}
|
||||
.main-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.move-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@-webkit-keyframes slidetounlock {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--width) 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slidetounlock2 {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
434
src/components/dragVerify/dragVerifyImgRotate.vue
Normal file
434
src/components/dragVerify/dragVerifyImgRotate.vue
Normal file
@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<div class="drag-verify-container">
|
||||
<div :style="dragVerifyImgStyle">
|
||||
<img ref="checkImg" :src="imgsrc" class="check-img" :class="{ goOrigin: isOk }" @load="checkimgLoaded" :style="imgStyle" alt="" />
|
||||
<div class="tips success" v-if="showTips && isPassing">{{ successTip }}</div>
|
||||
<div class="tips danger" v-if="showTips && !isPassing && showErrorTip">{{ failTip }}</div>
|
||||
</div>
|
||||
<div
|
||||
ref="dragVerify"
|
||||
class="drag_verify"
|
||||
:style="dragVerifyStyle"
|
||||
@mousemove="dragMoving"
|
||||
@mouseup="dragFinish"
|
||||
@mouseleave="dragFinish"
|
||||
@touchmove="dragMoving"
|
||||
@touchend="dragFinish"
|
||||
>
|
||||
<div class="dv_progress_bar" :class="{ goFirst2: isOk }" ref="progressBar" :style="progressBarStyle">
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
<div class="dv_text" :style="textStyle" ref="message">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="dv_handler dv_handler_bg"
|
||||
:class="{ goFirst: isOk }"
|
||||
@mousedown="dragStart"
|
||||
@touchstart="dragStart"
|
||||
ref="handler"
|
||||
:style="handlerStyle"
|
||||
>
|
||||
<i :class="handlerIcon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'dragVerify',
|
||||
props: {
|
||||
isPassing: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 250,
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 40,
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
default: 'swiping to the right side',
|
||||
},
|
||||
successText: {
|
||||
type: String,
|
||||
default: 'success',
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#eee',
|
||||
},
|
||||
progressBarBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
completedBg: {
|
||||
type: String,
|
||||
default: '#76c61d',
|
||||
},
|
||||
circle: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
radius: {
|
||||
type: String,
|
||||
default: '4px',
|
||||
},
|
||||
handlerIcon: {
|
||||
type: String,
|
||||
},
|
||||
successIcon: {
|
||||
type: String,
|
||||
},
|
||||
handlerBg: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
textSize: {
|
||||
type: String,
|
||||
default: '14px',
|
||||
},
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#333',
|
||||
},
|
||||
imgsrc: {
|
||||
type: String,
|
||||
},
|
||||
showTips: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
successTip: {
|
||||
type: String,
|
||||
default: '验证通过',
|
||||
},
|
||||
failTip: {
|
||||
type: String,
|
||||
default: '验证失败',
|
||||
},
|
||||
diffDegree: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
minDegree: {
|
||||
type: Number,
|
||||
default: 90,
|
||||
},
|
||||
maxDegree: {
|
||||
type: Number,
|
||||
default: 270,
|
||||
},
|
||||
},
|
||||
mounted: function () {
|
||||
const dragEl = this.$refs.dragVerify;
|
||||
dragEl.style.setProperty('--textColor', this.textColor);
|
||||
dragEl.style.setProperty('--width', Math.floor(this.width / 2) + 'px');
|
||||
dragEl.style.setProperty('--pwidth', -Math.floor(this.width / 2) + 'px');
|
||||
},
|
||||
computed: {
|
||||
handlerStyle: function () {
|
||||
return {
|
||||
width: this.height + 'px',
|
||||
height: this.height + 'px',
|
||||
background: this.handlerBg,
|
||||
};
|
||||
},
|
||||
message: function () {
|
||||
return this.isPassing ? '' : this.text;
|
||||
},
|
||||
successMessage: function () {
|
||||
return this.isPassing ? this.successText : '';
|
||||
},
|
||||
dragVerifyStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.height + 'px',
|
||||
lineHeight: this.height + 'px',
|
||||
background: this.background,
|
||||
borderRadius: this.circle ? this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
dragVerifyImgStyle: function () {
|
||||
return {
|
||||
width: this.width + 'px',
|
||||
height: this.width + 'px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
'border-radius': '50%',
|
||||
};
|
||||
},
|
||||
progressBarStyle: function () {
|
||||
return {
|
||||
background: this.progressBarBg,
|
||||
height: this.height + 'px',
|
||||
borderRadius: this.circle ? this.height / 2 + 'px 0 0 ' + this.height / 2 + 'px' : this.radius,
|
||||
};
|
||||
},
|
||||
textStyle: function () {
|
||||
return {
|
||||
height: this.height + 'px',
|
||||
width: this.width + 'px',
|
||||
fontSize: this.textSize,
|
||||
};
|
||||
},
|
||||
factor: function () {
|
||||
//避免指定旋转角度时一直拖动到最右侧才验证通过
|
||||
if (this.minDegree == this.maxDegree) {
|
||||
return Math.floor(1 + Math.random() * 6) / 10 + 1;
|
||||
}
|
||||
return 1;
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMoving: false,
|
||||
x: 0,
|
||||
isOk: false,
|
||||
showBar: false,
|
||||
showErrorTip: false,
|
||||
ranRotate: 0,
|
||||
cRotate: 0,
|
||||
imgStyle: {},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
checkimgLoaded: function () {
|
||||
//生成旋转角度
|
||||
var minDegree = this.minDegree;
|
||||
var maxDegree = this.maxDegree;
|
||||
var ranRotate = Math.floor(minDegree + Math.random() * (maxDegree - minDegree)); //生成随机角度
|
||||
this.ranRotate = ranRotate;
|
||||
console.log('旋转' + ranRotate);
|
||||
this.imgStyle = {
|
||||
transform: `rotateZ(${ranRotate}deg)`,
|
||||
};
|
||||
},
|
||||
dragStart: function (e) {
|
||||
if (!this.isPassing) {
|
||||
this.isMoving = true;
|
||||
this.x = e.pageX || e.touches[0].pageX;
|
||||
}
|
||||
this.showBar = true;
|
||||
this.showErrorTip = false;
|
||||
this.$emit('handlerMove');
|
||||
},
|
||||
dragMoving: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
var _x = (e.pageX || e.touches[0].pageX) - this.x;
|
||||
console.log(_x, '_x');
|
||||
var handler = this.$refs.handler;
|
||||
handler.style.left = _x + 'px';
|
||||
this.$refs.progressBar.style.width = _x + this.height / 2 + 'px';
|
||||
var cRotate = Math.ceil((_x / (this.width - this.height)) * this.maxDegree * this.factor);
|
||||
console.log(cRotate, 'cRotate');
|
||||
this.cRotate = cRotate;
|
||||
var rotate = this.ranRotate - cRotate;
|
||||
this.imgStyle = {
|
||||
transform: `rotateZ(${rotate}deg)`,
|
||||
};
|
||||
}
|
||||
},
|
||||
dragFinish: function (e) {
|
||||
if (this.isMoving && !this.isPassing) {
|
||||
if (Math.abs(this.ranRotate - this.cRotate) > this.diffDegree) {
|
||||
this.isOk = true;
|
||||
this.imgStyle = {
|
||||
transform: `rotateZ(${this.ranRotate}deg)`,
|
||||
};
|
||||
var that = this;
|
||||
setTimeout(function () {
|
||||
that.$refs.handler.style.left = '0';
|
||||
that.$refs.progressBar.style.width = '0';
|
||||
that.isOk = false;
|
||||
}, 500);
|
||||
this.showErrorTip = true;
|
||||
this.$emit('passfail');
|
||||
} else {
|
||||
this.passVerify();
|
||||
}
|
||||
this.isMoving = false;
|
||||
}
|
||||
},
|
||||
passVerify: function () {
|
||||
this.$emit('update:isPassing', true);
|
||||
this.isMoving = false;
|
||||
var handler = this.$refs.handler;
|
||||
handler.children[0].className = this.successIcon;
|
||||
this.$refs.progressBar.style.background = this.completedBg;
|
||||
this.$refs.message.style['-webkit-text-fill-color'] = 'unset';
|
||||
this.$refs.message.style.animation = 'slidetounlock2 3s infinite';
|
||||
this.$refs.progressBar.style.color = '#fff';
|
||||
this.$refs.progressBar.style.fontSize = this.textSize;
|
||||
this.$emit('passcallback');
|
||||
},
|
||||
reset: function () {
|
||||
this.reImg();
|
||||
this.checkimgLoaded();
|
||||
},
|
||||
reImg: function () {
|
||||
this.$emit('update:isPassing', false);
|
||||
const oriData = this.$options.data();
|
||||
for (const key in oriData) {
|
||||
if (Object.prototype.hasOwnProperty.call(oriData, key)) {
|
||||
this[key] = oriData[key];
|
||||
}
|
||||
}
|
||||
var handler = this.$refs.handler;
|
||||
var message = this.$refs.message;
|
||||
handler.style.left = '0';
|
||||
this.$refs.progressBar.style.width = '0';
|
||||
handler.children[0].className = this.handlerIcon;
|
||||
message.style['-webkit-text-fill-color'] = 'transparent';
|
||||
message.style.animation = 'slidetounlock 3s infinite';
|
||||
message.style.color = this.background;
|
||||
},
|
||||
refreshimg: function () {
|
||||
this.$emit('refresh');
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
imgsrc: {
|
||||
immediate: false,
|
||||
handler: function () {
|
||||
this.reImg();
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.drag_verify {
|
||||
position: relative;
|
||||
background-color: #e8e8e8;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.drag_verify .dv_handler {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: move;
|
||||
}
|
||||
.drag_verify .dv_handler i {
|
||||
color: #666;
|
||||
padding-left: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.drag_verify .dv_handler .el-icon-circle-check {
|
||||
color: #6c6;
|
||||
margin-top: 9px;
|
||||
}
|
||||
.drag_verify .dv_progress_bar {
|
||||
position: absolute;
|
||||
height: 34px;
|
||||
width: 0px;
|
||||
}
|
||||
.drag_verify .dv_text {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
color: transparent;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
background: -webkit-gradient(
|
||||
linear,
|
||||
left top,
|
||||
right top,
|
||||
color-stop(0, var(--textColor)),
|
||||
color-stop(0.4, var(--textColor)),
|
||||
color-stop(0.5, #fff),
|
||||
color-stop(0.6, var(--textColor)),
|
||||
color-stop(1, var(--textColor))
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-webkit-text-size-adjust: none;
|
||||
animation: slidetounlock 3s infinite;
|
||||
}
|
||||
.drag_verify .dv_text * {
|
||||
-webkit-text-fill-color: var(--textColor);
|
||||
}
|
||||
.goFirst {
|
||||
left: 0px !important;
|
||||
transition: left 0.5s;
|
||||
}
|
||||
.goOrigin {
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
.goKeep {
|
||||
transition: left 0.2s;
|
||||
}
|
||||
.goFirst2 {
|
||||
width: 0px !important;
|
||||
transition: width 0.5s;
|
||||
}
|
||||
.drag-verify-container {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.move-bar {
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
.clip-bar {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.refresh {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips {
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
z-index: 200;
|
||||
}
|
||||
.tips.success {
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
color: green;
|
||||
}
|
||||
.tips.danger {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: yellow;
|
||||
}
|
||||
.check-img {
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
@-webkit-keyframes slidetounlock {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--width) 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes slidetounlock2 {
|
||||
0% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
100% {
|
||||
background-position: var(--pwidth) 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -34,6 +34,7 @@ export default {
|
||||
funScreenShort: 'screenCapture',
|
||||
funGridLayout: 'Drag layout',
|
||||
funSplitpanes: 'Pane splitter',
|
||||
funDragVerify: 'Validator',
|
||||
pagesIndex: 'pages',
|
||||
pagesFiltering: 'Filtering',
|
||||
pagesFilteringDetails: 'FilteringDetails',
|
||||
@ -45,6 +46,8 @@ export default {
|
||||
pagesFormAdapt: 'FormAdapt',
|
||||
pagesFormI18n: 'FormI18n',
|
||||
pagesFormRules: 'Multi form validation',
|
||||
pagesDynamicForm: 'Dynamic complex form',
|
||||
pagesWorkflow: 'Workflow',
|
||||
pagesListAdapt: 'ListAdapt',
|
||||
pagesWaterfall: 'Waterfall',
|
||||
pagesSteps: 'Steps',
|
||||
@ -153,6 +156,7 @@ export default {
|
||||
fourIsFooter: 'Open footer',
|
||||
fourIsGrayscale: 'Grey model',
|
||||
fourIsInvert: 'Color weak mode',
|
||||
fourIsDark: 'Dark Mode',
|
||||
fourIsWartermark: 'Turn on watermark',
|
||||
fourWartermarkText: 'Watermark copy',
|
||||
fiveTitle: 'Other settings',
|
||||
|
||||
@ -34,6 +34,7 @@ export default {
|
||||
funScreenShort: 'web端自定义截屏',
|
||||
funGridLayout: '拖拽布局',
|
||||
funSplitpanes: '窗格拆分器',
|
||||
funDragVerify: '验证器',
|
||||
pagesIndex: '页面',
|
||||
pagesFiltering: '过滤筛选组件',
|
||||
pagesFilteringDetails: '过滤筛选组件详情',
|
||||
@ -45,6 +46,8 @@ export default {
|
||||
pagesFormAdapt: '表单自适应',
|
||||
pagesFormI18n: '表单国际化',
|
||||
pagesFormRules: '多表单验证',
|
||||
pagesDynamicForm: '动态复杂表单',
|
||||
pagesWorkflow: '工作流',
|
||||
pagesListAdapt: '列表自适应',
|
||||
pagesWaterfall: '瀑布屏',
|
||||
pagesSteps: '步骤条',
|
||||
@ -153,6 +156,7 @@ export default {
|
||||
fourIsFooter: '开启 Footer',
|
||||
fourIsGrayscale: '灰色模式',
|
||||
fourIsInvert: '色弱模式',
|
||||
fourIsDark: '深色模式',
|
||||
fourIsWartermark: '开启水印',
|
||||
fourWartermarkText: '水印文案',
|
||||
fiveTitle: '其它设置',
|
||||
|
||||
@ -34,6 +34,7 @@ export default {
|
||||
funScreenShort: '自定義截圖',
|
||||
funGridLayout: '拖拽佈局',
|
||||
funSplitpanes: '窗格折開器',
|
||||
funDragVerify: '驗證器',
|
||||
pagesIndex: '頁面',
|
||||
pagesFiltering: '過濾篩選組件',
|
||||
pagesFilteringDetails: '過濾篩選組件詳情',
|
||||
@ -45,6 +46,8 @@ export default {
|
||||
pagesFormAdapt: '表單自我調整',
|
||||
pagesFormI18n: '表單國際化',
|
||||
pagesFormRules: '多表單驗證',
|
||||
pagesDynamicForm: '動態複雜表單',
|
||||
pagesWorkflow: '工作流',
|
||||
pagesListAdapt: '清單自我調整',
|
||||
pagesWaterfall: '瀑布屏',
|
||||
pagesSteps: '步驟條',
|
||||
@ -153,6 +156,7 @@ export default {
|
||||
fourIsFooter: '開啟 Footer',
|
||||
fourIsGrayscale: '灰色模式',
|
||||
fourIsInvert: '色弱模式',
|
||||
fourIsDark: '深色模式',
|
||||
fourIsWartermark: '開啟浮水印',
|
||||
fourWartermarkText: '浮水印文案',
|
||||
fiveTitle: '其它設定',
|
||||
|
||||
@ -202,12 +202,12 @@ export default {
|
||||
}
|
||||
}
|
||||
.layout-columns-active {
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
transition: 0.3s ease-in-out;
|
||||
}
|
||||
.columns-round {
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 2px;
|
||||
|
||||
@ -36,7 +36,7 @@ export default {
|
||||
display: flex;
|
||||
&-warp {
|
||||
margin: auto;
|
||||
color: #9e9e9e;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: center;
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@ -203,7 +203,7 @@ export default defineComponent({
|
||||
transition: all 0.1s 0.1s ease-in-out;
|
||||
}
|
||||
.layout-lock-screen-mask {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
background: var(--el-color-white);
|
||||
@extend .layout-lock-screen-fixed;
|
||||
z-index: 9999990;
|
||||
}
|
||||
@ -222,7 +222,7 @@ export default defineComponent({
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #ffffff;
|
||||
color: var(--el-color-white);
|
||||
z-index: 9999993;
|
||||
user-select: none;
|
||||
&-box {
|
||||
@ -231,9 +231,11 @@ export default defineComponent({
|
||||
bottom: 50px;
|
||||
&-time {
|
||||
font-size: 100px;
|
||||
color: var(--color-whites);
|
||||
}
|
||||
&-info {
|
||||
font-size: 40px;
|
||||
color: var(--color-whites);
|
||||
}
|
||||
&-minutes {
|
||||
font-size: 16px;
|
||||
@ -244,9 +246,9 @@ export default defineComponent({
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 100%;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
@ -262,7 +264,7 @@ export default defineComponent({
|
||||
position: absolute;
|
||||
top: 150%;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
left: 50%;
|
||||
line-height: 1.2;
|
||||
transform: translate(-50%, -50%);
|
||||
@ -273,7 +275,7 @@ export default defineComponent({
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0 0 12px 0 rgba(255, 255, 255, 0.5);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
i {
|
||||
@ -298,7 +300,7 @@ export default defineComponent({
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
&-box {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
@ -334,13 +336,13 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
::v-deep(.el-input-group__append) {
|
||||
background: #ffffff;
|
||||
background: var(--el-color-white);
|
||||
padding: 0px 15px;
|
||||
}
|
||||
::v-deep(.el-input__inner) {
|
||||
border-right-color: #f6f6f6;
|
||||
border-right-color: var(--el-border-color-extra-light);
|
||||
&:hover {
|
||||
border-color: #f6f6f6;
|
||||
border-color: var(--el-border-color-extra-light);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -231,6 +231,12 @@
|
||||
<el-switch v-model="getThemeConfig.isInvert" @change="onAddFilterChange('invert')"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsDark') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
<el-switch v-model="getThemeConfig.isIsDark" @change="onAddDarkChange"></el-switch>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex mt15">
|
||||
<div class="layout-breadcrumb-seting-bar-flex-label">{{ $t('message.layout.fourIsWartermark') }}</div>
|
||||
<div class="layout-breadcrumb-seting-bar-flex-value">
|
||||
@ -503,6 +509,12 @@ export default defineComponent({
|
||||
appEle.setAttribute('style', `filter: ${cssAttr}`);
|
||||
setLocalThemeConfig();
|
||||
};
|
||||
// 4、界面显示 --> 深色模式
|
||||
const onAddDarkChange = () => {
|
||||
const body = document.documentElement as HTMLElement;
|
||||
if (getThemeConfig.value.isIsDark) body.setAttribute('data-theme', 'dark');
|
||||
else body.setAttribute('data-theme', '');
|
||||
};
|
||||
// 4、界面显示 --> 开启水印
|
||||
const onWartermarkChange = () => {
|
||||
getThemeConfig.value.isWartermark ? Watermark.set(getThemeConfig.value.wartermarkText) : Watermark.del();
|
||||
@ -609,6 +621,8 @@ export default defineComponent({
|
||||
if (getThemeConfig.value.isGrayscale) onAddFilterChange('grayscale');
|
||||
// 色弱模式
|
||||
if (getThemeConfig.value.isInvert) onAddFilterChange('invert');
|
||||
// 深色模式
|
||||
if (getThemeConfig.value.isIsDark) onAddDarkChange();
|
||||
// 开启水印
|
||||
onWartermarkChange();
|
||||
// 语言国际化
|
||||
@ -636,6 +650,7 @@ export default defineComponent({
|
||||
getThemeConfig,
|
||||
onDrawerClose,
|
||||
onAddFilterChange,
|
||||
onAddDarkChange,
|
||||
onWartermarkChange,
|
||||
onWartermarkTextInput,
|
||||
onSetLayout,
|
||||
|
||||
@ -504,7 +504,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.layout-navbars-tagsview {
|
||||
flex: 1;
|
||||
background-color: #ffffff;
|
||||
background-color: var(--el-color-white);
|
||||
border-bottom: 1px solid #f1f2f3;
|
||||
::v-deep(.el-scrollbar__wrap) {
|
||||
overflow-x: auto !important;
|
||||
@ -516,7 +516,7 @@ export default {
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #606266;
|
||||
color: var(--el-text-color-regular);
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
padding: 0 15px;
|
||||
@ -552,7 +552,7 @@ export default {
|
||||
line-height: 14px;
|
||||
right: -5px;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
color: var(--color-whites);
|
||||
background-color: var(--color-primary-light-3);
|
||||
}
|
||||
}
|
||||
@ -564,7 +564,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
background: var(--color-primary);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
@ -615,7 +615,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.is-active {
|
||||
background: white !important;
|
||||
background: var(--el-color-white) !important;
|
||||
color: var(--color-primary) !important;
|
||||
border-top: 1px solid !important;
|
||||
border-top-color: var(--color-primary) !important;
|
||||
|
||||
@ -542,6 +542,21 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
icon: 'iconfont icon--chaifenlie',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/fun/dragVerify',
|
||||
name: 'funDragVerify',
|
||||
component: () => import('/@/views/fun/dragVerify/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.funDragVerify',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin', 'test'],
|
||||
icon: 'el-icon-s-promotion',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -838,6 +853,36 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
|
||||
icon: 'el-icon-picture-outline',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/dynamicForm',
|
||||
name: 'pagesDynamicForm',
|
||||
component: () => import('/@/views/pages/dynamicForm/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.pagesDynamicForm',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'iconfont icon-diannao',
|
||||
},
|
||||
},
|
||||
{
|
||||
path: '/pages/workflow',
|
||||
name: 'pagesWorkflow',
|
||||
component: () => import('/@/views/pages/workflow/index.vue'),
|
||||
meta: {
|
||||
title: 'message.router.pagesWorkflow',
|
||||
isLink: '',
|
||||
isHide: false,
|
||||
isKeepAlive: true,
|
||||
isAffix: false,
|
||||
isIframe: false,
|
||||
auth: ['admin'],
|
||||
icon: 'el-icon-connection',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@ -38,6 +38,7 @@ export interface ThemeConfigState {
|
||||
isFooter: boolean;
|
||||
isGrayscale: boolean;
|
||||
isInvert: boolean;
|
||||
isIsDark: boolean;
|
||||
isWartermark: boolean;
|
||||
wartermarkText: string;
|
||||
tagsStyle: string;
|
||||
|
||||
@ -54,7 +54,6 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
|
||||
isColumnsMenuBarColorGradual: false,
|
||||
// 是否开启菜单字体背景高亮
|
||||
isMenuBarColorHighlight: false,
|
||||
// 是否开启菜单字体背景高亮
|
||||
|
||||
/**
|
||||
* 界面设置
|
||||
@ -101,6 +100,8 @@ const themeConfigModule: Module<ThemeConfigState, RootStateTypes> = {
|
||||
isGrayscale: false,
|
||||
// 是否开启色弱模式
|
||||
isInvert: false,
|
||||
// 是否开启深色模式
|
||||
isIsDark: false,
|
||||
// 是否开启水印
|
||||
isWartermark: false,
|
||||
// 水印文案
|
||||
|
||||
@ -56,11 +56,11 @@ body,
|
||||
}
|
||||
// 此字段多次用到，建议不删除，如需修改，请重写覆盖样式
|
||||
.layout-view-bg-white {
|
||||
background: white;
|
||||
background: var(--el-color-white);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
}
|
||||
.layout-el-aside-br-color {
|
||||
border-right: 1px solid rgb(238, 238, 238);
|
||||
|
||||
@ -8,7 +8,6 @@
|
||||
------------------------------- */
|
||||
$--color-primary: #409eff !default;
|
||||
$--color-whites: #ffffff !default;
|
||||
$--color-blacks: #000000 !default;
|
||||
$--color-primary-light-1: mix($--color-whites, $--color-primary, 10%) !default;
|
||||
$--color-primary-light-2: mix($--color-whites, $--color-primary, 20%) !default;
|
||||
$--color-primary-light-3: mix($--color-whites, $--color-primary, 30%) !default;
|
||||
@ -70,7 +69,6 @@ $--bg-columnsMenuBarColor: #e6e6e6;
|
||||
:root {
|
||||
--color-primary: #{$--color-primary};
|
||||
--color-whites: #{$--color-whites};
|
||||
--color-blacks: #{$--color-blacks};
|
||||
--color-primary-light-1: #{$--color-primary-light-1};
|
||||
--color-primary-light-2: #{$--color-primary-light-2};
|
||||
--color-primary-light-3: #{$--color-primary-light-3};
|
||||
|
||||
48
src/theme/dark.scss
Normal file
48
src/theme/dark.scss
Normal file
@ -0,0 +1,48 @@
|
||||
/* 深色模式样式
|
||||
------------------------------- */
|
||||
[data-theme='dark'] {
|
||||
// 全局
|
||||
filter: invert(1) hue-rotate(180deg);
|
||||
img,
|
||||
.layout-lock-screen-img,
|
||||
.visualizing-demo2,
|
||||
.w-e-panel-tab-content {
|
||||
filter: invert(1) hue-rotate(180deg);
|
||||
}
|
||||
.error img {
|
||||
filter: unset;
|
||||
}
|
||||
// element plus
|
||||
.el-radio-button__original-radio:checked + .el-radio-button__inner,
|
||||
.el-image-viewer__close,
|
||||
.el-image-viewer__actions__inner,
|
||||
.el-image-viewer__next,
|
||||
.el-image-viewer__prev {
|
||||
color: #000000 !important;
|
||||
}
|
||||
// 数据可视化演示
|
||||
.visualizing-container-head {
|
||||
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.02)) !important;
|
||||
.visualizing-container-head-left-text-box {
|
||||
color: #000000 !important;
|
||||
}
|
||||
}
|
||||
.visualizing-container-content-left {
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01)) !important;
|
||||
}
|
||||
.visualizing-container-content-center {
|
||||
background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01)) !important;
|
||||
}
|
||||
.visualizing-container-content-right {
|
||||
background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.01)) !important;
|
||||
}
|
||||
.cropper-modal {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
// 其它菜单等
|
||||
--bg-menuBar: #ffffff !important;
|
||||
--bg-menuBarColor: #303133 !important;
|
||||
--bg-columnsMenuBar: #ffffff !important;
|
||||
--bg-columnsMenuBarColor: #303133 !important;
|
||||
--color-whites: #000000 !important;
|
||||
}
|
||||
@ -809,10 +809,10 @@
|
||||
color: set-color(primary);
|
||||
}
|
||||
.el-active-extend {
|
||||
color: #ffffff !important;
|
||||
color: var(--color-whites) !important;
|
||||
background-color: set-color(primary) !important;
|
||||
i {
|
||||
color: #ffffff !important;
|
||||
color: var(--color-whites) !important;
|
||||
}
|
||||
}
|
||||
#add-is-active {
|
||||
@ -823,7 +823,7 @@
|
||||
}
|
||||
// 菜单收起时且是a链接
|
||||
.el-popper.is-dark a {
|
||||
color: #ffffff !important;
|
||||
color: var(--color-whites) !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
// 菜单收起时鼠标经过背景颜色/字体颜色
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
.icon-selector-warp-row {
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid #ebeef5;
|
||||
border-top: var(--el-border-base);
|
||||
.el-row {
|
||||
padding: 15px;
|
||||
}
|
||||
@ -22,14 +22,14 @@
|
||||
}
|
||||
.icon-selector-warp-item {
|
||||
display: flex;
|
||||
border: 1px solid #ebeef5;
|
||||
border: var(--el-border-base);
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
.icon-selector-warp-item-value {
|
||||
i {
|
||||
font-size: 20px;
|
||||
color: #606266;
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
|
||||
@ -5,3 +5,4 @@
|
||||
@import './iconSelector.scss';
|
||||
@import './media/media.scss';
|
||||
@import './waves.scss';
|
||||
@import './dark.scss';
|
||||
|
||||
@ -24,3 +24,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 页面宽度小于375px
|
||||
------------------------------- */
|
||||
@media screen and (max-width: 376px) {
|
||||
.login-container {
|
||||
.login-content-title {
|
||||
font-size: 18px !important;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,8 +19,8 @@
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
border: 1px solid #ebeef5;
|
||||
background: var(--el-color-white);
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -49,7 +49,7 @@
|
||||
}
|
||||
}
|
||||
.big-data-down-left {
|
||||
color: #303133;
|
||||
color: var(--el-text-color-primary);
|
||||
.sky {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -67,7 +67,7 @@
|
||||
background: #22bc76;
|
||||
border-radius: 2px;
|
||||
padding: 0 5px;
|
||||
color: white;
|
||||
color: var(--color-whites);
|
||||
}
|
||||
}
|
||||
.sky-right {
|
||||
@ -117,7 +117,7 @@
|
||||
text-align: center;
|
||||
border-radius: 100%;
|
||||
flex-shrink: 1;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
}
|
||||
.i-bg1 {
|
||||
background: #22bc76;
|
||||
@ -189,9 +189,9 @@
|
||||
padding: 0 7.5px 15px;
|
||||
.big-data-down-center-one-content {
|
||||
height: 100%;
|
||||
background: white;
|
||||
background: var(--el-color-white);
|
||||
padding: 15px;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
@ -206,11 +206,11 @@
|
||||
.flex-warp-item-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: white;
|
||||
background: var(--el-color-white);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 15px;
|
||||
border: 1px solid #ebeef5;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
@ -317,7 +317,7 @@
|
||||
height: 45px;
|
||||
.task-item {
|
||||
flex: 1;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.task-item-box {
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
background-color: var(--el-color-white);
|
||||
display: flex;
|
||||
.error-flex {
|
||||
margin: auto;
|
||||
@ -59,17 +59,17 @@ export default {
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.left-item-num {
|
||||
color: #d6e0f6;
|
||||
color: var(--el-color-info);
|
||||
font-size: 55px;
|
||||
}
|
||||
.left-item-title {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 15px 0 5px 0;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.left-item-msg {
|
||||
color: #c0bebe;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
margin-bottom: 30px;
|
||||
animation-delay: 0.2s;
|
||||
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
<style scoped lang="scss">
|
||||
.error {
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
background-color: var(--el-color-white);
|
||||
display: flex;
|
||||
.error-flex {
|
||||
margin: auto;
|
||||
@ -57,17 +57,17 @@ export default {
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.left-item-num {
|
||||
color: #d6e0f6;
|
||||
color: var(--el-color-info);
|
||||
font-size: 55px;
|
||||
}
|
||||
.left-item-title {
|
||||
font-size: 20px;
|
||||
color: #333333;
|
||||
color: var(--el-text-color-primary);
|
||||
margin: 15px 0 5px 0;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.left-item-msg {
|
||||
color: #c0bebe;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 12px;
|
||||
margin-bottom: 30px;
|
||||
animation-delay: 0.2s;
|
||||
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
.countup-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: gray;
|
||||
background: var(--el-text-color-secondary);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
@ -140,7 +140,7 @@ export default {
|
||||
}
|
||||
.countup-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
color: var(--color-whites);
|
||||
.countup-card-item-title,
|
||||
.countup-card-item-tip {
|
||||
font-size: 13px;
|
||||
|
||||
107
src/views/fun/dragVerify/index.vue
Normal file
107
src/views/fun/dragVerify/index.vue
Normal file
@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="dragVerify-container">
|
||||
<el-card shadow="hover" header="验证器：基本滑块验证组件">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<DragVerify
|
||||
v-model:isPassing="isPassingOne"
|
||||
text="请按住滑块拖动"
|
||||
successText="验证通过"
|
||||
handlerIcon="el-icon-d-arrow-right"
|
||||
successIcon="el-icon-circle-check"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="验证器：图片滑块组件" class="mt15">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<DragVerifyImg
|
||||
:imgsrc="imgTwo"
|
||||
v-model:isPassing="isPassingTwo"
|
||||
:showRefresh="true"
|
||||
text="请按住滑块拖动"
|
||||
successText="验证通过"
|
||||
handlerIcon="el-icon-d-arrow-right"
|
||||
successIcon="el-icon-circle-check"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="验证器：图片滑块组件(拼图)" class="mt15">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<DragVerifyImgChip
|
||||
:imgsrc="imgThree"
|
||||
v-model:isPassing="isPassingThree"
|
||||
:showRefresh="true"
|
||||
text="请按住滑块拖动"
|
||||
successText="验证通过"
|
||||
handlerIcon="el-icon-d-arrow-right"
|
||||
successIcon="el-icon-circle-check"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<el-card shadow="hover" header="验证器：旋转图片滑块组件" class="mt15">
|
||||
<el-alert
|
||||
title="感谢优秀的 `vue-drag-verify`，项目地址：https://github.com/yimijianfang/vue-drag-verify"
|
||||
type="success"
|
||||
:closable="false"
|
||||
class="mb15"
|
||||
></el-alert>
|
||||
<DragVerifyImgRotate
|
||||
:imgsrc="imgThree"
|
||||
v-model:isPassing="isPassingFour"
|
||||
:showRefresh="true"
|
||||
text="请按住滑块拖动"
|
||||
successText="验证通过"
|
||||
handlerIcon="el-icon-d-arrow-right"
|
||||
successIcon="el-icon-circle-check"
|
||||
/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive } from 'vue';
|
||||
// 基本滑块验证组件
|
||||
import DragVerify from '/@/components/dragVerify/dragVerify.vue';
|
||||
// 图片滑块组件
|
||||
import DragVerifyImg from '/@/components/dragVerify/dragVerifyImg.vue';
|
||||
// 图片滑块组件(拼图)
|
||||
import DragVerifyImgChip from '/@/components/dragVerify/dragVerifyImgChip.vue';
|
||||
// 旋转图片滑块组件
|
||||
import DragVerifyImgRotate from '/@/components/dragVerify/dragVerifyImgRotate.vue';
|
||||
export default {
|
||||
name: 'funDragVerify',
|
||||
components: {
|
||||
DragVerify,
|
||||
DragVerifyImg,
|
||||
DragVerifyImgChip,
|
||||
DragVerifyImgRotate,
|
||||
},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
isPassingOne: false,
|
||||
isPassingTwo: false,
|
||||
isPassingThree: false,
|
||||
isPassingFour: false,
|
||||
imgTwo: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1813762643,1914315241&fm=26&gp=0.jpg',
|
||||
imgThree: 'https://img1.baidu.com/it/u=2813520958,2218166536&fm=26&fmt=auto&gp=0.jpg',
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -55,7 +55,7 @@ export default {
|
||||
.grid-layout-container {
|
||||
.vue-grid-item {
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -334,7 +334,7 @@ export default {
|
||||
.home-card-item {
|
||||
width: 100%;
|
||||
height: 103px;
|
||||
background: gray;
|
||||
background: var(--el-text-color-secondary);
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
&:hover {
|
||||
@ -364,7 +364,7 @@ export default {
|
||||
}
|
||||
.home-card-item-flex {
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
color: var(--color-whites);
|
||||
.home-card-item-title,
|
||||
.home-card-item-tip {
|
||||
font-size: 13px;
|
||||
@ -378,8 +378,8 @@ export default {
|
||||
}
|
||||
}
|
||||
.home-card-first {
|
||||
background: white;
|
||||
border: 1px solid #ebeef5;
|
||||
background: var(--el-color-white);
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
@ -392,9 +392,12 @@ export default {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.home-card-first-right-title {
|
||||
color: var(--el-color-black);
|
||||
}
|
||||
.home-card-first-right-msg {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -408,6 +411,7 @@ export default {
|
||||
margin: auto;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -437,12 +441,12 @@ export default {
|
||||
}
|
||||
.home-dynamic-item-left-time2 {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
.home-dynamic-item-line {
|
||||
height: 60px;
|
||||
border-right: 2px dashed #dfdfdf;
|
||||
border-right: 2px dashed var(--el-border-color-light, #ebeef5);
|
||||
margin: 0 20px;
|
||||
position: relative;
|
||||
i {
|
||||
@ -452,7 +456,7 @@ export default {
|
||||
top: 1px;
|
||||
left: -6px;
|
||||
transform: rotate(46deg);
|
||||
background: white;
|
||||
background: var(--el-color-white);
|
||||
}
|
||||
}
|
||||
.home-dynamic-item-right {
|
||||
@ -460,7 +464,7 @@ export default {
|
||||
.home-dynamic-item-right-title {
|
||||
i {
|
||||
margin-right: 5px;
|
||||
border: 1px solid #dfdfdf;
|
||||
border: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 100%;
|
||||
@ -471,7 +475,7 @@ export default {
|
||||
}
|
||||
.home-dynamic-item-right-label {
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,6 +27,7 @@
|
||||
<Scan v-else />
|
||||
<div class="login-content-main-sacn" @click="isScan = !isScan">
|
||||
<i class="iconfont" :class="isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
|
||||
<div class="login-content-main-sacn-delta"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -114,6 +115,9 @@ export default {
|
||||
letter-spacing: 4px;
|
||||
margin: 15px 0 30px;
|
||||
white-space: nowrap;
|
||||
z-index: 5;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
.login-content-main-sacn {
|
||||
@ -124,18 +128,16 @@ export default {
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
opacity: 0.7;
|
||||
transition: all ease 0.3s;
|
||||
&::before {
|
||||
content: '';
|
||||
&-delta {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 50px solid #ffffff;
|
||||
border-right: 50px solid transparent;
|
||||
width: 35px;
|
||||
height: 70px;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
top: 2px;
|
||||
right: 21px;
|
||||
background: var(--el-color-white);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
@ -143,14 +145,13 @@ export default {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
i {
|
||||
content: '';
|
||||
width: 48px;
|
||||
width: 47px;
|
||||
height: 50px;
|
||||
display: inline-block;
|
||||
font-size: 48px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
font-size: 47px;
|
||||
z-index: 1;
|
||||
right: 2px;
|
||||
top: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -163,7 +164,7 @@ export default {
|
||||
transform: translateX(-50%);
|
||||
bottom: 30px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
color: var(--color-whites);
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
.login-copyright-company {
|
||||
|
||||
159
src/views/pages/dynamicForm/index.vue
Normal file
159
src/views/pages/dynamicForm/index.vue
Normal file
@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="dynamic-form-container">
|
||||
<el-card shadow="hover" header="动态复杂表单">
|
||||
<el-form :model="form" ref="formRulesOneRef" size="small" label-width="100px" class="mt35">
|
||||
<el-row :gutter="35">
|
||||
<el-col
|
||||
:xs="val.xs"
|
||||
:sm="val.sm"
|
||||
:md="val.md"
|
||||
:lg="val.md"
|
||||
:xl="val.xl"
|
||||
class="mb20"
|
||||
v-show="val.isShow"
|
||||
v-for="(val, key) in formData"
|
||||
:key="key"
|
||||
>
|
||||
<template v-if="val.type !== ''">
|
||||
<el-form-item
|
||||
:label="val.label"
|
||||
:prop="val.prop"
|
||||
:rules="[{ required: val.required, message: `${val.label}不能为空`, trigger: val.type === 'input' ? 'blur' : 'change' }]"
|
||||
v-if="val.type !== ''"
|
||||
>
|
||||
<el-input
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'input'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
<el-date-picker
|
||||
v-model="form[val.prop]"
|
||||
type="date"
|
||||
:placeholder="val.placeholder"
|
||||
v-else-if="val.type === 'date'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-select
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
v-else-if="val.type === 'select'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
>
|
||||
<el-option v-for="item in val.options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
||||
</el-select>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="form[val.prop]"
|
||||
:placeholder="val.placeholder"
|
||||
clearable
|
||||
v-if="val.type === 'textarea'"
|
||||
style="width: 100%"
|
||||
:disabled="val.disabled"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-row :gutter="35" v-for="(v, k) in form.list" :key="k">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="年度" :prop="`list[${k}].year`" :rules="[{ required: true, message: `年度不能为空`, trigger: 'blur' }]">
|
||||
<template #label>
|
||||
<el-button type="primary" icon="el-icon-plus" circle size="mini" @click="onAddRow" v-if="k === 0"></el-button>
|
||||
<el-button type="danger" icon="el-icon-delete" circle size="mini" @click="onDelRow(k)" v-else></el-button>
|
||||
<span class="ml10">年度</span>
|
||||
</template>
|
||||
<el-input v-model="form.list[k].year" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="月度" :prop="`list[${k}].month`" :rules="[{ required: true, message: `月度不能为空`, trigger: 'blur' }]">
|
||||
<el-input v-model="form.list[k].month" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
|
||||
<el-form-item label="日度" :prop="`list[${k}].day`" :rules="[{ required: true, message: `日度不能为空`, trigger: 'blur' }]">
|
||||
<el-input v-model="form.list[k].day" style="width: 100%" placeholder="请输入"> </el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-row class="flex mt15">
|
||||
<div class="flex-margin">
|
||||
<el-button size="small" icon="el-icon-refresh-right" @click="onResetForm">重置表单</el-button>
|
||||
<el-button size="small" type="primary" icon="iconfont icon-shuxing" @click="onSubmitForm">验证表单</el-button>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { toRefs, reactive, onMounted, getCurrentInstance } from 'vue';
|
||||
import { formData } from './mock';
|
||||
export default {
|
||||
name: 'pagesDynamicForm',
|
||||
setup() {
|
||||
const { proxy } = getCurrentInstance() as any;
|
||||
const state = reactive({
|
||||
formData,
|
||||
form: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
occupation: '',
|
||||
list: [
|
||||
{
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
},
|
||||
],
|
||||
remarks: '',
|
||||
},
|
||||
});
|
||||
// 新增行
|
||||
const onAddRow = () => {
|
||||
state.form.list.push({
|
||||
year: '',
|
||||
month: '',
|
||||
day: '',
|
||||
});
|
||||
};
|
||||
// 删除行
|
||||
const onDelRow = (k) => {
|
||||
state.form.list.splice(k, 1);
|
||||
};
|
||||
// 表单验证
|
||||
const onSubmitForm = () => {
|
||||
proxy.$refs.formRulesOneRef.validate((valid) => {
|
||||
if (valid) {
|
||||
proxy.$message.success('验证成功');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 重置表单
|
||||
const onResetForm = () => {
|
||||
proxy.$refs.formRulesOneRef.resetFields();
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {});
|
||||
return {
|
||||
onAddRow,
|
||||
onDelRow,
|
||||
onSubmitForm,
|
||||
onResetForm,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
119
src/views/pages/dynamicForm/mock.ts
Normal file
119
src/views/pages/dynamicForm/mock.ts
Normal file
@ -0,0 +1,119 @@
|
||||
// 表单数据选项(自行扩展)
|
||||
export const formData = [
|
||||
{
|
||||
label: '姓名',
|
||||
prop: 'name',
|
||||
placeholder: '请输入姓名',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'input',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '邮箱',
|
||||
prop: 'email',
|
||||
placeholder: '请输入用户邮箱',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'input',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '登陆时间',
|
||||
prop: 'autograph',
|
||||
placeholder: '选择时间',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'date',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '职务',
|
||||
prop: 'occupation',
|
||||
placeholder: '请选择职务',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'select',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
options: [
|
||||
{
|
||||
label: '计算机 / 互联网 / 通信',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '生产 / 工艺 / 制造',
|
||||
value: '2',
|
||||
},
|
||||
{
|
||||
label: '医疗 / 护理 / 制药',
|
||||
value: '3',
|
||||
},
|
||||
],
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 12,
|
||||
md: 8,
|
||||
lg: 6,
|
||||
xl: 4,
|
||||
},
|
||||
{
|
||||
label: '',
|
||||
prop: '',
|
||||
placeholder: '',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: '',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 24,
|
||||
xl: 24,
|
||||
},
|
||||
{
|
||||
label: '备注',
|
||||
prop: 'remarks',
|
||||
placeholder: '请输入',
|
||||
clearable: true,
|
||||
disabled: false,
|
||||
required: true,
|
||||
type: 'textarea',
|
||||
i18n: false,
|
||||
i18nText: '',
|
||||
isShow: true,
|
||||
xs: 24,
|
||||
sm: 24,
|
||||
md: 24,
|
||||
lg: 24,
|
||||
xl: 24,
|
||||
},
|
||||
];
|
||||
@ -45,7 +45,7 @@ export default {
|
||||
.waterfall-first-item {
|
||||
width: 100%;
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:nth-of-type(3n + 1) {
|
||||
@ -73,7 +73,7 @@ export default {
|
||||
.waterfall-last-item {
|
||||
height: 100%;
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:hover {
|
||||
|
||||
@ -89,7 +89,7 @@ export default {
|
||||
.waterfall-first-item {
|
||||
width: 100%;
|
||||
background: var(--color-primary);
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 3px;
|
||||
&:nth-of-type(3n + 1) {
|
||||
|
||||
143
src/views/pages/workflow/index.vue
Normal file
143
src/views/pages/workflow/index.vue
Normal file
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="workflow-form-container">
|
||||
<div class="layout-view-bg-white flex" :style="{ height: `calc(100vh - ${setViewHeight}` }">
|
||||
<div class="workflow">
|
||||
<div class="workflow-left">
|
||||
<el-scrollbar>
|
||||
<div :id="`left${key}`" v-for="(val, key) in leftNavList" :key="key">
|
||||
<div class="workflow-left-title">
|
||||
<span>{{ val.title }}</span>
|
||||
<i :class="val.isOpen ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
|
||||
</div>
|
||||
<div class="workflow-left-item" v-for="(v, k) in val.children" :key="k">
|
||||
<i :class="v.icon"></i>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="workflow-right">
|
||||
<div id="right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, toRefs, reactive, computed, onMounted } from 'vue';
|
||||
import Sortable from 'sortablejs';
|
||||
import { useStore } from '/@/store/index';
|
||||
import { leftNavList } from './mock';
|
||||
export default defineComponent({
|
||||
name: 'pagesWorkflow',
|
||||
setup() {
|
||||
const store = useStore();
|
||||
const state = reactive({
|
||||
leftNavList,
|
||||
});
|
||||
// 设置 view 的高度
|
||||
const setViewHeight = computed(() => {
|
||||
let { isTagsview } = store.state.themeConfig.themeConfig;
|
||||
let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
|
||||
if (isTagsViewCurrenFull) {
|
||||
return `30px`;
|
||||
} else {
|
||||
if (isTagsview) return `114px`;
|
||||
else return `80px`;
|
||||
}
|
||||
});
|
||||
// 初始化拖动
|
||||
const initSortable = () => {
|
||||
state.leftNavList.forEach((v, k) => {
|
||||
Sortable.create(document.getElementById(`left${k}`), {
|
||||
group: { name: 'vue-next-admin-1', pull: 'clone', put: false },
|
||||
animation: 1000,
|
||||
sort: false,
|
||||
draggable: '.workflow-left-item',
|
||||
direction: 'vertical',
|
||||
forceFallback: true,
|
||||
onEnd: function (evt) {
|
||||
console.log(evt);
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
Sortable.create(document.getElementById(`right`), {
|
||||
group: { name: 'vue-next-admin-2', pull: 'clone', put: true },
|
||||
animation: 1000,
|
||||
onEnd: function (evt) {
|
||||
console.log(evt);
|
||||
},
|
||||
});
|
||||
};
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
initSortable();
|
||||
});
|
||||
return {
|
||||
setViewHeight,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.workflow-form-container {
|
||||
.workflow {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.workflow-left {
|
||||
width: 220px;
|
||||
::v-deep(.el-collapse-item__content) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.workflow-left-title {
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
border-top: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
color: --el-text-color-primary;
|
||||
cursor: pointer;
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.workflow-left-item {
|
||||
display: inline-block;
|
||||
width: 33.33%;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
i {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 25px;
|
||||
color: var(--el-text-color-secondary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
&:hover {
|
||||
i {
|
||||
color: var(--el-text-color-regular);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.workflow-right {
|
||||
flex: 1;
|
||||
border: 1px solid red;
|
||||
#right {
|
||||
border: 1px solid yellow;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
60
src/views/pages/workflow/mock.ts
Normal file
60
src/views/pages/workflow/mock.ts
Normal file
@ -0,0 +1,60 @@
|
||||
// 左侧菜单导航数据
|
||||
export const leftNavList = [
|
||||
{
|
||||
title: '录像',
|
||||
icon: 'el-icon-video-camera-solid',
|
||||
isOpen: true,
|
||||
children: [
|
||||
{
|
||||
icon: 'el-icon-s-custom',
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-s-opportunity',
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-s-data',
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-s-check',
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-s-grid',
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-menu',
|
||||
},
|
||||
],
|
||||
form: {},
|
||||
},
|
||||
{
|
||||
title: '文本',
|
||||
isOpen: true,
|
||||
icon: 'el-icon-s-order',
|
||||
children: [
|
||||
{
|
||||
icon: 'el-icon-share',
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-s-shop',
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-s-marketing',
|
||||
},
|
||||
],
|
||||
form: {},
|
||||
},
|
||||
{
|
||||
title: '电视',
|
||||
isOpen: true,
|
||||
icon: 'el-icon-s-platform',
|
||||
children: [
|
||||
{
|
||||
icon: 'el-icon-s-flag',
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-s-comment',
|
||||
},
|
||||
],
|
||||
form: {},
|
||||
},
|
||||
];
|
||||
@ -248,7 +248,7 @@ export default {
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
.personal-item-label {
|
||||
color: gray;
|
||||
color: var(--el-text-color-secondary);
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
.personal-item-value {
|
||||
@ -260,7 +260,7 @@ export default {
|
||||
.personal-info {
|
||||
.personal-info-more {
|
||||
float: right;
|
||||
color: gray;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
&:hover {
|
||||
color: var(--color-primary);
|
||||
@ -278,7 +278,7 @@ export default {
|
||||
.personal-info-li-title {
|
||||
display: inline-block;
|
||||
@include text-ellipsis(1);
|
||||
color: grey;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
& a:hover {
|
||||
@ -294,7 +294,7 @@ export default {
|
||||
.personal-recommend {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
@ -330,7 +330,7 @@ export default {
|
||||
.personal-edit-title {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
color: #606266;
|
||||
color: var(--el-text-color-regular);
|
||||
&::after {
|
||||
content: '';
|
||||
width: 2px;
|
||||
@ -343,7 +343,7 @@ export default {
|
||||
}
|
||||
}
|
||||
.personal-edit-safe-box {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
padding: 15px 0;
|
||||
.personal-edit-safe-item {
|
||||
width: 100%;
|
||||
@ -354,11 +354,11 @@ export default {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.personal-edit-safe-item-left-label {
|
||||
color: #606266;
|
||||
color: var(--el-text-color-regular);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.personal-edit-safe-item-left-value {
|
||||
color: gray;
|
||||
color: var(--el-text-color-secondary);
|
||||
@include text-ellipsis(1);
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
@ -971,7 +971,7 @@ $titleWidth: 240px;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
color: var(--color-whites);
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.02));
|
||||
z-index: 3;
|
||||
.visualizing-container-head-left {
|
||||
@ -1176,11 +1176,11 @@ $titleWidth: 240px;
|
||||
.visualizing-container-title {
|
||||
max-width: $titleWidth;
|
||||
font-size: 14px;
|
||||
color: #ffffff;
|
||||
color: var(--color-whites);
|
||||
opacity: 0.8;
|
||||
padding: 0 5px;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
border-image: linear-gradient(to right, #ffffff, rgba(22, 207, 208, 0.02)) 1 10;
|
||||
border-bottom: 1px solid var(--color-whites);
|
||||
border-image: linear-gradient(to right, var(--color-whites), rgba(22, 207, 208, 0.02)) 1 10;
|
||||
position: relative;
|
||||
i {
|
||||
padding-right: 5px;
|
||||
@ -1193,7 +1193,7 @@ $titleWidth: 240px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
background: linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.5));
|
||||
background: linear-gradient(to top, var(--color-whites), rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
}
|
||||
.visualizing-container-title-colorful {
|
||||
|
||||
@ -39,6 +39,7 @@ const viteConfig: UserConfig = {
|
||||
outDir: 'dist',
|
||||
minify: 'esbuild',
|
||||
sourcemap: false,
|
||||
chunkSizeWarningLimit: 1500,
|
||||
},
|
||||
define: {
|
||||
__VUE_I18N_LEGACY_API__: JSON.stringify(false),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user