第4天

一.首页左上方的卡片实现

在index.js中增加home的路由：

import { createRouter, createWebHashHistory } from 'vue-router'
//指定路由规则
const routes = [
    {
        path: '/',
        name: "main",
        component: () => import('../views/Main.vue'),
        redirect: '/home',
        children: [
            {
                path: 'home',
                name: "home",
                component: () => import('../views/Home.vue'),
            }
        ]
    }
]
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router;

增加Home组件：

在Main中把主页换成：

<router-view></router-view>

实现效果：

编辑Home页面：

增加一个user-card，编辑样式：

<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8" style="margin-top:20px">
      <el-card class="user-card">
        <div class="user">
          <img :src="getImageUrl('user')">
          <div class="user-info">
            <p class="user-name">Admin</p>
            <p class="user-role">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>2024-5-1</span></p>
          <p>上次登录地点：<span>北京</span></p>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
const getImageUrl = (user) => {
  return new URL(`../assets/images/${user}.png`, import.meta.url).href
}
</script>

<style lang="less" scoped>
.home {
  height: 100%;
}
.user-card {
  height: 300px;
  width: 500px;
}
.user {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  margin: 30px 0;
}
.user-info {
  display: flex;
  flex-direction: column;
  line-height: 40px;
  .user-role {
    color: #999;
  }
  .user-name {
    font-size: 30px;
  }
}
.user-name, .user-role {
  margin: 0;
}
.user-role {
  white-space: nowrap; 
}
img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-right: 40px;
}
.login-info {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  p {
  line-height: 30px;
  font-size: 14px;
  color: #999;
  span {
    color: #666;
    margin-left: 60px;
  }
  }
}
</style>

实现效果：