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.
 
 
 
 

177 lines
3.8 KiB

<template>
<view class="detail">
<view class="addDiver_card">
<view class="card_title">
<view class="tiao"></view>
<view class="card_title_text">基础信息</view>
</view>
<uni-list>
<uni-list-item>
<view class="list_header" slot="header">
用户手机号
</view>
<view style="padding-right: 16px !important;" slot="body" class="list_right">
<input v-model="postData.userName" placeholder="请输入昵称" class="list_right_input" />
</view>
</uni-list-item>
<uni-list-item>
<view class="list_header" slot="header">
用户姓名
</view>
<view style="padding-right: 16px !important;" slot="body" class="list_right">
<input v-model="postData.userName" placeholder="请输入昵称" class="list_right_input" />
</view>
</uni-list-item>
<uni-list-item>
<view class="list_header" slot="header">
用户密码
</view>
<view style="padding-right: 16px !important;" slot="body" class="list_right">
<input v-model="postData.userName" placeholder="请输入昵称" class="list_right_input" />
</view>
</uni-list-item>
</uni-list>
<view class="card_title">
<view class="tiao"></view>
<view class="card_title_text">用户权限信息</view>
</view>
<uni-list>
<uni-list-item>
<view class="list_header" slot="header">
选择企业
</view>
<view style="padding-right: 16px !important;" slot="body" class="list_right">
<input v-model="postData.userName" placeholder="请输入昵称" class="list_right_input" />
</view>
</uni-list-item>
<uni-list-item direction="column" >
<view class="list_header" slot="header">
所属权限
</view>
<view slot="body" >
<view class="label-list">
<text class="label">星油云站超级管理员</text>
</view>
</view>
</uni-list-item>
</uni-list>
</view>
<view class="button-group">
<view class="button red">修改</view>
<view class="button blue">保存</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
postData: {}
}
}
}
</script>
<style lang="scss" scoped>
.detail {
padding: 0 40rpx;
.addDiver_card {
background: #FFFFFF;
box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
border-radius: 20rpx;
margin-top: 38rpx;
overflow: hidden;
padding: 20rpx;
box-sizing: border-box;
.card_title {
display: flex;
// border-bottom: 1px solid #F0F0F0;
align-items: center;
padding-bottom: 17rpx;
height: 86rpx;
}
.card_title_text {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
margin-left: 10rpx;
}
.tiao {
width: 8rpx;
height: 34rpx;
background: #2866FF;
}
.list_header {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
display: flex;
align-items: center;
// padding-left: 16px;
position: relative;
height: fit-content;
}
.list_right {
flex: 1;
display: flex;
justify-content: flex-end;
}
.list_right_input {
width: 100%;
color: #333333;
text-align: end !important;
font-size: 28rpx;
text-align: right !important;
padding-left: 90rpx;
box-sizing: border-box;
}
.label-list {
margin-top: 25rpx;
}
.label {
padding: 10rpx 15rpx;
color: #999;
font-size: 24rpx;
border: 1px solid #F0F0F0;
border-radius: 5rpx;
}
}
.button-group {
position: absolute;
left: 50%;
bottom: 70rpx;
transform: translateX(-50%);
}
.button {
width: 670rpx;
height: 100rpx;
text-align: center;
line-height: 100rpx;
color: #fff;
border-radius: 10rpx;
&:nth-of-type(2) {
margin-top: 50rpx;
}
&.red{
background: #EA0000;
}
&.blue {
background: #2866FF;
}
}
}
</style>