新增组件 tags course页面绘制

src/pages/course/index.vue

@@ -7,6 +7,7 @@
 				<uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/>
 				课程中心
 			</view>
+			<view class="input-view">
 			<uv-input shape="circle"
 				placeholderStyle='color:#999999;font-size:28rpx' 
 				placeholder="请输入课程名" 
@@ -15,13 +16,39 @@
 				:suffixIconStyle="suffixIconStyle" 
 				:readonly="true">
 			</uv-input>
-			<uv-tabs :list="tabList" @click="changeTab"></uv-tabs>
+			</view>
+			<view class="tabs-view">
+				<uv-tabs :list="tabList" @click="changeTab" :scrollable="false"
+				active-style="font-weight:bold; color:#000;"
+				line-color="#06f"
+				></uv-tabs>
+			</view>
+			<view class="list-view">
+				<uv-scroll-list class="tags-view" :indicator="false">
+					<uv-tags text="全部" shape="circle" plain class="tags-item" size="mini"></uv-tags>
+					<uv-tags text="全部" v-for="item in 15" shape="circle" plain type="info" class="tags-item" size="mini"></uv-tags>
+				</uv-scroll-list>
+				<view class="course-list">
+					<view class="left-type-list">
+						<view  v-for="item in 6" :class="['type-item', item == 3 ?'is-active':'']">
+							课程分类
+							</view>
+					</view>
+					<view class="right-course-list"></view>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
 	import common from '@/common/common'
+	import {
+		getPrdLineTypeListApi,
+		getTraTagListApi,
+		getCourseTypeListApi
+} from "@/api/course.js"
+import { onMounted } from 'vue'
 	const customStyle = {
 		backgroundColor: "#ffffff",
 		paddingLeft: "40rpx",
@@ -34,6 +61,11 @@
 		color: "#2c8ef2",
 		fontSize: "40rpx"
 	}
+	const tabsCustomStyle ={
+		backgroundColor: "#ffffff",
+		marginTop: '23rpx',
+		borderRadius: '23rpx',
+	}
 	const tabList = [
 			{ name:'全部'},
 			{ name:'热门'},
@@ -45,6 +77,11 @@
 		console.log(item)
 		
 	}
+	onMounted(()=>{
+		// getPrdLineTypeListApi().then(res=>{
+		// 	console.log(res)
+		// })
+	})
 </script>
 
 <style lang="scss" scoped>
@@ -54,7 +91,7 @@
 		flex-direction: column;
 		.top-bg{
 			background: linear-gradient(16deg,rgba(234,246,255,0) 0%,#c3e6ff 100%);
-			height: 419rpx;
+			height: 480rpx;
 			width: 750rpx;
 		}
 		.bot-bg{
@@ -71,6 +108,8 @@
 			width: 100%;
 			padding:0 15rpx;
 			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
 			.body-title{
 				height: 150rpx;
 				text-align: center;
@@ -78,6 +117,8 @@
 				padding-top: 70rpx;
 				line-height: 46rpx;
 				box-sizing: border-box;
+				font-weight: 500;
+				color:#000;
 				position: relative;
 				.arrow-icon{
 					position: absolute;
@@ -86,6 +127,67 @@
 					color: #000;
 				}
 			}
+			.input-view{
+				
+			}
+			.tabs-view{
+				background: #ffffff;
+				margin-top: 23rpx;
+				border-radius: 23rpx;
+				padding: 6rpx 10rpx 12rpx;
+				margin-bottom:15rpx;
+			}
+			.list-view{
+				flex:1;
+				margin-bottom: 80rpx;
+				background: #ffffff;
+				border-radius: 23rpx;
+				display: flex;
+				flex-direction: column;
+				.tags-view{
+					height: 84rpx;
+					display: block;
+					padding: 20rpx;
+					box-sizing: border-box;
+					white-space: nowrap;
+					border-bottom: 2rpx solid #eee;
+					.tags-item{
+						margin-right: 30rpx;
+						display: inline-block;
+						::v-deep .uv-tags{
+							padding: 0 20rpx;
+							.uv-tags__text{
+								white-space: nowrap;
+							}
+						}
+					}
+				}
+				.course-list{
+					display: flex;
+						flex:1;
+					.left-type-list{
+						width: 152rpx;
+						border-right: 2rpx solid #eee;
+						.type-item{
+							height: 90rpx;
+							line-height: 90rpx;
+							font-size: 28rpx;
+							box-sizing: border-box;
+							padding: 0 18rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+							&.is-active{
+								background-color: rgba(44,142,242,.1);
+								color: #06f;
+							}
+						}
+					}
+					.right-course-list{
+						flex:1;
+					}
+				}
+			}
 		}
 	}
 </style>