|
@@ -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>
|