提交 3dae3c3d authored 作者: 王鹏飞's avatar 王鹏飞

updates

上级 98e63c7f
差异被折叠。
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"dependencies": { "dependencies": {
"axios": "^0.26.1", "axios": "^0.26.1",
"countup.js": "^2.1.0", "countup.js": "^2.1.0",
"element-plus": "^2.1.2",
"pinia": "^2.0.11", "pinia": "^2.0.11",
"vue": "^3.2.31", "vue": "^3.2.31",
"vue-router": "^4.0.14" "vue-router": "^4.0.14"
......
...@@ -16,6 +16,5 @@ import AppHeader from './Header.vue' ...@@ -16,6 +16,5 @@ import AppHeader from './Header.vue'
min-height: 100vh; min-height: 100vh;
background: #f9f8f8 url('https://webapp-pub.ezijing.com/project/saas/bg.png') no-repeat center bottom; background: #f9f8f8 url('https://webapp-pub.ezijing.com/project/saas/bg.png') no-repeat center bottom;
background-size: cover; background-size: cover;
background-attachment: fixed;
} }
</style> </style>
...@@ -3,17 +3,21 @@ import { createPinia } from 'pinia' ...@@ -3,17 +3,21 @@ import { createPinia } from 'pinia'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import modules from './modules' import modules from './modules'
// 公共css // 公共css
import './assets/css/base.css' import './assets/css/base.css'
const app = createApp(App) const app = createApp(App)
// 注册模块 // 注册模块
modules({ router }) modules({ router })
app.use(createPinia()) app.use(createPinia())
app.use(router) app.use(router)
app.use(ElementPlus)
app.mount('#app') app.mount('#app')
<script setup lang="ts"> <script setup lang="ts">
import AppCard from '@/components/base/AppCard.vue' import AppCard from '@/components/base/AppCard.vue'
import CardBoxCell from './CardBoxCell.vue'
defineProps({ data: { type: Object, default: () => ({}) } }) defineProps({ data: { type: Object, default: () => ({}) } })
</script> </script>
...@@ -9,28 +10,12 @@ defineProps({ data: { type: Object, default: () => ({}) } }) ...@@ -9,28 +10,12 @@ defineProps({ data: { type: Object, default: () => ({}) } })
<div class="box"> <div class="box">
<div class="box-left"> <div class="box-left">
<div class="box-row" v-for="(row, index) in data.leftItems" :key="index"> <div class="box-row" v-for="(row, index) in data.leftItems" :key="index">
<div class="box-cell" v-for="(cell, index) in row" :key="index"> <CardBoxCell v-for="(cell, index) in row" :data="cell" :key="index"></CardBoxCell>
<a :href="cell.href" target="_blank">
<div class="box-cell-icon">
<img :src="cell.icon" class="icon-normal" />
<img :src="cell.hoverIcon" class="icon-hover" />
</div>
<div class="box-cell-name">{{ cell.title }}</div>
</a>
</div>
</div> </div>
</div> </div>
<div class="box-right" v-if="data.rightItems"> <div class="box-right" v-if="data.rightItems">
<div class="box-row" v-for="(row, index) in data.rightItems" :key="index"> <div class="box-row" v-for="(row, index) in data.rightItems" :key="index">
<div class="box-cell" v-for="(cell, index) in row" :key="index"> <CardBoxCell v-for="(cell, index) in row" :data="cell" :key="index"></CardBoxCell>
<a :href="cell.href" target="_blank">
<div class="box-cell-icon">
<img :src="cell.icon" class="icon-normal" />
<img :src="cell.hoverIcon" class="icon-hover" />
</div>
<div class="box-cell-name">{{ cell.title }}</div>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -43,8 +28,7 @@ defineProps({ data: { type: Object, default: () => ({}) } }) ...@@ -43,8 +28,7 @@ defineProps({ data: { type: Object, default: () => ({}) } })
} }
.box-left { .box-left {
flex: 1; flex: 1;
a:hover { .box-cell:hover {
color: #fff;
background-color: #aa1941; background-color: #aa1941;
} }
} }
...@@ -53,8 +37,7 @@ defineProps({ data: { type: Object, default: () => ({}) } }) ...@@ -53,8 +37,7 @@ defineProps({ data: { type: Object, default: () => ({}) } })
margin-left: 20px; margin-left: 20px;
padding-left: 20px; padding-left: 20px;
border-left: 1px dashed #c1c1c1; border-left: 1px dashed #c1c1c1;
a:hover { .box-cell:hover {
color: #fff;
background-color: #136ca8; background-color: #136ca8;
} }
} }
...@@ -64,59 +47,15 @@ defineProps({ data: { type: Object, default: () => ({}) } }) ...@@ -64,59 +47,15 @@ defineProps({ data: { type: Object, default: () => ({}) } })
.box-row + .box-row { .box-row + .box-row {
margin-top: 20px; margin-top: 20px;
} }
.box-cell {
flex: 1;
background-color: #f7f5f5;
border-radius: 20px;
color: #333;
overflow: hidden;
a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 150px;
&:hover {
.icon-normal {
display: none;
}
.icon-hover {
display: block;
}
}
}
}
.box-cell + .box-cell { .box-cell + .box-cell {
margin-left: 20px; margin-left: 20px;
} }
.box-cell-icon {
height: 46px;
img {
height: 100%;
object-fit: contain;
}
.icon-normal {
display: block;
}
.icon-hover {
display: none;
}
}
.box-cell-name {
margin-top: 18px;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
.is-blue { .is-blue {
.app-card-hd__title { .app-card-hd__title {
border-color: #136ca8; border-color: #136ca8;
} }
.box-cell { .box-cell:hover {
a:hover {
color: #fff;
background-color: #136ca8; background-color: #136ca8;
} }
}
} }
</style> </style>
<script setup lang="ts">
const props = defineProps({ data: { type: Object, default: () => ({}) } })
function handleClick() {
props.data.onClick && props.data.onClick()
}
</script>
<template>
<div class="box-cell" v-if="data.href">
<a :href="data.href" target="_blank">
<div class="box-cell-icon">
<img :src="data.icon" class="icon-normal" />
<img :src="data.hoverIcon" class="icon-hover" />
</div>
<div class="box-cell-name">{{ data.title }}</div>
</a>
</div>
<div class="box-cell" @click="handleClick" v-else>
<div class="box-cell-icon">
<img :src="data.icon" class="icon-normal" />
<img :src="data.hoverIcon" class="icon-hover" />
</div>
<div class="box-cell-name">{{ data.title }}</div>
</div>
</template>
<style lang="scss">
.box-cell {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f7f5f5;
height: 150px;
border-radius: 20px;
color: #333;
cursor: pointer;
a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: inherit;
width: 100%;
height: 100%;
}
&:hover {
color: #fff;
box-shadow: 1px 3px 18px rgba(0, 0, 0, 0.18);
a {
color: #fff;
}
.icon-normal {
display: none;
}
.icon-hover {
display: block;
}
}
}
.box-cell-icon {
height: 46px;
img {
height: 100%;
object-fit: contain;
}
.icon-normal {
display: block;
}
.icon-hover {
display: none;
}
}
.box-cell-name {
margin-top: 18px;
font-size: 16px;
font-weight: 400;
line-height: 28px;
}
</style>
<script setup lang="ts"> <script setup lang="ts">
import { ElMessage } from 'element-plus'
import Total from '../components/Total.vue' import Total from '../components/Total.vue'
import Card from '../components/Card.vue' import Card from '../components/Card.vue'
const rows = [ const rows = [
...@@ -11,13 +12,17 @@ const rows = [ ...@@ -11,13 +12,17 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_1.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_1.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_1_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_1_hover.png',
title: 'CMS教学资源系统', title: 'CMS教学资源系统',
href: 'https://course.ezijing.com/' onClick() {
ElMessage({ message: '暂未开放' })
}
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_2.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_2.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_2_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_2_hover.png',
title: '课程管理中心', title: '课程管理中心',
href: '' onClick() {
ElMessage({ message: '暂未开放' })
}
} }
] ]
], ],
...@@ -27,13 +32,17 @@ const rows = [ ...@@ -27,13 +32,17 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_3.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_3.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_3_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_3_hover.png',
title: '课程学习', title: '课程学习',
href: '' onClick() {
ElMessage({ message: '暂未开放' })
}
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_4.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_4.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_4_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_4_hover.png',
title: '在线考试', title: '在线考试',
href: '' onClick() {
ElMessage({ message: '暂未开放' })
}
} }
] ]
] ]
...@@ -92,7 +101,9 @@ const rows = [ ...@@ -92,7 +101,9 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_7.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_7.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_7_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_7_hover.png',
title: '考试中心', title: '考试中心',
href: 'https://x-exam.ezijing.com' onClick() {
ElMessage({ message: '当前暂无考试' })
}
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_8.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_8.png',
...@@ -113,13 +124,17 @@ const rows = [ ...@@ -113,13 +124,17 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_1.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_1.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_1_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_1_hover.png',
title: '教学管理', title: '教学管理',
href: 'https://x-school.ezijing.com' onClick() {
ElMessage({ message: '暂未开放' })
}
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_2.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_2.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_2_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_2_hover.png',
title: '教务管理', title: '教务管理',
href: 'https://x-school.ezijing.com' onClick() {
ElMessage({ message: '暂未开放' })
}
} }
], ],
[ [
...@@ -127,13 +142,13 @@ const rows = [ ...@@ -127,13 +142,13 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_3.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_3.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_3_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_3_hover.png',
title: '题库管理', title: '题库管理',
href: 'https://qa-center.ezijing.com' href: 'https://qa-center.ezijing.com?project_tag=marywood_plus'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_4.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_4.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_4_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_4_hover.png',
title: '考务管理', title: '考务管理',
href: 'https://qa-center.ezijing.com/exam?project_tag=x1' href: 'https://qa-center.ezijing.com/exam?project_tag=marywood_plus'
} }
] ]
], ],
...@@ -143,7 +158,9 @@ const rows = [ ...@@ -143,7 +158,9 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_5.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_5.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_5_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_5_hover.png',
title: '课程学习', title: '课程学习',
href: '' onClick() {
ElMessage({ message: '暂未开放' })
}
} }
], ],
[ [
...@@ -151,7 +168,9 @@ const rows = [ ...@@ -151,7 +168,9 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_6.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_6.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_6_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_6_hover.png',
title: '在线考试', title: '在线考试',
href: '' onClick() {
ElMessage({ message: '当前暂无考试' })
}
} }
] ]
] ]
...@@ -166,13 +185,13 @@ const rows = [ ...@@ -166,13 +185,13 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_1.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_1.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_1_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_1_hover.png',
title: '教学管理', title: '教学管理',
href: '' href: 'https://marywood-admin.ezijing.com'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_2.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_2.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_2_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_2_hover.png',
title: '教务管理', title: '教务管理',
href: '' href: 'https://marywood-admin.ezijing.com'
} }
], ],
[ [
...@@ -180,13 +199,13 @@ const rows = [ ...@@ -180,13 +199,13 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_3.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_3.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_3_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_3_hover.png',
title: '题库管理', title: '题库管理',
href: '' href: 'https://qa-center.ezijing.com?project_tag=marywood'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_4.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_4.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_4_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_4_hover.png',
title: '考务管理', title: '考务管理',
href: '' href: 'https://qa-center.ezijing.com/exam?project_tag=marywood'
} }
] ]
], ],
...@@ -196,7 +215,7 @@ const rows = [ ...@@ -196,7 +215,7 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_5.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_5.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_5_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_5_hover.png',
title: '课程学习', title: '课程学习',
href: '' href: 'https://marywood-learning.ezijing.com'
} }
], ],
[ [
...@@ -204,7 +223,9 @@ const rows = [ ...@@ -204,7 +223,9 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_6.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_6.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_6_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_6_hover.png',
title: '在线考试', title: '在线考试',
href: '' onClick() {
ElMessage({ message: '暂未开放' })
}
} }
] ]
] ]
...@@ -233,13 +254,13 @@ const rows = [ ...@@ -233,13 +254,13 @@ const rows = [
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_1.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_1.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_1_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_1_hover.png',
title: '商业数据分析实验室', title: '商业数据分析实验室',
href: 'https://www.ezijing.com' href: 'http://114.242.229.132:18080/bi'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_2.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_2.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_2_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_2_hover.png',
title: '数字化营销平台', title: '数字化营销平台',
href: 'https://x-training.ezijing.com' href: 'https://xtraining.ezijing.com'
} }
] ]
] ]
......
import type { Router } from 'vue-router' import type { Router } from 'vue-router'
import type { Module } from '@/types' import type { AppModule } from '@/types'
export default function ({ router }: { router: Router }) { export default function ({ router }: { router: Router }) {
const modules: Array<Module> = Object.values(import.meta.globEager('./**/index.ts')) const modules: Array<AppModule> = Object.values(import.meta.globEager('./**/index.ts'))
modules.forEach(({ routes = [] }) => { modules.forEach(({ routes = [] }) => {
// 注册路由 // 注册路由
routes.forEach(route => { routes.forEach(route => {
......
...@@ -9,6 +9,6 @@ export interface UserState { ...@@ -9,6 +9,6 @@ export interface UserState {
username: string username: string
} }
export interface Module { export interface AppModule {
routes: Array<RouteRecordRaw> routes: Array<RouteRecordRaw>
} }
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论