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
-
9src/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> |
<template> |
||||
|
<!-- 头部容器 --> |
||||
<div class="header"> |
<div class="header"> |
||||
|
<!-- 系统Logo --> |
||||
<div class="logo">Homily Link</div> |
<div class="logo">Homily Link</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
|
// 组件名称：Header（由于是单个单词，已禁用多单词命名规则） |
||||
// eslint-disable-next-line vue/multi-word-component-names |
// eslint-disable-next-line vue/multi-word-component-names |
||||
name: 'Header' |
name: 'Header' |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
|
/* 头部样式 */ |
||||
.header { |
.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 { |
.logo { |
||||
color: #e74c3c; |
|
||||
font-weight: bold; |
|
||||
font-size: 18px; |
|
||||
|
color: #e74c3c; /* 红色字体 */ |
||||
|
font-weight: bold; /* 粗体 */ |
||||
|
font-size: 18px; /* 字体大小18px */ |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -1,9 +1,18 @@ |
|||||
|
// 导入Vue框架
|
||||
import Vue from 'vue' |
import Vue from 'vue' |
||||
|
// 导入根组件App.vue
|
||||
import App from './App.vue' |
import App from './App.vue' |
||||
|
// 导入路由配置
|
||||
import router from "@/router"; |
import router from "@/router"; |
||||
|
|
||||
|
// 关闭生产环境提示
|
||||
Vue.config.productionTip = false |
Vue.config.productionTip = false |
||||
|
|
||||
|
// 创建Vue实例
|
||||
new Vue({ |
new Vue({ |
||||
|
// 注入路由配置
|
||||
router, |
router, |
||||
|
// 渲染函数，将App组件渲染到页面
|
||||
render: h => h(App), |
render: h => h(App), |
||||
|
// 挂载到id为app的DOM元素上
|
||||
}).$mount('#app') |
}).$mount('#app') |
||||
@ -1,37 +1,46 @@ |
|||||
|
// 导入Vue框架
|
||||
import Vue from 'vue' |
import Vue from 'vue' |
||||
|
// 导入Vue Router插件
|
||||
import VueRouter from 'vue-router' |
import VueRouter from 'vue-router' |
||||
|
// 导入题库管理页面组件
|
||||
import QuestionManage from '@/views/QuestionManage.vue' |
import QuestionManage from '@/views/QuestionManage.vue' |
||||
|
// 导入用户统计数据页面组件
|
||||
import UserStatistics from '@/views/UserStatistics.vue' |
import UserStatistics from '@/views/UserStatistics.vue' |
||||
|
// 导入错题统计页面组件
|
||||
import WrongQuestion from '@/views/WrongQuestion.vue' |
import WrongQuestion from '@/views/WrongQuestion.vue' |
||||
|
|
||||
|
// 在Vue中使用VueRouter插件
|
||||
Vue.use(VueRouter) |
Vue.use(VueRouter) |
||||
|
|
||||
|
// 定义路由配置数组
|
||||
const routes = [ |
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({ |
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 |
export default router |
||||
@ -1,18 +1,62 @@ |
|||||
<template> |
<template> |
||||
|
<!-- 用户统计数据页面容器 --> |
||||
<div class="user-statistics"> |
<div class="user-statistics"> |
||||
<p>用户统计数据模块</p> |
|
||||
<p>当前模块内容暂未开发</p> |
|
||||
|
<!-- 用户统计数据搜索组件 --> |
||||
|
<UserStatisticsSearch /> |
||||
|
<!-- 用户统计数据表格组件，传递用户数据 --> |
||||
|
<UserStatisticsTable :users="userStatistics" /> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
// 导入用户统计数据搜索组件 |
||||
|
import UserStatisticsSearch from '@/components/UserStatistics/UserStatisticsSearch.vue' |
||||
|
// 导入用户统计数据表格组件 |
||||
|
import UserStatisticsTable from '@/components/UserStatistics/UserStatisticsTable.vue' |
||||
|
|
||||
export default { |
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> |
</script> |
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
|
/* 用户统计数据页面样式 */ |
||||
.user-statistics { |
.user-statistics { |
||||
padding: 20px; |
|
||||
|
padding: 20px; /* 内边距20px */ |
||||
} |
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue