轮播图ok

babel.config.js

@@ -1,5 +1,9 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
+  plugins: [
+    ['import', {
+      libraryName: 'vant',
+      libraryDirectory: 'es',
+      style: true,
+    }, 'vant']
   ]
 }

package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "postcss-pxtorem": "^6.0.0",
+    "swiper": "^9.4.1",
+    "vant": "^2.12.54",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2"
@@ -22,6 +24,7 @@
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "babel-plugin-import": "^1.13.6",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
     "sass": "^1.32.7",

src/App.vue

@@ -1,16 +1,26 @@
 <template>
   <div id="app">
-    <router-view/>
+    <router-view />
   </div>
 </template>
 
 <style lang="scss">
-*{margin: 0; padding: 0;}
+* {
+  margin: 0;
+  padding: 0;
+}
+
 html {
-    font-size: 10px;  // 相当于1rem = 10px
+  width: 100vw;
+  height: 100vh;
+  font-size: 16px; // 相当于1rem = 10px
+  position: relative;
 }
 
 body {
-    font-size: 16px;
+  width: 100vw;
+  height: 100vh;
+  font-size: 16px;
+  position: relative;
 }
 </style>

src/main.js

@@ -3,6 +3,8 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import '@/util/rem.js'
+import 'vant/lib/index.css'; // 引入 Vant 样式
+
 
 Vue.config.productionTip = false
 

src/router/index.js

@@ -8,9 +8,20 @@ const routes = [
     path: '/',
     name: 'fuzeren',
     component: () => import('../views/Fuzeren/FuzerenView.vue')
-  }
+  },
+  //首页
+  {
+    path: '/index',
+    name: 'index',
+    component: () => import('../views/userindex/indexpage/UserIndex.vue')
+  },
+  //文章页
+  // {
+  //   path: '/textpage',
+  //   name: 'textpage',
+  //   component: () => import('../views/userindex/indexpage/Textpage.vue')
+  // },
 ]
-
 const router = new VueRouter({
   mode: 'history',
   base: process.env.BASE_URL,

src/views/Fuzeren/FuzerenView.vue

@@ -5,69 +5,73 @@
 
     <!-- 个人信息模块 -->
     <div class="PersonalInformation">
-        <!-- 内块 -->
-        <div class="PI-bodyInnerblock">
-            <!-- 用户名 -->
-            <div class="wx_password">
-                <p>{{ wx_password }}</p>
-            </div>
+      <!-- 内块 -->
+      <div class="PI-bodyInnerblock">
+        <!-- 用户名 -->
+        <div class="wx_password">
+          <p>{{ wx_password }}</p>
         </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-    data() {
-        return{
-            wx_password:"淡忘-zhouzhandui",
-        }
-    },
-    methods:{
+  data () {
+    return {
+      wx_password: "淡忘-zhouzhandui",
+    }
+  },
+  methods: {
 
-    },
-    mounted:{
+  },
+  mounted () {
 
-    },
-    components:{
+  },
+  components: {
 
-    }
+  }
 }
 </script>
 
 <style lang="scss">
-    #FuzeRen{
-        width: 100vw;
-        height: 100vh;
-        background-color: #f2f4f8;
-        .top-color{
-            width: 100vw;
-            height: 17vh;
-            background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
-            position: fixed;
-        }
-        .PersonalInformation{
-            width: 95vw;
-            height: 23vh;
-            background-color: #fff;
-            border-radius: 1vh;
-            position: relative;
-            z-index: 1;
-            top: 8vh;
-            margin: 0 auto;
-            .PI-bodyInnerblock{
-                width: 90vw;
-                height: 20vh;
-                background-color: #ffeaea;
-                margin: 0 auto;
-                padding-top: 3vh;
-                .wx_password{
-                    p{
-                        color: #333;
-                        font-size: 1.6rem;
-                    }
-                }
-            }
+#FuzeRen {
+  width: 100vw;
+  height: 100vh;
+  background-color: #f2f4f8;
+
+  .top-color {
+    width: 100vw;
+    height: 17vh;
+    background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
+    position: fixed;
+  }
+
+  .PersonalInformation {
+    width: 95vw;
+    height: 23vh;
+    background-color: #fff;
+    border-radius: 1vh;
+    position: relative;
+    z-index: 1;
+    top: 8vh;
+    margin: 0 auto;
+
+    .PI-bodyInnerblock {
+      width: 90vw;
+      height: 20vh;
+      background-color: #ffeaea;
+      margin: 0 auto;
+      padding-top: 3vh;
+
+      .wx_password {
+        p {
+          color: #333;
+          font-size: 1.6rem;
         }
+      }
     }
+  }
+}
 </style>

src/views/userindex/indexpage/UserIndex.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="indexbox">
+    <div class="banner">
+      <swipe class="my-swipe" :autoplay="1000" indicator-color="white">
+        <swipe-item><img
+            src="https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
+            alt=""></swipe-item>
+        <swipe-item><img src="https://img1.baidu.com/it/u=3539595421,754041626&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
+            alt=""></swipe-item>
+        <swipe-item>3</swipe-item>
+        <swipe-item>4</swipe-item>
+      </swipe>
+    </div>
+    <div class="title">
+      <tabs v-model="active">
+        <tab title="标签 1">内容 1</tab>
+        <tab title="标签 2">内容 2</tab>
+        <tab title="标签 3">内容 3</tab>
+        <tab title="标签 4">内容 4</tab>
+      </tabs>
+    </div>
+  </div>
+</template>
+<script>
+import { Swipe, SwipeItem, Tab, Tabs } from 'vant';
+export default {
+  components: {
+    Swipe, SwipeItem, Tab, Tabs
+  }
+}
+</script>
+<style  lang="scss">
+//swiper
+.indexbox {
+  width: 90vw;
+  height: 100vh;
+  margin: 0 auto;
+  padding-top: 2rem;
+  box-sizing: border-box;
+
+  .banner {
+    width: 100%;
+    height: 15rem;
+    background-color: red;
+    overflow: hidden;
+
+    .my-swipe .van-swipe-item {
+      color: #fff;
+      // line-height: 150px;
+      height: 15rem;
+      text-align: center;
+      background-color: #39a9ed;
+    }
+
+    img {
+      width: 100%;
+      height: 15rem;
+    }
+
+    // .my-swipe {
+    //   .swipe-item {
+    //     color: #fff;
+    //     font-size: 20px;
+    //     line-height: 150px;
+    //     text-align: center;
+    //   }
+    // }
+  }
+
+  .title {
+    padding-top: 2rem;
+
+    .van-tabs__wrap {
+      height: 3rem;
+
+      .van-tab {
+        line-height: 2rem;
+      }
+    }
+  }
+}
+</style>