样式: 侧栏分隔线改border防被标签栏覆盖,删全屏按钮与下拉箭头,头像恢复34px描边光晕版
CI/CD Deploy (Web) / 构建前端镜像并部署 (push) Successful in 21s
CI/CD Deploy (Web) / 构建前端镜像并部署 (push) Successful in 21s
This commit is contained in:
@@ -1,84 +0,0 @@
|
||||
<template>
|
||||
<div v-if="showFullScreenBtn" class="full-screen-btn-con">
|
||||
<Tooltip :content="value ? '退出全屏' : '全屏'" placement="bottom">
|
||||
<Icon @click.native="handleChange" :type="value ? 'md-contract' : 'md-expand'" :size="23"></Icon>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Fullscreen',
|
||||
computed: {
|
||||
showFullScreenBtn () {
|
||||
return window.navigator.userAgent.indexOf('MSIE') < 0
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFullscreen () {
|
||||
let main = document.body
|
||||
if (this.value) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen()
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen()
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen()
|
||||
}
|
||||
} else {
|
||||
if (main.requestFullscreen) {
|
||||
main.requestFullscreen()
|
||||
} else if (main.mozRequestFullScreen) {
|
||||
main.mozRequestFullScreen()
|
||||
} else if (main.webkitRequestFullScreen) {
|
||||
main.webkitRequestFullScreen()
|
||||
} else if (main.msRequestFullscreen) {
|
||||
main.msRequestFullscreen()
|
||||
}
|
||||
}
|
||||
},
|
||||
handleChange () {
|
||||
this.handleFullscreen()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
let isFullscreen = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
|
||||
isFullscreen = !!isFullscreen
|
||||
document.addEventListener('fullscreenchange', () => {
|
||||
this.$emit('input', !this.value)
|
||||
this.$emit('on-change', !this.value)
|
||||
})
|
||||
document.addEventListener('mozfullscreenchange', () => {
|
||||
this.$emit('input', !this.value)
|
||||
this.$emit('on-change', !this.value)
|
||||
})
|
||||
document.addEventListener('webkitfullscreenchange', () => {
|
||||
this.$emit('input', !this.value)
|
||||
this.$emit('on-change', !this.value)
|
||||
})
|
||||
document.addEventListener('msfullscreenchange', () => {
|
||||
this.$emit('input', !this.value)
|
||||
this.$emit('on-change', !this.value)
|
||||
})
|
||||
this.$emit('input', isFullscreen)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.full-screen-btn-con .ivu-tooltip-rel{
|
||||
height: 64px;
|
||||
line-height: 56px;
|
||||
i{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,2 +0,0 @@
|
||||
import Fullscreen from './fullscreen.vue'
|
||||
export default Fullscreen
|
||||
@@ -3,34 +3,31 @@
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 4px 8px;
|
||||
border-radius: 18px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
transition: background .18s;
|
||||
&:hover{
|
||||
background: rgba(79, 110, 247, .08);
|
||||
}
|
||||
// 头像:小尺寸、无描边无光晕,安静融入顶栏
|
||||
// 头像:白色描边 + 主色光晕,悬浮轻微放大
|
||||
.user-avatar{
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 13px;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
font-size: 16px;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(79, 110, 247, .25);
|
||||
transition: transform .15s;
|
||||
}
|
||||
// 姓名与下拉箭头:常规字重、浅色,视觉减重
|
||||
&:hover .user-avatar{
|
||||
transform: scale(1.06);
|
||||
}
|
||||
// 姓名:常规字重,与头像平衡
|
||||
.user-nick{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #515a6e;
|
||||
margin: 0 2px 0 8px;
|
||||
font-weight: 500;
|
||||
color: #3d4a66;
|
||||
margin-left: 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.user-arrow{
|
||||
vertical-align: middle;
|
||||
color: #a3b0c9;
|
||||
transition: transform .18s;
|
||||
}
|
||||
&:hover .user-arrow{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
<Dropdown @on-click="handleClick">
|
||||
<Avatar :key="userAvator" :src="userAvator || undefined" class="user-avatar" :style="avatarStyle">{{ avatarText }}</Avatar>
|
||||
<span class="user-nick">{{ nickname }}</span>
|
||||
<Icon :size="18" class="user-arrow" type="md-arrow-dropdown"></Icon>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem name="personal-center">个人中心</DropdownItem>
|
||||
<DropdownItem name="logout" style="color: #ed4014" divided>退出登录</DropdownItem>
|
||||
|
||||
@@ -58,7 +58,8 @@
|
||||
.left-sider{
|
||||
// 浅灰蓝侧边栏:比内容区深半档,形成层次但不沉重
|
||||
background: #f0f3fa;
|
||||
box-shadow: 1px 0 0 #e2e8f5;
|
||||
// 分隔线用 border 而非 box-shadow:阴影会被右侧内容区(标签栏等)背景盖住
|
||||
border-right: 1px solid #e2e8f5;
|
||||
.ivu-layout-sider-children{
|
||||
overflow-y: scroll;
|
||||
margin-right: -18px;
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
<header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
|
||||
<user :nickname="nickname" :user-avator="userAvator"/>
|
||||
<error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store>
|
||||
<fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
|
||||
</header-bar>
|
||||
</Header>
|
||||
<Content class="main-content-con">
|
||||
@@ -37,7 +36,6 @@ import SideMenu from './components/side-menu'
|
||||
import HeaderBar from './components/header-bar'
|
||||
import TagsNav from './components/tags-nav'
|
||||
import User from './components/user'
|
||||
import Fullscreen from './components/fullscreen'
|
||||
import ErrorStore from './components/error-store'
|
||||
import { mapMutations, mapActions, mapGetters } from 'vuex'
|
||||
import { getNewTagList, getNextRoute, routeEqual } from '@/libs/util'
|
||||
@@ -48,14 +46,12 @@ export default {
|
||||
SideMenu,
|
||||
HeaderBar,
|
||||
TagsNav,
|
||||
Fullscreen,
|
||||
ErrorStore,
|
||||
User
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
collapsed: false,
|
||||
isFullscreen: false
|
||||
collapsed: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
Reference in New Issue
Block a user