|
|
@@ -0,0 +1,225 @@
|
|
|
+<template>
|
|
|
+ <view class="page-wrap">
|
|
|
+ <view class="tabs-panel">
|
|
|
+ <view :class="{item:true, active: tabActive === item.value}" v-for="(item,index) in tabList" :key="index"
|
|
|
+ @click="tabActive =item.value">
|
|
|
+ {{item.label}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 团队成员 -->
|
|
|
+ <view v-if="tabActive === 1" class="list-panel">
|
|
|
+ <view class="item">
|
|
|
+ <image class="avatar" src="../../static/auth-icon.png" mode="aspectFill"></image>
|
|
|
+ <view class="text">
|
|
|
+ 张无忌 18991397914
|
|
|
+ <text class="sub">总经办</text>
|
|
|
+ </view>
|
|
|
+ <button class="btn">权限设置</button>
|
|
|
+ <button class="btn">删除</button>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <image class="avatar" src="../../static/auth-icon.png" mode="aspectFill"></image>
|
|
|
+ <view class="text">
|
|
|
+ 张无忌 18991397914
|
|
|
+ <text class="sub">总经办</text>
|
|
|
+ </view>
|
|
|
+ <button class="btn">权限设置</button>
|
|
|
+ <button class="btn">删除</button>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <image class="avatar" src="../../static/auth-icon.png" mode="aspectFill"></image>
|
|
|
+ <view class="text">
|
|
|
+ 张无忌 18991397914
|
|
|
+ <text class="sub">总经办</text>
|
|
|
+ </view>
|
|
|
+ <button class="btn">待审核</button>
|
|
|
+ <button class="btn">删除</button>
|
|
|
+ </view>
|
|
|
+ <button class="add-btn">+ 添加团队成员</button>
|
|
|
+ </view>
|
|
|
+ <!-- 部门管理 -->
|
|
|
+ <view v-if="tabActive === 2" class="list-panel">
|
|
|
+ <view class="item">
|
|
|
+ <view class="text">总经办</view>
|
|
|
+ <button class="btn">删除</button>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="text">财务部</view>
|
|
|
+ <button class="btn">删除</button>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="text">行政部</view>
|
|
|
+ <button class="btn">删除</button>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="text">后勤部</view>
|
|
|
+ <button class="btn">删除</button>
|
|
|
+ </view>
|
|
|
+ <button class="add-btn">+ 添加新部门</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabActive: 1,
|
|
|
+ tabList: [{
|
|
|
+ label: '团队成员',
|
|
|
+ value: 1
|
|
|
+ }, {
|
|
|
+ label: '部门管理',
|
|
|
+ value: 2
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .page-wrap {
|
|
|
+ padding-top: 82.42rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ // .submit-btn{
|
|
|
+ // width: 549.45rpx;
|
|
|
+ // height: 75.55rpx;
|
|
|
+ // background: #00BCD2;
|
|
|
+ // font-size: 27.47rpx;
|
|
|
+ // color: #fff;
|
|
|
+ // border-radius: 8.24rpx;
|
|
|
+ // margin: 54.95rpx auto;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-panel {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 82.42rpx;
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ padding: 0 41.21rpx;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 1rpx;
|
|
|
+ background: #e0e0e0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item {
|
|
|
+ padding: 0 9.62rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ color: #999;
|
|
|
+ line-height: 82.42rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &+.item {
|
|
|
+ margin-left: 27.47rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .active {
|
|
|
+ color: #00BCD2;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0%;
|
|
|
+ right: 0%;
|
|
|
+ bottom: 0%;
|
|
|
+ height: 5.49rpx;
|
|
|
+ background: #00BCD2;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-panel {
|
|
|
+ margin-top: 13.74rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16.48rpx 27.47rpx;
|
|
|
+ min-height: 96.15rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ &+.item::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0%;
|
|
|
+ right: 0%;
|
|
|
+ top: 0%;
|
|
|
+ height: 1rpx;
|
|
|
+ transform: scaleY(.5);
|
|
|
+ background: #e0e0e0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 76.92rpx;
|
|
|
+ height: 76.92rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ color: #545E8F;
|
|
|
+ margin-left: 13.74rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sub {
|
|
|
+ display: block;
|
|
|
+ font-size: 24.73rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ background: none;
|
|
|
+ border: none;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ color: #F97631;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 0;
|
|
|
+ margin-left: 13.74rpx;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add-btn{
|
|
|
+ margin-top: 27.47rpx;
|
|
|
+ font-size: 27.47rpx;
|
|
|
+ color: #00BCD2;
|
|
|
+ height: 82.42rpx;
|
|
|
+ line-height: 82.42rpx;
|
|
|
+ display: block;
|
|
|
+ text-align: left;
|
|
|
+ padding: 0 0 0 54.95rpx;
|
|
|
+ background: #fff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 13.74rpx;
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|