Skip to content

Commit 050dcd7

Browse files
vanoneangGongJS
vanoneang
authored and
GongJS
committed
feat(core): add fullscreen & enter animation (#145)
1 parent 1e9cba0 commit 050dcd7

7 files changed

Lines changed: 179 additions & 7 deletions

File tree

‎package-lock.json‎

Lines changed: 6 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"fastscan": "^1.0.4",
2020
"good-storage": "^1.1.0",
2121
"js-cookie": "^2.2.0",
22+
"screenfull": "4.2.0",
2223
"vue": "^2.6.8",
2324
"vue-awesome-swiper": "^3.1.3",
2425
"vue-router": "~3.0.1",

‎public/iconfont.css‎

Lines changed: 14 additions & 6 deletions
Large diffs are not rendered by default.

‎public/index.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,89 @@
88
<link rel="stylesheet" type="text/css" href="./iconfont.css" />
99
<script src="//at.alicdn.com/t/font_1104271_so151lbumpq.js"></script>
1010
<title>lin-cms</title>
11+
<style>
12+
#loader {
13+
position: fixed;
14+
left: 0;
15+
right: 0;
16+
bottom: 0;
17+
top: 0;
18+
background:#fff;
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
transition: display 1s ease .5s;
23+
}
24+
.spinner {
25+
position: relative;
26+
line-height: 0;
27+
box-sizing: border-box;
28+
width: 40px;
29+
height: 40px;
30+
color: #3963bc;
31+
}
32+
33+
.spinner:before {
34+
content: '';
35+
width: 100%;
36+
height: 20%;
37+
min-width: 5px;
38+
background: #000;
39+
opacity: 0.1;
40+
position: absolute;
41+
bottom: 0%;
42+
left: 0;
43+
border-radius: 50%;
44+
animation: rotate-square-2-shadow .5s linear infinite;
45+
}
46+
.spinner:after {
47+
content: '';
48+
width: 100%;
49+
height: 100%;
50+
background: #3963bc;
51+
animation: rotate-square-2-animate .5s linear infinite;
52+
position: absolute;
53+
bottom:40%;
54+
left: 0;
55+
border-radius: 3px;
56+
}
57+
58+
59+
@keyframes rotate-square-2-animate {
60+
17% {
61+
border-bottom-right-radius: 3px;
62+
}
63+
25% {
64+
transform: translateY(20%) rotate(22.5deg);
65+
}
66+
50% {
67+
transform: translateY(40%) scale(1, .9) rotate(45deg);
68+
border-bottom-right-radius: 50%;
69+
}
70+
75% {
71+
transform: translateY(20%) rotate(67.5deg);
72+
}
73+
100% {
74+
transform: translateY(0) rotate(90deg);
75+
}
76+
}
77+
78+
@keyframes rotate-square-2-shadow {
79+
0%, 100% {
80+
transform: scale(1, 1);
81+
}
82+
50% {
83+
transform: scale(1.2, 1);
84+
}
85+
}
86+
</style>
1187
</head>
1288

1389
<body>
90+
91+
<div id="loader">
92+
<div class="spinner spinner--rotate-square-2"></div>
93+
</div>
1494
<div id="app"></div>
1595
<!-- built files will be auto injected -->
1696
</body>

‎src/App.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ export default {
1515
eventBus: new Vue(),
1616
}
1717
},
18+
mounted() {
19+
document.getElementById('loader').style.display = 'none'
20+
},
1821
provide() {
1922
// eventBus挂载的事件： addGroup addUser
2023
return {

‎src/components/layout/NavBar.vue‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<!-- 暂时放这里 -->
88
<div class="right-info">
99
<notify v-auth="'消息推送'" v-show="false" />
10+
<screenfull />
1011
<user></user>
1112
</div>
1213
</div>
@@ -16,6 +17,7 @@
1617
<script>
1718
import Notify from '@/components/notify/notify'
1819
import Breadcrumb from './Breadcrumb'
20+
import Screenfull from './Screenfull'
1921
import User from './User'
2022
2123
export default {
@@ -25,6 +27,7 @@ export default {
2527
Breadcrumb,
2628
User,
2729
Notify,
30+
Screenfull,
2831
},
2932
}
3033
</script>

‎src/components/layout/Screenfull.vue‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<template>
2+
<div class="container">
3+
<i class="iconfont" :class="isFullscreen?'icon-quxiaoquanping':'icon-quanping'" @click="handleFullScreen"></i>
4+
</div>
5+
</template>
6+
7+
<script>
8+
import screenfull from 'screenfull'
9+
10+
export default {
11+
data() {
12+
return {
13+
isFullscreen: false,
14+
}
15+
},
16+
mounted() {
17+
this.init()
18+
},
19+
beforeDestroy() {
20+
this.destroy()
21+
},
22+
methods: {
23+
handleFullScreen() {
24+
if (!screenfull.enabled) {
25+
this.$message({
26+
message: 'you browser can not work',
27+
type: 'warning',
28+
})
29+
return false
30+
}
31+
screenfull.toggle()
32+
},
33+
change() {
34+
this.isFullscreen = screenfull.isFullscreen
35+
},
36+
init() {
37+
if (screenfull.enabled) {
38+
screenfull.on('change', this.change)
39+
}
40+
},
41+
destroy() {
42+
if (screenfull.enabled) {
43+
screenfull.off('change', this.change)
44+
}
45+
},
46+
},
47+
}
48+
</script>
49+
50+
<style scoped lang="scss">
51+
.container {
52+
width: 40px;
53+
height: 40px;
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
margin-right: 10px;
58+
cursor: pointer;
59+
i {
60+
width: 40px;
61+
height: 40px;
62+
font-size: 20px;
63+
&:before {
64+
display: flex;
65+
justify-content: center;
66+
align-items: center;
67+
width: 40px;
68+
height: 40px;
69+
}
70+
}
71+
}
72+
</style>

0 commit comments

Comments
 (0)