.

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://test.raex.vip/
+VUE_APP_BASE_URL=https://www.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/components/ImgContent.vue

@@ -8,7 +8,7 @@
 
 <script>
 import { Image } from 'vant';
-import Loading from './Loading.vue';
+import Loading from './Loading/Loading.vue';
 export default {
     props: ['src', 'fit', 'radius'],
     components: {

src/components/Loading/LoadingPage.vue

@@ -0,0 +1,163 @@
+<template>
+    <div class="loading" :class="{ dark: pageType === 'dark', light: pageType === 'dark' }">
+        <div class="loading-page"><span></span><span></span><span></span><span></span><span></span></div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        pageType: {
+            type: String,
+            default: 'dark'
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+@color1: #c8c9cc;
+@color2: #939599;
+
+.loading {
+    .flex();
+    justify-content: center;
+    height: 80px;
+}
+.loading-page {
+    position: relative;
+    width: 50px;
+    span {
+        display: block;
+        bottom: 0px;
+        width: 3px;
+        height: 5px;
+        background: @color1;
+        position: absolute;
+        animation: preloader_1 1.5s infinite ease-in-out;
+
+        &:nth-child(2) {
+            left: 6px;
+            -webkit-animation-delay: 0.2s;
+            -moz-animation-delay: 0.2s;
+            -ms-animation-delay: 0.2s;
+            -o-animation-delay: 0.2s;
+            animation-delay: 0.2s;
+        }
+        &:nth-child(3) {
+            left: 12px;
+            -webkit-animation-delay: 0.4s;
+            -moz-animation-delay: 0.4s;
+            -ms-animation-delay: 0.4s;
+            -o-animation-delay: 0.4s;
+            animation-delay: 0.4s;
+        }
+        &:nth-child(4) {
+            left: 18px;
+            -webkit-animation-delay: 0.6s;
+            -moz-animation-delay: 0.6s;
+            -ms-animation-delay: 0.6s;
+            -o-animation-delay: 0.6s;
+            animation-delay: 0.6s;
+        }
+        &:nth-child(5) {
+            left: 24px;
+            -webkit-animation-delay: 0.8s;
+            -moz-animation-delay: 0.8s;
+            -ms-animation-delay: 0.8s;
+            -o-animation-delay: 0.8s;
+            animation-delay: 0.8s;
+        }
+    }
+}
+
+@keyframes preloader_1 {
+    0% {
+        height: 5px;
+        transform: translateY(0px);
+        background: @color1;
+    }
+    25% {
+        height: 25px;
+        transform: translateY(10px);
+        background: @color2;
+    }
+    50% {
+        height: 5px;
+        transform: translateY(0px);
+        background: @color1;
+    }
+    100% {
+        height: 5px;
+        transform: translateY(0px);
+        background: @color1;
+    }
+}
+
+.dark {
+    @color1: #ffffff;
+    @color2: #595959;
+
+    .loading-page {
+        span {
+            background: @color1;
+        }
+    }
+
+    @keyframes preloader_1 {
+        0% {
+            height: 5px;
+            transform: translateY(0px);
+            background: @color1;
+        }
+        25% {
+            height: 20px;
+            transform: translateY(8px);
+            background: @color2;
+        }
+        50% {
+            height: 5px;
+            transform: translateY(0px);
+            background: @color1;
+        }
+        100% {
+            height: 5px;
+            transform: translateY(0px);
+            background: @color1;
+        }
+    }
+}
+.light {
+    @color1: #c8c9cc;
+    @color2: #939599;
+
+    .loading-page {
+        span {
+            background: @color1;
+        }
+    }
+
+    @keyframes preloader_1 {
+        0% {
+            height: 5px;
+            transform: translateY(0px);
+            background: @color1;
+        }
+        25% {
+            height: 20px;
+            transform: translateY(8px);
+            background: @color2;
+        }
+        50% {
+            height: 5px;
+            transform: translateY(0px);
+            background: @color1;
+        }
+        100% {
+            height: 5px;
+            transform: translateY(0px);
+            background: @color1;
+        }
+    }
+}
+</style>

src/components/PullRefresh.vue

@@ -0,0 +1,61 @@
+<template>
+    <van-pull-refresh
+        class="home"
+        success-text="加载成功"
+        success-duration="500"
+        v-model="isLoading"
+        :head-height="80"
+        @refresh="onRefresh"
+    >
+        <template #default>
+            <slot></slot>
+        </template>
+        <template #loading>
+            <loading-page :pageType="pageType"></loading-page>
+        </template>
+        <template #pulling>
+            <loading-page :pageType="pageType"></loading-page>
+        </template>
+        <template #loosing>
+            <loading-page :pageType="pageType"></loading-page>
+        </template>
+        <template #success>
+            <loading-page :pageType="pageType"></loading-page>
+        </template>
+    </van-pull-refresh>
+</template>
+
+<script>
+import LoadingPage from './Loading/LoadingPage.vue';
+import { PullRefresh } from 'vant';
+export default {
+    props: {
+        value: {
+            type: Boolean,
+            defalut: false
+        },
+        pageType: {
+            type: String,
+            default: 'dark'
+        }
+    },
+    computed: {
+        isLoading: {
+            get() {
+                return this.value;
+            },
+            set(isLoading) {
+                this.$emit('upade:value', isLoading);
+            }
+        }
+    },
+    methods: {
+        onRefresh() {
+            this.$emit('refresh');
+        }
+    },
+    components: { LoadingPage, vanPullRefresh: PullRefresh }
+};
+</script>
+
+<style lang="less" scoped></style>

src/main.js

@@ -55,6 +55,7 @@ if (showConsole && parseInt(showConsole) > new Date().getTime()) {
 store.commit('setFirstUrl', location.href);
 
 import ImgContent from './components/ImgContent.vue';
+import PullRefresh from './components/PullRefresh.vue';
 
 const app = createApp(App)
     .use(Vant)
@@ -68,6 +69,7 @@ const app = createApp(App)
     .component('like-button', LikeButton)
     .component('driver', Driver)
     .component('van-image', ImgContent)
+    .component('van-pull-refresh', PullRefresh)
     .component('page-bar', PageBar)
     .use(store)
     .use(router);

src/views/Home.vue

@@ -6,6 +6,7 @@
         v-model="isLoading"
         :head-height="80"
         @refresh="onRefresh"
+        pageType="light"
     >
         <div class="filter-bg" :style="{ backgroundImage: `url(${bgImg})` }"></div>
         <div class="welcom">