parent
2a53db1324
commit
f82f538636
@ -0,0 +1,66 @@ |
|||||||
|
$n: 9; //和items.length 相同 |
||||||
|
$t: .1s; |
||||||
|
.share-dropdown-menu { |
||||||
|
width: 250px; |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
|
||||||
|
&-title { |
||||||
|
width: 100%; |
||||||
|
display: block; |
||||||
|
cursor: pointer; |
||||||
|
background: black; |
||||||
|
color: white; |
||||||
|
height: 60px; |
||||||
|
line-height: 60px; |
||||||
|
font-size: 20px; |
||||||
|
text-align: center; |
||||||
|
z-index: 2; |
||||||
|
transform: translate3d(0, 0, 0); |
||||||
|
} |
||||||
|
|
||||||
|
&-wrapper { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
&-item { |
||||||
|
text-align: center; |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
background: #e0e0e0; |
||||||
|
line-height: 60px; |
||||||
|
height: 60px; |
||||||
|
cursor: pointer; |
||||||
|
font-size: 20px; |
||||||
|
opacity: 1; |
||||||
|
transition: transform 0.28s ease; |
||||||
|
|
||||||
|
&:hover { |
||||||
|
background: black; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
@for $i from 1 through $n { |
||||||
|
&:nth-of-type(#{$i}) { |
||||||
|
z-index: -1; |
||||||
|
transition-delay: $i*$t; |
||||||
|
transform: translate3d(0, -60px, 0); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&.active { |
||||||
|
.share-dropdown-menu-wrapper { |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.share-dropdown-menu-item { |
||||||
|
@for $i from 1 through $n { |
||||||
|
&:nth-of-type(#{$i}) { |
||||||
|
transition-delay: ($n - $i)*$t; |
||||||
|
transform: translate3d(0, ($i - 1)*60px, 0); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,47 @@ |
|||||||
|
.ant-empty { |
||||||
|
padding: 20px; |
||||||
|
margin: 0 8px; |
||||||
|
font-size: 14px; |
||||||
|
line-height: 22px; |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
&-image { |
||||||
|
height: 100px; |
||||||
|
margin-bottom: 8px; |
||||||
|
|
||||||
|
img { |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
svg { |
||||||
|
height: 100%; |
||||||
|
margin: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-description { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
&-footer { |
||||||
|
margin-top: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
&-normal { |
||||||
|
margin: 32px 0; |
||||||
|
color: rgba(0, 0, 0, .25); |
||||||
|
|
||||||
|
.ant-empty-image { |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
&-small { |
||||||
|
margin: 8px 0; |
||||||
|
color: rgba(0, 0, 0, .25); |
||||||
|
|
||||||
|
.ant-empty-image { |
||||||
|
height: 35px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,69 @@ |
|||||||
|
.guide-highlighted-element { |
||||||
|
z-index: 1002 !important; |
||||||
|
} |
||||||
|
|
||||||
|
.guide-position-relative { |
||||||
|
position: relative !important; |
||||||
|
} |
||||||
|
|
||||||
|
.guide-fix-stacking { |
||||||
|
z-index: auto !important; |
||||||
|
opacity: 1.0 !important; |
||||||
|
transform: none !important; |
||||||
|
filter: none !important; |
||||||
|
perspective: none !important; |
||||||
|
transform-style: flat !important; |
||||||
|
will-change: unset !important; |
||||||
|
} |
||||||
|
|
||||||
|
.guide-popover-action { |
||||||
|
position: relative; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.action-close { |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
|
||||||
|
.action-step { |
||||||
|
display: inline-block; |
||||||
|
right: 0; |
||||||
|
position: absolute; |
||||||
|
|
||||||
|
.prev-btn { |
||||||
|
position: absolute; |
||||||
|
right: 90px; |
||||||
|
} |
||||||
|
|
||||||
|
.next-btn { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
#guide-stage { |
||||||
|
position: absolute; |
||||||
|
background: white; |
||||||
|
transition: all 0.3s; |
||||||
|
z-index: 1001 !important; |
||||||
|
border-radius: 2px; |
||||||
|
/*background: transparent !important; |
||||||
|
outline: 5000px solid rgba(0, 0, 0, 0.75);*/ |
||||||
|
} |
||||||
|
|
||||||
|
#guide-overlay { |
||||||
|
background: black; |
||||||
|
position: fixed; |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
bottom: 0; |
||||||
|
right: 0; |
||||||
|
opacity: 0.75; |
||||||
|
z-index: 1000 !important; |
||||||
|
} |
||||||
|
|
||||||
|
#guide-highlight-element-cover { |
||||||
|
position: absolute; |
||||||
|
background: transparent !important; |
||||||
|
z-index: 1003 !important; |
||||||
|
} |
||||||
@ -0,0 +1,36 @@ |
|||||||
|
.liner-progress { |
||||||
|
position: relative; |
||||||
|
height: 4px; |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
margin: 0; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.liner-progress-background { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
background-color: $--color-primary; |
||||||
|
opacity: .3; |
||||||
|
} |
||||||
|
|
||||||
|
.linear-progress-indeterminate { |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
bottom: 0; |
||||||
|
width: 40%; |
||||||
|
background-color: $--color-primary; |
||||||
|
animation: linear-progress-animate .84s cubic-bezier(.445, .05, .55, .95) infinite; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes linear-progress-animate { |
||||||
|
0% { |
||||||
|
left: -40%; |
||||||
|
} |
||||||
|
100% { |
||||||
|
left: 100%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -1,85 +0,0 @@ |
|||||||
<template> |
|
||||||
<div @click="change"> |
|
||||||
<i :class="icon" class="navbar-icon"/> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script> |
|
||||||
//参考iview-admin https://admin.iviewui.com |
|
||||||
export default { |
|
||||||
name: "Fullscreen", |
|
||||||
props: { |
|
||||||
value: { |
|
||||||
type: Boolean, |
|
||||||
default: false |
|
||||||
}, |
|
||||||
events: { |
|
||||||
type: Array, |
|
||||||
default: () => ['fullscreenchange', 'mozfullscreenchange', 'webkitfullscreenchange', 'msfullscreenchange'] |
|
||||||
} |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
icon() { |
|
||||||
return this.value ? 'el-icon-aim' : 'el-icon-full-screen' |
|
||||||
} |
|
||||||
}, |
|
||||||
methods: { |
|
||||||
change() { |
|
||||||
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() |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
emit() { |
|
||||||
this.$emit('input', !this.value) |
|
||||||
this.$emit('on-change', !this.value) |
|
||||||
}, |
|
||||||
bindEvent() { |
|
||||||
this.events.forEach(e => document.addEventListener(e, this.emit)) |
|
||||||
}, |
|
||||||
removeEvent() { |
|
||||||
this.events.forEach(e => document.removeEventListener(e, this.emit)) |
|
||||||
} |
|
||||||
}, |
|
||||||
mounted() { |
|
||||||
let isFullscreen = |
|
||||||
document.fullscreenElement |
|
||||||
|| document.mozFullScreenElement |
|
||||||
|| document.webkitFullscreenElement |
|
||||||
|| document.fullScreen |
|
||||||
|| document.mozFullScreen |
|
||||||
|| document.webkitIsFullScreen |
|
||||||
isFullscreen = !!isFullscreen |
|
||||||
this.bindEvent() |
|
||||||
this.$emit('input', isFullscreen) |
|
||||||
}, |
|
||||||
beforeDestroy() { |
|
||||||
this.removeEvent() |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
@ -0,0 +1,52 @@ |
|||||||
|
.navbar { |
||||||
|
height: $nav-height; |
||||||
|
overflow: hidden; |
||||||
|
position: relative; |
||||||
|
background: #fff; |
||||||
|
box-shadow: 0 1px 4px rgba(0, 21, 41, .08); |
||||||
|
|
||||||
|
.navbar-icon { |
||||||
|
font-size: 18px; |
||||||
|
cursor: pointer; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
|
||||||
|
.right-menu { |
||||||
|
float: right; |
||||||
|
height: 100%; |
||||||
|
line-height: $nav-height; |
||||||
|
|
||||||
|
&:focus { |
||||||
|
outline: none; |
||||||
|
} |
||||||
|
|
||||||
|
.right-menu-item { |
||||||
|
display: inline-block; |
||||||
|
position: relative; |
||||||
|
padding: 0 8px; |
||||||
|
height: 100%; |
||||||
|
font-size: 18px; |
||||||
|
color: #5a5e66; |
||||||
|
vertical-align: text-bottom; |
||||||
|
transition: background .3s; |
||||||
|
cursor: pointer; |
||||||
|
|
||||||
|
&:hover:not(#header-search) { |
||||||
|
background: rgba(0, 0, 0, .025) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.avatar-container { |
||||||
|
.avatar-wrapper { |
||||||
|
margin-top: 5px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.el-avatar { |
||||||
|
position: relative; |
||||||
|
top: 5px; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue