首页

src/styles/app.less

@@ -4,9 +4,9 @@
     --van-tabbar-item-font-size: 10px;
     --van-tabbar-item-icon-size: 28px;
     --van-tabbar-item-icon-margin-bottom: 2px;
+    --van-gray-6: #c8c9cc;
 }
 
-
 * {
     -webkit-touch-callout: none; /*系统默认菜单被禁用*/
 
@@ -70,4 +70,4 @@ body {
 input:-webkit-autofill {
     box-shadow: 0 0 0px 1000px @bg inset;
     -webkit-text-fill-color: @text0;
-}
+}

src/views/Home.vue

@@ -1,12 +1,176 @@
 <template>
-    <div class="home"></div>
+    <div class="home">
+        <!-- 轮播图模块 -->
+        <div class="swiper-content">
+            <swiper
+                :modules="[Controller]"
+                @swiper="setSecondSwiper"
+                :controller="{ control: firstSwiper }"
+                class="mySwiper"
+                :autoplay="{ delay: 3500, disableOnInteraction: false }"
+            >
+                <swiper-slide v-for="i in 5" :key="i">
+                    <van-image :src="require('@assets/bg.png')" fit="cover" height="58.7vw" width="100vw" />
+                </swiper-slide>
+            </swiper>
+
+            <swiper
+                class="swiper-box"
+                :modules="[Controller]"
+                @swiper="setFirstSwiper"
+                :controller="{ control: secondSwiper }"
+                parallax
+                pagination
+            >
+                <swiper-slide v-for="i in 5" :key="i">
+                    <div
+                        class="text1"
+                        data-swiper-parallay="-300"
+                        data-swiper-parallax-scale="0.15"
+                        data-swiper-parallax-duration="600"
+                    >
+                        概念潮流藏品
+                    </div>
+                    <div
+                        class="text2"
+                        data-swiper-parallax="-300"
+                        data-swiper-parallax-scale="0.15"
+                        data-swiper-parallax-duration="600"
+                    >
+                        限量发售
+                    </div>
+                </swiper-slide>
+            </swiper>
+        </div>
+
+        <!-- 通知 -->
+        <van-notice-bar
+            left-icon="volume-o"
+            background="#fff"
+            color="#000"
+            text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
+        >
+            <template #left-icon>
+                <img class="bar-icon" src="@assets/home_icon_redian.png" alt="" />
+                <div class="driver"></div>
+            </template>
+        </van-notice-bar>
+
+        <van-cell title="初级场" value="全部" is-link />
+    </div>
 </template>
 
 <script>
-export default {};
+import { Swiper, SwiperSlide } from 'swiper/vue';
+
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
+import SwiperCore, { Pagination, Autoplay, Parallax, Controller } from 'swiper';
+import { ref } from 'vue-demi';
+
+// install Swiper modules
+SwiperCore.use([Pagination, Autoplay, Parallax, Controller]);
+export default {
+    components: {
+        Swiper,
+        SwiperSlide
+    },
+    setup() {
+        const firstSwiper = ref(null);
+        const secondSwiper = ref(null);
+        const setFirstSwiper = swiper => {
+            firstSwiper.value = swiper;
+        };
+        const setSecondSwiper = swiper => {
+            secondSwiper.value = swiper;
+        };
+
+        return {
+            Controller,
+            firstSwiper,
+            secondSwiper,
+            setFirstSwiper,
+            setSecondSwiper
+        };
+    }
+};
 </script>
 <style lang="less" scoped>
 .home {
     background: var(--bg2);
+    position: relative;
+}
+
+.swiper-content {
+    padding-bottom: 6.4vw;
+}
+.swiper-box {
+    margin: 0 auto;
+    height: 25vw;
+    width: 89vw;
+    background: #112982 linear-gradient(135deg, #d700ff 0%, #3e22ff 100%);
+    box-shadow: 0px 0px 6px 0px #4a65ff;
+    border-radius: 2px;
+    --swiper-theme-color: #fff;
+    --swiper-pagination-color: #fff;
+    position: absolute;
+    top: 40vw;
+    left: 5.5vw;
+    .swiper-slide {
+        .flex-col();
+        align-items: center;
+        justify-content: center;
+        .text1 {
+            font-size: 20px;
+            font-weight: bold;
+            color: #ffffff;
+            line-height: 28px;
+            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
+        }
+        .text2 {
+            font-size: 12px;
+            color: #ffffff;
+            line-height: 17px;
+            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
+            margin-top: 2px;
+            margin-bottom: 15px;
+        }
+    }
+
+    /deep/.swiper-pagination-bullet {
+        background-color: #fff;
+        width: 18px;
+        height: 2px;
+        border-radius: 2px;
+    }
+    /deep/.swiper-pagination {
+        bottom: calc(2.7vw + 6px);
+    }
+}
+
+.van-notice-bar {
+    margin: 16px 20px;
+    --van-notice-bar-font-size: 13px;
+    border-radius: 4px;
+    .bar-icon {
+        width: 43px;
+        height: 16px;
+    }
+
+    .driver {
+        width: 1px;
+        height: 10px;
+        background: rgba(0, 0, 0, 0.2);
+        margin: 0 8px 0 9px;
+    }
+}
+
+/deep/.van-cell {
+    --van-cell-background-color: var(--bg2);
+    --van-cell-horizontal-padding: 20px;
+    .van-cell__title {
+        font-size: 16px;
+        font-weight: bold;
+    }
 }
 </style>