ChuangHengWx/pages/my.vue

<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header title='我的' bgColor="transparent" :showback="false"></cus-header>
		<div class="info adffcacjc">
			<div class="i_avatar"></div>
			<div class="i_name">{{'龙傲天'}}</div>
			<div class="i_phone">手机号：{{'18888888888'}}</div>
		</div>
		<div class="box">
			<div class="tabs adf">
				<div class="pre" :class="{'active':tidx===1}" @tap="changeTab(1)">收藏</div>
				<div class="pre" :class="{'active':tidx===2}" @tap="changeTab(2)">评论</div>
			</div>
			<div class="list" :style="{'height':'calc(100vh - '+(356+mt)+'px)'}">
				<block v-if="tidx===1">
					<u-list @scrolltolower="stCollect">
						<u-list-item v-for="(item, index) in collectList" :key="index">
							<div class="l_item adfacjb">
								<div class="li_l">
									<div class="title">{{'撰写企业管理方案'}}</div>
									<div class="intro">{{'帮我写一篇关于企业管理的方案'}}</div>
									<div class="date">{{'4/25'}}</div>
								</div>
								<div class="li_r"></div>
							</div>
						</u-list-item>
					</u-list>
				</block>
				<block v-else-if="tidx===2">
					<div class="l_item" v-for="(item,index) in commentList" :key="index">
						
					</div>
					<u-list @scrolltolower="stComment">
						<u-list-item v-for="(item, index) in commentList" :key="index">
							
						</u-list-item>
					</u-list>
				</block>
			</div>
		</div>
		<Tabbar :tabbarIndex="2"></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/CusTabbar/index.vue'
	export default {
		components:{ Tabbar },
		data(){
			return {
				tidx:1,
				collectList:[1],
				commentList:[1]
			}
		},
		methods:{
			changeTab(index){
				this.tidx = index;
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		box-sizing: border-box;
		background: linear-gradient( 270deg, #EEEFF8 0%, #F6ECF4 100%, #F6ECF4 100%);
		.info{
			width: 100%;
			height: 410rpx;
			box-sizing: border-box;
			padding-bottom: 64rpx;
			.i_avatar{
				width: 188rpx;
				height: 188rpx;
				border-radius: 50%;
				background: #FFFFFF;
				margin-top: 30rpx;
			}
			.i_name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 40rpx;
				color: #252525;
				line-height: 40rpx;
				margin-top: 40rpx;
			}
			.i_phone{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #6B7280;
				line-height: 28rpx;
				margin-top: 20rpx;
			}
		}
	
		.box{
			width: 100%;
			border-radius: 32rpx 32rpx 0 0;
			background: #FFFFFF;
			.tabs{
				padding: 38rpx calc((100% - 500rpx) / 2) 40rpx;
				border-bottom: 1rpx solid #E5E7EB;
				.pre{
					width: 250rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #252525;
					line-height: 32rpx;
					text-align: center;
					position: relative;
					&.active{
						color: #761E6A;
						&::after{
							content:'';
							width: 120rpx;
							height: 4rpx;
							background: #833478;
							border-radius: 2rpx;
							position: absolute;
							left: 50%;
							margin-left: -60rpx;
							bottom: -40rpx;
						}
					}
				}
			}
		
			.list{
				overflow-y: auto;
				.l_item{
					padding: 30rpx 36rpx;
					border-bottom: 1rpx solid #E5E7EB;
					.li_l{
						width: calc(100% - 186rpx);
						.title{
							font-family: PingFang-SC, PingFang-SC;
							font-weight: bold;
							font-size: 32rpx;
							color: #252525;
							line-height: 32rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.intro{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #252525;
							line-height: 32rpx;
							margin-top: 20rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.date{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #999999;
							line-height: 32rpx;
							margin-top: 28rpx;
						}
					}
					.li_r{
						width: 166rpx;
						height: 166rpx;
					}
				}
			}
		}
	}
</style>