|
|
@@ -0,0 +1,147 @@
|
|
|
+<template>
|
|
|
+ <view class="home-page">
|
|
|
+ <view class="content-info">
|
|
|
+ <view class="top-box">
|
|
|
+ <image class="bgpic" src="/static/images/个人中心背景.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="avatar-box">
|
|
|
+ <image class="avatar" src="/static/images/小哥哥.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <text class="">
|
|
|
+ 毛之易
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="function-box">
|
|
|
+ <view class="role-switch">
|
|
|
+ <text class="func-text">角色切换</text>
|
|
|
+ <image class="msgbubble" src="/static/images/消息气泡.png"></image>
|
|
|
+ <image class="icon-more" src="/static/images/icon更多.png"></image>
|
|
|
+ <text class="role">管理员</text>
|
|
|
+ </view>
|
|
|
+ <view class="sys-setting">
|
|
|
+ <text class="func-text">系统设置</text>
|
|
|
+ <image class="icon-more" src="/static/images/icon更多.png"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bg-box">
|
|
|
+ <view class="logout-box">
|
|
|
+ <text class=""></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <tm-tabbar :permission="1" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ nowPermission:'',//用户当前第一权限
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .top-box{
|
|
|
+ position: relative;
|
|
|
+ height: 350rpx;
|
|
|
+ }
|
|
|
+ .bgpic{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 350rpx;
|
|
|
+ }
|
|
|
+ .info-box{
|
|
|
+ width: 700rpx;
|
|
|
+ height: 250rpx;
|
|
|
+ border-radius: 15rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ left: 25rpx;
|
|
|
+ right: 25rpx;
|
|
|
+ top: 226.25rpx;
|
|
|
+ box-shadow: 0px 10px 30px 0px rgba(0, 13, 51, 0.1);
|
|
|
+ }
|
|
|
+ .avatar-box{
|
|
|
+ width: 125rpx;
|
|
|
+ height: 125rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 75rpx;
|
|
|
+ top: 187.5rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ z-index: 2;
|
|
|
+ border-radius:50%
|
|
|
+ }
|
|
|
+ .avatar{
|
|
|
+ width: 112.5rpx;
|
|
|
+ height: 112.5rpx;
|
|
|
+ margin-left: 6.25rpx;
|
|
|
+ margin-top: 6.25rpx;
|
|
|
+ border-radius:50%
|
|
|
+ }
|
|
|
+ .function-box{
|
|
|
+ position: absolute;
|
|
|
+ top: 496.25rpx;
|
|
|
+ width: 750rpx;
|
|
|
+ }
|
|
|
+ .role-switch{
|
|
|
+ height: 100rpx;
|
|
|
+ width: 725rpx;
|
|
|
+ margin-left: 25rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-bottom: 0.62rpx solid #DADEE6;
|
|
|
+ }
|
|
|
+ .sys-setting{
|
|
|
+ height: 100rpx;
|
|
|
+ width: 725rpx;
|
|
|
+ margin-left: 25rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ .func-text{
|
|
|
+ font-size: 22.5rpx;
|
|
|
+ font-family: SourceHanSansCN-Medium, SourceHanSansCN;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #292C33;
|
|
|
+ line-height: 100rpx;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .icon-more{
|
|
|
+ width: 12.37rpx;
|
|
|
+ height: 21.21rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ float: right;
|
|
|
+ margin-top: 39.37rpx;
|
|
|
+ margin-right: 25rpx;
|
|
|
+ }
|
|
|
+ .msgbubble{
|
|
|
+ width: 50rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ background: #FF4060;
|
|
|
+ border-radius: 24px;
|
|
|
+ float: left;
|
|
|
+ margin-top: 35rpx;
|
|
|
+ margin-left: 15rpx;
|
|
|
+ }
|
|
|
+ .bg-box{
|
|
|
+ width: 750rpx;
|
|
|
+ height: 416.25rpx;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 87.5rpx;
|
|
|
+ background-color: #F5F6FA;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .role{
|
|
|
+ font-size: 22.5rpx;
|
|
|
+ font-family: SourceHanSansCN-Normal, SourceHanSansCN;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #7A8599;
|
|
|
+ line-height: 100rpx;
|
|
|
+ float: right;
|
|
|
+ margin-right: 25rpx;
|
|
|
+ }
|
|
|
+</style>
|
“yst
