荣誉教师详情接口对接、公共头部组件修改

components/nav-bar.vue

@@ -5,9 +5,9 @@
 		:border="showHeaderborder" :statusBar="true" :leftWidth="leftWidth" :rightWidth="rightWidth" left-icon="left"
 		@clickLeft="GoBack()">
 		<!-- 表头内容 -->
-		<view class="nav_head" v-if="!onlyTitle">
+		<view :class="['nav_head',{'only_title':!showHeadSearchInput}]" v-if="!onlyTitle">
 			<text class="nav_title">{{title}}</text>
-			<uni-easyinput class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
+			<uni-easyinput v-if="showHeadSearchInput" class="search_box" v-model="state.searchWord" trim="all" :styles="state.searchInputStyles"
 				:placeholderStyle="state.searchInputPlaceholderStyle" placeholder="请输入关键字搜索" @input="HandleSearchInput">
 				<template #left>
 					<image src="/static/image/overview/search.png" class="search_icon"></image>
@@ -31,6 +31,13 @@
 				{{item.label}}
 			</view>
 		</scroll-view>
+		<!-- tabs 按钮 -->
+		<scroll-view v-if="showTabBtns && tabBtns.length > 0" class="scroll_tab_btn" scroll-x="true" scroll-left="0" :show-scrollbar="false">
+			<slot name="tab_btns_lef" />	
+			<view :class="['tab_item',{'selected':item.value==state.tabBtnSelected}]" v-for="item in tabBtns" :key="item.value" @click="SelectTabBtnsValue(item.value)">
+				{{item.label}}
+			</view>
+		</scroll-view>
 	</uni-nav-bar>
 </template>
 
@@ -85,6 +92,14 @@
 			type: Array,
 			default: () => []
 		},
+		tabBtns: { //tabBtns
+			type: Array,
+			default: () => []
+		},
+		showHeadSearchInput:{//是否显示头部搜索框
+			type: Boolean,
+			default: true
+		},
 		showFilterPicker: { //是否显示条件选择器
 			type: Boolean,
 			default: false
@@ -92,12 +107,21 @@
 		showTabs: { //是否显示条件选择器tabs
 			type: Boolean,
 			default: false
+		},
+		showTabBtns: { //是否显示条件选择器tabBtns
+			type: Boolean,
+			default: false
 		}
 	});
 	const state = reactive({
 		searchWord: '', //关键字
-		filterPickerValue: [], //条件选择器默认值
+		filterOpts:{
+			valueIndex:0,
+			index:0,
+			filterPickerValue: []
+		},//条件选择器选中的值
 		tabsSelected: '', //tabs 默认选中
+		tabBtnSelected: '',//tabBtns 默认选中
 		searchInputStyles: { //搜素框样式
 			borderColor: '#DCDFE6',
 			color: '#333333'
@@ -109,42 +133,50 @@
 			state.tabsSelected = props?.tabList?.[0]?.value || ''; //tab 默认值
 		}
 	})
+	watch(()=>props.tabBtns,(newVal, oldVal)=>{
+		if(newVal){
+			state.tabBtnSelected = props?.tabBtns?.[0]?.value || ''; //tab 默认值
+		}
+	})
 	//关键字搜索
 	const HandleSearchInput = (e) => {
 		state.searchWord = e;
-		CommonFilterData(state.searchWord, {
-			filterPickerValue: [...state.filterPickerValue]
-		}, state.tabsSelected, 'search');
+		CommonFilterData('search');
 	}
 	//切换条件选择器  index:数组filterPickerData索引
 	const ChangeFilterPicker = (e, index) => {
 		const valueIndex = e.detail.value; //下拉框选中值的索引
 		const selectedValue = props.filterPickerData?.[index]?.list?.[valueIndex]?.value ?? '';
-		state.filterPickerValue[index] = selectedValue;
+		state.filterOpts.filterPickerValue[index] = selectedValue;
 		//处理下一级默认值
 		for(let i = 0; i < props.filterPickerData.length; i++){
 			if(i > index){
 				const list = props.filterPickerData?.[i]?.list || [];
-				state.filterPickerValue[i] = list.length > 0 ? list[0].value : '';
+				state.filterOpts.filterPickerValue[i] = list.length > 0 ? list[0].value : '';
 			}
 		}
-		console.log(state.filterPickerValue,props.filterPickerData,37888)
-		CommonFilterData(state.searchWord, {
-			valueIndex,
-			index,
-			filterPickerValue: [...state.filterPickerValue]
-		}, state.tabsSelected, 'filterPicker');
+		state.filterOpts.valueIndex = valueIndex;
+		state.filterOpts.index = index;
+		CommonFilterData('filterPicker');
 	}
 	//tabs切换
 	const SelectTabsValue = (value) => {
 		state.tabsSelected = value;
-		CommonFilterData(state.searchWord, {
-			filterPickerValue: [...state.filterPickerValue]
-		}, state.tabsSelected, 'tabs');
+		CommonFilterData('tabs');
+	}
+	//tabBtns切换
+	const SelectTabBtnsValue = (value) => {
+		state.tabBtnSelected = value;
+		CommonFilterData('tabBtns');
 	}
 	//条件发生改变进行数据查询
