Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
e0a3667c 1 parent c6ccbdcb

refactor(router): 重构路由配置并删除无用文件 

重构了路由配置文件，更新了路由路径和组件名称，并添加了元数据。删除了不再使用的About.vue文件，同时新增了CoursesPage.vue页面。
Expand all
Inline Side-by-side
Showing 5 changed files with 154 additions and 77 deletions
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-20 20:50:41
* @FilePath: /mlaj/src/router/index.js
* @Description: 文件描述
*/
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'home',
component: () => import('../views/Home.vue')
name: 'HomePage',
component: () => import('../views/HomePage.vue'),
meta: { title: 'HomePage' },
},
{
path: '/about',
name: 'about',
component: () => import('../views/About.vue')
}
path: '/courses',
name: 'Courses',
component: () => import('../views/courses/CoursesPage.vue'),
meta: { title: 'Courses' },
},
{
path: '/courses/:id',
name: 'CourseDetail',
component: () => import('../views/courses/CourseDetailPage.vue'),
meta: { title: 'CourseDetail' },
},
]
const router = createRouter({
history: createWebHistory(),
routes
routes,
})
export default router
......
<script setup>
import { Button, NavBar, Tabbar, TabbarItem } from 'vant';
</script>
<template>
<div class="min-h-screen flex flex-col bg-gray-100">
<van-nav-bar
title="关于"
left-text="返回"
right-text="菜单"
left-arrow
@click-left="onClickLeft"
@click-right="onClickRight"
/>
<div class="flex-1 p-4">
<div class="bg-white rounded-lg shadow p-4 mb-4">
<h2 class="text-xl font-bold mb-2">关于我们</h2>
<p class="text-gray-600 mb-4">这是一个示例项目的关于页面，展示了如何使用Vue3、Vite、Vant4和TailwindCSS构建现代化的Web应用。</p>
<van-button type="primary" block>了解更多</van-button>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-white rounded-lg shadow p-4">
<h3 class="text-lg font-semibold mb-2">联系方式</h3>
<ul class="text-gray-600">
<li>邮箱：example@example.com</li>
<li>电话：123-456-7890</li>
<li>地址：示例地址</li>
</ul>
</div>
<div class="bg-white rounded-lg shadow p-4">
<h3 class="text-lg font-semibold mb-2">版本信息</h3>
<ul class="text-gray-600">
<li>当前版本：1.0.0</li>
<li>更新日期：2024-03-20</li>
<li>开源协议：MIT</li>
</ul>
</div>
</div>
</div>
<van-tabbar v-model="active">
<van-tabbar-item icon="home-o">首页</van-tabbar-item>
<van-tabbar-item icon="search">搜索</van-tabbar-item>
<van-tabbar-item icon="friends-o">好友</van-tabbar-item>
<van-tabbar-item icon="setting-o">设置</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
data() {
return {
active: 0
}
},
methods: {
onClickLeft() {
this.$router.back()
},
onClickRight() {
// 处理右侧按钮点击
}
}
}
</script>
<!--
* @Date: 2025-03-20 19:55:21
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-03-20 20:26:17
* @FilePath: /vue-vite/src/views/Home.vue
* @LastEditTime: 2025-03-20 20:48:08
* @FilePath: /mlaj/src/views/HomePage.vue
* @Description: 文件描述
-->
<template>
......
This diff is collapsed. Click to expand it.
<template>
<AppLayout title="课程" :rightContent="rightContent">
<div class="pb-16">
<!-- Search Bar -->
<div class="pb-2">
<SearchBar placeholder="搜索" @search="handleSearch" />
</div>
<!-- Featured Course Banner -->
<div class="px-4 mb-5">
<div class="relative rounded-xl overflow-hidden shadow-lg h-40">
<img
src="https://cdn.ipadbiz.cn/mlaj/images/featured-course.jpg"
alt="传承之道"
class="w-full h-full object-cover"
/>
<div
class="absolute inset-0 bg-gradient-to-b from-transparent to-black/50 flex flex-col justify-end p-4"
>
<h2 class="text-3xl font-bold text-amber-400 drop-shadow-md">传承之道</h2>
<p class="text-xl text-white font-semibold drop-shadow-sm">大理鸡足山游学</p>
</div>
</div>
</div>
<!-- Today's Live -->
<div class="px-4 mb-4">
<div class="flex items-center mb-2">
<h2 class="font-medium">今日直播</h2>
<div
class="ml-2 flex items-center bg-red-100 text-red-700 rounded px-2 py-1 text-xs"
>
<span class="font-medium">{{ hours }}</span>
<span class="mx-1">:</span>
<span class="font-medium">{{ minutes }}</span>
<span class="mx-1">:</span>
<span class="font-medium">00</span>
</div>
</div>
<!-- Live Stream Cards -->
<div class="grid grid-cols-2 gap-4">
<LiveStreamCard
v-for="stream in liveStreams"
:key="stream.id"
:stream="stream"
/>
</div>
</div>
<!-- Value Online Courses -->
<div class="px-4 mb-4">
<div class="flex justify-between items-center mb-2">
<h2 class="font-medium">超值线上课</h2>
<router-link to="#" class="text-xs text-gray-500 flex items-center">
更多
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-3 w-3 ml-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</router-link>
</div>
<!-- Course Cards -->
<div class="space-y-4">
<CourseCard v-for="course in courses" :key="course.id" :course="course" />
</div>
</div>
</div>
</AppLayout>
</template>
<script setup lang="jsx">
import { computed, defineComponent, h } from "vue";
import AppLayout from "@/components/layout/AppLayout.vue";
import SearchBar from "@/components/ui/SearchBar.vue";
import FrostedGlass from "@/components/ui/FrostedGlass.vue";
import CourseCard from "@/components/ui/CourseCard.vue";
import LiveStreamCard from "@/components/ui/LiveStreamCard.vue";
import { featuredCourse, liveStreams, courses } from "@/utils/mockData";
// Search handler
const handleSearch = (query) => {
console.log("Searching for:", query);
// Would implement actual search logic here
};
// Current time for the countdown timer
const todayDate = new Date();
const formattedTime = featuredCourse.liveTime.split(":");
const hours = computed(() => formattedTime[0]);
const minutes = computed(() => formattedTime[1]);
// Right content component
const RightContent = defineComponent({
setup() {
return () => (
<button class="p-2">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-700"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
</button>
);
},
});
const rightContent = h(RightContent);
</script>