Przeglądaj źródła

样式布局最新需求调整

htc 1 dzień temu
rodzic
commit
94dd0e6fbd
2 zmienionych plików z 113 dodań i 10 usunięć
  1. 73 5
      pagesMy/archives.vue
  2. 40 5
      pagesNonprofit/nonprofitDetail.vue

+ 73 - 5
pagesMy/archives.vue

@@ -1,7 +1,21 @@
 <template>
-	<view class="common_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
+	<view class="common_page adffc" :style="{'height':h+'px', 'padding-top':mt+'px'}">
 		<cus-header title="我的档案" bgColor="#FFFFFF"></cus-header>
+		<div class="member">
+			<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
+				<view class="scroll-view-item_H" :id="'svih_'+index" v-for="(item,index) in memberList" :key="index" @tap="changeMember(item,index)">
+					<view class="cl_item" :class="{'active':midx===index}">
+						<text>{{item.name}}</text>
+					</view>
+				</view>
+			</scroll-view>
+		</div>
 		<div class="list">
+			<up-list @scrolltolower="scrolltolower" style="height: 100%;">
+				<up-list-item v-for="(item, index) in list" :key="index">
+					<ArchivesBox></ArchivesBox>
+				</up-list-item>
+			</up-list>
 			<ArchivesBox v-for="(item,index) in list" :key="index"></ArchivesBox>
 		</div>
 	</view>
@@ -11,15 +25,69 @@
 	import CusHeader from '@/components/CusHeader/index.vue'
 	import ArchivesBox from '@/components/pages/archivesBox/index.vue'
 	import { ref } from 'vue'
-	import { onReachBottom } from '@dcloudio/uni-app';
 	
+	const midx = ref(0)
+	const scrollLeft = ref(0)
+	const memberList = ref([
+		{id:1,name:'张三'},
+		{id:2,name:'李四'},
+		{id:3,name:'龙傲天'}
+	])
 	const list = ref([1,1,1,1,1])
 	
-	onReachBottom(()=>{
-		
-	})
+	const changeMember = (item,index) => {
+		midx.value = index;
+	}
 </script>
 
 <style scoped lang="scss">
+	.scroll-view_H {
+		white-space: nowrap;
+		width: 100%;
+	}
+	
+	.scroll-view-item_H {
+		display: inline-block;
+		height: 100%;
+		margin-left: 30rpx;
+		&:first-child{
+			margin-left: 0;
+		}
+	}
 	
+	.common_page{
+		padding: 0 0 40rpx;
+		box-sizing: border-box;
+		
+		.member{
+			width: 100%;
+			height: 56rpx;
+			padding: 0 30rpx;
+			margin-top: 20rpx;
+			box-sizing: border-box;
+			.cl_item{
+				padding: 0 26rpx;
+				height: 56rpx;
+				background: #FFFFFF;
+				border-radius: 10rpx;
+				font-family: PingFangSC, PingFang SC;
+				font-weight: 400;
+				font-size: 26rpx;
+				color: #252525;
+				line-height: 56rpx;
+				text-align: center;
+				&.active{
+					background: #B7F358;
+				}
+			}
+		}
+	
+		
+		.list{
+			padding: 0 24rpx;
+			flex: 1;
+			overflow-y: auto;
+			margin-top: 4rpx;
+		}
+	}
 </style>

+ 40 - 5
pagesNonprofit/nonprofitDetail.vue

@@ -56,21 +56,31 @@
 							<image class="sex" v-else-if="user.sex==1" src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/12/a1899fd0-c468-48d9-b554-2f17b75a4157.png"></image>
 							<div class="age" :class="{'women':user.sex==2,'man':user.sex==1}">{{46}}岁</div>
 						</div>
-						<div class="bottom">身份证 {{'340123**********09'}}</div>
+						<div class="left-bottom">身份证 {{'340123**********09'}}</div>
 					</div>
-					<div class="right">
+					<!-- <div class="right">
 						<image src="https://transcend.ringzle.com/xiaozhi-app/profile/2025/09/23/ebdf1327-3eeb-4797-8840-cb1ec4840d9a.png"></image>
-					</div>
+					</div> -->
 				</div>
 			</div>
 		</div>
-		<div class="box box4">
+		<!-- <div class="box box4">
 			<div class="box-title">活动详情</div>
 			<div class="box4-detail">
 				<up-read-more :toggle="true" showHeight="374rpx" color="#989998" fontSize="24rpx" openText="收起更多信息" closeText="展开更多信息">
 				    <rich-text :nodes="detail"></rich-text>
 				</up-read-more>
 			</div>
+		</div> -->
+		<div class="user">
+			<div class="user-pre adfacjb">
+				<div class="user-pre-left">联系人姓名</div>
+				<div class="user-pre-right">{{'周小瑾'}}</div>
+			</div>
+			<div class="user-pre adfacjb">
+				<div class="user-pre-left">联系人电话</div>
+				<div class="user-pre-right">{{'13688889999'}}</div>
+			</div>
 		</div>
 		<div class="bottom adfacjb">
 			<div class="left adffcacjc" @tap="handleShare">
@@ -262,7 +272,7 @@
 								}
 							}
 						}
-						.bottom{
+						&-bottom{
 							font-family: PingFangSC, PingFang SC;
 							font-weight: 400;
 							font-size: 24rpx;
@@ -286,6 +296,31 @@
 				margin-top: 40rpx;
 			}
 		}
+		
+		.user{
+			margin-top: 20rpx;
+			border-radius: 20rpx;
+			background: #FFFFFF;
+			&-pre{
+				padding: 40rpx 24rpx;
+				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #ECEEF5;
+				&-left{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 30rpx;
+					color: #676775;
+					line-height: 30rpx;
+				}
+				&-right{
+					font-family: PingFangSC, PingFang SC;
+					font-weight: 400;
+					font-size: 30rpx;
+					color: #252525;
+					line-height: 30rpx;
+					text-align: right;
+				}
+			}
+		}
 	
 		.bottom{
 			width: 100%;