daijiajjun
2 months ago
12 changed files with 202 additions and 118 deletions
-
39src/App.vue
-
58src/components/HelloWorld.vue
-
25src/components/Layout/Header.vue
-
36src/components/Layout/Sidebar.vue
-
9src/components/Question/QuestionSearch.vue
-
38src/components/Question/QuestionTable.vue
-
8src/components/Tabs/TabNavigation.vue
-
11src/main.js
-
37src/router/index.js
-
0src/views/HomeView.vue
-
7src/views/QuestionManage.vue
-
52src/views/UserStatistics.vue
@ -1,58 +0,0 @@ |
|||
<template> |
|||
<div class="hello"> |
|||
<h1>{{ msg }}</h1> |
|||
<p> |
|||
For a guide and recipes on how to configure / customize this project,<br> |
|||
check out the |
|||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. |
|||
</p> |
|||
<h3>Installed CLI Plugins</h3> |
|||
<ul> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> |
|||
</ul> |
|||
<h3>Essential Links</h3> |
|||
<ul> |
|||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> |
|||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> |
|||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> |
|||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> |
|||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> |
|||
</ul> |
|||
<h3>Ecosystem</h3> |
|||
<ul> |
|||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> |
|||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> |
|||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> |
|||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> |
|||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'HelloWorld', |
|||
props: { |
|||
msg: String |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<!-- Add "scoped" attribute to limit CSS to this component only --> |
|||
<style scoped> |
|||
h3 { |
|||
margin: 40px 0 0; |
|||
} |
|||
ul { |
|||
list-style-type: none; |
|||
padding: 0; |
|||
} |
|||
li { |
|||
display: inline-block; |
|||
margin: 0 10px; |
|||
} |
|||
a { |
|||
color: #42b983; |
|||
} |
|||
</style> |
|||
@ -1,31 +1,36 @@ |
|||
<!--头部组件--> |
|||
<template> |
|||
<!-- 头部容器 --> |
|||
<div class="header"> |
|||
<!-- 系统Logo --> |
|||
<div class="logo">Homily Link</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
// 组件名称：Header（由于是单个单词，已禁用多单词命名规则） |
|||
// eslint-disable-next-line vue/multi-word-component-names |
|||
name: 'Header' |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 头部样式 */ |
|||
.header { |
|||
height: 60px; |
|||
background-color: white; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: flex-start; |
|||
padding-left: 20px; |
|||
box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
|||
height: 60px; /* 高度60px */ |
|||
background-color: white; /* 白色背景 */ |
|||
display: flex; /* 使用flex布局 */ |
|||
align-items: center; /* 垂直居中对齐 */ |
|||
justify-content: flex-start; /* 内容靠左对齐 */ |
|||
padding-left: 20px; /* 左内边距20px */ |
|||
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 添加底部阴影效果 */ |
|||
} |
|||
|
|||
/* Logo样式 */ |
|||
.logo { |
|||
color: #e74c3c; |
|||
font-weight: bold; |
|||
font-size: 18px; |
|||
color: #e74c3c; /* 红色字体 */ |
|||
font-weight: bold; /* 粗体 */ |
|||
font-size: 18px; /* 字体大小18px */ |
|||
} |
|||
</style> |
|||
@ -1,9 +1,18 @@ |
|||
// 导入Vue框架
|
|||
import Vue from 'vue' |
|||
// 导入根组件App.vue
|
|||
import App from './App.vue' |
|||
// 导入路由配置
|
|||
import router from "@/router"; |
|||
|
|||
// 关闭生产环境提示
|
|||
Vue.config.productionTip = false |
|||
|
|||
// 创建Vue实例
|
|||
new Vue({ |
|||
// 注入路由配置
|
|||
router, |
|||
render: h => h(App), |
|||
// 渲染函数，将App组件渲染到页面
|
|||
render: h => h(App), |
|||
// 挂载到id为app的DOM元素上
|
|||
}).$mount('#app') |
|||
@ -1,37 +1,46 @@ |
|||
// 导入Vue框架
|
|||
import Vue from 'vue' |
|||
// 导入Vue Router插件
|
|||
import VueRouter from 'vue-router' |
|||
// 导入题库管理页面组件
|
|||
import QuestionManage from '@/views/QuestionManage.vue' |
|||
// 导入用户统计数据页面组件
|
|||
import UserStatistics from '@/views/UserStatistics.vue' |
|||
// 导入错题统计页面组件
|
|||
import WrongQuestion from '@/views/WrongQuestion.vue' |
|||
|
|||
// 在Vue中使用VueRouter插件
|
|||
Vue.use(VueRouter) |
|||
|
|||
// 定义路由配置数组
|
|||
const routes = [ |
|||
{ |
|||
path: '/', |
|||
redirect: '/questions' |
|||
path: '/', // 根路径
|
|||
redirect: '/questions' // 重定向到题目管理页面
|
|||
}, |
|||
{ |
|||
path: '/questions', |
|||
name: 'QuestionManage', |
|||
component: QuestionManage |
|||
path: '/questions', // 题库管理路径
|
|||
name: 'QuestionManage', // 路由名称
|
|||
component: QuestionManage // 对应的组件
|
|||
}, |
|||
{ |
|||
path: '/users', |
|||
name: 'UserStatistics', |
|||
component: UserStatistics |
|||
path: '/users', // 用户统计数据路径
|
|||
name: 'UserStatistics', // 路由名称
|
|||
component: UserStatistics // 对应的组件
|
|||
}, |
|||
{ |
|||
path: '/wrong-questions', |
|||
name: 'WrongQuestion', |
|||
component: WrongQuestion |
|||
path: '/wrong-questions', // 错题统计路径
|
|||
name: 'WrongQuestion', // 路由名称
|
|||
component: WrongQuestion // 对应的组件
|
|||
} |
|||
] |
|||
|
|||
// 创建VueRouter实例
|
|||
const router = new VueRouter({ |
|||
mode: 'history', |
|||
base: process.env.BASE_URL, |
|||
routes |
|||
mode: 'history', // 使用HTML5 History模式
|
|||
base: process.env.BASE_URL, // 设置应用的基路径
|
|||
routes // 路由配置
|
|||
}) |
|||
|
|||
// 导出路由器实例供main.js使用
|
|||
export default router |
|||
@ -1,18 +1,62 @@ |
|||
<template> |
|||
<!-- 用户统计数据页面容器 --> |
|||
<div class="user-statistics"> |
|||
<p>用户统计数据模块</p> |
|||
<p>当前模块内容暂未开发</p> |
|||
<!-- 用户统计数据搜索组件 --> |
|||
<UserStatisticsSearch /> |
|||
<!-- 用户统计数据表格组件，传递用户数据 --> |
|||
<UserStatisticsTable :users="userStatistics" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// 导入用户统计数据搜索组件 |
|||
import UserStatisticsSearch from '@/components/UserStatistics/UserStatisticsSearch.vue' |
|||
// 导入用户统计数据表格组件 |
|||
import UserStatisticsTable from '@/components/UserStatistics/UserStatisticsTable.vue' |
|||
|
|||
export default { |
|||
name: 'UserStatistics' |
|||
// 组件名称：用户统计数据 |
|||
name: 'UserStatistics', |
|||
// 注册子组件 |
|||
components: { |
|||
UserStatisticsSearch, |
|||
UserStatisticsTable |
|||
}, |
|||
// 组件数据 |
|||
data() { |
|||
return { |
|||
// 用户统计数据数组 |
|||
userStatistics: [ |
|||
{ |
|||
id: 1, // 用户ID |
|||
userName: '张三', // 用户名 |
|||
role: '学员', // 用户角色 |
|||
jingwangId: '90048184', // 京网ID |
|||
questionType: '股票知识', // 题目类型 |
|||
score: 50, // 分数 |
|||
submitTime: '2025-11-04 10:00:00' // 提交时间 |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
// 组件方法 |
|||
methods: { |
|||
// 获取用户统计数据的方法 |
|||
fetchUserStatistics() { |
|||
// 实现从后端获取数据的逻辑 |
|||
} |
|||
}, |
|||
// 生命周期钩子：组件挂载完成后执行 |
|||
mounted() { |
|||
// 页面加载时获取数据 |
|||
this.fetchUserStatistics() |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
/* 用户统计数据页面样式 */ |
|||
.user-statistics { |
|||
padding: 20px; |
|||
padding: 20px; /* 内边距20px */ |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue