ks-app-employment-service/packageB/train/mockExam/examList.vue

<template>
	<div class="app-box">
		<div class="con-box">
			<template #headContent>
			    <view class="collection-search">
			        <view class="search-content">
			            <view class="header-input button-click">
			                <uni-icons class="iconsearch" color="#6A6A6A" type="search" size="22"></uni-icons>
			                <input
			                    class="input"
			                    v-model="searchKeyword"
			                    @confirm="searchVideo"
			                    placeholder="输入考试名称"
			                    placeholder-class="inputplace"
			                />
			                <uni-icons 
			                    v-if="searchKeyword" 
			                    class="clear-icon" 
			                    type="clear" 
			                    size="24" 
			                    color="#999" 
			                    @click="clearSearch"
			                />
			            </view>
			        </view>
			    </view>
			</template>
			<scroll-view scroll-y class="main-scroll" @scrolltolower="handleScrollToLower">
				<div class="cards">
					<div class="cardHead">
						<div class="cardHeadLeft">
							<div class="cardTitle">2025年注册会计师证</div>
							<div class="titleType primary">未开始</div>
						</div>
						<div class="rightBtn">立即练习</div>
					</div>
					<div class="heng"></div>
					<div class="cardCon">
						<div class="conten">考试时长：120分钟</div>
						<div class="conten">题目数量：88题</div>
						<div class="conten">及格分数：60分</div>
						<div class="conten">截止日期：2025-12-31</div>
					</div>
					<div class="flooter">
						<div @click="jumps('/packageB/train/mockExam/viewGrades')">查看成绩</div>
						<div>详情</div>
						<div>收藏</div>
					</div>
				</div>
				<div class="cards"></div>
				<div class="cards"></div>
			</scroll-view>
		</div>
		<div class="cards2" v-if="dialogVisible">
			<div class="cardCon">
				<div class="cardHead">
					<div></div>
					<div style="font-size: 40rpx;" @click="clones()">×</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script setup>
import { inject, ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const { $api, navTo, navBack } = inject('globalFunction');
import config from "@/config.js"
const searchKeyword = ref('');
const pageState = reactive({
    page: 0,
    list: [],
    total: 0,
    maxPage: 1,
    pageSize: 12,
    search: {},
});
const baseUrl = config.imgBaseUrl
const dialogVisible = ref(false);
const handleScrollToLower = () => {
    
};
function jumps(url){
	navTo(url);
}
function clones(){
	dialogVisible.value=false
}
</script>

<style lang="stylus" scoped>
.app-box{
	width: 100%;
	height: 100vh;
	position: relative;
	.con-box{
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top:0;
		z-index: 10;
		padding: 20rpx 28rpx;
		box-sizing: border-box;
		overflow: hidden;
		.collection-search{
		    padding: 10rpx 20rpx;
		    .search-content{
		        position: relative
		        display: flex
		        align-items: center
		        padding: 14rpx 0
		        .header-input{
		            padding: 0
		            width: calc(100%);
		            position: relative
		            .iconsearch{
		                position: absolute
		                left: 30rpx;
		                top: 50%
		                transform: translate(0, -50%)
		                z-index: 1
		            }
		            .input{
		                padding: 0 80rpx 0 80rpx
		                height: 80rpx;
		                background: #FFFFFF;
		                border-radius: 75rpx 75rpx 75rpx 75rpx;
		                border: 2rpx solid #ECECEC
		                font-size: 28rpx;
		            }
		            .clear-icon{
		                position: absolute
		                right: 30rpx;
		                top: 50%
		                transform: translate(0, -50%)
		                z-index: 1
		                cursor: pointer
		            }
		            .inputplace{
		                font-weight: 400;
		                font-size: 28rpx;
		                color: #B5B5B5;
		            }
		        }
		    }
		}
		.main-scroll {
		    width: 100%;
		    height: 100%;
			.cards{
				width: 100%;
				height: 260rpx;
				background: linear-gradient(0deg, #E3EFFF 0%, #FBFDFF 100%);
				// box-shadow: 0px 0px 6px 0px rgba(0,71,200,0.32);
				border-radius: 12rpx;
				border: 2px solid #EDF5FF;
				margin-bottom: 30rpx;
				padding: 30rpx 40rpx 0;
				box-sizing: border-box
				.cardHead{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.cardHeadLeft{
						display: flex;
						align-items: center
						width: 75%;
						.cardTitle{
							font-weight: bold;
							font-size: 28rpx;
							color: #0069CB;
							max-width: 75%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.titleType{
							border-radius: 4px;
							font-size: 22rpx;
							color: #157EFF;
							width: 100rpx;
							height: 38rpx;
							text-align: center;
							line-height: 38rpx;
							margin-left: 10rpx;
						}
						.primary{
							border: 1px solid #157EFF;
							color: #157EFF
						}
						.success{
							border: 1px solid #05A636;
							color: #05A636
						}
						.info{
							border: 1px solid #898989;
							color: #898989
						}
					}
					.rightBtn{
						width: 140rpx;
						height: 44rpx;
						line-height: 44rpx;
						background: linear-gradient(90deg, #00C0FA 0%, #1271FF 100%);
						border-radius: 4px;
						color: #fff;
						font-size: 24rpx;
						text-align: center
					}
				}
				.heng{
					width: 120rpx;
					height: 4rpx;
					background: linear-gradient(88deg, #015EEA 0%, #00C0FA 100%);
					margin: 10rpx 0 30rpx;
				}
				.cardCon{
					display: flex;
					flex-wrap: wrap;
					.conten{
						width: 50%;
						font-size: 22rpx;
						color: #666666;
						display: flex;
						align-items: center
						margin-bottom: 20rpx;
					}
				}
				.flooter{
					border-top: 1px solid #ccc;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					view{
						font-size: 28rpx;
						margin-left: 30rpx;
						color: #2175F3;
					}
				}
			}
		}
	}
	.cards2{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		z-index: 10000;
		padding: 100rpx 50rpx;
		box-sizing: border-box;
		.cardCon{
			height: 100%;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			.cardHead{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30rpx;
				font-weight: 600;
			}
			
		}
	}
}
</style>