Skip to content

P
project-online
提交 d9e1bfbf authored 作者: matian's avatar matian
浏览文件
操作

updates

上级 b26842a1
隐藏空白字符变更
内嵌 并排
正在显示 包含 7 行增加 和 534 行删除
src/components/layout/Aside.vue deleted 100644 → 0
浏览文件 @ b26842a1
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
interface IMenuItem {
name: string
path: string
children?: IMenuItem[]
}
const menuList: IMenuItem[] = [
{
name: '互联网营销师',
path: '/internet',
children: [
{ name: '职业介绍', path: '/internet/index' },
{ name: '课程介绍', path: '/internet/course' },
{ name: '课程大纲', path: '/internet/outline' },
{ name: '申请条件', path: '/internet/apply' }
]
},
{
name: '大数据技术人员',
path: '/bd',
children: [
{ name: '职业介绍', path: '/bd/index' },
{ name: '课程介绍', path: '/bd/course' },
{ name: '课程大纲', path: '/bd/outline' },
{ name: '申请条件', path: '/bd/apply' }
]
},
{
name: '工业机器人系统操作员',
path: '/robot',
children: [
{ name: '职业介绍', path: '/robot/index' },
{ name: '课程介绍', path: '/robot/course' },
{ name: '课程大纲', path: '/robot/outline' },
{ name: '申请条件', path: '/robot/apply' }
]
}
]
const defaultActive = computed(() => {
// 扁平菜单
const flatMenuList: IMenuItem[] = menuList.reduce((result: IMenuItem[], item) => {
result.push(item)
if (item.children) {
result = result.concat(item.children)
}
return result
}, [])
const found = flatMenuList.reverse().find(item => {
return route.path.includes(item.path)
})
return found ? found.path : '/'
})
</script>
<template>
<aside class="app-aside">
<nav class="nav">
<el-menu unique-opened :default-active="defaultActive" :router="true">
<template v-for="item in menuList" :key="item.path">
<el-sub-menu :index="item.path" v-if="item.children">
<template #title>
{{ item.name }}
</template>
<el-menu-item :index="subitem.path" v-for="subitem in item.children" :key="subitem.path">
{{ subitem.name }}
</el-menu-item>
</el-sub-menu>
<el-menu-item :index="item.path" v-else>
{{ item.name }}
</el-menu-item>
</template>
</el-menu>
</nav>
</aside>
</template>
<style lang="scss">
.app-aside {
width: 210px;
background: #fff;
border-right: 1px solid rgba(0, 0, 0, 0.12);
flex: 0 0 210px;
box-sizing: content-box;
}
.nav {
position: fixed;
width: 210px;
margin: 20px 0;
max-height: calc(100vh - 104px);
overflow-x: hidden;
overflow-y: auto;
.el-menu {
border-right: 0;
// i {
// margin-right: 14px;
// font-size: 24px;
// }
// .el-icon-arrow-down {
// margin-right: 0;
// font-size: 16px;
// }
}
// .el-menu-item {
// display: flex;
// align-items: center;
// margin: 0 16px;
// font-size: 16px;
// border-radius: 8px;
// }
// .el-submenu .el-menu-item {
// min-width: auto;
// padding-left: 58px !important;
// }
// .el-submenu__title {
// display: flex;
// align-items: center;
// margin: 0 16px;
// font-size: 16px;
// border-radius: 8px;
// &:hover {
// background-color: rgba(86, 100, 210, 0.04);
// }
// }
}
</style>
src/components/layout/Footer.vue deleted 100644 → 0
浏览文件 @ b26842a1
<template>
<footer class="app-footer">
<div class="app-footer-inner">
<div class="app-footer-left">
<router-link to="/" class="app-footer-logo">
<img src="https://zws-imgs-pub.ezijing.com/pc/base/ezijing-logo-white.svg" />
<h1 class="app-name">数字职业技能培训中心</h1>
</router-link>
<!-- pc -->
<div class="app-footer-link app-footer-link-pc">
<ul class="app-footer-link-item">
<li><a href="https://www.ezijing.com" target="_blank">清控紫荆教育</a></li>
<li><router-link to="/about">关于项目</router-link></li>
</ul>
<ul class="app-footer-link-item">
<li><router-link to="/internet">互联网营销师</router-link></li>
<li><router-link to="/robot">工业机器人系统操作员</router-link></li>
</ul>
<ul class="app-footer-link-item">
<li><router-link to="/bd">大数据技术人员</router-link></li>
<li><router-link to="/e-commerce">电子商务师</router-link></li>
</ul>
</div>
<!-- h5 -->
<div class="app-footer-link app-footer-link-h5">
<ul class="app-footer-link-item">
<li><a href="https://www.ezijing.com" target="_blank">清控紫荆教育</a></li>
<li><router-link to="/about">关于项目</router-link></li>
</ul>
<ul class="app-footer-link-item">
<li><router-link to="/internet">互联网营销师</router-link></li>
<li><router-link to="/robot">工业机器人系统操作员</router-link></li>
<li><router-link to="/bd">大数据技术人员</router-link></li>
<li><router-link to="/e-commerce">电子商务师</router-link></li>
</ul>
</div>
</div>
<div class="app-footer-contact">
<h2>联系我们</h2>
<dl>
<dt>地址</dt>
<dd>北京市海淀区中关村东路1号院清华科技园7号楼威盛大厦5层</dd>
</dl>
<dl>
<dt>联系电话</dt>
<dd><a href="tel:010-62793299">010-62793299</a></dd>
</dl>
<dl>
<dt>邮箱</dt>
<dd><a href="mailto:service@ezijing.com" class="mail">service@ezijing.com</a></dd>
</dl>
</div>
<div class="app-footer-qrcode">
<img src="https://webapp-pub.ezijing.com/project/marywood/officialAccount.jpeg" width="120" />
<div class="app-footer-qrcode-content">
<img src="https://zws-imgs-pub.ezijing.com/static/public/184235d9f6edbb39d52fc6f77339ff5b.png" width="20" />
<span>微信公众号</span>
</div>
</div>
</div>
</footer>
<div class="app-copyright" v-if="false">
<div class="app-copyright-inner">
<span>Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司</span>
<a target="_blank" href="https://tsm.miit.gov.cn/dxxzsp/">京ICP证150431号 </a>
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802023681">
<img src="https://zws-imgs-pub.ezijing.com/e0a0ec47dfdfc1e0797b1d5254021d00.png" />
安备 11010802023681号
</a>
<a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备15016866号-1</a>
</div>
</div>
</template>
<style lang="scss">
.app-footer {
background-color: #aa1941;
}
.app-footer-inner {
// max-width: 1200px;
margin: 0 auto;
padding: 50px 0;
display: flex;
color: rgba(237, 237, 237, 0.7);
}
.app-footer-left {
flex: 1;
.app-footer-logo {
display: flex;
align-items: center;
margin-bottom: 30px;
img {
height: 0.55rem;
}
}
.app-name {
margin-left: 14px;
padding: 0 14px;
font-size: 23px;
color: #fff;
line-height: 26px;
font-weight: 400;
letter-spacing: 2px;
white-space: nowrap;
border-left: 1px solid #fff;
}
}
.app-footer-link {
display: flex;
}
.app-footer-link-item {
font-size: 14px;
line-height: 30px;
letter-spacing: 3px;
}
.app-footer-link-item + .app-footer-link-item {
margin-left: 30px;
padding-left: 30px;
border-left: 1px solid #cc9d9d;
}
.app-footer-contact {
h2 {
font-size: 20px;
font-weight: normal;
line-height: 56px;
margin-bottom: 30px;
}
dl {
display: flex;
line-height: 30px;
}
dt {
width: 60px;
text-align-last: justify;
white-space: nowrap;
}
dd {
&::before {
content: '：';
}
}
}
.app-footer-qrcode {
margin-left: 80px;
}
.app-footer-qrcode-content {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
span {
margin-left: 10px;
}
}
.app-copyright {
background-color: #fff;
}
.app-copyright-inner {
// max-width: 1200px;
margin: 0 auto;
font-size: 12px;
line-height: 40px;
color: #999;
text-align: center;
a {
margin-left: 10px;
}
}
.app-footer-link-h5 {
display: none;
}
.is-h5 {
.app-footer-link-pc {
display: none;
}
.app-footer-link-h5 {
display: flex;
}
.app-footer-inner {
padding: 0.5rem 0.45rem;
flex-direction: column;
}
.app-footer-left {
.app-name {
font-size: 0.3rem;
line-height: 0.3rem;
}
}
.app-footer-link-item {
font-size: 0.22rem;
}
.app-footer-contact {
margin: 0.1rem 0;
h2 {
display: none;
}
}
.app-footer-qrcode {
display: none;
}
}
</style>
src/components/layout/Nav.vue deleted 100644 → 0
浏览文件 @ b26842a1
<script lang="ts" setup>
import TreeItem from './TreeItem.vue'
const navList = [
{ name: '中心介绍', path: '/about' },
{ name: '互联网营销师', path: '/internet' },
{ name: '工业机器人系统操作员', path: '/robot' },
{ name: '大数据技术人员', path: '/bd' },
{ name: '报名流程', path: '/process' }
]
</script>
<template>
<nav class="app-nav">
<div class="app-nav-inner">
<ul class="app-menu">
<TreeItem :item="item" v-for="(item, index) in navList" :key="index"></TreeItem>
</ul>
</div>
</nav>
</template>
<style lang="scss">
/** pc **/
.is-pc {
.app-nav {
border-top: 1px solid #ebebeb;
}
.app-nav-inner {
// max-width: 1200px;
margin: 0 auto;
}
.app-menu {
height: 72px;
display: flex;
align-items: center;
justify-content: space-between;
}
.app-menu > li {
position: relative;
> .cell {
font-size: 22px;
line-height: 72px;
color: #333;
}
> .tree-item-group {
margin-top: -4px;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top: 4px solid #aa1941;
}
}
.tree-item {
&:hover {
> .cell {
color: #aa1941;
}
> .tree-item-group {
display: block !important;
.tree-item {
padding: 18px 24px;
font-size: 16px;
color: #333;
white-space: nowrap;
&:hover,
&.is-active {
color: #aa1941;
}
}
}
}
&.is-active {
> .cell {
color: #aa1941;
}
}
}
.tree-item-group {
display: none;
position: absolute;
top: 100%;
left: 100%;
padding: 18px 0;
background-color: #fff;
box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
z-index: 1;
}
.tree-item-group .tree-item-group {
top: 0;
}
.cell-icon {
display: none;
}
}
.has-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
}
/** h5 **/
.is-h5 {
.app-nav {
min-height: 100vh;
display: none;
}
.has-menu .app-nav {
display: block;
}
.app-menu > li {
> .cell .cell-title {
font-size: 0.28rem;
font-weight: bold;
}
}
.app-nav-inner {
padding: 0.3rem;
}
.tree-item {
.cell {
display: flex;
align-items: center;
height: 1.02rem;
border-bottom: 1px solid #999;
color: #333;
}
.cell-title {
flex: 1;
font-size: 0.13rem;
font-weight: 400;
a {
display: flex;
align-items: center;
height: 0.52rem;
}
}
.cell-icon {
font-size: 0.14rem;
}
&.is-active {
> .cell {
color: #aa1941;
}
}
}
}
</style>
src/components/layout/TreeItem.vue deleted 100644 → 0
浏览文件 @ b26842a1
<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
interface IMenu {
path: string
name: string
children?: Array<IMenu>
}
const props = defineProps<{ item: IMenu }>()
const route = useRoute()
const isOpen = ref(false)
const isFolder = computed(() => !!props.item.children?.length)
const isActive = computed(
() => route.path.includes(props.item.path) || props.item.children?.find(child => route.path.includes(child.path))
)
function toggleVisible(event: Event) {
if (isFolder.value) {
event.preventDefault()
isOpen.value = !isOpen.value
}
}
</script>
<template>
<li class="tree-item" :class="{ 'is-active': isActive }">
<div class="cell" :class="{ bold: isFolder }" @click.capture="toggleVisible">
<div class="cell-title">
<router-link :to="item.path">{{ item.name }}</router-link>
</div>
<div class="cell-icon" v-if="isFolder">
<i class="el-icon-arrow-up" v-if="isOpen"></i>
<i class="el-icon-arrow-down" v-else></i>
</div>
</div>
<ul v-show="isOpen" v-if="isFolder" class="tree-item-group">
<tree-item v-for="(child, index) in item.children" :key="index" :item="child"></tree-item>
</ul>
</li>
</template>
src/modules/internet/components/CardQuery.vue
浏览文件 @ d9e1bfbf
...@@ -110,5 +110,6 @@ const handleSubmit = () => { ...@@ -110,5 +110,6 @@ const handleSubmit = () => {
font-weight: 400; font-weight: 400;
line-height: 18px; line-height: 18px;
color: #333333; color: #333333;
padding-bottom: 16px;
} }
</style> </style>
src/modules/internet/components/StudyLogin.vue
浏览文件 @ d9e1bfbf
...@@ -161,5 +161,6 @@ const handleTimeChange = () => { ...@@ -161,5 +161,6 @@ const handleTimeChange = () => {
line-height: 18px; line-height: 18px;
color: #333333; color: #333333;
text-align: center; text-align: center;
padding-bottom: 16px;
} }
</style> </style>
src/modules/internet/index.ts
浏览文件 @ d9e1bfbf
...@@ -3,9 +3,9 @@ import AppLayout from '@/components/layout/Index.vue' ...@@ -3,9 +3,9 @@ import AppLayout from '@/components/layout/Index.vue'
export const routes: Array<RouteRecordRaw> = [ export const routes: Array<RouteRecordRaw> = [
{ {
path: '/internet', path: '/home',
component: AppLayout, component: AppLayout,
redirect: '/internet/index', redirect: '/home/index',
children: [ children: [
{ path: 'index', component: () => import('./views/Index.vue') }, { path: 'index', component: () => import('./views/Index.vue') },
{ path: 'detail', component: () => import('./views/QueryDetail.vue') } { path: 'detail', component: () => import('./views/QueryDetail.vue') }
......
src/modules/internet/menus.ts deleted 100644 → 0
浏览文件 @ b26842a1
export default [
{ name: '职业介绍', path: '/internet/index' },
{ name: '课程介绍', path: '/internet/course' },
{ name: '课程大纲', path: '/internet/outline' },
{ name: '申请条件', path: '/internet/apply' }
]
src/modules/internet/views/Index.vue
浏览文件 @ d9e1bfbf
...@@ -114,6 +114,8 @@ function handleTabChange(index: number) { ...@@ -114,6 +114,8 @@ function handleTabChange(index: number) {
line-height: 1.5; line-height: 1.5;
color: #bababa; color: #bababa;
text-align: center; text-align: center;
padding-bottom: 21px;
margin-top: 15px;
} }
} }
} }
......
src/router/index.ts
浏览文件 @ d9e1bfbf
...@@ -7,7 +7,7 @@ const router = createRouter({ ...@@ -7,7 +7,7 @@ const router = createRouter({
return { top: 0 } return { top: 0 }
}, },
history: createWebHistory(), history: createWebHistory(),
routes: [{ path: '/:pathMatch(.*)*', redirect: '/internet/index' }] routes: [{ path: '/:pathMatch(.*)*', redirect: '/home/index' }]
}) })
// router.beforeEach((to, from, next) => { // router.beforeEach((to, from, next) => {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论