Skip to content

S
saas
提交 05200e13 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

v2

上级 a8a57867
隐藏空白字符变更
内嵌 并排
正在显示 包含 198 行增加 和 319 行删除
src/modules/home/components/Card.vue
浏览文件 @ 05200e13
...@@ -6,18 +6,9 @@ defineProps({ data: { type: Object, default: () => ({}) } }) ...@@ -6,18 +6,9 @@ defineProps({ data: { type: Object, default: () => ({}) } })
</script> </script>
<template> <template>
<AppCard :title="data.title" :class="data.className"> <AppCard :title="data.title">
<div class="box"> <div class="box">
<div class="box-left"> <CardBoxCell v-for="(cell, index) in data.items" :data="cell" :key="index"></CardBoxCell>
<div class="box-row" v-for="(row, index) in data.leftItems" :key="index">
<CardBoxCell v-for="(cell, index) in row" :data="cell" :key="index"></CardBoxCell>
</div>
</div>
<div class="box-right" v-if="data.rightItems">
<div class="box-row" v-for="(row, index) in data.rightItems" :key="index">
<CardBoxCell v-for="(cell, index) in row" :data="cell" :key="index"></CardBoxCell>
</div>
</div>
</div> </div>
</AppCard> </AppCard>
</template> </template>
...@@ -25,37 +16,12 @@ defineProps({ data: { type: Object, default: () => ({}) } }) ...@@ -25,37 +16,12 @@ defineProps({ data: { type: Object, default: () => ({}) } })
<style lang="scss"> <style lang="scss">
.box { .box {
display: flex; display: flex;
} padding: 10px 0;
.box-left {
flex: 1;
.box-cell:hover {
background-color: #aa1941;
}
}
.box-right {
flex: 1;
margin-left: 20px;
padding-left: 20px;
border-left: 1px dashed #c1c1c1;
.box-cell:hover {
background-color: #136ca8;
}
} }
.box-row { .box-row {
display: flex; display: flex;
} }
.box-row + .box-row { // .box-cell + .box-cell {
margin-top: 20px; // margin-left: 20px;
} // }
.box-cell + .box-cell {
margin-left: 20px;
}
.is-blue {
.app-card-hd__title {
border-color: #136ca8;
}
.box-cell:hover {
background-color: #136ca8;
}
}
</style> </style>
src/modules/home/components/CardBoxCell.vue
浏览文件 @ 05200e13
...@@ -6,33 +6,20 @@ function handleClick() { ...@@ -6,33 +6,20 @@ function handleClick() {
</script> </script>
<template> <template>
<div class="box-cell" v-if="data.href"> <div class="box-cell" :class="data.className" @click="handleClick">
<a :href="data.href" target="_blank"> <a :href="data.href" target="_blank">
<div class="box-cell-icon"> <div class="box-cell-icon">
<img :src="data.icon" class="icon-normal" /> <img :src="data.icon" class="icon-normal" />
<img :src="data.hoverIcon" class="icon-hover" /> <img :src="data.hoverIcon" class="icon-hover" />
</div> </div>
<div class="box-cell-name">{{ data.title }}</div> <div class="box-cell-name" v-html="data.title"></div>
</a> </a>
</div> </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> </template>
<style lang="scss"> <style lang="scss">
.box-cell { .box-cell {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f7f5f5;
height: 150px;
border-radius: 20px; border-radius: 20px;
color: #333; color: #333;
cursor: pointer; cursor: pointer;
...@@ -40,33 +27,43 @@ function handleClick() { ...@@ -40,33 +27,43 @@ function handleClick() {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
color: inherit; color: inherit;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
&:hover { &:hover {
color: #fff; .box-cell-icon {
box-shadow: 4px 3px 14px rgba(0, 0, 0, 0.37); background-color: #aa1941;
a { box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.27);
color: #fff;
} }
.icon-normal { .icon-normal {
display: none; display: none;
} }
.icon-hover { .icon-hover {
display: block; display: unset;
}
}
&.is-blue {
&:hover {
.box-cell-icon {
background-color: #005690;
}
} }
} }
} }
.box-cell-icon { .box-cell-icon {
height: 46px; width: 80px;
height: 80px;
background-color: #f7f5f5;
text-align: center;
line-height: 80px;
border-radius: 50%;
img { img {
height: 100%; height: 34px;
object-fit: contain; object-fit: contain;
} }
.icon-normal { .icon-normal {
display: block; display: unset;
} }
.icon-hover { .icon-hover {
display: none; display: none;
...@@ -77,5 +74,7 @@ function handleClick() { ...@@ -77,5 +74,7 @@ function handleClick() {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
line-height: 28px; line-height: 28px;
text-align: center;
white-space: nowrap;
} }
</style> </style>
src/modules/home/views/Index.vue
浏览文件 @ 05200e13
<script setup lang="ts"> <script setup lang="ts">
import { ElMessage } from 'element-plus' 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: Record<string, any>[] = [
[ [
{ {
title: '产业学院/专业共建', title: '产业学院/专业共建',
leftItems: [ items: [
[ {
{ 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'
href: 'https://course.ezijing.com' },
{
className: 'is-blue',
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',
title: '课程学习',
onClick() {
ElMessage({ message: '暂未开放' })
} }
// { },
// 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', className: 'is-blue',
// title: '课程管理中心', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_4.png',
// onClick() { hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_1_4_hover.png',
// ElMessage({ message: '暂未开放' }) title: '在线考试',
// } onClick() {
// } ElMessage({ message: '暂未开放' })
]
],
rightItems: [
[
{
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',
title: '课程学习',
onClick() {
ElMessage({ message: '暂未开放' })
}
},
{
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',
title: '在线考试',
onClick() {
ElMessage({ message: '暂未开放' })
}
} }
] }
] ]
} },
],
[
{ {
title: '技能培训中心', title: '数字经济实验室',
leftItems: [ items: [
[ {
{ className: 'is-blue',
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_1.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_1.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_1_hover.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_1_hover.png',
title: '1+X院校管理', title: '商业数据分析实验室',
href: 'https://project-center.ezijing.com' href: 'http://114.242.229.132:18080/bi'
}, },
{ {
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_2.png', className: 'is-blue',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_2_hover.png', icon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_2.png',
title: '1+X教务管理', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_2_hover.png',
href: 'https://x-admin.ezijing.com' title: '数字化营销平台',
} href: 'https://xtraining.ezijing.com'
], }
[ ]
{ },
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_3.png', {
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_3_hover.png', attrs: { style: 'flex: 0 0 194px;' },
title: '1+X考务管理', title: '实习就业',
href: 'https://qa-center.ezijing.com/exam?project_tag=x1' items: [
}, {
{ icon: 'https://webapp-pub.ezijing.com/project/saas/icon_5_1.png',
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_4.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_5_1_hover.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_4_hover.png', title: '实习就业平台',
title: '1+X教学平台', href: 'https://www.ezijing.com/services/employment'
href: 'https://x-admin.ezijing.com' }
}
],
[
{
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_5_1.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_5_1_hover.png',
title: '数字职业技能培训中心',
href: 'https://vst.ezijing.com'
}
]
],
rightItems: [
[
{
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',
title: '考试中心',
onClick() {
ElMessage({ message: '当前暂无考试' })
}
},
{
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_8.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_8_hover.png',
title: '模考练习',
href: 'https://x-learning.ezijing.com/exam/exam'
}
],
[
{
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_5.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_5_hover.png',
title: '金融产品营销实训',
href: 'https://x-training.ezijing.com'
}
],
[
{
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_6.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_6_hover.png',
title: '金融产品数字化营销学习',
href: 'https://x-learning.ezijing.com'
}
]
] ]
} }
], ],
[ [
{ {
title: '国际在线学位', title: '国际在线学位',
leftItems: [ items: [
[ {
{ 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://course.ezijing.com'
href: 'https://course.ezijing.com' },
}, {
{ 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://sofia-admin.ezijing.com'
href: 'https://sofia-admin.ezijing.com' },
} {
] className: 'is-blue',
// [ 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',
// icon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_3.png', title: '课程学习',
// hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_3_3_hover.png', href: 'https://sofia-learning.ezijing.com'
// title: '题库管理', }
// href: 'https://qa-center.ezijing.com?project_tag=marywood'
// },
// {
// 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',
// title: '考务管理',
// href: 'https://qa-center.ezijing.com/exam?project_tag=marywood'
// }
// ]
],
rightItems: [
[
{
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',
title: '课程学习',
href: 'https://sofia-learning.ezijing.com'
}
]
// [
// {
// 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',
// title: '在线考试',
// onClick() {
// ElMessage({ message: '当前暂无考试' })
// }
// }
// ]
] ]
} },
],
[
{ {
title: '国际留学', title: '国际留学',
leftItems: [ items: [
[ {
{ 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: 'https://course.ezijing.com'
href: 'https://course.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: 'https://marywood-admin.ezijing.com'
href: 'https://marywood-admin.ezijing.com' },
} {
] className: 'is-blue',
// [ 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',
// icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_3.png', title: '课程学习',
// hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_3_hover.png', href: 'https://marywood-learning.ezijing.com'
// title: '题库管理', }
// href: 'https://qa-center.ezijing.com?project_tag=marywood_plus' ]
// }, },
// { {
// icon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_4.png', attrs: { style: 'flex: 0 0 194px;' },
// hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_4_4_hover.png', title: '职业技能培训',
// title: '考务管理', items: [
// href: 'https://qa-center.ezijing.com/exam?project_tag=marywood_plus' {
// } icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_3_1.png',
// ] hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_3_1_hover.png',
], title: '数字职业技能培训中心',
rightItems: [ href: 'https://vst-saas.ezijing.com'
[ }
{
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',
title: '课程学习',
href: 'https://marywood-learning.ezijing.com'
}
]
// [
// {
// 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',
// title: '在线考试',
// onClick() {
// ElMessage({ message: '当前暂无考试' })
// }
// }
// ]
] ]
} }
], ],
[ [
{ {
title: '实习就业', title: '1+X技能认证',
leftItems: [ items: [
[ {
{ icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_4.png',
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_5_1.png', hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_4_hover.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_5_1_hover.png', title: '1+X教学平台',
title: '实习就业平台', href: 'https://x-admin.ezijing.com'
href: 'https://www.ezijing.com/services/employment' },
} {
] icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_1.png',
] hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_1_hover.png',
}, title: '1+X院校管理',
{ href: 'https://project-center.ezijing.com'
className: 'is-blue', },
title: '数字经济实验室', {
leftItems: [ icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_2.png',
[ hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_2_hover.png',
{ title: '1+X教务管理',
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_1.png', href: 'https://x-admin.ezijing.com'
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_1_hover.png', },
title: '商业数据分析实验室', {
href: 'http://114.242.229.132:18080/bi' icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_3.png',
}, hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_3_hover.png',
{ title: '1+X考务管理',
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_2.png', href: 'https://qa-center.ezijing.com/exam?project_tag=x1'
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_6_2_hover.png', },
title: '数字化营销平台', {
href: 'https://xtraining.ezijing.com' className: 'is-blue',
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',
title: '考试中心',
onClick() {
ElMessage({ message: '当前暂无考试' })
} }
] },
{
className: 'is-blue',
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_8.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_8_hover.png',
title: '模考练习',
href: 'https://x-learning.ezijing.com/exam/exam'
},
{
className: 'is-blue',
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_5.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_5_hover.png',
title: '金融产品营销<br />实训',
href: 'https://x-training.ezijing.com'
},
{
className: 'is-blue',
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_6.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_6_hover.png',
title: '金融产品数字化<br />营销学习',
href: 'https://x-learning.ezijing.com'
}
] ]
} }
] ]
...@@ -274,10 +194,10 @@ const rows = [ ...@@ -274,10 +194,10 @@ const rows = [
<template> <template>
<div class="home"> <div class="home">
<div class="home-inner"> <div class="home-inner">
<Total></Total> <!-- <Total></Total> -->
<template v-for="(row, index) in rows" :key="index"> <template v-for="(row, index) in rows" :key="index">
<section class="row"> <section class="row">
<div class="row-cell" v-for="(cell, i) in row" :key="i"> <div class="row-cell" v-bind="cell.attrs" v-for="(cell, i) in row" :key="i">
<Card :data="cell"></Card> <Card :data="cell"></Card>
</div> </div>
</section> </section>
...@@ -295,7 +215,7 @@ const rows = [ ...@@ -295,7 +215,7 @@ const rows = [
.home-inner { .home-inner {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
padding-top: 50px; padding-top: 20px;
overflow: hidden; overflow: hidden;
} }
.row { .row {
...@@ -304,6 +224,7 @@ const rows = [ ...@@ -304,6 +224,7 @@ const rows = [
} }
.row-cell { .row-cell {
flex: 1; flex: 1;
overflow: hidden;
} }
.row-cell + .row-cell { .row-cell + .row-cell {
margin-left: 20px; margin-left: 20px;
......
src/modules/index.ts
浏览文件 @ 05200e13
import type { Router } from 'vue-router' import type { Router, RouteRecordRaw } from 'vue-router'
import type { AppModule } from '@/types'
export default function ({ router }: { router: Router }) { export default function ({ router }: { router: Router }) {
const modules: Array<AppModule> = Object.values(import.meta.globEager('./**/index.ts')) const modules: Array<{ routes: Array<RouteRecordRaw> }> = Object.values(import.meta.globEager('./**/index.ts'))
modules.forEach(({ routes = [] }) => { modules.forEach(({ routes = [] }) => {
// 注册路由 // 注册路由
routes.forEach(route => { routes.forEach(route => {
......
src/types.ts
浏览文件 @ 05200e13
import type { RouteRecordRaw } from 'vue-router'
export interface UserState { export interface UserState {
id: string id: string
avatar: string avatar: string
...@@ -8,7 +6,3 @@ export interface UserState { ...@@ -8,7 +6,3 @@ export interface UserState {
nickname: string nickname: string
username: string username: string
} }
export interface AppModule {
routes: Array<RouteRecordRaw>
}
vite.config.ts
浏览文件 @ 05200e13
...@@ -9,7 +9,7 @@ import checker from 'vite-plugin-checker' ...@@ -9,7 +9,7 @@ import checker from 'vite-plugin-checker'
export default defineConfig(({ mode }) => { export default defineConfig(({ mode }) => {
return { return {
base: mode === 'prod' ? 'https://webapp-pub.ezijing.com/website/prod/sass/' : '/', base: mode === 'prod' ? 'https://webapp-pub.ezijing.com/website/prod/sass/' : '/',
plugins: [checker({ eslint: { lintCommand: 'eslint "./src/**/*.{vue,js,jsx,ts,tsx}"' } }), vue()], plugins: [checker({ vueTsc: true, eslint: { lintCommand: 'eslint "./src/**/*.{vue,js,jsx,ts,tsx}"' } }), vue()],
server: { server: {
open: true, open: true,
host: 'dev.ezijing.com', host: 'dev.ezijing.com',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论