拆分登录页

src/styles/view/login.scss

@@ -21,137 +21,7 @@
         top: 50%;
         height: 630px;
         margin-top: -315px;
-        .left-pic-content {
-            width: 100%;
-            height: 100%;
-            position: relative;
-            background-image: url(/src/assets/login/bg.png);
-            background-repeat: no-repeat;
-            background-size: 100%;
-            background-position: center;
-            .small-logo {
-                width: 110px;
-                position: absolute;
-                .cons {
-                    height: 160px;
-                    overflow: hidden;
-                }
-                .logos {
-                    width: 100%;
-                    margin-top: 30px;
-                }
-                .shadow1 {
-                    width: 64px;
-                    position: absolute;
-                    left: 44%;
-                    transform: translateX(-50%);
-                    bottom: -16px;
-                }
-            }
-            .cons {
-                position: relative;
-            }
-            .dt {
-                left: 166px;
-                top: 86px;
-                .logos {
-                    animation: logoAnimate 4s 0.2s infinite alternate forwards;
-                }
-                .shadow1 {
-                    animation: logoShadowAnimate 4s 0.2s infinite alternate forwards;
-                }
-            }
-            .ds {
-                right: 176px;
-                top: 54px;
-                .logos {
-                    animation: logoAnimate 2.2s infinite alternate;
-                }
-                .shadow1 {
-                    animation: logoShadowAnimate 2.2s infinite alternate;
-                }
-            }
-            .cc {
-                right: 72px;
-                bottom: 160px;
-                .logos {
-                    animation: logoAnimate 2.5s 0.5s infinite alternate;
-                }
-                .shadow1 {
-                    animation: logoShadowAnimate 2.5s 0.5s infinite alternate;
-                }
-            }
-            .rp {
-                left: 290px;
-                bottom: 76px;
-                .logos {
-                    animation: logoAnimate 3s 0.9s infinite alternate;
-                }
-                .shadow1 {
-                    animation: logoShadowAnimate 3s 0.9s infinite alternate;
-                }
-            }
-            .cubes {
-                display: block;
-                width: 100%;
-            }
-            .cube1 {
-                width: 48px;
-                right: 60px;
-                top: 180px;
-                position: absolute;
-                .cons {
-                    height: 108px;
-                    position: relative;
-                    overflow: hidden;
-                    .cubes {
-                        animation: cube1LogoAnimate 2s infinite alternate;
-                    }
-                    .shadow2 {
-                        position: absolute;
-                        width: 56px;
-                        left: 48%;
-                        transform: translateX(-50%);
-                        bottom: -16px;
-                        animation: cube1ShadowAnimate 2s infinite alternate;
-                    }
-                }
-            }
-            .cube2 {
-                position: absolute;
-                width: 56px;
-                left: 130px;
-                bottom: 190px;
-                .cons {
-                    position: relative;
-                    height: 126px;
-                    overflow: hidden;
-                    .cubes {
-                        animation: cube2LogoAnimate 2s 0.3s infinite alternate;
-                    }
-                    .shadow3 {
-                        position: absolute;
-                        width: 64px;
-                        left: 48%;
-                        transform: translateX(-50%);
-                        bottom: -16px;
-                        animation: cube2ShadowAnimate 2s 0.3s infinite alternate;
-                    }
-                }
-            }
-            .logo {
-                right: 260px;
-                top: 190px;
-                width: 150px;
-                position: absolute;
-                height: 160px;
-                cursor: pointer;
-                .a-cons {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-        }
+
     }
     .right-container {
         right: 18.667%;
@@ -251,82 +121,4 @@
             }
         }
     }
