diff --git a/.env.development_h5 b/.env.development_h5
index 3b50f23b..713d6e58 100644
--- a/.env.development_h5
+++ b/.env.development_h5
@@ -3,3 +3,11 @@ ENV = 'development'
 # 'development'
 
 VITE_APP_BASE_API_Url = ''
+
+VITE_APP_BASE_H5_API_Url = 'http://25.18.122.65:7001'
+# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.91:9786'
+# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.78:9786'
+# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://192.168.247.200'
+# VITE_APP_BASE_H5_API_Url_TRASTUDY = 'http://25.64.32.154:9602'
+VITE_APP_BASE_H5_API_Url_TRAEXAM = ''http://25.64.32.154:9604'
+# VITE_APP_BASE_H5_API_Url_TRAASK = 'http://25.64.32.154:9605'
\ No newline at end of file
diff --git a/src/components/course-item/course-item.vue b/src/components/course-item/course-item.vue
index 77c2d1c4..e31434b3 100644
--- a/src/components/course-item/course-item.vue
+++ b/src/components/course-item/course-item.vue
@@ -1,15 +1,17 @@
 <template>
 	<view class="course-item-box" @click="clickItem">
+		<view class="item-title">{{itemInfo.crsName}}</view>
 		<view class="img-box-view">
-			<ImagePreview class="img-box" :imgId="itemInfo.imgId" :isCache="true" width="225" height="170" mode="scaleToFill"></ImagePreview>
+			<ImagePreview class="img-box" :imgId="itemInfo.imgId" :isCache="true" width="225" height="170" mode="scaleToFill">
+			</ImagePreview>
 			<view class="item-grade">{{itemInfo.evalGrade}}</view>
 			<!-- <image class="item-grade" mode="aspectFill"></view> -->
 		</view>
 		<view class="cont-box">
-			<view class="item-title">{{itemInfo.crsName}}</view>
 			<scroll-view class="item-tags" :scroll-x="true">
 				<view class="item-tag-view">
-					<view :class="['item-tag', this.activeTag.includes(item.tagId)?'active-tag':'']" v-for="item in tagsShowList">{{item.tagName}}</view>
+					<view :class="['item-tag', this.activeTag.includes(item.tagId)?'active-tag':'']" v-for="item in tagsShowList">
+						{{item.tagName}}</view>
 				</view>
 			</scroll-view>
 			<view class="item-publish">更新：{{itemInfo.mtTime}}</view>
@@ -18,50 +20,50 @@
 	</view>
 </template>
 