-	const CommonFilterData = (searchWord, filterPickerValue, tabsSelected, type) => {
-		emit('CommonFilterData', searchWord, filterPickerValue, tabsSelected, type);
+	const CommonFilterData = (type) => {
+		emit('CommonFilterData',{
+			searchWord:state.searchWord, 
+			filterOpts:state.filterOpts,
+			tabsSelected:state.tabsSelected,
+			tabBtnSelected:state.tabBtnSelected
+		},type);
 	}
 	const GoBack = () => {
 		if (props.backPath == 'myIndex') {
@@ -161,7 +193,8 @@
 	}
 	onMounted(() => {
 		state.tabsSelected = props?.tabList?.[0]?.value || ''; //tab 默认值
-		state.filterPickerValue = props.filterPickerData.map(item => item?.defaultValue ?? '');
+		state.tabBtnSelected = props?.tabBtns?.[0]?.value || ''; //tabBtns 默认值
+		state.filterOpts.filterPickerValue = props.filterPickerData.map(item => item?.defaultValue ?? '');
 	})
 </script>
 

pages.json

@@ -183,6 +183,13 @@
 				"navigationStyle": "custom"
 			}
 		},
+		{
+			"path": "pages/teacherHonor/honorTeacher/honorTeacherDetail",
+			"style": {
+				"navigationBarTitleText": "教师发展-荣誉教师-教师荣誉详情",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/materialCollection/taskOverview/index",
 			"style": {

pages/studentStudy/courseCenter/index.vue

@@ -115,8 +115,9 @@
 		})
 	}
 	//切换条件选择器
-	const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
-		const {valueIndex, index,filterPickerValue} = filterPicker;
+	const CommonFilterData = (filterOptions,type) => {
+		const { searchWord,filterOpts,tabsSelected } = filterOptions;
+		const {valueIndex, index,filterPickerValue} = filterOpts;
 		if(type == 'filterPicker'){
 			if(index==0){//索引
 				state.filterPickerData[index].valueIndex = valueIndex;//一级条件选中项的索引

pages/studentStudy/learningMonitor/index.vue

@@ -127,8 +127,9 @@
 		})
 	}
 	//切换条件选择器
-	const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
-		const {valueIndex, index,filterPickerValue} = filterPicker;
+	const CommonFilterData = (filterOptions,type) => {
+		const {searchWord,filterOpts,tabsSelected} = filterOptions;
+		const {valueIndex, index,filterPickerValue} = filterOpts;
 		state.queryStr = searchWord;
 		state.courseType = filterPickerValue[0];
 		state.studCourseTypeId = filterPickerValue[1];

pages/studentStudy/myLearning/index.vue

@@ -138,8 +138,9 @@
 		})
 	}
 	//切换条件选择器
-	const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
-		const {valueIndex, index,filterPickerValue} = filterPicker;
+	const CommonFilterData = (filterOptions,type) => {
+		const {searchWord,filterOpts,tabsSelected} = filterOptions;
+		const {valueIndex, index,filterPickerValue} = filterOpts;
 		state.queryStr = searchWord;
 		state.courseType = filterPickerValue[0];
 		state.studCourseTypeId = filterPickerValue[1];

pages/teacherHonor/honorOverview/index.vue

@@ -143,9 +143,9 @@
 		})
 	}
 	//搜索
-	const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
+	const CommonFilterData = (filterOptions,type) => {
 		if(type=='search'){
-			state.queryStr = searchWord;
+			state.queryStr = filterOptions.searchWord;
 			OnLoadData();
 		}
 	}

pages/teacherHonor/honorTeacher/honorTeacherDetail.vue

