配置 stylelint
This commit is contained in:
mwx816443
parent
6f80263b42
commit
cd9eec3148
|
|
@ -0,0 +1 @@
|
||||||
|
src/assets
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
{
|
||||||
|
"extends": "stylelint-config-sass-guidelines",
|
||||||
|
"plugins": [
|
||||||
|
"stylelint-order"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"property-no-vendor-prefix": null,
|
||||||
|
"declaration-block-semicolon-newline-after": "always-multi-line",
|
||||||
|
"declaration-property-value-blacklist": null,
|
||||||
|
"selector-no-qualifying-type": null,
|
||||||
|
"selector-pseudo-element-no-unknown": null,
|
||||||
|
"selector-no-vendor-prefix": null,
|
||||||
|
"media-feature-name-no-vendor-prefix": null,
|
||||||
|
"scss/at-import-partial-extension-blacklist": null,
|
||||||
|
"scss/selector-no-redundant-nesting-selector": null,
|
||||||
|
"scss/at-mixin-pattern": null,
|
||||||
|
"scss/dollar-variable-pattern": null,
|
||||||
|
"order/properties-alphabetical-order": null,
|
||||||
|
"selector-max-id": null,
|
||||||
|
"property-no-unknown": null,
|
||||||
|
"color-named": null,
|
||||||
|
"value-no-vendor-prefix": null,
|
||||||
|
"selector-class-pattern": null,
|
||||||
|
"max-nesting-depth": 10,
|
||||||
|
"selector-max-compound-selectors": 10
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
"build:stage": "vue-cli-service build --mode staging",
|
"build:stage": "vue-cli-service build --mode staging",
|
||||||
"preview": "node build/index.js --preview",
|
"preview": "node build/index.js --preview",
|
||||||
"lint": "eslint --ext .js,.vue src",
|
"lint": "eslint --ext .js,.vue src",
|
||||||
|
"lint:css": "stylelint --aei .vue,.html src",
|
||||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||||
"test:ci": "npm run lint && npm run test:unit",
|
"test:ci": "npm run lint && npm run test:unit",
|
||||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
||||||
|
|
@ -98,6 +99,9 @@
|
||||||
"sass-loader": "^7.1.0",
|
"sass-loader": "^7.1.0",
|
||||||
"script-ext-html-webpack-plugin": "2.1.3",
|
"script-ext-html-webpack-plugin": "2.1.3",
|
||||||
"serve-static": "^1.13.2",
|
"serve-static": "^1.13.2",
|
||||||
|
"stylelint": "13.5.0",
|
||||||
|
"stylelint-config-sass-guidelines": "7.0.0",
|
||||||
|
"stylelint-order": "4.0.0",
|
||||||
"svg-sprite-loader": "4.1.3",
|
"svg-sprite-loader": "4.1.3",
|
||||||
"svgo": "1.2.0",
|
"svgo": "1.2.0",
|
||||||
"vue-template-compiler": "2.6.10"
|
"vue-template-compiler": "2.6.10"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<transition :name="transitionName">
|
<transition :name="transitionName">
|
||||||
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
|
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
|
||||||
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
|
<svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="back-to-icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px;width: 16px;"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -96,15 +96,15 @@ export default {
|
||||||
|
|
||||||
.fade-enter-active,
|
.fade-enter-active,
|
||||||
.fade-leave-active {
|
.fade-leave-active {
|
||||||
transition: opacity .5s;
|
transition: opacity 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-enter,
|
.fade-enter,
|
||||||
.fade-leave-to {
|
.fade-leave-to {
|
||||||
opacity: 0
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back-to-ceiling .Icon {
|
.back-to-ceiling .back-to-icon {
|
||||||
fill: #9aaabf;
|
fill: #9aaabf;
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dndList">
|
<div class="dnd-list">
|
||||||
<div :style="{width:width1}" class="dndList-list">
|
<div :style="{width:width1}" class="dnd-list-container">
|
||||||
<h3>{{ list1Title }}</h3>
|
<h3>{{ list1Title }}</h3>
|
||||||
<draggable :set-data="setData" :list="list1" group="article" class="dragArea">
|
<draggable :set-data="setData" :list="list1" group="article" class="drag-area">
|
||||||
<div v-for="element in list1" :key="element.id" class="list-complete-item">
|
<div v-for="element in list1" :key="element.id" class="list-complete-item">
|
||||||
<div class="list-complete-item-handle">
|
<div class="list-complete-item-handle">
|
||||||
{{ element.id }}[{{ element.author }}] {{ element.title }}
|
{{ element.id }}[{{ element.author }}] {{ element.title }}
|
||||||
</div>
|
</div>
|
||||||
<div style="position:absolute;right:0px;">
|
<div style="position: absolute;right: 0;">
|
||||||
<span style="float: right;margin-top: -20px;margin-right: 5px;" @click="deleteEle(element)">
|
<span style="float: right;margin-top: -20px;margin-right: 5px;" @click="deleteEle(element)">
|
||||||
<i style="color:#ff4949" class="el-icon-delete" />
|
<i style="color: #ff4949;" class="el-icon-delete" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</draggable>
|
</draggable>
|
||||||
</div>
|
</div>
|
||||||
<div :style="{width:width2}" class="dndList-list">
|
<div :style="{width:width2}" class="dnd-list-container">
|
||||||
<h3>{{ list2Title }}</h3>
|
<h3>{{ list2Title }}</h3>
|
||||||
<draggable :list="list2" group="article" class="dragArea">
|
<draggable :list="list2" group="article" class="drag-area">
|
||||||
<div v-for="element in list2" :key="element.id" class="list-complete-item">
|
<div v-for="element in list2" :key="element.id" class="list-complete-item">
|
||||||
<div class="list-complete-item-handle2" @click="pushEle(element)">
|
<div class="list-complete-item-handle2" @click="pushEle(element)">
|
||||||
{{ element.id }} [{{ element.author }}] {{ element.title }}
|
{{ element.id }} [{{ element.author }}] {{ element.title }}
|
||||||
|
|
@ -105,21 +105,25 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.dndList {
|
.dnd-list {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
&:after {
|
|
||||||
content: "";
|
&::after {
|
||||||
|
content: '';
|
||||||
display: table;
|
display: table;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
.dndList-list {
|
|
||||||
|
.dnd-list-container {
|
||||||
float: left;
|
float: left;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-right: 2%;
|
margin-right: 2%;
|
||||||
}
|
}
|
||||||
.dragArea {
|
|
||||||
|
.drag-area {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
|
|
@ -152,11 +156,11 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-complete-item.sortable-chosen {
|
.list-complete-item.sortable-chosen {
|
||||||
background: #4AB7BD;
|
background: #4ab7bd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-complete-item.sortable-ghost {
|
.list-complete-item.sortable-ghost {
|
||||||
background: #30B08F;
|
background: #30b08f;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-complete-enter,
|
.list-complete-enter,
|
||||||
|
|
|
||||||
|
|
@ -50,7 +50,7 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.drag-select >>> .sortable-ghost {
|
.drag-select >>> .sortable-ghost {
|
||||||
opacity: .8;
|
opacity: 0.8;
|
||||||
color: #fff !important;
|
color: #fff !important;
|
||||||
background: #42b983 !important;
|
background: #42b983 !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -207,19 +207,19 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.dropzone {
|
.dropzone {
|
||||||
border: 2px solid #E5E5E5;
|
border: 2px solid #e5e5e5;
|
||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
color: #777;
|
color: #777;
|
||||||
transition: background-color .2s linear;
|
transition: background-color 0.2s linear;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropzone:hover {
|
.dropzone:hover {
|
||||||
background-color: #F6F6F6;
|
background-color: #f6f6f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: #CCC;
|
color: #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropzone .dz-image img {
|
.dropzone .dz-image img {
|
||||||
|
|
@ -232,7 +232,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropzone .dz-preview .dz-image {
|
.dropzone .dz-preview .dz-image {
|
||||||
border-radius: 0px;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropzone .dz-preview:hover .dz-image img {
|
.dropzone .dz-preview:hover .dz-image img {
|
||||||
|
|
@ -243,15 +243,16 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropzone .dz-preview .dz-details {
|
.dropzone .dz-preview .dz-details {
|
||||||
bottom: 0px;
|
bottom: 0;
|
||||||
top: 0px;
|
top: 0;
|
||||||
color: white;
|
color: white;
|
||||||
background-color: rgba(33, 150, 243, 0.8);
|
background-color: rgba(33, 150, 243, 0.8);
|
||||||
transition: opacity .2s linear;
|
transition: opacity 0.2s linear;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
|
.dropzone .dz-preview .dz-details .dz-filename span,
|
||||||
|
.dropzone .dz-preview .dz-details .dz-size span {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -285,12 +286,14 @@ export default {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
|
.dropzone .dz-preview .dz-success-mark,
|
||||||
|
.dropzone .dz-preview .dz-error-mark {
|
||||||
margin-left: -40px;
|
margin-left: -40px;
|
||||||
margin-top: -50px;
|
margin-top: -50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
|
.dropzone .dz-preview .dz-success-mark i,
|
||||||
|
.dropzone .dz-preview .dz-error-mark i {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,30 +25,33 @@
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.github-corner:hover .octo-arm {
|
.github-corner:hover .octo-arm {
|
||||||
animation: octocat-wave 560ms ease-in-out
|
animation: octocat-wave 560ms ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes octocat-wave {
|
@keyframes octocat-wave {
|
||||||
0%,
|
0%,
|
||||||
100% {
|
100% {
|
||||||
transform: rotate(0)
|
transform: rotate(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
20%,
|
20%,
|
||||||
60% {
|
60% {
|
||||||
transform: rotate(-25deg)
|
transform: rotate(-25deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
40%,
|
40%,
|
||||||
80% {
|
80% {
|
||||||
transform: rotate(10deg)
|
transform: rotate(10deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width:500px) {
|
@media (max-width:500px) {
|
||||||
.github-corner:hover .octo-arm {
|
.github-corner:hover .octo-arm {
|
||||||
animation: none
|
animation: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.github-corner .octo-arm {
|
.github-corner .octo-arm {
|
||||||
animation: octocat-wave 560ms ease-in-out
|
animation: octocat-wave 560ms ease-in-out;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -819,46 +819,31 @@ export default {
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
@-webkit-keyframes vicp_progress {
|
|
||||||
0% {
|
|
||||||
background-position-y: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
background-position-y: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes vicp_progress {
|
@keyframes vicp_progress {
|
||||||
0% {
|
0% {
|
||||||
background-position-y: 0;
|
background-position-y: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
background-position-y: 40px;
|
background-position-y: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@-webkit-keyframes vicp {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
-webkit-transform: scale(0) translatey(-60px);
|
|
||||||
transform: scale(0) translatey(-60px);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
-webkit-transform: scale(1) translatey(0);
|
|
||||||
transform: scale(1) translatey(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes vicp {
|
@keyframes vicp {
|
||||||
0% {
|
0% {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-transform: scale(0) translatey(-60px);
|
-webkit-transform: scale(0) translatey(-60px);
|
||||||
transform: scale(0) translatey(-60px);
|
transform: scale(0) translatey(-60px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
-webkit-transform: scale(1) translatey(0);
|
-webkit-transform: scale(1) translatey(0);
|
||||||
transform: scale(1) translatey(0);
|
transform: scale(1) translatey(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vue-image-crop-upload {
|
.vue-image-crop-upload {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -874,8 +859,8 @@ export default {
|
||||||
background-color: rgba(0, 0, 0, 0.65);
|
background-color: rgba(0, 0, 0, 0.65);
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
-moz-tap-highlight-color: transparent;
|
-moz-tap-highlight-color: transparent;
|
||||||
}
|
|
||||||
.vue-image-crop-upload .vicp-wrap {
|
.vicp-wrap {
|
||||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
@ -895,13 +880,13 @@ export default {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
-webkit-animation: vicp 0.12s ease-in;
|
-webkit-animation: vicp 0.12s ease-in;
|
||||||
animation: vicp 0.12s ease-in;
|
animation: vicp 0.12s ease-in;
|
||||||
}
|
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-close {
|
.vicp-close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: -30px;
|
right: -30px;
|
||||||
top: -30px;
|
top: -30px;
|
||||||
}
|
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4 {
|
.vicp-icon4 {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
|
|
@ -914,12 +899,12 @@ export default {
|
||||||
-webkit-transform: rotate(0);
|
-webkit-transform: rotate(0);
|
||||||
-ms-transform: rotate(0);
|
-ms-transform: rotate(0);
|
||||||
transform: rotate(0);
|
transform: rotate(0);
|
||||||
}
|
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after,
|
&::after,
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::before {
|
&::before {
|
||||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 12px;
|
top: 12px;
|
||||||
left: 4px;
|
left: 4px;
|
||||||
|
|
@ -930,17 +915,23 @@ export default {
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4::after {
|
|
||||||
|
&::after {
|
||||||
-webkit-transform: rotate(-45deg);
|
-webkit-transform: rotate(-45deg);
|
||||||
-ms-transform: rotate(-45deg);
|
-ms-transform: rotate(-45deg);
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-close .vicp-icon4:hover {
|
|
||||||
|
&:hover {
|
||||||
-webkit-transform: rotate(90deg);
|
-webkit-transform: rotate(90deg);
|
||||||
-ms-transform: rotate(90deg);
|
-ms-transform: rotate(90deg);
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area {
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vicp-step1 {
|
||||||
|
.vicp-drop-area {
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -950,19 +941,20 @@ export default {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1px dashed rgba(0, 0, 0, 0.08);
|
border: 1px dashed rgba(0, 0, 0, 0.08);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
border-color: rgba(0, 0, 0, 0.1);
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-icon1 {
|
|
||||||
|
.vicp-icon1 {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto 6px;
|
margin: 0 auto 6px;
|
||||||
width: 42px;
|
width: 42px;
|
||||||
height: 42px;
|
height: 42px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step1
|
|
||||||
.vicp-drop-area
|
|
||||||
.vicp-icon1
|
|
||||||
.vicp-icon1-arrow {
|
.vicp-icon1-arrow {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|
@ -972,11 +964,7 @@ export default {
|
||||||
border-left: 14.7px solid transparent;
|
border-left: 14.7px solid transparent;
|
||||||
border-right: 14.7px solid transparent;
|
border-right: 14.7px solid transparent;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step1
|
|
||||||
.vicp-drop-area
|
|
||||||
.vicp-icon1
|
|
||||||
.vicp-icon1-body {
|
.vicp-icon1-body {
|
||||||
display: block;
|
display: block;
|
||||||
width: 12.6px;
|
width: 12.6px;
|
||||||
|
|
@ -984,11 +972,7 @@ export default {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step1
|
|
||||||
.vicp-drop-area
|
|
||||||
.vicp-icon1
|
|
||||||
.vicp-icon1-bottom {
|
.vicp-icon1-bottom {
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -997,17 +981,16 @@ export default {
|
||||||
border: 6px solid rgba(0, 0, 0, 0.3);
|
border: 6px solid rgba(0, 0, 0, 0.3);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area .vicp-hint {
|
}
|
||||||
|
|
||||||
|
.vicp-hint {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step1
|
|
||||||
.vicp-drop-area
|
|
||||||
.vicp-no-supported-hint {
|
.vicp-no-supported-hint {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -1022,22 +1005,17 @@ export default {
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step1 .vicp-drop-area:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
border-color: rgba(0, 0, 0, 0.1);
|
|
||||||
background-color: rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop {
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.vicp-step2 .vicp-crop {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-left {
|
.vicp-crop-left {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-img-container {
|
.vicp-img-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1045,13 +1023,7 @@ export default {
|
||||||
height: 180px;
|
height: 180px;
|
||||||
background-color: #e5e5e0;
|
background-color: #e5e5e0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-img-container
|
|
||||||
.vicp-img {
|
.vicp-img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1061,54 +1033,31 @@ export default {
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-img-container
|
|
||||||
.vicp-img-shade {
|
.vicp-img-shade {
|
||||||
-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-color: rgba(241, 242, 243, 0.8);
|
background-color: rgba(241, 242, 243, 0.8);
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
.vicp-img-shade-1 {
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-img-container
|
|
||||||
.vicp-img-shade.vicp-img-shade-1 {
|
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
.vicp-img-shade-2 {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-img-container
|
|
||||||
.vicp-img-shade.vicp-img-shade-2 {
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
}
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
}
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-rotate {
|
.vicp-rotate {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-rotate
|
|
||||||
i {
|
i {
|
||||||
display: block;
|
display: block;
|
||||||
width: 18px;
|
width: 18px;
|
||||||
|
|
@ -1121,61 +1070,31 @@ export default {
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
color: #fff;
|
color: #fff;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
&:hover {
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-rotate
|
|
||||||
i:hover {
|
|
||||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: rgba(0, 0, 0, 0.14);
|
background-color: rgba(0, 0, 0, 0.14);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&:first-child {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-rotate
|
|
||||||
i:first-child {
|
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&:last-child {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-rotate
|
|
||||||
i:last-child {
|
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
}
|
||||||
.vicp-wrap
|
}
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range {
|
.vicp-range {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 30px 0 10px 0;
|
margin: 30px 0 10px;
|
||||||
width: 240px;
|
width: 240px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
.vicp-icon5,
|
.vicp-icon5,
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
.vicp-icon6 {
|
.vicp-icon6 {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|
@ -1184,68 +1103,27 @@ export default {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
.vicp-icon5:hover,
|
.vicp-icon5:hover,
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
.vicp-icon6:hover {
|
.vicp-icon6:hover {
|
||||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-color: rgba(0, 0, 0, 0.14);
|
background-color: rgba(0, 0, 0, 0.14);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
.vicp-icon5 {
|
.vicp-icon5 {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
.vicp-icon5::before {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
left: 3px;
|
|
||||||
top: 8px;
|
|
||||||
width: 12px;
|
|
||||||
height: 2px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
.vicp-icon6 {
|
.vicp-icon6 {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
.vicp-icon5::before,
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
.vicp-icon6::before {
|
.vicp-icon6::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
content: '';
|
||||||
display: block;
|
display: block;
|
||||||
left: 3px;
|
left: 3px;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
|
|
@ -1253,35 +1131,13 @@ export default {
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
input[type='range'] {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
.vicp-icon6::after {
|
|
||||||
position: absolute;
|
|
||||||
content: "";
|
|
||||||
display: block;
|
|
||||||
top: 3px;
|
|
||||||
left: 8px;
|
|
||||||
width: 2px;
|
|
||||||
height: 12px;
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"] {
|
|
||||||
display: block;
|
display: block;
|
||||||
padding-top: 5px;
|
padding-top: 5px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 180px;
|
width: 180px;
|
||||||
height: 8px;
|
height: 8px;
|
||||||
vertical-align: top;
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
|
|
@ -1291,23 +1147,11 @@ export default {
|
||||||
---------------------------------------------------------------*/
|
---------------------------------------------------------------*/
|
||||||
/* 轨道
|
/* 轨道
|
||||||
---------------------------------------------------------------*/
|
---------------------------------------------------------------*/
|
||||||
}
|
&:focus {
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]:focus {
|
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&::-webkit-slider-thumb {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]::-webkit-slider-thumb {
|
|
||||||
-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
|
@ -1321,13 +1165,8 @@ export default {
|
||||||
-webkit-transition: 0.2s;
|
-webkit-transition: 0.2s;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&::-moz-range-thumb {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]::-moz-range-thumb {
|
|
||||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
|
@ -1339,13 +1178,8 @@ export default {
|
||||||
-webkit-transition: 0.2s;
|
-webkit-transition: 0.2s;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&::-ms-thumb {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]::-ms-thumb {
|
|
||||||
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18);
|
||||||
appearance: none;
|
appearance: none;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
|
|
@ -1356,48 +1190,28 @@ export default {
|
||||||
-webkit-transition: 0.2s;
|
-webkit-transition: 0.2s;
|
||||||
transition: 0.2s;
|
transition: 0.2s;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&:active::-moz-range-thumb {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]:active::-moz-range-thumb {
|
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&:active::-ms-thumb {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]:active::-ms-thumb {
|
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&:active::-webkit-slider-thumb {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]:active::-webkit-slider-thumb {
|
|
||||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
|
||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&::-webkit-slider-runnable-track {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]::-webkit-slider-runnable-track {
|
|
||||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -1407,13 +1221,8 @@ export default {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: rgba(68, 170, 119, 0.3);
|
background-color: rgba(68, 170, 119, 0.3);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&::-moz-range-track {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]::-moz-range-track {
|
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
|
|
@ -1422,13 +1231,8 @@ export default {
|
||||||
border: none;
|
border: none;
|
||||||
background-color: rgba(68, 170, 119, 0.3);
|
background-color: rgba(68, 170, 119, 0.3);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&::-ms-track {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]::-ms-track {
|
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -1439,78 +1243,42 @@ export default {
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&::-ms-fill-lower {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]::-ms-fill-lower {
|
|
||||||
background-color: rgba(68, 170, 119, 0.3);
|
background-color: rgba(68, 170, 119, 0.3);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&::-ms-fill-upper {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]::-ms-fill-upper {
|
|
||||||
background-color: rgba(68, 170, 119, 0.15);
|
background-color: rgba(68, 170, 119, 0.15);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&:focus::-webkit-slider-runnable-track {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]:focus::-webkit-slider-runnable-track {
|
|
||||||
background-color: rgba(68, 170, 119, 0.5);
|
background-color: rgba(68, 170, 119, 0.5);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&:focus::-moz-range-track {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]:focus::-moz-range-track {
|
|
||||||
background-color: rgba(68, 170, 119, 0.5);
|
background-color: rgba(68, 170, 119, 0.5);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&:focus::-ms-fill-lower {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]:focus::-ms-fill-lower {
|
|
||||||
background-color: rgba(68, 170, 119, 0.45);
|
background-color: rgba(68, 170, 119, 0.45);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
&:focus::-ms-fill-upper {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-left
|
|
||||||
.vicp-range
|
|
||||||
input[type="range"]:focus::-ms-fill-upper {
|
|
||||||
background-color: rgba(68, 170, 119, 0.25);
|
background-color: rgba(68, 170, 119, 0.25);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step2 .vicp-crop .vicp-crop-right {
|
|
||||||
float: right;
|
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
}
|
||||||
.vicp-wrap
|
}
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
.vicp-crop-right {
|
||||||
.vicp-crop-right
|
float: right;
|
||||||
|
|
||||||
.vicp-preview {
|
.vicp-preview {
|
||||||
height: 150px;
|
height: 150px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-right
|
|
||||||
.vicp-preview
|
|
||||||
.vicp-preview-item {
|
.vicp-preview-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
|
|
@ -1518,14 +1286,7 @@ export default {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-right
|
|
||||||
.vicp-preview
|
|
||||||
.vicp-preview-item
|
|
||||||
span {
|
span {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -30px;
|
bottom: -30px;
|
||||||
|
|
@ -1535,13 +1296,7 @@ export default {
|
||||||
display: block;
|
display: block;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-right
|
|
||||||
.vicp-preview
|
|
||||||
.vicp-preview-item
|
|
||||||
img {
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1559,26 +1314,19 @@ export default {
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
.vicp-preview-item-circle {
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-right
|
|
||||||
.vicp-preview
|
|
||||||
.vicp-preview-item.vicp-preview-item-circle {
|
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step2
|
|
||||||
.vicp-crop
|
|
||||||
.vicp-crop-right
|
|
||||||
.vicp-preview
|
|
||||||
.vicp-preview-item.vicp-preview-item-circle
|
|
||||||
img {
|
img {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload {
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vicp-step3 .vicp-upload {
|
||||||
position: relative;
|
position: relative;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -1587,24 +1335,20 @@ export default {
|
||||||
background-color: rgba(0, 0, 0, 0.03);
|
background-color: rgba(0, 0, 0, 0.03);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: 1px dashed #ddd;
|
border: 1px dashed #ddd;
|
||||||
}
|
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-loading {
|
.vicp-loading {
|
||||||
display: block;
|
display: block;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #999;
|
color: #999;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-progress-wrap {
|
|
||||||
|
.vicp-progress-wrap {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
background-color: rgba(0, 0, 0, 0.08);
|
background-color: rgba(0, 0, 0, 0.08);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step3
|
|
||||||
.vicp-upload
|
|
||||||
.vicp-progress-wrap
|
|
||||||
.vicp-progress {
|
.vicp-progress {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1615,37 +1359,29 @@ export default {
|
||||||
box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
|
box-shadow: 0 2px 6px 0 rgba(68, 170, 119, 0.3);
|
||||||
-webkit-transition: width 0.15s linear;
|
-webkit-transition: width 0.15s linear;
|
||||||
transition: width 0.15s linear;
|
transition: width 0.15s linear;
|
||||||
background-image: -webkit-linear-gradient(
|
background-image: -webkit-linear-gradient(135deg,
|
||||||
135deg,
|
|
||||||
rgba(255, 255, 255, 0.2) 25%,
|
rgba(255, 255, 255, 0.2) 25%,
|
||||||
transparent 25%,
|
transparent 25%,
|
||||||
transparent 50%,
|
transparent 50%,
|
||||||
rgba(255, 255, 255, 0.2) 50%,
|
rgba(255, 255, 255, 0.2) 50%,
|
||||||
rgba(255, 255, 255, 0.2) 75%,
|
rgba(255, 255, 255, 0.2) 75%,
|
||||||
transparent 75%,
|
transparent 75%,
|
||||||
transparent
|
transparent);
|
||||||
);
|
background-image: linear-gradient(-45deg,
|
||||||
background-image: linear-gradient(
|
|
||||||
-45deg,
|
|
||||||
rgba(255, 255, 255, 0.2) 25%,
|
rgba(255, 255, 255, 0.2) 25%,
|
||||||
transparent 25%,
|
transparent 25%,
|
||||||
transparent 50%,
|
transparent 50%,
|
||||||
rgba(255, 255, 255, 0.2) 50%,
|
rgba(255, 255, 255, 0.2) 50%,
|
||||||
rgba(255, 255, 255, 0.2) 75%,
|
rgba(255, 255, 255, 0.2) 75%,
|
||||||
transparent 75%,
|
transparent 75%,
|
||||||
transparent
|
transparent);
|
||||||
);
|
|
||||||
background-size: 40px 40px;
|
background-size: 40px 40px;
|
||||||
-webkit-animation: vicp_progress 0.5s linear infinite;
|
-webkit-animation: vicp_progress 0.5s linear infinite;
|
||||||
animation: vicp_progress 0.5s linear infinite;
|
animation: vicp_progress 0.5s linear infinite;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload
|
|
||||||
.vicp-wrap
|
|
||||||
.vicp-step3
|
|
||||||
.vicp-upload
|
|
||||||
.vicp-progress-wrap
|
|
||||||
.vicp-progress::after {
|
.vicp-progress::after {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: block;
|
display: block;
|
||||||
top: -3px;
|
top: -3px;
|
||||||
|
|
@ -1658,17 +1394,21 @@ export default {
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
background-color: #4a7;
|
background-color: #4a7;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-error,
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-step3 .vicp-upload .vicp-success {
|
|
||||||
|
.vicp-error,
|
||||||
|
.vicp-success {
|
||||||
height: 100px;
|
height: 100px;
|
||||||
line-height: 100px;
|
line-height: 100px;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-operate {
|
}
|
||||||
|
|
||||||
|
.vicp-operate {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
}
|
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-operate a {
|
a {
|
||||||
position: relative;
|
position: relative;
|
||||||
float: left;
|
float: left;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -1687,30 +1427,34 @@ export default {
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-operate a:hover {
|
|
||||||
|
a:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.03);
|
background-color: rgba(0, 0, 0, 0.03);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-error,
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-success {
|
|
||||||
|
.vicp-error,
|
||||||
|
.vicp-success {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
color: #d10;
|
color: #d10;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
vertical-align: top;
|
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-success {
|
|
||||||
|
.vicp-success {
|
||||||
color: #4a7;
|
color: #4a7;
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-icon3 {
|
|
||||||
|
.vicp-icon3 {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
}
|
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-icon3::after {
|
&::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 3px;
|
top: 3px;
|
||||||
left: 6px;
|
left: 6px;
|
||||||
|
|
@ -1722,18 +1466,20 @@ export default {
|
||||||
-webkit-transform: rotate(45deg);
|
-webkit-transform: rotate(45deg);
|
||||||
-ms-transform: rotate(45deg);
|
-ms-transform: rotate(45deg);
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
content: "";
|
content: '';
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-icon2 {
|
}
|
||||||
|
|
||||||
|
.vicp-icon2 {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
}
|
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-icon2::after,
|
&::after,
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-icon2::before {
|
&::before {
|
||||||
content: "";
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 9px;
|
top: 9px;
|
||||||
left: 4px;
|
left: 4px;
|
||||||
|
|
@ -1744,11 +1490,18 @@ export default {
|
||||||
-ms-transform: rotate(45deg);
|
-ms-transform: rotate(45deg);
|
||||||
transform: rotate(45deg);
|
transform: rotate(45deg);
|
||||||
}
|
}
|
||||||
.vue-image-crop-upload .vicp-wrap .vicp-icon2::after {
|
|
||||||
|
&::after {
|
||||||
-webkit-transform: rotate(-45deg);
|
-webkit-transform: rotate(-45deg);
|
||||||
-ms-transform: rotate(-45deg);
|
-ms-transform: rotate(-45deg);
|
||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
.e-ripple {
|
.e-ripple {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
|
@ -1763,8 +1516,8 @@ export default {
|
||||||
-ms-transform: scale(0);
|
-ms-transform: scale(0);
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
|
||||||
.e-ripple.z-active {
|
.z-active {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
-webkit-transform: scale(2);
|
-webkit-transform: scale(2);
|
||||||
-ms-transform: scale(2);
|
-ms-transform: scale(2);
|
||||||
|
|
@ -1775,4 +1528,6 @@ export default {
|
||||||
transition: opacity 1.2s ease-out, transform 0.6s ease-out,
|
transition: opacity 1.2s ease-out, transform 0.6s ease-out,
|
||||||
-webkit-transform 0.6s ease-out;
|
-webkit-transform 0.6s ease-out;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -59,14 +59,17 @@ export default {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.json-editor >>> .CodeMirror {
|
.json-editor >>> .CodeMirror {
|
||||||
height: auto;
|
height: auto;
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.json-editor >>> .CodeMirror-scroll {
|
.json-editor >>> .CodeMirror-scroll {
|
||||||
min-height: 300px;
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.json-editor >>> .cm-s-rubyblue span.cm-string {
|
.json-editor >>> .cm-s-rubyblue span.cm-string {
|
||||||
color: #F08047;
|
color: #f08047;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,7 @@ export default {
|
||||||
line-height: 54px;
|
line-height: 54px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -208,14 +208,14 @@ export default {
|
||||||
// Utils
|
// Utils
|
||||||
$spacer: 12px;
|
$spacer: 12px;
|
||||||
$transition: 0.2s ease all;
|
$transition: 0.2s ease all;
|
||||||
$index: 0px;
|
$index: 0;
|
||||||
$index-has-icon: 30px;
|
$index-has-icon: 30px;
|
||||||
// Theme:
|
// Theme:
|
||||||
$color-white: white;
|
$color-white: white;
|
||||||
$color-grey: #9E9E9E;
|
$color-grey: #9e9e9e;
|
||||||
$color-grey-light: #E0E0E0;
|
$color-grey-light: #e0e0e0;
|
||||||
$color-blue: #2196F3;
|
$color-blue: #2196f3;
|
||||||
$color-red: #F44336;
|
$color-red: #f44336;
|
||||||
$color-black: black;
|
$color-black: black;
|
||||||
// Base clases:
|
// Base clases:
|
||||||
%base-bar-pseudo {
|
%base-bar-pseudo {
|
||||||
|
|
@ -239,9 +239,11 @@ export default {
|
||||||
.material-input__component {
|
.material-input__component {
|
||||||
margin-top: 36px;
|
margin-top: 36px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.iconClass {
|
.iconClass {
|
||||||
.material-input__icon {
|
.material-input__icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -255,13 +257,16 @@ export default {
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-label {
|
.material-label {
|
||||||
left: $index-has-icon;
|
left: $index-has-icon;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-input {
|
.material-input {
|
||||||
text-indent: $index-has-icon;
|
text-indent: $index-has-icon;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-input {
|
.material-input {
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
|
padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
|
||||||
|
|
@ -270,12 +275,14 @@ export default {
|
||||||
border: none;
|
border: none;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
border-bottom: 1px solid transparent; // fixes the height issue
|
border-bottom: 1px solid transparent; // fixes the height issue
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-label {
|
.material-label {
|
||||||
font-weight: $font-weight-normal;
|
font-weight: $font-weight-normal;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -285,15 +292,18 @@ export default {
|
||||||
transition: $transition;
|
transition: $transition;
|
||||||
font-size: $font-size-small;
|
font-size: $font-size-small;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-input-bar {
|
.material-input-bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
&:before {
|
|
||||||
|
&::before {
|
||||||
@extend %base-bar-pseudo;
|
@extend %base-bar-pseudo;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
}
|
}
|
||||||
&:after {
|
|
||||||
|
&::after {
|
||||||
@extend %base-bar-pseudo;
|
@extend %base-bar-pseudo;
|
||||||
right: 50%;
|
right: 50%;
|
||||||
}
|
}
|
||||||
|
|
@ -313,8 +323,8 @@ export default {
|
||||||
// Active state:
|
// Active state:
|
||||||
&.material--active {
|
&.material--active {
|
||||||
.material-input-bar {
|
.material-input-bar {
|
||||||
&:before,
|
&::before,
|
||||||
&:after {
|
&::after {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -323,18 +333,21 @@ export default {
|
||||||
|
|
||||||
.material-input__component {
|
.material-input__component {
|
||||||
background: $color-white;
|
background: $color-white;
|
||||||
|
|
||||||
.material-input {
|
.material-input {
|
||||||
background: none;
|
background: none;
|
||||||
color: $color-black;
|
color: $color-black;
|
||||||
text-indent: $index;
|
text-indent: $index;
|
||||||
border-bottom: 1px solid $color-grey-light;
|
border-bottom: 1px solid $color-grey-light;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-label {
|
.material-label {
|
||||||
color: $color-grey;
|
color: $color-grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-input-bar {
|
.material-input-bar {
|
||||||
&:before,
|
&::before,
|
||||||
&:after {
|
&::after {
|
||||||
background: $color-blue;
|
background: $color-blue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -349,9 +362,10 @@ export default {
|
||||||
&.material--active .material-label {
|
&.material--active .material-label {
|
||||||
color: $color-red;
|
color: $color-red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.material-input-bar {
|
.material-input-bar {
|
||||||
&:before,
|
&::before,
|
||||||
&:after {
|
&::after {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -95,6 +95,7 @@ export default {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 32px 16px;
|
padding: 32px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pagination-container.hidden {
|
.pagination-container.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -91,7 +91,7 @@ export default {
|
||||||
letter-spacing: 2px;
|
letter-spacing: 2px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
margin: 0 60px;
|
margin: 0 60px;
|
||||||
padding: 22px 0 0 0;
|
padding: 22px 0 0;
|
||||||
height: 85px;
|
height: 85px;
|
||||||
font-family: 'Open Sans', Arial, sans-serif;
|
font-family: 'Open Sans', Arial, sans-serif;
|
||||||
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
|
|
@ -137,6 +137,6 @@ export default {
|
||||||
|
|
||||||
.pan-item:hover .pan-info p a {
|
.pan-item:hover .pan-info p a {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateX(0px) rotate(0deg);
|
transform: translateX(0) rotate(0deg);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -90,8 +90,8 @@ export default {
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
|
transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||||
background: rgba(0, 0, 0, .2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -102,15 +102,15 @@ export default {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
|
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
|
||||||
transition: all .25s cubic-bezier(.7, .3, .1, 1);
|
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||||
transform: translate(100%);
|
transform: translate(100%);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
z-index: 40000;
|
z-index: 40000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.show {
|
.show {
|
||||||
transition: all .3s cubic-bezier(.7, .3, .1, 1);
|
transition: all 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||||
|
|
||||||
.rightPanel-background {
|
.rightPanel-background {
|
||||||
z-index: 20000;
|
z-index: 20000;
|
||||||
|
|
@ -137,6 +137,7 @@ export default {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
|
|
|
||||||
|
|
@ -52,7 +52,7 @@ export default {
|
||||||
.screenfull-svg {
|
.screenfull-svg {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
fill: #5a5e66;;
|
fill: #5a5e66;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
vertical-align: 10px;
|
vertical-align: 10px;
|
||||||
|
|
|
||||||
|
|
@ -39,12 +39,14 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" >
|
<style lang="scss" >
|
||||||
$n: 9; //和items.length 相同
|
$n: 9; //和items.length 相同
|
||||||
$t: .1s;
|
$t: 0.1s;
|
||||||
|
|
||||||
.share-dropdown-menu {
|
.share-dropdown-menu {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -58,9 +60,11 @@ $t: .1s;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
transform: translate3d(0, 0, 0);
|
transform: translate3d(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
&-wrapper {
|
&-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
&-item {
|
&-item {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
@ -74,6 +78,7 @@ $t: .1s;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transition: transform 0.28s ease;
|
transition: transform 0.28s ease;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: black;
|
background: black;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
@ -86,10 +91,12 @@ $t: .1s;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
.share-dropdown-menu-wrapper {
|
.share-dropdown-menu-wrapper {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.share-dropdown-menu-item {
|
.share-dropdown-menu-item {
|
||||||
@for $i from 1 through $n {
|
@for $i from 1 through $n {
|
||||||
&:nth-of-type(#{$i}) {
|
&:nth-of-type(#{$i}) {
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@ export default {
|
||||||
content: '';
|
content: '';
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 6px;
|
height: 6px;
|
||||||
margin: -3px 0 0 0;
|
margin: -3px 0 0;
|
||||||
background: #3888fa;
|
background: #3888fa;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
|
||||||
|
|
@ -104,6 +104,7 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.editor-slide-upload {
|
.editor-slide-upload {
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
/deep/ .el-upload--picture-card {
|
/deep/ .el-upload--picture-card {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -218,23 +218,28 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tinymce-container>>>.mce-fullscreen {
|
.tinymce-container>>>.mce-fullscreen {
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tinymce-textarea {
|
.tinymce-textarea {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-custom-btn-container {
|
.editor-custom-btn-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 4px;
|
right: 4px;
|
||||||
top: 4px;
|
top: 4px;
|
||||||
/*z-index: 2005;*/
|
/*z-index: 2005;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.fullscreen .editor-custom-btn-container {
|
.fullscreen .editor-custom-btn-container {
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor-upload-btn {
|
.editor-upload-btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -78,15 +78,18 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/styles/mixin.scss";
|
@import '~@/styles/mixin.scss';
|
||||||
|
|
||||||
.upload-container {
|
.upload-container {
|
||||||
|
@include clearfix;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
@include clearfix;
|
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-preview {
|
.image-preview {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
|
@ -94,15 +97,18 @@ export default {
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
|
|
||||||
.image-preview-wrapper {
|
.image-preview-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -114,15 +120,17 @@ export default {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
transition: opacity .3s;
|
transition: opacity 0.3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
|
|
||||||
.el-icon-delete {
|
.el-icon-delete {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
||||||
|
|
@ -81,25 +81,30 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-preview {
|
.image-preview {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0;
|
||||||
top: 0px;
|
top: 0;
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
|
|
||||||
.image-preview-wrapper {
|
.image-preview-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -111,15 +116,17 @@ export default {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
transition: opacity .3s;
|
transition: opacity 0.3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
|
|
||||||
.el-icon-delete {
|
.el-icon-delete {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
||||||
|
|
@ -86,15 +86,18 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/styles/mixin.scss";
|
@import '~@/styles/mixin.scss';
|
||||||
|
|
||||||
.upload-container {
|
.upload-container {
|
||||||
|
@include clearfix;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
@include clearfix;
|
|
||||||
.image-uploader {
|
.image-uploader {
|
||||||
width: 35%;
|
width: 35%;
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-preview {
|
.image-preview {
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
|
@ -102,15 +105,18 @@ export default {
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
|
|
||||||
.image-preview-wrapper {
|
.image-preview-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -122,21 +128,24 @@ export default {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
background-color: rgba(0, 0, 0, .5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
transition: opacity .3s;
|
transition: opacity 0.3s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
|
|
||||||
.el-icon-delete {
|
.el-icon-delete {
|
||||||
font-size: 36px;
|
font-size: 36px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.image-preview-action {
|
.image-preview-action {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.image-app-preview {
|
.image-app-preview {
|
||||||
width: 320px;
|
width: 320px;
|
||||||
height: 180px;
|
height: 180px;
|
||||||
|
|
@ -144,6 +153,7 @@ export default {
|
||||||
border: 1px dashed #d9d9d9;
|
border: 1px dashed #d9d9d9;
|
||||||
float: left;
|
float: left;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
|
|
||||||
.app-fake-conver {
|
.app-fake-conver {
|
||||||
height: 44px;
|
height: 44px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
||||||
|
|
@ -123,6 +123,7 @@ export default {
|
||||||
display: none;
|
display: none;
|
||||||
z-index: -9999;
|
z-index: -9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drop {
|
.drop {
|
||||||
border: 2px dashed #bbb;
|
border: 2px dashed #bbb;
|
||||||
width: 600px;
|
width: 600px;
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
<template v-if="device!=='mobile'">
|
<template v-if="device!=='mobile'">
|
||||||
<search id="header-search" class="right-menu-item" />
|
<search id="header-search" class="right-menu-item" />
|
||||||
|
|
||||||
<error-log class="errLog-container right-menu-item hover-effect" />
|
<error-log class="err-log-container right-menu-item hover-effect" />
|
||||||
|
|
||||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||||
|
|
||||||
|
|
@ -88,18 +88,18 @@ export default {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
||||||
|
|
||||||
.hamburger-container {
|
.hamburger-container {
|
||||||
line-height: 46px;
|
line-height: 46px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background .3s;
|
transition: background 0.3s;
|
||||||
-webkit-tap-highlight-color: transparent;
|
-webkit-tap-highlight-color: transparent;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(0, 0, 0, .025)
|
background: rgba(0, 0, 0, 0.025);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -107,7 +107,7 @@ export default {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.errLog-container {
|
.err-log-container {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
@ -131,10 +131,10 @@ export default {
|
||||||
|
|
||||||
&.hover-effect {
|
&.hover-effect {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background .3s;
|
transition: background 0.3s;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: rgba(0, 0, 0, .025)
|
background: rgba(0, 0, 0, 0.025);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -90,19 +90,19 @@ export default {
|
||||||
|
|
||||||
.drawer-title {
|
.drawer-title {
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
color: rgba(0, 0, 0, .85);
|
color: rgba(0, 0, 0, 0.85);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-item {
|
.drawer-item {
|
||||||
color: rgba(0, 0, 0, .65);
|
color: rgba(0, 0, 0, 0.65);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-switch {
|
.drawer-switch {
|
||||||
float: right
|
float: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -32,6 +32,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.sidebarLogoFade-enter-active {
|
.sidebarLogoFade-enter-active {
|
||||||
transition: opacity 1.5s;
|
transition: opacity 1.5s;
|
||||||
}
|
}
|
||||||
|
|
@ -75,7 +76,7 @@ export default {
|
||||||
|
|
||||||
&.collapse {
|
&.collapse {
|
||||||
.sidebar-logo {
|
.sidebar-logo {
|
||||||
margin-right: 0px;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -82,10 +82,12 @@ export default {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
/deep/ {
|
/deep/ {
|
||||||
.el-scrollbar__bar {
|
.el-scrollbar__bar {
|
||||||
bottom: 0px;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar__wrap {
|
.el-scrollbar__wrap {
|
||||||
height: 49px;
|
height: 49px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -203,7 +203,8 @@ export default {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-bottom: 1px solid #d8dce5;
|
border-bottom: 1px solid #d8dce5;
|
||||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
|
||||||
|
|
||||||
.tags-view-wrapper {
|
.tags-view-wrapper {
|
||||||
.tags-view-item {
|
.tags-view-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -218,16 +219,20 @@ export default {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: #42b983;
|
background-color: #42b983;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #42b983;
|
border-color: #42b983;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: '';
|
content: '';
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -241,6 +246,7 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.contextmenu {
|
.contextmenu {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
@ -252,11 +258,13 @@ export default {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #333;
|
color: #333;
|
||||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
|
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
|
||||||
|
|
||||||
li {
|
li {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 7px 16px;
|
padding: 7px 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #eee;
|
background: #eee;
|
||||||
}
|
}
|
||||||
|
|
@ -275,13 +283,15 @@ export default {
|
||||||
vertical-align: 2px;
|
vertical-align: 2px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
transform-origin: 100% 50%;
|
transform-origin: 100% 50%;
|
||||||
&:before {
|
|
||||||
transform: scale(.6);
|
&::before {
|
||||||
|
transform: scale(0.6);
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: -3px;
|
vertical-align: -3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #b4bccc;
|
background-color: #b4bccc;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
|
||||||
|
|
@ -58,8 +58,8 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/styles/mixin.scss";
|
@import '~@/styles/mixin.scss';
|
||||||
@import "~@/styles/variables.scss";
|
@import '~@/styles/variables.scss';
|
||||||
|
|
||||||
.app-wrapper {
|
.app-wrapper {
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
|
|
@ -93,7 +93,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.hideSidebar .fixed-header {
|
.hideSidebar .fixed-header {
|
||||||
width: calc(100% - 54px)
|
width: calc(100% - 54px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mobile .fixed-header {
|
.mobile .fixed-header {
|
||||||
|
|
|
||||||
|
|
@ -6,94 +6,87 @@
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $color;
|
color: $color;
|
||||||
|
|
||||||
&:before,
|
&::before,
|
||||||
&:after {
|
&::after {
|
||||||
background: $color;
|
background: $color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-btn {
|
.blue-btn {
|
||||||
@include colorBtn($blue)
|
@include colorBtn($blue); }
|
||||||
}
|
|
||||||
|
|
||||||
.light-blue-btn {
|
.light-blue-btn {
|
||||||
@include colorBtn($light-blue)
|
@include colorBtn($light-blue); }
|
||||||
}
|
|
||||||
|
|
||||||
.red-btn {
|
.red-btn {
|
||||||
@include colorBtn($red)
|
@include colorBtn($red); }
|
||||||
}
|
|
||||||
|
|
||||||
.pink-btn {
|
.pink-btn {
|
||||||
@include colorBtn($pink)
|
@include colorBtn($pink); }
|
||||||
}
|
|
||||||
|
|
||||||
.green-btn {
|
.green-btn {
|
||||||
@include colorBtn($green)
|
@include colorBtn($green); }
|
||||||
}
|
|
||||||
|
|
||||||
.tiffany-btn {
|
.tiffany-btn {
|
||||||
@include colorBtn($tiffany)
|
@include colorBtn($tiffany); }
|
||||||
}
|
|
||||||
|
|
||||||
.yellow-btn {
|
.yellow-btn {
|
||||||
@include colorBtn($yellow)
|
@include colorBtn($yellow); }
|
||||||
}
|
|
||||||
|
|
||||||
.pan-btn {
|
.pan-btn {
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
|
||||||
padding: 14px 36px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
border-radius: 8px;
|
||||||
transition: 600ms ease all;
|
color: #fff;
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
outline: none;
|
||||||
|
padding: 14px 36px;
|
||||||
|
position: relative;
|
||||||
|
transition: 600ms ease all;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
&:before,
|
&::before,
|
||||||
&:after {
|
&::after {
|
||||||
width: 100%;
|
|
||||||
transition: 600ms ease all;
|
transition: 600ms ease all;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before,
|
&::before,
|
||||||
&:after {
|
&::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 2px;
|
height: 2px;
|
||||||
width: 0;
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
transition: 400ms ease all;
|
transition: 400ms ease all;
|
||||||
|
width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&::after {
|
&::after {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
right: inherit;
|
right: inherit;
|
||||||
top: inherit;
|
top: inherit;
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-button {
|
.custom-button {
|
||||||
display: inline-block;
|
|
||||||
line-height: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
cursor: pointer;
|
|
||||||
background: #fff;
|
|
||||||
color: #fff;
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
text-align: center;
|
background: #fff;
|
||||||
box-sizing: border-box;
|
|
||||||
outline: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 10px 15px;
|
|
||||||
font-size: 14px;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: #fff;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1;
|
||||||
|
margin: 0;
|
||||||
|
outline: 0;
|
||||||
|
padding: 10px 15px;
|
||||||
|
text-align: center;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,11 @@
|
||||||
// cover some element-ui styles
|
// cover some element-ui styles
|
||||||
|
|
||||||
.el-breadcrumb__inner,
|
.el-breadcrumb__inner,
|
||||||
.el-breadcrumb__inner a {
|
.el-breadcrumb__inner a {
|
||||||
font-weight: 400 !important;
|
font-weight: 400 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-upload {
|
.el-upload {
|
||||||
input[type="file"] {
|
input[type='file'] {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -17,7 +16,7 @@
|
||||||
|
|
||||||
.cell {
|
.cell {
|
||||||
.el-tag {
|
.el-tag {
|
||||||
margin-right: 0px;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -30,8 +29,8 @@
|
||||||
|
|
||||||
.fixed-width {
|
.fixed-width {
|
||||||
.el-button--mini {
|
.el-button--mini {
|
||||||
padding: 7px 10px;
|
|
||||||
min-width: 60px;
|
min-width: 60px;
|
||||||
|
padding: 7px 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -41,17 +40,17 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
.el-tag {
|
.el-tag {
|
||||||
margin-right: 0px;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// to fixed https://github.com/ElemeFE/element/issues/2461
|
// to fixed https://github.com/ElemeFE/element/issues/2461
|
||||||
.el-dialog {
|
.el-dialog {
|
||||||
transform: none;
|
|
||||||
left: 0;
|
left: 0;
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// refine element ui upload
|
// refine element ui upload
|
||||||
|
|
@ -60,8 +59,8 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.el-upload-dragger {
|
.el-upload-dragger {
|
||||||
width: 100%;
|
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -69,7 +68,7 @@
|
||||||
// dropdown
|
// dropdown
|
||||||
.el-dropdown-menu {
|
.el-dropdown-menu {
|
||||||
a {
|
a {
|
||||||
display: block
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -20,9 +20,9 @@ $--border-color-lighter: #e6ebf5;
|
||||||
$--table-border: 1px solid #dfe6ec;
|
$--table-border: 1px solid #dfe6ec;
|
||||||
|
|
||||||
/* icon font path, required */
|
/* icon font path, required */
|
||||||
$--font-path: "~element-ui/lib/theme-chalk/fonts";
|
$--font-path: '~element-ui/lib/theme-chalk/fonts';
|
||||||
|
|
||||||
@import "~element-ui/packages/theme-chalk/src/index";
|
@import '~element-ui/packages/theme-chalk/src/index';
|
||||||
|
|
||||||
// the :export directive is the magic sauce for webpack
|
// the :export directive is the magic sauce for webpack
|
||||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||||
|
|
|
||||||
|
|
@ -6,11 +6,11 @@
|
||||||
@import './btn.scss';
|
@import './btn.scss';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
height: 100%;
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
height: 100%;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
|
@ -18,8 +18,8 @@ label {
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
|
|
@ -27,13 +27,13 @@ html {
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*:before,
|
*::before,
|
||||||
*:after {
|
*::after {
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.no-padding {
|
.no-padding {
|
||||||
padding: 0px !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.padding-content {
|
.padding-content {
|
||||||
|
|
@ -48,8 +48,8 @@ a:active {
|
||||||
a,
|
a,
|
||||||
a:focus,
|
a:focus,
|
||||||
a:hover {
|
a:hover {
|
||||||
cursor: pointer;
|
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
cursor: pointer;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -81,33 +81,33 @@ div:focus {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.inlineBlock {
|
.inline-block {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clearfix {
|
.clearfix {
|
||||||
&:after {
|
&::after {
|
||||||
visibility: hidden;
|
clear: both;
|
||||||
|
content: ' ';
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
content: " ";
|
|
||||||
clear: both;
|
|
||||||
height: 0;
|
height: 0;
|
||||||
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
aside {
|
aside {
|
||||||
background: #eef1f6;
|
background: #eef1f6;
|
||||||
padding: 8px 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
display: block;
|
|
||||||
line-height: 32px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
|
display: block;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding: 8px 24px;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #337ab7;
|
color: #337ab7;
|
||||||
|
|
@ -134,22 +134,22 @@ aside {
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-center {
|
.text-center {
|
||||||
text-align: center
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-navbar {
|
.sub-navbar {
|
||||||
|
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
text-align: right;
|
|
||||||
padding-right: 20px;
|
padding-right: 20px;
|
||||||
|
position: relative;
|
||||||
|
text-align: right;
|
||||||
transition: 600ms ease position;
|
transition: 600ms ease position;
|
||||||
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
|
width: 100%;
|
||||||
|
|
||||||
.subtitle {
|
.subtitle {
|
||||||
font-size: 20px;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.draft {
|
&.draft {
|
||||||
|
|
@ -176,8 +176,8 @@ aside {
|
||||||
|
|
||||||
.filter-item {
|
.filter-item {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
@mixin clearfix {
|
@mixin clearfix {
|
||||||
&:after {
|
&::after {
|
||||||
content: "";
|
|
||||||
display: table;
|
|
||||||
clear: both;
|
clear: both;
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -22,15 +22,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin relative {
|
@mixin relative {
|
||||||
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin pct($pct) {
|
@mixin pct($pct) {
|
||||||
width: #{$pct};
|
|
||||||
position: relative;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
width: #{$pct};
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin triangle($width, $height, $color, $direction) {
|
@mixin triangle($width, $height, $color, $direction) {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
#app {
|
#app {
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
transition: margin-left .28s;
|
transition: margin-left 0.28s;
|
||||||
margin-left: $sideBarWidth;
|
margin-left: $sideBarWidth;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
@ -13,7 +12,7 @@
|
||||||
background-color: $menuBg;
|
background-color: $menuBg;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
font-size: 0px;
|
font-size: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
|
@ -30,7 +29,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar__bar.is-vertical {
|
.el-scrollbar__bar.is-vertical {
|
||||||
right: 0px;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar {
|
.el-scrollbar {
|
||||||
|
|
@ -146,11 +145,11 @@
|
||||||
// mobile responsive
|
// mobile responsive
|
||||||
.mobile {
|
.mobile {
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-left: 0px;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: transform .28s;
|
transition: transform 0.28s;
|
||||||
width: $sideBarWidth !important;
|
width: $sideBarWidth !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -164,7 +163,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.withoutAnimation {
|
.withoutAnimation {
|
||||||
|
|
||||||
.main-container,
|
.main-container,
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: none;
|
transition: none;
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
/* fade-transform */
|
/* fade-transform */
|
||||||
.fade-transform-leave-active,
|
.fade-transform-leave-active,
|
||||||
.fade-transform-enter-active {
|
.fade-transform-enter-active {
|
||||||
transition: all .5s;
|
transition: all 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-transform-enter {
|
.fade-transform-enter {
|
||||||
|
|
@ -30,7 +30,7 @@
|
||||||
/* breadcrumb transition */
|
/* breadcrumb transition */
|
||||||
.breadcrumb-enter-active,
|
.breadcrumb-enter-active,
|
||||||
.breadcrumb-leave-active {
|
.breadcrumb-leave-active {
|
||||||
transition: all .5s;
|
transition: all 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-enter,
|
.breadcrumb-enter,
|
||||||
|
|
@ -40,7 +40,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-move {
|
.breadcrumb-move {
|
||||||
transition: all .5s;
|
transition: all 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-leave-active {
|
.breadcrumb-leave-active {
|
||||||
|
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
// base color
|
// base color
|
||||||
$blue: #324157;
|
$blue: #324157;
|
||||||
$light-blue:#3A71A8;
|
$light-blue: #3a71a8;
|
||||||
$red:#C03639;
|
$red: #c03639;
|
||||||
$pink: #E65D6E;
|
$pink: #e65d6e;
|
||||||
$green: #30B08F;
|
$green: #30b08f;
|
||||||
$tiffany: #4AB7BD;
|
$tiffany: #4ab7bd;
|
||||||
$yellow:#FEC171;
|
$yellow: #fec171;
|
||||||
$panGreen: #30B08F;
|
$panGreen: #30b08f;
|
||||||
|
|
||||||
// sidebar
|
// sidebar
|
||||||
$menuText: #bfcbd9;
|
$menuText: #bfcbd9;
|
||||||
$menuActiveText:#409EFF;
|
$menuActiveText: #409eff;
|
||||||
$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
|
$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
|
||||||
|
|
||||||
$menuBg: #304156;
|
$menuBg: #304156;
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,9 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.chart-container {
|
.chart-container {
|
||||||
|
height: calc(100vh - 84px);
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 84px);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,9 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.chart-container {
|
.chart-container {
|
||||||
|
height: calc(100vh - 84px);
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 84px);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,9 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.chart-container {
|
.chart-container {
|
||||||
|
height: calc(100vh - 84px);
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 84px);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,21 @@
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-tabs v-model="activeName">
|
<el-tabs v-model="activeName">
|
||||||
<el-tab-pane label="use clipboard directly" name="directly">
|
<el-tab-pane label="use clipboard directly" name="directly">
|
||||||
<el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
|
<el-input
|
||||||
|
v-model="inputData"
|
||||||
|
placeholder="Please input"
|
||||||
|
:style="inputStyle"
|
||||||
|
/>
|
||||||
<el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">
|
<el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">
|
||||||
copy
|
copy
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<el-tab-pane label="use clipboard by v-directive" name="v-directive">
|
<el-tab-pane label="use clipboard by v-directive" name="v-directive">
|
||||||
<el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
|
<el-input
|
||||||
|
v-model="inputData"
|
||||||
|
placeholder="Please input"
|
||||||
|
:style="inputStyle"
|
||||||
|
/>
|
||||||
<el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
|
<el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
|
||||||
copy
|
copy
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
@ -29,6 +37,10 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
activeName: 'directly',
|
activeName: 'directly',
|
||||||
|
inputStyle: {
|
||||||
|
maxWidth: '100%',
|
||||||
|
width: '400px'
|
||||||
|
},
|
||||||
inputData: 'https://github.com/PanJiaChen/vue-element-admin'
|
inputData: 'https://github.com/PanJiaChen/vue-element-admin'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,14 @@
|
||||||
|
|
||||||
<pan-thumb :image="image" />
|
<pan-thumb :image="image" />
|
||||||
|
|
||||||
<el-button type="primary" icon="el-icon-upload" style="position: absolute;bottom: 15px;margin-left: 40px;" @click="imagecropperShow=true">
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
icon="el-icon-upload"
|
||||||
|
style="bottom: 15px;
|
||||||
|
margin-left: 40px;
|
||||||
|
position: absolute;"
|
||||||
|
@click="imagecropperShow=true"
|
||||||
|
>
|
||||||
Change Avatar
|
Change Avatar
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
|
|
@ -53,9 +60,9 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.avatar {
|
.avatar {
|
||||||
width: 200px;
|
|
||||||
height: 200px;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
|
height: 200px;
|
||||||
|
width: 200px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@
|
||||||
<label class="label" for="durationInput">duration:
|
<label class="label" for="durationInput">duration:
|
||||||
<input v-model.number="setDuration" type="number" name="durationInput">
|
<input v-model.number="setDuration" type="number" name="durationInput">
|
||||||
</label>
|
</label>
|
||||||
<div class="startBtn example-btn" @click="start">
|
<div class="start-btn example-btn" @click="start">
|
||||||
Start
|
Start
|
||||||
</div>
|
</div>
|
||||||
<div class="pause-resume-btn example-btn" @click="pauseResume">
|
<div class="pause-resume-btn example-btn" @click="pauseResume">
|
||||||
|
|
@ -124,95 +124,96 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.example-btn {
|
.example-btn {
|
||||||
|
background-color: #fff;
|
||||||
|
background-image: none;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-color: #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: rgba(0, 0, 0, 0.65);
|
||||||
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 0;
|
font-size: 12px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 0;
|
||||||
|
padding: 4px 15px;
|
||||||
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
-ms-touch-action: manipulation;
|
-ms-touch-action: manipulation;
|
||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
cursor: pointer;
|
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
background-image: none;
|
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
border: 1px solid transparent;
|
|
||||||
white-space: nowrap;
|
|
||||||
line-height: 1.5;
|
|
||||||
padding: 4px 15px;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 4px;
|
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
white-space: nowrap;
|
||||||
transition: all .3s cubic-bezier(.645, .045, .355, 1);
|
|
||||||
position: relative;
|
|
||||||
color: rgba(0, 0, 0, .65);
|
|
||||||
background-color: #fff;
|
|
||||||
border-color: #d9d9d9;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.example-btn:hover {
|
.example-btn:hover {
|
||||||
color: #4AB7BD;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border-color: #4AB7BD;
|
border-color: #4ab7bd;
|
||||||
|
color: #4ab7bd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.example {
|
.example {
|
||||||
font-size: 50px;
|
color: #f6416c;
|
||||||
color: #F6416C;
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 10px 0;
|
font-size: 50px;
|
||||||
text-align: center;
|
|
||||||
font-size: 80px;
|
font-size: 80px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
margin: 10px 0;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
color: #2f4f4f;
|
color: #2f4f4f;
|
||||||
font-size: 16px;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
margin: 15px 30px 15px 0;
|
margin: 15px 30px 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 4px 7px;
|
|
||||||
width: 70px;
|
|
||||||
height: 28px;
|
|
||||||
cursor: text;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.5;
|
|
||||||
color: rgba(0, 0, 0, .65);
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
background-image: none;
|
background-image: none;
|
||||||
border: 1px solid #d9d9d9;
|
border: 1px solid #d9d9d9;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
-webkit-transition: all .3s;
|
color: rgba(0, 0, 0, 0.65);
|
||||||
transition: all .3s;
|
cursor: text;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 12px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: 4px 7px;
|
||||||
|
position: relative;
|
||||||
|
-webkit-transition: all 0.3s;
|
||||||
|
transition: all 0.3s;
|
||||||
|
width: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.startBtn {
|
.start-btn {
|
||||||
margin-left: 20px;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #30B08F;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
color: #30b08f;
|
||||||
|
font-size: 20px;
|
||||||
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.startBtn:hover {
|
.start-btn:hover {
|
||||||
background-color: #30B08F;
|
background-color: #30b08f;
|
||||||
|
border-color: #30b08f;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #30B08F;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pause-resume-btn {
|
.pause-resume-btn {
|
||||||
font-size: 20px;
|
|
||||||
color: #E65D6E;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
color: #e65d6e;
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pause-resume-btn:hover {
|
.pause-resume-btn:hover {
|
||||||
background-color: #E65D6E;
|
background-color: #e65d6e;
|
||||||
|
border-color: #e65d6e;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-color: #E65D6E;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -38,24 +38,27 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.board {
|
.board {
|
||||||
width: 1000px;
|
|
||||||
margin-left: 20px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin-left: 20px;
|
||||||
|
width: 1000px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.kanban {
|
.kanban {
|
||||||
&.todo {
|
&.todo {
|
||||||
.board-column-header {
|
.board-column-header {
|
||||||
background: #4A9FF9;
|
background: #4a9ff9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.working {
|
&.working {
|
||||||
.board-column-header {
|
.board-column-header {
|
||||||
background: #f9944a;
|
background: #f9944a;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.done {
|
&.done {
|
||||||
.board-column-header {
|
.board-column-header {
|
||||||
background: #2ac06d;
|
background: #2ac06d;
|
||||||
|
|
|
||||||
|
|
@ -29,8 +29,8 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.editor-container {
|
.editor-container {
|
||||||
position: relative;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -95,6 +95,7 @@ export default {
|
||||||
.editor-container {
|
.editor-container {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tag-title {
|
.tag-title {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -160,9 +160,10 @@ export default {
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.mixin-components-container {
|
.mixin-components-container {
|
||||||
background-color: #f0f2f5;
|
background-color: #f0f2f5;
|
||||||
padding: 30px;
|
|
||||||
min-height: calc(100vh - 84px);
|
min-height: calc(100vh - 84px);
|
||||||
|
padding: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.component-item {
|
.component-item {
|
||||||
min-height: 100px;
|
min-height: 100px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -39,29 +39,29 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.components-container {
|
.components-container {
|
||||||
position: relative;
|
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-container {
|
.left-container {
|
||||||
background-color: #F38181;
|
background-color: #f38181;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-container {
|
.right-container {
|
||||||
background-color: #FCE38A;
|
background-color: #fce38a;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-container {
|
.top-container {
|
||||||
background-color: #FCE38A;
|
background-color: #fce38a;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottom-container {
|
.bottom-container {
|
||||||
width: 100%;
|
background-color: #95e1d3;
|
||||||
background-color: #95E1D3;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,7 @@
|
||||||
<el-button plain>
|
<el-button plain>
|
||||||
Link<i class="el-icon-caret-bottom el-icon--right" />
|
Link<i class="el-icon-caret-bottom el-icon--right" />
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:300px">
|
<el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width: 300px;">
|
||||||
<el-input v-model="url" placeholder="Please enter the content">
|
<el-input v-model="url" placeholder="Please enter the content">
|
||||||
<template slot="prepend">
|
<template slot="prepend">
|
||||||
Url
|
Url
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
|
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
|
||||||
</div>
|
</div>
|
||||||
<div style="position: relative;">
|
<div style="position: relative;">
|
||||||
<pan-thumb :image="avatar" class="panThumb" />
|
<pan-thumb :image="avatar" class="pan-thumb" />
|
||||||
<mallki class-name="mallki-text" text="vue-element-admin" />
|
<mallki class-name="mallki-text" text="vue-element-admin" />
|
||||||
<div style="padding-top: 35px;" class="progress-item">
|
<div style="padding-top: 35px;" class="progress-item">
|
||||||
<span>Vue</span>
|
<span>Vue</span>
|
||||||
|
|
@ -64,50 +64,56 @@ export default {
|
||||||
<style lang="scss" >
|
<style lang="scss" >
|
||||||
.box-card-component {
|
.box-card-component {
|
||||||
.el-card__header {
|
.el-card__header {
|
||||||
padding: 0px!important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box-card-component {
|
.box-card-component {
|
||||||
.box-card-header {
|
.box-card-header {
|
||||||
position: relative;
|
|
||||||
height: 220px;
|
height: 220px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
transition: all 0.2s linear;
|
transition: all 0.2s linear;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: scale(1.1, 1.1);
|
|
||||||
filter: contrast(130%);
|
filter: contrast(130%);
|
||||||
|
transform: scale(1.1, 1.1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.mallki-text {
|
.mallki-text {
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
right: 0px;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
.panThumb {
|
|
||||||
z-index: 100;
|
.pan-thumb {
|
||||||
|
background-color: #fff;
|
||||||
|
border: 5px solid #fff;
|
||||||
|
box-shadow: none !important;
|
||||||
height: 70px !important;
|
height: 70px !important;
|
||||||
width: 70px!important;
|
left: 0;
|
||||||
|
margin: auto;
|
||||||
position: absolute !important;
|
position: absolute !important;
|
||||||
top: -45px;
|
top: -45px;
|
||||||
left: 0px;
|
width: 70px !important;
|
||||||
border: 5px solid #ffffff;
|
z-index: 100;
|
||||||
background-color: #fff;
|
|
||||||
margin: auto;
|
|
||||||
box-shadow: none!important;
|
|
||||||
/deep/ .pan-info {
|
/deep/ .pan-info {
|
||||||
box-shadow: none !important;
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-item {
|
.progress-item {
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
@media only screen and (max-width: 1510px) {
|
@media only screen and (max-width: 1510px) {
|
||||||
.mallki-text {
|
.mallki-text {
|
||||||
|
|
|
||||||
|
|
@ -79,15 +79,15 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-panel {
|
.card-panel {
|
||||||
height: 108px;
|
background: #fff;
|
||||||
|
border-color: rgba(0, 0, 0, 0.05);
|
||||||
|
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
|
||||||
|
color: #666;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
position: relative;
|
height: 108px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
color: #666;
|
position: relative;
|
||||||
background: #fff;
|
|
||||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
|
|
||||||
border-color: rgba(0, 0, 0, .05);
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
.card-panel-icon-wrapper {
|
.card-panel-icon-wrapper {
|
||||||
|
|
@ -107,7 +107,7 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shopping {
|
.icon-shopping {
|
||||||
background: #34bfa3
|
background: #34bfa3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -124,15 +124,15 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-shopping {
|
.icon-shopping {
|
||||||
color: #34bfa3
|
color: #34bfa3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-panel-icon-wrapper {
|
.card-panel-icon-wrapper {
|
||||||
|
border-radius: 6px;
|
||||||
float: left;
|
float: left;
|
||||||
margin: 14px 0 0 14px;
|
margin: 14px 0 0 14px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
transition: all 0.38s ease-out;
|
transition: all 0.38s ease-out;
|
||||||
border-radius: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-panel-icon {
|
.card-panel-icon {
|
||||||
|
|
@ -144,12 +144,12 @@ export default {
|
||||||
float: right;
|
float: right;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin: 26px;
|
margin: 26px;
|
||||||
margin-left: 0px;
|
margin-left: 0;
|
||||||
|
|
||||||
.card-panel-text {
|
.card-panel-text {
|
||||||
line-height: 18px;
|
|
||||||
color: rgba(0, 0, 0, 0.45);
|
color: rgba(0, 0, 0, 0.45);
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
line-height: 18px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -167,14 +167,14 @@ export default {
|
||||||
|
|
||||||
.card-panel-icon-wrapper {
|
.card-panel-icon-wrapper {
|
||||||
float: none !important;
|
float: none !important;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.svg-icon {
|
.svg-icon {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 14px auto !important;
|
|
||||||
float: none !important;
|
float: none !important;
|
||||||
|
margin: 14px auto !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,298 +1,346 @@
|
||||||
.todoapp {
|
.todoapp {
|
||||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
background: #fff;
|
||||||
line-height: 1.4em;
|
|
||||||
color: #4d4d4d;
|
color: #4d4d4d;
|
||||||
min-width: 230px;
|
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
max-width: 550px;
|
|
||||||
margin: 0 auto ;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
background: #fff;
|
line-height: 1.4em;
|
||||||
z-index: 1;
|
margin: 0 auto;
|
||||||
|
max-width: 550px;
|
||||||
|
min-width: 230px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
background: none;
|
|
||||||
font-size: 100%;
|
|
||||||
vertical-align: baseline;
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
color: inherit;
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
background: none;
|
||||||
|
border: 0;
|
||||||
|
color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 100%;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-weight: inherit;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
vertical-align: baseline;
|
||||||
}
|
}
|
||||||
|
|
||||||
:focus {
|
:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden {
|
.hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todoapp {
|
.todoapp {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
margin: 130px 0 40px 0;
|
|
||||||
position: relative;
|
|
||||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
margin: 130px 0 40px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todoapp input::-webkit-input-placeholder {
|
.todoapp input::-webkit-input-placeholder {
|
||||||
|
color: #e6e6e6;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.todoapp input::-moz-placeholder {
|
.todoapp input::-moz-placeholder {
|
||||||
|
color: #e6e6e6;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.todoapp input::input-placeholder {
|
.todoapp input::input-placeholder {
|
||||||
|
color: #e6e6e6;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
color: #e6e6e6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.todoapp h1 {
|
.todoapp h1 {
|
||||||
position: absolute;
|
color: rgba(175, 47, 47, 0.15);
|
||||||
top: -155px;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 100px;
|
font-size: 100px;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
|
position: absolute;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: rgba(175, 47, 47, 0.15);
|
|
||||||
-webkit-text-rendering: optimizeLegibility;
|
-webkit-text-rendering: optimizeLegibility;
|
||||||
-moz-text-rendering: optimizeLegibility;
|
-moz-text-rendering: optimizeLegibility;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
|
top: -155px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-todo,
|
.new-todo,
|
||||||
.edit {
|
.edit {
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 18px;
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
line-height: 1.4em;
|
|
||||||
border: 0;
|
border: 0;
|
||||||
color: inherit;
|
|
||||||
padding: 6px;
|
|
||||||
border: 1px solid #999;
|
border: 1px solid #999;
|
||||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
color: inherit;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 18px;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
font-weight: inherit;
|
||||||
|
line-height: 1.4em;
|
||||||
|
margin: 0;
|
||||||
|
padding: 6px;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-todo {
|
.new-todo {
|
||||||
padding: 10px 16px 16px 60px;
|
|
||||||
border: none;
|
|
||||||
background: rgba(0, 0, 0, 0.003);
|
background: rgba(0, 0, 0, 0.003);
|
||||||
|
border: none;
|
||||||
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
|
||||||
|
padding: 10px 16px 16px 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
|
border-top: 1px solid #e6e6e6;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
border-top: 1px solid #e6e6e6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-all {
|
.toggle-all {
|
||||||
text-align: center;
|
|
||||||
border: none;
|
border: none;
|
||||||
/* Mobile Safari */
|
/* Mobile Safari */
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-all+label {
|
.toggle-all+label {
|
||||||
width: 60px;
|
|
||||||
height: 34px;
|
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
|
height: 34px;
|
||||||
|
left: -13px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -52px;
|
top: -52px;
|
||||||
left: -13px;
|
|
||||||
-webkit-transform: rotate(90deg);
|
-webkit-transform: rotate(90deg);
|
||||||
transform: rotate(90deg);
|
transform: rotate(90deg);
|
||||||
|
width: 60px;
|
||||||
}
|
}
|
||||||
.toggle-all+label:before {
|
|
||||||
|
.toggle-all+label::before {
|
||||||
|
color: #e6e6e6;
|
||||||
content: '❯';
|
content: '❯';
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
color: #e6e6e6;
|
padding: 10px 27px;
|
||||||
padding: 10px 27px 10px 27px;
|
|
||||||
}
|
}
|
||||||
.toggle-all:checked+label:before {
|
|
||||||
|
.toggle-all:checked+label::before {
|
||||||
color: #737373;
|
color: #737373;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list {
|
.todo-list {
|
||||||
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
list-style: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li {
|
.todo-list li {
|
||||||
position: relative;
|
|
||||||
font-size: 24px;
|
|
||||||
border-bottom: 1px solid #ededed;
|
border-bottom: 1px solid #ededed;
|
||||||
|
font-size: 24px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li:last-child {
|
.todo-list li:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li.editing {
|
.todo-list li.editing {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li.editing .edit {
|
.todo-list li.editing .edit {
|
||||||
display: block;
|
display: block;
|
||||||
width: 506px;
|
|
||||||
padding: 12px 16px;
|
|
||||||
margin: 0 0 0 43px;
|
margin: 0 0 0 43px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
width: 506px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li.editing .view {
|
.todo-list li.editing .view {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
text-align: center;
|
|
||||||
width: 40px;
|
|
||||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
|
||||||
height: auto;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
margin: auto 0;
|
|
||||||
border: none;
|
|
||||||
/* Mobile Safari */
|
/* Mobile Safari */
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
border: none;
|
||||||
|
bottom: 0;
|
||||||
|
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||||
|
height: auto;
|
||||||
|
margin: auto 0;
|
||||||
|
position: absolute;
|
||||||
|
text-align: center;
|
||||||
|
top: 0;
|
||||||
|
width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li .toggle+label {
|
.todo-list li .toggle+label {
|
||||||
/*
|
/*
|
||||||
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
|
||||||
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
|
||||||
*/
|
*/
|
||||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center left;
|
background-position: center left;
|
||||||
|
background-repeat: no-repeat;
|
||||||
background-size: 36px;
|
background-size: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li .toggle:checked+label {
|
.todo-list li .toggle:checked+label {
|
||||||
background-size: 36px;
|
|
||||||
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
|
||||||
|
background-size: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li label {
|
.todo-list li label {
|
||||||
word-break: break-all;
|
|
||||||
padding: 15px 15px 15px 50px;
|
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.0;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 15px 15px 15px 50px;
|
||||||
transition: color 0.4s;
|
transition: color 0.4s;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li.completed label {
|
.todo-list li.completed label {
|
||||||
color: #d9d9d9;
|
color: #d9d9d9;
|
||||||
text-decoration: line-through;
|
text-decoration: line-through;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li .destroy {
|
.todo-list li .destroy {
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 10px;
|
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 40px;
|
color: #cc9a9a;
|
||||||
|
cursor: pointer;
|
||||||
|
display: none;
|
||||||
|
font-size: 30px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin: auto 0;
|
margin: auto 0;
|
||||||
font-size: 30px;
|
position: absolute;
|
||||||
color: #cc9a9a;
|
right: 10px;
|
||||||
|
top: 0;
|
||||||
transition: color 0.2s ease-out;
|
transition: color 0.2s ease-out;
|
||||||
cursor: pointer;
|
width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li .destroy:hover {
|
.todo-list li .destroy:hover {
|
||||||
color: #af5b5e;
|
color: #af5b5e;
|
||||||
}
|
}
|
||||||
.todo-list li .destroy:after {
|
|
||||||
|
.todo-list li .destroy::after {
|
||||||
content: '×';
|
content: '×';
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li:hover .destroy {
|
.todo-list li:hover .destroy {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li .edit {
|
.todo-list li .edit {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li.editing:last-child {
|
.todo-list li.editing:last-child {
|
||||||
margin-bottom: -1px;
|
margin-bottom: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
color: #777;
|
|
||||||
position: relative;
|
|
||||||
padding: 10px 15px;
|
|
||||||
height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
border-top: 1px solid #e6e6e6;
|
border-top: 1px solid #e6e6e6;
|
||||||
|
color: #777;
|
||||||
|
height: 40px;
|
||||||
|
padding: 10px 15px;
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
.footer:before {
|
|
||||||
|
.footer::before {
|
||||||
|
bottom: 0;
|
||||||
|
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||||
content: '';
|
content: '';
|
||||||
|
height: 40px;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
height: 40px;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-count {
|
.todo-count {
|
||||||
float: left;
|
float: left;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-count strong {
|
.todo-count strong {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters {
|
.filters {
|
||||||
|
list-style: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
list-style: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters li {
|
.filters li {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters li a {
|
.filters li a {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 3px;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters li a:hover {
|
.filters li a:hover {
|
||||||
border-color: rgba(175, 47, 47, 0.1);
|
border-color: rgba(175, 47, 47, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters li a.selected {
|
.filters li a.selected {
|
||||||
border-color: rgba(175, 47, 47, 0.2);
|
border-color: rgba(175, 47, 47, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-completed,
|
.clear-completed,
|
||||||
html .clear-completed:active {
|
html .clear-completed:active {
|
||||||
float: right;
|
|
||||||
position: relative;
|
|
||||||
line-height: 20px;
|
|
||||||
text-decoration: none;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
float: right;
|
||||||
|
line-height: 20px;
|
||||||
|
position: relative;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-completed:hover {
|
.clear-completed:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
margin: 65px auto 0;
|
|
||||||
color: #bfbfbf;
|
color: #bfbfbf;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
margin: 65px auto 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.info p {
|
.info p {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info a {
|
.info a {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info a:hover {
|
.info a:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
@ -305,6 +353,7 @@
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
background: none;
|
background: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.todo-list li .toggle {
|
.todo-list li .toggle {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
}
|
}
|
||||||
|
|
@ -313,6 +362,7 @@
|
||||||
.footer {
|
.footer {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filters {
|
.filters {
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<el-table :data="list" style="width: 100%;padding-top: 15px;">
|
<el-table :data="list" style="padding-top: 15px;width: 100%;">
|
||||||
<el-table-column label="Order_No" min-width="200">
|
<el-table-column label="Order_No" min-width="200">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.row.order_no | orderNoFilter }}
|
{{ scope.row.order_no | orderNoFilter }}
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
<panel-group @handleSetLineChartData="handleSetLineChartData" />
|
||||||
|
|
||||||
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
|
<el-row style="background: #fff;margin-bottom: 32px;padding: 16px 16px 0;">
|
||||||
<line-chart :chart-data="lineChartData" />
|
<line-chart :chart-data="lineChartData" />
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
<el-row :gutter="8">
|
<el-row :gutter="8">
|
||||||
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="padding-right:8px;margin-bottom:30px;">
|
<el-col :xs="{span: 24}" :sm="{span: 24}" :md="{span: 24}" :lg="{span: 12}" :xl="{span: 12}" style="margin-bottom: 30px;padding-right: 8px;">
|
||||||
<transaction-table />
|
<transaction-table />
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom: 30px;">
|
<el-col :xs="{span: 24}" :sm="{span: 12}" :md="{span: 12}" :lg="{span: 6}" :xl="{span: 6}" style="margin-bottom: 30px;">
|
||||||
|
|
@ -98,21 +98,21 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.dashboard-editor-container {
|
.dashboard-editor-container {
|
||||||
padding: 32px;
|
|
||||||
background-color: rgb(240, 242, 245);
|
background-color: rgb(240, 242, 245);
|
||||||
|
padding: 32px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.github-corner {
|
.github-corner {
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
border: 0;
|
border: 0;
|
||||||
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 16px 16px 0;
|
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
|
padding: 16px 16px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,18 +1,18 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dashboard-editor-container">
|
<div class="dashboard-editor-container">
|
||||||
<div class=" clearfix">
|
<div class=" clearfix">
|
||||||
<pan-thumb :image="avatar" style="float: left">
|
<pan-thumb :image="avatar" style="float: left;">
|
||||||
Your roles:
|
Your roles:
|
||||||
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
|
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
|
||||||
</pan-thumb>
|
</pan-thumb>
|
||||||
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
|
<github-corner style=" border: 0;position: absolute; right: 0; top: 0;" />
|
||||||
<div class="info-container">
|
<div class="info-container">
|
||||||
<span class="display_name">{{ name }}</span>
|
<span class="display-name">{{ name }}</span>
|
||||||
<span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
|
<span style="display: inline-block;font-size: 20px;padding-top: 20px;">Editor's Dashboard</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<img :src="emptyGif" class="emptyGif">
|
<img :src="emptyGif" class="empty-gif">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -41,31 +41,34 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.emptyGif {
|
.empty-gif {
|
||||||
display: block;
|
display: block;
|
||||||
width: 45%;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
width: 45%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashboard-editor-container {
|
.dashboard-editor-container {
|
||||||
background-color: #e3e3e3;
|
background-color: #e3e3e3;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 50px 60px 0px;
|
padding: 50px 60px 0;
|
||||||
|
|
||||||
.pan-info-roles {
|
.pan-info-roles {
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 700;
|
|
||||||
color: #333;
|
color: #333;
|
||||||
display: block;
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-container {
|
.info-container {
|
||||||
position: relative;
|
|
||||||
margin-left: 190px;
|
|
||||||
height: 150px;
|
height: 150px;
|
||||||
line-height: 200px;
|
line-height: 200px;
|
||||||
.display_name {
|
margin-left: 190px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.display-name {
|
||||||
|
color: #212121;
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
color: #212121;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 25px;
|
top: 25px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -34,23 +34,23 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.documentation-container {
|
.documentation-container {
|
||||||
margin: 50px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: space-evenly;
|
justify-content: space-evenly;
|
||||||
|
margin: 50px;
|
||||||
|
|
||||||
.document-btn {
|
.document-btn {
|
||||||
flex-shrink: 0;
|
|
||||||
display: block;
|
|
||||||
cursor: pointer;
|
|
||||||
background: black;
|
background: black;
|
||||||
color: white;
|
color: white;
|
||||||
height: 60px;
|
cursor: pointer;
|
||||||
width: 200px;
|
display: block;
|
||||||
margin-bottom: 16px;
|
flex-shrink: 0;
|
||||||
line-height: 60px;
|
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
margin-bottom: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
width: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="errPage-container">
|
<div class="err-page-container">
|
||||||
<ErrorA />
|
<ErrorA />
|
||||||
<ErrorB />
|
<ErrorB />
|
||||||
<h3>Please click the bug icon in the upper right corner</h3>
|
<h3>Please click the bug icon in the upper right corner</h3>
|
||||||
|
|
@ -26,7 +26,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.errPage-container {
|
.err-page-container {
|
||||||
padding: 30px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="errPage-container">
|
<div class="err-page-container">
|
||||||
<el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
|
<el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back">
|
||||||
返回
|
返回
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
@ -59,37 +59,45 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.errPage-container {
|
.err-page-container {
|
||||||
width: 800px;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 100px auto;
|
margin: 100px auto;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 800px;
|
||||||
|
|
||||||
.pan-back-btn {
|
.pan-back-btn {
|
||||||
background: #008489;
|
background: #008489;
|
||||||
color: #fff;
|
|
||||||
border: none !important;
|
border: none !important;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-gif {
|
.pan-gif {
|
||||||
margin: 0 auto;
|
|
||||||
display: block;
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pan-img {
|
.pan-img {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-jumbo {
|
.text-jumbo {
|
||||||
|
color: #484848;
|
||||||
font-size: 60px;
|
font-size: 60px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #484848;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-unstyled {
|
.list-unstyled {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #008489;
|
color: #008489;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<div class="bullshit">
|
<div class="bullshit">
|
||||||
<div class="bullshit__oops">OOPS!</div>
|
<div class="bullshit__oops">OOPS!</div>
|
||||||
<div class="bullshit__info">All rights reserved
|
<div class="bullshit__info">All rights reserved
|
||||||
<a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
|
<a style="color: #20a0ff;" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="bullshit__headline">{{ message }}</div>
|
<div class="bullshit__headline">{{ message }}</div>
|
||||||
<div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
|
<div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
|
||||||
|
|
@ -34,193 +34,215 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.wscn-http404-container {
|
.wscn-http404-container {
|
||||||
transform: translate(-50%,-50%);
|
left: 50%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40%;
|
top: 40%;
|
||||||
left: 50%;
|
transform: translate(-50%, -50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.wscn-http404 {
|
.wscn-http404 {
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 50px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
padding: 0 50px;
|
|
||||||
overflow: hidden;
|
|
||||||
.pic-404 {
|
.pic-404 {
|
||||||
position: relative;
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 600px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
width: 600px;
|
||||||
|
|
||||||
&__parent {
|
&__parent {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__child {
|
&__child {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
&.left {
|
&.left {
|
||||||
width: 80px;
|
animation-delay: 1s;
|
||||||
top: 17px;
|
animation-duration: 2s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-name: cloudLeft;
|
||||||
|
animation-timing-function: linear;
|
||||||
left: 220px;
|
left: 220px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-name: cloudLeft;
|
top: 17px;
|
||||||
animation-duration: 2s;
|
width: 80px;
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.mid {
|
&.mid {
|
||||||
width: 46px;
|
animation-delay: 1.2s;
|
||||||
top: 10px;
|
animation-duration: 2s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-name: cloudMid;
|
||||||
|
animation-timing-function: linear;
|
||||||
left: 420px;
|
left: 420px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-name: cloudMid;
|
top: 10px;
|
||||||
animation-duration: 2s;
|
width: 46px;
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-delay: 1.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.right {
|
&.right {
|
||||||
width: 62px;
|
animation-delay: 1s;
|
||||||
top: 100px;
|
animation-duration: 2s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-name: cloudRight;
|
||||||
|
animation-timing-function: linear;
|
||||||
left: 500px;
|
left: 500px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
animation-name: cloudRight;
|
top: 100px;
|
||||||
animation-duration: 2s;
|
width: 62px;
|
||||||
animation-timing-function: linear;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-delay: 1s;
|
|
||||||
}
|
}
|
||||||
@keyframes cloudLeft {
|
@keyframes cloudLeft {
|
||||||
0% {
|
0% {
|
||||||
top: 17px;
|
|
||||||
left: 220px;
|
left: 220px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
top: 17px;
|
||||||
}
|
}
|
||||||
|
|
||||||
20% {
|
20% {
|
||||||
top: 33px;
|
|
||||||
left: 188px;
|
left: 188px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
top: 33px;
|
||||||
}
|
}
|
||||||
|
|
||||||
80% {
|
80% {
|
||||||
top: 81px;
|
|
||||||
left: 92px;
|
left: 92px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
top: 81px;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
top: 97px;
|
|
||||||
left: 60px;
|
left: 60px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
top: 97px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes cloudMid {
|
@keyframes cloudMid {
|
||||||
0% {
|
0% {
|
||||||
top: 10px;
|
|
||||||
left: 420px;
|
left: 420px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
20% {
|
20% {
|
||||||
top: 40px;
|
|
||||||
left: 360px;
|
left: 360px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
top: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
70% {
|
70% {
|
||||||
top: 130px;
|
|
||||||
left: 180px;
|
left: 180px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
top: 130px;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
top: 160px;
|
|
||||||
left: 120px;
|
left: 120px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
top: 160px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@keyframes cloudRight {
|
@keyframes cloudRight {
|
||||||
0% {
|
0% {
|
||||||
top: 100px;
|
|
||||||
left: 500px;
|
left: 500px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
top: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
20% {
|
20% {
|
||||||
top: 120px;
|
|
||||||
left: 460px;
|
left: 460px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
top: 120px;
|
||||||
}
|
}
|
||||||
|
|
||||||
80% {
|
80% {
|
||||||
top: 180px;
|
|
||||||
left: 340px;
|
left: 340px;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
top: 180px;
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
top: 200px;
|
|
||||||
left: 300px;
|
left: 300px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
top: 200px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bullshit {
|
.bullshit {
|
||||||
position: relative;
|
|
||||||
float: left;
|
float: left;
|
||||||
width: 300px;
|
|
||||||
padding: 30px 0;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding: 30px 0;
|
||||||
|
position: relative;
|
||||||
|
width: 300px;
|
||||||
|
|
||||||
&__oops {
|
&__oops {
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-name: slideUp;
|
||||||
|
color: #1482f0;
|
||||||
font-size: 32px;
|
font-size: 32px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
color: #1482f0;
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
|
||||||
&__headline {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 24px;
|
|
||||||
color: #222;
|
|
||||||
font-weight: bold;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
margin-bottom: 10px;
|
|
||||||
animation-name: slideUp;
|
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-delay: 0.1s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__headline {
|
||||||
|
animation-delay: 0.1s;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-name: slideUp;
|
||||||
|
color: #222;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 24px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
&__info {
|
&__info {
|
||||||
|
animation-delay: 0.2s;
|
||||||
|
animation-duration: 0.5s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-name: slideUp;
|
||||||
|
color: grey;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 21px;
|
line-height: 21px;
|
||||||
color: grey;
|
|
||||||
opacity: 0;
|
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
animation-name: slideUp;
|
opacity: 0;
|
||||||
animation-duration: 0.5s;
|
|
||||||
animation-delay: 0.2s;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__return-home {
|
&__return-home {
|
||||||
display: block;
|
animation-delay: 0.3s;
|
||||||
float: left;
|
animation-duration: 0.5s;
|
||||||
width: 110px;
|
animation-fill-mode: forwards;
|
||||||
height: 36px;
|
animation-name: slideUp;
|
||||||
background: #1482f0;
|
background: #1482f0;
|
||||||
border-radius: 100px;
|
border-radius: 100px;
|
||||||
text-align: center;
|
color: #fff;
|
||||||
color: #ffffff;
|
|
||||||
opacity: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 36px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
animation-name: slideUp;
|
display: block;
|
||||||
animation-duration: 0.5s;
|
float: left;
|
||||||
animation-delay: 0.3s;
|
font-size: 14px;
|
||||||
animation-fill-mode: forwards;
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
opacity: 0;
|
||||||
|
text-align: center;
|
||||||
|
width: 110px;
|
||||||
}
|
}
|
||||||
@keyframes slideUp {
|
@keyframes slideUp {
|
||||||
0% {
|
0% {
|
||||||
transform: translateY(60px);
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
transform: translateY(60px);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="createPost-container">
|
<div class="create-post-container">
|
||||||
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
|
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
|
||||||
|
|
||||||
<sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
|
<sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</el-button>
|
</el-button>
|
||||||
</sticky>
|
</sticky>
|
||||||
|
|
||||||
<div class="createPost-main-container">
|
<div class="create-post-main-container">
|
||||||
<el-row>
|
<el-row>
|
||||||
<Warning />
|
<Warning />
|
||||||
|
|
||||||
|
|
@ -25,10 +25,10 @@
|
||||||
</MDinput>
|
</MDinput>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<div class="postInfo-container">
|
<div class="post-info-container">
|
||||||
<el-row>
|
<el-row>
|
||||||
<el-col :span="8">
|
<el-col :span="8">
|
||||||
<el-form-item label-width="60px" label="Author:" class="postInfo-container-item">
|
<el-form-item label-width="60px" label="Author:" class="post-info-container-item">
|
||||||
<el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
|
<el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
|
||||||
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item" />
|
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item" />
|
||||||
</el-select>
|
</el-select>
|
||||||
|
|
@ -36,20 +36,20 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-form-item label-width="120px" label="Publish Time:" class="postInfo-container-item">
|
<el-form-item label-width="120px" label="Publish Time:" class="post-info-container-item">
|
||||||
<el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
|
<el-date-picker v-model="displayTime" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<el-form-item label-width="90px" label="Importance:" class="postInfo-container-item">
|
<el-form-item label-width="90px" label="Importance:" class="post-info-container-item">
|
||||||
<el-rate
|
<el-rate
|
||||||
v-model="postForm.importance"
|
v-model="postForm.importance"
|
||||||
:max="3"
|
:max="3"
|
||||||
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
|
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
|
||||||
:low-threshold="1"
|
:low-threshold="1"
|
||||||
:high-threshold="3"
|
:high-threshold="3"
|
||||||
style="display:inline-block"
|
style="display: inline-block;"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -250,40 +250,40 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import "~@/styles/mixin.scss";
|
@import '~@/styles/mixin.scss';
|
||||||
|
|
||||||
.createPost-container {
|
.create-post-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.createPost-main-container {
|
.create-post-main-container {
|
||||||
padding: 40px 45px 20px 50px;
|
padding: 40px 45px 20px 50px;
|
||||||
|
|
||||||
.postInfo-container {
|
.post-info-container {
|
||||||
position: relative;
|
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
.postInfo-container-item {
|
.post-info-container-item {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.word-counter {
|
.word-counter {
|
||||||
width: 40px;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 0px;
|
top: 0;
|
||||||
|
width: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.article-textarea /deep/ {
|
.article-textarea /deep/ {
|
||||||
textarea {
|
textarea {
|
||||||
|
border: none;
|
||||||
|
border-bottom: 1px solid #bfcbd9;
|
||||||
|
border-radius: 0;
|
||||||
padding-right: 40px;
|
padding-right: 40px;
|
||||||
resize: none;
|
resize: none;
|
||||||
border: none;
|
|
||||||
border-radius: 0px;
|
|
||||||
border-bottom: 1px solid #bfcbd9;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@
|
||||||
Link
|
Link
|
||||||
<i class="el-icon-caret-bottom el-icon--right" />
|
<i class="el-icon-caret-bottom el-icon--right" />
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
|
<el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width: 400px;">
|
||||||
<el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
|
<el-form-item label-width="0px" style="margin-bottom: 0;" prop="source_uri">
|
||||||
<el-input v-model="source_uri" placeholder="Please enter the content">
|
<el-input v-model="source_uri" placeholder="Please enter the content">
|
||||||
<template slot="prepend">
|
<template slot="prepend">
|
||||||
URL
|
URL
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
|
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
|
||||||
<el-table-column align="center" label="ID" width="80">
|
<el-table-column align="center" label="ID" width="80">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{ scope.row.id }}</span>
|
<span>{{ scope.row.id }}</span>
|
||||||
|
|
@ -104,6 +104,7 @@ export default {
|
||||||
.edit-input {
|
.edit-input {
|
||||||
padding-right: 100px;
|
padding-right: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel-btn {
|
.cancel-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
|
|
|
||||||
|
|
@ -108,8 +108,8 @@ export default {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.radio-label {
|
.radio-label {
|
||||||
font-size: 14px;
|
|
||||||
color: #606266;
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
padding: 0 12px 0 30px;
|
padding: 0 12px 0 30px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
|
|
||||||
<el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">Export</el-button>
|
<el-button :loading="downloadLoading" style="margin-bottom: 20px;" type="primary" icon="el-icon-document" @click="handleDownload">Export</el-button>
|
||||||
|
|
||||||
<el-table
|
<el-table
|
||||||
ref="multipleTable"
|
ref="multipleTable"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width: 350px;" prefix-icon="el-icon-document" />
|
<el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width: 350px;" prefix-icon="el-icon-document" />
|
||||||
<el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">
|
<el-button :loading="downloadLoading" style="margin-bottom: 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
|
||||||
Export Selected Items
|
Export Selected Items
|
||||||
</el-button>
|
</el-button>
|
||||||
<a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left: 15px;">
|
<a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left: 15px;">
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
|
<upload-excel-component :on-success="handleSuccess" :before-upload="beforeUpload" />
|
||||||
<el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
|
<el-table :data="tableData" border highlight-current-row style="margin-top: 20px;width: 100%;">
|
||||||
<el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
|
<el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -72,20 +72,20 @@ export default {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
position: relative;
|
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-item {
|
.icon-item {
|
||||||
margin: 20px;
|
|
||||||
height: 85px;
|
|
||||||
text-align: center;
|
|
||||||
width: 100px;
|
|
||||||
float: left;
|
|
||||||
font-size: 30px;
|
|
||||||
color: #24292e;
|
color: #24292e;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
float: left;
|
||||||
|
font-size: 30px;
|
||||||
|
height: 85px;
|
||||||
|
margin: 20px;
|
||||||
|
text-align: center;
|
||||||
|
width: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
|
|
||||||
|
|
@ -40,32 +40,37 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.social-signup-container {
|
.social-signup-container {
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
|
|
||||||
.sign-btn {
|
.sign-btn {
|
||||||
display: inline-block;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wx-svg-container,
|
.wx-svg-container,
|
||||||
.qq-svg-container {
|
.qq-svg-container {
|
||||||
|
border-radius: 4px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
text-align: center;
|
|
||||||
padding-top: 1px;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
|
padding-top: 1px;
|
||||||
|
text-align: center;
|
||||||
|
width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wx-svg-container {
|
.wx-svg-container {
|
||||||
background-color: #24da70;
|
background-color: #24da70;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qq-svg-container {
|
.qq-svg-container {
|
||||||
background-color: #6BA2D6;
|
background-color: #6ba2d6;
|
||||||
margin-left: 50px;
|
margin-left: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -45,9 +45,9 @@
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
|
|
||||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
|
<el-button :loading="loading" type="primary" style="margin-bottom: 30px;width: 100%;" @click.native.prevent="handleLogin">Login</el-button>
|
||||||
|
|
||||||
<div style="position:relative">
|
<div style="position: relative;">
|
||||||
<div class="tips">
|
<div class="tips">
|
||||||
<span>Username : admin</span>
|
<span>Username : admin</span>
|
||||||
<span>Password : any</span>
|
<span>Password : any</span>
|
||||||
|
|
@ -205,7 +205,7 @@ export default {
|
||||||
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
||||||
|
|
||||||
$bg: #283443;
|
$bg: #283443;
|
||||||
$light_gray:#fff;
|
$light-gray: #fff;
|
||||||
$cursor: #fff;
|
$cursor: #fff;
|
||||||
|
|
||||||
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
||||||
|
|
@ -222,25 +222,25 @@ $cursor: #fff;
|
||||||
width: 85%;
|
width: 85%;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
background: transparent;
|
|
||||||
border: 0px;
|
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
border-radius: 0px;
|
background: transparent;
|
||||||
padding: 12px 5px 12px 15px;
|
border: 0;
|
||||||
color: $light_gray;
|
border-radius: 0;
|
||||||
height: 47px;
|
|
||||||
caret-color: $cursor;
|
caret-color: $cursor;
|
||||||
|
color: $light-gray;
|
||||||
|
height: 47px;
|
||||||
|
padding: 12px 5px 12px 15px;
|
||||||
|
|
||||||
&:-webkit-autofill {
|
&:-webkit-autofill {
|
||||||
box-shadow: 0 0 0px 1000px $bg inset !important;
|
box-shadow: 0 0 0 1000px $bg inset !important;
|
||||||
-webkit-text-fill-color: $cursor !important;
|
-webkit-text-fill-color: $cursor !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-form-item {
|
.el-form-item {
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
color: #454545;
|
color: #454545;
|
||||||
}
|
}
|
||||||
|
|
@ -249,27 +249,27 @@ $cursor: #fff;
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
$bg: #2d3a4b;
|
$bg: #2d3a4b;
|
||||||
$dark_gray:#889aa4;
|
$dark-gray: #889aa4;
|
||||||
$light_gray:#eee;
|
$light-gray: #eee;
|
||||||
|
|
||||||
.login-container {
|
.login-container {
|
||||||
min-height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
background-color: $bg;
|
background-color: $bg;
|
||||||
|
min-height: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 160px 35px 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 520px;
|
width: 520px;
|
||||||
max-width: 100%;
|
|
||||||
padding: 160px 35px 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tips {
|
.tips {
|
||||||
font-size: 14px;
|
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
|
|
@ -280,39 +280,39 @@ $light_gray:#eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.svg-container {
|
.svg-container {
|
||||||
|
color: $dark-gray;
|
||||||
|
display: inline-block;
|
||||||
padding: 6px 5px 6px 15px;
|
padding: 6px 5px 6px 15px;
|
||||||
color: $dark_gray;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
width: 30px;
|
width: 30px;
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-container {
|
.title-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
|
color: $light-gray;
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
color: $light_gray;
|
|
||||||
margin: 0px auto 40px auto;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin: 0 auto 40px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-pwd {
|
.show-pwd {
|
||||||
|
color: $dark-gray;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
top: 7px;
|
top: 7px;
|
||||||
font-size: 16px;
|
|
||||||
color: $dark_gray;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thirdparty-button {
|
.thirdparty-button {
|
||||||
|
bottom: 6px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 470px) {
|
@media only screen and (max-width: 470px) {
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
|
<div v-loading.fullscreen.lock="fullscreenLoading" class="main-article" element-loading-text="Efforts to generate PDF">
|
||||||
<div class="article__heading">
|
<div class="article-heading">
|
||||||
<div class="article__heading__title">
|
<div class="article-heading-title">
|
||||||
{{ article.title }}
|
{{ article.title }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -44,57 +44,57 @@ export default {
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@mixin clearfix {
|
@mixin clearfix {
|
||||||
&:before {
|
&::before {
|
||||||
display: table;
|
|
||||||
content: '';
|
|
||||||
clear: both;
|
clear: both;
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&::after {
|
||||||
display: table;
|
|
||||||
content: '';
|
|
||||||
clear: both;
|
clear: both;
|
||||||
|
content: '';
|
||||||
|
display: table;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-article {
|
.main-article {
|
||||||
padding: 20px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: block;
|
|
||||||
width: 740px;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
display: block;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
width: 740px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article__heading {
|
.article-heading {
|
||||||
position: relative;
|
|
||||||
padding: 0 0 20px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
padding: 0 0 20px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.article__heading__title {
|
.article-heading-title {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
color: #333;
|
||||||
display: block;
|
display: block;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-box-orient: vertical;
|
font-size: 32px;
|
||||||
|
font-weight: 600;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 2;
|
||||||
line-clamp: 2;
|
line-clamp: 2;
|
||||||
word-wrap: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
font-size: 32px;
|
|
||||||
line-height: 48px;
|
line-height: 48px;
|
||||||
font-weight: 600;
|
|
||||||
color: #333;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
word-wrap: break-word;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-article-content {
|
.node-article-content {
|
||||||
margin: 20px 0 0;
|
|
||||||
@include clearfix;
|
@include clearfix;
|
||||||
font-size: 16px;
|
|
||||||
color: #333;
|
color: #333;
|
||||||
|
font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||||
|
font-size: 16px;
|
||||||
letter-spacing: 0.5px;
|
letter-spacing: 0.5px;
|
||||||
line-height: 28px;
|
line-height: 28px;
|
||||||
|
margin: 20px 0 0;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
|
|
||||||
|
|
||||||
&> :last-child {
|
&> :last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -107,17 +107,17 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: -0.003em;
|
||||||
line-height: 1.58;
|
line-height: 1.58;
|
||||||
letter-spacing: -.003em;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -128,32 +128,32 @@ export default {
|
||||||
li {
|
li {
|
||||||
--x-height-multiplier: 0.375;
|
--x-height-multiplier: 0.375;
|
||||||
--baseline-multiplier: 0.17;
|
--baseline-multiplier: 0.17;
|
||||||
|
|
||||||
letter-spacing: .01rem;
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
letter-spacing: -0.003em;
|
||||||
line-height: 1.58;
|
line-height: 1.58;
|
||||||
letter-spacing: -.003em;
|
|
||||||
margin-left: 30px;
|
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
|
margin-left: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.84) 100%, rgba(0, 0, 0, 0) 0);
|
||||||
background-repeat: repeat-x;
|
|
||||||
background-image: linear-gradient(to right, rgba(0, 0, 0, .84) 100%, rgba(0, 0, 0, 0) 0);
|
|
||||||
background-size: 1px 1px;
|
|
||||||
background-position: 0 calc(1em + 1px);
|
background-position: 0 calc(1em + 1px);
|
||||||
|
background-repeat: repeat-x;
|
||||||
|
background-size: 1px 1px;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
code {
|
code {
|
||||||
background: rgba(0, 0, 0, .05);
|
background: rgba(0, 0, 0, 0.05);
|
||||||
padding: 3px 4px;
|
|
||||||
margin: 0 2px;
|
|
||||||
font-size: 16px;
|
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
font-size: 16px;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 3px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
|
@ -168,17 +168,17 @@ export default {
|
||||||
blockquote {
|
blockquote {
|
||||||
--x-height-multiplier: 0.375;
|
--x-height-multiplier: 0.375;
|
||||||
--baseline-multiplier: 0.17;
|
--baseline-multiplier: 0.17;
|
||||||
font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
|
border-left: 3px solid rgba(0, 0, 0, 0.84);
|
||||||
letter-spacing: .01rem;
|
font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman', Times, serif;
|
||||||
font-weight: 400;
|
|
||||||
font-style: italic;
|
|
||||||
font-size: 21px;
|
font-size: 21px;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: 400;
|
||||||
|
letter-spacing: 0.01rem;
|
||||||
|
letter-spacing: -0.003em;
|
||||||
line-height: 1.58;
|
line-height: 1.58;
|
||||||
letter-spacing: -.003em;
|
|
||||||
border-left: 3px solid rgba(0, 0, 0, .84);
|
|
||||||
padding-left: 20px;
|
|
||||||
margin-left: -23px;
|
margin-left: -23px;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|
@ -189,8 +189,8 @@ export default {
|
||||||
h3,
|
h3,
|
||||||
h4 {
|
h4 {
|
||||||
font-size: 34px;
|
font-size: 34px;
|
||||||
|
letter-spacing: -0.015em;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
letter-spacing: -.015em;
|
|
||||||
margin: 53px 0 0;
|
margin: 53px 0 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
Only
|
Only
|
||||||
<el-tag class="permission-tag" size="small">admin</el-tag> can see this
|
<el-tag class="permission-tag" size="small">admin</el-tag> can see this
|
||||||
</span>
|
</span>
|
||||||
<el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
|
<el-tag v-permission="['admin']" class="permission-source-code" type="info">
|
||||||
v-permission="['admin']"
|
v-permission="['admin']"
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
Only
|
Only
|
||||||
<el-tag class="permission-tag" size="small">editor</el-tag> can see this
|
<el-tag class="permission-tag" size="small">editor</el-tag> can see this
|
||||||
</span>
|
</span>
|
||||||
<el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
|
<el-tag v-permission="['editor']" class="permission-source-code" type="info">
|
||||||
v-permission="['editor']"
|
v-permission="['editor']"
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -28,7 +28,7 @@
|
||||||
<el-tag class="permission-tag" size="small">admin</el-tag> and
|
<el-tag class="permission-tag" size="small">admin</el-tag> and
|
||||||
<el-tag class="permission-tag" size="small">editor</el-tag> can see this
|
<el-tag class="permission-tag" size="small">editor</el-tag> can see this
|
||||||
</span>
|
</span>
|
||||||
<el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
|
<el-tag v-permission="['admin','editor']" class="permission-source-code" type="info">
|
||||||
v-permission="['admin','editor']"
|
v-permission="['admin','editor']"
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -43,21 +43,21 @@
|
||||||
<el-tabs type="border-card" style="width: 550px;">
|
<el-tabs type="border-card" style="width: 550px;">
|
||||||
<el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
|
<el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
|
||||||
Admin can see this
|
Admin can see this
|
||||||
<el-tag class="permission-sourceCode" type="info">
|
<el-tag class="permission-source-code" type="info">
|
||||||
v-if="checkPermission(['admin'])"
|
v-if="checkPermission(['admin'])"
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
|
<el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
|
||||||
Editor can see this
|
Editor can see this
|
||||||
<el-tag class="permission-sourceCode" type="info">
|
<el-tag class="permission-source-code" type="info">
|
||||||
v-if="checkPermission(['editor'])"
|
v-if="checkPermission(['editor'])"
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
|
<el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
|
||||||
Both admin or editor can see this
|
Both admin or editor can see this
|
||||||
<el-tag class="permission-sourceCode" type="info">
|
<el-tag class="permission-source-code" type="info">
|
||||||
v-if="checkPermission(['admin','editor'])"
|
v-if="checkPermission(['admin','editor'])"
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
@ -92,17 +92,19 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.app-container {
|
.app-container {
|
||||||
/deep/ .permission-alert {
|
/deep/ .permission-alert {
|
||||||
width: 320px;
|
|
||||||
margin-top: 15px;
|
|
||||||
background-color: #f0f9eb;
|
background-color: #f0f9eb;
|
||||||
color: #67c23a;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
color: #67c23a;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
margin-top: 15px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
width: 320px;
|
||||||
}
|
}
|
||||||
/deep/ .permission-sourceCode {
|
|
||||||
|
/deep/ .permission-source-code {
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/deep/ .permission-tag {
|
/deep/ .permission-tag {
|
||||||
background-color: #ecf5ff;
|
background-color: #ecf5ff;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-button type="primary" @click="handleAddRole">New Role</el-button>
|
<el-button type="primary" @click="handleAddRole">New Role</el-button>
|
||||||
|
|
||||||
<el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
|
<el-table :data="rolesList" style="margin-top: 30px;width: 100%;" border>
|
||||||
<el-table-column align="center" label="Role Key" width="220">
|
<el-table-column align="center" label="Role Key" width="220">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
{{ scope.row.key }}
|
{{ scope.row.key }}
|
||||||
|
|
@ -263,6 +263,7 @@ export default {
|
||||||
.roles-table {
|
.roles-table {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.permission-tree {
|
.permission-tree {
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -103,7 +103,6 @@ export default {
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.user-activity {
|
.user-activity {
|
||||||
.user-block {
|
.user-block {
|
||||||
|
|
||||||
.username,
|
.username,
|
||||||
.description {
|
.description {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
@ -112,37 +111,37 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.username {
|
.username {
|
||||||
font-size: 16px;
|
|
||||||
color: #000;
|
color: #000;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:after {
|
::after {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-circle {
|
.img-circle {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
float: left;
|
float: left;
|
||||||
|
height: 40px;
|
||||||
|
width: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-weight: 500;
|
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.post {
|
.post {
|
||||||
font-size: 14px;
|
|
||||||
border-bottom: 1px solid #d2d6de;
|
border-bottom: 1px solid #d2d6de;
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
color: #666;
|
|
||||||
|
|
||||||
.image {
|
.image {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -152,19 +151,18 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-inline {
|
.list-inline {
|
||||||
padding-left: 0;
|
|
||||||
margin-left: -5px;
|
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
margin-left: -5px;
|
||||||
|
padding-left: 0;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding-right: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-black {
|
.link-black {
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
color: #999;
|
color: #999;
|
||||||
|
|
@ -175,8 +173,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-center {
|
.box-center {
|
||||||
margin: 0 auto;
|
|
||||||
display: table;
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-muted {
|
.text-muted {
|
||||||
|
|
|
||||||
|
|
@ -75,8 +75,8 @@ export default {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.box-center {
|
.box-center {
|
||||||
margin: 0 auto;
|
|
||||||
display: table;
|
display: table;
|
||||||
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-muted {
|
.text-muted {
|
||||||
|
|
@ -93,9 +93,9 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-role {
|
.user-role {
|
||||||
padding-top: 10px;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
padding-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-social {
|
.box-social {
|
||||||
|
|
@ -112,8 +112,8 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
.user-bio {
|
.user-bio {
|
||||||
margin-top: 20px;
|
|
||||||
color: #606266;
|
color: #606266;
|
||||||
|
margin-top: 20px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
|
|
@ -125,9 +125,9 @@ export default {
|
||||||
|
|
||||||
.user-bio-section-header {
|
.user-bio-section-header {
|
||||||
border-bottom: 1px solid #dfe6ec;
|
border-bottom: 1px solid #dfe6ec;
|
||||||
padding-bottom: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<el-table :data="list" border fit highlight-current-row style="width: 100%">
|
<el-table :data="list" border fit highlight-current-row style="width: 100%;">
|
||||||
<el-table-column
|
<el-table-column
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
align="center"
|
align="center"
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="tab-container">
|
<div class="tab-container">
|
||||||
<el-tag>mounted times ：{{ createdTimes }}</el-tag>
|
<el-tag>mounted times ：{{ createdTimes }}</el-tag>
|
||||||
<el-alert :closable="false" style="width:200px;display:inline-block;vertical-align: middle;margin-left:30px;" title="Tab with keep-alive" type="success" />
|
<el-alert :closable="false" style="display: inline-block;margin-left: 30px;vertical-align: middle;width: 200px;" title="Tab with keep-alive" type="success" />
|
||||||
<el-tabs v-model="activeName" style="margin-top: 15px;" type="border-card">
|
<el-tabs v-model="activeName" style="margin-top: 15px;" type="border-card">
|
||||||
<el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
|
<el-tab-pane v-for="item in tabMapOptions" :key="item.key" :label="item.label" :name="item.key">
|
||||||
<keep-alive>
|
<keep-alive>
|
||||||
|
|
|
||||||
|
|
@ -2,13 +2,13 @@
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<div class="filter-container">
|
<div class="filter-container">
|
||||||
<el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
<el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
||||||
<el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
|
<el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px;" class="filter-item">
|
||||||
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
|
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
|
<el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px;">
|
||||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
|
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
|
<el-select v-model="listQuery.sort" style="width: 140px;" class="filter-item" @change="handleFilter">
|
||||||
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
|
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
|
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
|
||||||
|
|
@ -100,7 +100,7 @@
|
||||||
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
|
||||||
|
|
||||||
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
||||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
|
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style=" margin-left: 50px;width: 400px;">
|
||||||
<el-form-item label="Type" prop="type">
|
<el-form-item label="Type" prop="type">
|
||||||
<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
|
<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
|
||||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||||
|
|
@ -135,7 +135,7 @@
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
||||||
<el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
|
<el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
|
||||||
<el-table :data="pvData" border fit highlight-current-row style="width: 100%">
|
<el-table :data="pvData" border fit highlight-current-row style="width: 100%;">
|
||||||
<el-table-column prop="key" label="Channel" />
|
<el-table-column prop="key" label="Channel" />
|
||||||
<el-table-column prop="pv" label="Pv" />
|
<el-table-column prop="pv" label="Pv" />
|
||||||
</el-table>
|
</el-table>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<!-- Note that row-key is necessary to get a correct row order. -->
|
<!-- Note that row-key is necessary to get a correct row order. -->
|
||||||
<el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
|
<el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%;">
|
||||||
<el-table-column align="center" label="ID" width="65">
|
<el-table-column align="center" label="ID" width="65">
|
||||||
<template slot-scope="{row}">
|
<template slot-scope="{row}">
|
||||||
<span>{{ row.id }}</span>
|
<span>{{ row.id }}</span>
|
||||||
|
|
@ -132,9 +132,9 @@ export default {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.sortable-ghost {
|
.sortable-ghost {
|
||||||
opacity: .8;
|
|
||||||
color: #fff!important;
|
|
||||||
background: #42b983 !important;
|
background: #42b983 !important;
|
||||||
|
color: #fff !important;
|
||||||
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
@ -142,11 +142,13 @@ export default {
|
||||||
.icon-star {
|
.icon-star {
|
||||||
margin-right: 2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.drag-handler {
|
.drag-handler {
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
height: 20px;
|
||||||
|
width: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.show-d {
|
.show-d {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%">
|
<el-table :key="key" :data="tableData" border fit highlight-current-row style="width: 100%;">
|
||||||
<el-table-column prop="name" label="fruitName" width="180" />
|
<el-table-column prop="name" label="fruitName" width="180" />
|
||||||
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
|
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-table :data="tableData" border fit highlight-current-row style="width: 100%">
|
<el-table :data="tableData" border fit highlight-current-row style="width: 100%;">
|
||||||
<el-table-column prop="name" label="fruitName" width="180" />
|
<el-table-column prop="name" label="fruitName" width="180" />
|
||||||
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
|
<el-table-column v-for="fruit in formThead" :key="fruit" :label="fruit">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<div style="margin:0 0 5px 20px">
|
<div style="margin: 0 0 5px 20px;">
|
||||||
Fixed header, sorted by header order,
|
Fixed header, sorted by header order,
|
||||||
</div>
|
</div>
|
||||||
<fixed-thead />
|
<fixed-thead />
|
||||||
|
|
||||||
<div style="margin:30px 0 5px 20px">
|
<div style="margin: 30px 0 5px 20px;">
|
||||||
Not fixed header, sorted by click order
|
Not fixed header, sorted by click order
|
||||||
</div>
|
</div>
|
||||||
<unfixed-thead />
|
<unfixed-thead />
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
|
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
|
||||||
<el-table-column align="center" label="ID" width="80">
|
<el-table-column align="center" label="ID" width="80">
|
||||||
<template slot-scope="{row}">
|
<template slot-scope="{row}">
|
||||||
<span>{{ row.id }}</span>
|
<span>{{ row.id }}</span>
|
||||||
|
|
@ -141,6 +141,7 @@ export default {
|
||||||
.edit-input {
|
.edit-input {
|
||||||
padding-right: 100px;
|
padding-right: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cancel-btn {
|
.cancel-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 15px;
|
right: 15px;
|
||||||
|
|
|
||||||
|
|
@ -104,10 +104,11 @@ export default {
|
||||||
.field-label {
|
.field-label {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-card {
|
.box-card {
|
||||||
width: 400px;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 20px auto;
|
margin: 20px auto;
|
||||||
|
max-width: 100%;
|
||||||
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.block {
|
.block {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue