universal-wechat-uniapp-241007/pages/index/center.vue

<template>
	<view class="page">
		<view class="beijin">

			<view class=" profile">
				<view class="o">
					<view class="headImage">
						<!-- <img src="https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg"
							alt="" /> -->
						<image
							src="https://k.sinaimg.cn/n/sinakd20117/0/w800h800/20240127/889b-4c8a7876ebe98e4d619cdaf43fceea7c.jpg/w700d1q75cms.jpg"
							mode="aspectFill"></image>
					</view>

					<view class="setUp">
						设置
					</view>
				</view>

				<view class="account">
					<view class="number">
						狐友1712378974678376
					</view>
					<view class="gender">
						<uv-icon name="man" size="34rpx" color="rgb(127 200 239)"></uv-icon>
					</view>

					<view class="authentication">
						未认证
					</view>
				</view>
				<view class="Days">
					你已经成为狐友133天啦~
				</view>

				<view class="box">
					<view class="followWithnterest">
						<view class="digit">
							2
						</view>
						<view class="close">
							关注
						</view>

					</view>
					<view class="shut">

						|
					</view>
					<view class="fenst">
						<view class="digit">
							0
						</view>
						<view class="fans">
							粉丝
						</view>
					</view>

				</view>

			</view>
		</view>

		<view class="Content">
			<uv-tabs :list="list" @click="click"
			:activeStyle="{color : '#000', fontWeight : 900}"
			lineColor="#00f"
			lineHeight="8rpx"
			lineWidth="50rpx"></uv-tabs>

		</view>

		<tabber select="3" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	export default {
		components: {
			tabber,
		},
		computed: {},
		data() {
			return {
				list: [{
					name: '关注',
				}, {
					name: '评论',
				}]
			}
		},
		methods: {
			click(item) {
				console.log('item', item);
			}

		}
	}
	
</script>

<style scoped lang="scss">
	.page {
		.beijin {
			background: linear-gradient(to bottom, rgb(85, 94, 123), rgb(45, 51, 73));
			background-color: black;
			color: white;

			.profile {
				padding: 40rpx;
				padding-top: 160rpx;

				.box {
					padding: 5rpx 10rpx;
					display: flex;
					align-items: center;
					text-align: center;

					.followWithnterest {
						.digit {
							padding: 20rpx;
						}

						.close {
						}

					}
					
					.shut{
						margin: 0rpx 20rpx;
						
					}
					
					.fenst {
						.digit {
							padding: 20rpx;
						}
					
						.fans {
						}
					}
				}

				.account {
					display: flex;
					align-items: center;

					.number {
						letter-spacing: 2rpx;
						margin-top: 10rpx;
					}

					.gender {

						margin: 20rpx 10rpx;

					}

					.authentication {
						font-size: 20rpx;

					}
				}

				.Days {
					margin-top: 15rpx;
					font-size: 22rpx;
					letter-spacing: 2rpx;
				}

				.o {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.headImage {
						image {
							height: 100px;
							width: 100px;
							border-radius: 50%;
						}
					}

					.setUp {
					}
				}
			}
		}

		.Content {}
	}
</style>