@@ -0,0 +1,304 @@
+<template>
+	<view class="page_body">
+		<!-- 头部 -->
+		<nav-bar height="312" :title="state.teacherName" :tabList="state.tabList" :tabBtns="state.tabBtns" :onlyTitle="false" :showHeadSearchInput="false" :showFilterPicker="false" :showTabs="true" :showTabBtns="true" rightWidth="0rpx" @CommonFilterData="CommonFilterData" @GoBack="GoBack"></nav-bar>
+		<view class="page_content">
+			<scroll-view
+			    class="scroll_view_y"
+				:scroll-top="state.scrollTop"
+				scroll-y="true"
+				:refresher-enabled="false" 
+				:enable-back-to-top="true"
+				:show-scrollbar="false" 
+				:scroll-with-animation="true" 
+				refresher-default-style="none"
+				refresher-background="#F8F9FD" 
+				:refresher-triggered="state.isRefreshing" 
+				@scrolltolower="OnLoadMore"
+				@refresherrefresh="OnRefresh"
+				@scroll="OnScroll">
+				<view class="refresh_loading" v-if="state.isRefreshing"><uni-load-more status="loading" /></view>
+				<view class="page_list">
+					<view class="list_item" v-for="item in state.pageList" :key="item.id" @click="PreviewHonorDetail(item.id)">
+						<view class="item_honor_type">
+							<view class="honor_type_item">{{item.awardDatetime}}</view>
+							<view class="honor_type_item">{{item.awardDatetime}}</view>
+						</view>
+						<view class="honor_content">
+							<image class="honor_pic" :src="item.certPicUrl"></image>
+							<view class="honor_info">
+								<view class="honor_info_top">
+									<view class="honor_name">{{item.honorName}}</view>
+									<view class="teacher_name">获奖人：{{item.teacherName}}</view>
+								</view>
+								<view class="created_at">上传时间：{{item.createdAt}}</view>
+							</view>
+						</view>
+					</view>
+				</view>
+				<view class="no_data" v-if="!state.isLoading && state.pageList.length == 0">
+					<image class="no_data_img" src="@/static/image/bg/no_data.png"></image>
+					<text class="no_data_text">暂无数据</text>
+				</view>
+				<uni-load-more v-if="state.pageList.length > 0" :status="state.loadStatus" />
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import navBar from '@/components/nav-bar.vue';
+	import {queryHonorTypeList,queryHonorTeacherListDetail} from '@/reqApi/teacherHonor.js';
+	import {
+		reactive,
+		nextTick
+	} from 'vue';
+	import { onLoad } from '@dcloudio/uni-app';
+	const state = reactive({
+		tabList:[],
+		tabBtns:[{
+			label:'全部',
+			value:'',
+		},{
+			label:'最近3月',
+			value:'3',
+		},{
+			label:'最近半年',
+			value:'6',
+		},{
+			label:'最近1年',
+			value:'12',
+		}],
+		pageLists:[],//全部数据
+		pageList:[],//列表数据
+		honorTypeId:'',//荣誉类型
+		teacherId: '',//教师id
+		teacherName:'',//教师名称
+		dateType:'',//获奖时间
+		pageSize: 30,
+		pageNum: 1,
+		pages:0,
+		scrollTop:0,
+		oldScrollTop:0,
+		isRefreshing:false,//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
+		isLoading:true,//加载中
+		noMoreData:false,//没有更多数据了
+		loadStatus:'more',//loading状态
+	})
+	onLoad((option) => {
+		state.teacherId = option.teacherId;
+		state.teacherName = option.teacherName;
+		GetHonorTypeList();
+		OnLoadData(true);
+	});
+	//查询荣誉类型列表
+	const GetHonorTypeList = () => {
+		queryHonorTypeList().then(res=>{
+			if(res.code == 200){
+				const list = res?.data || [];
+				const tabList = list.map(item=>({
+					...item,
+					label:item.honorTypeName,
+					value:item.id
+				}))
+				state.tabList = [{label:'全部',value:''},...tabList];
+			}
+		})
+	}
+	//切换条件选择器
+	const CommonFilterData = (filterOptions,type) => {
+		const { tabsSelected,tabBtnSelected } = filterOptions;
+		state.honorTypeId = tabsSelected;
+		state.dateType = tabBtnSelected;
+		OnLoadData(true)
+	}
+	/*
+	*获取数据
+	* initPage:初始分页 从第一开始
+	*/
+	const OnLoadData = (initPage) => {
+		state.isLoading = true;
+		state.loadStatus = 'loading';
+		if (initPage) {
+			// uni.showLoading({
+			// 	title: '加载中'
+			// });
+			state.pageNum = 1;//如果是下拉刷新、重新查询 默认加载第一页
+			queryHonorTeacherListDetail({
+				honorTypeId:state.honorTypeId,//荣誉类型id
+				teacherId:state.teacherId,
+				dateType:state.dateType,
+				startDatetime:'',
+				endDatetime:''
+			}).then(res=>{
+				if(res.code == 200){
+					const tableData = res?.data?.tableData || [];
+					state.pageLists = tableData;//全部数据
+					const total = tableData?.length || 0;//总数
+					state.pages = Math.ceil(total / state.pageSize);//总页数
+					//默认加载
+					state.pageList = state.pageLists.slice(0, state.pageSize);
+					//没有更多了
+					state.noMoreData = state.pageNum == state.pages;
+					//分页+1
+					state.pageNum++;
+					state.isLoading = false;
+					state.isRefreshing = false;//下拉刷新未被触发
+					state.loadStatus = state.noMoreData?'no-more':'more';
+				}
+			}).finally(()=>{
+				// uni.hideLoading();
+				//返回到页面顶部
+				if(initPage){
+					GoTop();
+				}
+			})
+		}else{
+			const start = (state.pageNum - 1) * state.pageSize;
+			const end = start + state.pageSize;
+			const list = state.pageLists.slice(start, end);
+			state.pageList = [...state.pageList, ...list];
+			state.noMoreData = state.pageNum == state.pages;
+			state.pageNum++;
+			setTimeout(() => {
+				state.isLoading = false;
+				state.isRefreshing = false; //下拉刷新未被触发
+				state.loadStatus = state.noMoreData?'no-more':'more';
+			}, 0)
+		}
+	}
+	// 自定义下拉刷新被触发	 下拉刷新
+	const OnRefresh = () =>{
+		state.isRefreshing = true;//下拉刷新已经被触发
+		OnLoadData(true);
+	}
+	//滚动到底部/右边 触发上拉刷新
+	const OnLoadMore = () => {
+		if (state.isLoading || state.noMoreData) return;
+		OnLoadData(false);
+	}
+	//	滚动时触发
+	const OnScroll = (e) => {
+		state.oldScrollTop = e.detail.scrollTop;
+	}
+	//返回到顶部
+	const GoTop = () => {
+		// 解决view层不同步的问题
+		state.scrollTop = state.oldScrollTop;
+		nextTick(() => {
+			state.scrollTop = 0
+		});
+	}
+	//返回
+	const GoBack = () => {
+		uni.navigateBack({
+			delta: 1
+		});
+	}
+	const PreviewHonorDetail = () => {
+		uni.navigateTo({
+			url: `/pages/teacherHonor/honorTeacher/honorTeacherDetail?teacherId=${teacherId}`
+		});
+	}
+</script>
+
+<style lang="scss" scoped>
+	.page_body{
+		height: 100%;
+		min-height: auto;
+		.page_content{
+			height: calc(100% - 312rpx);
+			.scroll_view_y{
+				height: 100%;
+				.refresh_loading{
+					padding: 10rpx 0;
+				}
+			}
+			.page_list{
+				display: flex;
+				width: 100%;
+				flex-direction: column;
+				.list_item{
+					display: flex;
+					width: 100%;
+					flex-direction: column;
+					margin-top: 32rpx;
+					&:nth-child(1){
+						margin-top: 0;
+					}
+					.item_honor_type{
+						display: flex;
+						width: 100%;
+						.honor_type_item{
+							font-weight: 400;
+							font-size: 32rpx;
+							color: #333333;
+							&:nth-child(1){
+								font-weight: 500;
+								margin-right: 24rpx;
+							}
+						}
+					}
+					.honor_content{
+						margin-top: 16rpx;
+						display: flex;
+						width: 100%;
+						padding: 16rpx;
+						box-sizing: border-box;
+						background-color: #F8FAFE;
+						border-radius: 15rpx;
+						border: 2rpx solid #EBEEF5;
+						.honor_pic{
+							width: 320rpx;
+							height: 200rpx;
+							border-radius: 8rpx;
+							margin-right: 16rpx;
+							flex-shrink: 0;
+						}
+						.honor_info{
+							flex:1;
+							display: flex;
+							justify-content: space-between;
+							flex-direction: column;
+							overflow: hidden;
+							.honor_info_top{
+								display: flex;
+								width: 100%;
+								flex-direction: column;
+								.honor_name{
+									font-weight: 500;
+									font-size: 32rpx;
+									color: #333333;
+									width: 100%;
+									white-space: nowrap;
+									overflow: hidden;
+									text-overflow: ellipsis;
+								}
+								.teacher_name{
+									margin-top: 16rpx;
+									font-weight: 400;
+									font-size: 28rpx;
+									color: #333333;
+									width: 100%;
+									white-space: nowrap;
+									overflow: hidden;
+									text-overflow: ellipsis;
+								}
+							}
+							.created_at{
+								width: 100%;
+								line-height: 1.4;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								font-weight: 400;
+								font-size: 28rpx;
+								color: #999999;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages/teacherHonor/honorTeacher/index.vue

@@ -18,7 +18,7 @@
 			@scroll="OnScroll">
 			<view class="refresh_loading" v-if="state.isRefreshing"><uni-load-more status="loading" /></view>
 			<view class="page_list">
-				<view class="list_item" v-for="item in state.pageList" :key="item.id" @click="GoVideoDetails(item.id)">
+				<view class="list_item" v-for="item in state.pageList" :key="item.teacherId" @click="GoHonorTeacherDetail(item.teacherId,item.teacherName)">
 					<view class="teacher_name">
 						<image class="icon" src="@/static/image/icon/person.png"></image>
 						<text class="name">{{item.teacherName}}</text>
@@ -75,9 +75,9 @@
 		OnLoadData(true);
 	});
 	//切换条件选择器
-	const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
-		state.queryStr = searchWord;
-		state.sortType = tabsSelected;
+	const CommonFilterData = (filterOptions,type) => {
+		state.queryStr = filterOptions.searchWord;
+		state.sortType = filterOptions.tabsSelected;
 		OnLoadData(true)
 	}
 	/*
@@ -107,7 +107,6 @@
 					state.noMoreData = state.pageNum == state.pages;
 					//分页+1
 					state.pageNum++;
-					console.log()
 					state.isLoading = false;
 					state.isRefreshing = false;//下拉刷新未被触发
 					state.loadStatus = state.noMoreData?'no-more':'more';
@@ -155,11 +154,11 @@
 			state.scrollTop = 0
 		});
 	}
-	//视频详情
-	const GoVideoDetails = (id) => {
-		// uni.navigateTo({
-		// 	url: `/pages/studentStudy/videoDetails?id=${id}`
-		// });
+	//教师荣誉详情
+	const GoHonorTeacherDetail = (teacherId,teacherName) => {
+		uni.navigateTo({
+			url: `/pages/teacherHonor/honorTeacher/honorTeacherDetail?teacherId=${teacherId}&teacherName=${teacherName}`
+		});
 	}
 </script>
 
@@ -176,14 +175,8 @@
 			display: flex;
 			width: 100%;
 			flex-wrap: wrap;
-			gap:22rpx;
+			gap:24rpx 22rpx;
 			.list_item{
-				&:nth-child(1){
-					margin-top: 0rpx;
-				}
-				&:nth-child(2){
-					margin-top: 0rpx;
-				}
 				width: calc((100% - 22rpx) / 2);
 				// min-height: 280rpx;
 				padding: 16rpx 12rpx 18rpx 16rpx;
@@ -191,7 +184,6 @@
 				border-radius: 16rpx;
 				border: 2rpx solid #EBEEF5;
 				box-sizing: border-box;
-				margin-top: 24rpx;
 				overflow: hidden;
 				display: flex;
 				flex-direction: column;

pages/teacherStudy/courseCenter/index.vue

@@ -115,8 +115,9 @@
 		})
 	}
 	//切换条件选择器
-	const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
-		const {valueIndex, index,filterPickerValue} = filterPicker;
+	const CommonFilterData = (filterOptions,type) => {
+		const {searchWord,filterOpts,tabsSelected} = filterOptions;
+		const {valueIndex, index,filterPickerValue} = filterOpts;
 		if(type == 'filterPicker'){
 			if(index==0){//索引
 				state.filterPickerData[index].valueIndex = valueIndex;//一级条件选中项的索引

pages/teacherStudy/learningMonitor/index.vue

@@ -127,8 +127,9 @@
 		})
 	}
 	//切换条件选择器
-	const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
-		const {valueIndex, index,filterPickerValue} = filterPicker;
+	const CommonFilterData = (filterOptions,type) => {
+		const {searchWord,filterOpts,tabsSelected} = filterOptions;
+		const {valueIndex, index,filterPickerValue} = filterOpts;
 		state.queryStr = searchWord;
 		state.courseType = filterPickerValue[0];
 		state.teachCourseTypeId = filterPickerValue[1];

pages/teacherStudy/myLearning/index.vue

@@ -138,8 +138,9 @@
 		})
 	}
 	//切换条件选择器
-	const CommonFilterData = (searchWord,filterPicker,tabsSelected,type) => {
-		const {valueIndex, index,filterPickerValue} = filterPicker;
+	const CommonFilterData = (filterOptions,type) => {
+		const {searchWord,filterOpts,tabsSelected} = filterOptions;
+		const {valueIndex, index,filterPickerValue} = filterOpts;
 		state.queryStr = searchWord;
 		state.courseType = filterPickerValue[0];
 		state.teachCourseTypeId = filterPickerValue[1];

reqApi/studentStudy.js

@@ -1,4 +1,4 @@
-// 教师研修
+// 学生学习
 import request from '@/common/request.js';
 // 教师权限
 export function queryTeacherCourseTypeList(data) {//获取顶部查询项

reqApi/teacherHonor.js

@@ -1,4 +1,4 @@
-// 教师研修
+// 荣誉教师
 import request from '@/common/request.js';
 
 export function queryHonorTypeOverView(data) {//查询荣誉总览列表数据接口
@@ -24,4 +24,10 @@ export function updateHonorData(data) {//修改荣誉类型接口
 }
 export function queryHonorTeacherListData(data) {//查询荣誉教师列表接口
 	return request.get('/api/v1/queryHonorTeacherListData',data)
+}
+export function queryHonorTypeList() {//查询荣誉类型列表
+	return request.get('/api/v1/queryHonorTypeList')
+}
+export function queryHonorTeacherListDetail(data) {//教师荣誉详情
+	return request.post('/api/v1/queryHonorTeacherListDetail',data)
 }

style/common.scss

@@ -395,6 +395,13 @@ uni-page-body {
 		padding: 0 24px 0 96rpx;
 		box-sizing: border-box;
 		box-shadow: 0px 4rpx 16rpx 0px rgba(0,0,0,0.02), inset 0px -2rpx 0px 0px #F3F3F3;
+		&.only_title{
+			padding: 0 96rpx;
+			height: 96rpx;
+			.nav_title{
+				text-align: center;
+			}
+		}
 		// 标题
 		.nav_title{
 			font-weight: 600;
@@ -462,16 +469,22 @@ uni-page-body {
 //公共 tabs 样式
 .scroll_tabs {
 	display: flex;
+	margin-top: 24rpx;
 	height: 56rpx;
-	padding: 24rpx 24rpx 0;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	.uni-scroll-view-content {
+		display: flex;
+		gap: 48rpx;
+	}
 	.tab_item {
 		display: inline-flex;
 		font-weight: 400;
 		font-size: 28rpx;
 		color: #999999;
 		position: relative;
-		margin-right: 48rpx;
 		height: 100%;
+		white-space: nowrap;
 		&.selected {
 			font-weight: 500;
 			font-size: 32rpx;
@@ -488,6 +501,39 @@ uni-page-body {
 		}
 	}
 }
+//公共 tabBtns 样式
+.scroll_tab_btn{
+	display: flex;
+	margin-top: 32rpx;
+	height: 72rpx;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	.uni-scroll-view-content {
+		display: flex;
+		gap: 24rpx;
+	}
+	.tab_item {
+		flex:1;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		font-weight: 400;
+		font-size: 28rpx;
+		color: #333333;
+		height: 100%;
+		box-sizing: border-box;
+		background-color: #FFFFFF;
+		border-radius: 8rpx;
+		border: 2rpx solid #DCDFE6;
+		white-space: nowrap;
+		&.selected {
+			font-weight: 500;
+			color: #2E64FA;
+			background-color: rgba(46,100,250,0.1);
+			border: 2rpx solid #2E64FA;
+		}
+	}
+}
 //定义只有标题时的表头样式
 .custom_navbar_only_title{
 	.uni-navbar--border{