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