no message

webConfig/src/components/header.vue

@@ -23,6 +23,7 @@
                         </div>
                         <div class="nav_ul">
                             <div class="nav_title"><span class="span">Set Up</span></div>
+                            <div class="nav_li" @click="linkToFun('/userRights')" :class="{'select':routerStr == '/userRights'}"><i class="iconfont icon-daohangjiantou"></i><span class="span">User rights</span></div>
                             <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">User Management</span></div>
                             <div class="nav_li"><i class="iconfont icon-daohangjiantou"></i><span class="span">Operation Log</span></div>
                         </div>
@@ -31,6 +32,7 @@
                         <p class="p1">Complex background</p>
                         <p class="p2">simple operation</p>
                         <div class="btn"><span class="span">About more</span></div>
+                        <img src="../img/nav_bg.png" class="img">
                     </div>
                 </div>
             </div>
@@ -218,6 +220,7 @@
                         border-radius:0.33rem;
                         border:0.08rem solid rgba(240,240,240,1);
                         padding-left: 2.5rem;
+                        position: relative;
                         .p1{
                             margin-top: 2.6rem;
                             font-size:1.33rem;
@@ -244,6 +247,11 @@
                                 color:rgba(255,255,255,1);
                             }
                         }
+                        .img{
+                            position: absolute;
+                            height: 8rem;
+                            right: 1.8rem;bottom: 1.2rem;
+                        }
                     }
                 }
             }

webConfig/src/components/sideBar_idcol.vue

