mall-web-ssr/components/mobile/staffManagement/StaffEdit.vue

<template>
  <div class="seek">
    <div class="com-mobile-header mobile-center-header">
      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
      <p>编辑角色</p>
      <p class="en-name"><img :src="`/images/mobile/center/${user.data.enterprise.uu ? 'en' : 'self'}.png`" alt="">{{currentEnName}}</p>
    </div>
    <div class="mobile-fix-content mobile-centerfix-content" id="mobile-staff-center">
      <div class="staff-role">
        <div class="staff-header"><span class="active_01"><b></b>管理员</span></div>
        <div class="staff-content">
          <label for="1" class="radio-label active">
            <input type="radio" v-model="selectFlag" name="role" value="" id="1"/>
          </label>
          <p class="staff-des">拥有管理员角色的用户不受权限控制，可以执行任何操作</p>
        </div>
      </div>
      <div class="staff-role">
        <div class="staff-header"><span class="active_02"><b></b>店长</span></div>
        <div class="staff-content">
          <label for="2" class="radio-label">
            <input type="radio" v-model="selectFlag" name="role" value="" id="2"/>
          </label>
          <p class="staff-des">店长可以对买/卖家中心的全部模块进行查看和编辑</p>
        </div>
      </div>
      <div class="staff-role">
        <div class="staff-header"><span class="active_03"><b></b>普通用户</span></div>
        <div class="staff-content">
          <label for="3" class="radio-label">
            <input type="radio" v-model="selectFlag" name="role" value="" id="3"/>
          </label>
          <p class="staff-des">可以进行交易相关的一般操作，不能进行“员工管理”和“角色权限”的编辑操作</p>
        </div>
      </div>
      <div class="staff-role">
        <div class="staff-header"><span class="active_04"><b></b>采购员</span></div>
        <div class="staff-content">
          <label for="4" class="radio-label">
            <input type="radio" v-model="selectFlag" name="role" value="" id="4"/>
          </label>
          <p class="staff-des" style="margin-top: .12rem;">可以查看并操作处理买家中心所有模块</p>
        </div>
      </div>
      <div class="staff-role">
        <div class="staff-header"><span class="active_05"><b></b>销售员</span></div>
        <div class="staff-content">
          <label for="5" class="radio-label">
            <input type="radio" v-model="selectFlag" name="role" value="" id="5"/>
          </label>
          <p class="staff-des">可以查看并操作处理卖家中心的基本模块，不能进行 "员工管理" 和 "角色权限" 的编辑操作</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
      }
    },
    methods: {
    }
  }
</script>
<style lang="scss">
  $base-color: #3f84f6;
  #mobile-staff-center {
    margin: 0 auto;
    .staff-role{
      margin: .2rem auto 0;
      padding: 0 .24rem;
      width: 7.1rem;
      height: 1.72rem;
      background-color: #fff;
      border-radius: .05rem;
      .staff-header {
        height: .5rem;
        line-height: .5rem;
        text-align: left;
        border-bottom: 1px solid #d9d9d9;
        span {
          font-size: .28rem;
          color: #333;
          b{
            display: inline-block;
            margin-right: .05rem;
            width: .05rem;
            height: .18rem;
            background-color: #3f84f6;
          }
        }
        span.active_02 b{
          background-color: #8aaefc;
        }
        span.active_03 b{
          background-color: #09d7cd;
        }
        span.active_04 b{
          background-color: #ff676a;
        }
        span.active_05 b{
          background-color: #fc9b68;
        }
      }
      .staff-content {
        overflow: hidden;
        padding-top: .25rem;
        .radio-label {
          float: left;
          margin: .18rem .1rem 0 0;
          min-width: .36rem;
          height: .36rem;
          background: url(/images/mobile/center/user/car-noChecked.png) no-repeat;
          background-size: contain;
          vertical-align: middle;
          input{
            display: none;
            width: .36rem;
            height: .36rem;
            border: solid 2px #999999;
          }
          &.active {
            background-image: url(/images/mobile/center/user/car-checked.png);
          }
        }
        .staff-des{
          float: left;
          width: 6rem;
          line-height: .42rem;
          font-size: .28rem;
          color: #666666;
        }
      }
    }
  }
</style>