teaching-uniapp/pages/resource/resource.vue

<template>
	<view>
		<uni-search-bar bgColor="#f0f2f5" placeholder="搜索" cancelButton="none" clearButton="none" :focus="true"></uni-search-bar>
		<view class="links">
			<button class="link-button" :class="{ active: isActive1 }" @click="toggleActive1">资源库</button>
			<button class="link-button" :class="{ active: isActive2 }" @click="toggleActive2">精品课程</button>
		</view>
		<view class="" v-if="tab">
			<uni-section type="line">
				<uni-grid :column="2" :show-border="false" :square="false">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<view class="grid-item-box">
							<view class="v1">
								<image class="image" :src="item.url" mode="aspectFill" />

								<text class="text">{{ item.text }}</text>
								<text class="text1">{{ item.text1 }}</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
		<view class="" v-else>
			<uni-section type="line">
				<uni-grid :column="2" :show-border="false" :square="false">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<view class="grid-item-box">
							<view class="v1">
								<image class="image" :src="item.url" mode="aspectFill" />

								<text class="text">{{ item.text }}1</text>
								<text class="text1">{{ item.text1 }}</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</uni-section>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isActive1: true,
			isActive2: false,
			tab: true,

			list: [
				{
					url: '/static/resouce/jqr.png',
					text: '这里是课程名称课程名称课程名称...',
					badge: '0',
					text1: '主讲教师:苏某某'
				},
				{
					url: '/static/resouce/jqr.png',
					text: '这里是课程名称课程名称课程名称...',
					badge: '0',
					text1: '主讲教师:苏某某'
				},
				{
					url: '/static/resouce/jqr.png',
					text: '这里是课程名称课程名称课程名称...',
					badge: '0',
					text1: '主讲教师:苏某某'
				},
				{
					url: '/static/resouce/jqr.png',
					text: '这里是课程名称课程名称课程名称...',
					badge: '0',
					text1: '主讲教师:苏某某'
				},
				{
					url: '/static/resouce/jqr.png',
					text: '这里是课程名称课程名称课程名称...',
					badge: '0',
					text1: '主讲教师:苏某某'
				},
				{
					url: '/static/resouce/jqr.png',
					text: '这里是课程名称课程名称课程名称...',
					badge: '0',
					text1: '主讲教师:苏某某'
				},
				{
					url: '/static/resouce/jqr.png',
					text: '这里是课程名称课程名称课程名称...',
					badge: '0',
					text1: '主讲教师:苏某某'
				}
			]
		};
	},
	methods: {
		toggleActive1() {
			this.isActive1 = !this.isActive1;
			this.isActive2 = false; // 清除第二个按钮的样式
			this.tab = !this.tab;
		},
		toggleActive2() {
			this.isActive2 = !this.isActive2;
			this.isActive1 = false; // 清除第二个按钮的样式
			this.tab = !this.tab;
		}
	}
};
</script>

<style lang="scss" scoped>
uni-search-bar {
	border-radius: 4px;
}
.links {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin-top: 16px;
}

.link-button {
	border: none; /* 无边框 */
	color: #c2c2c2; /* 文本颜色 */
}
.link-button:after {
	border: none;
}
.link-button.active {
	color: #616366;
	// background: url('../../static/resouce/bg.png') no-repeat;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)), url('../../static/resouce/bg.png') no-repeat;
	background-position: 50% 95%;
	background-size: 85%;
	// box-shadow: 0px 5px 5px skyblue;
}
.image {
	width: 150px;
	height: 100px;
	border-radius: 4px;
}

.text {
	font-weight: 600;
	max-width: 120px;
	font-size: 14px;
	margin-top: 5px;
}
.text1 {
	margin-top: 5px;
	color: #999999;
	max-width: 120px;
	font-size: 10px;
}
.grid-dynamic-box {
	margin-bottom: 15px;
}
.uni-grid-item {
	height: 160px;
}
.grid-item-box {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;

	padding: 10px 0;
	height: 160px;
	.v1 {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: flex-start;
		height: 160px;
	}
}

.grid-item-box-row {
	flex: 1;
	// position: relative;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
	.swiper {
		height: 630px;
	}
}

@media screen and (min-width: 1425px) {
	.swiper {
		height: 830px;
	}
}
</style>