|
|
@@ -1,78 +1,125 @@
|
|
|
<template>
|
|
|
<div class="login_info">
|
|
|
- <div class="user_info">
|
|
|
- <div class="user_icon">
|
|
|
- <img src="../img/user.png" alt="icon">
|
|
|
- </div>
|
|
|
- <div class="user_name">
|
|
|
- <p>欢迎您,</p>
|
|
|
- <p>dlrmkt</p>
|
|
|
- </div>
|
|
|
+ <div class="user_info">
|
|
|
+ <div class="user_icon">
|
|
|
+ <img src="../img/user.png" alt="icon" />
|
|
|
</div>
|
|
|
- <div class="time_info">
|
|
|
- <div class="clock_icon">
|
|
|
- <img src="../img/clock.png" alt="icon">
|
|
|
- </div>
|
|
|
- <div class="login_time">
|
|
|
- <p>登录时间</p>
|
|
|
- <p>2021-3-31(星期三)</p>
|
|
|
- </div>
|
|
|
+ <div class="user_name">
|
|
|
+ <p>欢迎您,</p>
|
|
|
+ <p>{{ userAccount }}</p>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <div class="time_info">
|
|
|
+ <div class="clock_icon">
|
|
|
+ <img src="../img/clock.png" alt="icon" />
|
|
|
+ </div>
|
|
|
+ <div class="login_time">
|
|
|
+ <p>登录时间</p>
|
|
|
+ <p>{{ time }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-export default {};
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ userAccount: {
|
|
|
+ type: String,
|
|
|
+ default: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ time: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTime: function () {
|
|
|
+ let d = new Date();
|
|
|
+ let year = d.getFullYear();
|
|
|
+ let month = d.getMonth() + 1;
|
|
|
+ let day = d.getDate();
|
|
|
+ let week = d.getDay();
|
|
|
+ switch (week) {
|
|
|
+ case 1:
|
|
|
+ week = "星期一";
|
|
|
+ break;
|
|
|
+ case 2:
|
|
|
+ week = "星期二";
|
|
|
+ break;
|
|
|
+ case 3:
|
|
|
+ week = "星期三";
|
|
|
+ break;
|
|
|
+ case 4:
|
|
|
+ week = "星期四";
|
|
|
+ break;
|
|
|
+ case 5:
|
|
|
+ week = "星期五";
|
|
|
+ break;
|
|
|
+ case 6:
|
|
|
+ week = "星期六";
|
|
|
+ break;
|
|
|
+ default:
|
|
|
+ week = "星期天";
|
|
|
+ }
|
|
|
+ this.time = year + "-" + month + "-" + day + "(" + week + ")";
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getTime();
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
.login_info {
|
|
|
- // background: rgb(212, 212, 212);
|
|
|
- width: 100%;
|
|
|
- .user_info{
|
|
|
- height: 48px;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
- display: flex;
|
|
|
- .user_icon{
|
|
|
- margin: 8px 0 0 10px;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- img{
|
|
|
- // width: 30px;
|
|
|
- // height: 30px;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- .user_name{
|
|
|
- width: 100px;
|
|
|
- height: 40px;
|
|
|
- margin: 4px 0 0 5px;
|
|
|
- p{
|
|
|
- line-height: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
+ // background: rgb(212, 212, 212);
|
|
|
+ width: 100%;
|
|
|
+ .user_info {
|
|
|
+ height: 48px;
|
|
|
+ border-bottom: 1px solid #eee;
|
|
|
+ display: flex;
|
|
|
+ .user_icon {
|
|
|
+ margin: 8px 0 0 10px;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ img {
|
|
|
+ // width: 30px;
|
|
|
+ // height: 30px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user_name {
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ margin: 4px 0 0 5px;
|
|
|
+ p {
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time_info {
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ .clock_icon {
|
|
|
+ margin: 8px 0 0 10px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
- .time_info{
|
|
|
- height: 50px;
|
|
|
- display: flex;
|
|
|
- .clock_icon{
|
|
|
- margin: 8px 0 0 10px;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- img{
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- .login_time{
|
|
|
- margin: 4px 0 0 5px;
|
|
|
- p{
|
|
|
- line-height: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .login_time {
|
|
|
+ margin: 4px 0 0 5px;
|
|
|
+ p {
|
|
|
+ line-height: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|