uniProject/pages/index/index.vue

<template>
	<view class="lli-index-page">
		<!-- banner -->
		<view class="index-imgbox">
		    <img :src="banners||defultbanners" class="index-banner-img"/>
		</view>
		<!-- meul-box -->
		<view class="index-meul-box">
			<uni-grid :column="4" :show-border="false" :square="false" @change="change">
				<uni-grid-item v-for="(item ,index) in menuList" :index="index" :key="index">
					<view class="lli-grid-item">
						<image class="grid-item-image" :src="item.url" mode="aspectFill" />
						<text class="grid-item-text">{{item.text}}</text>
						<view v-if="item.badge" class="grid-dot">
							<uni-badge :text="item.badge" :type="item.type" :customStyle="{background: '#FF5551'}" />
						</view>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		
		<!-- 课程list -->
		<view class="lli-index-title-box">
			<text class="index-title">最热课程</text>
			<text class="index-sub-title">查看更多 ></text>
		</view>
		<!-- 考试list -->
		<view class="lli-card-box">
			<uni-card padding="0" margin="0" spacing="0" :is-shadow="false" :border="false" v-for="(item ,index) in examCardList" :index="index" :key="index" class="lli-card-item">
				<template v-slot:cover>
					<view class="custom-cover">
						<image class="lli-card-image" mode="aspectFill" :src="item.cover"></image>
						<view class="cover-content">
							<text class="uni-subtitle uni-white">{{item.tag}}</text>
						</view>
					</view>
				</template>
				<text class="lli-card-name">{{item.name}}</text>
			</uni-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: null,
				defultbanners:'/static/images/index/index-banner.png',
				menuList: [{
						url: '/static/images/index/index-kc-img.png',
						text: '我的课程',
					},
					{
						url: '/static/images/index/index-ks-img.png',
						text: '我的考试',
					},
					{
						url: '/static/images/index/index-lx-img.png',
						text: '每日一练',
					},
					{
						url: '/static/images/index/index-gg-img.png',
						text: '公告',
						badge: '99',
					},
				],
				examCardList: [{
						cover: 'https://saas-mta.oss-cn-beijing.aliyuncs.com/defaultPic/kecheng/pic/kc2.png',
						name: '我的课程',
						tag: '已学完',
					},
					{
						cover: 'https://saas-mta.oss-cn-beijing.aliyuncs.com/defaultPic/kecheng/pic/kc1.png',
						name: '我的考试',
						tag: '待学习',
					},
					{
						cover: 'https://saas-mta.oss-cn-beijing.aliyuncs.com/defaultPic/kecheng/pic/kc3.png',
						name: '每日一练',
						tag: '已学完',
					},
					{
						cover: 'https://saas-mta.oss-cn-beijing.aliyuncs.com/defaultPic/kecheng/pic/kc4.png',
						name: '北京市出租汽车驾驶员从业资格考试',
						tag: '待学习',
					},
				],
			}
		},
		methods: {
			change(e){
				let {index} = e.detail
				    switch (index) {
				        case 0:
				            uni.switchTab({
				            	url: '/pages/course/index'
				            });
				            break;
				        case 1:
				            uni.switchTab({
				            	url: '/pages/exam/index'
				            });
				            break;
				        case 2:
				            uni.showToast({
								icon: 'none',
				            	title: '开发中，敬请期侍！',
				            });
				            break;
				        case 3:
				            uni.showToast({
								icon: 'none',
				            	title: '开发中，敬请期侍！',
				            });
				            break;
							}
				console.log(index,'change')
			},
		}
	}
</script>

<style lang="scss">
.lli-index-page{
	padding: 24rpx;
	background: #FCFBFC;
	// min-height: 100vh;
	// banner
	.index-imgbox {
	    text-align: center;width: 100%;
	    .index-banner-img {
	      width: 702rpx;
	      height: 242rpx;
	      display: inline-block;
	      border-radius: 4px;
	    }
	}
	
	//meul-box
	.index-meul-box{
		.lli-grid-item {
				flex: 1;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15px 0;
			}
		.grid-item-image {width: 99rpx;height: 113rpx;}
		.grid-item-text {font-size: 24rpx;color: $uni-text-color;}
		.grid-dot {position: absolute;top: 5px;right: 15px;}
	}
	
	// title-box
	.lli-index-title-box{
		margin: 44rpx 0 32rpx;display: flex;justify-content: space-between;align-items: center;
		.index-title{font-size: 32rpx;color: #333;font-weight: 800;display: inline-flex;align-items: center;}
		.index-title:before{content:'';width: 3px;height: 30rpx;background: $uni-primary;margin-right: 8px;display: block;}
		.index-sub-title{font-size: 24rpx;color: #9c9c9c;font-weight: normal;}
	}
	
	// card
	.lli-card-box{width: 100%;display: flex;display: -webkit-flex; /* 兼容性写法 */justify-content: space-between;flex-wrap: wrap;margin-bottom: 8px;}
	.lli-card-item{
		width: 49%;flex: unset;padding: 12rpx 12rpx 0;box-sizing: border-box;
		border-radius: 20rpx;background-color: #ffffff;margin-bottom: 20rpx;
		.lli-card-image{max-width: 100%;height: 180rpx;border-radius: 8rpx;}
		.custom-cover {max-width: 100%;height: 180rpx;border-radius: 8rpx;overflow: hidden;position: relative;}
		.cover-content {
			position: absolute;bottom: 0;left: 0;padding: 8rpx 10rpx 8rpx 20rpx;background: rgba(0, 0, 0, 0.29);
			color: #fff;font-size: 22rpx;border-radius: 0 10rpx 0 10rpx;
		}
		.lli-card-name{
			font-size: 28rpx;line-height: 36rpx;color: #565656;margin: 20rpx 0;
			display: -webkit-box;-webkit-line-clamp: 2;overflow: hidden;
			text-overflow: ellipsis;-webkit-box-orient: vertical;
		}
	}
}
</style>