适配Safari,修改菜单栏样式

This commit is contained in:
jmal 2020-09-20 21:09:05 +08:00
parent 51d003b28e
commit ab987e71e3
17 changed files with 123 additions and 59 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

View File

@ -3,7 +3,7 @@
<div class="share-empty">
<div class="share-empty-icon">
<img v-if="emptyShare" src="~@/assets/img/pic_sharing_empty.png" ref="image" style="max-width: 100%;" alt="">
<img v-if="!emptyShare" src="~@/assets/img/emptyfile_intro.png" ref="image" style="max-width: 100%;" alt="">
<img v-if="!emptyShare" src="~@/assets/img/emptyfile_intro.jpeg" ref="image" style="max-width: 100%;" alt="">
</div>
<p class="share-empty-status">
{{emptyStatus}}

View File

@ -82,7 +82,7 @@
<button-upload slot="reference" :name="''" @click.native="upload" style="margin-right: 5px"></button-upload>
</el-popover>
<el-input placeholder="搜索您的文件" v-model="searchFileName" :clearable="true" @keyup.enter.native="searchFile(searchFileName)">
<el-input placeholder="搜索" v-model="searchFileName" :clearable="true" @keyup.enter.native="searchFile(searchFileName)">
<el-button slot="prepend" @click="searchFile(searchFileName)">
<svg-icon icon-class="search" style="font-size: 22px"/>
</el-button>
@ -2818,6 +2818,9 @@
/*overflow: hidden;*/
/*white-space: nowrap;*/
/*text-overflow: ellipsis;*/
.dashboard-container {
min-width: 900px;
}
/deep/.app-wrapper {
overflow-y: hidden;
}

View File

@ -124,7 +124,7 @@
cursor: pointer;
border: 0;
padding: 8px 20px 8px 20px;
border-radius: 9px;
border-radius: 4px;
line-height: 24px;
font-family: inherit;
font-weight: 600;

View File