-    //预先加载首页背景图
-    .hc-login-theme-home {
-        position: absolute;
-        z-index: -11;
-        img {
-            width: 100px;
-        }
-    }
-}
-
-//动画效果
-@keyframes logoAnimate {
-    25% {
-        -webkit-transform: translateY(0);
-        -moz-transform: translateY(0);
-        -ms-transform: translateY(0);
-        -o-transform: translateY(0);
-        transform: translateY(0);
-    }
-    100% {
-        -webkit-transform: translateY(-30px);
-        -moz-transform: translateY(-30px);
-        -ms-transform: translateY(-30px);
-        -o-transform: translateY(-30px);
-        transform: translateY(-30px);
-    }
-}
-@keyframes logoShadowAnimate {
-    25% {
-        width: 64px;
-        margin-bottom: 0;
-    }
-    100% {
-        width: 30px;
-        margin-bottom: 20px;
-    }
-}
-@keyframes cube1LogoAnimate {
-    0% {
-        -webkit-transform: translateY(0);
-        -moz-transform: translateY(0);
-        -ms-transform: translateY(0);
-        -o-transform: translateY(0);
-        transform: translateY(0);
-    }
-    100% {
-        -webkit-transform: translateY(30px);
-        -moz-transform: translateY(30px);
-        -ms-transform: translateY(30px);
-        -o-transform: translateY(30px);
-        transform: translateY(30px);
-    }
-}
-@keyframes cube1ShadowAnimate {
-    0% {
-        width: 20px;
-        margin-bottom: 20px;
-    }
-    100% {
-        width: 56px;
-    }
-}
-@keyframes cube2LogoAnimate {
-    0% {
-        margin-top: 30px;
-    }
-    100% {
-        margin-top: 0;
-    }
-}
-@keyframes cube2ShadowAnimate {
-    0% {
-        width: 64px;
-    }
-    100% {
-        width: 30px;
-        margin-bottom: 20px;
-    }
 }

src/views/login/components/home-bg.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="hc-login-theme-home" v-if="isBody">
+        <template v-for="item in theme.home">
+            <img :src="item.bg" :alt="item.name" loading="lazy">
+        </template>
+    </div>
+</template>
+
+<script setup>
+import {ref, nextTick} from "vue";
+import theme from '~src/config/theme'
+
+const isBody = ref(false)
+
+//渲染完成
+nextTick(()=> {
+    isBody.value = true
+})
+</script>
+
+<style lang="scss" scoped>
+//预先加载首页背景图
+.hc-login-theme-home {
+    position: absolute;
+    z-index: -11;
+    img {
+        width: 100px;
+    }
+}
+</style>

src/views/login/components/pic.vue

