首页

pages/index/index.vue

@@ -1,81 +1,183 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}6666</text>
-
-			<input @click="denglu" placeholder="自动获得焦点" />
+	<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 setup>
-	import {
-		getAppConfig,
-		login,
-		kaoshiList
-	} from '@/api/login.js'
-	import {
-		ref
-	} from 'vue';
-	let title = ref('Hello')
-	//console.log(this)
-	// getAppConfig();
-
-	console.log(lli)
-
-	const denglu = () => {
-		let req = {
-			//lli.encode()
-			password: 'sVXqow3/+jG5kIDVGqoezXoK/Pceal1cf/kiojvUdvSU0qTjm5ikUz9CHcsu05I9whRxeep/TDVAcNl2dEqAgSUr5Ufq1FDdHr5Pn/HA5LfoZV+n5j82RE93cwcrCJw6/MwW3ZWgISzvG5qN8t9IzkRX2qMB/7SJxnh3NzoaxX4=',
-			userName: 'root'
+<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')
+			},
 		}
-		login(req).then(res => {
-			let obj  = JSON.stringify(res.data)
-			console.log(obj)
-			uni.setStorage({
-				key: 'Mta-Auth',
-				data: obj // 假设 this.userInputValue 是用户输入的数据
-			});
-
-			setTimeout(() => {
-				let req = {
-					'page': 1,
-					'size': 4,
-					'status': 1,
-				}
-				kaoshiList(req).then(res=>{
-					console.log(res)
-				})
-			}, 5000)
-		})
 	}
 </script>
 
-<style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+<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;
+	    }
 	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+	
+	//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;}
 	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
+	
+	// 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;}
 	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	
+	// 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>
+}
+</style>