-<script >
+<script>
 	import ImagePreview from '@/components/image-preview/image-preview.vue'
 	export default {
-		name:"course-item",
-		components:{
+		name: "course-item",
+		components: {
 			ImagePreview
 		},
-		props:{
-			itemInfo:{
+		props: {
+			itemInfo: {
 				type: Object,
-				default:()=>({
+				default: () => ({
 					crsName: '',
-					tagCataList:[],
-					publicTime:"",
-					learnedNum:''
+					tagCataList: [],
+					publicTime: "",
+					learnedNum: ''
 				})
 			},
-			activeTag:{
+			activeTag: {
 				default: () => [],
 				type: Array
 			}
 		},
 		data() {
 			return {
-				
+
 			};
 		},
-		watch:{
-			activeTag:{
-				handler(){},
+		watch: {
+			activeTag: {
+				handler() {},
 				deep: true,
 				immediate: true
 			}
 		},
-		computed:{
-			tagsShowList(){
-				if(!this.activeTag) return this.itemInfo.tagCataList||[]
-				let _arr = (this.itemInfo.tagCataList||[]).filter(t=> this.activeTag.includes(t.tagId))
-				let _arr1 = (this.itemInfo.tagCataList||[]).filter(t=> !this.activeTag.includes(t.tagId))
+		computed: {
+			tagsShowList() {
+				if (!this.activeTag) return this.itemInfo.tagCataList || []
+				let _arr = (this.itemInfo.tagCataList || []).filter(t => this.activeTag.includes(t.tagId))
+				let _arr1 = (this.itemInfo.tagCataList || []).filter(t => !this.activeTag.includes(t.tagId))
 				return _arr.concat(_arr1)
 			}
 		},
-		methods:{
-			clickItem(){
+		methods: {
+			clickItem() {
 				this.$emit('clickItem', this.itemInfo)
 			}
 		}
@@ -69,43 +71,42 @@
 </script>
 
 <style lang="scss">
-.course-item-box{
-	padding: 15rpx;
-	overflow: hidden;
-	width: 100%;
-	.img-box-view{
-		width: 225rpx;
-		height: 170rpx;
-		float: left;
-		position: relative;
-		border-radius: 20rpx;
+	.course-item-box {
+		padding: 8rpx 15rpx;
 		overflow: hidden;
-		box-shadow: 0 0 10rpx #c3c3c3;
-		.img-box{
+		width: 100%;
+
+		.img-box-view {
 			width: 225rpx;
-			height: 170rpx;
+			height: 127rpx;
+			float: left;
+			position: relative;
+			border-radius: 20rpx;
+			overflow: hidden;
+			box-shadow: 0 0 10rpx #c3c3c3;
+
+			.img-box {
+				width: 225rpx;
+				height: 170rpx;
+			}
+
+			.item-grade {
+				position: absolute;
+				right: 0;
+				width: 60rpx;
+				height: 46rpx;
+				background-color: #ff581c;
+				top: 20rpx;
+				border-radius: 8rpx 0 0 8rpx;
+				color: #fff;
+				text-align: center;
+				// padding-right: 10rpx;
+				font-size: 28rpx;
+				line-height: 46rpx;
+			}
 		}
-		.item-grade{
-			position: absolute;
-			right: 0;
-			width: 60rpx;
-			height: 46rpx;
-			background-color: #ff581c;
-			top:20rpx;
-			border-radius: 8rpx 0 0 8rpx;
-			color:#fff;
-			text-align: center;
-			// padding-right: 10rpx;
-			font-size: 28rpx;
-			line-height: 46rpx;
-		}
-	}
-	.cont-box{
-		width: calc(100% - 225rpx);
-		box-sizing: border-box;
-		padding: 0 10rpx 0 20rpx;
-		float: left;
-		.item-title{
+
+		.item-title {
 			white-space: nowrap;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -114,47 +115,60 @@
 			font-weight: 500;
 			margin-bottom: 10rpx;
 		}
-		.item-tags{
-			.item-tag-view{
-				white-space: nowrap;
-				height: 44rpx;
-				.item-tag{
-					height: 38rpx;
-					line-height: 34rpx;
-					box-sizing: border-box;
-					font-size: 20rpx;
-					background-color: #fff;
-					color: #ffa150;
-					border: 2rpx solid #ffa150;
-					padding: 0 20rpx;
-					border-radius: 8rpx;
-					margin-right: 20rpx;
-					display: inline-block;
+
+		.cont-box {
+			width: calc(100% - 225rpx);
+			box-sizing: border-box;
+			padding: 0 10rpx 0 20rpx;
+			float: left;
+
+			.item-tags {
+				margin-bottom: 14rpx;
+
+				.item-tag-view {
 					white-space: nowrap;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					max-width: 200rpx;
-					box-sizing: border-box;
-					&.active-tag{
-						background-color: #ffa150;
-						color: #fff;
+					height: 44rpx;
+
+					.item-tag {
+						height: 38rpx;
+						line-height: 34rpx;
+						box-sizing: border-box;
+						font-size: 20rpx;
+						background-color: #fff;
+						color: #ffa150;
 						border: 2rpx solid #ffa150;
+						padding: 0 20rpx;
+						border-radius: 8rpx;
+						margin-right: 20rpx;
+						display: inline-block;
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						max-width: 200rpx;
+						box-sizing: border-box;
+
+						&.active-tag {
+							background-color: #ffa150;
+							color: #fff;
+							border: 2rpx solid #ffa150;
+						}
 					}
 				}
 			}
-		}
-		.item-publish,
-		.item-num{
+
+			.item-publish,
+			.item-num {
 				height: 32rpx;
 				line-height: 32rpx;
 				font-size: 20rpx;
-				color: rgb(102,102,102);
+				color: rgb(102, 102, 102);
 				margin-top: 6rpx;
 				white-space: nowrap;
-		}
-		.item-publish{
+			}
+
+			.item-publish {
 				margin-top: 0rpx;
+			}
 		}
 	}
-}
 </style>
\ No newline at end of file
diff --git a/src/pages/course/index.vue b/src/pages/course/index.vue
index 2a48ae87..46f2fba1 100644
--- a/src/pages/course/index.vue
+++ b/src/pages/course/index.vue
@@ -1,766 +1,904 @@
 <template>
-  <view class="course-center max_page">
-    <view class="top-bg"></view>
-    <view class="bot-bg"></view>
-    <view class="course-center-body">
-      <view class="body-title">
-        <!--  @click="test.testApi" -->
-        <uv-icon class="arrow-icon" name="arrow-left" @click="common.switchTab('/pages/index/index')" />
-        AI学习
-      </view>
-      <view class="input-view" @click="toSearchPage">
-        <uv-input shape="circle" placeholderStyle="color:#999999;font-size:28rpx" placeholder="请输入课程名" suffixIcon="search" :customStyle="customStyle" :suffixIconStyle="suffixIconStyle" :readonly="true"> </uv-input>
-      </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">
-        <view
-          class="filter-btn"
-          @click="
+	<view class="course-center max_page">
+		<view class="top-bg"></view>
+		<view class="bot-bg"></view>
+		<view class="course-center-body">
+			<view class="body-title">
+				<!--  @click="test.testApi" -->
+				<uv-icon class="arrow-icon" name="arrow-left" @click="common.switchTab('/pages/index/index')" />
+				AI学习
+			</view>
+			<view class="input-view" @click="toSearchPage">
+				<uv-input shape="square" placeholderStyle="color:#999999;font-size:28rpx;" placeholder="请输入课程名"
+					suffixIcon="search" :customStyle="customStyle" :suffixIconStyle="suffixIconStyle" :readonly="true">
+				</uv-input>
+			</view>
+			<view class="tabs-view">
+				<uv-tabs :list="tabList" @click="changeTab" :scrollable="false" active-style="font-weight:bold; color:#000;"
+						class="font_pf my_tabs"
+						:inactive-style="{ color: '#333333', fontSize: '30rpx', fontWeight: '600' }"
+						:activeStyle="{ color: '#0066FF', fontSize: '30rpx', fontWeight: '600' }"
+						:lineColor="`url(${LineBg}) 10% 10%`"></uv-tabs>
+			</view>
+			<view class="list-view">
+				<view class="filter-btn" @click="
             () => {
               showFilterList = !showFilterList
               activeTagPop = activeTag
             }
-          "
-          >筛选
-          <uv-icon class="filter-icon" name="list" />
-        </view>
-        <view :class="['filter-list', showFilterList ? 'show' : '']">
-          <scroll-view :scroll-y="true" class="scroll-box-tags">
-            <view class="filter-type" v-for="item in tagsTree" :key="item.value">
-              <!-- .filter(t=>(t.children||[]).length>0) -->
-              <view class="filter-type-title">{{ item.label }}</view>
-              <scroll-view :scroll-x="true" class="filter-type-list">
-                <view :class="['filter-type-item', activeTagPop.includes(itemT.value) ? 'is-active' : '']" v-for="itemT in item.children || []" @click="chooseTagPop(itemT)">
-                  {{ itemT.label }}
-                </view>
-              </scroll-view>
-            </view>
-          </scroll-view>
-          <view class="btns-box">
-            <view class="btn-sub cencle-btn" @click="showFilterList = false">取消</view>
-            <view class="btn-sub" @click="changeChooseTagsList">筛选</view>
-          </view>
-        </view>
-        <view :class="['model-filter-list', showFilterList ? 'show' : '']" @click="showFilterList = false"></view>
-        <uv-scroll-list class="tags-view" :indicator="false">
-          <uv-tags
-            text="全部"
-            bgColor="#f6f8fa"
-            :borderColor="activeTag.length === 0 ? '#06f' : '#f6f8fa'"
-            :color="activeTag.length === 0 ? '#06f' : '#333'"
-            :class="activeTag.length === 0 ? 'tags-item active-tags-item' : 'tags-item'"
-            size="medium"
-            :type="activeTag.length === 0 ? 'primary' : 'info'"
-            @click="chooseTag({ value: '' })"></uv-tags>
-          <uv-tags
-            :text="item.label"
-            v-for="item in tagsList"
-            :key="item.value"
-            size="medium"
-            :bgColor="'#f6f8fa'"
-            :borderColor="activeTag.includes(item.value) ? '#06f' : '#f6f8fa'"
-            :color="activeTag.includes(item.value) ? '#06f' : '#333'"
-            @click="chooseTag(item)"
-            :class="activeTag.includes(item.value) ? 'tags-item active-tags-item' : 'tags-item'"></uv-tags>
-        </uv-scroll-list>
-        <view class="course-list">
-          <view class="left-type-list" v-if="'全部' === activeTab">
-            <view v-for="item in courseTypeList" :key="item.value" :class="['type-item', activeCourseType == item.value ? 'is-active' : '']" @click="changeCourseType(item)">
-              {{ item.label }}
-            </view>
-          </view>
-          <view class="left-type-list" v-if="'生产线' === activeTab">
-            <view v-for="item in coursePrdlineList" :key="item.value" :class="['type-item', activePrdlineType == item.value ? 'is-active' : '']" @click="changePrdLine(item)">
-              {{ item.label }}
-            </view>
-          </view>
-          <scroll-view class="right-course-list" :scroll-y="true" @scrolltolower="getMoreList()">
-            <view class="type-list" v-for="item in courseListTreeShow">
-              <view class="type-title" v-if="item.courseList.length > 0 && showTypeName">
-                <!-- v-if="itemT.courseList.length>0 && " -->
-                <view class="left-color"></view>
-                {{ item.label }}
-              </view>
-              <CourseItem v-for="itemC in item.courseList" :itemInfo="itemC" :activeTag="activeTag" @clickItem="toCourseDetail(itemC)" />
-              <view class="type-list" v-for="itemT in item.children">
-                <view class="type-title" v-if="itemT.courseList.length > 0">
-                  <view class="left-color"></view>
-                  {{ itemT.label }}
-                </view>
-                <CourseItem v-for="itemTC in itemT.courseList" :activeTag="activeTag" :itemInfo="itemTC" @clickItem="toCourseDetail(itemTC)" />
-              </view>
-            </view>
-            <view class="loading-box" v-show="loading">
-              <CommonLoading color="#06f" class="loading-val" />
-            </view>
-          </scroll-view>
-        </view>
-      </view>
-    </view>
-  </view>
+          ">筛选
+					<uv-icon class="filter-icon" name="list" />
+				</view>
+				<view :class="['filter-list', showFilterList ? 'show' : '']">
+					<scroll-view :scroll-y="true" class="scroll-box-tags">
+						<view class="filter-type" v-for="item in tagsTree" :key="item.value">
+							<!-- .filter(t=>(t.children||[]).length>0) -->
+							<view class="filter-type-title">{{ item.label }}</view>
+							<scroll-view :scroll-x="true" class="filter-type-list">
+								<view :class="['filter-type-item', activeTagPop.includes(itemT.value) ? 'is-active' : '']"
+									v-for="itemT in item.children || []" @click="chooseTagPop(itemT)">
+									{{ itemT.label }}
+								</view>
+							</scroll-view>
+						</view>
+					</scroll-view>
+					<view class="btns-box">
+						<view class="btn-sub cencle-btn" @click="showFilterList = false">取消</view>
+						<view class="btn-sub" @click="changeChooseTagsList">筛选</view>
+					</view>
+				</view>
+				<view :class="['model-filter-list', showFilterList ? 'show' : '']" @click="showFilterList = false"></view>
+				<uv-scroll-list class="tags-view" :indicator="false">
+					<uv-tags text="全部" bgColor="#f6f8fa" :borderColor="activeTag.length === 0 ? '#06f' : '#f6f8fa'"
+						:color="activeTag.length === 0 ? '#06f' : '#333'"
+						:class="activeTag.length === 0 ? 'tags-item active-tags-item' : 'tags-item'" size="medium"
+						:type="activeTag.length === 0 ? 'primary' : 'info'" @click="chooseTag({ value: '' })"></uv-tags>
+					<uv-tags :text="item.label" v-for="item in tagsList" :key="item.value" size="medium" :bgColor="'#f6f8fa'"
+						:borderColor="activeTag.includes(item.value) ? '#06f' : '#f6f8fa'"
+						:color="activeTag.includes(item.value) ? '#06f' : '#333'" @click="chooseTag(item)"
+						:class="activeTag.includes(item.value) ? 'tags-item active-tags-item' : 'tags-item'"></uv-tags>
+				</uv-scroll-list>
+				<view class="course-list">
+					<view class="course-list-body">
+						<view class="left-type-list" v-if="'全部' === activeTab">
+							<view v-for="(item, index) in courseTypeList" :key="item.value"
+								:class="['type-item', activeCourseType == item.value ? 'is-active' : '']"
+								@click="changeCourseType(item,index)">
+								{{ item.label }}
+							</view>
+						</view>
+						<view class="left-type-list" v-if="'生产线' === activeTab">
+							<view v-for="(item, index) in coursePrdlineList" :key="item.value"
+								:class="['type-item', activePrdlineType == item.value ? 'is-active' : '']"
+								@click="changePrdLine(item,index)">
+								{{ item.label }}
+							</view>
+						</view>
+						<scroll-view :class="['right-course-list', getActiveItemClass()]" :scroll-y="true"
+							@scrolltolower="getMoreList()">
+							<view class="type-list" v-for="item in courseListTreeShow">
+								<view class="type-title" v-if="item.courseList.length > 0 && showTypeName">
+									<!-- v-if="itemT.courseList.length>0 && " -->
+									<view class="left-tips"></view>
+									{{ item.label }}
+								</view>
+								<CourseItem v-for="itemC in item.courseList" :itemInfo="itemC" :activeTag="activeTag"
+									@clickItem="toCourseDetail(itemC)" />
+								<view class="type-list" v-for="itemT in item.children">
+									<view class="type-title" v-if="itemT.courseList.length > 0">
+										<!-- <view class="left-color"></view> -->
+										<view class="left-tips"></view>
+										{{ itemT.label }}
+									</view>
+									<CourseItem v-for="itemTC in itemT.courseList" :activeTag="activeTag" :itemInfo="itemTC"
+										@clickItem="toCourseDetail(itemTC)" />
+								</view>
+							</view>
+							<view class="loading-box" v-show="loading">
+								<CommonLoading color="#06f" class="loading-val" />
+							</view>
+						</scroll-view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script setup>
-import CourseItem from '@/components/course-item/course-item.vue'
-import common from '@/common/common'
-import { getPrdLineTypeListApi, getTraTagListApi, getCourseTypeListApi, queryCrsInfoByCatalogApi, queryCrsInfoByPrdLineApi, queryCrsInfoByLastnewApi, queryCrsInfoByPopularApi, queryCrsInfoByRecmdApi } from '@/api/course.js'
-import { onMounted, onActivated, ref, computed, onUnmounted } from 'vue'
-import { onShow } from '@dcloudio/uni-app'
-import { useSocketStore } from '@/store/socket.js'
+	import CourseItem from '@/components/course-item/course-item.vue'
+	import common from '@/common/common'
+	import { LineBg } from '@/enum.js';
+	import {
+		getPrdLineTypeListApi,
+		getTraTagListApi,
+		getCourseTypeListApi,
+		queryCrsInfoByCatalogApi,
+		queryCrsInfoByPrdLineApi,
+		queryCrsInfoByLastnewApi,
+		queryCrsInfoByPopularApi,
+		queryCrsInfoByRecmdApi
+	} from '@/api/course.js'
+	import {
+		onMounted,
+		onActivated,
+		ref,
+		computed,
+		onUnmounted
+	} from 'vue'
+	import {
+		onShow
+	} from '@dcloudio/uni-app'
+	import {
+		useSocketStore
+	} from '@/store/socket.js'
 
-const socketStore = useSocketStore()
-const customStyle = {
-  backgroundColor: '#ffffff',
-  paddingLeft: '40rpx',
-  height: '60rpx',
-  paddingTop: '5px',
-  paddingBottom: '5px',
-  border: 'none'
-}
-const suffixIconStyle = {
-  color: '#2c8ef2',
-  fontSize: '40rpx'
-}
-const tabsCustomStyle = {
-  backgroundColor: '#ffffff',
-  borderRadius: '23rpx'
-}
-const tabList = [{ name: '全部' }, { name: '热门' }, { name: '最新' }, { name: '推荐' }, { name: '生产线' }]
-const activeTab = ref('全部')
-const activeCourseType = ref('')
-const activePrdlineType = ref('')
-const activeTag = ref([])
-const courseTypeList = ref([])
-const coursePrdlineList = ref([])
-const tagsTree = ref([])
+	const socketStore = useSocketStore()
+	const customStyle = {
+		backgroundColor: '#f6f8fa',
+		paddingLeft: '40rpx',
+		height: '60rpx',
+		paddingTop: '5px',
+		paddingBottom: '5px',
+		border: 'none'
+	}
+	const suffixIconStyle = {
+		color: '#2c8ef2',
+		fontSize: '40rpx'
+	}
+	const tabsCustomStyle = {
+		backgroundColor: '#ffffff',
+		borderRadius: '23rpx'
+	}
+	const tabList = [{
+		name: '全部'
+	}, {
+		name: '热门'
+	}, {
+		name: '最新'
+	}, {
+		name: '推荐'
+	}, {
+		name: '生产线'
+	}]
+	const activeTab = ref('全部')
+	const activeCourseType = ref('')
+	const activePrdlineType = ref('')
+	const activeTag = ref([])
+	const courseTypeList = ref([])
+	const coursePrdlineList = ref([])
+	const tagsTree = ref([])
 
-const showFilterList = ref(false)
-const { statusBarHeight } = uni.getWindowInfo()
+	const showFilterList = ref(false)
+	const {
+		statusBarHeight
+	} = uni.getWindowInfo()
 
-const pageTopPadding = computed(() => statusBarHeight + 'px')
+	const pageTopPadding = computed(() => statusBarHeight + 'px')
 
-const activeTagPop = ref([])
+	const activeTagPop = ref([])
 
-const chooseTagPop = item => {
-  if (!item.value) {
-    activeTagPop.value = []
-    return
-  }
-  activeTagPop.value = activeTagPop.value.filter(t => !!t)
-  if (activeTagPop.value.includes(item.value)) {
-    activeTagPop.value = activeTagPop.value.filter(t => t !== item.value)
-  } else {
-    activeTagPop.value.push(item.value)
-  }
-}
-// 点击标签
-const chooseTag = item => {
-  if (!item.value) {
-    activeTag.value = []
-  } else {
-    activeTag.value = activeTag.value.filter(t => !!t)
-    if (activeTag.value.includes(item.value)) {
-      activeTag.value = activeTag.value.filter(t => t !== item.value)
-    } else {
-      activeTag.value.push(item.value)
-    }
-  }
-  pageObj.value.page = 1
-  pageObj.value.total = 0
-  getMoreList(1)
-  // showFilterList.value = false
-}
-// 点击生产线分类
-const changePrdLine = item => {
-  activePrdlineType.value = item.value === activePrdlineType.value ? '' : item.value
-  getMoreList(1)
-}
-// 点击课程分类
-const changeCourseType = item => {
-  activeCourseType.value = item.value === activeCourseType.value ? '' : item.value
-  getMoreList(1)
-}
-const showTypeName = computed(() => {
-  return (activeTab.value === '全部' && activeCourseType.value === '') || (activeTab.value === '生产线' && activePrdlineType.value === '')
-})
-const tagsList = computed(() => {
-  let _arr = []
-  tagsTree.value.forEach(t => {
-    let _tarr = t.children || []
-    _arr = _arr.concat(_tarr)
-  })
-  let _reqList = _arr.filter(t => t.required === 'Y')
-  let _reqListN = _arr.filter(t => t.required === 'N')
-  return _reqList.concat(_reqListN)
-})
-const changeChooseTagsList = () => {
-  showFilterList.value = false
-  activeTag.value = activeTagPop.value
-  pageObj.value.page = 1
-  pageObj.value.total = 0
-  getMoreList(1)
-}
-const courseListBase = ref([])
-const courseList = computed(() => {
-  return courseListBase.value
-  // if(activeTag.value.length > 0 && !!activeTag.value[0]){
-  // 	return courseListBase.value
-  // 	.filter(t=>{
-  // 		let _tags = (t.tagCataList||[]).map(k=>k.tagId)
-  // 		let _pass = false
-  // 		activeTag.value.forEach(k => {
-  // 			if(_tags.includes(k)){
-  // 				_pass = true
-  // 			}
-  // 		})
-  // 		return _pass
-  // 	})
-  // }else{
-  // 	return courseListBase.value
-  // }
-})
-// 整理树形
-const courseListTree = computed(() => {
-  let _arr = activeTab.value === '全部' ? courseTypeList.value : activeTab.value === '生产线' ? coursePrdlineList.value : []
-  let _idKey = activeTab.value === '全部' ? 'tagId' : 'prdLineId'
+	const chooseTagPop = item => {
+		if (!item.value) {
+			activeTagPop.value = []
+			return
+		}
+		activeTagPop.value = activeTagPop.value.filter(t => !!t)
+		if (activeTagPop.value.includes(item.value)) {
+			activeTagPop.value = activeTagPop.value.filter(t => t !== item.value)
+		} else {
+			activeTagPop.value.push(item.value)
+		}
+	}
+	// 点击标签
+	const chooseTag = item => {
+		if (!item.value) {
+			activeTag.value = []
+		} else {
+			activeTag.value = activeTag.value.filter(t => !!t)
+			if (activeTag.value.includes(item.value)) {
+				activeTag.value = activeTag.value.filter(t => t !== item.value)
+			} else {
+				activeTag.value.push(item.value)
+			}
+		}
+		pageObj.value.page = 1
+		pageObj.value.total = 0
+		getMoreList(1)
+		// showFilterList.value = false
+	}
+	const activeLeftIndex = ref(-1)
+	const getActiveItemClass = () => {
+		let _class = ''
+		if ('生产线' === activeTab.value) {
+			_class = activeLeftIndex.value === 0 ? 'no-radius' : ''
+		} else if ('全部' === activeTab.value) {
+			_class = activeLeftIndex.value === 0 ? 'no-radius' : ''
+		}
+		return _class
+	}
+	// 点击生产线分类
+	const changePrdLine = (item, index) => {
+		activePrdlineType.value = item.value === activePrdlineType.value ? '' : item.value
+		activeLeftIndex.value = index
+		getMoreList(1)
+	}
+	// 点击课程分类
+	const changeCourseType = (item, index) => {
+		activeCourseType.value = item.value === activeCourseType.value ? '' : item.value
+		activeLeftIndex.value = index
+		getMoreList(1)
+	}
+	const showTypeName = computed(() => {
+		return (activeTab.value === '全部' && activeCourseType.value === '') || (activeTab.value === '生产线' &&
+			activePrdlineType.value === '')
+	})
+	const tagsList = computed(() => {
+		let _arr = []
+		tagsTree.value.forEach(t => {
+			let _tarr = t.children || []
+			_arr = _arr.concat(_tarr)
+		})
+		let _reqList = _arr.filter(t => t.required === 'Y')
+		let _reqListN = _arr.filter(t => t.required === 'N')
+		return _reqList.concat(_reqListN)
+	})
+	const changeChooseTagsList = () => {
+		showFilterList.value = false
+		activeTag.value = activeTagPop.value
+		pageObj.value.page = 1
+		pageObj.value.total = 0
+		getMoreList(1)
+	}
+	const courseListBase = ref([])
+	const courseList = computed(() => {
+		return courseListBase.value
+		// if(activeTag.value.length > 0 && !!activeTag.value[0]){
+		// 	return courseListBase.value
+		// 	.filter(t=>{
+		// 		let _tags = (t.tagCataList||[]).map(k=>k.tagId)
+		// 		let _pass = false
+		// 		activeTag.value.forEach(k => {
+		// 			if(_tags.includes(k)){
+		// 				_pass = true
+		// 			}
+		// 		})
+		// 		return _pass
+		// 	})
+		// }else{
+		// 	return courseListBase.value
+		// }
+	})
+	// 整理树形
+	const courseListTree = computed(() => {
+		let _arr = activeTab.value === '全部' ? courseTypeList.value : activeTab.value === '生产线' ? coursePrdlineList
+			.value : []
+		let _idKey = activeTab.value === '全部' ? 'tagId' : 'prdLineId'
 
-  let _tree = _arr.map(t => {
-    let _children = t.children || []
-    return {
-      label: t.label,
-      required: t.required,
-      value: t.value,
-      courseList: courseList.value.filter(k => k[_idKey] === t.value),
-      children: _children.map(k => {
-        return {
-          ...k,
-          courseList: courseList.value.filter(m => m[_idKey] === k.value)
-        }
-      })
-    }
-  })
-  return _tree
-})
-// 过滤树形
-const courseListTreeShow = computed(() => {
-  let _type = activeTab.value === '全部' ? activeCourseType.value : activePrdlineType.value
-  if (activeTab.value === '全部' || activeTab.value === '生产线') {
-    if (_type) {
-      return courseListTree.value.filter(t => t.value === _type)
-    } else {
-      return courseListTree.value
-    }
-  } else {
-    return [
-      {
-        children: [],
-        courseList: courseList.value,
-        label: '',
-        value: '333'
-      }
-    ]
-  }
-})
-const pageObj = ref({
-  page: 1,
-  limit: 20,
-  total: 0
-})
-const getMoreList = flag => {
-  console.log(activeTab.value)
-  if (!flag) {
-    if (pageObj.value.total <= pageObj.value.page * pageObj.value.limit) return
-    pageObj.value.page += 1
-  } else {
-    courseListBase.value = []
-    pageObj.value.page = 1
-  }
-  pageObj.value.total = 0
-  loading.value = true
-  switch (activeTab.value) {
-    case '全部':
-      queryCrsInfoByCatalogApi({
-        ...pageObj.value,
-        tagId: activeTag.value.join(','),
-        catalogId: activeCourseType.value
-      })
-        .then(res => {
-          courseListBase.value = courseListBase.value.concat(res.body || [])
-          pageObj.value.total = res.total
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-    case '热门':
-      queryCrsInfoByPopularApi({
-        ...pageObj.value,
-        tagId: activeTag.value.join(',')
-      })
-        .then(res => {
-          courseListBase.value = res.body || []
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-    case '最新':
-      queryCrsInfoByLastnewApi({
-        ...pageObj.value,
-        tagId: activeTag.value.join(',')
-      })
-        .then(res => {
-          courseListBase.value = res.body || []
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-    case '推荐':
-      queryCrsInfoByRecmdApi({
-        ...pageObj.value,
-        tagId: activeTag.value.join(',')
-      })
-        .then(res => {
-          courseListBase.value = courseListBase.value.concat(res.body || [])
-          pageObj.value.total = res.total
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-    case '生产线':
-      queryCrsInfoByPrdLineApi({
-        ...pageObj.value,
-        tagId: activeTag.value.join(','),
-        prdLineId: activePrdlineType.value
-      })
-        .then(res => {
-          courseListBase.value = courseListBase.value.concat(res.body || [])
-          pageObj.value.total = res.total
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-  }
-}
-const loading = ref(false)
-const changeTab = item => {
-  if (!item) return
-  courseListBase.value = []
-  activeTab.value = item.name
-  activeTag.value = []
-  pageObj.value.page = 1
-  pageObj.value.total = 0
-  // activeTag.value = ''
-  activeCourseType.value = ''
-  activePrdlineType.value = ''
-  loading.value = true
-  switch (item.name) {
-    case '全部':
-      queryCrsInfoByCatalogApi(pageObj.value)
-        .then(res => {
-          courseListBase.value = res.body || []
-          pageObj.value.total = res.total
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-    case '热门':
-      queryCrsInfoByPopularApi(pageObj.value)
-        .then(res => {
-          courseListBase.value = res.body || []
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-    case '最新':
-      queryCrsInfoByLastnewApi(pageObj.value)
-        .then(res => {
-          courseListBase.value = res.body || []
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-    case '推荐':
-      queryCrsInfoByRecmdApi(pageObj.value)
-        .then(res => {
-          courseListBase.value = res.body || []
-          pageObj.value.total = res.total
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-    case '生产线':
-      queryCrsInfoByPrdLineApi(pageObj.value)
-        .then(res => {
-          courseListBase.value = res.body || []
-          pageObj.value.total = res.total
-        })
-        .finally(() => {
-          loading.value = false
-        })
-      break
-  }
-}
-// 跳转搜索页
-const toSearchPage = () => {
-  common.navigateTo('/pages/search/search?from=course')
-}
-// 跳转 课程详情
-const toCourseDetail = item => {
-  common.navigateTo('/pages/courseDetail/index?crsNum=' + item.crsNum + '&crsId=' + item.crsId)
-  // common.navigateTo('/pages/course/study?crsNum=' + item.crsNum)
-}
-onMounted(() => {
-  getCourseTypeListApi().then(res => {
-    courseTypeList.value = res.body || []
-  })
-  getPrdLineTypeListApi().then(res => {
-    coursePrdlineList.value = res.body || []
-  })
-  getTraTagListApi().then(res => {
-    tagsTree.value = res.body || []
-  })
-  changeTab({ name: '全部' })
+		let _tree = _arr.map(t => {
+			let _children = t.children || []
+			return {
+				label: t.label,
+				required: t.required,
+				value: t.value,
+				courseList: courseList.value.filter(k => k[_idKey] === t.value),
+				children: _children.map(k => {
+					return {
+						...k,
+						courseList: courseList.value.filter(m => m[_idKey] === k.value)
+					}
+				})
+			}
+		})
+		return _tree
+	})
+	// 过滤树形
+	const courseListTreeShow = computed(() => {
+		let _type = activeTab.value === '全部' ? activeCourseType.value : activePrdlineType.value
+		if (activeTab.value === '全部' || activeTab.value === '生产线') {
+			if (_type) {
+				return courseListTree.value.filter(t => t.value === _type)
+			} else {
+				return courseListTree.value
+			}
+		} else {
+			return [{
+				children: [],
+				courseList: courseList.value,
+				label: '',
+				value: '333'
+			}]
+		}
+	})
+	const pageObj = ref({
+		page: 1,
+		limit: 20,
+		total: 0
+	})
+	const getMoreList = flag => {
+		console.log(activeTab.value)
+		if (!flag) {
+			if (pageObj.value.total <= pageObj.value.page * pageObj.value.limit) return
+			pageObj.value.page += 1
+		} else {
+			courseListBase.value = []
+			pageObj.value.page = 1
+		}
+		pageObj.value.total = 0
+		loading.value = true
+		switch (activeTab.value) {
+			case '全部':
+				queryCrsInfoByCatalogApi({
+						...pageObj.value,
+						tagId: activeTag.value.join(','),
+						catalogId: activeCourseType.value
+					})
+					.then(res => {
+						courseListBase.value = courseListBase.value.concat(res.body || [])
+						pageObj.value.total = res.total
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+			case '热门':
+				queryCrsInfoByPopularApi({
+						...pageObj.value,
+						tagId: activeTag.value.join(',')
+					})
+					.then(res => {
+						courseListBase.value = res.body || []
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+			case '最新':
+				queryCrsInfoByLastnewApi({
+						...pageObj.value,
+						tagId: activeTag.value.join(',')
+					})
+					.then(res => {
+						courseListBase.value = res.body || []
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+			case '推荐':
+				queryCrsInfoByRecmdApi({
+						...pageObj.value,
+						tagId: activeTag.value.join(',')
+					})
+					.then(res => {
+						courseListBase.value = courseListBase.value.concat(res.body || [])
+						pageObj.value.total = res.total
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+			case '生产线':
+				queryCrsInfoByPrdLineApi({
+						...pageObj.value,
+						tagId: activeTag.value.join(','),
+						prdLineId: activePrdlineType.value
+					})
+					.then(res => {
+						courseListBase.value = courseListBase.value.concat(res.body || [])
+						pageObj.value.total = res.total
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+		}
+	}
+	const loading = ref(false)
+	const changeTab = item => {
+		if (!item) return
+		courseListBase.value = []
+		activeTab.value = item.name
+		activeLeftIndex.value = -1
+		activeTag.value = []
+		pageObj.value.page = 1
+		pageObj.value.total = 0
+		// activeTag.value = ''
+		activeCourseType.value = ''
+		activePrdlineType.value = ''
+		loading.value = true
+		switch (item.name) {
+			case '全部':
+				queryCrsInfoByCatalogApi(pageObj.value)
+					.then(res => {
+						courseListBase.value = res.body || []
+						pageObj.value.total = res.total
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+			case '热门':
+				queryCrsInfoByPopularApi(pageObj.value)
+					.then(res => {
+						courseListBase.value = res.body || []
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+			case '最新':
+				queryCrsInfoByLastnewApi(pageObj.value)
+					.then(res => {
+						courseListBase.value = res.body || []
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+			case '推荐':
+				queryCrsInfoByRecmdApi(pageObj.value)
+					.then(res => {
+						courseListBase.value = res.body || []
+						pageObj.value.total = res.total
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+			case '生产线':
+				queryCrsInfoByPrdLineApi(pageObj.value)
+					.then(res => {
+						courseListBase.value = res.body || []
+						pageObj.value.total = res.total
+					})
+					.finally(() => {
+						loading.value = false
+					})
+				break
+		}
+	}
+	// 跳转搜索页
+	const toSearchPage = () => {
+		common.navigateTo('/pages/search/search?from=course')
+	}
+	// 跳转 课程详情
+	const toCourseDetail = item => {
+		common.navigateTo('/pages/courseDetail/index?crsNum=' + item.crsNum + '&crsId=' + item.crsId)
+		// common.navigateTo('/pages/course/study?crsNum=' + item.crsNum)
+	}
+	onMounted(() => {
+		getCourseTypeListApi().then(res => {
+			courseTypeList.value = res.body || []
+		})
+		getPrdLineTypeListApi().then(res => {
+			coursePrdlineList.value = res.body || []
+		})
+		getTraTagListApi().then(res => {
+			tagsTree.value = res.body || []
+		})
+		changeTab({
+			name: '全部'
+		})
 
-  uni.$on('refresh_course_list', () => {
-    changeTab({ name: activeTab.value || '全部' })
-  })
-})
-onUnmounted(() => {
-  uni.$off('refresh_course_list')
-})
-onActivated(() => {
-  // 重新获取标签信息
-  getTraTagListApi().then(res => {
-    tagsTree.value = res.body || []
-  })
-  changeTab({ name: activeTab.value || '全部' })
-})
-onShow(() => {
-  changeTab({ name: activeTab.value || '全部' })
-  socketStore.closeSocket()
-})
+		uni.$on('refresh_course_list', () => {
+			changeTab({
+				name: activeTab.value || '全部'
+			})
+		})
+	})
+	onUnmounted(() => {
+		uni.$off('refresh_course_list')
+	})
+	onActivated(() => {
+		// 重新获取标签信息
+		getTraTagListApi().then(res => {
+			tagsTree.value = res.body || []
+		})
+		changeTab({
+			name: activeTab.value || '全部'
+		})
+	})
+	onShow(() => {
+		changeTab({
+			name: activeTab.value || '全部'
+		})
+		socketStore.closeSocket()
+	})
 </script>
 
 <style lang="scss" scoped>
-.course-center {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  .top-bg {
-    background: linear-gradient(16deg, rgba(234, 246, 255, 0) 0%, #c3e6ff 100%);
-    height: 480rpx;
-    width: 100%;
-  }
-  .bot-bg {
-    // background-color: #F6F8FF;
-    background: linear-gradient(136deg, rgba(234, 246, 255, 0) 0%, #c3e6ff 100%);
-    width: 100%;
-    flex: 1;
-  }
-  .course-center-body {
-    position: absolute;
-    overflow: hidden;
-    left: 0;
-    top: 0;
-    height: 100%;
-    width: 100%;
-    padding: 0 15rpx;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    padding-top: v-bind(pageTopPadding);
-    // padding-top: var(--status-bar-height);
-    .body-title {
-      height: 90rpx;
-      // background-color: red;
-      text-align: center;
-      font-size: 33rpx;
-      padding-top: 10rpx;
-      line-height: 46rpx;
-      box-sizing: border-box;
-      font-weight: 500;
-      color: #000;
-      position: relative;
-      // margin-bottom: 23rpx;
-      .arrow-icon {
-        position: absolute;
-        left: 36rpx;
-        top: 20rpx;
-        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;
-      overflow: hidden;
-      margin-bottom: 15rpx;
-      background: #ffffff;
-      border-radius: 23rpx;
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      .filter-list {
-        position: absolute;
-        top: 84rpx;
-        left: 0;
-        width: 100%;
-        height: 588rpx;
-        padding-bottom: 80rpx;
-        overflow-y: hidden;
-        z-index: 15;
-        background-color: #f9f9f9;
-        box-shadow: 0rpx 12rpx 20rpx rgba(160, 160, 160, 0.25);
-        border-radius: 0 0 0rpx 0rpx;
-        box-sizing: border-box;
-        position: relative;
-        .scroll-box-tags {
-          height: 508rpx;
-          padding: 0rpx 25rpx;
-          box-sizing: border-box;
-        }
-        .filter-type {
-          padding: 10rpx 0;
-          box-sizing: border-box;
-          .filter-type-title {
-            font-size: 29rpx;
-            line-height: 40rpx;
-            margin-bottom: 15rpx;
-            color: #000;
-          }
-          .filter-type-list {
-            overflow: hidden;
-            .filter-type-item {
-              // width: calc(25% - 18rpx);
-              display: inline-block;
-              font-size: 29rpx;
-              box-sizing: border-box;
-              padding: 0 20rpx;
-              white-space: nowrap;
-              text-overflow: ellipsis;
-              overflow: hidden;
-              text-align: center;
-              float: left;
-              margin-right: 24rpx;
-              height: 65rpx;
-              line-height: 65rpx;
-              background-color: #f1f3f8;
-              border-radius: 6rpx;
-              margin-bottom: 20rpx;
-              &:nth-child(4n) {
-                margin-right: 24rpx;
-              }
-              &.is-active {
-                color: #06f;
-              }
-            }
-          }
-          & + .filter-type {
-            margin-top: 20rpx;
-          }
-        }
-        .btns-box {
-          height: 80rpx;
-          position: absolute;
-          background-color: #fff;
-          bottom: 0;
-          left: 0;
-          width: 100%;
-          text-align: center;
-          padding-top: 10rpx;
-          .btn-sub {
-            display: inline-block;
-            text-align: center;
-            background-color: #06f;
-            height: 60rpx;
-            line-height: 58rpx;
-            border: 1rpx solid #06f;
-            padding: 0 40rpx;
-            color: #fff;
-            border-radius: 8rpx;
-            &.cencle-btn {
-              background-color: #fff;
-              color: #06f;
-              margin-right: 40rpx;
-            }
-          }
-        }
-      }
-      .model-filter-list {
-        position: fixed;
-        width: calc(100vw - 33rpx);
-        height: 80vh;
-        overflow: hidden;
-        top: 500rpx;
-        left: 17rpx;
-        z-index: 1;
-        background-color: rgba(0, 0, 0, 0.2);
-      }
-      .filter-list,
-      .model-filter-list {
-        display: none;
-        &.show {
-          display: block;
-        }
-      }
-      .filter-btn {
-        position: absolute;
-        right: 0;
-        top: 0;
-        height: 83rpx;
-        width: 120rpx;
-        line-height: 83rpx;
-        font-size: 26rpx;
-        background: #fff;
-        z-index: 2;
-        text-align: center;
-        box-shadow: -4rpx 0 6rpx rgba(0, 0, 0, 0.05);
-        white-space: nowrap;
-        padding-right: 30rpx;
-        box-sizing: border-box;
-        .filter-icon {
-          // display: inline-block;
-          font-size: 26rpx;
-          position: absolute;
-          right: 15rpx;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-      }
-      .tags-view {
-        height: 84rpx;
-        display: block;
-        padding: 15rpx 120rpx 15rpx 20rpx;
-        box-sizing: border-box;
-        white-space: nowrap;
-        border-bottom: 2rpx solid #eee;
-        .tags-item {
-          margin-right: 30rpx;
-          display: inline-block;
-          &.active-tags-item {
-            position: relative;
-            overflow: hidden;
-            border-radius: 4rpx;
-            overflow: hidden;
-            &::before {
-              content: '';
-              display: block;
-              width: 40rpx;
-              height: 40rpx;
-              position: absolute;
-              right: -20rpx;
-              bottom: -20rpx;
-              transform: rotateZ(-45deg);
-              background-color: #06f;
-              overflow: hidden;
-              z-index: 10;
-            }
-            &::after {
-              content: '';
-              display: block;
-              width: 8rpx;
-              height: 4rpx;
-              position: absolute;
-              right: 3rpx;
-              bottom: 8rpx;
-              transform: rotateZ(-45deg);
-              border-left: 1px solid #fff;
-              border-bottom: 1px solid #fff;
-              z-index: 11;
-            }
-          }
-          ::v-deep .uv-tags {
-            padding: 0 20rpx;
-            .uv-tags__text {
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              max-width: 200rpx;
-            }
-          }
-        }
-      }
-      .course-list {
-        display: flex;
-        flex: 1;
-        overflow: hidden;
-        .left-type-list {
-          width: 152rpx;
-          border-right: 2rpx solid #eee;
-          overflow-y: auto;
-          .type-item {
-            min-height: 90rpx;
-            line-height: 40rpx;
-            font-size: 22rpx;
-            box-sizing: border-box;
-            padding: 25rpx 18rpx;
-            overflow: hidden;
-            // text-overflow: ellipsis;
-            word-break: break-all;
-            text-align: center;
-            white-space: pre-wrap;
-            &.is-active {
-              background-color: rgba(44, 142, 242, 0.1);
-              color: #06f;
-            }
-          }
-        }
-        .right-course-list {
-          flex: 1;
-          overflow-y: auto;
-          .type-list {
-            .type-title {
-              font-size: 33rpx;
-              line-height: 43rpx;
-              margin: 20rpx 15rpx 5rpx;
-              min-height: 43rpx;
-              // overflow: hidden;
-              // text-overflow: ellipsis;
-              // white-space: nowrap;
-              word-break: break-all;
-              font-weight: 600;
-              .left-color {
-                width: 8rpx;
-                height: 33rpx;
-                margin-top: 5rpx;
-                float: left;
-                overflow: hidden;
-                background-color: #06f;
-                margin-right: 8rpx;
-              }
-            }
-          }
-        }
-      }
-    }
-    .loading-box {
-      width: 100%;
-      height: 100rpx;
-      position: relative;
-      .loading-val {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
-      }
-    }
-  }
-}
-</style>
+	.my_tabs {
+		// 解决这个圆角的图片，开穿透
+		:deep(.uv-tabs__wrapper__nav__line) {
+			height: 30rpx !important;
+			left: 50rpx;
+			background-size: 24rpx !important;
+			background-repeat: no-repeat !important;
+		}
+	}
+	.course-center {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+
+		.top-bg {
+			background-color: #fff;
+			// background: linear-gradient(16deg, rgba(234, 246, 255, 0) 0%, #c3e6ff 100%);
+			height: 480rpx;
+			width: 100%;
+		}
+
+		.bot-bg {
+			background-color: #fff;
+			// background: linear-gradient(136deg, rgba(234, 246, 255, 0) 0%, #c3e6ff 100%);
+			width: 100%;
+			flex: 1;
+		}
+
+		.course-center-body {
+			position: absolute;
+			overflow: hidden;
+			left: 0;
+			top: 0;
+			height: 100%;
+			width: 100%;
+			padding: 0;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			padding-top: v-bind(pageTopPadding);
+
+			// padding-top: var(--status-bar-height);
+			.body-title {
+				height: 90rpx;
+				// background-color: red;
+				text-align: center;
+				font-size: 33rpx;
+				padding-top: 10rpx;
+				line-height: 46rpx;
+				box-sizing: border-box;
+				font-weight: 500;
+				color: #000;
+				position: relative;
+
+				// margin-bottom: 23rpx;
+				.arrow-icon {
+					position: absolute;
+					left: 36rpx;
+					top: 20rpx;
+					color: #000;
+				}
+			}
+
+			.input-view {
+				padding: 0 38rpx;
+			}
+
+			.tabs-view {
+				background: #ffffff;
+				margin-top: 23rpx;
+				border-radius: 23rpx;
+				padding: 6rpx 10rpx 12rpx;
+				margin-bottom: 15rpx;
+			}
+
+			.list-view {
+				flex: 1;
+				overflow: hidden;
+				// margin-bottom: 15rpx;
+				background: #ffffff;
+				// border-radius: 23rpx;
+				display: flex;
+				flex-direction: column;
+				position: relative;
+
+				.filter-list {
+					position: absolute;
+					top: 84rpx;
+					left: 0;
+					width: 100%;
+					height: 588rpx;
+					padding-bottom: 80rpx;
+					overflow-y: hidden;
+					z-index: 15;
+					background-color: #f9f9f9;
+					box-shadow: 0rpx 12rpx 20rpx rgba(160, 160, 160, 0.25);
+					border-radius: 0 0 0rpx 0rpx;
+					box-sizing: border-box;
+					position: relative;
+
+					.scroll-box-tags {
+						height: 508rpx;
+						padding: 0rpx 25rpx;
+						box-sizing: border-box;
+					}
+
+					.filter-type {
+						padding: 10rpx 0;
+						box-sizing: border-box;
+
+						.filter-type-title {
+							font-size: 29rpx;
+							line-height: 40rpx;
+							margin-bottom: 15rpx;
+							color: #000;
+						}
+
+						.filter-type-list {
+							overflow: hidden;
+
+							.filter-type-item {
+								// width: calc(25% - 18rpx);
+								display: inline-block;
+								font-size: 29rpx;
+								box-sizing: border-box;
+								padding: 0 20rpx;
+								white-space: nowrap;
+								text-overflow: ellipsis;
+								overflow: hidden;
+								text-align: center;
+								float: left;
+								margin-right: 24rpx;
+								height: 65rpx;
+								line-height: 65rpx;
+								background-color: #f1f3f8;
+								border-radius: 6rpx;
+								margin-bottom: 20rpx;
+
+								&:nth-child(4n) {
+									margin-right: 24rpx;
+								}
+
+								&.is-active {
+									color: #06f;
+								}
+							}
+						}
+
+						&+.filter-type {
+							margin-top: 20rpx;
+						}
+					}
+
+					.btns-box {
+						height: 80rpx;
+						position: absolute;
+						background-color: #fff;
+						bottom: 0;
+						left: 0;
+						width: 100%;
+						text-align: center;
+						padding-top: 10rpx;
+
+						.btn-sub {
+							display: inline-block;
+							text-align: center;
+							background-color: #06f;
+							height: 60rpx;
+							line-height: 58rpx;
+							border: 1rpx solid #06f;
+							padding: 0 40rpx;
+							color: #fff;
+							border-radius: 8rpx;
+
+							&.cencle-btn {
+								background-color: #fff;
+								color: #06f;
+								margin-right: 40rpx;
+							}
+						}
+					}
+				}
+
+				.model-filter-list {
+					position: fixed;
+					width: calc(100vw - 33rpx);
+					height: 80vh;
+					overflow: hidden;
+					top: 500rpx;
+					left: 17rpx;
+					z-index: 1;
+					background-color: rgba(0, 0, 0, 0.2);
+				}
+
+				.filter-list,
+				.model-filter-list {
+					display: none;
+
+					&.show {
+						display: block;
+					}
+				}
+
+				.filter-btn {
+					position: absolute;
+					right: 0;
+					top: 0;
+					height: 83rpx;
+					width: 120rpx;
+					line-height: 83rpx;
+					font-size: 26rpx;
+					background: #fff;
+					z-index: 2;
+					text-align: center;
+					box-shadow: -4rpx 0 6rpx rgba(0, 0, 0, 0.05);
+					white-space: nowrap;
+					padding-right: 30rpx;
+					box-sizing: border-box;
+
+					.filter-icon {
+						// display: inline-block;
+						font-size: 26rpx;
+						position: absolute;
+						right: 15rpx;
+						top: 50%;
+						transform: translateY(-50%);
+					}
+				}
+
+				.tags-view {
+					height: 84rpx;
+					display: block;
+					padding: 15rpx 120rpx 15rpx 20rpx;
+					box-sizing: border-box;
+					white-space: nowrap;
+					border-bottom: 2rpx solid #eee;
+
+					.tags-item {
+						margin-right: 30rpx;
+						display: inline-block;
+
+						&.active-tags-item {
+							position: relative;
+							overflow: hidden;
+							border-radius: 4rpx;
+							overflow: hidden;
+
+							&::before {
+								content: '';
+								display: block;
+								width: 40rpx;
+								height: 40rpx;
+								position: absolute;
+								right: -20rpx;
+								bottom: -20rpx;
+								transform: rotateZ(-45deg);
+								background-color: #06f;
+								overflow: hidden;
+								z-index: 10;
+							}
+
+							&::after {
+								content: '';
+								display: block;
+								width: 8rpx;
+								height: 4rpx;
+								position: absolute;
+								right: 3rpx;
+								bottom: 8rpx;
+								transform: rotateZ(-45deg);
+								border-left: 1px solid #fff;
+								border-bottom: 1px solid #fff;
+								z-index: 11;
+							}
+						}
+
+						::v-deep .uv-tags {
+							padding: 0 20rpx;
+
+							.uv-tags__text {
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								max-width: 200rpx;
+							}
+						}
+					}
+				}
+
+				.course-list {
+					display: flex;
+					flex: 1;
+					overflow: hidden;
+					background-color: #f1f5fa;
+					padding-top: 12rpx;
+
+					.course-list-body {
+						height: 100%;
+						display: flex;
+						flex: 1;
+						overflow: hidden;
+
+						.left-type-list {
+							margin-top: -10rpx;
+							width: 152rpx;
+							// border-right: 2rpx solid #eee;
+							overflow-y: auto;
+
+							.type-item {
+								min-height: 90rpx;
+								line-height: 40rpx;
+								font-size: 22rpx;
+								box-sizing: border-box;
+								padding: 25rpx 18rpx;
+								overflow: hidden;
+								// text-overflow: ellipsis;
+								word-break: break-all;
+								text-align: center;
+								white-space: pre-wrap;
+
+								&.is-active {
+									// background-color: rgba(44, 142, 242, 0.1);
+									background: url(@/static/images/course/active-left.png) no-repeat;
+									background-size: 100% 100%;
+									// margin-top: -10rpx;
+									color: #06f;
+								}
+							}
+						}
+
+						.right-course-list {
+							flex: 1;
+							overflow-y: auto;
+							background-color: #fff;
+							border-radius: 23rpx 0 0 0;
+
+							&.no-radius {
+								border-radius: 0rpx 0 0 0;
+							}
+
+							.type-list {
+								.type-title {
+									font-size: 33rpx;
+									line-height: 43rpx;
+									margin: 20rpx 15rpx 5rpx;
+									min-height: 43rpx;
+									// overflow: hidden;
+									// text-overflow: ellipsis;
+									// white-space: nowrap;
+									word-break: break-all;
+									font-weight: 600;
+
+									.left-tips {
+										width: 33rpx;
+										height: 42rpx;
+										margin-right: 16rpx;
+										float: left;
+										background: url(@/static/images/course/tag-item.png) no-repeat;
+										background-size: 33rpx 33rpx;
+										background-position: center;
+									}
+
+									.left-color {
+										width: 8rpx;
+										height: 33rpx;
+										margin-top: 5rpx;
+										float: left;
+										overflow: hidden;
+										background-color: #06f;
+										margin-right: 8rpx;
+									}
+								}
+							}
+						}
+
+					}
+				}
+			}
+
+			.loading-box {
+				width: 100%;
+				height: 100rpx;
+				position: relative;
+
+				.loading-val {
+					position: absolute;
+					left: 50%;
+					top: 50%;
+					transform: translate(-50%, -50%);
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/static/images/course/active-left.png b/src/static/images/course/active-left.png
new file mode 100644
index 00000000..03037855
Binary files /dev/null and b/src/static/images/course/active-left.png differ
diff --git a/src/static/images/course/tag-item.png b/src/static/images/course/tag-item.png
new file mode 100644
index 00000000..1c89c30f
Binary files /dev/null and b/src/static/images/course/tag-item.png differ