zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/BackToTop/index.vue
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 {

18
src/components/DndList/index.vue
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,

6
src/components/DragSelect/index.vue
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 {

25
src/components/Dropzone/index.vue
View File

@ -207,19 +207,19 @@ export default {
<style scoped>
.dropzone {
border: 2px solid #E5E5E5;
border: 2px solid #e5e5e5;
font-family: 'Roboto', sans-serif;
color: #777;
transition: background-color .2s linear;
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 {
@ -232,7 +232,7 @@ export default {
}
.dropzone .dz-preview .dz-image {
border-radius: 0px;
border-radius: 0;
}
.dropzone .dz-preview:hover .dz-image img {
@ -243,15 +243,16 @@ export default {
}
.dropzone .dz-preview .dz-details {
bottom: 0px;
top: 0px;
bottom: 0;
top: 0;
color: white;
background-color: rgba(33, 150, 243, 0.8);
transition: opacity .2s linear;
transition: opacity 0.2s linear;
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;
}
@ -285,12 +286,14 @@ export default {
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-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;
font-size: 5rem;
}

17
src/components/GithubCorner/index.vue
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>

701
src/components/ImageCropper/index.vue
View File

File diff suppressed because it is too large Load Diff

9
src/components/JsonEditor/index.vue
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>

2
src/components/Kanban/index.vue
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);
}
}
}

40
src/components/MDinput/index.vue
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;
}
}

1
src/components/Pagination/index.vue
View File

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

4
src/components/PanThumb/index.vue
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>

11
src/components/RightPanel/index.vue
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;

2
src/components/Screenfull/index.vue
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;

13
src/components/Share/DropdownMenu.vue
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}) {

2
src/components/SvgIcon/index.vue
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>

2
src/components/TextHoverEffect/Mallki.vue
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;

1
src/components/Tinymce/components/EditorImage.vue
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%;
}

5
src/components/Tinymce/index.vue
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;
}

16
src/components/Upload/SingleImage.vue
View File

@ -78,15 +78,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: 60%;
float: left;
}
.image-preview {
width: 200px;
height: 200px;
@ -94,15 +97,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%;
@ -114,15 +120,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;

15
src/components/Upload/SingleImage2.vue
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;

18
src/components/Upload/SingleImage3.vue
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;

7
src/components/UploadExcel/index.vue
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;

14
src/layout/components/Navbar.vue
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);
}
}
}

6
src/layout/components/Settings/index.vue
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>

2
src/layout/components/Sidebar/Logo.vue
View File

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

4
src/layout/components/TagsView/ScrollPane.vue
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;
}

20
src/layout/components/TagsView/index.vue
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;

6
src/layout/index.vue
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 {

33
src/styles/btn.scss
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;

8
src/styles/element-ui.scss
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;
}
}

4
src/styles/element-variables.scss
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

14
src/styles/index.scss
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 {

4
src/styles/mixin.scss
View File

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

12
src/styles/sidebar.scss
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;

6
src/styles/transition.scss
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 {

30
src/styles/variables.scss
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;

2
src/views/charts/keyboard.vue
View File

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

2
src/views/charts/line.vue
View File

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

2
src/views/charts/mix-chart.vue
View File

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

4
src/views/clipboard/index.vue
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>

2
src/views/components-demo/avatar-upload.vue
View File

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

31
src/views/components-demo/count-to.vue
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>

5
src/views/components-demo/drag-kanban.vue
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;

6
src/views/components-demo/drag-select.vue
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>

2
src/views/components-demo/json-editor.vue
View File

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

7
src/views/components-demo/markdown.vue
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>

15
src/views/components-demo/mixin.vue
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>

8
src/views/components-demo/split-pane.vue
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>

2
src/views/components-demo/sticky.vue
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

2
src/views/components-demo/tinymce.vue
View File

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

38
src/views/dashboard/admin/components/BoxCard.vue
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;
}
}

10
src/views/dashboard/admin/components/PanelGroup.vue
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;

66
src/views/dashboard/admin/components/TodoList/index.scss
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;
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;
}

10
src/views/dashboard/admin/index.vue
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;
}

11
src/views/dashboard/editor/index.vue
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;

10
src/views/error-page/401.vue
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;
}

30
src/views/error-page/404.vue
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;

10
src/views/example/components/ArticleDetail.vue
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;
}
}

4
src/views/example/components/Dropdown/SourceUrl.vue
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

3
src/views/example/list.vue
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;

2
src/views/excel/components/AutoWidthOption.vue
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>

4
src/views/excel/components/BookTypeOption.vue
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"

6
src/views/excel/components/FilenameOption.vue
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>

4
src/views/excel/export-excel.vue
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>

2
src/views/excel/merge-header.vue
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"

6
src/views/excel/select-excel.vue
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

2
src/views/excel/upload-excel.vue
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>

7
src/views/login/components/SocialSignin.vue
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;
}
}

24
src/views/login/index.vue
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;
}

2
src/views/nested/menu1/index.vue
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>

2
src/views/nested/menu1/menu1-1/index.vue
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>

2
src/views/nested/menu1/menu1-2/index.vue
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>

2
src/views/nested/menu1/menu1-2/menu1-2-1/index.vue
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>

2
src/views/nested/menu1/menu1-2/menu1-2-2/index.vue
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>

2
src/views/nested/menu1/menu1-3/index.vue
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>

2
src/views/nested/menu2/index.vue
View File

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

28
src/views/pdf/download.vue
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;
}

2
src/views/pdf/index.vue
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">

2
src/views/permission/components/SwitchRoles.vue
View File

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

8
src/views/permission/directive.vue
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;
}

5
src/views/permission/role.vue
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;
}

6
src/views/profile/components/Activity.vue
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;

2
src/views/profile/components/UserCard.vue
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>

2
src/views/tab/components/TabPane.vue
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"

4
src/views/tab/index.vue
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" />

16
src/views/table/complex-table.vue
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>

20
src/views/table/drag-table.vue
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>

2
src/views/table/dynamic-table/components/FixedThead.vue
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">

2
src/views/table/dynamic-table/components/UnfixedThead.vue
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">

4
src/views/table/dynamic-table/index.vue
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 />

3
src/views/table/inline-edit-table.vue
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;

5
src/views/theme/index.vue
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%;

4
src/views/zip/index.vue
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>