Merge branch 'develop3.0' of http://106.12.23.251:10080/TEAMMODEL/TEAMModelOS into develop3.0

TEAMModelOS/ClientApp/src/common/BaseUserPoptip.vue

@@ -1,20 +1,86 @@
 <template>
 	<div class="base-user-center">
-		<Poptip title="新通知" class="dark-iview-poptip">
+		<Poptip class="dark-iview-poptip">
 			<img src="../assets/icon/icon_header.png"/>
 			<div slot="content" class="user-center">
 				<div class="user-info">
 					<img src="../assets/icon/icon_header.png" />
-					<span class="user-info-username">OnePsycho</span>
-					<span class="user-info-account">15895642124</span>
+					<span class="user-info-username">{{ userInfo.username }}</span>
+					<span class="user-info-account">{{ userInfo.account }}</span>
 					<span class="user-info-btn">账号管理</span>
 				</div>
+				<div class="user-nums">
+					<div class="user-nums-item">
+						<span>{{ userInfo.courseNum }}</span>
+						<span>任教课程数</span>
+					</div>
+					<div class="user-nums-item">
+						<span>{{ userInfo.activityNum }}</span>
+						<span>发布活动数</span>
+					</div>
+					<div class="user-nums-item">
+						<span>{{ userInfo.classNum }}</span>
+						<span>任教班级数</span>
+					</div>
+				</div>
+				<div class="user-storage">
+					<p>个人空间状态：（ {{ getSizeVal(userInfo.storage.total) }} / {{ getSizeVal(userInfo.storage.max) }} ）</p>
+					<div class="user-storage-distribution">
+						<span class="user-storage-distribution-green" :style='{ width: getPercent(userInfo.storage.file) }'></span>
+						<span class="user-storage-distribution-orange" :style='{ width: getPercent(userInfo.storage.video) }'></span>
+						<span class="user-storage-distribution-red" :style='{ width: getPercent(userInfo.storage.movie) }'></span>
+						<span class="user-storage-distribution-blue" :style='{ width: getPercent(userInfo.storage.other) }'></span>
+					</div>
+					<p class="user-storage-text">
+						<span style="color:#00D523">文件内容：{{ getSizeVal(userInfo.storage.file) }}</span>
+						<span style="color:#e87b22">影像内容：{{ getSizeVal(userInfo.storage.video) }}</span>
+						<span style="color:#ff40bc">影片内容：{{ getSizeVal(userInfo.storage.movie) }}</span>
+						<span style="color:#1fccd5">其他内容：{{ getSizeVal(userInfo.storage.other) }}</span>
+					</p>
+				</div>
+				<div class="btn-logout">登出</div>
 			</div>
 		</Poptip>
 	</div>
 </template>
 
 <script>
+	export default {
+		data(){
+			return {
+				userInfo:{
+					username:'OnePsycho',
+					account:'15895626464',
+					courseNum:7,
+					activityNum:16,
+					classNum:21,
+					storage:{
+						max:1073741824,
+						total:456130560,
+						file:105906176,
+						video:78643200,
+						movie:238026752,
+						other:239845888
+					}
+				}
+			}
+		},
+		
+		computed:{
+			/* 返回内存占比数值 */
+			getPercent(){
+				return val => {
+					let percent = (val / this.userInfo.storage.max).toFixed(2) * 100 + '%'
+					return percent
+				}
+			},
+			getSizeVal(){
+				return val => {
+					return this.$tools.bytesToSize(val)
+				}
+			}
+		}
+	}
 </script>
 
 <style lang="less">
@@ -27,7 +93,11 @@
 		}
 		
 		.ivu-poptip-popper{
-			left: -342px !important;
+			width: 460px !important;
+		}
+		
+		.ivu-poptip-popper{
+			left: -402px !important;
 		}
 		
 		.ivu-poptip-title{
@@ -39,8 +109,8 @@
 		}
 		
 		.user-center{
-			height: 500px;
-			padding-top: 50px;
+			height: 600px;
+			padding-top: 30px;
 			
 			.user-info{
 				.fl-col-center;
@@ -68,9 +138,99 @@
 					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;
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-around;
+				}
+			}
+			
+			.btn-logout{
+				.fl-col-center;
+				background: #1CC0F3;
+				padding: 10px 60px;
+				color: #fff;
+				width: 70%;
+				margin-left: 15%;
+				margin-top: 40px;
+				border-radius: 5px;
+				font-size: 16px;
+				cursor: pointer;
+			}
 		}
 		
 		.fl-col-center{

TEAMModelOS/ClientApp/src/css/dark-iview-poptip.less

@@ -3,7 +3,7 @@
 	position: relative;
 	
 	.ivu-poptip-popper{
-		width: 400px !important;
+		width: 450px !important;
 		top: 56px !important;
 		// left: 1398px !important;
 	}