@cmstops/pro-compo
Version:
[物料平台文档中心](https://arco.design/docs/material/guide)
223 lines (191 loc) • 5.45 kB
text/less
.simple-resources {
.arco-scrollbar {
height: 100%;
.dialog-media-selection-scroll {
height: 100%;
overflow: auto;
.file-wrap {
.folder-list {
display: flex;
flex-wrap: wrap;
padding-left: 20px;
.folder-item {
width: 20%;
cursor: pointer;
.wrap {
margin: 0 20px 10px 0;
background: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
&:hover,
&.active {
background: #ecf2ff;
.thumb {
border-color: #4886ff;
transition: ease-out 0.3s;
}
h4 {
color: #1a67d2;
}
}
.thumb {
height: 46px;
overflow: hidden;
font-size: 0;
background: url('../assets/selection/folder.png') no-repeat 13px
center;
background-size: 17px auto;
border: solid 1px transparent;
border-radius: 4px;
}
h4 {
margin: 0;
padding-left: 43px;
overflow: hidden;
color: #000;
font-weight: normal;
font-size: 14px;
line-height: 42px;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: normal;
opacity: 0.85;
}
}
}
.folder-more-button {
width: 20%;
overflow: hidden;
.folder-more-wrap {
box-sizing: border-box;
height: 52px;
margin-right: 20px;
padding: 14px 16px;
line-height: 24px;
background: #f7f8fa;
//border: 1px solid #ebeef5;
border: 1px solid transparent;
border-radius: 4px;
&:hover {
color: #165dff;
background: #f2f3f5;
border: 1px solid #4886ff;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
cursor: pointer;
}
}
}
}
.file-list {
display: flex;
flex-wrap: wrap;
padding-left: 20px;
.item {
position: relative;
width: 20%;
overflow: hidden;
cursor: pointer;
.move-action {
opacity: 0.5;
}
.shadow-wrap {
position: relative;
margin: 0 20px 18px 0;
overflow: hidden;
background: #fff;
border: 1px solid #ebeef5;
border-radius: 4px;
&:hover {
border: 1px solid #4886ff;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
h4 {
//color: #1a67d2;
}
}
.transcoding-in-progress {
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: floralwhite;
background: rgba(0, 0, 0, 0.3);
}
.thumb-wrap {
position: relative;
width: 100%;
background: url('../assets/selection/picBg.png');
}
h4,
p {
margin-top: 4px;
margin-bottom: 2px;
padding: 0 10px;
overflow: hidden;
color: rgba(0, 0, 0, 0.85);
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
word-wrap: normal;
i,
svg {
margin-right: 4px;
color: #e75258;
font-size: 16px;
vertical-align: middle;
}
svg {
margin-right: 4px;
font-size: 16px;
vertical-align: middle;
}
span {
vertical-align: middle;
}
}
p {
margin-bottom: 4px;
font-weight: normal;
font-size: 12px;
line-height: 1em;
opacity: 0.65;
}
}
}
&::after {
height: 50px;
}
}
.load_more_title {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 40px;
.loadmore_tips,
.nomore_tips {
color: #949494;
}
}
.null-file {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -70%);
.null-pic {
display: block;
width: 30%;
margin: 20px auto;
}
p {
color: #a2a3a7;
font-size: 14px;
text-align: center;
}
}
}
}
}
}