toesbieya
6 years ago
|
Before Width: | Height: | Size: 160 KiB After Width: | Height: | Size: 160 KiB |
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 96 KiB |
|
Before Width: | Height: | Size: 4.7 KiB After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,223 @@ |
|||||||
|
.puzzle-container { |
||||||
|
position: absolute; |
||||||
|
box-shadow: 0 0 10px #cccccc; |
||||||
|
border: 1px solid #cccccc; |
||||||
|
background: #ffffff; |
||||||
|
|
||||||
|
.puzzle-text-container { |
||||||
|
&:hover { |
||||||
|
overflow: visible !important; |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-text-tip { |
||||||
|
position: absolute; |
||||||
|
top: -32px; |
||||||
|
left: 10px; |
||||||
|
border-radius: 2px; |
||||||
|
padding: 0 4px; |
||||||
|
height: 22px; |
||||||
|
min-width: 50px; |
||||||
|
line-height: 22px; |
||||||
|
background-color: #5F5F5F; |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 12px; |
||||||
|
text-align: center; |
||||||
|
color: white; |
||||||
|
|
||||||
|
&::before { |
||||||
|
display: block; |
||||||
|
position: absolute; |
||||||
|
bottom: -6px; |
||||||
|
left: 0; |
||||||
|
content: ''; |
||||||
|
border-style: solid; |
||||||
|
border-width: 4px 6px; |
||||||
|
border-color: #5F5F5F transparent transparent #5F5F5F; |
||||||
|
width: 0; |
||||||
|
height: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-view .puzzle-image-loading__icon, |
||||||
|
.slider-container, |
||||||
|
.slider-container .slider-btn, |
||||||
|
.puzzle-footer .puzzle-small .puzzle-close, |
||||||
|
.puzzle-footer .puzzle-small .puzzle-refresh { |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-image: url(/static/img/sprite.1.2.4.png); |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-view { |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
margin: 10px 10px 0; |
||||||
|
|
||||||
|
.puzzle-image-loading { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background-color: #e5e5e5; |
||||||
|
padding-top: 10%; |
||||||
|
|
||||||
|
&__icon { |
||||||
|
background-size: 764.70588%; |
||||||
|
background-position: 0 70.70218%; |
||||||
|
margin: 11% auto 10px; |
||||||
|
width: 34px; |
||||||
|
height: 26px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
&__text { |
||||||
|
text-align: center; |
||||||
|
font-size: 14px; |
||||||
|
margin-bottom: 1%; |
||||||
|
color: #b2b2b2; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
img { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-lost-box { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
canvas { |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
z-index: 22; |
||||||
|
} |
||||||
|
|
||||||
|
.verify-result { |
||||||
|
position: absolute; |
||||||
|
z-index: 999; |
||||||
|
color: white; |
||||||
|
height: 24px; |
||||||
|
line-height: 24px; |
||||||
|
left: 0; |
||||||
|
bottom: -25px; |
||||||
|
font-size: 14px; |
||||||
|
width: 100%; |
||||||
|
transition: bottom 0.3s; |
||||||
|
text-indent: 16px; |
||||||
|
|
||||||
|
&.verify-success { |
||||||
|
background-color: $--color-success |
||||||
|
} |
||||||
|
|
||||||
|
&.verify-fail { |
||||||
|
background-color: $--color-danger |
||||||
|
} |
||||||
|
|
||||||
|
&.show-result { |
||||||
|
bottom: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.slider-container { |
||||||
|
position: relative; |
||||||
|
margin: 5.39% 3.24%; |
||||||
|
width: 93.52%; |
||||||
|
padding: 0 0 13.67% 0; |
||||||
|
background-color: white; |
||||||
|
background-size: 100%; |
||||||
|
background-position: 0 0; |
||||||
|
|
||||||
|
.slider-track { |
||||||
|
position: absolute; |
||||||
|
top: 50%; |
||||||
|
margin: -19px 0 0 0; |
||||||
|
padding: 0 0 0 25%; |
||||||
|
|
||||||
|
.slider-tip { |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
opacity: 0; |
||||||
|
transition: opacity .5s; |
||||||
|
line-height: 38px; |
||||||
|
font-size: 14px; |
||||||
|
text-align: center; |
||||||
|
white-space: nowrap; |
||||||
|
color: #88949d; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.slider-btn { |
||||||
|
position: absolute; |
||||||
|
margin: -4.62% 0 0 -2.31%; |
||||||
|
width: 25.38%; |
||||||
|
padding: 0 0 25.38% 0; |
||||||
|
cursor: pointer; |
||||||
|
background-size: 393.93939%; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-footer { |
||||||
|
position: relative; |
||||||
|
border-top: 1px solid #EEEEEE; |
||||||
|
width: 100%; |
||||||
|
margin: 0; |
||||||
|
padding: 0 0 17.27% 0; |
||||||
|
|
||||||
|
.puzzle-small { |
||||||
|
position: absolute; |
||||||
|
left: 5.1%; |
||||||
|
top: 50%; |
||||||
|
margin-top: -4.13%; |
||||||
|
padding: 0 0 8.27% 0; |
||||||
|
width: 40.45%; |
||||||
|
height: 0; |
||||||
|
|
||||||
|
.puzzle-close, .puzzle-refresh { |
||||||
|
margin-left: 8.9%; |
||||||
|
width: 17.8%; |
||||||
|
cursor: pointer; |
||||||
|
text-decoration: none; |
||||||
|
vertical-align: top; |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
height: 0; |
||||||
|
padding-bottom: 17.8%; |
||||||
|
overflow: hidden; |
||||||
|
background-size: 1300%; |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-close { |
||||||
|
margin-left: 0; |
||||||
|
background-position: 0 44.86874%; |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-refresh { |
||||||
|
background-position: 0 81.38425%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.puzzle-shake { |
||||||
|
animation: shake 0.2s linear 3 both; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes shake { |
||||||
|
25% { |
||||||
|
transform: translate3d(-6px, 0, 0) |
||||||
|
} |
||||||
|
75% { |
||||||
|
transform: translate3d(6px, 0, 0) |
||||||
|
} |
||||||
|
100% { |
||||||
|
transform: translate3d(0, 0, 0) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
.disabled .el-upload--picture-card { |
||||||
|
display: none; |
||||||
|
} |
||||||
|
|
||||||
|
.el-upload-list--picture-card { |
||||||
|
.el-progress { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
.el-progress-circle { |
||||||
|
height: 100% !important; |
||||||
|
width: 100% !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.progress-mask { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
background-color: #fff; |
||||||
|
opacity: 0.9; |
||||||
|
|
||||||
|
.el-progress__text { |
||||||
|
color: $--color-primary; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.el-upload-list__item-thumbnail { |
||||||
|
object-fit: cover; |
||||||
|
} |
||||||
|
|
||||||
|
.upload-tooltip { |
||||||
|
max-width: 146px; |
||||||
|
} |
||||||
@ -1,66 +1,50 @@ |
|||||||
/** |
|
||||||
* @param {string} url |
|
||||||
* @returns {Boolean} |
|
||||||
*/ |
|
||||||
export function validURL(url) { |
|
||||||
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/ |
|
||||||
return reg.test(url) |
|
||||||
} |
|
||||||
|
|
||||||
export function isExternal(path) { |
export function isExternal(path) { |
||||||
return /^(https?:|mailto:|tel:)/.test(path) |
return /^(https?:|mailto:|tel:)/.test(path) |
||||||
} |
} |
||||||
|
|
||||||
/** |
|
||||||
* @param {string} str |
|
||||||
* @returns {Boolean} |
|
||||||
*/ |
|
||||||
export function validLowerCase(str) { |
|
||||||
const reg = /^[a-z]+$/ |
|
||||||
return reg.test(str) |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* @param {string} str |
|
||||||
* @returns {Boolean} |
|
||||||
*/ |
|
||||||
export function validUpperCase(str) { |
|
||||||
const reg = /^[A-Z]+$/ |
|
||||||
return reg.test(str) |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* @param {string} str |
|
||||||
* @returns {Boolean} |
|
||||||
*/ |
|
||||||
export function validAlphabets(str) { |
|
||||||
const reg = /^[A-Za-z]+$/ |
|
||||||
return reg.test(str) |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* @param {string} email |
|
||||||
* @returns {Boolean} |
|
||||||
*/ |
|
||||||
export function validEmail(email) { |
export function validEmail(email) { |
||||||
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ |
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ |
||||||
return reg.test(email) |
return reg.test(email) |
||||||
} |
} |
||||||
|
|
||||||
/** |
|
||||||
* @param {string} str |
|
||||||
* @returns {Boolean} |
|
||||||
*/ |
|
||||||
export function isString(str) { |
export function isString(str) { |
||||||
return typeof str === 'string' || str instanceof String |
return typeof str === 'string' || str instanceof String |
||||||
} |
} |
||||||
|
|
||||||
export function isInteger(v) { |
export function isInteger(v) { |
||||||
let t = parseFloat(v) |
const t = parseFloat(v) |
||||||
return t.toString() !== 'NaN' && t < 2147483647 && t > -2147483648 |
return t.toString() !== 'NaN' && t < 2147483647 && t > -2147483648 |
||||||
} |
} |
||||||
|
|
||||||
export function isImage(str) { |
export function isImage(suffix) { |
||||||
let reg = /\.(png|jpg|gif|jpeg|webp|bmp)$/ |
const reg = /\.(png|jpg|gif|jpeg|webp|bmp)$/ |
||||||
return reg.test(str.toLowerCase()) |
return reg.test(suffix.toLowerCase()) |
||||||
|
} |
||||||
|
|
||||||
|
export function isDoc(suffix) { |
||||||
|
return /\.(doc|docx)$/.test(suffix.toLowerCase()) |
||||||
|
} |
||||||
|
|
||||||
|
export function isPdf(suffix) { |
||||||
|
return /\.pdf$/.test(suffix.toLowerCase()) |
||||||
|
} |
||||||
|
|
||||||
|
export function isPpt(suffix) { |
||||||
|
return /\.(ppt|pptx)$/.test(suffix.toLowerCase()) |
||||||
|
} |
||||||
|
|
||||||
|
export function isRar(suffix) { |
||||||
|
return /\.rar$/.test(suffix.toLowerCase()) |
||||||
|
} |
||||||
|
|
||||||
|
export function isXls(suffix) { |
||||||
|
return /\.(xls|xlsx)$/.test(suffix.toLowerCase()) |
||||||
|
} |
||||||
|
|
||||||
|
export function isTxt(suffix) { |
||||||
|
return /\.txt$/.test(suffix.toLowerCase()) |
||||||
|
} |
||||||
|
|
||||||
|
export function isZip(suffix) { |
||||||
|
return /\.zip$/.test(suffix.toLowerCase()) |
||||||
} |
} |
||||||
|
|||||||