@@ -0,0 +1,260 @@
+<template>
+    <div class="left-pic-content" v-if="isBody">
+        <div class="dt small-logo">
+            <div class="cons">
+                <img src="../../../assets/login/bim.png" alt="" class="logos">
+                <img src="../../../assets/login/s1.png" alt="" class="shadow1">
+            </div>
+        </div>
+        <div class="ds small-logo">
+            <div class="cons">
+                <img src="../../../assets/login/gis.png" alt="" class="logos">
+                <img src="../../../assets/login/s1.png" alt="" class="shadow1">
+            </div>
+        </div>
+        <div class="cc small-logo">
+            <div class="cons">
+                <img src="../../../assets/login/bd.png" alt="" class="logos">
+                <img src="../../../assets/login/s1.png" alt="" class="shadow1">
+            </div>
+        </div>
+        <div class="rp small-logo">
+            <div class="cons">
+                <img src="../../../assets/login/ca.png" alt="" class="logos">
+                <img src="../../../assets/login/s1.png" alt="" class="shadow1">
+            </div>
+        </div>
+        <div class="cube1">
+            <div class="cons">
+                <img src="../../../assets/login/cube1.png" alt="" class="cubes">
+                <img src="../../../assets/login/s2.png" alt="" class="shadow2">
+            </div>
+        </div>
+        <div class="cube2">
+            <div class="cons">
+                <img src="../../../assets/login/cube2.png" alt="" class="cubes">
+                <img src="../../../assets/login/s3.png" alt="" class="shadow3">
+            </div>
+        </div>
+        <div class="logo">
+            <a href="http://hczc.hcxxy.com/" target="_blank">
+                <div class="a-cons"/>
+            </a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {ref, nextTick} from "vue";
+
+const isBody = ref(false)
+
+//渲染完成
+nextTick(()=> {
+    isBody.value = true
+})
+</script>
+
+<style lang="scss" scoped>
+.left-pic-content {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-image: url(/src/assets/login/bg.png);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: center;
+    .small-logo {
+        width: 110px;
+        position: absolute;
+        .cons {
+            height: 160px;
+            overflow: hidden;
+        }
+        .logos {
+            width: 100%;
+            margin-top: 30px;
+        }
+        .shadow1 {
+            width: 64px;
+            position: absolute;
+            left: 44%;
+            transform: translateX(-50%);
+            bottom: -16px;
+        }
+    }
+    .cons {
+        position: relative;
+    }
+    .dt {
+        left: 166px;
+        top: 86px;
+        .logos {
+            animation: logoAnimate 4s 0.2s infinite alternate forwards;
+        }
+        .shadow1 {
+            animation: logoShadowAnimate 4s 0.2s infinite alternate forwards;
+        }
+    }
+    .ds {
+        right: 176px;
+        top: 54px;
+        .logos {
+            animation: logoAnimate 2.2s infinite alternate;
+        }
+        .shadow1 {
+            animation: logoShadowAnimate 2.2s infinite alternate;
+        }
+    }
+    .cc {
+        right: 72px;
+        bottom: 160px;
+        .logos {
+            animation: logoAnimate 2.5s 0.5s infinite alternate;
+        }
+        .shadow1 {
+            animation: logoShadowAnimate 2.5s 0.5s infinite alternate;
+        }
+    }
+    .rp {
+        left: 290px;
+        bottom: 76px;
+        .logos {
+            animation: logoAnimate 3s 0.9s infinite alternate;
+        }
+        .shadow1 {
+            animation: logoShadowAnimate 3s 0.9s infinite alternate;
+        }
+    }
+    .cubes {
+        display: block;
+        width: 100%;
+    }
+    .cube1 {
+        width: 48px;
+        right: 60px;
+        top: 180px;
+        position: absolute;
+        .cons {
+            height: 108px;
+            position: relative;
+            overflow: hidden;
+            .cubes {
+                animation: cube1LogoAnimate 2s infinite alternate;
+            }
+            .shadow2 {
+                position: absolute;
+                width: 56px;
+                left: 48%;
+                transform: translateX(-50%);
+                bottom: -16px;
+                animation: cube1ShadowAnimate 2s infinite alternate;
+            }
+        }
+    }
+    .cube2 {
+        position: absolute;
+        width: 56px;
+        left: 130px;
+        bottom: 190px;
+        .cons {
+            position: relative;
+            height: 126px;
+            overflow: hidden;
+            .cubes {
+                animation: cube2LogoAnimate 2s 0.3s infinite alternate;
+            }
+            .shadow3 {
+                position: absolute;
+                width: 64px;
+                left: 48%;
+                transform: translateX(-50%);
+                bottom: -16px;
+                animation: cube2ShadowAnimate 2s 0.3s infinite alternate;
+            }
+        }
+    }
+    .logo {
+        right: 260px;
+        top: 190px;
+        width: 150px;
+        position: absolute;
+        height: 160px;
+        cursor: pointer;
+        .a-cons {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+//动画效果
+@keyframes logoAnimate {
+    25% {
+        -webkit-transform: translateY(0);
+        -moz-transform: translateY(0);
+        -ms-transform: translateY(0);
+        -o-transform: translateY(0);
+        transform: translateY(0);
+    }
+    100% {
+        -webkit-transform: translateY(-30px);
+        -moz-transform: translateY(-30px);
+        -ms-transform: translateY(-30px);
+        -o-transform: translateY(-30px);
+        transform: translateY(-30px);
+    }
+}
+@keyframes logoShadowAnimate {
+    25% {
+        width: 64px;
+        margin-bottom: 0;
+    }
+    100% {
+        width: 30px;
+        margin-bottom: 20px;
+    }
+}
+@keyframes cube1LogoAnimate {
+    0% {
+        -webkit-transform: translateY(0);
+        -moz-transform: translateY(0);
+        -ms-transform: translateY(0);
+        -o-transform: translateY(0);
+        transform: translateY(0);
+    }
+    100% {
+        -webkit-transform: translateY(30px);
+        -moz-transform: translateY(30px);
+        -ms-transform: translateY(30px);
+        -o-transform: translateY(30px);
+        transform: translateY(30px);
+    }
+}
+@keyframes cube1ShadowAnimate {
+    0% {
+        width: 20px;
+        margin-bottom: 20px;
+    }
+    100% {
+        width: 56px;
+    }
+}
+@keyframes cube2LogoAnimate {
+    0% {
+        margin-top: 30px;
+    }
+    100% {
+        margin-top: 0;
+    }
+}
+@keyframes cube2ShadowAnimate {
+    0% {
+        width: 64px;
+    }
+    100% {
+        width: 30px;
+        margin-bottom: 20px;
+    }
+}
+</style>

src/views/login/index.vue

@@ -4,49 +4,12 @@
             <img src="../../assets/logo/logo-2.png" alt="">
         </a>
         <div class="left-pic-container">
-            <div class="left-pic-content">
-                <div class="dt small-logo">
-                    <div class="cons">
-                        <img src="../../assets/login/bim.png" alt="" class="logos">
-                        <img src="../../assets/login/s1.png" alt="" class="shadow1">
-                    </div>
-                </div>
-                <div class="ds small-logo">
-                    <div class="cons">
-                        <img src="../../assets/login/gis.png" alt="" class="logos">
-                        <img src="../../assets/login/s1.png" alt="" class="shadow1">
-                    </div>
-                </div>
-                <div class="cc small-logo">
-                    <div class="cons">
-                        <img src="../../assets/login/bd.png" alt="" class="logos">
-                        <img src="../../assets/login/s1.png" alt="" class="shadow1">
-                    </div>
-                </div>
-                <div class="rp small-logo">
-                    <div class="cons">
-                        <img src="../../assets/login/ca.png" alt="" class="logos">
-                        <img src="../../assets/login/s1.png" alt="" class="shadow1">
-                    </div>
-                </div>
-                <div class="cube1">
-                    <div class="cons">
-                        <img src="../../assets/login/cube1.png" alt="" class="cubes">
-                        <img src="../../assets/login/s2.png" alt="" class="shadow2">
-                    </div>
-                </div>
-                <div class="cube2">
-                    <div class="cons">
-                        <img src="../../assets/login/cube2.png" alt="" class="cubes">
-                        <img src="../../assets/login/s3.png" alt="" class="shadow3">
-                    </div>
-                </div>
-                <div class="logo">
-                    <a href="http://hczc.hcxxy.com/" target="_blank">
-                        <div class="a-cons"/>
-                    </a>
-                </div>
-            </div>
+            <Suspense>
+                <HcPicVue />
+                <template #fallback>
+                    Loading...
+                </template>
+            </Suspense>
         </div>
         <div class="right-container">
             <div class="right-app-title">工程数字档案管理平台</div>
@@ -90,11 +53,9 @@
             </div>
         </div>
         <!--预先加载首页背景图-->
-        <div class="hc-login-theme-home">
-            <template v-for="item in theme.home">
-                <img :src="item.bg" :alt="item.name" loading="lazy">
-            </template>
-        </div>
+        <Suspense>
+            <HcHomeBg/>
+        </Suspense>
     </div>
 </template>
 
@@ -104,7 +65,8 @@ import router from '~src/router/index';
 import {useAppStore} from "~src/store";
 import {useAppLogin} from "~sto/user";
 import {formValidate} from "vue-utils-plus"
-import theme from '~src/config/theme'
+import HcPicVue from './components/pic.vue'
+import HcHomeBg from './components/home-bg.vue'
 
 const userStore = useAppStore()
 userStore.clearStoreData() //先清理下缓存