@ -95,7 +95,7 @@ export default {
}
.newFileMenu li:hover {
cursor: pointer;
border-radius: 5px;
border-radius: 4px;
background-color: #409eff14;
}
.newFileMenu li > .menuitem {

View File

@ -399,6 +399,7 @@
that.dialogWidth = dialogWidth + moveX
that.editorWidth = editorWidth + moveX
that.editorHieght = editorHieght + (endY - startY)
that.loadConterSize()
}
}
// 鼠标松开事件
@ -547,7 +548,6 @@
this.loadEditorSize()
},
checkReadOnly(fileUserId){
console.log('readOnly',this.options.readOnly)
if(this.$store.state.user.token && this.$store.state.user.userId === fileUserId){
this.options.readOnly = false
}
@ -555,6 +555,7 @@
this.editorWidth += this.contentsWidth
this.contentsHide = true
}
console.log('readOnly',this.options.readOnly)
},
loadEditorSize(){
this.dialogWidth = document.body.clientWidth * this.dialogWidthPercent
@ -564,6 +565,14 @@
this.editorWidth = this.dialogWidth - this.contentsWidth
}
this.editorHieght = document.body.clientHeight * this.dialogWidthPercent - 76
this.loadConterSize()
},
loadConterSize(){
let conter = document.querySelector('.editor-resize .editor-resize-conter');
if(conter){
console.log()
conter.style.marginTop = ((this.editorHieght+26)/2 - conter.clientHeight/2) + 'px'
}
},
handleClose(done) {
if(this.isShowUpdateBtn){
@ -920,6 +929,13 @@
border-top: unset!important;
display: inline-flex;
.monaco-editor .minimap-shadow-visible {
position: absolute;
left: 0px;
width: 6px;
box-shadow: -2px 0px 5px #dddddd;
}
.el-tabs__header {
margin: 0 0 0;
.el-tabs__item {
@ -1042,6 +1058,10 @@
.el-button--small {
padding: 9px 10px;
}
.el-button-group {
display: unset;
vertical-align: middle;
}
}
}
@ -1060,7 +1080,7 @@
width: 14px;
position: absolute;
z-index: 999;
top: 48%;
// top: 48%;
background: #e2e2e2;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
@ -1099,6 +1119,10 @@
background: #202020;
.monaco-editor .minimap-shadow-visible {
box-shadow: -2px 0px 5px #000000;
}
.editor-resize {
background-color: #181818;
.editor-resize-conter{

View File

@ -72,7 +72,6 @@ export default {
& .sidebar-title {
display: inline-block;
margin: 0;
color: #fff;
font-weight: 600;
line-height: 50px;
font-size: 14px;

View File

@ -124,4 +124,7 @@ export default {
.mobile .fixed-header {
width: 100%;
}
>>> .sidebar-logo-container {
background-color:unset;
}
</style>

View File

@ -73,6 +73,32 @@ export const constantRoutes = [
]
},
{
path: '/favorite',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/favorite/index'),
meta: { title: '收藏', icon: 'Favoritestarrate' }
}
]
},
{
path: '/share',
component: Layout,
children: [
{
path: '',
name: 'share',
component: () => import('@/views/share/index'),
meta: { title: '分享', icon: 'gongxiangzhongxin' }
}
]
},
{
path: '/audio',
component: Layout,
@ -126,19 +152,6 @@ export const constantRoutes = [
]
},
{
path: '/favorite',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/favorite/index'),
meta: { title: '收藏', icon: 'Favoritestarrate' }
}
]
},
{
path: '/setting',
component: Layout,
@ -153,19 +166,6 @@ export const constantRoutes = [
]
},
{
path: '/share',
component: Layout,
children: [
{
path: '',
name: 'share',
component: () => import('@/views/share/index'),
meta: { title: '分享', icon: 'gongxiangzhongxin' }
}
]
},
// {
// path: '/demo',
// component: Layout,

View File

@ -9,6 +9,11 @@
}
}
>>>.svg-icon {
margin-top: 0.05em;
// vertical-align: unset;
}
.redirect {
color: #97a8be;
}
@ -78,9 +83,11 @@
top: 0;
margin-top: 0.54rem;
}
/deep/ .cell /deep/ .el-button {
padding: 8px 16px;
margin-left: 10px;
/deep/ .cell {
.el-button {
padding: 6px 10px;
margin-left: 20px;
}
}
/deep/ .el-checkbox {
cursor: default;
@ -190,7 +197,7 @@
display: flex;
justify-content: flex-end;
.el-input {
width: 60%;
width: 235px;
}
.vmode{
padding: 5px 10px;

View File

@ -66,11 +66,23 @@
// menu hover
.submenu-title-noDropdown,
.el-submenu__title {
margin: 2px 5px;
height: 42px;
line-height: 42px;
&:hover {
background-color: $menuHover !important;
border-radius: 4px;
margin: 2px 5px 2px 5px;
}
}
.el-menu-item.is-active {
color: #409EFF;
background-color: #d9d9d9 !important;
border-radius: 4px;
margin: 2px 5px 2px 5px;
}
.is-active>.el-submenu__title {
color: $subMenuActiveText !important;
}
@ -103,7 +115,7 @@
padding: 0 !important;
.svg-icon {
margin-left: 20px;
margin-left: 15px;
}
}
}

View File

@ -1,10 +1,10 @@
// sidebar
$menuText:#bfcbd9;
$menuText:#434343;
$menuActiveText:#409EFF;
$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
$menuBg:#f5f5f5;
$menuHover:#d9d9d9;
$subMenuBg:#1f2d3d;
$subMenuHover:#001528;

View File

@ -6,7 +6,7 @@
:defaultGrid="false"
:sortable="sortable"
:queryCondition="queryCondition"
emptyStatus="还没有视频文件呢~"
emptyStatus="还没有视频呢~"
>
</show-file>
</div>

View File

@ -100,7 +100,17 @@
</template>
</el-table-column>
<el-table-column v-if="index === 2" :key="index" :show-overflow-tooltip="true" max-width="200" :index="index" :prop="item.name" :label="item.label" :sortable="item.sortable" @click.stop="fileClick(scope.row)">
<el-table-column
v-if="index === 2"
:key="index"
:show-overflow-tooltip="true"
max-width="200"
:index="index"
:prop="item.name"
:label="item.label"
:sortable="item.sortable"
@click.stop="fileClick(scope.row)"
>
<template slot-scope="scope">
<el-col v-if="scope.row.index === editingIndex" :span="10">
<el-input v-focus v-model="renameFileName" placeholder="" size="small" :clearable="true" @keyup.enter.native="rowRename(renameFileName, scope.row)">
@ -389,7 +399,7 @@
const that = this
window.onresize = function temp() {
that.clientHeight = document.documentElement.clientHeight - 265
that.loadClientHeight()
}
// 加载布局
@ -403,7 +413,7 @@
}
},
destroyed() {
window.removeEventListener('popstate', this.goBack, false);
window.removeEventListener('popstate', this.goBack, false)
},
directives: {
// 注册一个局部的自定义指令 v-focus
@ -433,6 +443,9 @@
}
},
methods: {
loadClientHeight(){
this.clientHeight = document.documentElement.clientHeight - 200
},
gridItemHover(item,index) {
this.gridHoverItemIndex = index;
this.gridHoverIntermediate = index;
@ -523,7 +536,7 @@
}).then(res => {
this.isLoading = false
this.fileList = res.data
this.clientHeight = document.documentElement.clientHeight - 265
this.loadClientHeight()
this.listModeSearch = true
this.pagination.fileId = fileId
this.pagination['total'] = res.count
@ -549,7 +562,7 @@
this.fileList.map((item,index) => {
item.index = index
})
this.clientHeight = document.documentElement.clientHeight - 265
this.loadClientHeight()
this.listModeSearch = false
this.listModeSearchOpenDir = false
this.pagination['total'] = res.count
@ -926,15 +939,15 @@
@import "src/styles/home-index";
/*.el-breadcrumb {*/
/*margin: 50px;*/
.dashboard-container {
min-width: 1024px;
}
.header-location {
display: block;
height: 1px;
width: 100%;
margin: 0px 0;
}
>>>.el-table .cell {
overflow: inherit;
}
.searchClass[data-v-92fa2b3e] {
padding: 3px;

View File

@ -856,12 +856,12 @@
this.imagePreviewRow = row
return
}
if(suffix.simText.includes(row.suffix)){
// if(suffix.simText.includes(row.suffix)){
// 文本文件
this.textPreviewRow = row
this.textPreviewVisible = true
return
}
// this.textPreviewRow = row
// this.textPreviewVisible = true
// return
// }
if(row.contentType.indexOf('video') > -1){
// 视频文件
this.videoPreviewVisible = true
@ -896,9 +896,9 @@
margin: 10px 5px 10px 5px;
}
>>>.el-table .cell {
overflow: inherit;
}
// >>>.el-table .cell {
// overflow: inherit;
// }
>>> .el-table {
margin: 0 0 0;

View File

@ -82,7 +82,7 @@
>
<template slot="header">
<div v-if="item.label === ''" class="cancel-share-header">
<span class="header-font">{{sumFileAndFolder}}</span><el-button icon="el-icon-my-export" @click="cancelShare(false)">取消分享</el-button>
<span class="header-font">{{sumFileAndFolder}}</span><el-button icon="el-icon-my-export" size="small" @click="cancelShare(false)">取消分享</el-button>
</div>
</template>
<template slot-scope="scope">
@ -509,6 +509,9 @@
<style lang="scss" scoped>
@import "src/styles/home-index";
.container {
min-width: 1024px;
}
.cancel-share-header {
margin-left: -10px;
}