@@ -164,7 +164,7 @@
 
 <style type="text/css" lang="less">
     .side_bar_box{
-        z-index: 10000;
+        z-index: 9999;
         display: flex;
         &.open{
             left:1.3rem;

webConfig/src/router.js

@@ -8,6 +8,7 @@ Vue.use(VueRouter)
 const dashboard = () => import('./views/dashboard.vue');
 const projectManagement = () => import('./views/projectManagement.vue');
 const GIS = () => import('./views/GISMap.vue');
+const userRights = () => import('./views/userRights.vue');
 
 const routes = [
     {
@@ -29,6 +30,11 @@ const routes = [
         name: 'GIS',
         component: GIS
     },
+    {
+        path: '/userRights',
+        name: 'userRights',
+        component: userRights
+    },
 ]
 
 const router = new VueRouter({

webConfig/src/views/dashboard.vue

@@ -58,7 +58,7 @@
                     </div>
                 </div>
                 <div class="echarts_map_box">
-                    <div class="echarts_title"><i class="iconfont icon-ditu"></i><span>Bangladesh Map</span></div>
+                    <div class="echarts_title"><img src="../img/iconfont/map.png"><span>Bangladesh Map</span></div>
                     <div class="echarts_map"></div>
                 </div>
             </div>
@@ -459,13 +459,14 @@
             deviceBarInit(){
                 if(document.getElementsByClassName('device_pie')[0]){
                     let seriesData = [
-                        {name: '1',value: Math.round(Math.random() * 100)},
-                        {name: '2',value: Math.round(Math.random() * 100)},
-                        {name: '3',value: Math.round(Math.random() * 100)},
-                        {name: '4',value: Math.round(Math.random() * 100)},
-                        {name: '5',value: Math.round(Math.random() * 100)},
-                        {name: '6',value: Math.round(Math.random() * 100)},
-                        {name: '7',value: Math.round(Math.random() * 100)},
+                        {name: '1',value: Math.round(Math.random() * 100),itemStyle:{color:'#FF6474'}},
+                        {name: '2',value: Math.round(Math.random() * 100),itemStyle:{color:'#FC8440'}},
+                        {name: '3',value: Math.round(Math.random() * 100),itemStyle:{color:'#FFA8B1'}},
+                        {name: '4',value: Math.round(Math.random() * 100),itemStyle:{color:'#FFCFD4'}},
+                        {name: '5',value: Math.round(Math.random() * 100),itemStyle:{color:'#FFD86F'}},
+                        {name: '6',value: Math.round(Math.random() * 100),itemStyle:{color:'#FFC936'}},
+                        {name: '7',value: Math.round(Math.random() * 100),itemStyle:{color:'#ADC6FF'}},
+                        {name: '8',value: Math.round(Math.random() * 100),itemStyle:{color:'#1D7DFD'}},
                     ];
                     this.myChart2 = echarts.init(document.getElementsByClassName('device_pie')[0]);
                     this.myChart2.setOption({
@@ -697,6 +698,8 @@
                     margin-top: 0.8rem;
                     border:0.08rem solid rgba(240,240,240,1);
                     .echarts_title{
+                        display: flex;
+                        align-items: center;
                         height:3.5rem;line-height:3.5rem;
                         background:rgba(255,255,255,0.8);
 
@@ -704,6 +707,10 @@
                         font-family:PingFangSC-Semibold,PingFang SC;
                         font-weight:600;
                         color:rgba(51,51,51,1);
+                        img{
+                            margin: 0 0.5rem 0 0.8rem; 
+                            height: 1.8rem;
+                        }
                     }
                     .echarts_map{
                         width: 100%;

webConfig/src/views/projectManagement.vue

@@ -1,10 +1,10 @@
 <template>
-	<div class="projectManagement_template">
-		<div class="nav_top">
-			<div class="left_title">
-				<img src="../img/iconfont/notice.png"><span class="span">Please pay attention to the updated content at any time.</span>
-			</div>
-			<div class="right_operation">
+    <div class="projectManagement_template">
+        <div class="nav_top">
+            <div class="left_title">
+                <img src="../img/iconfont/notice.png"><span class="span">Please pay attention to the updated content at any time.</span>
+            </div>
+            <div class="right_operation">
                 <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_projectManagement_division')">
                     <span class="el-dropdown-link">
                         <span>{{divisionName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
@@ -17,8 +17,8 @@
                     <i slot="suffix" class="el-input__icon el-icon-search" @click="getLightList()"></i>
                 </el-input>
                 <div class="btn" @click="addLightControlFun()"><img src="../img/iconfont/add.png"><span>New project</span></div>
-			</div>
-		</div>
+            </div>
+        </div>
         <div class="projectManagement_main">
             <side-bar-idcol class="side_bar_left" :sideBarList="projectNav" :projectId="projectId" :roadId="roadId" :sideBarListIsOpen="sideBarListIsOpen" :projectSelectFun="projectSelectFun" :roadSelectFun="roadSelectFun" :sideBarIsOn="sideBarIsOn" :sideBarType="sideBarType" :sideBarCompanyList="sideBarCompanyList" :projectAll="projectAll"></side-bar-idcol>
             <div class="main_top">
@@ -183,13 +183,19 @@
                         :min-width="item.minWidth">
                         <template slot-scope="scope">
                             <div v-if="item.type != 1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</div>
-                            <div v-if="item.prop == 'city'" class="city">
-                                <i></i><span>{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
+
+                            <div v-if="item.prop == 'State'" class="State">
+                                <img src="../img/projectManagement/Online.png" v-if="scope.row[item.prop] == '1'">
+                                <img src="../img/projectManagement/Offline.png" v-if="scope.row[item.prop] == '0'" >
                             </div>
-                            <div v-if="item.prop == 'total'" class="total">
-                                <span class="span1">{{scope.row[item.prop]}}{{item.unit?item.unit:''}}</span>
-                                <i></i>
-                                <span class="span2">{{scope.row['bl']}}{{item.unit?item.unit:''}}</span>
+                            <div v-if="item.prop == 'Brightness'" class="Brightness">
+                                <!-- <span :style="{'position':'absolute','color':scope.row['Brightness'] >55?'rgba(255,255,255,1)':'rgba(188, 69, 2, 1)','top':'50%','left':'50%','margin-top':'-10px','margin-left':'-10px'}"></span> -->
+                                <div class="progress_outer" @click="brightnessAdjustment($event,scope.row)">
+                                    <div class="progress_inner" :style="{'width':scope.row['Brightness']+'%'}">
+                                    </div>
+                                    <div class="text" :class="{'light50':scope.row['lighteness'] >55,'light0':scope.row['lighteness'] ==0}">{{scope.row['Brightness'] != 0 ? scope.row['Brightness']:'off'}}%</div>
+                                </div>
+                                <!-- <div style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;" ></div> -->
                             </div>
 
                         </template>
@@ -245,6 +251,23 @@
                 </div>
             </div>
         </div>
+        <div class="lamp_light_slider" v-if="lampLightSliderShow">
+            <div class="bg" @click="lampLightSliderClose()"></div>
+            <div class="box" :style="{'top':lampLightSliderPageY+'px','left':lampLightSliderPageX+'px'}">
+                <div class="div1">
+                    <span></span><i></i>
+                </div>
+                <div class="div2">
+                    <div>
+                        <span>{{version==0?'亮度':'brightness'}}: {{lampLightSlider}}%</span>
+                        <span @click="lampLightSliderSave()" v-loading="loading.lampLightSlider">{{version==0?'保存':'save'}}</span>
+                    </div>
+                    <div>
+                        <el-slider v-model="lampLightSlider"></el-slider>
+                    </div>
+                </div>
+          </div>
+        </div>
         <!-- 表格详情弹框 -->
         <el-dialog
           title="Lamp Details"
@@ -859,12 +882,12 @@
     import { mapGetters } from 'vuex'
     import sideBarIdcol from '../components/sideBar_idcol.vue' 
 
-	export default {
-		name:'projectManagement',
-		data(){
-			return{
+    export default {
+        name:'projectManagement',
+        data(){
+            return{
                 keywords:'',
-				division:'',
+                division:'',
                 divisionNav:[{id:'0',name:'All'}],
                 rightDate:'',
                 rightDateNav:[{id:'0',name:'Today'}],
@@ -874,6 +897,11 @@
                 deviceList:[],
                 deviceArr:[],
 
+                lampLightSlider:0,
+                lampLightSliderShow:false,
+                lampLightSliderPageX:0,
+                lampLightSliderPageY:0,
+
                 roadId:0,
                 projectId:0,
                 companyId:'',
@@ -1029,15 +1057,15 @@
                     deviceList:false,
                     faultInformationList:false,
                 }
-			}
-		},
+            }
+        },
         components:{sideBarIdcol},
         computed:{
             ...mapGetters({
-				token:'token',
-				client_key:'client_key',
-				username:'username',
-				version:'version',
+                token:'token',
+                client_key:'client_key',
+                username:'username',
+                version:'version',
             }),
             historicalNavListFor(){
                 let list = [];
@@ -1076,7 +1104,7 @@
                 return name;
             },
         },
-		mounted(){
+        mounted(){
             this.rightDate = '0';
             this.division = '0';
 
@@ -1098,9 +1126,9 @@
                 {prop:'Fault',label:'Fault',minWidth:60},
             ];
             this.deviceList = [
-                {'ID':4095,'State':5,'Section':'Road1523','Wireless':'192.25.0.1','Power':5,'Chargingstage':'No charge','Voltage':5,'ElectricQuantity':5,'Overdischarge':5,'SolarPower':5,'Fault':'normal',id:1},
-                {'ID':4095,'State':5,'Section':'Road1523','Wireless':'192.25.0.1','Power':5,'Chargingstage':'No charge','Voltage':5,'ElectricQuantity':5,'Overdischarge':5,'SolarPower':5,'Fault':'normal',id:2},
-                {'ID':4095,'State':5,'Section':'Road1523','Wireless':'192.25.0.1','Power':5,'Chargingstage':'No charge','Voltage':5,'ElectricQuantity':5,'Overdischarge':5,'SolarPower':5,'Fault':'normal',id:3},
+                {'ID':4095,'State':1,'Section':'Road1523','Brightness':0,'Wireless':'192.25.0.1','Power':5,'Chargingstage':'No charge','Voltage':5,'ElectricQuantity':5,'Overdischarge':5,'SolarPower':5,'Fault':'normal',id:1},
+                {'ID':4095,'State':1,'Section':'Road1523','Brightness':90,'Wireless':'192.25.0.1','Power':5,'Chargingstage':'No charge','Voltage':5,'ElectricQuantity':5,'Overdischarge':5,'SolarPower':5,'Fault':'normal',id:2},
+                {'ID':4095,'State':0,'Section':'Road1523','Brightness':10,'Wireless':'192.25.0.1','Power':5,'Chargingstage':'No charge','Voltage':5,'ElectricQuantity':5,'Overdischarge':5,'SolarPower':5,'Fault':'normal',id:3},
             ];
             let i = 1;
             for(let d of this.deviceList){
@@ -1108,8 +1136,8 @@
                 i++;
             }
 
-		},
-		methods:{
+        },
+        methods:{
             commandHide(val){
                 this.$nextTick(function(){
                     if($('.'+val)&&$('.'+val+' >.select').offset()){
@@ -1303,6 +1331,22 @@
             },
             getLightList(){
 
+            },
+            brightnessAdjustment(e,data){
+                console.log(e,'--------',data)
+                this.lampLightSliderShow = true;
+                let clientWidth = 0,clientHeight = 0,offsetX = 0,offsetY = 0,pageX = 0,pageY = 0;
+                clientWidth = e.target.clientWidth;
+                clientHeight = e.target.clientHeight;
+                offsetX = e.offsetX;
+                offsetY = e.offsetY;
+                pageX = e.pageX;
+                pageY = e.pageY;
+                console.log(clientWidth,offsetX,pageX,pageY);
+                this.lampLightSliderPageX = pageX - offsetX + clientWidth + 15;
+                this.lampLightSliderPageY = pageY + $('.main_cont')[0].scrollTop - 115 - offsetY + clientHeight;
+                this.lampLightSlider = parseInt(data.lighteness);
+                this.lampId = data.id;
             },
             handleCurrentChange(val){
                 console.log(`current page: ${val}`);
@@ -1938,11 +1982,11 @@
         watch:{
 
         }
-	}
+    }
 </script>
 
 <style type="text/css" lang="less">
-	.projectManagement_template{
+    .projectManagement_template{
         width: 100%;
         height: 100%;
         // height: 105rem;
@@ -1951,29 +1995,29 @@
         margin: 0 auto;
         overflow: hidden;
         position: relative;
-		.nav_top{
-			display: flex;
-			justify-content: space-between;
-			width:100%;
-			height:3.3rem;line-height: 3.3rem;
-			background:rgba(255,255,255,1);
-			border:0.1rem solid rgba(240,240,240,1);
-			.left_title{
-				display: flex;
-				align-items: center;
-				img{
-					display: inline-block;
-					// width: 1.2rem;
+        .nav_top{
+            display: flex;
+            justify-content: space-between;
+            width:100%;
+            height:3.3rem;line-height: 3.3rem;
+            background:rgba(255,255,255,1);
+            border:0.1rem solid rgba(240,240,240,1);
+            .left_title{
+                display: flex;
+                align-items: center;
+                img{
+                    display: inline-block;
+                    // width: 1.2rem;
                     height: 1rem;
-					margin: 0 0.6rem;
-				}
-				.span{
-					font-size:1rem;
-					font-family:HiraginoSansGB-W3,HiraginoSansGB;
-					font-weight:normal;
-					color:rgba(101,112,133,1);
-				}
-			}
+                    margin: 0 0.6rem;
+                }
+                .span{
+                    font-size:1rem;
+                    font-family:HiraginoSansGB-W3,HiraginoSansGB;
+                    font-weight:normal;
+                    color:rgba(101,112,133,1);
+                }
+            }
             .right_operation{
                 display: flex;
                 align-items: center;
@@ -2041,7 +2085,7 @@
                     }
                 }
             }
-		}
+        }
         .projectManagement_main{
             background:rgba(246,248,250,1);
             padding: 0.8rem 1.5rem 1.5rem;
@@ -2059,7 +2103,10 @@
                     width:82.5rem;
                     height:11.6rem;
                     padding: 0rem 0 0 19rem;
-                    background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
+                    // background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
+                    background-image: url(../img/project_box1_bg.png);
+                    background-position: center;
+                    background-size: 100% 100%;
                     border-radius:0.3rem;
                     display: flex;
                     .main_top_left_left{
@@ -2403,6 +2450,44 @@
                             color: rgba(163, 175, 187, 1);
                         }
                     }
+                    .State{
+                        display: flex;align-items: center;justify-content: center;
+                        img{
+                            width: 1.3rem;
+                        }
+                    }
+                    .Brightness{
+                        padding: 0 1rem;
+                        .progress_outer{
+                            height:1.5rem;
+                            background:rgba(252,132,64,0.1);
+                            border-radius:0.75rem;
+                            position: relative;
+                            cursor: pointer;
+                            .progress_inner{
+                                height:1.5rem;;line-height:1.5rem;
+                                background:linear-gradient(134deg,rgba(252,169,64,1) 0%,rgba(252,132,64,1) 100%);
+                                border-radius:0.75rem;
+                            }
+                            .text{
+                                position: absolute;
+                                top: 0;left:0;
+                                width: 100%;height: 1.5rem;line-height: 1.5rem;
+                                text-align: center;
+
+                                font-size:1rem;
+                                font-family:PingFang-SC-Medium,PingFang-SC;
+                                font-weight:500;
+                                color:rgba(255,255,255,1);
+                                &.litht50{
+                                    color: #BC4502;
+                                }
+                                &.litht0{
+                                    color: #657085;
+                                }
+                            }
+                        }
+                    }
                 }
                 .pagination_box{
                     height: 2.3rem;line-height: 2.3rem;
@@ -2950,16 +3035,19 @@
                                         display: flex;
                                         height: 40px;
                                         align-items: center;
+                                        flex: 1;
+                                        justify-content: flex-end;
                                     }
                                     .span2{
                                         font-size:19px;
                                         font-family:PingFang-SC-Medium;
                                         font-weight:500;
                                         color:rgba(51,51,51,1);
-                                        margin-right: 15px;
+                                        margin-right: 5px;
 
                                         display: inline-block;
-                                        max-width: 38px;
+                                        // max-width: 38px;
+                                        width: calc(100% - 40px);
                                         white-space: nowrap;
                                         overflow: hidden;
                                         text-overflow: ellipsis;
@@ -2971,6 +3059,7 @@
                                         }
                                     }
                                     .span3{
+                                        margin-right: 10px;
                                         font-size:14px;
                                         font-family:PingFang-SC-Medium;
                                         font-weight:500;
@@ -3031,5 +3120,5 @@
                 }
             }
         }
-	}
+    }
 </style>

webConfig/src/views/userRights.vue

@@ -0,0 +1,260 @@
+<template>
+    <div class="userRights_template">
+        <div class="nav_top">
+            <div class="left_title">
+                <img src="../img/iconfont/notice.png"><span class="span">Please pay attention to the updated content at any time.</span>
+            </div>
+            <div class="right_operation">
+                <el-dropdown @command="commandDropdown" trigger="click" @visible-change="commandHide('dropdown_projectManagement_division')">
+                    <span class="el-dropdown-link">
+                        <span>{{divisionName}}</span><i class="el-icon-caret-bottom el-icon--right"></i>
+                    </span>
+                    <el-dropdown-menu slot="dropdown" class="scrollbar_style dropdown_projectManagement_division">
+                        <el-dropdown-item v-for="item in divisionNav" :class="{'select':item.id==division}" :command="{'key':'division','id':item.id}" :key="item.id">{{item.name}}</el-dropdown-item>
+                    </el-dropdown-menu>
+                </el-dropdown>
+                <el-input placeholder="search..." v-model="keywords" @keyup.native="getLightListKeyUp($event)" class="input-with-select">
+                    <i slot="suffix" class="el-input__icon el-icon-search" @click="getLightList()"></i>
+                </el-input>
+                <div class="btn" @click="addAccountFun()"><img src="../img/iconfont/add.png"><span>New account</span></div>
+            </div>
+        </div>
+        <div class="userRights_main">
+            <div class="userRights_left">
+                <el-upload
+                  class="avatar-uploader"
+                  action="https://jsonplaceholder.typicode.com/posts/"
+                  :show-file-list="false"
+                  :on-success="handleAvatarSuccess"
+                  :before-upload="beforeAvatarUpload">
+                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                </el-upload>
+                <p class="p1">Eunice Gomez</p>
+                <div class="from">
+                    <div class="item_form">
+                        <div class="key">Name</div>
+                        <div class="val">Eunice Gomez</div>
+                    </div>
+                </div>
+            </div>
+            <div class="userRights_right">
+                <div class="userRights_right_top"></div>
+                <div class="table_box"></div>
+            </div>
+        </div>
+    </div>
+</template>
+<script type="text/javascript">
+    import { mapGetters } from 'vuex'
+
+    export default{
+        name:'userRights',
+        data(){
+            return{
+                keywords:'',
+                division:'',
+                divisionNav:[{id:'0',name:'All'}],
+                rightDate:'',
+                rightDateNav:[{id:'0',name:'Today'}],
+                myChart1:'',
+
+                imageUrl: '',
+            }
+        },
+        // components:{sideBarIdcol},
+        computed:{
+            ...mapGetters({
+                token:'token',
+                client_key:'client_key',
+                username:'username',
+                version:'version',
+            }),
+            divisionName(){
+                let name;
+                for(let d of this.divisionNav){
+                    if(d.id == this.division){
+                        name = d.name;
+                    }
+                }
+                return name;
+            },
+        },
+        mounted(){
+            this.division = 0;
+        },
+        methods:{
+            addAccountFun(){
+            },
+            commandDropdown(obj){
+                this.$set(this,obj.key,obj.id)
+            },
+            handleAvatarSuccess(res, file) {
+                this.imageUrl = URL.createObjectURL(file.raw);
+            },
+            beforeAvatarUpload(file) {
+                const isJPG = file.type === 'image/jpeg';
+                const isLt2M = file.size / 1024 / 1024 < 2;
+
+                if (!isJPG) {
+                  this.$message.error('上传头像图片只能是 JPG 格式!');
+                }
+                if (!isLt2M) {
+                  this.$message.error('上传头像图片大小不能超过 2MB!');
+                }
+                return isJPG && isLt2M;
+            },
+            /*列表*/
+            getLightListKeyUp(e){
+                if(e.key == 'Enter'){
+                  this.getLightList();
+                }
+            },
+            getLightList(){
+
+            },
+        }
+    }
+</script>
+<style type="text/css" lang="less">
+    .userRights_template{
+        
+        width: 100%;
+        // height: 100%;
+        // height: 105rem;
+        min-height: 50rem;
+        // min-width: 120rem;
+        margin: 0 auto;
+        overflow: hidden;
+        position: relative;
+        .nav_top{
+            display: flex;
+            justify-content: space-between;
+            width:100%;
+            height:3.3rem;line-height: 3.3rem;
+            background:rgba(255,255,255,1);
+            border:0.1rem solid rgba(240,240,240,1);
+            .left_title{
+                display: flex;
+                align-items: center;
+                img{
+                    display: inline-block;
+                    // width: 1.2rem;
+                    height: 1rem;
+                    margin: 0 0.6rem;
+                }
+                .span{
+                    font-size:1rem;
+                    font-family:HiraginoSansGB-W3,HiraginoSansGB;
+                    font-weight:normal;
+                    color:rgba(101,112,133,1);
+                }
+            }
+            .right_operation{
+                display: flex;
+                align-items: center;
+                padding-right: 1.6rem;
+                .el-dropdown{
+                    width: 10rem;
+                    height: 2rem;line-height: 2rem;
+                    background:rgba(246,248,250,1);
+                    border-radius: 0.2rem;
+                    margin-right: 0.8rem;
+                    .el-dropdown-link{
+                        cursor: pointer;
+                        height: 100%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                        padding: 0 0.8rem;
+                        font-size:1rem;
+                        font-family:PingFang-SC-Medium,PingFang-SC;
+                        font-weight:500;
+                        color:rgba(101,112,133,1);
+                    }
+                }
+                .el-input{
+                    width: 16.5rem;
+                    height: 2rem;line-height: 2rem;
+                    .el-input__inner{
+                        height: 2rem;line-height: 2rem;
+                        background:rgba(246,248,250,1);
+                        border: none;
+                    }
+                    .el-input__icon{
+                        width: 1.8rem;
+                        height: 2rem;line-height: 2rem;
+                        border-top-right-radius: 0.2rem;
+                        border-bottom-right-radius: 0.2rem;
+                        background:#FC8440;
+                        color: #fff;
+                        font-size: 1rem;
+                        cursor: pointer;
+
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                    }
+                }
+                .btn{
+                    margin-left: 0.6rem;
+                    display: flex;
+                    align-items: center;
+                    padding: 0.5rem 1rem;
+                    height:2rem;line-height: 2rem;
+                    background:rgba(255,255,255,1);
+                    border-radius:0.2rem 0.1rem 0.1rem 0.2rem;
+                    border:0.1rem solid rgba(240,240,240,1);
+
+                    cursor: pointer;
+                    font-size:1rem;
+                    font-family:PingFang-SC-Medium,PingFang-SC;
+                    font-weight:500;
+                    color:rgba(51,51,51,1);
+                    img{
+                        height: 1.2rem;
+                        margin-right: 0.5rem;
+                    }
+                }
+            }
+        }
+        .userRights_main{
+            display: flex;
+            .userRights_left{
+                width: 30rem;
+                height: 60rem;
+                border-right: 0.08rem solid rgba(240,240,240,1);
+                .avatar-uploader{
+                    margin: 3.4rem auto 0;
+                    width: 8.3rem;height: 8.3rem;
+                    text-align: center;
+                    overflow: hidden;
+                    border:0.17rem solid rgba(233,233,233,1);
+                    border-radius: 50%;
+                    .avatar-uploader-icon{
+                        width: 8.3rem;height: 8.3rem;line-height: 8.3rem;
+                    }
+                    .avatar{
+                        width: 8.3rem;height: 8.3rem;line-height: 8.3rem;
+                    }
+                }
+            }
+            .userRights_right{
+                margin-left: 0.8rem;
+                flex: 1;
+                .userRights_right_top{
+                    margin-top: 0.8rem;
+                    height:5.8rem;
+                    background:rgba(255,255,255,1);
+                    border:0.08rem solid rgba(240,240,240,1);
+                }
+                .table_box{
+                    margin-top: 0.8rem;
+                    height:50rem;
+                    background:rgba(255,255,255,1);
+                    border:0.08rem solid rgba(240,240,240,1);
+                }
+            }
+        }
+    }
+</style>