Skip to content

Commit

Permalink
ui
Browse files Browse the repository at this point in the history
  • Loading branch information
@wallace5303
wallace5303 committed Sep 7, 2023
1 parent 99ba0ec commit efe9c62
Show file tree
Hide file tree
Showing 5 changed files with 193 additions and 12 deletions.
92 changes: 92 additions & 0 deletions frontend/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,100 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<!-- 优化：vue渲染未完成之前，先加一个css动画 -->
<style>
#loadingPage {
background-color: #dedede;
font-size: 12px;
}
.base {
height: 9em;
left: 50%;
margin: -7.5em;
padding: 3em;
position: absolute;
top: 40%;
width: 9em;
transform: rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
}
.cube,
.cube:after,
.cube:before {
content: '';
float: left;
height: 3em;
position: absolute;
width: 3em;
}
/* Top */
.cube {
background-color: #06cf68;
position: relative;
transform: translateZ(3em);
transform-style: preserve-3d;
transition: .25s;
box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
animation: anim 1s infinite;
}
.cube:after {
background-color: #05a151;
transform: rotateX(-90deg) translateY(3em);
transform-origin: 100% 100%;
}
.cube:before {
background-color: #026934;
transform: rotateY(90deg) translateX(3em);
transform-origin: 100% 0;
}
.cube:nth-child(1) {
animation-delay: 0.05s;
}
.cube:nth-child(2) {
animation-delay: 0.1s;
}
.cube:nth-child(3) {
animation-delay: 0.15s;
}
.cube:nth-child(4) {
animation-delay: 0.2s;
}
.cube:nth-child(5) {
animation-delay: 0.25s;
}
.cube:nth-child(6) {
animation-delay: 0.3s;
}
.cube:nth-child(7) {
animation-delay: 0.35s;
}
.cube:nth-child(8) {
animation-delay: 0.4s;
}
.cube:nth-child(9) {
animation-delay: 0.45s;
}
@keyframes anim {
50% {
transform: translateZ(0.5em);
}
}
</style>
</head>
<body>
<div id="loadingPage">
<div class='base'>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
</div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
Expand Down
13 changes: 5 additions & 8 deletions frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,13 @@
<template>
<router-view/>
<router-view/>
</template>

<script>
export default {
name: 'App',
components: {},
data() {
return {};
},
watch: {},
methods: {}
name: 'App',
setup() {
document.getElementById('loadingPage').remove()
}
}
</script>
<style lang="less"></style>
2 changes: 1 addition & 1 deletion public/dist/assets/Index-d7469016.js → public/dist/assets/Index-40318c85.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions public/dist/assets/index-f45cb953.js → public/dist/assets/index-02b24eb9.js
View file

Large diffs are not rendered by default.

94 changes: 93 additions & 1 deletion public/dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,102 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<script type="module" crossorigin src="./assets/index-f45cb953.js"></script>
<!-- 优化：vue渲染未完成之前，先加一个css动画 -->
<style>
#loadingPage {
background-color: #dedede;
font-size: 12px;
}
.base {
height: 9em;
left: 50%;
margin: -7.5em;
padding: 3em;
position: absolute;
top: 40%;
width: 9em;
transform: rotateX(45deg) rotateZ(45deg);
transform-style: preserve-3d;
}
.cube,
.cube:after,
.cube:before {
content: '';
float: left;
height: 3em;
position: absolute;
width: 3em;
}
/* Top */
.cube {
background-color: #06cf68;
position: relative;
transform: translateZ(3em);
transform-style: preserve-3d;
transition: .25s;
box-shadow: 13em 13em 1.5em rgba(0, 0, 0, 0.1);
animation: anim 1s infinite;
}
.cube:after {
background-color: #05a151;
transform: rotateX(-90deg) translateY(3em);
transform-origin: 100% 100%;
}
.cube:before {
background-color: #026934;
transform: rotateY(90deg) translateX(3em);
transform-origin: 100% 0;
}
.cube:nth-child(1) {
animation-delay: 0.05s;
}
.cube:nth-child(2) {
animation-delay: 0.1s;
}
.cube:nth-child(3) {
animation-delay: 0.15s;
}
.cube:nth-child(4) {
animation-delay: 0.2s;
}
.cube:nth-child(5) {
animation-delay: 0.25s;
}
.cube:nth-child(6) {
animation-delay: 0.3s;
}
.cube:nth-child(7) {
animation-delay: 0.35s;
}
.cube:nth-child(8) {
animation-delay: 0.4s;
}
.cube:nth-child(9) {
animation-delay: 0.45s;
}
@keyframes anim {
50% {
transform: translateZ(0.5em);
}
}
</style>
<script type="module" crossorigin src="./assets/index-02b24eb9.js"></script>
<link rel="stylesheet" href="./assets/index-b7b2ffb7.css">
</head>
<body>
<div id="loadingPage">
<div class='base'>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
<div class='cube'></div>
</div>
</div>
<div id="app"></div>

</body>
Expand Down

0 comments on commit efe9c62

Please sign in to comment.