一、开发简介

核心工作内容：UI 重构、界面优化

工作时间：第十三周

二、Home页面UI重构

1.添加问候

介绍：根据当前的时间，设置不同的问候方式

• template

<div class="greeting">
    <p>{{ greeting }}</p>
</div>

• script

/**导入组件**/
import {useRouter} from 'vue-router';
import {onMounted, ref} from 'vue'


/**初始化**/
const router = useRouter();
const greeting = ref('')


/**定义函数**/
// 问候
function getGreeting() {
  const hour = new Date().getHours()
  if (hour >= 5 && hour < 12) {
    return '早上好☀️，新的一天开始啦，一起加油学习吧～'
  } else if (hour >= 12 && hour < 18) {
    return '下午好～喝杯水，打起精神，我们继续努力吧 📚'
  } else if (hour >= 18 && hour < 22) {
    return '晚上好呀🌙，今天也要继续充实自己哦～'
  } else {
    return '夜深啦🌌，注意休息哦，但也别忘了坚持一下下 ✨'
  }
}

// 定义跳转函数
const goToPage = (path) => {
  router.push(path);
};


/**生命周期**/
onMounted(() => {
  greeting.value = getGreeting()
})

• style

.greeting {
  @include hold(99, 20);

  //background-color: #2c3e50;
  margin-top: 5vh;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  font-family: 'Segoe UI', sans-serif;
}

2.UI 重构

介绍：调整模块的布局

• template

<div class="dashboard">
    <el-row :gutter="20">
      <el-col :span="6" :offset="2">
        <el-card class="dashboard-card" @click="goToPage('/intelligent-408-qna')">
          <div class="card-content">
            <h3>智能化408答疑</h3>
            <p>快速解答408相关问题</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-card class="dashboard-card" @click="goToPage('/intelligent-408-search')">
          <div class="card-content">
            <h3>智能408搜题</h3>
            <p>精准搜索408相关题目</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-card class="dashboard-card" @click="goToPage('/personalized-exercises')">
          <div class="card-content">
            <h3>408习题训练</h3>
            <p>让你随时随地训练真题</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="2">
        <el-card class="dashboard-card" @click="goToPage('/error-book')">
          <div class="card-content">
            <h3>错题本</h3>
            <p>记录并复习错题</p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6" :offset="1">
        <el-card class="dashboard-card" @click="goToPage('/clock')">
          <div class="card-content">
            <h3>学习钟计时</h3>
            <p>专注学习，高效备考</p>
          </div>
        </el-card>
      </el-col>
      <!-- 新增的 AI 出题卡片 -->
      <el-col :span="6" :offset="1">
        <el-card class="dashboard-card" @click="goToPage('/ai-question')">
          <div class="card-content">
            <h3>AI出题</h3>
            <p>智能生成408相关题目</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

• style

.dashboard {
  margin-top: 5vh;
  padding: 20px;
}

.dashboard-card {
  cursor: pointer;
  transition: transform 0.3s ease;
  margin-bottom: 50px;

  &:hover {
    transform: translateY(-5px);
  }

  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;

    h3 {
      font-size: 18px;
      margin-bottom: 10px;
    }

    p {
      font-size: 14px;
      color: #666;
    }
  }
}

三、菜单更改

1.返回首页

<el-menu-item index="/home">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>

2.修改图标

<el-icon><ChatDotRound /></el-icon>

<el-icon><Clock /></el-icon>

<el-icon><Aim /></el-icon>

<el-icon><Search /></el-icon>

<el-icon><Tickets /></el-icon>

<el-icon><DocumentChecked /></el-icon>

<el-icon><Tools /></el-icon>

<el-icon><Reading /></el-icon>

<el-icon><Menu /></el-icon>

转载自CSDN-专业IT技术社区

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/c335000/article/details/148036082