更新

src/main.js

@@ -12,6 +12,7 @@ import '@/plugins/loading';
 import '@/plugins/var';
 import '@/plugins/methods';
 import '@/plugins/setting';
+import '@/iconfont/iconfont.css';
 import InitStomp from '@/plugins/stomp';
 Vue.config.productionTip = false;
 

src/views/index.vue

@@ -1,8 +1,54 @@
 <template>
   <div id="index" class="container">
-    <el-row>
-      <el-col :span="24" class="style">
-        <el-col :span="24" class="title">
+    <van-row>
+      <van-row>
+        <van-col span="24" class="style">
+          <van-col span="24" class="banner">
+            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+              <van-swipe-item class="swipList" v-for="(item, index) in swipList" :key="index">
+                <van-image :src="item.url" />
+              </van-swipe-item>
+            </van-swipe>
+          </van-col>
+          <van-col span="24" class="click">
+            <van-col span="6" class="btn" @click.native="$router.push({ path: '/live/roomlist' })">
+              <i class="iconfont iconzhibo icon"></i>
+              <p>直播入口</p>
+            </van-col>
+            <van-col span="6" class="btn" @click.native="$router.push({ path: '/live/roomrecord' })">
+              <i class="iconfont icondajiangtang icon"></i>
+              <p>往期讲堂</p>
+            </van-col>
+            <van-col span="6" class="btn" @click.native="$router.push({ path: '/user/index' })">
+              <i class="iconfont icongerenzhongxin icon"></i>
+              <p>个人中心</p>
+            </van-col>
+            <van-col span="6" class="btn">
+              <i class="iconfont icongerenzhongxin icon"></i>
+              <p>测试按钮</p>
+            </van-col>
+          </van-col>
+          <van-col span="24" class="after">
+            <h4>往期直播</h4>
+            <van-col span="24">
+              <van-col span="12" class="videoList" v-for="(item, index) in videoList" :key="index">
+                <van-image :src="item.videoUrl" />
+                <p>{{ item.title }}</p>
+              </van-col>
+            </van-col>
+          </van-col>
+          <van-col span="24" class="foot">
+            <van-tabbar v-model="active">
+              <van-tabbar-item icon="home-o">測試</van-tabbar-item>
+              <van-tabbar-item icon="search">測試</van-tabbar-item>
+              <van-tabbar-item icon="friends-o">測試</van-tabbar-item>
+              <van-tabbar-item icon="setting-o">測試</van-tabbar-item>
+            </van-tabbar>
+          </van-col>
+        </van-col>
+      </van-row>
+    </van-row>
+    <!-- <el-col :span="24" class="title">
           <span>叁多健康管理平台</span>
         </el-col>
         <el-col :span="24" class="main">
@@ -26,9 +72,7 @@
         </el-col>
         <el-col :span="24" class="foot">
           <span>潍坊恒源科技有限公司</span>
-        </el-col>
-      </el-col>
-    </el-row>
+        </el-col> -->
   </div>
 </template>
 
@@ -46,6 +90,47 @@ export default {
     isleftarrow: '',
     // 返回
     navShow: true,
+    // 轮播图
+    swipList: [
+      {
+        url: require('@/assets/test1.jpg'),
+      },
+      {
+        url: require('@/assets/test1.jpg'),
+      },
+      {
+        url: require('@/assets/test1.jpg'),
+      },
+    ],
+    // 往期直播
+    videoList: [
+      {
+        videoUrl: require('@/assets/test1.jpg'),
+        title: '测试标题',
+      },
+      {
+        videoUrl: require('@/assets/test1.jpg'),
+        title: '测试标题',
+      },
+      {
+        videoUrl: require('@/assets/test1.jpg'),
+        title: '测试标题',
+      },
+      {
+        videoUrl: require('@/assets/test1.jpg'),
+        title: '测试标题',
+      },
+      {
+        videoUrl: require('@/assets/test1.jpg'),
+        title: '测试标题',
+      },
+      {
+        videoUrl: require('@/assets/test1.jpg'),
+        title: '测试标题',
+      },
+    ],
+    // 底部标签
+    active: 0,
   }),
   created() {
     if (this.token) {
@@ -75,81 +160,56 @@ export default {
   mounted() {},
 };
 </script>
-
 <style lang="less" scoped>
 .style {
-  background-image: url(https://mc.qcloudimg.com/static/img/7da57e0050d308e2e1b1e31afbc42929/bg.png);
-  background-color: #333;
-  background-repeat: no-repeat;
-  background-size: cover;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  box-sizing: border-box;
-}
-
-.main {
-  min-height: 570px;
-}
-.foot {
-  position: absolute;
-  bottom: 20px;
-  text-align: center;
-  font-size: 16px;
-}
-
-.title {
-  color: #ffffff;
-  padding-top: 30px;
-  padding-bottom: 40px;
-  line-height: 60rpx;
-  height: 46px;
-  overflow: hidden;
-  position: relative;
-  z-index: 999;
-  text-align: center;
-  font-size: 18px;
-}
-.tips {
-  color: #ffffff;
-  font-size: 12px;
-  text-align: center;
-}
-.guide-box {
-  display: flex;
-  flex-wrap: wrap;
-  text-align: center;
-  padding: 20px 5vw;
-}
-.single-box {
-  width: 35vw;
-  height: 33vw;
-  background-color: rgba(0, 0, 0, 0.55);
-  text-align: center;
-  vertical-align: top;
-  margin: 5vw;
-  margin-bottom: 30px;
-}
-.icon {
-  display: block;
-  width: 50px;
-  height: 50px;
-  padding-top: 10px;
-  margin: 0 auto 0;
-}
-.label {
-  display: block;
-  padding-top: 12px;
-  color: #cfe4ff;
-  font-size: 16px;
-}
-.desc {
-  display: block;
-  margin-top: 2px;
-  color: #cfe4ff;
-  font-size: 16px;
-  white-space: nowrap;
+  .banner {
+    border-bottom: 1px solid red;
+    .swipList {
+      width: 100%;
+      height: 200px;
+      .van-image {
+        width: 100%;
+        height: 200px;
+      }
+    }
+  }
+  .click {
+    border-bottom: 1px solid #ccc;
+    .btn {
+      padding: 10px 0;
+      text-align: center;
+      .icon {
+        font-size: 40px;
+      }
+      p {
+        font-size: 12px;
+        padding: 5px 0 0 0;
+      }
+    }
+  }
+  .after {
+    margin: 0 0 50px 0;
+    h4 {
+      padding: 0 10px;
+    }
+    .videoList {
+      .van-image {
+        width: 100%;
+        height: 110px;
+      }
+      p {
+        width: 100%;
+        font-size: 14px;
+        padding: 5px 0;
+        color: #333;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+  .foot {
+  }
 }
 </style>