优化组件样式
This commit is contained in:
kuaifan
parent
af3d8d6d8c
commit
b3d84f875b
@ -13,6 +13,7 @@
|
||||
"axios": "^0.21",
|
||||
"cross-env": "^7.0.2",
|
||||
"css-loader": "^0.28.7",
|
||||
"file-loader": "^2.0.0",
|
||||
"jquery": "^3.5.1",
|
||||
"laravel-mix": "^6.0.6",
|
||||
"lodash": "^4.17.19",
|
||||
|
||||
@ -75,18 +75,22 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:global {
|
||||
.img-upload-modal {
|
||||
.ivu-modal-mask {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.ivu-modal-no-mask {
|
||||
background-color: rgba(55,55,55,.2);
|
||||
background-color: rgba(55, 55, 55, .2);
|
||||
}
|
||||
|
||||
.ivu-modal-wrap {
|
||||
z-index: 1001;
|
||||
}
|
||||
}
|
||||
.imgcomp-upload-list{
|
||||
|
||||
.imgcomp-upload-list {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@ -97,9 +101,10 @@
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0,0,0,.2);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
margin-right: 4px;
|
||||
vertical-align: top;
|
||||
|
||||
.imgcomp-upload-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -109,16 +114,18 @@
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
.imgcomp-upload-list-cover{
|
||||
|
||||
.imgcomp-upload-list-cover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0,0,0,.6);
|
||||
background: rgba(0, 0, 0, .6);
|
||||
}
|
||||
.imgcomp-upload-list-cover i{
|
||||
|
||||
.imgcomp-upload-list-cover i {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
@ -126,29 +133,36 @@
|
||||
margin: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
.imgcomp-upload-list-cover i:hover{
|
||||
|
||||
.imgcomp-upload-list-cover i:hover {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.ivu-progress-outer {
|
||||
background-color: rgba(0, 0, 0, 0.68);
|
||||
.ivu-progress-inner{
|
||||
|
||||
.ivu-progress-inner {
|
||||
width: 88%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.imgcomp-upload-list:hover .imgcomp-upload-list-cover{
|
||||
|
||||
.imgcomp-upload-list:hover .imgcomp-upload-list-cover {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.img-upload-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.img-upload-foot-input {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.img-upload-foot-httptitle {
|
||||
cursor: pointer;
|
||||
padding-left: 3px;
|
||||
@ -156,6 +170,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
@ -168,12 +183,14 @@
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
|
||||
.add-box-icon {
|
||||
i {
|
||||
vertical-align:middle;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-box-upload {
|
||||
display: none;
|
||||
position: absolute;
|
||||
@ -184,36 +201,44 @@
|
||||
color: #ffffff;
|
||||
padding-top: 9px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
|
||||
.add-box-item {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
cursor: pointer;
|
||||
.ivu-upload-drag,.ivu-upload-drag:hover {
|
||||
background:transparent;
|
||||
border:0;
|
||||
border-radius:0;
|
||||
|
||||
.ivu-upload-drag, .ivu-upload-drag:hover {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
transition: all .2s;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-box-item:hover {
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.add-box:hover {
|
||||
border-color: rgba(0,0,0,.6);
|
||||
border-color: rgba(0, 0, 0, .6);
|
||||
|
||||
.add-box-upload {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.callback-add-box {
|
||||
display: block;
|
||||
width: auto;
|
||||
@ -221,34 +246,41 @@
|
||||
line-height: 25px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
|
||||
.add-box-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.add-box-upload {
|
||||
display: block;
|
||||
width: auto;
|
||||
background: transparent;
|
||||
color: #333;
|
||||
padding: 0;
|
||||
|
||||
> div {
|
||||
display: inline-block;
|
||||
padding-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-load {
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.browse-list {
|
||||
max-height: 540px;
|
||||
overflow: auto;
|
||||
|
||||
.browse-item {
|
||||
margin: 10px 15px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
.browse-img {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
@ -257,6 +289,7 @@
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.browse-title {
|
||||
display: block;
|
||||
width: 64px;
|
||||
@ -265,6 +298,7 @@
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.browse-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -278,9 +312,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-list-disabled {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.browse-list-disabled:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
@ -291,6 +327,7 @@
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
<template>
|
||||
<svg viewBox="25 25 50 50" class="common-loading"><circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" class="w-path"></circle></svg>
|
||||
<svg viewBox="25 25 50 50" class="common-loading"><circle cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10" class="common-path"></circle></svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.common-loading {
|
||||
-webkit-animation: rotate 2s linear infinite;
|
||||
animation: rotate 2s linear infinite;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@ -14,18 +12,17 @@
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
.w-path {
|
||||
stroke-dasharray: 1,200;
|
||||
stroke-dashoffset: 0;
|
||||
-webkit-animation: dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;
|
||||
animation: dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
&:local {
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn)
|
||||
|
||||
.common-path {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: round;
|
||||
&:local {
|
||||
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
@ -34,57 +31,24 @@
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1,200;
|
||||
stroke-dashoffset: 0
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 89,200;
|
||||
stroke-dashoffset: -35
|
||||
}
|
||||
|
||||
to {
|
||||
stroke-dasharray: 89,200;
|
||||
stroke-dashoffset: -124
|
||||
}
|
||||
}
|
||||
@keyframes dash {
|
||||
0% {
|
||||
stroke-dasharray: 1,200;
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 89,200;
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35
|
||||
}
|
||||
|
||||
to {
|
||||
stroke-dasharray: 89,200;
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes color {
|
||||
0%,to {
|
||||
stroke: #d62d20
|
||||
}
|
||||
|
||||
40% {
|
||||
stroke: #0057e7
|
||||
}
|
||||
|
||||
66% {
|
||||
stroke: #008744
|
||||
}
|
||||
|
||||
80%,90% {
|
||||
stroke: #ffa700
|
||||
}
|
||||
}
|
||||
@keyframes color {
|
||||
0%,to {
|
||||
0%, to {
|
||||
stroke: #d62d20
|
||||
}
|
||||
|
||||
@ -96,10 +60,11 @@
|
||||
stroke: #008744
|
||||
}
|
||||
|
||||
80%,90% {
|
||||
80%, 90% {
|
||||
stroke: #ffa700
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.common-spinner {
|
||||
display: none;
|
||||
position: fixed;
|
||||
@ -14,6 +15,7 @@
|
||||
margin: 0 auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
.common-circular {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -24,6 +26,7 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
@ -50,16 +50,19 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:global {
|
||||
.teditor-box {
|
||||
textarea {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tox-tinymce {
|
||||
box-shadow: none;
|
||||
box-sizing: border-box;
|
||||
border-color: #dddee1;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
|
||||
.tox-statusbar {
|
||||
span.tox-statusbar__branding {
|
||||
a {
|
||||
@ -69,8 +72,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teditor-transfer {
|
||||
background-color: #ffffff;
|
||||
|
||||
.tox-toolbar {
|
||||
> div:last-child {
|
||||
> button:last-child {
|
||||
@ -78,13 +83,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-modal-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ivu-modal-close {
|
||||
top: 7px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.teditor-transfer-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -93,11 +101,14 @@
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
textarea {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tox-tinymce {
|
||||
border: 0;
|
||||
|
||||
.tox-statusbar {
|
||||
span.tox-statusbar__branding {
|
||||
a {
|
||||
@ -108,31 +119,37 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tox {
|
||||
&.tox-silver-sink {
|
||||
z-index: 13000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.teditor-loadstyle {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.teditor-loadedstyle {
|
||||
width: 100%;
|
||||
max-height: inherit;
|
||||
overflow: inherit;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.upload-control {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:global {
|
||||
.tags-wrap {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
@ -26,6 +27,7 @@
|
||||
line-height: normal;
|
||||
-webkit-transition: border .2s ease-in-out, background .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
|
||||
transition: border .2s ease-in-out, background .2s ease-in-out, -webkit-box-shadow .2s ease-in-out;
|
||||
|
||||
.tags-item, .tags-input {
|
||||
position: relative;
|
||||
float: left;
|
||||
@ -35,9 +37,11 @@
|
||||
line-height: 22px;
|
||||
margin: 2px 6px 2px 0;
|
||||
padding: 0 20px 0 6px;
|
||||
|
||||
.tags-content {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.tags-del {
|
||||
width: 20px;
|
||||
height: 22px;
|
||||
@ -48,6 +52,7 @@
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-input {
|
||||
max-width: 80%;
|
||||
padding: 0;
|
||||
@ -61,9 +66,11 @@
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tags-input::placeholder {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.tags-placeholder {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@ -79,6 +86,7 @@
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
|
||||
3
webpack.mix.js
vendored
3
webpack.mix.js
vendored
@ -29,6 +29,9 @@ mix
|
||||
}
|
||||
},
|
||||
})
|
||||
.options({
|
||||
processCssUrls: false
|
||||
})
|
||||
.vue({
|
||||
version: 2,
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user