|
@@ -0,0 +1,126 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="person">
|
|
|
+ <view class="image-box">
|
|
|
+ <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 个人信息中心 -->
|
|
|
+ <view class="info-box">
|
|
|
+ <view class="info-avatar">
|
|
|
+ <Image src="https://cdn.uviewui.com/uview/album/1.jpg" />
|
|
|
+ <view class="edit" @tap="$Router.push('/pages/my/editData/index')">
|
|
|
+ <u-icon name="edit-pen" color="#4688b6" />
|
|
|
+ <view> 编辑资料</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="nickname">yizhiyang</view>
|
|
|
+ <view class="follow">
|
|
|
+ <view>关注<text>3</text></view>
|
|
|
+ <view>粉丝<text>3</text></view>
|
|
|
+ <view>好友<text>331</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 个人动态 -->
|
|
|
+ <u-tabs
|
|
|
+ :list="list2"
|
|
|
+ lineWidth="70"
|
|
|
+ lineColor="#347caf"
|
|
|
+ :scrollable="false"
|
|
|
+ :activeStyle="{
|
|
|
+ color: '#347caf',
|
|
|
+ fontWeight: 'bold',
|
|
|
+ transform: 'scale(1.05)',
|
|
|
+ }"
|
|
|
+ :inactiveStyle="{
|
|
|
+ color: '#b7b6b8',
|
|
|
+ transform: 'scale(1)',
|
|
|
+ }"
|
|
|
+ itemStyle="padding-left: 90rpx; padding-right: 80rpx; height: 120rpx;"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ list2: [
|
|
|
+ {
|
|
|
+ name: '主页',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '动态',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.person {
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #efefef;
|
|
|
+ .image-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 340rpx;
|
|
|
+ > Image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 个人信息中心 */
|
|
|
+ .info-box {
|
|
|
+ height: 280rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ margin: -140rpx 30rpx 30rpx 30rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+ .info-avatar {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ > Image {
|
|
|
+ width: 180rpx;
|
|
|
+ height: 180rpx;
|
|
|
+ border-radius: 90rpx;
|
|
|
+ display: block;
|
|
|
+ margin-top: -90rpx;
|
|
|
+ margin-left: 80rpx;
|
|
|
+ }
|
|
|
+ .edit {
|
|
|
+ display: flex;
|
|
|
+ width: 180rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ margin: 15rpx 15rpx 0 0;
|
|
|
+ color: #4688b6;
|
|
|
+ border: 1px solid #4688b6;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .nickname {
|
|
|
+ font-size: 40rpx;
|
|
|
+ margin: 20rpx;
|
|
|
+ }
|
|
|
+ .follow {
|
|
|
+ display: flex;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #565656;
|
|
|
+ > view {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ > text {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #333;
|
|
|
+ margin-left: 5rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|