|
@@ -1,28 +1,50 @@
|
|
|
<template>
|
|
|
- <div class="base-user-center">
|
|
|
- <div style="display: flex;">
|
|
|
- <div class="base-user-info">
|
|
|
- <p class="base-user-name">{{ userInfo.username }}</p>
|
|
|
- <!-- <p class="base-user-post">教务主任</p> -->
|
|
|
- <Dropdown @on-click="onRoleSelect">
|
|
|
- <a href="javascript:void(0)" class="base-user-post">
|
|
|
- {{ getRoleName(curRole) }}
|
|
|
- <Icon type="ios-arrow-down"></Icon>
|
|
|
- </a>
|
|
|
- <DropdownMenu slot="list">
|
|
|
- <DropdownItem v-if="curRole != 'teacher' && curRole != 'admin'" name="teacher">{{ $t('utils.teacher') }}</DropdownItem>
|
|
|
- <DropdownItem v-if="curRole != 'student'" name="student">{{ $t('utils.student') }}</DropdownItem>
|
|
|
- <!-- <DropdownItem name="student">學生</DropdownItem> -->
|
|
|
- </DropdownMenu>
|
|
|
- </Dropdown>
|
|
|
- </div>
|
|
|
- <Poptip class="dark-iview-poptip" @on-popper-show="doRefresh()">
|
|
|
- <!-- <img :src="user.picture" /> -->
|
|
|
+ <div class="base-user-center">
|
|
|
+ <div style="display: flex;">
|
|
|
+ <div class="base-user-info">
|
|
|
+ <!-- <p class="base-user-name" style="margin-top:6px">{{ userInfo.username }}</p> -->
|
|
|
+ <!-- <Dropdown @on-click="onRoleSelect">
|
|
|
+ <a href="javascript:void(0)" class="base-user-post">
|
|
|
+ {{ getRoleName(curRole) }}
|
|
|
+ <Icon type="ios-arrow-down"></Icon>
|
|
|
+ </a>
|
|
|
+ <DropdownMenu slot="list">
|
|
|
+ <DropdownItem v-if="curRole != 'teacher' && curRole != 'admin'" name="teacher">{{ $t('utils.teacher') }}</DropdownItem>
|
|
|
+ <DropdownItem v-if="curRole != 'student'" name="student">{{ $t('utils.student') }}</DropdownItem>
|
|
|
+ </DropdownMenu>
|
|
|
+ </Dropdown> -->
|
|
|
+ </div>
|
|
|
+ <Dropdown placement="bottom-end">
|
|
|
+ <PersonalPhoto style="cursor: pointer;" :name="userInfo.username" :picture="user.picture" :color="userInfo.nameColor" />
|
|
|
+ <DropdownMenu slot="list" class="user-center-wrap">
|
|
|
+ <DropdownItem class="user-info-wrap">
|
|
|
+ <p>{{userInfo.username}}</p>
|
|
|
+ <p class="user-id">{{`ID: ${user.id}`}}</p>
|
|
|
+ <Icon class="user-info-arrow" type="ios-arrow-forward" color="#1cc0f3" />
|
|
|
+ </DropdownItem>
|
|
|
+ <DropdownItem class="drop-item" style="margin-top:8px" @click.native="onRoleSelect('student')">
|
|
|
+ <Icon type="md-swap" class="drop-item-icon" />
|
|
|
+ 切换为学生
|
|
|
+ </DropdownItem>
|
|
|
+ <DropdownItem class="drop-item" @click.native="toSettings('1')">
|
|
|
+ <Icon custom="iconfont icon-school" class="drop-item-icon" />
|
|
|
+ 学校管理
|
|
|
+ </DropdownItem>
|
|
|
+ <DropdownItem class="drop-item" @click.native="toSettings('0')">
|
|
|
+ <Icon type="ios-settings" class="drop-item-icon" />
|
|
|
+ 系统设置
|
|
|
+ </DropdownItem>
|
|
|
+ <DropdownItem divided @click.native="onQuit">
|
|
|
+ <Icon type="md-power" class="drop-item-icon" />
|
|
|
+ {{$t('utils.logout')}}
|
|
|
+ </DropdownItem>
|
|
|
+ </DropdownMenu>
|
|
|
+ </Dropdown>
|
|
|
+ <!-- <Poptip class="dark-iview-poptip" @on-popper-show="doRefresh()">
|
|
|
<PersonalPhoto style="cursor: pointer;" :name="userInfo.username" :picture="user.picture" :color="userInfo.nameColor"/>
|
|
|
|
|
|
<div slot="content" class="user-center">
|
|
|
<div class="user-info">
|
|
|
- <!-- <img :src="user.picture" /> border: 2px solid #fff;-->
|
|
|
<PersonalPhoto :width="'70px'" :height="'70px'" :fontSize="'1.50rem'" :name="userInfo.username" :picture="user.picture" :color="userInfo.nameColor"/>
|
|
|
|
|
|
<span class="user-info-username">{{ userInfo.username }}</span>
|
|
@@ -72,359 +94,389 @@
|
|
|
</div>
|
|
|
<div class="btn-logout" @click="onQuit">{{ $t('utils.logout') }}</div>
|
|
|
</div>
|
|
|
- </Poptip>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </Poptip> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import BlobTool from '@/utils/blobTool.js';
|
|
|
- import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- curRole: '',
|
|
|
- userInfo: {
|
|
|
- username: '',
|
|
|
- account: '',
|
|
|
- role: '',
|
|
|
- courseNum: 0,
|
|
|
- activityNum: 0,
|
|
|
- classNum: 0,
|
|
|
- nameColor: '',
|
|
|
- },
|
|
|
- user: {},
|
|
|
- sizeInfo: {
|
|
|
- total: 0, //所有
|
|
|
- image: 0, //内容模块图片
|
|
|
- res: 0, //内容模块教材
|
|
|
- video: 0, //内容模块视频
|
|
|
- audio: 0, //内容模块音频
|
|
|
- doc: 0, //内容模块文档
|
|
|
- other: 0, //内容模块其他文件
|
|
|
- data: 0 //除了内容模块之外的文件
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- this.doRefresh()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- doRefresh(){
|
|
|
- this.user = JSON.parse(decodeURIComponent(localStorage.userInfo, "utf-8"));
|
|
|
- let user_profile = JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8"));
|
|
|
- if(this.user.roles.length){
|
|
|
- this.curRole = this.user.roles[0]
|
|
|
- }
|
|
|
- this.userInfo.username = this.user.name
|
|
|
- this.userInfo.nameColor = this.randomColor()
|
|
|
- this.userInfo.courseNum = user_profile.courses.length
|
|
|
- this.getSize()
|
|
|
- },
|
|
|
- //获取Blob空间信息
|
|
|
- getSize() {
|
|
|
- BlobTool.getSizeByServe(this.$store.state.userInfo.TEAMModelId).then(
|
|
|
- res => {
|
|
|
- this.sizeInfo = res
|
|
|
- },
|
|
|
- err => {
|
|
|
- this.$Message.error(this.$t('utils.caclErrorL'))
|
|
|
- }
|
|
|
- )
|
|
|
- },
|
|
|
- //计算空间占比
|
|
|
- getPercent(size) {
|
|
|
- if (this.sizeInfo.total > this.$GLOBAL.PRIVATE_SPACE) {
|
|
|
- return '0%'
|
|
|
- } else {
|
|
|
- let p = (size * 100 / this.$GLOBAL.PRIVATE_SPACE)
|
|
|
- p = p > 1 ? p.toFixed(2) : p > 0 ? 1 : 0
|
|
|
- return p + '%'
|
|
|
- }
|
|
|
+import BlobTool from '@/utils/blobTool.js';
|
|
|
+import PersonalPhoto from '@/components/public/personalPhoto/Index.vue'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ curRole: '',
|
|
|
+ userInfo: {
|
|
|
+ username: '',
|
|
|
+ account: '',
|
|
|
+ role: '',
|
|
|
+ courseNum: 0,
|
|
|
+ activityNum: 0,
|
|
|
+ classNum: 0,
|
|
|
+ nameColor: '',
|
|
|
},
|
|
|
- onRoleSelect(val){
|
|
|
- if(localStorage.getItem('identity') != val){
|
|
|
- this.curRole = val
|
|
|
- let path = val === 'student' ? '/studentWeb' : '/home'
|
|
|
- localStorage.setItem('identity', val)
|
|
|
- this.$router.push({ path: path })
|
|
|
- }
|
|
|
- },
|
|
|
- onQuit() {
|
|
|
- this.$emit('logout')
|
|
|
- },
|
|
|
- randomColor: function(){
|
|
|
- let r = Math.floor(Math.random()*255);
|
|
|
- let g = Math.floor(Math.random()*255);
|
|
|
- let b = Math.floor(Math.random()*255);
|
|
|
- return 'rgba('+ r +','+ g +','+ b +',0.8)';
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- computed: {
|
|
|
-
|
|
|
- getSizeVal() {
|
|
|
- return val => {
|
|
|
- return this.$tools.bytesToSize(val)
|
|
|
- }
|
|
|
- },
|
|
|
- getRoleName() {
|
|
|
- return val => {
|
|
|
- return val === 'student' ? this.$t('utils.student') : this.$t('utils.teacher')
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- components:{
|
|
|
- PersonalPhoto
|
|
|
- }
|
|
|
- }
|
|
|
+ user: {},
|
|
|
+ sizeInfo: {
|
|
|
+ total: 0, //所有
|
|
|
+ image: 0, //内容模块图片
|
|
|
+ res: 0, //内容模块教材
|
|
|
+ video: 0, //内容模块视频
|
|
|
+ audio: 0, //内容模块音频
|
|
|
+ doc: 0, //内容模块文档
|
|
|
+ other: 0, //内容模块其他文件
|
|
|
+ data: 0 //除了内容模块之外的文件
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.doRefresh()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 这里可以携带参数,直接跳转到对应的tab
|
|
|
+ toSettings(tab) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/home/settings',
|
|
|
+ query: { tab }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ doRefresh() {
|
|
|
+ this.user = JSON.parse(decodeURIComponent(localStorage.userInfo, "utf-8"));
|
|
|
+ let user_profile = JSON.parse(decodeURIComponent(localStorage.user_profile, "utf-8"));
|
|
|
+ if (this.user.roles.length) {
|
|
|
+ this.curRole = this.user.roles[0]
|
|
|
+ }
|
|
|
+ this.userInfo.username = this.user.name
|
|
|
+ this.userInfo.nameColor = this.randomColor()
|
|
|
+ this.userInfo.courseNum = user_profile.courses.length
|
|
|
+ this.getSize()
|
|
|
+ },
|
|
|
+ //获取Blob空间信息
|
|
|
+ getSize() {
|
|
|
+ BlobTool.getSizeByServe(this.$store.state.userInfo.TEAMModelId).then(
|
|
|
+ res => {
|
|
|
+ this.sizeInfo = res
|
|
|
+ },
|
|
|
+ err => {
|
|
|
+ this.$Message.error(this.$t('utils.caclErrorL'))
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ //计算空间占比
|
|
|
+ getPercent(size) {
|
|
|
+ if (this.sizeInfo.total > this.$GLOBAL.PRIVATE_SPACE) {
|
|
|
+ return '0%'
|
|
|
+ } else {
|
|
|
+ let p = (size * 100 / this.$GLOBAL.PRIVATE_SPACE)
|
|
|
+ p = p > 1 ? p.toFixed(2) : p > 0 ? 1 : 0
|
|
|
+ return p + '%'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onRoleSelect(val) {
|
|
|
+ if (localStorage.getItem('identity') != val) {
|
|
|
+ this.curRole = val
|
|
|
+ let path = val === 'student' ? '/studentWeb' : '/home'
|
|
|
+ localStorage.setItem('identity', val)
|
|
|
+ this.$router.push({ path: path })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onQuit() {
|
|
|
+ this.$emit('logout')
|
|
|
+ },
|
|
|
+ randomColor: function () {
|
|
|
+ let r = Math.floor(Math.random() * 255);
|
|
|
+ let g = Math.floor(Math.random() * 255);
|
|
|
+ let b = Math.floor(Math.random() * 255);
|
|
|
+ return 'rgba(' + r + ',' + g + ',' + b + ',0.8)';
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ computed: {
|
|
|
+
|
|
|
+ getSizeVal() {
|
|
|
+ return val => {
|
|
|
+ return this.$tools.bytesToSize(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getRoleName() {
|
|
|
+ return val => {
|
|
|
+ return val === 'student' ? this.$t('utils.student') : this.$t('utils.teacher')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ PersonalPhoto
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
- .user-storage-distribution {
|
|
|
- overflow:hidden;
|
|
|
- }
|
|
|
- .user-storage-text span {
|
|
|
- margin-right:20px;
|
|
|
- display:inline-block;
|
|
|
- }
|
|
|
- .storage-full {
|
|
|
- background-color: red;
|
|
|
- }
|
|
|
-
|
|
|
- .storage-data {
|
|
|
- background-color: #F8C006;
|
|
|
+.drop-item-icon {
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.drop-item {
|
|
|
+ padding: 10px 16px;
|
|
|
+}
|
|
|
+.user-info-arrow {
|
|
|
+ float: right;
|
|
|
+ margin-top: -25px;
|
|
|
+}
|
|
|
+.user-info-wrap {
|
|
|
+ /* background: #608f94; */
|
|
|
+ padding: 12px 16px;
|
|
|
+ box-shadow: 0px 2px 5px #eee;
|
|
|
+}
|
|
|
+.user-id {
|
|
|
+ color: rgb(174 176 178);
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+.user-center-wrap {
|
|
|
+ min-width: 200px;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.user-storage-distribution {
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.user-storage-text span {
|
|
|
+ margin-right: 20px;
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.storage-full {
|
|
|
+ background-color: red;
|
|
|
+}
|
|
|
+
|
|
|
+.storage-data {
|
|
|
+ background-color: #f8c006;
|
|
|
+}
|
|
|
+
|
|
|
+.storage-image {
|
|
|
+ background-color: #45c84a;
|
|
|
+}
|
|
|
+
|
|
|
+.storage-video {
|
|
|
+ background-color: #8e2bdd;
|
|
|
+}
|
|
|
+
|
|
|
+.storage-audio {
|
|
|
+ background-color: #e1027b;
|
|
|
+}
|
|
|
+
|
|
|
+.storage-doc {
|
|
|
+ background-color: #03c0c2;
|
|
|
+}
|
|
|
+
|
|
|
+.storage-res {
|
|
|
+ background-color: #1ffcc5;
|
|
|
+}
|
|
|
+
|
|
|
+.storage-other {
|
|
|
+ background-color: #e87b22;
|
|
|
+}
|
|
|
+
|
|
|
+.text-data {
|
|
|
+ color: #f8c006;
|
|
|
+}
|
|
|
+
|
|
|
+.text-image {
|
|
|
+ color: #45c84a;
|
|
|
+}
|
|
|
+
|
|
|
+.text-video {
|
|
|
+ color: #8e2bdd;
|
|
|
+}
|
|
|
+
|
|
|
+.text-audio {
|
|
|
+ color: #e1027b;
|
|
|
+}
|
|
|
+
|
|
|
+.text-doc {
|
|
|
+ color: #03c0c2;
|
|
|
+}
|
|
|
+
|
|
|
+.text-res {
|
|
|
+ color: #1ffcc5;
|
|
|
+}
|
|
|
+
|
|
|
+.text-other {
|
|
|
+ color: #e87b22;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="less">
|
|
|
+.base-user-center .ivu-select-dropdown {
|
|
|
+ padding: 0px 0px 5px 0px;
|
|
|
+ border-radius: 7px;
|
|
|
+}
|
|
|
+.base-user-center {
|
|
|
+ .base-user-info {
|
|
|
+ margin-right: 20px;
|
|
|
+ text-align: right;
|
|
|
+
|
|
|
+ .base-user-name {
|
|
|
+ font-weight: bold;
|
|
|
+ color: #b2b5b4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .base-user-post {
|
|
|
+ color: #686b6b;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .storage-image {
|
|
|
- background-color: #45C84A;
|
|
|
+ img {
|
|
|
+ width: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 2px solid #dddddd;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
|
|
|
- .storage-video {
|
|
|
- background-color: #8E2BDD;
|
|
|
+ .ivu-dropdown-item {
|
|
|
+ text-align: left;
|
|
|
}
|
|
|
|
|
|
- .storage-audio {
|
|
|
- background-color: #E1027B;
|
|
|
+ .ivu-poptip-popper {
|
|
|
+ width: 460px !important;
|
|
|
}
|
|
|
|
|
|
- .storage-doc {
|
|
|
- background-color: #03C0C2;
|
|
|
+ .ivu-poptip-popper {
|
|
|
+ left: -400px !important;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
|
|
|
- .storage-res {
|
|
|
- background-color: #1FFCC5;
|
|
|
+ .ivu-poptip-title {
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
- .storage-other {
|
|
|
- background-color: #E87B22;
|
|
|
+ .ivu-poptip-arrow {
|
|
|
+ left: 90% !important;
|
|
|
}
|
|
|
|
|
|
- .text-data {
|
|
|
- color: #F8C006;
|
|
|
- }
|
|
|
+ .user-center {
|
|
|
+ height: 620px;
|
|
|
+ padding-top: 30px;
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ .fl-col-center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 70px;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-username {
|
|
|
+ margin: 10px 0;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ letter-spacing: 0.6px;
|
|
|
+ color: #1cc0f3;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-account {
|
|
|
+ color: #a5a5a5;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-btn {
|
|
|
+ background: #1cc0f3;
|
|
|
+ padding: 5px 60px;
|
|
|
+ color: #fff;
|
|
|
+ margin-top: 20px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-nums {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding-top: 60px;
|
|
|
+
|
|
|
+ &-item {
|
|
|
+ .fl-col-center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 34px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .text-image {
|
|
|
- color: #45C84A;
|
|
|
- }
|
|
|
+ &:last-child {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1cc0f3;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-storage {
|
|
|
+ padding-top: 50px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ color: #a5a5a5;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-distribution {
|
|
|
+ margin: 15px 0;
|
|
|
+ height: 10px;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: #888888;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 50px;
|
|
|
+ height: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .text-video {
|
|
|
- color: #8E2BDD;
|
|
|
- }
|
|
|
+ &-green {
|
|
|
+ border-radius: 5px 0 0 5px;
|
|
|
+ background-color: #00d523;
|
|
|
+ }
|
|
|
|
|
|
- .text-audio {
|
|
|
- color: #E1027B;
|
|
|
- }
|
|
|
+ &-orange {
|
|
|
+ background-color: #e87b22;
|
|
|
+ }
|
|
|
|
|
|
- .text-doc {
|
|
|
- color: #03C0C2;
|
|
|
- }
|
|
|
+ &-red {
|
|
|
+ background-color: #ff40bc;
|
|
|
+ }
|
|
|
|
|
|
- .text-res {
|
|
|
- color: #1FFCC5;
|
|
|
+ &-blue {
|
|
|
+ background-color: #1fccd5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-text {
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: bold;
|
|
|
+ white-space: normal;
|
|
|
+ /*display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-around;*/
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-logout {
|
|
|
+ .fl-col-center;
|
|
|
+ background: #1cc0f3;
|
|
|
+ padding: 6px 0;
|
|
|
+ color: #fff;
|
|
|
+ width: 60%;
|
|
|
+ margin-left: 20%;
|
|
|
+ margin-top: 40px;
|
|
|
+ border-radius: 5px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .text-other {
|
|
|
- color: #E87B22;
|
|
|
+ .fl-col-center {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
-</style>
|
|
|
-<style lang="less">
|
|
|
- .base-user-center {
|
|
|
- .base-user-info {
|
|
|
- margin-right: 20px;
|
|
|
- text-align: right;
|
|
|
-
|
|
|
- .base-user-name {
|
|
|
- font-weight: bold;
|
|
|
- color: #b2b5b4;
|
|
|
- }
|
|
|
-
|
|
|
- .base-user-post {
|
|
|
- color: #686b6b;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- img {
|
|
|
- width: 40px;
|
|
|
- border-radius: 50%;
|
|
|
- border: 2px solid #dddddd;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .ivu-dropdown-item{
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
-
|
|
|
- .ivu-poptip-popper {
|
|
|
- width: 460px !important;
|
|
|
- }
|
|
|
-
|
|
|
- .ivu-poptip-popper {
|
|
|
- left: -400px !important;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .ivu-poptip-title {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .ivu-poptip-arrow {
|
|
|
- left: 90% !important;
|
|
|
- }
|
|
|
-
|
|
|
- .user-center {
|
|
|
- height: 620px;
|
|
|
- padding-top: 30px;
|
|
|
-
|
|
|
- .user-info {
|
|
|
- .fl-col-center;
|
|
|
-
|
|
|
- img {
|
|
|
- width: 70px;
|
|
|
- border: 2px solid #fff;
|
|
|
- }
|
|
|
-
|
|
|
- &-username {
|
|
|
- margin: 10px 0;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- letter-spacing: .6px;
|
|
|
- color: #1CC0F3;
|
|
|
- }
|
|
|
-
|
|
|
- &-account {
|
|
|
- color: #a5a5a5;
|
|
|
- }
|
|
|
-
|
|
|
- &-btn {
|
|
|
- background: #1CC0F3;
|
|
|
- padding: 5px 60px;
|
|
|
- color: #fff;
|
|
|
- margin-top: 20px;
|
|
|
- border-radius: 5px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .user-nums {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- padding-top: 60px;
|
|
|
-
|
|
|
- &-item {
|
|
|
- .fl-col-center;
|
|
|
-
|
|
|
- span {
|
|
|
-
|
|
|
- &:first-child {
|
|
|
- font-size: 34px;
|
|
|
- font-weight: bold;
|
|
|
- color: #fff
|
|
|
- }
|
|
|
-
|
|
|
- &:last-child {
|
|
|
- font-size: 14px;
|
|
|
- color: #1CC0F3
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .user-storage {
|
|
|
- padding-top: 50px;
|
|
|
-
|
|
|
- p {
|
|
|
- text-align: center;
|
|
|
- color: #a5a5a5;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- &-distribution {
|
|
|
- margin: 15px 0;
|
|
|
- height: 10px;
|
|
|
- width: 100%;
|
|
|
- border-radius: 50px;
|
|
|
- background-color: #888888;
|
|
|
- display: flex;
|
|
|
-
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 50px;
|
|
|
- height: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- &-green {
|
|
|
- border-radius: 5px 0 0 5px;
|
|
|
- background-color: #00D523;
|
|
|
- }
|
|
|
-
|
|
|
- &-orange {
|
|
|
- background-color: #e87b22;
|
|
|
- }
|
|
|
-
|
|
|
- &-red {
|
|
|
- background-color: #ff40bc;
|
|
|
- }
|
|
|
-
|
|
|
- &-blue {
|
|
|
- background-color: #1fccd5;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &-text {
|
|
|
- margin-top: 10px;
|
|
|
- font-size: 12px;
|
|
|
- font-weight: bold;
|
|
|
- white-space:normal;
|
|
|
- /*display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- justify-content: space-around;*/
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .btn-logout {
|
|
|
- .fl-col-center;
|
|
|
- background: #1CC0F3;
|
|
|
- padding: 6px 0;
|
|
|
- color: #fff;
|
|
|
- width: 60%;
|
|
|
- margin-left: 20%;
|
|
|
- margin-top: 40px;
|
|
|
- border-radius: 5px;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .fl-col-center {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
+}
|
|
|
</style>
|