|
|
@@ -2,17 +2,48 @@
|
|
|
<!-- components/Loading/index.vue-->
|
|
|
<div v-show="isShow" class="loading">
|
|
|
<div>
|
|
|
- <div class="loading-content">
|
|
|
- <img src="/logo.png" object-fit="cover" />
|
|
|
+ <div style="display: flex; align-items: center">
|
|
|
+ <div class="loading-content">
|
|
|
+ <img src="/logo.png" style="width: 150px" object-fit="cover" />
|
|
|
+ </div>
|
|
|
+ <div class="titexArea">
|
|
|
+ <div class="zw">华菁振兴</div>
|
|
|
+ <div class="zm">
|
|
|
+ <span>H</span>
|
|
|
+ <span>U</span>
|
|
|
+ <span>A</span>
|
|
|
+ <span>J</span>
|
|
|
+ <span>I</span>
|
|
|
+ <span>N</span>
|
|
|
+ <span>G</span>
|
|
|
+ <span>Z</span>
|
|
|
+ <span>H</span>
|
|
|
+ <span>E</span>
|
|
|
+ <span>N</span>
|
|
|
+ <span>X</span>
|
|
|
+ <span>I</span>
|
|
|
+ <span>N</span>
|
|
|
+ <span>G</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="titleText">
|
|
|
+ <span style="margin-right: 10px">正</span>
|
|
|
+ <span style="margin-right: 10px">在</span>
|
|
|
+ <span style="margin-right: 10px">加</span>
|
|
|
+ <span style="margin-right: 10px">载</span>
|
|
|
+ <span style="margin-right: 10px">.</span>
|
|
|
+ <span style="margin-right: 10px">.</span>
|
|
|
+ <span style="margin-right: 10px">.</span>
|
|
|
</div>
|
|
|
- <div class="titleText">正在加载...</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { ref } from "vue";
|
|
|
-const isShow = ref(false); //定位loading 的开关
|
|
|
+const isShow = ref(true); //定位loading 的开关
|
|
|
|
|
|
const show = () => {
|
|
|
isShow.value = true;
|
|
|
@@ -33,7 +64,7 @@ defineExpose({
|
|
|
position: fixed;
|
|
|
z-index: 999999;
|
|
|
inset: 0;
|
|
|
- background: #f1f3f5;
|
|
|
+ background: #000;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
@@ -43,8 +74,24 @@ defineExpose({
|
|
|
.loading-content {
|
|
|
animation: rotate 4s linear infinite;
|
|
|
}
|
|
|
+ .titexArea {
|
|
|
+ color: white;
|
|
|
+ margin-left: 20px;
|
|
|
+ .zw {
|
|
|
+ font-size: 80px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .zm {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
.titleText {
|
|
|
margin-top: 10px;
|
|
|
+ color: white;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
@keyframes rotate {
|
|
|
from {
|
