.page-file { width: 100%; height: 100%; display: flex; flex-direction: column; .file-wrapper { flex: 1; height: 0; display: flex; flex-direction: column; .file-head { display: flex; align-items: center; padding-bottom: 16px; margin: 32px 32px 16px; border-bottom: 1px solid #F4F4F5; .file-nav { flex: 1; display: flex; align-items: center; > h1 { color: #333333; font-size: 28px; font-weight: 600; } } .file-search { flex-shrink: 0; margin-left: 22px; cursor: pointer; width: 140px; transition: width 0.3s; &.has-value { width: 180px; } } .file-add { flex-shrink: 0; margin-left: 22px; cursor: pointer; .taskfont { font-size: 18px; } } } .file-no { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-bottom: 5%; opacity: 0.8; > i { font-size: 64px; } > p { margin-top: 18px; font-size: 14px; font-weight: 500; line-height: 1; } } .file-navigator { display: flex; align-items: center; height: 24px; line-height: 24px; margin: 0 32px 0; > ul { display: flex; align-items: center; overflow: auto; > li { display: flex; list-style: none; align-items: center; padding-left: 8px; font-size: 14px; color: $primary-color; cursor: pointer; &:last-child { color: #515a6e; cursor: default; } &+li:before { content: "\203a"; margin-top: -2px; padding-right: 8px; color: #515a6e; line-height: 1; font-size: 16px; font-weight: 500; font-family: system-ui, sans-serif; } .taskfont { padding-right: 2px; } > span { display: inline-block; max-width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } } .nav-load { margin-left: 4px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; .common-loading { width: 12px; height: 12px; } } .ivu-btn { font-size: 12px; margin-left: 12px; } .file-shear { display: flex; align-items: center; > span { padding-right: 3px; } > em { display: inline-block; max-width: 120px; font-style: normal; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .flex-full { flex: 1; } .switch-button { display: flex; align-items: center; background-color: #ffffff; border-radius: 6px; position: relative; transition: box-shadow 0.2s; &:hover { box-shadow: 0 0 10px #e6ecfa; } &:before { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: 0; color: $primary-color; border-radius: 6px; border: 1px solid $primary-color; background-color: rgba($primary-color, 0.1); transition: left 0.2s; } > div { z-index: 1; width: 32px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; color: #515a6e; > i { font-size: 17px; } &:first-child { color: $primary-color; } } &.table { &:before { left: 50%; } > div:first-child { color: #515a6e; } > div:last-child { color: $primary-color; } } } } .file-table { flex: 1; cursor: default; margin: 16px 32px 32px; .ivu-table { &:before { display: none; } .ivu-table-tip { opacity: 0.8; span { font-size: 14px; font-weight: 500; line-height: 1.8; &:before { display: block; content: "\e60b"; font-family: "taskfont", "serif" !important; font-size: 64px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; } } } } .file-name { display: flex; align-items: center; position: relative; padding-right: 26px; &:before { flex-shrink: 0; content: ""; width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; margin-right: 8px; } &.folder:before { background-image: url("../images/file/folder.svg"); } &.document:before { background-image: url("../images/file/document.svg"); } &.mind:before { background-image: url("../images/file/mind.svg"); } &.sheet:before { background-image: url("../images/file/sheet.svg"); } &.flow:before { background-image: url("../images/file/flow.svg"); } } } .file-list { flex: 1; padding: 0 20px 20px; margin-top: 16px; overflow: auto; > ul { margin-top: -12px; > li { list-style: none; float: left; margin: 12px; width: 100px; height: 110px; position: relative; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer; .file-input { margin: 0 4px 4px; position: relative; input { margin: 0; padding: 1px 5px; font-size: 13px; } .file-load { position: absolute; top: 0; right: 6px; bottom: 0; display: flex; .common-loading { width: 10px; height: 10px; } } } .file-name { display: block; width: 100%; height: 20px; line-height: 20px; color: #515a6e; font-size: 12px; text-align: center; margin-bottom: 5px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .file-menu { opacity: 0; position: absolute; top: 0; right: 0; transition: opacity 0.2s; display: flex; .ivu-icon { font-size: 16px; color: #aaaaaa; transition: color 0.2s; padding: 2px 5px; &:hover { color: #515a6e; } } } .file-icon { display: inline-block; width: 64px; height: 64px; background-repeat: no-repeat; background-size: contain; margin-top: 12px; position: relative; .taskfont { position: absolute; right: 10px; bottom: -1px; font-size: 16px; color: #ffffff; } } &.shear { opacity: 0.38; } &.folder .file-icon { background-image: url("../images/file/folder.svg"); .taskfont { right: 7px; bottom: 3px; } } &.document .file-icon { background-image: url("../images/file/document.svg"); } &.mind .file-icon { background-image: url("../images/file/mind.svg"); } &.sheet .file-icon { background-image: url("../images/file/sheet.svg"); } &.flow .file-icon { background-image: url("../images/file/flow.svg"); } &:hover { background-color: #f4f5f7; .file-menu { opacity: 1; } } } } } } } .page-file-dropdown-menu { .file-item { display: flex; align-items: center; position: relative; &:before { flex-shrink: 0; content: ""; width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; margin-right: 8px; } &.folder:before { background-image: url("../images/file/folder.svg"); } &.document:before { background-image: url("../images/file/document.svg"); } &.mind:before { background-image: url("../images/file/mind.svg"); } &.sheet:before { background-image: url("../images/file/sheet.svg"); } &.flow:before { background-image: url("../images/file/flow.svg"); } } }