提交资源库

pages/resource/resource.vue

@@ -1,19 +1,207 @@
 <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 {
-				
-			};
+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">
+<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>