194 lines
4.3 KiB
Vue
194 lines
4.3 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 基础信息 -->
|
||
<view class="info-card">
|
||
<view class="cover">
|
||
<view class="cover-add vertical">
|
||
<image src="@/static/icons/add-icon.png" mode="widthFix"></image>
|
||
<view>员工寸照</view>
|
||
</view>
|
||
<!-- <image src="@/static/dev/good_cover_00.jpg" mode="aspectFill"></image> -->
|
||
</view>
|
||
<view class="info-text">
|
||
<view class="info-inputs">
|
||
<input type="text" v-model="name" placeholder="姓名"/>
|
||
</view>
|
||
<view class="info-inputs">
|
||
<input type="number" v-model="phone" placeholder="手机号码"/>
|
||
</view>
|
||
<view class="info-inputs">
|
||
<input type="text" v-model="job" placeholder="职业"/>
|
||
</view>
|
||
<view class="info-inputs">
|
||
<picker :range="section" range-key="name" @change="pickerChange">
|
||
<view class="picker-text">
|
||
{{section[sectionIndex].name}}
|
||
<uni-icons class="icon" type="arrowdown" color="#555"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 权限设置 -->
|
||
<view class="title">权限设置</view>
|
||
<view class="jurisdiction">
|
||
<view class="item">
|
||
<label>
|
||
<view class="item-title">运营者权限</view>
|
||
<view class="item-info">管理、推广、设置等模块权限，可使用体验版小程序</view>
|
||
<checkbox class="item-checkbox" color="#c82626" />
|
||
</label>
|
||
</view>
|
||
<view class="item">
|
||
<label>
|
||
<view class="item-title">开发者权限</view>
|
||
<view class="item-info">开发模块权限，可使用体验版小程序、开发者工具（IDE）</view>
|
||
<checkbox class="item-checkbox" color="#c82626" />
|
||
</label>
|
||
</view>
|
||
<view class="item">
|
||
<label>
|
||
<view class="item-title">数据分析者（基础分析）</view>
|
||
<view class="item-info">统计模块权限，可使用体验版小程序</view>
|
||
<checkbox class="item-checkbox" color="#c82626" />
|
||
</label>
|
||
</view>
|
||
</view>
|
||
<!-- 按钮 -->
|
||
<view class="add-btns">
|
||
<button size="default">确认添加</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
section : [
|
||
{name: '技术部', id: 0},
|
||
{name: '市场部', id: 1},
|
||
{name: '南岗店', id: 2}
|
||
],
|
||
sectionIndex: 0,
|
||
name : '',
|
||
phone : '',
|
||
job : ''
|
||
};
|
||
},
|
||
methods:{
|
||
// 选择部门
|
||
pickerChange(e){
|
||
this.sectionIndex = e.detail.value
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
min-height: 100vh;
|
||
@extend .ios-bottom;
|
||
.title{
|
||
padding: ($padding/2) $padding;
|
||
color: $text-gray;
|
||
}
|
||
.jurisdiction{
|
||
background: white;
|
||
.item{
|
||
position: relative;
|
||
padding: $padding 150rpx $padding $padding;
|
||
&::after{
|
||
position: absolute;
|
||
left: $padding;
|
||
right: 0;
|
||
bottom: 0;
|
||
height: 1rpx;
|
||
content: " ";
|
||
background: $border-color;
|
||
}
|
||
&:last-child::after{
|
||
display: none;
|
||
}
|
||
.item-checkbox{
|
||
position: absolute;
|
||
right: $padding;
|
||
top: 50%;
|
||
height: 40rpx;
|
||
width: 40rpx;
|
||
margin-top: -27rpx;
|
||
}
|
||
.item-title{
|
||
font-size: $title-size;
|
||
padding-bottom: $margin/3;
|
||
}
|
||
.item-info{
|
||
font-size: $title-size-m;
|
||
color: $text-gray;
|
||
}
|
||
}
|
||
}
|
||
// 基础信息
|
||
.info-card{
|
||
background: white;
|
||
padding: $padding;
|
||
position: relative;
|
||
min-height: 238rpx;
|
||
.cover{
|
||
position: absolute;
|
||
top: $padding;
|
||
left: $padding;
|
||
background: #f8f8f8;
|
||
width: 229rpx;
|
||
height: 320rpx;
|
||
.cover-add{
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
image{
|
||
width: 128rpx;
|
||
}
|
||
color: $text-gray-m;
|
||
font-size: $title-size-m;
|
||
}
|
||
}
|
||
.info-text{
|
||
padding-left: $padding + 229;
|
||
.info-inputs{
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-bottom: solid 1rpx $border-color;
|
||
input{
|
||
height: 80rpx;
|
||
}
|
||
.picker-text{
|
||
position: relative;
|
||
padding-right: 80rpx;
|
||
.icon{
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 添加按钮
|
||
.add-btns{
|
||
padding: $padding;
|
||
button[size='default']{
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
padding: 0;
|
||
margin: 0;
|
||
background: $text-price;
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
color: white;
|
||
border-radius: 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|