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: () => ({}) } })
</script>
<template>
<AppCard :title="data.title" :class="data.className">
<AppCard :title="data.title">
<div class="box">
<div class="box-left">
<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>
<CardBoxCell v-for="(cell, index) in data.items" :data="cell" :key="index"></CardBoxCell>
</div>
</AppCard>
</template>
......@@ -25,37 +16,12 @@ defineProps({ data: { type: Object, default: () => ({}) } })
<style lang="scss">
.box {
display: flex;
}
.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;
}
padding: 10px 0;
}
.box-row {
display: flex;
}
.box-row + .box-row {
margin-top: 20px;
}
.box-cell + .box-cell {
margin-left: 20px;
}
.is-blue {
.app-card-hd__title {
border-color: #136ca8;
}
.box-cell:hover {
background-color: #136ca8;
}
}
// .box-cell + .box-cell {
// margin-left: 20px;
// }
</style>
src/modules/home/components/CardBoxCell.vue
浏览文件 @ 05200e13
......@@ -6,33 +6,20 @@ function handleClick() {
</script>
<template>
<div class="box-cell" v-if="data.href">
<div class="box-cell" :class="data.className" @click="handleClick">
<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>
<div class="box-cell-name" v-html="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;
......@@ -40,33 +27,43 @@ function handleClick() {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: inherit;
width: 100%;
height: 100%;
}
&:hover {
color: #fff;
box-shadow: 4px 3px 14px rgba(0, 0, 0, 0.37);
a {
color: #fff;
.box-cell-icon {
background-color: #aa1941;
box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.27);
}
.icon-normal {
display: none;
}
.icon-hover {
display: block;
display: unset;
}
}
&.is-blue {
&:hover {
.box-cell-icon {
background-color: #005690;
}
}
}
}
.box-cell-icon {
height: 46px;
width: 80px;
height: 80px;
background-color: #f7f5f5;
text-align: center;
line-height: 80px;
border-radius: 50%;
img {
height: 100%;
height: 34px;
object-fit: contain;
}
.icon-normal {
display: block;
display: unset;
}
.icon-hover {
display: none;
......@@ -77,5 +74,7 @@ function handleClick() {
font-size: 16px;
font-weight: 400;
line-height: 28px;
text-align: center;
white-space: nowrap;
}
</style>
src/modules/home/views/Index.vue
浏览文件 @ 05200e13
<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'
const rows = [
const rows: Record<string, any>[] = [
[
{
title: '产业学院/专业共建',
leftItems: [
[
{
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',
title: 'CMS资源系统',
href: 'https://course.ezijing.com'
items: [
{
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',
title: 'CMS资源系统',
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',
// 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: '暂未开放' })
}
},
{
className: 'is-blue',
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: '技能培训中心',
leftItems: [
[
{
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'
},
{
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教务管理',
href: 'https://x-admin.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',
title: '1+X考务管理',
href: 'https://qa-center.ezijing.com/exam?project_tag=x1'
},
{
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_4.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_4_hover.png',
title: '1+X教学平台',
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: '数字经济实验室',
items: [
{
className: 'is-blue',
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',
title: '商业数据分析实验室',
href: 'http://114.242.229.132:18080/bi'
},
{
className: 'is-blue',
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',
title: '数字化营销平台',
href: 'https://xtraining.ezijing.com'
}
]
},
{
attrs: { style: 'flex: 0 0 194px;' },
title: '实习就业',
items: [
{
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://www.ezijing.com/services/employment'
}
]
}
],
[
{
title: '国际在线学位',
leftItems: [
[
{
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',
title: '教学管理',
href: 'https://course.ezijing.com'
},
{
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',
title: '教务管理',
href: 'https://sofia-admin.ezijing.com'
}
]
// [
// {
// 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',
// 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: '当前暂无考试' })
// }
// }
// ]
items: [
{
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',
title: '教学管理',
href: 'https://course.ezijing.com'
},
{
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',
title: '教务管理',
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',
title: '课程学习',
href: 'https://sofia-learning.ezijing.com'
}
]
}
],
[
},
{
title: '国际留学',
leftItems: [
[
{
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',
title: '教学管理',
href: 'https://course.ezijing.com'
},
{
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',
title: '教务管理',
href: 'https://marywood-admin.ezijing.com'
}
]
// [
// {
// 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',
// title: '题库管理',
// href: 'https://qa-center.ezijing.com?project_tag=marywood_plus'
// },
// {
// 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',
// title: '考务管理',
// href: 'https://qa-center.ezijing.com/exam?project_tag=marywood_plus'
// }
// ]
],
rightItems: [
[
{
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: '当前暂无考试' })
// }
// }
// ]
items: [
{
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',
title: '教学管理',
href: 'https://course.ezijing.com'
},
{
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',
title: '教务管理',
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',
title: '课程学习',
href: 'https://marywood-learning.ezijing.com'
}
]
},
{
attrs: { style: 'flex: 0 0 194px;' },
title: '职业技能培训',
items: [
{
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: '数字职业技能培训中心',
href: 'https://vst-saas.ezijing.com'
}
]
}
],
[
{
title: '实习就业',
leftItems: [
[
{
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://www.ezijing.com/services/employment'
}
]
]
},
{
className: 'is-blue',
title: '数字经济实验室',
leftItems: [
[
{
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',
title: '商业数据分析实验室',
href: 'http://114.242.229.132:18080/bi'
},
{
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',
title: '数字化营销平台',
href: 'https://xtraining.ezijing.com'
title: '1+X技能认证',
items: [
{
icon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_4.png',
hoverIcon: 'https://webapp-pub.ezijing.com/project/saas/icon_2_4_hover.png',
title: '1+X教学平台',
href: 'https://x-admin.ezijing.com'
},
{
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'
},
{
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教务管理',
href: 'https://x-admin.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',
title: '1+X考务管理',
href: 'https://qa-center.ezijing.com/exam?project_tag=x1'
},
{
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 = [
<template>
<div class="home">
<div class="home-inner">
<Total></Total>
<!-- <Total></Total> -->
<template v-for="(row, index) in rows" :key="index">
<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>
</div>
</section>
......@@ -295,7 +215,7 @@ const rows = [
.home-inner {
width: 1200px;
margin: 0 auto;
padding-top: 50px;
padding-top: 20px;
overflow: hidden;
}
.row {
......@@ -304,6 +224,7 @@ const rows = [
}
.row-cell {
flex: 1;
overflow: hidden;
}
.row-cell + .row-cell {
margin-left: 20px;
......
src/modules/index.ts
浏览文件 @ 05200e13
import type { Router } from 'vue-router'
import type { AppModule } from '@/types'
import type { Router, RouteRecordRaw } from 'vue-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 = [] }) => {
// 注册路由
routes.forEach(route => {
......
src/types.ts
浏览文件 @ 05200e13
import type { RouteRecordRaw } from 'vue-router'
export interface UserState {
id: string
avatar: string
......@@ -8,7 +6,3 @@ export interface UserState {
nickname: string
username: string
}
export interface AppModule {
routes: Array<RouteRecordRaw>
}
vite.config.ts
浏览文件 @ 05200e13
......@@ -9,7 +9,7 @@ import checker from 'vite-plugin-checker'
export default defineConfig(({ mode }) => {
return {
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: {
open: true,
host: 'dev.ezijing.com',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论