You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.0 KiB
142 lines
3.0 KiB
<template>
|
|
<view class="me">
|
|
<view class="navBarBox" :style="{height:navBarBoxHeight+'rpx'}">
|
|
<!-- 状态栏占位 -->
|
|
<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
|
|
<!-- 真正的导航栏内容 -->
|
|
<view class="navBar">
|
|
<view>我的</view>
|
|
</view>
|
|
</view>
|
|
<view class="me-top">
|
|
<view class="me-info">
|
|
<view class="me-info-img">
|
|
<u-avatar :src="info.headimgurl?info.headimgurl:headReplace" size="120"></u-avatar>
|
|
<view>
|
|
<span>陈毅</span><u-icon name="edit-pen-fill"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="me-info-party">
|
|
中共苏州工业园区斜塘街道财务和资产管理局支部委员会
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="me-list">
|
|
<view class="me-list-item" v-for="item in list">
|
|
<view class="me-list-item-left">
|
|
<image :src="item.src" :style="{width:item.width,height:item.height}"></image>
|
|
<view>{{item.title}}</view>
|
|
</view>
|
|
<view @click="toUrl(item.url)">
|
|
<u-icon name="arrow-right" size="40" color="#a7a7a7"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
|
|
export default {
|
|
components: {
|
|
htzImageUpload
|
|
},
|
|
data() {
|
|
return {
|
|
navBarBoxHeight: 0,
|
|
statusBarHeight: 40,
|
|
info:{},
|
|
headReplace:require("@/static/me-img.png"),
|
|
list:[{
|
|
src:require("@/static/me-clock.png"),
|
|
width:"55rpx",
|
|
height:"55rpx",
|
|
title:'学习记录',
|
|
url:"pages/record/record"
|
|
}]
|
|
}
|
|
},
|
|
onLoad() {
|
|
// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
|
|
this.navBarBoxHeight = 80 + this.statusBarHeight * 2
|
|
},
|
|
methods: {
|
|
toUrl(url){
|
|
if(url){
|
|
uni.navigateTo({
|
|
url:url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.me {
|
|
// height:100vh;
|
|
// background: linear-gradient(to right, #da212d, #f96666);
|
|
|
|
.navBarBox {
|
|
// position: fixed;
|
|
// top: 0;
|
|
// left: 0;
|
|
// z-index: 999;
|
|
width: 100%;
|
|
padding: 0 20rpx;
|
|
// margin-bottom:24rpx;
|
|
background: linear-gradient(to right, #da212d, #f96666);
|
|
|
|
.navBar {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
&-info{
|
|
background: linear-gradient(to right, #da212d, #f96666);
|
|
color:#fff;
|
|
font-size: 32rpx;
|
|
padding:35rpx;
|
|
padding-top:0;
|
|
padding-bottom:105rpx;
|
|
&-img{
|
|
display: flex;
|
|
align-items: center;
|
|
.u-avatar{
|
|
margin-right:20rpx
|
|
}
|
|
span{
|
|
margin-right:10rpx
|
|
}
|
|
}
|
|
&-party{
|
|
font-size: 24rpx;
|
|
margin-top:35rpx
|
|
}
|
|
}
|
|
&-list{
|
|
margin-top:-70rpx;
|
|
border-radius: 70rpx 70rpx 0 0;
|
|
background-color: #fff;
|
|
&-item{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding:50rpx 35rpx;
|
|
border-bottom:1px solid #ddd;
|
|
font-size: 32rpx;
|
|
color:#333333;
|
|
& image{
|
|
margin-right:20rpx;
|
|
vertical-align: middle;
|
|
}
|
|
&-left{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |