办事 办事详情样式调整

pages/handleAffairs/handleAffairs.vue

@@ -1,6 +1,6 @@
 <template>
 
-	<view>
+	<view style="background-color:#fff ;">
 		<!-- 搜索栏 -->
 		<view class="input-view_contain">
 			<view class="input-view">
@@ -12,7 +12,7 @@
 		<!-- 网格配置列表滑动 -->
 		<view>
 			<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
-				<swiper class="swiper-box">
+				<swiper class="swiper-box" style="height: 160rpx;">
 					<swiper-item v-for="(item ,index) in gridtType" :key="index">
 						<uni-grid :column="5" :highlight="true" :showBorder="false">
 							<uni-grid-item v-for="(dataitem,dataindex) in item" :key="dataitem.id">
@@ -21,7 +21,6 @@
 										@click="querygrid(dataitem)"></image>
 									<uni-title type="h5" :title="dataitem.name" align="center"></uni-title>
 								</view>
-
 							</uni-grid-item>
 						</uni-grid>
 					</swiper-item>
@@ -41,8 +40,17 @@
 		<view>
 		    <!-- 使用分段器来切换推荐和收藏列表 -->
 		    <view class="segmented-control">
-		        <view class="segmented-control-item" :class="{ active: activeTab === 'recommend' }" @click="changeTab('recommend')">推荐</view>
-		        <view class="segmented-control-item" :class="{ active: activeTab === 'favorite' }" @click="changeTab('favorite')">收藏</view>
+		        <!-- <view class="segmented-control-item" :class="{ active: activeTab === 'recommend' }" @click="changeTab('recommend')">常办事项</view>
+		        <view class="segmented-control-item" :class="{ active: activeTab === 'favorite' }" @click="changeTab('favorite')">我的事</view> -->
+				<view 
+					class="segmented-control-item" 
+					:class="activeTab == e.label ? 'highlight' : 'not-highlight' " 
+					@click="changeTab(e.label)" 
+					v-for="(e,idx) in switchOption"
+					:key="idx"
+					>
+					{{ e.value }}
+				</view>
 		    </view>
 
 		    <!-- 根据选中的标签显示对应的列表 -->
@@ -91,7 +99,17 @@ import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
 				activeTab: 'recommend', // 默认选中推荐列表
 				recommendList: [], // 推荐列表数据
 				favoriteList: [], // 收藏列表数据
-				  userList: [], // 收藏列表数据
+			    userList: [], // 收藏列表数据
+			    switchOption:[
+				    {
+					    value:'常办事项',
+					    label:'recommend'
+				    },
+				    {
+					    value:'我的事',
+					    label:'favorite'
+				    }
+			    ]
 			};
 		},
 		created() {
@@ -191,8 +209,16 @@ import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
 	}
 </script>
 <style scoped lang="scss">
+	.not-highlight{
+		color:#ABB7C7;
+		background-color:#fff
+	}
+	.highlight{
+		color:#0CC689;
+		background-color:#fff;
+		border-bottom: 2px solid #0CC689;
+	}
 	.uni-header-image {
-
 		width: 40px;
 		height: 40px;
 		display: block;
@@ -216,6 +242,7 @@ import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
 		text-indent: 9%;
 		background-color: #F1F1F1;
 		border: none !important;
+		background-color:#fff
 	}
 	.demo-uni-row button:after{
 		border: none;
@@ -223,10 +250,11 @@ import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
 	.demo-uni-row::after{
 		content: '';
 		position: absolute;
-		width: 1rpx;
-		height: 90%;
+		width: 4rpx;
+		height: 46%;
 		left: 50%;
-		top: 5%;
+		top: 33%;
+		z-index: 10;
 		margin: auto;
 		background-color: #E1E1E1;
 	}
@@ -261,14 +289,23 @@ import { listDept,collectlist } from '@/api/handleAffairs/matter.js';
 		}
 	}
 	.segmented-control {
+		width: 100%;
+		height: 8vh;
 	    display: flex;
 	    justify-content: space-around;
 	    background-color: #f0f0f0;
 	}
-
+	.rnwdList{
+		min-height: 63vh;
+		background-color: #fff;
+	}
 	.segmented-control-item {
+		width: 50%;
+		height: 100%;
+		line-height: 250%;
+		text-align: center;
 	    padding: 10px;
-	    cursor: pointer;
+		font-size: 34rpx;
 	}
 
 	.segmented-control-item.active {

pages/topic/dept.vue

@@ -1,7 +1,13 @@
 <template>
 	<view>
-		<view style="height: 20%;">
-			<button v-for="(item,index) in userType" @click="onclick(item)">{{item.dictLabel}}
+		<view class="btnContain">
+			<button 
+				v-for="(item,idx) in userType" 
+				@click="onclick(item,idx)"
+				:class="idx == currentIdx ? 'highlight' : 'not-highlight'"
+				:style="idx == 0 ? 'text-align:left' : 'text-align:right'"
+				>
+				{{item.dictLabel}}
 			</button>
 		</view>
 		<view>
@@ -31,7 +37,7 @@
 			return {
 				userType: [], // 初始化用户类型为空
 				dataList: [],
-
+				currentIdx:null,
 			}
 		},
 		created() {
@@ -59,8 +65,8 @@
 				})
 				
 			},
-			onclick(row) {
-				
+			onclick(row,idx) {
+				this.currentIdx = idx
 				let data = {
 					application: row.dictValue,
 					shows: "0"
@@ -89,9 +95,38 @@
 		justify-content: center;
 		height: 100vh;
 	} */
-
+	.not-highlight{
+		color:#000;
+	}
+	.highlight{
+		color:#FF673D;
+	}
+	.btnContain{
+		position: relative;
+		width: 100%;
+		display: flex;
+		height: 20%;
+		background-color: #fff;
+		justify-content: space-between;
+	}
+	.btnContain::after{
+		content: '';
+		position: absolute;
+		width: 4rpx;
+		height: 40%;
+		left: 50%;
+		top: 30%;
+		z-index: 10;
+		margin: auto;
+		background-color: #E1E1E1;
+	}
 	button {
-		margin-bottom: 10px;
+		width: 30%;
+		border: none;
+		background-color: #fff;
+	}
+	button:after{
+		border: none;
 	}
 
 	.selected {