|
|
@@ -0,0 +1,340 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="header">
|
|
|
+ <!-- 导航 -->
|
|
|
+ <view :class="flag?'sticky':'navbar'">
|
|
|
+ <view class="back">
|
|
|
+ <u-icon name="arrow-left" size="40"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="title">
|
|
|
+ 个人主页
|
|
|
+ </view>
|
|
|
+ <view class="camera">
|
|
|
+ <u-icon name="camera-fill" size="48"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 个人信息 -->
|
|
|
+ <view class="person-infos">
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../assets/img/shareP.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="infos">
|
|
|
+ <view class="name">
|
|
|
+ 王泽
|
|
|
+ </view>
|
|
|
+ <view class="department-position">
|
|
|
+ <view class="department">
|
|
|
+ <view class="icon">
|
|
|
+ <img src="../../assets/img/department2.png" alt="">
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 采购部
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="position">
|
|
|
+ <text class="icon">
|
|
|
+ <img src="../../assets/img/position2.png" alt="">
|
|
|
+ </text>
|
|
|
+ <text class="text">
|
|
|
+ 员工
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="grid">
|
|
|
+ <view class="item">
|
|
|
+ <view class="amout">
|
|
|
+ 999
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 发布
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="amout">
|
|
|
+ 999
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 点赞
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="amout">
|
|
|
+ 999
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 评论
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 分享 -->
|
|
|
+ <view class="share">
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ <view class="day">
|
|
|
+ 15
|
|
|
+ </view>
|
|
|
+ <view class="year-month">
|
|
|
+ 2023.1
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">
|
|
|
+ 周末去参加了公司组织的羽毛球赛~
|
|
|
+ </view>
|
|
|
+ <view class="photos">
|
|
|
+ <img src="../../assets/img/sharePic2.png" alt="">
|
|
|
+ <img src="../../assets/img/sharePic3.png" alt="">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ <view class="day">
|
|
|
+ 15
|
|
|
+ </view>
|
|
|
+ <view class="year-month">
|
|
|
+ 2023.1
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">
|
|
|
+ 周末去参加了公司组织的羽毛球赛~
|
|
|
+ </view>
|
|
|
+ <view class="photos">
|
|
|
+ <img src="../../assets/img/sharePic2.png" alt="">
|
|
|
+ <img src="../../assets/img/sharePic3.png" alt="">
|
|
|
+ <img src="../../assets/img/sharePic3.png" alt="">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="date">
|
|
|
+ <view class="day">
|
|
|
+ 15
|
|
|
+ </view>
|
|
|
+ <view class="year-month">
|
|
|
+ 2023.1
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="title">
|
|
|
+ 打工人必备！提高工作效率的电脑快捷键。~
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-divider border-color="#CFD2D5">已经到底了</u-divider>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ flag: false,
|
|
|
+ scrollTop: "",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onPageScroll(e) {
|
|
|
+ this.scrollTop = e.scrollTop;
|
|
|
+ console.log(this.scrollTop);
|
|
|
+ console.log(this.flag);
|
|
|
+ if (this.scrollTop >=44) {
|
|
|
+ this.flag = true;
|
|
|
+ } else {
|
|
|
+ this.flag = false;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ page{
|
|
|
+ background-color: #fff;
|
|
|
+ padding-bottom: 50px;
|
|
|
+ }
|
|
|
+ .header{
|
|
|
+ padding: 0 0 48rpx 0;
|
|
|
+ background: linear-gradient(180deg, rgba(183,208,255,1) 0%,rgba(244,244,246,1) 100%);
|
|
|
+ .navbar{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 44px;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ .title{
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sticky{
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ height: 44px;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ .title{
|
|
|
+ font-size: 16px;
|
|
|
+ color: rgba(16, 16, 16, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ // 个人信息
|
|
|
+ .person-infos{
|
|
|
+ margin-top: 32rpx;
|
|
|
+ padding: 0 48rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ .photo {
|
|
|
+ box-shadow: 0px 2px 8px 0px rgba(35, 72, 75, 15);
|
|
|
+ border: 2px solid rgba(255, 255, 255, 1);
|
|
|
+ border-radius: 50px;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ img {
|
|
|
+ vertical-align: middle;
|
|
|
+ border-radius: 50px;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .infos {
|
|
|
+ margin-left:32rpx;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ line-height: 28px;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .department-position {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ margin-right: 8rpx;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .department {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .text{
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .position {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ margin-left: 24rpx;
|
|
|
+ .text{
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ .item {
|
|
|
+ width: 33.3%;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .amout {
|
|
|
+ font-size: 48rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .share{
|
|
|
+ padding: 32rpx;
|
|
|
+ .item{
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ display: flex;
|
|
|
+ .date{
|
|
|
+ .day{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight:bold;
|
|
|
+ line-height: 25px;
|
|
|
+ }
|
|
|
+ .year-month{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ margin-left: 52rpx;
|
|
|
+ border-bottom: 1px solid rgba(232, 232, 232, 1);
|
|
|
+ padding-bottom: 32rpx;
|
|
|
+ .title{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .photos{
|
|
|
+
|
|
|
+ img{
|
|
|
+ width: 248rpx;
|
|
|
+ height: 248rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .item:last-of-type{
|
|
|
+ .content{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
