调整样式
This commit is contained in:
kuaifan
parent
c830f86602
commit
5ccb3fd2d4
@ -7,7 +7,7 @@
|
||||
:disabled="!showTooltip"
|
||||
:max-width="tooltipMaxWidth"
|
||||
transfer>
|
||||
<span ref="content" @mouseenter="handleTooltipIn" class="auto-tip-content">
|
||||
<span ref="content" @mouseenter="handleTooltipIn" class="common-auto-tip">
|
||||
<template v-if="existSlot"><slot/></template>
|
||||
<template v-else>{{text}}</template>
|
||||
</span>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="common-img-update">
|
||||
<div v-if="type !== 'callback'" class="imgcomp-upload-list" v-for="item in uploadList">
|
||||
<template v-if="item.status === 'finished'">
|
||||
<div class="imgcomp-upload-img" v-bind:style="{ 'background-image': 'url(' + __thumb(item.thumb) + ')' }"></div>
|
||||
@ -74,261 +74,6 @@
|
||||
</div>
|
||||
</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);
|
||||
}
|
||||
|
||||
.ivu-modal-wrap {
|
||||
z-index: 1001;
|
||||
}
|
||||
}
|
||||
|
||||
.imgcomp-upload-list {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
margin-right: 4px;
|
||||
vertical-align: top;
|
||||
|
||||
.imgcomp-upload-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.imgcomp-upload-list-cover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.imgcomp-upload-list-cover i {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.imgcomp-upload-list-cover i:hover {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.ivu-progress-outer {
|
||||
background-color: rgba(0, 0, 0, 0.68);
|
||||
|
||||
.ivu-progress-inner {
|
||||
width: 88%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
border: 1px dashed #dddee1;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
|
||||
.add-box-icon {
|
||||
i {
|
||||
vertical-align: middle;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-box-upload {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
.add-box-upload {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.callback-add-box {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 25px;
|
||||
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;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABxCAAAAABg5GeyAAACW0lEQVR4Ae3XVRLjMBAE0L3/rSwKM3OcSNPyLVYOLvM6UD0Bd03LVe9XH+RlhlRSSSWVVFJJJZVUUkkllVRSSSWVVFJJJZVUUkl9WyqppJJKKqmkkgpURP17xngOAR5NxW5wlJ9MaLQh83F4NHWmd/gZtdVBaOldfDB1bq5UpJFbFOC6LKnYrkRO209PAw+hIuzWB8Ep5es8HvYo4z4tE1X8UeRwlMM2D5Bzkc7kj6Bi3VTKDDwEeUcrMxrUvGDXTnHa6kK69SDN9sgq1clxKSbNHqqnYmdri81Q9QHf1JPt1Frncaib2XbiTKL2GkHaurnY9LOulMV0O7G6Kw+g9sw2ohhm62KezVJaaufjWC1TnOkr1exilJ7Ji0vxCCqO9V4UwV4PYr9+apouhGYLKfnahdpqegjmeoXOpXgANe70pKT6Zhu19qkY2nC0PZS527lQOyInqr8Uvc5jqfUb1X+PGh5IhW90S2quh3FQC2XRcF66TUkTXPcLKm5FtdR9RJq+2hWII7UpFtmsQLEyzsdJtkxxpr6gLotbUSlV9yeT0Trmzk2XPdUThLYarUbWOY9j04xXQ2u+pMZLYSumGmNUH3HbM9qOAwSHodN2Pks25F2j3aI7+IxqNsB+YLWb16ukSjiW4xNB0gMoMfApBS/XZQgi3p9/5RsiKNKZEOwYFVIF5VyTyD19sbyjIJiNJRZxpNbx2S8sGKvGZNHJBniBu9Wy5WxjGuQFqIAcBHiRGyt4ua5gSCWVVFJJJZVUUkkllVRSSSWVVFJJJZVUUkkllVRSSSWVVFI/AgO0SXIVYHeGAAAAAElFTkSuQmCC);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.browse-title {
|
||||
display: block;
|
||||
width: 64px;
|
||||
margin-top: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.browse-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
font-size: 36px;
|
||||
padding-top: 15px;
|
||||
color: #ffffff;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-list-disabled {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.browse-list-disabled:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ImgUpload',
|
||||
|
||||
@ -2,70 +2,6 @@
|
||||
<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 {
|
||||
transform-origin: center center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
&:local {
|
||||
animation: rotate 2s linear infinite;
|
||||
}
|
||||
|
||||
.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 {
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
}
|
||||
@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 color {
|
||||
0%, to {
|
||||
stroke: #d62d20
|
||||
}
|
||||
|
||||
40% {
|
||||
stroke: #0057e7
|
||||
}
|
||||
|
||||
66% {
|
||||
stroke: #008744
|
||||
}
|
||||
|
||||
80%, 90% {
|
||||
stroke: #ffa700
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Loading',
|
||||
|
||||
@ -1,32 +1,10 @@
|
||||
<template>
|
||||
<div ref="scrollerView" class="app-scroller" :class="[static ? 'app-scroller-static' : '']">
|
||||
<div ref="scrollerView" class="app-scroller-y" :class="[static ? 'static' : '']">
|
||||
<slot/>
|
||||
<div ref="bottom" class="app-scroller-bottom"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.app-scroller {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.app-scroller-bottom {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.app-scroller-static {
|
||||
position: static;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: 'ScrollerY',
|
||||
|
||||
@ -4,30 +4,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.common-spinner {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
margin: 0 auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
.common-circular {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Spinner',
|
||||
|
||||
@ -49,31 +49,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
import tinymce from 'tinymce/tinymce';
|
||||
import ImgUpload from "./ImgUpload";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="tags-wrap" @paste="pasteText($event)" @click="clickWrap">
|
||||
<div class="common-tag-input" @paste="pasteText($event)" @click="clickWrap">
|
||||
<div class="tags-item" v-for="(text, index) in disSource">
|
||||
<span class="tags-content" @click.stop="">{{text}}</span><span class="tags-del" @click.stop="delTag(index)">×</span>
|
||||
</div>
|
||||
@ -10,84 +10,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:global {
|
||||
.tags-wrap {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 2px 7px;
|
||||
border: 1px solid #dddee1;
|
||||
border-radius: 4px;
|
||||
color: #495060;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
cursor: text;
|
||||
vertical-align: middle;
|
||||
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;
|
||||
color: #495060;
|
||||
background-color: #f1f8ff;
|
||||
border-radius: 3px;
|
||||
line-height: 22px;
|
||||
margin: 2px 6px 2px 0;
|
||||
padding: 0 20px 0 6px;
|
||||
|
||||
.tags-content {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.tags-del {
|
||||
width: 20px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-input {
|
||||
max-width: 80%;
|
||||
padding: 0;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
color: inherit;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tags-input::placeholder {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.tags-placeholder {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
color: #ffffff00;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-wrap::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: 'TagInput',
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
<span ref="children" :class="[prefixCls + '-string']" :style="childrenStyle" v-else><slot></slot></span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Icon from 'view-design-hi/src/components/icon';
|
||||
import { oneOf } from 'view-design-hi/src/utils/assist';
|
||||
|
||||
@ -12,24 +12,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.common-circle {
|
||||
border-radius: 50%;
|
||||
.common-circle-path {
|
||||
fill: transparent;
|
||||
}
|
||||
.common-circle-g-path-ring {
|
||||
stroke: #87d068;
|
||||
}
|
||||
.common-circle-g-path-core {
|
||||
fill: #87d068;
|
||||
transform: scale(0.56);
|
||||
transform-origin: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
name: 'WCircle',
|
||||
|
||||
@ -8,40 +8,38 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.page-404 {
|
||||
background-color: #fff;
|
||||
color: #636b6f;
|
||||
font-weight: 400;
|
||||
.page-404 {
|
||||
background-color: #fff;
|
||||
color: #636b6f;
|
||||
font-weight: 400;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100vh;
|
||||
}
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.position-ref {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.position-ref {
|
||||
position: relative;
|
||||
}
|
||||
.code {
|
||||
border-right: 2px solid;
|
||||
font-size: 26px;
|
||||
padding: 0 15px 0 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.code {
|
||||
border-right: 2px solid;
|
||||
font-size: 26px;
|
||||
padding: 0 15px 0 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message {
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.message {
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -21,97 +21,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
:global {
|
||||
.page-login {
|
||||
.login-body {
|
||||
.login-box {
|
||||
.login-input {
|
||||
.ivu-input {
|
||||
border-color: #f1f1f1;
|
||||
}
|
||||
.login-code {
|
||||
.ivu-input-group-prepend,
|
||||
.ivu-input-group-append {
|
||||
background: transparent;
|
||||
border-color: #f1f1f1;
|
||||
}
|
||||
.ivu-input {
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.login-code-end {
|
||||
margin: -6px -7px;
|
||||
height: 38px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.page-login {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #F3F6FE;
|
||||
.login-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.login-logo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: url("../../statics/images/logo.svg") no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
.login-box {
|
||||
margin-top: 32px;
|
||||
width: 450px;
|
||||
border-radius: 12px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 10px #e6ecfa;
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-top: 36px;
|
||||
}
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
.login-input {
|
||||
margin: 40px;
|
||||
> * {
|
||||
margin-top: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-forgot {
|
||||
color: #aaaaaa;
|
||||
margin-top: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="manage-wrapper">
|
||||
<div class="page-manage">
|
||||
<div class="manage-box-menu">
|
||||
<Dropdown class="manage-box-dropdown" trigger="click" @on-click="settingRoute">
|
||||
<div class="manage-box-title">
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="calendar">
|
||||
<div class="page-calendar">
|
||||
<PageTitle>{{$L('日历')}}</PageTitle>
|
||||
<div class="nopage">
|
||||
<div class="nopage-icon"><Icon type="md-calendar" /></div>
|
||||
@ -8,34 +8,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.nopage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.nopage-icon {
|
||||
background-color: #f4f5f7;
|
||||
padding: 20px;
|
||||
border-radius: 50%;
|
||||
.ivu-icon {
|
||||
color: #d1d8dd;
|
||||
font-size: 46px;
|
||||
}
|
||||
}
|
||||
.nopage-text {
|
||||
margin-top: 16px;
|
||||
color: #bec6cc;
|
||||
background-color: #f4f5f7;
|
||||
padding: 4px 15px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
:width="360"
|
||||
:offset="8"
|
||||
@on-popper-show="popperShow">
|
||||
<div slot="content" class="dialog-readbox">
|
||||
<div slot="content" class="dialog-wrapper-read-poptip-content">
|
||||
<ul class="read">
|
||||
<li class="read-title"><em>{{readList.length}}</em>{{$L('已读')}}</li>
|
||||
<li v-for="item in readList"><UserAvatar :userid="item.userid" :size="26" show-name/></li>
|
||||
|
||||
@ -10,7 +10,12 @@
|
||||
<em v-if="peopleNum > 0">({{peopleNum}})</em>
|
||||
</div>
|
||||
</slot>
|
||||
<ScrollerY ref="scroller" class="dialog-chat dialog-scroller" :auto-bottom="autoBottom" @on-scroll="chatScroll">
|
||||
<ScrollerY
|
||||
ref="scroller"
|
||||
class="dialog-scroller"
|
||||
:auto-bottom="autoBottom"
|
||||
@on-scroll="chatScroll"
|
||||
static>
|
||||
<div ref="manageList" class="dialog-list">
|
||||
<ul>
|
||||
<li v-if="dialogMsgLoad > 0" class="loading"><Loading/></li>
|
||||
|
||||
@ -22,56 +22,53 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.project-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
border-left: 1px solid #f4f5f5;
|
||||
z-index: 1;
|
||||
.project-dialog-wrapper {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
.dialog-user {
|
||||
margin-top: 36px;
|
||||
padding: 0 32px;
|
||||
.member-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.member-title {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
> span {
|
||||
padding-left: 6px;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
}
|
||||
.member-view-all {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #777;
|
||||
}
|
||||
.project-dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
border-left: 1px solid #f4f5f5;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
.project-dialog-wrapper {
|
||||
.dialog-user {
|
||||
margin-top: 36px;
|
||||
padding: 0 32px;
|
||||
.member-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.member-title {
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
> span {
|
||||
padding-left: 6px;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
}
|
||||
.member-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 14px;
|
||||
overflow: auto;
|
||||
> li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin-right: 14px;
|
||||
margin-bottom: 8px;
|
||||
.member-view-all {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #777;
|
||||
}
|
||||
&.member-all {
|
||||
display: block;
|
||||
> li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.member-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 14px;
|
||||
overflow: auto;
|
||||
> li {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin-right: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&.member-all {
|
||||
display: block;
|
||||
> li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -95,7 +95,12 @@
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<Input type="text" v-model="subName" class="enter-input" @on-enter="addSubTask" :placeholder="$L('+ 输入子任务，回车添加子任务')"></Input>
|
||||
<Input
|
||||
type="text"
|
||||
v-model="subName"
|
||||
:class="['enter-input', subName == '' ? 'empty' : '']"
|
||||
@on-enter="addSubTask"
|
||||
:placeholder="$L('+ 输入子任务，回车添加子任务')"/>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
@ -2,20 +2,6 @@
|
||||
<div class="task-priority" :style="myStyle"><slot/></div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.task-priority {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
border-radius: 3px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TaskPriority",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<div class="page-dashboard">
|
||||
<PageTitle>{{$L('仪表板')}}</PageTitle>
|
||||
<div class="nopage">
|
||||
<div class="nopage-icon"><Icon type="ios-speedometer" /></div>
|
||||
@ -8,34 +8,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.nopage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.nopage-icon {
|
||||
background-color: #f4f5f7;
|
||||
padding: 20px;
|
||||
border-radius: 50%;
|
||||
.ivu-icon {
|
||||
color: #d1d8dd;
|
||||
font-size: 46px;
|
||||
}
|
||||
}
|
||||
.nopage-text {
|
||||
margin-top: 16px;
|
||||
color: #bec6cc;
|
||||
background-color: #f4f5f7;
|
||||
padding: 4px 15px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="messenger">
|
||||
<div class="page-messenger">
|
||||
<PageTitle>{{ $L('消息') }}</PageTitle>
|
||||
<div class="messenger-wrapper">
|
||||
|
||||
<div class="messenger-select">
|
||||
<div class="messenger-search">
|
||||
<div class="search-wrapper">
|
||||
@ -62,14 +61,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.messenger {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
import DialogWrapper from "./components/DialogWrapper";
|
||||
|
||||
@ -1,43 +1,11 @@
|
||||
<template>
|
||||
<div class="project">
|
||||
<div class="page-project">
|
||||
<PageTitle>{{ $L('项目面板') }}</PageTitle>
|
||||
<ProjectList/>
|
||||
<ProjectDialog v-if="$store.state.projectChatShow"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.project {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.project-list {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.project-dialog {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
min-width: 320px;
|
||||
max-width: 520px;
|
||||
flex-shrink: 0;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import ProjectList from "./components/ProjectList";
|
||||
import ProjectDialog from "./components/ProjectDialog";
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="setting">
|
||||
<div class="page-setting">
|
||||
<PageTitle>{{$L('设置')}}</PageTitle>
|
||||
<div class="setting-head">
|
||||
<div class="setting-titbox">
|
||||
@ -26,80 +26,6 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:global {
|
||||
.setting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.setting-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 32px 32px 16px;
|
||||
border-bottom: 1px solid #F4F4F5;
|
||||
.setting-titbox {
|
||||
flex: 1;
|
||||
margin-bottom: 16px;
|
||||
.setting-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> h1 {
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
.setting-menu {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid #F4F4F5;
|
||||
overflow: auto;
|
||||
> ul {
|
||||
padding: 12px 0 0 32px;
|
||||
> li {
|
||||
cursor: pointer;
|
||||
color: #6C7D8C;
|
||||
list-style: none;
|
||||
line-height: 42px;
|
||||
padding: 0 20px;
|
||||
margin: 5px 0;
|
||||
position: relative;
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.setting-content-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
padding: 12px 32px;
|
||||
}
|
||||
.setting-content-view {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.setting-router-view {
|
||||
padding: 24px 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import {mapState} from "vuex";
|
||||
|
||||
|
||||
16
resources/assets/sass/app.scss
vendored
16
resources/assets/sass/app.scss
vendored
@ -1,14 +1,8 @@
|
||||
@import "main";
|
||||
@import "loading";
|
||||
@import "iconfont";
|
||||
@import "scrollbar";
|
||||
@import "element";
|
||||
@import "iconfont";
|
||||
@import "loading";
|
||||
@import "scrollbar";
|
||||
|
||||
@import "auto-tip";
|
||||
@import "common-avatar";
|
||||
@import "manage-wrapper";
|
||||
@import "dialog-wrapper";
|
||||
@import "messenger-wrapper";
|
||||
@import "project-list";
|
||||
@import "task-add";
|
||||
@import "components/_";
|
||||
@import "pages/_";
|
||||
|
||||
|
||||
10
resources/assets/sass/components/_.scss
vendored
Normal file
10
resources/assets/sass/components/_.scss
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
@import "auto-tip";
|
||||
@import "circle";
|
||||
@import "img-update";
|
||||
@import "loading";
|
||||
@import "scroller-y";
|
||||
@import "spinner";
|
||||
@import "t-editor";
|
||||
@import "tag-input";
|
||||
@import "user-avatar";
|
||||
@import "user-input";
|
||||
@ -1,4 +1,4 @@
|
||||
.auto-tip-content {
|
||||
.common-auto-tip-content {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
14
resources/assets/sass/components/circle.scss
vendored
Normal file
14
resources/assets/sass/components/circle.scss
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
.common-circle {
|
||||
border-radius: 50%;
|
||||
.common-circle-path {
|
||||
fill: transparent;
|
||||
}
|
||||
.common-circle-g-path-ring {
|
||||
stroke: #87d068;
|
||||
}
|
||||
.common-circle-g-path-core {
|
||||
fill: #87d068;
|
||||
transform: scale(0.56);
|
||||
transform-origin: 50%;
|
||||
}
|
||||
}
|
||||
251
resources/assets/sass/components/img-update.scss
vendored
Normal file
251
resources/assets/sass/components/img-update.scss
vendored
Normal file
@ -0,0 +1,251 @@
|
||||
.img-upload-modal {
|
||||
.ivu-modal-mask {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.ivu-modal-no-mask {
|
||||
background-color: rgba(55, 55, 55, .2);
|
||||
}
|
||||
|
||||
.ivu-modal-wrap {
|
||||
z-index: 1001;
|
||||
}
|
||||
}
|
||||
|
||||
.imgcomp-upload-list {
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
|
||||
margin-right: 4px;
|
||||
vertical-align: top;
|
||||
|
||||
.imgcomp-upload-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.imgcomp-upload-list-cover {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, .6);
|
||||
}
|
||||
|
||||
.imgcomp-upload-list-cover i {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.imgcomp-upload-list-cover i:hover {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.ivu-progress-outer {
|
||||
background-color: rgba(0, 0, 0, 0.68);
|
||||
|
||||
.ivu-progress-inner {
|
||||
width: 88%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-right: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.add-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
display: inline-block;
|
||||
background: #fff;
|
||||
border: 1px dashed #dddee1;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
vertical-align: top;
|
||||
|
||||
.add-box-icon {
|
||||
i {
|
||||
vertical-align: middle;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-box-upload {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
.add-box-upload {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.callback-add-box {
|
||||
display: block;
|
||||
width: auto;
|
||||
height: 25px;
|
||||
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;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKoAAABxCAAAAABg5GeyAAACW0lEQVR4Ae3XVRLjMBAE0L3/rSwKM3OcSNPyLVYOLvM6UD0Bd03LVe9XH+RlhlRSSSWVVFJJJZVUUkkllVRSSSWVVFJJJZVUUkl9WyqppJJKKqmkkgpURP17xngOAR5NxW5wlJ9MaLQh83F4NHWmd/gZtdVBaOldfDB1bq5UpJFbFOC6LKnYrkRO209PAw+hIuzWB8Ep5es8HvYo4z4tE1X8UeRwlMM2D5Bzkc7kj6Bi3VTKDDwEeUcrMxrUvGDXTnHa6kK69SDN9sgq1clxKSbNHqqnYmdri81Q9QHf1JPt1Frncaib2XbiTKL2GkHaurnY9LOulMV0O7G6Kw+g9sw2ohhm62KezVJaaufjWC1TnOkr1exilJ7Ji0vxCCqO9V4UwV4PYr9+apouhGYLKfnahdpqegjmeoXOpXgANe70pKT6Zhu19qkY2nC0PZS527lQOyInqr8Uvc5jqfUb1X+PGh5IhW90S2quh3FQC2XRcF66TUkTXPcLKm5FtdR9RJq+2hWII7UpFtmsQLEyzsdJtkxxpr6gLotbUSlV9yeT0Trmzk2XPdUThLYarUbWOY9j04xXQ2u+pMZLYSumGmNUH3HbM9qOAwSHodN2Pks25F2j3aI7+IxqNsB+YLWb16ukSjiW4xNB0gMoMfApBS/XZQgi3p9/5RsiKNKZEOwYFVIF5VyTyD19sbyjIJiNJRZxpNbx2S8sGKvGZNHJBniBu9Wy5WxjGuQFqIAcBHiRGyt4ua5gSCWVVFJJJZVUUkkllVRSSSWVVFJJJZVUUkkllVRSSSWVVFI/AgO0SXIVYHeGAAAAAElFTkSuQmCC);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.browse-title {
|
||||
display: block;
|
||||
width: 64px;
|
||||
margin-top: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.browse-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
font-size: 36px;
|
||||
padding-top: 15px;
|
||||
color: #ffffff;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.browse-list-disabled {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.browse-list-disabled:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
z-index: 1;
|
||||
}
|
||||
56
resources/assets/sass/components/loading.scss
vendored
Normal file
56
resources/assets/sass/components/loading.scss
vendored
Normal file
@ -0,0 +1,56 @@
|
||||
.common-loading {
|
||||
transform-origin: center center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
animation: rotate 2s linear infinite;
|
||||
|
||||
.common-path {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
stroke-linecap: round;
|
||||
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
to {
|
||||
-webkit-transform: rotate(1turn);
|
||||
transform: rotate(1turn)
|
||||
}
|
||||
}
|
||||
@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 color {
|
||||
0%, to {
|
||||
stroke: #d62d20
|
||||
}
|
||||
|
||||
40% {
|
||||
stroke: #0057e7
|
||||
}
|
||||
|
||||
66% {
|
||||
stroke: #008744
|
||||
}
|
||||
|
||||
80%, 90% {
|
||||
stroke: #ffa700
|
||||
}
|
||||
}
|
||||
19
resources/assets/sass/components/scroller-y.scss
vendored
Executable file
19
resources/assets/sass/components/scroller-y.scss
vendored
Executable file
@ -0,0 +1,19 @@
|
||||
.app-scroller-y {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
.app-scroller-bottom {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
&.static {
|
||||
position: static;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
20
resources/assets/sass/components/spinner.scss
vendored
Normal file
20
resources/assets/sass/components/spinner.scss
vendored
Normal file
@ -0,0 +1,20 @@
|
||||
.common-spinner {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
margin: 0 auto;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
.common-circular {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
98
resources/assets/sass/components/t-editor.scss
vendored
Executable file
98
resources/assets/sass/components/t-editor.scss
vendored
Executable file
@ -0,0 +1,98 @@
|
||||
.teditor-box,
|
||||
.teditor-transfer {
|
||||
.tox {
|
||||
&.tox-silver-sink {
|
||||
z-index: 13000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teditor-transfer {
|
||||
background-color: #ffffff;
|
||||
|
||||
.tox-toolbar {
|
||||
> div:last-child {
|
||||
> button:last-child {
|
||||
margin-right: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-modal-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ivu-modal-close {
|
||||
top: 7px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.teditor-transfer-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
textarea {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tox-tinymce {
|
||||
border: 0;
|
||||
|
||||
.tox-statusbar {
|
||||
span.tox-statusbar__branding {
|
||||
a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
73
resources/assets/sass/components/tag-input.scss
vendored
Executable file
73
resources/assets/sass/components/tag-input.scss
vendored
Executable file
@ -0,0 +1,73 @@
|
||||
.common-tag-input {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 2px 7px;
|
||||
border: 1px solid #dddee1;
|
||||
border-radius: 4px;
|
||||
color: #495060;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
cursor: text;
|
||||
vertical-align: middle;
|
||||
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;
|
||||
color: #495060;
|
||||
background-color: #f1f8ff;
|
||||
border-radius: 3px;
|
||||
line-height: 22px;
|
||||
margin: 2px 6px 2px 0;
|
||||
padding: 0 20px 0 6px;
|
||||
|
||||
.tags-content {
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.tags-del {
|
||||
width: 20px;
|
||||
height: 22px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tags-input {
|
||||
max-width: 80%;
|
||||
padding: 0;
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
color: inherit;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
-webkit-appearance: none;
|
||||
outline: none;
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tags-input::placeholder {
|
||||
color: #bbbbbb;
|
||||
}
|
||||
|
||||
.tags-placeholder {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: -1;
|
||||
color: #ffffff00;
|
||||
}
|
||||
}
|
||||
.common-tag-input::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
66
resources/assets/sass/components/user-input.scss
vendored
Executable file
66
resources/assets/sass/components/user-input.scss
vendored
Executable file
@ -0,0 +1,66 @@
|
||||
.common-user {
|
||||
position: relative;
|
||||
.common-user-loading {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.common-loading {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
&.hidden-input {
|
||||
.ivu-select-selection {
|
||||
padding: 0 4px;
|
||||
.ivu-select-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.common-user-transfer {
|
||||
.user-input-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-input-avatar {
|
||||
.ivu-avatar {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
.user-input-nickname {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.user-input-userid {
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
color: #cccccc;
|
||||
transition: margin 0.1s;
|
||||
}
|
||||
}
|
||||
.ivu-select-item {
|
||||
&.ivu-select-item-selected {
|
||||
&:after {
|
||||
top: 8px;
|
||||
}
|
||||
.user-input-option {
|
||||
.user-input-userid {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-drop-prepend {
|
||||
text-align: center;
|
||||
color: #c5c8ce;
|
||||
line-height: 20px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
100
resources/assets/sass/dialog-wrapper.scss
vendored
100
resources/assets/sass/dialog-wrapper.scss
vendored
@ -1,100 +0,0 @@
|
||||
.dialog-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
z-index: 1;
|
||||
.dialog-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
margin-top: 20px;
|
||||
> h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
> em {
|
||||
font-style: normal;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
.dialog-chat {
|
||||
flex: 1;
|
||||
padding: 0 32px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding: 0 28px;
|
||||
margin-bottom: 20px;
|
||||
.dialog-newmsg {
|
||||
display: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
padding: 0 12px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 10px;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
z-index: 2;;
|
||||
}
|
||||
.dialog-input {
|
||||
background-color: #F4F5F7;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
.ivu-input {
|
||||
border: 0;
|
||||
resize: none;
|
||||
background-color: transparent;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-upload {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.newmsg {
|
||||
margin-top: -50px;
|
||||
.dialog-newmsg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.drag-over {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background-color: rgba(255, 255, 255, 0.78);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
border: 2px dashed #7b7b7b;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.drag-text {
|
||||
padding: 12px;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
689
resources/assets/sass/main.scss
vendored
689
resources/assets/sass/main.scss
vendored
@ -1,689 +0,0 @@
|
||||
body {
|
||||
overflow: hidden;
|
||||
.ivu-input,
|
||||
.ivu-select-selection {
|
||||
border-color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
*[hidden="hidden"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon-loading {
|
||||
animation: icon-loading-load 0.6s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes icon-loading-load {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-modal-wrap {
|
||||
&.simple-modal {
|
||||
.ivu-modal {
|
||||
top: 100px;
|
||||
padding-bottom: 100px;
|
||||
@media (max-height: 900px) {
|
||||
top: 35px;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
&.ivu-modal-fullscreen {
|
||||
top: 0;
|
||||
}
|
||||
.ivu-modal-header,
|
||||
.ivu-modal-footer {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.ivu-modal-header {
|
||||
padding: 22px 24px 20px;
|
||||
.ivu-modal-header-inner {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.ivu-modal-body {
|
||||
padding: 16px 32px 2px;
|
||||
}
|
||||
.ivu-modal-footer {
|
||||
padding: 20px 30px 22px;
|
||||
.ivu-btn {
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
min-width: 94px;
|
||||
}
|
||||
}
|
||||
.ivu-modal-content {
|
||||
border-radius: 18px;
|
||||
.ivu-modal-close {
|
||||
.ivu-icon-ios-close {
|
||||
font-size: 38px;
|
||||
top: 3px;
|
||||
right: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
&:hover {
|
||||
.ivu-icon-ios-close {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-network-add-tabs {
|
||||
.ivu-tabs-tabpane {
|
||||
padding: 10px 6px 0;
|
||||
}
|
||||
}
|
||||
.form-network-add-in-out {
|
||||
padding: 0 6px;
|
||||
.select-in-type {
|
||||
span.ivu-radio {
|
||||
display: none;
|
||||
}
|
||||
.select-in-type-item-checked {
|
||||
color: #2d8cf0;
|
||||
border: 1px solid #2d8cf0 !important;
|
||||
}
|
||||
.select-in-type-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 90px;
|
||||
border: 1px solid #E8EBEE;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
margin: 0 8px 0 0;
|
||||
> span {
|
||||
flex: 1;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.select-in-type-icon {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-in-node {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-modal-confirm {
|
||||
.ivu-modal-confirm-body {
|
||||
> div {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-info-show {
|
||||
display: flex;
|
||||
.column {
|
||||
color: #6D6D6D;
|
||||
margin: 5px 0;
|
||||
min-width: 70px;
|
||||
max-width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
.value {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
color: #414141;
|
||||
margin: 5px 0 5px 5px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-select-dropdown {
|
||||
max-height: 360px;
|
||||
&.select-node {
|
||||
.ivu-select-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.option-title {
|
||||
flex: 1;
|
||||
}
|
||||
.ivu-tag {
|
||||
margin-left: 18px;
|
||||
margin-right: 0;
|
||||
transform: scale(0.9);
|
||||
transform-origin: right center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-tooltip-popper {
|
||||
.ivu-tooltip-inner {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-table {
|
||||
table {
|
||||
width: 100% !important;
|
||||
.ivu-table-cell {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
thead {
|
||||
.ivu-table-cell {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
.tree-icon-loading {
|
||||
.ivu-table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ivu-table-cell-tree {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.td-ellipsis {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
.remark-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.remark-icon {
|
||||
display: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.remark-tag {
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin: 2px 4px 2px 0;
|
||||
border: 1px solid #e8eaec;
|
||||
border-radius: 3px;
|
||||
background: #f7f7f7;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
opacity: 1;
|
||||
color: #515a6e;
|
||||
padding: 0 4px;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
&.pointer-tag {
|
||||
cursor: pointer;
|
||||
color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
border-color: #91d5ff;
|
||||
}
|
||||
}
|
||||
.icon-tooltip {
|
||||
.ivu-tooltip-rel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.td-action {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
.td-action-container {
|
||||
display: inline-block;
|
||||
a {
|
||||
font-size: 12px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-table-row-hover {
|
||||
&:hover {
|
||||
.td-ellipsis {
|
||||
.remark-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
.common-user {
|
||||
position: relative;
|
||||
.common-user-loading {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 0;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.common-loading {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
&.hidden-input {
|
||||
.ivu-select-selection {
|
||||
padding: 0 4px;
|
||||
.ivu-select-input {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.common-user-transfer {
|
||||
.user-input-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-input-avatar {
|
||||
.ivu-avatar {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
.user-input-nickname {
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.user-input-userid {
|
||||
margin-left: 10px;
|
||||
font-size: 12px;
|
||||
color: #cccccc;
|
||||
transition: margin 0.1s;
|
||||
}
|
||||
}
|
||||
.ivu-select-item {
|
||||
&.ivu-select-item-selected {
|
||||
&:after {
|
||||
top: 8px;
|
||||
}
|
||||
.user-input-option {
|
||||
.user-input-userid {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-drop-prepend {
|
||||
text-align: center;
|
||||
color: #c5c8ce;
|
||||
line-height: 20px;
|
||||
padding-bottom: 5px;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #f1f1f1;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// tinymce
|
||||
.teditor-box,
|
||||
.teditor-transfer {
|
||||
.tox {
|
||||
&.tox-silver-sink {
|
||||
z-index: 13000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.teditor-transfer {
|
||||
background-color: #ffffff;
|
||||
|
||||
.tox-toolbar {
|
||||
> div:last-child {
|
||||
> button:last-child {
|
||||
margin-right: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-modal-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ivu-modal-close {
|
||||
top: 7px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.teditor-transfer-body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
textarea {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.tox-tinymce {
|
||||
border: 0;
|
||||
|
||||
.tox-statusbar {
|
||||
span.tox-statusbar__branding {
|
||||
a {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
.ivu-input,
|
||||
.ivu-select-selection {
|
||||
max-width: 460px;
|
||||
}
|
||||
.form-tip {
|
||||
color: #999999;
|
||||
}
|
||||
.setting-color {
|
||||
max-width: 600px;
|
||||
margin-bottom: 12px;
|
||||
> div {
|
||||
text-align: center;
|
||||
padding-right: 12px;
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
width: 60px;
|
||||
flex: auto;
|
||||
flex-shrink: 0;
|
||||
max-width: 60px;
|
||||
}
|
||||
.ivu-color-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.information {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.setting-footer {
|
||||
> button {
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
min-width: 94px;
|
||||
}
|
||||
}
|
||||
&.submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.setting-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
padding: 16px 24px 0;
|
||||
border-top: 1px solid #F4F4F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-scroller {
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
.dialog-list {
|
||||
> ul {
|
||||
> li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
list-style: none;
|
||||
margin-bottom: 16px;
|
||||
.dialog-avatar {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.dialog-view {
|
||||
max-width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 0 0 0 8px;
|
||||
.dialog-content {
|
||||
color: #333333;
|
||||
background-color: #F4F5F7;
|
||||
padding: 8px;
|
||||
border-radius: 6px 6px 6px 0;
|
||||
&.loading {
|
||||
display: flex;
|
||||
.common-loading {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
&.file {
|
||||
display: inline-block;
|
||||
.file-box {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
border-radius: 3px;
|
||||
width: 220px;
|
||||
.file-thumb {
|
||||
width: 36px;
|
||||
}
|
||||
.file-info {
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.file-name {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.file-size {
|
||||
padding-top: 4px;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.img {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
max-width: 220px;
|
||||
max-height: 220px;
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
.file-img {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&.unknown {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.dialog-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 4px;
|
||||
height: 21px;
|
||||
line-height: 1;
|
||||
.common-loading {
|
||||
margin: 0 2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.time {
|
||||
color: #bbbbbb;
|
||||
font-size: 12px;
|
||||
}
|
||||
.done {
|
||||
display: none;
|
||||
margin-left: 4px;
|
||||
transform: scale(0.9);
|
||||
font-size: 12px;
|
||||
color: #87d068;
|
||||
}
|
||||
.percent {
|
||||
display: none;
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.loading {
|
||||
padding: 12px 0;
|
||||
justify-content: center;
|
||||
.common-loading {
|
||||
margin: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
&.nothing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #999999;
|
||||
}
|
||||
&.bottom {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
&.self {
|
||||
flex-direction: row-reverse;
|
||||
.dialog-view {
|
||||
align-items: flex-end;
|
||||
margin: 0 8px 0 0;
|
||||
.dialog-content {
|
||||
color: #ffffff;
|
||||
background-color: #2d8cf0;
|
||||
border-radius: 6px 6px 0 6px;
|
||||
&.file {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
&.img {
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.dialog-foot {
|
||||
.done {
|
||||
display: inline-block;
|
||||
}
|
||||
.percent {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-readbox {
|
||||
display: flex;
|
||||
position: relative;
|
||||
.read,
|
||||
.unread {
|
||||
flex: 1;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
> li {
|
||||
list-style: none;
|
||||
margin-bottom: 12px;
|
||||
.common-avatar {
|
||||
width: 100%;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
&.read-title {
|
||||
> em {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.unread {
|
||||
> li {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background-color: #F4F4F5;
|
||||
}
|
||||
}
|
||||
|
||||
252
resources/assets/sass/messenger-wrapper.scss
vendored
252
resources/assets/sass/messenger-wrapper.scss
vendored
@ -1,252 +0,0 @@
|
||||
.messenger-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.messenger-select {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
min-width: 240px;
|
||||
max-width: 320px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.messenger-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 54px;
|
||||
padding: 0 12px;
|
||||
flex-shrink: 0;
|
||||
.search-wrapper {
|
||||
flex: 1;
|
||||
background-color: #F7F7F7;
|
||||
padding: 0 8px;
|
||||
margin: 0 4px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
.ivu-input {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.messenger-list {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
> ul {
|
||||
&.dialog {
|
||||
> li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
padding: 0 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
&.active {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
&.loading {
|
||||
margin: 0;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.common-loading {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.user-avatar,
|
||||
.icon-avatar {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.icon-avatar {
|
||||
line-height: 46px;
|
||||
border-radius: 50%;
|
||||
font-size: 26px;
|
||||
background-color: #61B2F9;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dialog-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 12px;
|
||||
.dialog-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 24px;
|
||||
> span {
|
||||
flex: 1;
|
||||
max-width: 130px;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
> i {
|
||||
margin-left: 8px;
|
||||
transform: scale(0.9);
|
||||
font-size: 12px;
|
||||
color: #87d068;
|
||||
}
|
||||
> em {
|
||||
margin-left: 8px;
|
||||
font-style: normal;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.dialog-text {
|
||||
max-width: 170px;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.dialog-num {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 42px;
|
||||
font-size: 12px;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.contacts {
|
||||
> li {
|
||||
list-style: none;
|
||||
margin-left: 24px;
|
||||
position: relative;
|
||||
.label {
|
||||
padding-left: 4px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
&.loading {
|
||||
margin: 0;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.common-loading {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
> ul {
|
||||
> li {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
cursor: pointer;
|
||||
.avatar {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.nickname {
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.messenger-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 54px;
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
> i {
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
margin: 0 24px;
|
||||
color: #aaaaaa;
|
||||
opacity: 0.9;
|
||||
&.active {
|
||||
opacity: 1;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.messenger-msg {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
.dialog-wrapper,
|
||||
.dialog-no {
|
||||
flex: 1;
|
||||
}
|
||||
.dialog-no {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.dialog-no-icon {
|
||||
background-color: #f4f5f7;
|
||||
padding: 20px;
|
||||
border-radius: 50%;
|
||||
.ivu-icon {
|
||||
color: #d1d8dd;
|
||||
font-size: 46px;
|
||||
}
|
||||
}
|
||||
.dialog-no-text {
|
||||
margin-top: 16px;
|
||||
color: #bec6cc;
|
||||
background-color: #f4f5f7;
|
||||
padding: 4px 15px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
10
resources/assets/sass/pages/_.scss
vendored
Executable file
10
resources/assets/sass/pages/_.scss
vendored
Executable file
@ -0,0 +1,10 @@
|
||||
@import "common.scss";
|
||||
@import "page-calendar.scss";
|
||||
@import "page-dashboard.scss";
|
||||
@import "page-login.scss";
|
||||
@import "page-manage.scss";
|
||||
@import "page-messenger.scss";
|
||||
@import "page-project.scss";
|
||||
@import "page-setting.scss";
|
||||
|
||||
@import "components/_";
|
||||
273
resources/assets/sass/pages/common.scss
vendored
Executable file
273
resources/assets/sass/pages/common.scss
vendored
Executable file
@ -0,0 +1,273 @@
|
||||
body {
|
||||
overflow: hidden;
|
||||
.ivu-input,
|
||||
.ivu-select-selection {
|
||||
border-color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
*[hidden="hidden"] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.icon-loading {
|
||||
animation: icon-loading-load 0.6s infinite linear;
|
||||
}
|
||||
|
||||
@keyframes icon-loading-load {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-modal-wrap {
|
||||
&.simple-modal {
|
||||
.ivu-modal {
|
||||
top: 100px;
|
||||
padding-bottom: 100px;
|
||||
@media (max-height: 900px) {
|
||||
top: 35px;
|
||||
padding-bottom: 35px;
|
||||
}
|
||||
&.ivu-modal-fullscreen {
|
||||
top: 0;
|
||||
}
|
||||
.ivu-modal-header,
|
||||
.ivu-modal-footer {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.ivu-modal-header {
|
||||
padding: 22px 24px 20px;
|
||||
.ivu-modal-header-inner {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.ivu-modal-body {
|
||||
padding: 16px 32px 2px;
|
||||
}
|
||||
.ivu-modal-footer {
|
||||
padding: 20px 30px 22px;
|
||||
.ivu-btn {
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
min-width: 94px;
|
||||
}
|
||||
}
|
||||
.ivu-modal-content {
|
||||
border-radius: 18px;
|
||||
.ivu-modal-close {
|
||||
.ivu-icon-ios-close {
|
||||
font-size: 38px;
|
||||
top: 3px;
|
||||
right: 2px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
&:hover {
|
||||
.ivu-icon-ios-close {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-network-add-tabs {
|
||||
.ivu-tabs-tabpane {
|
||||
padding: 10px 6px 0;
|
||||
}
|
||||
}
|
||||
.form-network-add-in-out {
|
||||
padding: 0 6px;
|
||||
.select-in-type {
|
||||
span.ivu-radio {
|
||||
display: none;
|
||||
}
|
||||
.select-in-type-item-checked {
|
||||
color: #2d8cf0;
|
||||
border: 1px solid #2d8cf0 !important;
|
||||
}
|
||||
.select-in-type-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 90px;
|
||||
border: 1px solid #E8EBEE;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
margin: 0 8px 0 0;
|
||||
> span {
|
||||
flex: 1;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.select-in-type-icon {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.select-in-node {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-modal-confirm {
|
||||
.ivu-modal-confirm-body {
|
||||
> div {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-info-show {
|
||||
display: flex;
|
||||
.column {
|
||||
color: #6D6D6D;
|
||||
margin: 5px 0;
|
||||
min-width: 70px;
|
||||
max-width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
.value {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
color: #414141;
|
||||
margin: 5px 0 5px 5px;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-select-dropdown {
|
||||
max-height: 360px;
|
||||
&.select-node {
|
||||
.ivu-select-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.option-title {
|
||||
flex: 1;
|
||||
}
|
||||
.ivu-tag {
|
||||
margin-left: 18px;
|
||||
margin-right: 0;
|
||||
transform: scale(0.9);
|
||||
transform-origin: right center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-tooltip-popper {
|
||||
.ivu-tooltip-inner {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.ivu-table {
|
||||
table {
|
||||
width: 100% !important;
|
||||
.ivu-table-cell {
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
}
|
||||
thead {
|
||||
.ivu-table-cell {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
.tree-icon-loading {
|
||||
.ivu-table-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.ivu-table-cell-tree {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.td-ellipsis {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 100%;
|
||||
.remark-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
.remark-icon {
|
||||
display: none;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.remark-tag {
|
||||
display: inline-block;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
margin: 2px 4px 2px 0;
|
||||
border: 1px solid #e8eaec;
|
||||
border-radius: 3px;
|
||||
background: #f7f7f7;
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
opacity: 1;
|
||||
color: #515a6e;
|
||||
padding: 0 4px;
|
||||
white-space: nowrap;
|
||||
overflow: visible;
|
||||
&.pointer-tag {
|
||||
cursor: pointer;
|
||||
color: #1890ff;
|
||||
background: #e6f7ff;
|
||||
border-color: #91d5ff;
|
||||
}
|
||||
}
|
||||
.icon-tooltip {
|
||||
.ivu-tooltip-rel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.td-action {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: middle;
|
||||
.td-action-container {
|
||||
display: inline-block;
|
||||
a {
|
||||
font-size: 12px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-table-row-hover {
|
||||
&:hover {
|
||||
.td-ellipsis {
|
||||
.remark-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
5
resources/assets/sass/pages/components/_.scss
vendored
Executable file
5
resources/assets/sass/pages/components/_.scss
vendored
Executable file
@ -0,0 +1,5 @@
|
||||
@import "dialog-wrapper.scss";
|
||||
@import "project-list.scss";
|
||||
@import "task-add.scss";
|
||||
@import "task-add-simple.scss";
|
||||
@import "task-priority.scss";
|
||||
315
resources/assets/sass/pages/components/dialog-wrapper.scss
vendored
Normal file
315
resources/assets/sass/pages/components/dialog-wrapper.scss
vendored
Normal file
@ -0,0 +1,315 @@
|
||||
.dialog-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #ffffff;
|
||||
z-index: 1;
|
||||
.dialog-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32px;
|
||||
margin-top: 20px;
|
||||
> h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
> em {
|
||||
font-style: normal;
|
||||
font-size: 17px;
|
||||
font-weight: 500;
|
||||
padding-left: 6px;
|
||||
}
|
||||
}
|
||||
.dialog-scroller {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding: 0 32px;
|
||||
margin-top: 18px;
|
||||
overflow: auto;
|
||||
.dialog-list {
|
||||
> ul {
|
||||
> li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
list-style: none;
|
||||
margin-bottom: 16px;
|
||||
.dialog-avatar {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
flex-shrink: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.dialog-view {
|
||||
max-width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
margin: 0 0 0 8px;
|
||||
.dialog-content {
|
||||
color: #333333;
|
||||
background-color: #F4F5F7;
|
||||
padding: 8px;
|
||||
border-radius: 6px 6px 6px 0;
|
||||
&.loading {
|
||||
display: flex;
|
||||
.common-loading {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 4px;
|
||||
}
|
||||
}
|
||||
&.file {
|
||||
display: inline-block;
|
||||
.file-box {
|
||||
background-color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
border-radius: 3px;
|
||||
width: 220px;
|
||||
.file-thumb {
|
||||
width: 36px;
|
||||
}
|
||||
.file-info {
|
||||
margin-left: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.file-name {
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.file-size {
|
||||
padding-top: 4px;
|
||||
color: #666666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.img {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
max-width: 220px;
|
||||
max-height: 220px;
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
overflow: hidden;
|
||||
.file-img {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
&.unknown {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
.dialog-foot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 4px;
|
||||
height: 21px;
|
||||
line-height: 1;
|
||||
.common-loading {
|
||||
margin: 0 2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
.time {
|
||||
color: #bbbbbb;
|
||||
font-size: 12px;
|
||||
}
|
||||
.done {
|
||||
display: none;
|
||||
margin-left: 4px;
|
||||
transform: scale(0.9);
|
||||
font-size: 12px;
|
||||
color: #87d068;
|
||||
}
|
||||
.percent {
|
||||
display: none;
|
||||
margin-left: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.loading {
|
||||
padding: 12px 0;
|
||||
justify-content: center;
|
||||
.common-loading {
|
||||
margin: 0;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
&.nothing {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #999999;
|
||||
}
|
||||
&.bottom {
|
||||
height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
&.self {
|
||||
flex-direction: row-reverse;
|
||||
.dialog-view {
|
||||
align-items: flex-end;
|
||||
margin: 0 8px 0 0;
|
||||
.dialog-content {
|
||||
color: #ffffff;
|
||||
background-color: #2d8cf0;
|
||||
border-radius: 6px 6px 0 6px;
|
||||
&.file {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
&.img {
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
.dialog-foot {
|
||||
.done {
|
||||
display: inline-block;
|
||||
}
|
||||
.percent {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding: 0 28px;
|
||||
margin-bottom: 20px;
|
||||
.dialog-newmsg {
|
||||
display: none;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
padding: 0 12px;
|
||||
margin-bottom: 20px;
|
||||
margin-right: 10px;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
z-index: 2;;
|
||||
}
|
||||
.dialog-input {
|
||||
background-color: #F4F5F7;
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
.ivu-input {
|
||||
border: 0;
|
||||
resize: none;
|
||||
background-color: transparent;
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-upload {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
&.newmsg {
|
||||
margin-top: -50px;
|
||||
.dialog-newmsg {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.drag-over {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 3;
|
||||
background-color: rgba(255, 255, 255, 0.78);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
border: 2px dashed #7b7b7b;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.drag-text {
|
||||
padding: 12px;
|
||||
font-size: 18px;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-wrapper-read-poptip-content {
|
||||
display: flex;
|
||||
position: relative;
|
||||
.read,
|
||||
.unread {
|
||||
flex: 1;
|
||||
max-height: 300px;
|
||||
overflow: auto;
|
||||
> li {
|
||||
list-style: none;
|
||||
margin-bottom: 12px;
|
||||
.common-avatar {
|
||||
width: 100%;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
&.read-title {
|
||||
> em {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.unread {
|
||||
> li {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background-color: #F4F4F5;
|
||||
}
|
||||
}
|
||||
50
resources/assets/sass/pages/components/task-add-simple.scss
vendored
Normal file
50
resources/assets/sass/pages/components/task-add-simple.scss
vendored
Normal file
@ -0,0 +1,50 @@
|
||||
.task-add-simple {
|
||||
.ivu-input-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.add-placeholder {
|
||||
cursor: pointer;
|
||||
color: #888888;
|
||||
.ivu-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
&:hover {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.priority {
|
||||
display: none;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: -3px;
|
||||
> ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> li {
|
||||
list-style: none;
|
||||
margin-right: 3px;
|
||||
.iconfont {
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-icon {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.ivu-input-wrapper {
|
||||
display: block;
|
||||
}
|
||||
.add-placeholder {
|
||||
display: none;
|
||||
}
|
||||
.priority {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -63,12 +63,14 @@
|
||||
border-radius: 6px;
|
||||
background-color: #f8f8f8;
|
||||
.enter-input {
|
||||
.ivu-input {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
&.empty {
|
||||
.ivu-input {
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -100,53 +102,3 @@
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
.task-add-simple {
|
||||
.ivu-input-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.add-placeholder {
|
||||
cursor: pointer;
|
||||
color: #888888;
|
||||
.ivu-icon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
&:hover {
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
.priority {
|
||||
display: none;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: -3px;
|
||||
> ul {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> li {
|
||||
list-style: none;
|
||||
margin-right: 3px;
|
||||
.iconfont {
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-icon {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
.ivu-input-wrapper {
|
||||
display: block;
|
||||
}
|
||||
.add-placeholder {
|
||||
display: none;
|
||||
}
|
||||
.priority {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
resources/assets/sass/pages/components/task-priority.scss
vendored
Normal file
9
resources/assets/sass/pages/components/task-priority.scss
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
.task-priority {
|
||||
display: inline-block;
|
||||
padding: 0 6px;
|
||||
border-radius: 3px;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
26
resources/assets/sass/pages/page-calendar.scss
vendored
Normal file
26
resources/assets/sass/pages/page-calendar.scss
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
.page-calendar {
|
||||
.nopage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.nopage-icon {
|
||||
background-color: #f4f5f7;
|
||||
padding: 20px;
|
||||
border-radius: 50%;
|
||||
.ivu-icon {
|
||||
color: #d1d8dd;
|
||||
font-size: 46px;
|
||||
}
|
||||
}
|
||||
.nopage-text {
|
||||
margin-top: 16px;
|
||||
color: #bec6cc;
|
||||
background-color: #f4f5f7;
|
||||
padding: 4px 15px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
resources/assets/sass/pages/page-dashboard.scss
vendored
Normal file
26
resources/assets/sass/pages/page-dashboard.scss
vendored
Normal file
@ -0,0 +1,26 @@
|
||||
.page-dashboard {
|
||||
.nopage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.nopage-icon {
|
||||
background-color: #f4f5f7;
|
||||
padding: 20px;
|
||||
border-radius: 50%;
|
||||
.ivu-icon {
|
||||
color: #d1d8dd;
|
||||
font-size: 46px;
|
||||
}
|
||||
}
|
||||
.nopage-text {
|
||||
margin-top: 16px;
|
||||
color: #bec6cc;
|
||||
background-color: #f4f5f7;
|
||||
padding: 4px 15px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
74
resources/assets/sass/pages/page-login.scss
vendored
Normal file
74
resources/assets/sass/pages/page-login.scss
vendored
Normal file
@ -0,0 +1,74 @@
|
||||
.page-login {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #F3F6FE;
|
||||
.login-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.login-logo {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: url("../statics/images/logo.svg") no-repeat center center;
|
||||
background-size: contain;
|
||||
}
|
||||
.login-box {
|
||||
margin-top: 32px;
|
||||
width: 450px;
|
||||
border-radius: 12px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 10px #e6ecfa;
|
||||
.login-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-top: 36px;
|
||||
}
|
||||
.login-subtitle {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-top: 12px;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
.login-input {
|
||||
margin: 40px;
|
||||
> * {
|
||||
margin-top: 26px;
|
||||
}
|
||||
.ivu-input {
|
||||
border-color: #f1f1f1;
|
||||
}
|
||||
.login-code {
|
||||
.ivu-input-group-prepend,
|
||||
.ivu-input-group-append {
|
||||
background: transparent;
|
||||
border-color: #f1f1f1;
|
||||
}
|
||||
.ivu-input {
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
.login-code-end {
|
||||
margin: -6px -7px;
|
||||
height: 38px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.login-forgot {
|
||||
color: #aaaaaa;
|
||||
margin-top: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
.manage-wrapper {
|
||||
.page-manage {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
252
resources/assets/sass/pages/page-messenger.scss
vendored
Normal file
252
resources/assets/sass/pages/page-messenger.scss
vendored
Normal file
@ -0,0 +1,252 @@
|
||||
.page-messenger {
|
||||
display: flex;
|
||||
.messenger-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.messenger-select {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 30%;
|
||||
min-width: 240px;
|
||||
max-width: 320px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
.messenger-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 54px;
|
||||
padding: 0 12px;
|
||||
flex-shrink: 0;
|
||||
.search-wrapper {
|
||||
flex: 1;
|
||||
background-color: #F7F7F7;
|
||||
padding: 0 8px;
|
||||
margin: 0 4px;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
.ivu-input {
|
||||
border-color: transparent;
|
||||
background-color: transparent;
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.messenger-list {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
> ul {
|
||||
&.dialog {
|
||||
> li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
padding: 0 12px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
&.active {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
&.loading {
|
||||
margin: 0;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.common-loading {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.user-avatar,
|
||||
.icon-avatar {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.icon-avatar {
|
||||
line-height: 46px;
|
||||
border-radius: 50%;
|
||||
font-size: 26px;
|
||||
background-color: #61B2F9;
|
||||
color: #ffffff;
|
||||
}
|
||||
.dialog-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 12px;
|
||||
.dialog-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 24px;
|
||||
> span {
|
||||
flex: 1;
|
||||
max-width: 130px;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
> i {
|
||||
margin-left: 8px;
|
||||
transform: scale(0.9);
|
||||
font-size: 12px;
|
||||
color: #87d068;
|
||||
}
|
||||
> em {
|
||||
margin-left: 8px;
|
||||
font-style: normal;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.dialog-text {
|
||||
max-width: 170px;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.dialog-num {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 42px;
|
||||
font-size: 12px;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.contacts {
|
||||
> li {
|
||||
list-style: none;
|
||||
margin-left: 24px;
|
||||
position: relative;
|
||||
.label {
|
||||
padding-left: 4px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border-bottom: 1px solid #efefef;
|
||||
}
|
||||
&.loading {
|
||||
margin: 0;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.common-loading {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
> ul {
|
||||
> li {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 52px;
|
||||
cursor: pointer;
|
||||
.avatar {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
.nickname {
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.messenger-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 54px;
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid #f2f2f2;
|
||||
> i {
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
margin: 0 24px;
|
||||
color: #aaaaaa;
|
||||
opacity: 0.9;
|
||||
&.active {
|
||||
opacity: 1;
|
||||
color: #2d8cf0;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.messenger-msg {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.dialog-no {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.dialog-no-icon {
|
||||
background-color: #f4f5f7;
|
||||
padding: 20px;
|
||||
border-radius: 50%;
|
||||
.ivu-icon {
|
||||
color: #d1d8dd;
|
||||
font-size: 46px;
|
||||
}
|
||||
}
|
||||
.dialog-no-text {
|
||||
margin-top: 16px;
|
||||
color: #bec6cc;
|
||||
background-color: #f4f5f7;
|
||||
padding: 4px 15px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
19
resources/assets/sass/pages/page-project.scss
vendored
Normal file
19
resources/assets/sass/pages/page-project.scss
vendored
Normal file
@ -0,0 +1,19 @@
|
||||
.page-project {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
.project-list {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
.project-dialog {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 35%;
|
||||
min-width: 320px;
|
||||
max-width: 520px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
126
resources/assets/sass/pages/page-setting.scss
vendored
Executable file
126
resources/assets/sass/pages/page-setting.scss
vendored
Executable file
@ -0,0 +1,126 @@
|
||||
.page-setting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.setting-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 32px 32px 16px;
|
||||
border-bottom: 1px solid #F4F4F5;
|
||||
.setting-titbox {
|
||||
flex: 1;
|
||||
margin-bottom: 16px;
|
||||
.setting-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> h1 {
|
||||
color: #333333;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting-box {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
display: flex;
|
||||
margin-bottom: 16px;
|
||||
.setting-menu {
|
||||
width: 200px;
|
||||
flex-shrink: 0;
|
||||
border-right: 1px solid #F4F4F5;
|
||||
overflow: auto;
|
||||
> ul {
|
||||
padding: 12px 0 0 32px;
|
||||
> li {
|
||||
cursor: pointer;
|
||||
color: #6C7D8C;
|
||||
list-style: none;
|
||||
line-height: 42px;
|
||||
padding: 0 20px;
|
||||
margin: 5px 0;
|
||||
position: relative;
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.setting-content-title {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
padding: 12px 32px;
|
||||
}
|
||||
.setting-content-view {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
.setting-router-view {
|
||||
padding: 24px 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting-item {
|
||||
.ivu-input,
|
||||
.ivu-select-selection {
|
||||
max-width: 460px;
|
||||
}
|
||||
.form-tip {
|
||||
color: #999999;
|
||||
}
|
||||
.setting-color {
|
||||
max-width: 600px;
|
||||
margin-bottom: 12px;
|
||||
> div {
|
||||
text-align: center;
|
||||
padding-right: 12px;
|
||||
&:first-child {
|
||||
text-align: left;
|
||||
}
|
||||
&:last-child {
|
||||
padding-right: 0;
|
||||
width: 60px;
|
||||
flex: auto;
|
||||
flex-shrink: 0;
|
||||
max-width: 60px;
|
||||
}
|
||||
.ivu-color-picker {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.information {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.setting-footer {
|
||||
> button {
|
||||
height: 34px;
|
||||
line-height: 32px;
|
||||
min-width: 94px;
|
||||
}
|
||||
}
|
||||
&.submit {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.setting-footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
padding: 16px 24px 0;
|
||||
border-top: 1px solid #F4F4F5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user