update css scss

This commit is contained in:
mwx816443 2020-06-06 09:53:55 +08:00
parent 14559bab96
commit c328ee3b5a
94 changed files with 1277 additions and 1345 deletions
src
components
BackToTop
DndList
DragSelect
Dropzone
GithubCorner
ImageCropper
JsonEditor
Kanban
MDinput
Pagination
PanThumb
RightPanel
Screenfull
Share
SvgIcon
TextHoverEffect
Tinymce
Upload
UploadExcel
directive/waves
layout
styles
views

View File

@ -1,7 +1,7 @@
<template>
<transition :name="transitionName">
<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="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>
</transition>
</template>
@ -96,12 +96,12 @@ export default {
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0
opacity: 0;
}
.back-to-ceiling .Icon {

View File

@ -7,9 +7,9 @@
<div class="list-complete-item-handle">
{{ element.id }}[{{ element.author }}] {{ element.title }}
</div>
<div style="position:absolute;right:0px;">
<span style="float: right ;margin-top: -20px;margin-right:5px;" @click="deleteEle(element)">
<i style="color:#ff4949" class="el-icon-delete" />
<div style="position: absolute;right: 0;">
<span style="float: right;margin-top: -20px;margin-right: 5px;" @click="deleteEle(element)">
<i style="color: #ff4949;" class="el-icon-delete" />
</span>
</div>
</div>
@ -108,17 +108,21 @@ export default {
.dndList {
background: #fff;
padding-bottom: 40px;
&:after {
content: "";
&::after {
content: '';
display: table;
clear: both;
}
.dndList-list {
float: left;
padding-bottom: 30px;
&:first-of-type {
margin-right: 2%;
}
.dragArea {
margin-top: 15px;
min-height: 50px;
@ -152,11 +156,11 @@ export default {
}
.list-complete-item.sortable-chosen {
background: #4AB7BD;
background: #4ab7bd;
}
.list-complete-item.sortable-ghost {
background: #30B08F;
background: #30b08f;
}
.list-complete-enter,

View File

@ -50,9 +50,9 @@ export default {
<style scoped>
.drag-select >>> .sortable-ghost {
opacity: .8;
color: #fff!important;
background: #42b983!important;
opacity: 0.8;
color: #fff !important;
background: #42b983 !important;
}
.drag-select >>> .el-tag {

View File

@ -207,91 +207,94 @@ export default {
<style scoped>
.dropzone {
border: 2px solid #E5E5E5;
font-family: 'Roboto', sans-serif;
color: #777;
transition: background-color .2s linear;
padding: 5px;
border: 2px solid #e5e5e5;
font-family: 'Roboto', sans-serif;
color: #777;
transition: background-color 0.2s linear;
padding: 5px;
}
.dropzone:hover {
background-color: #F6F6F6;
background-color: #f6f6f6;
}
i {
color: #CCC;
color: #ccc;
}
.dropzone .dz-image img {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.dropzone input[name='file'] {
display: none;
display: none;
}
.dropzone .dz-preview .dz-image {
border-radius: 0px;
border-radius: 0;
}
.dropzone .dz-preview:hover .dz-image img {
transform: none;
filter: none;
width: 100%;
height: 100%;
transform: none;
filter: none;
width: 100%;
height: 100%;
}
.dropzone .dz-preview .dz-details {
bottom: 0px;
top: 0px;
color: white;
background-color: rgba(33, 150, 243, 0.8);
transition: opacity .2s linear;
text-align: left;
bottom: 0;
top: 0;
color: white;
background-color: rgba(33, 150, 243, 0.8);
transition: opacity 0.2s linear;
text-align: left;
}
.dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
background-color: transparent;
.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
background-color: transparent;
}
.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
border: none;
border: none;
}
.dropzone .dz-preview .dz-details .dz-filename:hover span {
background-color: transparent;
border: none;
background-color: transparent;
border: none;
}
.dropzone .dz-preview .dz-remove {
position: absolute;
z-index: 30;
color: white;
margin-left: 15px;
padding: 10px;
top: inherit;
bottom: 15px;
border: 2px white solid;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 1.1px;
opacity: 0;
position: absolute;
z-index: 30;
color: white;
margin-left: 15px;
padding: 10px;
top: inherit;
bottom: 15px;
border: 2px white solid;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 1.1px;
opacity: 0;
}
.dropzone .dz-preview:hover .dz-remove {
opacity: 1;
opacity: 1;
}
.dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
margin-left: -40px;
margin-top: -50px;
.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
margin-left: -40px;
margin-top: -50px;
}
.dropzone .dz-preview .dz-success-mark i, .dropzone .dz-preview .dz-error-mark i {
color: white;
font-size: 5rem;
.dropzone .dz-preview .dz-success-mark i,
.dropzone .dz-preview .dz-error-mark i {
color: white;
font-size: 5rem;
}
</style>

View File

@ -4,7 +4,7 @@
width="80"
height="80"
viewBox="0 0 250 250"
style="fill:#40c9c6; color:#fff;"
style="fill: #40c9c6; color: #fff;"
aria-hidden="true"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
@ -25,30 +25,33 @@
<style scoped>
.github-corner:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
animation: octocat-wave 560ms ease-in-out;
}
@keyframes octocat-wave {
0%,
100% {
transform: rotate(0)
transform: rotate(0);
}
20%,
60% {
transform: rotate(-25deg)
transform: rotate(-25deg);
}
40%,
80% {
transform: rotate(10deg)
transform: rotate(10deg);
}
}
@media (max-width:500px) {
.github-corner:hover .octo-arm {
animation: none
animation: none;
}
.github-corner .octo-arm {
animation: octocat-wave 560ms ease-in-out
animation: octocat-wave 560ms ease-in-out;
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@ -55,18 +55,21 @@ export default {
</script>
<style scoped>
.json-editor{
.json-editor {
height: 100%;
position: relative;
}
.json-editor >>> .CodeMirror {
height: auto;
min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll{
.json-editor >>> .CodeMirror-scroll {
min-height: 300px;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
color: #F08047;
color: #f08047;
}
</style>

View File

@ -91,7 +91,7 @@ export default {
line-height: 54px;
padding: 5px 10px;
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);
}
}
}

View File

@ -208,14 +208,14 @@ export default {
// Utils
$spacer: 12px;
$transition: 0.2s ease all;
$index: 0px;
$index: 0;
$index-has-icon: 30px;
// Theme:
$color-white: white;
$color-grey: #9E9E9E;
$color-grey-light: #E0E0E0;
$color-blue: #2196F3;
$color-red: #F44336;
$color-grey: #9e9e9e;
$color-grey-light: #e0e0e0;
$color-blue: #2196f3;
$color-red: #f44336;
$color-black: black;
// Base clases:
%base-bar-pseudo {
@ -239,9 +239,11 @@ export default {
.material-input__component {
margin-top: 36px;
position: relative;
* {
box-sizing: border-box;
}
.iconClass {
.material-input__icon {
position: absolute;
@ -255,13 +257,16 @@ export default {
font-weight: $font-weight-normal;
pointer-events: none;
}
.material-label {
left: $index-has-icon;
}
.material-input {
text-indent: $index-has-icon;
}
}
.material-input {
font-size: $font-size-base;
padding: $spacer $spacer $spacer - $apixel * 10 $spacer / 2;
@ -270,12 +275,14 @@ export default {
border: none;
line-height: 1;
border-radius: 0;
&:focus {
outline: none;
border: none;
border-bottom: 1px solid transparent; // fixes the height issue
}
}
.material-label {
font-weight: $font-weight-normal;
position: absolute;
@ -285,15 +292,18 @@ export default {
transition: $transition;
font-size: $font-size-small;
}
.material-input-bar {
position: relative;
display: block;
width: 100%;
&:before {
&::before {
@extend %base-bar-pseudo;
left: 50%;
}
&:after {
&::after {
@extend %base-bar-pseudo;
right: 50%;
}
@ -313,8 +323,8 @@ export default {
// Active state:
&.material--active {
.material-input-bar {
&:before,
&:after {
&::before,
&::after {
width: 50%;
}
}
@ -323,18 +333,21 @@ export default {
.material-input__component {
background: $color-white;
.material-input {
background: none;
color: $color-black;
text-indent: $index;
border-bottom: 1px solid $color-grey-light;
}
.material-label {
color: $color-grey;
}
.material-input-bar {
&:before,
&:after {
&::before,
&::after {
background: $color-blue;
}
}
@ -349,9 +362,10 @@ export default {
&.material--active .material-label {
color: $color-red;
}
.material-input-bar {
&:before,
&:after {
&::before,
&::after {
background: transparent;
}
}

View File

@ -95,6 +95,7 @@ export default {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}

View File

@ -91,7 +91,7 @@ export default {
letter-spacing: 2px;
font-size: 18px;
margin: 0 60px;
padding: 22px 0 0 0;
padding: 22px 0 0;
height: 85px;
font-family: 'Open Sans', Arial, sans-serif;
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 {
opacity: 1;
transform: translateX(0px) rotate(0deg);
transform: translateX(0) rotate(0deg);
}
</style>

View File

@ -90,8 +90,8 @@ export default {
top: 0;
left: 0;
opacity: 0;
transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
background: rgba(0, 0, 0, .2);
transition: opacity 0.3s cubic-bezier(0.7, 0.3, 0.1, 1);
background: rgba(0, 0, 0, 0.2);
z-index: -1;
}
@ -102,15 +102,15 @@ export default {
position: fixed;
top: 0;
right: 0;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
transition: all .25s cubic-bezier(.7, .3, .1, 1);
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
transform: translate(100%);
background: #fff;
z-index: 40000;
}
.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 {
z-index: 20000;
@ -137,6 +137,7 @@ export default {
cursor: pointer;
color: #fff;
line-height: 48px;
i {
font-size: 24px;
line-height: 48px;

View File

@ -52,7 +52,7 @@ export default {
.screenfull-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
fill: #5a5e66;
width: 20px;
height: 20px;
vertical-align: 10px;

View File

@ -39,12 +39,14 @@ export default {
<style lang="scss" >
$n: 9; //items.length
$t: .1s;
$t: 0.1s;
.share-dropdown-menu {
width: 250px;
position: relative;
z-index: 1;
height: auto!important;
height: auto !important;
&-title {
width: 100%;
display: block;
@ -56,11 +58,13 @@ $t: .1s;
font-size: 20px;
text-align: center;
z-index: 2;
transform: translate3d(0,0,0);
transform: translate3d(0, 0, 0);
}
&-wrapper {
position: relative;
}
&-item {
text-align: center;
position: absolute;
@ -74,6 +78,7 @@ $t: .1s;
overflow: hidden;
opacity: 1;
transition: transform 0.28s ease;
&:hover {
background: black;
color: white;
@ -86,10 +91,12 @@ $t: .1s;
}
}
}
&.active {
.share-dropdown-menu-wrapper {
z-index: 1;
}
.share-dropdown-menu-item {
@for $i from 1 through $n {
&:nth-of-type(#{$i}) {

View File

@ -56,7 +56,7 @@ export default {
.svg-external-icon {
background-color: currentColor;
mask-size: cover!important;
mask-size: cover !important;
display: inline-block;
}
</style>

View File

@ -48,7 +48,7 @@ export default {
content: '';
width: 100%;
height: 6px;
margin: -3px 0 0 0;
margin: -3px 0 0;
background: #3888fa;
position: absolute;
left: 0;

View File

@ -104,6 +104,7 @@ export default {
<style lang="scss" scoped>
.editor-slide-upload {
margin-bottom: 20px;
/deep/ .el-upload--picture-card {
width: 100%;
}

View File

@ -218,23 +218,28 @@ export default {
position: relative;
line-height: normal;
}
.tinymce-container>>>.mce-fullscreen {
z-index: 10000;
}
.tinymce-textarea {
visibility: hidden;
z-index: -1;
}
.editor-custom-btn-container {
position: absolute;
right: 4px;
top: 4px;
/*z-index: 2005;*/
}
.fullscreen .editor-custom-btn-container {
z-index: 10000;
position: fixed;
}
.editor-upload-btn {
display: inline-block;
}

View File

@ -78,57 +78,65 @@ export default {
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import '~@/styles/mixin.scss';
.upload-container {
width: 100%;
@include clearfix;
width: 100%;
position: relative;
.image-uploader {
width: 60%;
float: left;
}
.image-preview {
width: 200px;
height: 200px;
position: relative;
@include clearfix;
.image-uploader {
width: 60%;
float: left;
border: 1px dashed #d9d9d9;
float: left;
margin-left: 50px;
.image-preview-wrapper {
position: relative;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.image-preview {
width: 200px;
height: 200px;
position: relative;
border: 1px dashed #d9d9d9;
float: left;
margin-left: 50px;
.image-preview-wrapper {
position: relative;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.image-preview-action {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: default;
text-align: center;
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s;
cursor: pointer;
text-align: center;
line-height: 200px;
.el-icon-delete {
font-size: 36px;
}
}
&:hover {
.image-preview-action {
opacity: 1;
}
}
.image-preview-action {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
cursor: default;
text-align: center;
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s;
cursor: pointer;
text-align: center;
line-height: 200px;
.el-icon-delete {
font-size: 36px;
}
}
&:hover {
.image-preview-action {
opacity: 1;
}
}
}
}
</style>

View File

@ -81,25 +81,30 @@ export default {
width: 100%;
height: 100%;
position: relative;
.image-uploader {
height: 100%;
}
.image-preview {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
left: 0;
top: 0;
border: 1px dashed #d9d9d9;
.image-preview-wrapper {
position: relative;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.image-preview-action {
position: absolute;
width: 100%;
@ -111,15 +116,17 @@ export default {
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s;
cursor: pointer;
text-align: center;
line-height: 200px;
.el-icon-delete {
font-size: 36px;
}
}
&:hover {
.image-preview-action {
opacity: 1;

View File

@ -86,15 +86,18 @@ export default {
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import '~@/styles/mixin.scss';
.upload-container {
@include clearfix;
width: 100%;
position: relative;
@include clearfix;
.image-uploader {
width: 35%;
float: left;
}
.image-preview {
width: 200px;
height: 200px;
@ -102,15 +105,18 @@ export default {
border: 1px dashed #d9d9d9;
float: left;
margin-left: 50px;
.image-preview-wrapper {
position: relative;
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
}
.image-preview-action {
position: absolute;
width: 100%;
@ -122,21 +128,24 @@ export default {
color: #fff;
opacity: 0;
font-size: 20px;
background-color: rgba(0, 0, 0, .5);
transition: opacity .3s;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s;
cursor: pointer;
text-align: center;
line-height: 200px;
.el-icon-delete {
font-size: 36px;
}
}
&:hover {
.image-preview-action {
opacity: 1;
}
}
}
.image-app-preview {
width: 320px;
height: 180px;
@ -144,6 +153,7 @@ export default {
border: 1px dashed #d9d9d9;
float: left;
margin-left: 50px;
.app-fake-conver {
height: 44px;
position: absolute;

View File

@ -3,7 +3,7 @@
<input ref="excel-upload-input" class="excel-upload-input" type="file" accept=".xlsx, .xls" @change="handleClick">
<div class="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
Drop excel file here or
<el-button :loading="loading" style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">
<el-button :loading="loading" style="margin-left: 16px;" size="mini" type="primary" @click="handleUpload">
Browse
</el-button>
</div>
@ -119,11 +119,12 @@ export default {
</script>
<style scoped>
.excel-upload-input{
.excel-upload-input {
display: none;
z-index: -9999;
}
.drop{
.drop {
border: 2px dashed #bbb;
width: 600px;
height: 160px;

View File

@ -1,26 +1,26 @@
.waves-ripple {
position: absolute;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.15);
background-clip: padding-box;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 1;
position: absolute;
border-radius: 100%;
background-color: rgba(0, 0, 0, 0.15);
background-clip: padding-box;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
opacity: 1;
}
.waves-ripple.z-active {
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
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;
opacity: 0;
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
-webkit-transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
transition: opacity 1.2s ease-out, -webkit-transform 0.6s ease-out;
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;
}

View File

@ -37,7 +37,7 @@
<el-dropdown-item>Docs</el-dropdown-item>
</a>
<el-dropdown-item divided @click.native="logout">
<span style="display:block;">Log Out</span>
<span style="display: block;">Log Out</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -88,18 +88,18 @@ export default {
overflow: hidden;
position: relative;
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 {
line-height: 46px;
height: 100%;
float: left;
cursor: pointer;
transition: background .3s;
-webkit-tap-highlight-color:transparent;
transition: background 0.3s;
-webkit-tap-highlight-color: transparent;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
@ -131,10 +131,10 @@ export default {
&.hover-effect {
cursor: pointer;
transition: background .3s;
transition: background 0.3s;
&:hover {
background: rgba(0, 0, 0, .025)
background: rgba(0, 0, 0, 0.025);
}
}
}

View File

@ -90,19 +90,19 @@ export default {
.drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, .85);
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
line-height: 22px;
}
.drawer-item {
color: rgba(0, 0, 0, .65);
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
padding: 12px 0;
}
.drawer-switch {
float: right
float: right;
}
}
</style>

View File

@ -75,7 +75,7 @@ export default {
&.collapse {
.sidebar-logo {
margin-right: 0px;
margin-right: 0;
}
}
}

View File

@ -82,10 +82,12 @@ export default {
position: relative;
overflow: hidden;
width: 100%;
/deep/ {
.el-scrollbar__bar {
bottom: 0px;
bottom: 0;
}
.el-scrollbar__wrap {
height: 49px;
}

View File

@ -203,7 +203,8 @@ export default {
width: 100%;
background: #fff;
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-item {
display: inline-block;
@ -218,16 +219,20 @@ export default {
font-size: 12px;
margin-left: 5px;
margin-top: 4px;
&:first-of-type {
margin-left: 15px;
}
&:last-of-type {
margin-right: 15px;
}
&.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
&::before {
content: '';
background: #fff;
@ -241,6 +246,7 @@ export default {
}
}
}
.contextmenu {
margin: 0;
background: #fff;
@ -252,11 +258,13 @@ export default {
font-size: 12px;
font-weight: 400;
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 {
margin: 0;
padding: 7px 16px;
cursor: pointer;
&:hover {
background: #eee;
}
@ -275,13 +283,15 @@ export default {
vertical-align: 2px;
border-radius: 50%;
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%;
&:before {
transform: scale(.6);
&::before {
transform: scale(0.6);
display: inline-block;
vertical-align: -3px;
}
&:hover {
background-color: #b4bccc;
color: #fff;

View File

@ -58,8 +58,8 @@ export default {
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
@import '~@/styles/mixin.scss';
@import '~@/styles/variables.scss';
.app-wrapper {
@include clearfix;
@ -93,7 +93,7 @@ export default {
}
.hideSidebar .fixed-header {
width: calc(100% - 54px)
width: calc(100% - 54px);
}
.mobile .fixed-header {

View File

@ -6,40 +6,33 @@
&:hover {
color: $color;
&:before,
&:after {
&::before,
&::after {
background: $color;
}
}
}
.blue-btn {
@include colorBtn($blue)
}
@include colorBtn($blue); }
.light-blue-btn {
@include colorBtn($light-blue)
}
@include colorBtn($light-blue); }
.red-btn {
@include colorBtn($red)
}
@include colorBtn($red); }
.pink-btn {
@include colorBtn($pink)
}
@include colorBtn($pink); }
.green-btn {
@include colorBtn($green)
}
@include colorBtn($green); }
.tiffany-btn {
@include colorBtn($tiffany)
}
@include colorBtn($tiffany); }
.yellow-btn {
@include colorBtn($yellow)
}
@include colorBtn($yellow); }
.pan-btn {
font-size: 14px;
@ -55,15 +48,15 @@
&:hover {
background: #fff;
&:before,
&:after {
&::before,
&::after {
width: 100%;
transition: 600ms ease all;
}
}
&:before,
&:after {
&::before,
&::after {
content: '';
position: absolute;
top: 0;

View File

@ -6,7 +6,7 @@
}
.el-upload {
input[type="file"] {
input[type='file'] {
display: none !important;
}
}
@ -17,7 +17,7 @@
.cell {
.el-tag {
margin-right: 0px;
margin-right: 0;
}
}
@ -41,7 +41,7 @@
text-align: center;
.el-tag {
margin-right: 0px;
margin-right: 0;
}
}
}
@ -69,7 +69,7 @@
// dropdown
.el-dropdown-menu {
a {
display: block
display: block;
}
}

View File

@ -20,9 +20,9 @@ $--border-color-lighter: #e6ebf5;
$--table-border: 1px solid #dfe6ec;
/* 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
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass

View File

@ -27,13 +27,13 @@ html {
}
*,
*:before,
*:after {
*::before,
*::after {
box-sizing: inherit;
}
.no-padding {
padding: 0px !important;
padding: 0 !important;
}
.padding-content {
@ -86,11 +86,11 @@ div:focus {
}
.clearfix {
&:after {
&::after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
content: ' ';
clear: both;
height: 0;
}
@ -104,7 +104,7 @@ aside {
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;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@ -134,7 +134,7 @@ aside {
}
.text-center {
text-align: center
text-align: center;
}
.sub-navbar {

View File

@ -1,6 +1,6 @@
@mixin clearfix {
&:after {
content: "";
&::after {
content: '';
display: table;
clear: both;
}

View File

@ -1,8 +1,7 @@
#app {
.main-container {
min-height: 100%;
transition: margin-left .28s;
transition: margin-left 0.28s;
margin-left: $sideBarWidth;
position: relative;
}
@ -13,7 +12,7 @@
background-color: $menuBg;
height: 100%;
position: fixed;
font-size: 0px;
font-size: 0;
top: 0;
bottom: 0;
left: 0;
@ -30,7 +29,7 @@
}
.el-scrollbar__bar.is-vertical {
right: 0px;
right: 0;
}
.el-scrollbar {
@ -146,11 +145,11 @@
// mobile responsive
.mobile {
.main-container {
margin-left: 0px;
margin-left: 0;
}
.sidebar-container {
transition: transform .28s;
transition: transform 0.28s;
width: $sideBarWidth !important;
}
@ -164,7 +163,6 @@
}
.withoutAnimation {
.main-container,
.sidebar-container {
transition: none;

View File

@ -14,7 +14,7 @@
/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all .5s;
transition: all 0.5s;
}
.fade-transform-enter {
@ -30,7 +30,7 @@
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
transition: all 0.5s;
}
.breadcrumb-enter,
@ -40,7 +40,7 @@
}
.breadcrumb-move {
transition: all .5s;
transition: all 0.5s;
}
.breadcrumb-leave-active {

View File

@ -1,23 +1,23 @@
// base color
$blue:#324157;
$light-blue:#3A71A8;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
$tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
$blue: #324157;
$light-blue: #3a71a8;
$red: #c03639;
$pink: #e65d6e;
$green: #30b08f;
$tiffany: #4ab7bd;
$yellow: #fec171;
$panGreen: #30b08f;
// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuText: #bfcbd9;
$menuActiveText: #409eff;
$subMenuActiveText: #f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$menuBg: #304156;
$menuHover: #263445;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$sideBarWidth: 210px;

View File

@ -14,7 +14,7 @@ export default {
</script>
<style scoped>
.chart-container{
.chart-container {
position: relative;
width: 100%;
height: calc(100vh - 84px);

View File

@ -14,7 +14,7 @@ export default {
</script>
<style scoped>
.chart-container{
.chart-container {
position: relative;
width: 100%;
height: calc(100vh - 84px);

View File

@ -14,7 +14,7 @@ export default {
</script>
<style scoped>
.chart-container{
.chart-container {
position: relative;
width: 100%;
height: calc(100vh - 84px);

View File

@ -2,13 +2,13 @@
<div class="app-container">
<el-tabs v-model="activeName">
<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="width: 400px;max-width: 100%;" />
<el-button type="primary" icon="el-icon-document" @click="handleCopy(inputData,$event)">
copy
</el-button>
</el-tab-pane>
<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="width: 400px;max-width: 100%;" />
<el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
copy
</el-button>

View File

@ -52,7 +52,7 @@ export default {
</script>
<style scoped>
.avatar{
.avatar {
width: 200px;
height: 200px;
border-radius: 50%;

View File

@ -142,22 +142,23 @@ export default {
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
transition: all .3s cubic-bezier(.645, .045, .355, 1);
-webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
position: relative;
color: rgba(0, 0, 0, .65);
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
border-color: #d9d9d9;
}
.example-btn:hover {
color: #4AB7BD;
color: #4ab7bd;
background-color: #fff;
border-color: #4AB7BD;
border-color: #4ab7bd;
}
.example {
font-size: 50px;
color: #F6416C;
color: #f6416c;
display: block;
margin: 10px 0;
text-align: center;
@ -181,38 +182,38 @@ input {
cursor: text;
font-size: 12px;
line-height: 1.5;
color: rgba(0, 0, 0, .65);
color: rgba(0, 0, 0, 0.65);
background-color: #fff;
background-image: none;
border: 1px solid #d9d9d9;
border-radius: 4px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.startBtn {
margin-left: 20px;
font-size: 20px;
color: #30B08F;
color: #30b08f;
background-color: #fff;
}
.startBtn:hover {
background-color: #30B08F;
background-color: #30b08f;
color: #fff;
border-color: #30B08F;
border-color: #30b08f;
}
.pause-resume-btn {
font-size: 20px;
color: #E65D6E;
color: #e65d6e;
background-color: #fff;
}
.pause-resume-btn:hover {
background-color: #E65D6E;
background-color: #e65d6e;
color: #fff;
border-color: #E65D6E;
border-color: #e65d6e;
}
</style>

View File

@ -45,17 +45,20 @@ export default {
flex-direction: row;
align-items: flex-start;
}
.kanban {
&.todo {
.board-column-header {
background: #4A9FF9;
background: #4a9ff9;
}
}
&.working {
.board-column-header {
background: #f9944a;
}
}
&.done {
.board-column-header {
background: #2ac06d;

View File

@ -1,11 +1,11 @@
<template>
<div class="components-container">
<el-drag-select v-model="value" style="width:500px;" multiple placeholder="请选择">
<el-drag-select v-model="value" style="width: 500px;" multiple placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-drag-select>
<div style="margin-top:30px;">
<el-tag v-for="item of value" :key="item" style="margin-right:15px;">
<div style="margin-top: 30px;">
<el-tag v-for="item of value" :key="item" style="margin-right: 15px;">
{{ item }}
</el-tag>
</div>

View File

@ -28,7 +28,7 @@ export default {
</script>
<style scoped>
.editor-container{
.editor-container {
position: relative;
height: 100%;
}

View File

@ -42,7 +42,7 @@
<markdown-editor ref="markdownEditor" v-model="content4" :language="language" height="300px" />
</div>
<el-button style="margin-top:80px;" type="primary" icon="el-icon-document" @click="getHtml">
<el-button style="margin-top: 80px;" type="primary" icon="el-icon-document" @click="getHtml">
Get HTML
</el-button>
<div v-html="html" />
@ -92,10 +92,11 @@ export default {
</script>
<style scoped>
.editor-container{
.editor-container {
margin-bottom: 30px;
}
.tag-title{
.tag-title {
margin-bottom: 5px;
}
</style>

View File

@ -5,7 +5,7 @@
<div slot="header" class="clearfix">
<span>Buttons</span>
</div>
<div style="margin-bottom:50px;">
<div style="margin-bottom: 50px;">
<el-col :span="4" class="text-center">
<router-link class="pan-btn blue-btn" to="/documentation/index">
Documentation
@ -40,13 +40,13 @@
</el-card>
</el-row>
<el-row :gutter="20" style="margin-top:50px;">
<el-row :gutter="20" style="margin-top: 50px;">
<el-col :span="6">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Material Design 的input</span>
</div>
<div style="height:100px;">
<div style="height: 100px;">
<el-form :model="demo" :rules="demoRules">
<el-form-item prop="title">
<md-input v-model="demo.title" icon="el-icon-search" name="title" placeholder="输入标题">
@ -96,14 +96,14 @@
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top:50px;">
<el-row :gutter="20" style="margin-top: 50px;">
<el-col :span="8">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>Share</span>
</div>
<div class="component-item" style="height:420px;">
<dropdown-menu :items="articleList" style="margin:0 auto;" title="系列文章" />
<div class="component-item" style="height: 420px;">
<dropdown-menu :items="articleList" style="margin: 0 auto;" title="系列文章" />
</div>
</el-card>
</el-col>
@ -163,7 +163,8 @@ export default {
padding: 30px;
min-height: calc(100vh - 84px);
}
.component-item{
.component-item {
min-height: 100px;
}
</style>

View File

@ -44,24 +44,24 @@ export default {
}
.left-container {
background-color: #F38181;
background-color: #f38181;
height: 100%;
}
.right-container {
background-color: #FCE38A;
background-color: #fce38a;
height: 200px;
}
.top-container {
background-color: #FCE38A;
background-color: #fce38a;
width: 100%;
height: 100%;
}
.bottom-container {
width: 100%;
background-color: #95E1D3;
background-color: #95e1d3;
height: 100%;
}
</style>

View File

@ -18,7 +18,7 @@
<el-button plain>
Link<i class="el-icon-caret-bottom el-icon--right" />
</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">
<template slot="prepend">
Url

View File

@ -29,7 +29,7 @@ export default {
</script>
<style scoped>
.editor-content{
.editor-content {
margin-top: 20px;
}
</style>

View File

@ -1,12 +1,12 @@
<template>
<el-card class="box-card-component" style="margin-left:8px;">
<el-card class="box-card-component" style="margin-left: 8px;">
<div slot="header" class="box-card-header">
<img src="https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png">
</div>
<div style="position:relative;">
<div style="position: relative;">
<pan-thumb :image="avatar" class="panThumb" />
<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>
<el-progress :percentage="70" />
</div>
@ -62,9 +62,9 @@ export default {
</script>
<style lang="scss" >
.box-card-component{
.box-card-component {
.el-card__header {
padding: 0px!important;
padding: 0 !important;
}
}
</style>
@ -73,44 +73,50 @@ export default {
.box-card-header {
position: relative;
height: 220px;
img {
width: 100%;
height: 100%;
transition: all 0.2s linear;
&:hover {
transform: scale(1.1, 1.1);
filter: contrast(130%);
}
}
}
.mallki-text {
position: absolute;
top: 0px;
right: 0px;
top: 0;
right: 0;
font-size: 20px;
font-weight: bold;
}
.panThumb {
z-index: 100;
height: 70px!important;
width: 70px!important;
position: absolute!important;
height: 70px !important;
width: 70px !important;
position: absolute !important;
top: -45px;
left: 0px;
border: 5px solid #ffffff;
left: 0;
border: 5px solid #fff;
background-color: #fff;
margin: auto;
box-shadow: none!important;
box-shadow: none !important;
/deep/ .pan-info {
box-shadow: none!important;
box-shadow: none !important;
}
}
.progress-item {
margin-bottom: 10px;
font-size: 14px;
}
@media only screen and (max-width: 1510px){
.mallki-text{
@media only screen and (max-width: 1510px) {
.mallki-text {
display: none;
}
}

View File

@ -86,8 +86,8 @@ export default {
overflow: hidden;
color: #666;
background: #fff;
box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
border-color: rgba(0, 0, 0, .05);
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
border-color: rgba(0, 0, 0, 0.05);
&:hover {
.card-panel-icon-wrapper {
@ -107,7 +107,7 @@ export default {
}
.icon-shopping {
background: #34bfa3
background: #34bfa3;
}
}
@ -124,7 +124,7 @@ export default {
}
.icon-shopping {
color: #34bfa3
color: #34bfa3;
}
.card-panel-icon-wrapper {
@ -144,7 +144,7 @@ export default {
float: right;
font-weight: bold;
margin: 26px;
margin-left: 0px;
margin-left: 0;
.card-panel-text {
line-height: 18px;

View File

@ -4,13 +4,14 @@
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto ;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
background: #fff;
z-index: 1;
position: relative;
button {
margin: 0;
padding: 0;
@ -26,33 +27,40 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
:focus {
outline: 0;
}
.hidden {
display: none;
}
.todoapp {
background: #fff;
margin: 130px 0 40px 0;
margin: 130px 0 40px;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp h1 {
position: absolute;
top: -155px;
@ -65,6 +73,7 @@
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
.new-todo,
.edit {
position: relative;
@ -83,17 +92,20 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.new-todo {
padding: 10px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}
.main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
.toggle-all {
text-align: center;
border: none;
@ -101,6 +113,7 @@
opacity: 0;
position: absolute;
}
.toggle-all+label {
width: 60px;
height: 34px;
@ -111,41 +124,50 @@
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.toggle-all+label:before {
.toggle-all+label::before {
content: '';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
padding: 10px 27px;
}
.toggle-all:checked+label:before {
.toggle-all:checked+label::before {
color: #737373;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list li.editing {
border-bottom: none;
padding: 0;
}
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 12px 16px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li .toggle {
text-align: center;
width: 40px;
@ -160,9 +182,11 @@
-webkit-appearance: none;
appearance: none;
}
.todo-list li .toggle {
opacity: 0;
}
.todo-list li .toggle+label {
/*
Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
@ -173,22 +197,26 @@
background-position: center left;
background-size: 36px;
}
.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');
}
.todo-list li label {
word-break: break-all;
padding: 15px 15px 15px 50px;
display: block;
line-height: 1.0;
font-size: 14px;
line-height: 1;
font-size: 14px;
transition: color 0.4s;
}
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
.todo-list li .destroy {
display: none;
position: absolute;
@ -203,21 +231,27 @@
transition: color 0.2s ease-out;
cursor: pointer;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
.todo-list li .destroy::after {
content: '×';
}
.todo-list li:hover .destroy {
display: block;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing:last-child {
margin-bottom: -1px;
}
.footer {
color: #777;
position: relative;
@ -226,7 +260,8 @@
text-align: center;
border-top: 1px solid #e6e6e6;
}
.footer:before {
.footer::before {
content: '';
position: absolute;
right: 0;
@ -236,13 +271,16 @@
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 {
float: left;
text-align: left;
}
.todo-count strong {
font-weight: 300;
}
.filters {
margin: 0;
padding: 0;
@ -250,9 +288,11 @@
z-index: 1;
list-style: none;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
font-size: 12px;
@ -261,12 +301,15 @@
border: 1px solid transparent;
border-radius: 3px;
}
.filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {
float: right;
@ -275,9 +318,11 @@
text-decoration: none;
cursor: pointer;
}
.clear-completed:hover {
text-decoration: underline;
}
.info {
margin: 65px auto 0;
color: #bfbfbf;
@ -285,14 +330,17 @@
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
.info p {
line-height: 1;
}
.info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
.info a:hover {
text-decoration: underline;
}
@ -305,6 +353,7 @@
.todo-list li .toggle {
background: none;
}
.todo-list li .toggle {
height: 40px;
}
@ -313,6 +362,7 @@
.footer {
height: 50px;
}
.filters {
bottom: 10px;
}

View File

@ -4,7 +4,7 @@
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<el-row style="background: #fff;padding: 16px 16px 0;margin-bottom: 32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
@ -27,13 +27,13 @@
</el-row>
<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="padding-right: 8px;margin-bottom: 30px;">
<transaction-table />
</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;">
<todo-list />
</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;">
<box-card />
</el-col>
</el-row>
@ -104,7 +104,7 @@ export default {
.github-corner {
position: absolute;
top: 0px;
top: 0;
border: 0;
right: 0;
}

View File

@ -1,14 +1,14 @@
<template>
<div class="dashboard-editor-container">
<div class=" clearfix">
<pan-thumb :image="avatar" style="float: left">
<pan-thumb :image="avatar" style="float: left;">
Your roles:
<span v-for="item in roles" :key="item" class="pan-info-roles">{{ item }}</span>
</pan-thumb>
<github-corner style="position: absolute; top: 0px; border: 0; right: 0;" />
<github-corner style="position: absolute; top: 0; border: 0; right: 0;" />
<div class="info-container">
<span class="display_name">{{ name }}</span>
<span style="font-size:20px;padding-top:20px;display:inline-block;">Editor's Dashboard</span>
<span style="font-size: 20px;padding-top: 20px;display: inline-block;">Editor's Dashboard</span>
</div>
</div>
<div>
@ -50,18 +50,21 @@ export default {
.dashboard-editor-container {
background-color: #e3e3e3;
min-height: 100vh;
padding: 50px 60px 0px;
padding: 50px 60px 0;
.pan-info-roles {
font-size: 12px;
font-weight: 700;
color: #333;
display: block;
}
.info-container {
position: relative;
margin-left: 190px;
height: 150px;
line-height: 200px;
.display_name {
font-size: 48px;
line-height: 48px;

View File

@ -63,33 +63,41 @@ export default {
width: 800px;
max-width: 100%;
margin: 100px auto;
.pan-back-btn {
background: #008489;
color: #fff;
border: none!important;
border: none !important;
}
.pan-gif {
margin: 0 auto;
display: block;
}
.pan-img {
display: block;
margin: 0 auto;
width: 100%;
}
.text-jumbo {
font-size: 60px;
font-weight: 700;
color: #484848;
}
.list-unstyled {
font-size: 14px;
li {
padding-bottom: 5px;
}
a {
color: #008489;
text-decoration: none;
&:hover {
text-decoration: underline;
}

View File

@ -10,7 +10,7 @@
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<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 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>
@ -33,27 +33,32 @@ export default {
</script>
<style lang="scss" scoped>
.wscn-http404-container{
transform: translate(-50%,-50%);
.wscn-http404-container {
transform: translate(-50%, -50%);
position: absolute;
top: 40%;
left: 50%;
}
.wscn-http404 {
position: relative;
width: 1200px;
padding: 0 50px;
overflow: hidden;
.pic-404 {
position: relative;
float: left;
width: 600px;
overflow: hidden;
&__parent {
width: 100%;
}
&__child {
position: absolute;
&.left {
width: 80px;
top: 17px;
@ -65,6 +70,7 @@ export default {
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
@ -76,6 +82,7 @@ export default {
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
@ -93,16 +100,19 @@ export default {
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
@ -115,16 +125,19 @@ export default {
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
@ -137,16 +150,19 @@ export default {
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
@ -155,12 +171,14 @@ export default {
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&__oops {
font-size: 32px;
font-weight: bold;
@ -172,6 +190,7 @@ export default {
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&__headline {
font-size: 20px;
line-height: 24px;
@ -184,6 +203,7 @@ export default {
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&__info {
font-size: 13px;
line-height: 21px;
@ -195,6 +215,7 @@ export default {
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&__return-home {
display: block;
float: left;
@ -203,7 +224,7 @@ export default {
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
color: #fff;
opacity: 0;
font-size: 14px;
line-height: 36px;
@ -218,6 +239,7 @@ export default {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;

View File

@ -49,7 +49,7 @@
:colors="['#99A9BF', '#F7BA2A', '#FF9900']"
:low-threshold="1"
:high-threshold="3"
style="display:inline-block"
style="display: inline-block;"
/>
</el-form-item>
</el-col>
@ -250,7 +250,7 @@ export default {
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import '~@/styles/mixin.scss';
.createPost-container {
position: relative;
@ -259,8 +259,8 @@ export default {
padding: 40px 45px 20px 50px;
.postInfo-container {
position: relative;
@include clearfix;
position: relative;
margin-bottom: 10px;
.postInfo-container-item {
@ -273,7 +273,7 @@ export default {
width: 40px;
position: absolute;
right: 10px;
top: 0px;
top: 0;
}
}
@ -282,7 +282,7 @@ export default {
padding-right: 40px;
resize: none;
border: none;
border-radius: 0px;
border-radius: 0;
border-bottom: 1px solid #bfcbd9;
}
}

View File

@ -4,8 +4,8 @@
Link
<i class="el-icon-caret-bottom el-icon--right" />
</el-button>
<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-dropdown-menu slot="dropdown" class="no-padding no-border" style="width: 400px;">
<el-form-item label-width="0px" style="margin-bottom: 0;" prop="source_uri">
<el-input v-model="source_uri" placeholder="Please enter the content">
<template slot="prepend">
URL

View File

@ -1,6 +1,6 @@
<template>
<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">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
@ -104,6 +104,7 @@ export default {
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;

View File

@ -1,5 +1,5 @@
<template>
<div style="display:inline-block;">
<div style="display: inline-block;">
<label class="radio-label">Cell Auto-Width: </label>
<el-radio-group v-model="autoWidth">
<el-radio :label="true" border>

View File

@ -1,7 +1,7 @@
<template>
<div style="display:inline-block;">
<div style="display: inline-block;">
<label class="radio-label">Book Type: </label>
<el-select v-model="bookType" style="width:120px;">
<el-select v-model="bookType" style="width: 120px;">
<el-option
v-for="item in options"
:key="item"

View File

@ -1,7 +1,7 @@
<template>
<div style="display:inline-block;">
<label class="radio-label" style="padding-left:0;">Filename: </label>
<el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;" prefix-icon="el-icon-document" />
<div style="display: inline-block;">
<label class="radio-label" style="padding-left: 0;">Filename: </label>
<el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width: 345px;" prefix-icon="el-icon-document" />
</div>
</template>

View File

@ -5,10 +5,10 @@
<FilenameOption v-model="filename" />
<AutoWidthOption v-model="autoWidth" />
<BookTypeOption v-model="bookType" />
<el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
<el-button :loading="downloadLoading" style="margin: 0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
Export Excel
</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;">
<el-tag type="info">Documentation</el-tag>
</a>
</div>

View File

@ -1,7 +1,7 @@
<template>
<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
ref="multipleTable"

View File

@ -1,10 +1,10 @@
<template>
<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-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">
<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">
Export Selected Items
</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;">
<el-tag type="info">Documentation</el-tag>
</a>
<el-table

View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<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="width: 100%;margin-top: 20px;">
<el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
</el-table>
</div>

View File

@ -40,15 +40,18 @@ export default {
<style lang="scss" scoped>
.social-signup-container {
margin: 20px 0;
.sign-btn {
display: inline-block;
cursor: pointer;
}
.icon {
color: #fff;
font-size: 24px;
margin-top: 8px;
}
.wx-svg-container,
.qq-svg-container {
display: inline-block;
@ -61,11 +64,13 @@ export default {
margin-bottom: 20px;
margin-right: 5px;
}
.wx-svg-container {
background-color: #24da70;
}
.qq-svg-container {
background-color: #6BA2D6;
background-color: #6ba2d6;
margin-left: 50px;
}
}

View File

@ -45,15 +45,15 @@
</el-form-item>
</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="width: 100%;margin-bottom: 30px;" @click.native.prevent="handleLogin">Login</el-button>
<div style="position:relative">
<div style="position: relative;">
<div class="tips">
<span>Username : admin</span>
<span>Password : any</span>
</div>
<div class="tips">
<span style="margin-right:18px;">Username : editor</span>
<span style="margin-right: 18px;">Username : editor</span>
<span>Password : any</span>
</div>
@ -204,8 +204,8 @@ export default {
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
$bg:#283443;
$light_gray:#fff;
$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
@ -223,16 +223,16 @@ $cursor: #fff;
input {
background: transparent;
border: 0px;
border: 0;
-webkit-appearance: none;
border-radius: 0px;
border-radius: 0;
padding: 12px 5px 12px 15px;
color: $light_gray;
height: 47px;
caret-color: $cursor;
&:-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;
}
}
@ -248,9 +248,9 @@ $cursor: #fff;
</style>
<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
min-height: 100%;
@ -293,7 +293,7 @@ $light_gray:#eee;
.title {
font-size: 26px;
color: $light_gray;
margin: 0px auto 40px auto;
margin: 0 auto 40px;
text-align: center;
font-weight: bold;
}

View File

@ -1,5 +1,5 @@
<template>
<div style="padding:30px;">
<div style="padding: 30px;">
<el-alert :closable="false" title="menu 1">
<router-view />
</el-alert>

View File

@ -1,5 +1,5 @@
<template>
<div style="padding:30px;">
<div style="padding: 30px;">
<el-alert :closable="false" title="menu 1-1" type="success">
<router-view />
</el-alert>

View File

@ -1,5 +1,5 @@
<template>
<div style="padding:30px;">
<div style="padding: 30px;">
<el-alert :closable="false" title="menu 1-2" type="success">
<router-view />
</el-alert>

View File

@ -1,5 +1,5 @@
<template functional>
<div style="padding:30px;">
<div style="padding: 30px;">
<el-alert :closable="false" title="menu 1-2-1" type="warning" />
</div>
</template>

View File

@ -1,5 +1,5 @@
<template functional>
<div style="padding:30px;">
<div style="padding: 30px;">
<el-alert :closable="false" title="menu 1-2-2" type="warning" />
</div>
</template>

View File

@ -1,5 +1,5 @@
<template functional>
<div style="padding:30px;">
<div style="padding: 30px;">
<el-alert :closable="false" title="menu 1-3" type="success" />
</div>
</template>

View File

@ -1,5 +1,5 @@
<template>
<div style="padding:30px;">
<div style="padding: 30px;">
<el-alert :closable="false" title="menu 2" />
</div>
</template>

View File

@ -44,13 +44,13 @@ export default {
<style lang="scss">
@mixin clearfix {
&:before {
&::before {
display: table;
content: '';
clear: both;
}
&:after {
&::after {
display: table;
content: '';
clear: both;
@ -87,14 +87,14 @@ export default {
}
.node-article-content {
margin: 20px 0 0;
@include clearfix;
margin: 20px 0 0;
font-size: 16px;
color: #333;
letter-spacing: 0.5px;
line-height: 28px;
margin-bottom: 30px;
font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman', Times, serif;
&> :last-child {
margin-bottom: 0;
@ -117,7 +117,7 @@ export default {
font-style: normal;
font-size: 21px;
line-height: 1.58;
letter-spacing: -.003em;
letter-spacing: -0.003em;
}
@ -129,12 +129,12 @@ export default {
--x-height-multiplier: 0.375;
--baseline-multiplier: 0.17;
letter-spacing: .01rem;
letter-spacing: 0.01rem;
font-weight: 400;
font-style: normal;
font-size: 21px;
line-height: 1.58;
letter-spacing: -.003em;
letter-spacing: -0.003em;
margin-left: 30px;
margin-bottom: 14px;
}
@ -142,14 +142,14 @@ export default {
a {
text-decoration: none;
background-repeat: repeat-x;
background-image: linear-gradient(to right, rgba(0, 0, 0, .84) 100%, rgba(0, 0, 0, 0) 0);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.84) 100%, rgba(0, 0, 0, 0) 0);
background-size: 1px 1px;
background-position: 0 calc(1em + 1px);
padding: 0 6px;
}
code {
background: rgba(0, 0, 0, .05);
background: rgba(0, 0, 0, 0.05);
padding: 3px 4px;
margin: 0 2px;
font-size: 16px;
@ -168,14 +168,14 @@ export default {
blockquote {
--x-height-multiplier: 0.375;
--baseline-multiplier: 0.17;
font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif;
letter-spacing: .01rem;
font-family: medium-content-serif-font, Georgia, Cambria, 'Times New Roman', Times, serif;
letter-spacing: 0.01rem;
font-weight: 400;
font-style: italic;
font-size: 21px;
line-height: 1.58;
letter-spacing: -.003em;
border-left: 3px solid rgba(0, 0, 0, .84);
letter-spacing: -0.003em;
border-left: 3px solid rgba(0, 0, 0, 0.84);
padding-left: 20px;
margin-left: -23px;
padding-bottom: 2px;
@ -190,7 +190,7 @@ export default {
h4 {
font-size: 34px;
line-height: 1.15;
letter-spacing: -.015em;
letter-spacing: -0.015em;
margin: 53px 0 0;
}

View File

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<aside style="margin-top:15px;">
<aside style="margin-top: 15px;">
Here we use window.print() to implement the feature of downloading PDF.
</aside>
<router-link target="_blank" to="/pdf/download">

View File

@ -1,6 +1,6 @@
<template>
<div>
<div style="margin-bottom:15px;">
<div style="margin-bottom: 15px;">
Your roles: {{ roles }}
</div>
Switch roles:

View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<switch-roles @change="handleRolesChange" />
<div :key="key" style="margin-top:30px;">
<div :key="key" style="margin-top: 30px;">
<div>
<span v-permission="['admin']" class="permission-alert">
Only
@ -34,13 +34,13 @@
</div>
</div>
<div :key="'checkPermission'+key" style="margin-top:60px;">
<div :key="'checkPermission'+key" style="margin-top: 60px;">
<aside>
In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
<br> e.g.
</aside>
<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">
Admin can see this
<el-tag class="permission-sourceCode" type="info">
@ -100,9 +100,11 @@ export default {
border-radius: 4px;
display: inline-block;
}
/deep/ .permission-sourceCode {
margin-left: 15px;
}
/deep/ .permission-tag {
background-color: #ecf5ff;
}

View File

@ -2,7 +2,7 @@
<div class="app-container">
<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="width: 100%;margin-top: 30px;" border>
<el-table-column align="center" label="Role Key" width="220">
<template slot-scope="scope">
{{ scope.row.key }}
@ -51,7 +51,7 @@
/>
</el-form-item>
</el-form>
<div style="text-align:right;">
<div style="text-align: right;">
<el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
<el-button type="primary" @click="confirmRole">Confirm</el-button>
</div>
@ -263,6 +263,7 @@ export default {
.roles-table {
margin-top: 30px;
}
.permission-tree {
margin-bottom: 30px;
}

View File

@ -103,7 +103,6 @@ export default {
<style lang="scss" scoped>
.user-activity {
.user-block {
.username,
.description {
display: block;
@ -111,12 +110,12 @@ export default {
padding: 2px 0;
}
.username{
.username {
font-size: 16px;
color: #000;
}
:after {
::after {
clear: both;
}
@ -164,7 +163,6 @@ export default {
}
.link-black {
&:hover,
&:focus {
color: #999;

View File

@ -1,5 +1,5 @@
<template>
<el-card style="margin-bottom:20px;">
<el-card style="margin-bottom: 20px;">
<div slot="header" class="clearfix">
<span>About me</span>
</div>

View File

@ -1,5 +1,5 @@
<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
v-loading="loading"
align="center"

View File

@ -1,8 +1,8 @@
<template>
<div class="tab-container">
<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-tabs v-model="activeName" style="margin-top:15px;" type="border-card">
<el-alert :closable="false" style="width: 200px;display: inline-block;vertical-align: middle;margin-left: 30px;" title="Tab with keep-alive" type="success" />
<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">
<keep-alive>
<tab-pane v-if="activeName==item.key" :type="item.key" @create="showCreatedTimes" />

View File

@ -2,13 +2,13 @@
<div class="app-container">
<div class="filter-container">
<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-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-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-select>
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
@ -20,7 +20,7 @@
<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
Export
</el-button>
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left: 15px;" @change="tableKey=tableKey+1">
reviewer
</el-checkbox>
</div>
@ -58,7 +58,7 @@
</el-table-column>
<el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
<template slot-scope="{row}">
<span style="color:red;">{{ row.reviewer }}</span>
<span style="color: red;">{{ row.reviewer }}</span>
</template>
</el-table-column>
<el-table-column label="Imp" width="80px">
@ -100,7 +100,7 @@
<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-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="width: 400px; margin-left: 50px;">
<el-form-item label="Type" prop="type">
<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" />
@ -118,7 +118,7 @@
</el-select>
</el-form-item>
<el-form-item label="Imp">
<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top: 8px;" />
</el-form-item>
<el-form-item label="Remark">
<el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
@ -135,7 +135,7 @@
</el-dialog>
<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="pv" label="Pv" />
</el-table>

View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<!-- 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">
<template slot-scope="{row}">
<span>{{ row.id }}</span>
@ -131,23 +131,25 @@ export default {
</script>
<style>
.sortable-ghost{
opacity: .8;
color: #fff!important;
background: #42b983!important;
.sortable-ghost {
opacity: 0.8;
color: #fff !important;
background: #42b983 !important;
}
</style>
<style scoped>
.icon-star{
margin-right:2px;
.icon-star {
margin-right: 2px;
}
.drag-handler{
.drag-handler {
width: 20px;
height: 20px;
cursor: pointer;
}
.show-d{
.show-d {
margin-top: 15px;
}
</style>

View File

@ -14,7 +14,7 @@
</el-checkbox-group>
</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 v-for="fruit in formThead" :key="fruit" :label="fruit">
<template slot-scope="scope">

View File

@ -14,7 +14,7 @@
</el-checkbox-group>
</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 v-for="fruit in formThead" :key="fruit" :label="fruit">
<template slot-scope="scope">

View File

@ -1,11 +1,11 @@
<template>
<div class="app-container">
<div style="margin:0 0 5px 20px">
<div style="margin: 0 0 5px 20px;">
Fixed header, sorted by header order,
</div>
<fixed-thead />
<div style="margin:30px 0 5px 20px">
<div style="margin: 30px 0 5px 20px;">
Not fixed header, sorted by click order
</div>
<unfixed-thead />

View File

@ -1,6 +1,6 @@
<template>
<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">
<template slot-scope="{row}">
<span>{{ row.id }}</span>
@ -141,6 +141,7 @@ export default {
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;

View File

@ -9,7 +9,7 @@
<div class="box-item">
<span class="field-label">Change Theme : </span>
<el-switch v-model="theme" />
<aside style="margin-top:15px;">
<aside style="margin-top: 15px;">
Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.
</aside>
</div>
@ -101,9 +101,10 @@ export default {
</script>
<style scoped>
.field-label{
.field-label {
vertical-align: middle;
}
.box-card {
width: 400px;
max-width: 100%;

View File

@ -1,7 +1,7 @@
<template>
<div class="app-container">
<el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" prefix-icon="el-icon-document" />
<el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="el-icon-document" @click="handleDownload">
<el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width: 300px;" prefix-icon="el-icon-document" />
<el-button :loading="downloadLoading" style="margin-bottom: 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
Export Zip
</el-button>
<el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>