amass/md
1
0
Fork 0
mirror of https://github.com/doocs/md.git synced 2024-10-06 12:03:12 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: simplified RunLoading structure (#177)

Browse Source 
- 减少 HTML 结构
- 适配夜间模式
This commit is contained in:
YangQi 2022-08-09 10:31:23 +08:00 committed by GitHub
parent 2470c22d87
commit 0542f26d15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 37 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/RunLoading.vue
View File

@ -1,15 +1,19 @@
<template> <template>
<transition name="fade" v-if="loading"> <transition name="fade" v-if="loading">
<div class="loading"> <div
<div class="loading-wrapper"> class="loading"
<div class="loading-anim"></div> :class="{
<div class="loading-text">致力于让 Markdown 编辑更简单</div> loading_night: nightMode,
</div> }"
>
<strong>致力于让 Markdown 编辑更简单</strong>
</div> </div>
</transition> </transition>
</template> </template>
<script> <script>
import { mapState } from 'vuex'
export default { export default {
name: `RunLoading`, name: `RunLoading`,
data() { data() {
@ -22,44 +26,44 @@ export default {
this.loading = false this.loading = false
}, 100) }, 100)
}, },
computed: {
...mapState({
nightMode: ({ nightMode }) => nightMode,
}),
},
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@light-color: #303133;
@light-background-color: #f2f2f2;
@night-color: #bbbbbb;
@night-background-color: #303133;
.loading { .loading {
position: fixed; position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 99999; z-index: 99999;
background-color: #f2f2f2; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
font-size: 18px;
color: @light-color;
background-color: @light-background-color;
&::before {
content: url('../assets/images/favicon.png');
width: 100px;
height: 100px;
margin-bottom: 26px;
}
} }
.loading_night { .loading_night {
background-color: #303133; color: @night-color;
} background-color: @night-background-color;
.loading-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
}
.loading-anim {
display: inline-block;
width: 100px;
height: 100px;
background: url('../assets/images/favicon.png') no-repeat;
background-size: cover;
}
.loading-text {
font-size: 18px;
font-weight: bold;
margin-top: 26px;
color: #303133;
} }
.fade-enter, .fade-enter,