Bläddra i källkod

筛选页面开发+样式优化

tanxue 2 månader sedan
förälder
incheckning
19358ab469

+ 13 - 0
common/styles/global/components.scss

@@ -256,6 +256,19 @@ margin-right: 18rpx;display: inline-block;vertical-align: middle;}
 	
 }
 
+/***** 单选块列表 *****/
+.phone-radio-group{
+	display: flex;flex-wrap: wrap;overflow: auto;
+	box-sizing: border-box;padding:16rpx;background-color: #fff;
+	.form-radio-double-group{justify-content: space-between;}
+	.phone-radio-item{
+		width: 23%;height:60rpx;line-height:60rpx;border-radius: 6rpx;box-sizing: border-box;
+		background-color:#f5f5f5;text-align: center;margin:10rpx 1%;@include single-line-ellipsis();
+		box-sizing: border-box;padding: 0 6rpx;font-size: 26rpx;
+	}
+	.radioActive{background-color:#e5f8f4;border:1rpx solid #6bccb0;color:#6bccb0;}
+}
+		
 /***** 考试须知  *****/
 .phone-ksxz-dialog{
 	position: relative;

+ 11 - 10
common/styles/global/pages.scss

@@ -520,16 +520,7 @@
 	.all-type-box{
 		position: absolute;top: 80rpx;left: 0;right: 0;bottom: 0;
 		z-index: 2;background-color: rgba(0,0,0,0.3);
-		.form-radio-group{
-			height: 500rpx;display: flex;flex-wrap: wrap;overflow: auto;border-top: 1rpx solid #f8f9fd;
-			box-sizing: border-box;padding:16rpx;background-color: #fff;}
-		.form-radio-double-group{justify-content: space-between;}
-		.form-radio-item{
-			width: 23%;height:60rpx;line-height:60rpx;border-radius: 6rpx;box-sizing: border-box;
-			background-color:#f5f5f5;text-align: center;margin:10rpx 1%;border:1rpx solid #f5f5f5;
-			box-sizing: border-box;padding: 0 6rpx;font-size: 26rpx;
-		}
-		.genderActive{background-color:#e5f8f4;border:1rpx solid #6bccb0;color:#6bccb0;}
+		.data-check-radio-group{height: 500rpx;border:1rpx solid #f5f5f5;}
 	}
 }
 
@@ -626,4 +617,14 @@
 	.tongzhi-name{font-size: 32rpx;color:#333;margin-bottom: 24rpx;line-height: 1.6;}
 	.tongzhi-time{font-size: 28rpx;color:#969495;margin-bottom: 24rpx;}
 	.tongzhi-content{font-size: 28rpx;color:#666;text-align: left;line-height: 1.6;}
+}
+
+/*** 筛选 ***/
+.phone-filter-page{
+	width: 100%;height: 100vh;background-color: #f8f9fd;
+	display: flex;flex-direction: column;
+	.filter-body-box{margin-top: 20rpx;background-color: #fff;flex:1;overflow: auto;}
+	.filter-body-name{margin: 0 calc(16rpx + 1%);font-size: 28rpx;color: #333;
+	font-weight: 600;box-sizing: border-box;padding: 20rpx 0 0;}
+	.filter-radio-group{border-bottom:1rpx solid #f5f5f5;}
 }

+ 4 - 4
pages.json

@@ -201,17 +201,17 @@
 			}
 		},
 		{
-			"path" : "pages/admin/kaozheng/list",
+			"path" : "pages/admin/banzheng/list",
 			"style" : 
 			{
 				"navigationBarTitleText" : ""
 			}
 		},
 		{
-			"path" : "pages/admin/kaozheng/config",
-			"style" : 
+			"path" : "pages/admin/banzheng/filter",
+			"style" :
 			{
-				"navigationBarTitleText" : ""
+				"navigationStyle": "custom"
 			}
 		}
 	],

+ 3 - 3
pages/admin/Jiazheng/common/dataChecked.vue

@@ -1,8 +1,8 @@
 <template>
-	<view class="form-radio-group">
+	<view class="phone-radio-group data-check-radio-group">
 		<!-- 技能块展示 -->
-		<view v-for="item in displayedList" :key="item.id" class="form-radio-item"
-			:class="{ genderActive: isSelected(item.id) }" @click="toggleSelect(item)">
+		<view v-for="item in displayedList" :key="item.id" class="phone-radio-item"
+			:class="{ radioActive: isSelected(item.id) }" @click="toggleSelect(item)">
 			{{ item.name }}
 		</view>
 		<!-- 添加按钮 -->

+ 0 - 8
pages/admin/kaozheng/config.vue

@@ -1,8 +0,0 @@
-<template>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

+ 0 - 22
pages/admin/kaozheng/list.vue

@@ -1,22 +0,0 @@
-<template>
-	<view>
-		
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				
-			}
-		},
-		methods: {
-			
-		}
-	}
-</script>
-
-<style>
-
-</style>