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) { |
||||
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) { |
||||
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) |
||||
} |
||||
|
||||
/** |
||||
* @param {string} str |
||||
* @returns {Boolean} |
||||
*/ |
||||
export function isString(str) { |
||||
return typeof str === 'string' || str instanceof String |
||||
} |
||||
|
||||
export function isInteger(v) { |
||||
let t = parseFloat(v) |
||||
const t = parseFloat(v) |
||||
return t.toString() !== 'NaN' && t < 2147483647 && t > -2147483648 |
||||
} |
||||
|
||||
export function isImage(str) { |
||||
let reg = /\.(png|jpg|gif|jpeg|webp|bmp)$/ |
||||
return reg.test(str.toLowerCase()) |
||||
export function isImage(suffix) { |
||||
const reg = /\.(png|jpg|gif|jpeg|webp|bmp)$/ |
||||
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()) |
||||
} |
||||
|
||||