Skip to content

P
project-online
提交 1b2becb8 authored 作者: 王鹏飞's avatar 王鹏飞
浏览文件
操作

feat: 适配移动端

上级 4cdbcfce
隐藏空白字符变更
内嵌 并排
正在显示 包含 383 行增加 和 151 行删除
index.html
浏览文件 @ 1b2becb8
...@@ -9,6 +9,23 @@ ...@@ -9,6 +9,23 @@
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/> />
<title>紫荆教育数字职业技能培训中心</title> <title>紫荆教育数字职业技能培训中心</title>
<!-- <script>
;(function (win, doc) {
function resizeRoot() {
var wWidth =
screen.width > 0
? win.innerWidth >= screen.width || win.innerWidth == 0
? screen.width
: win.innerWidth
: win.innerWidth,
wFsize
wFsize = ((wWidth > 750 ? 750 : wWidth) / 375) * 100
doc.documentElement.style.fontSize = wFsize + 'px'
}
resizeRoot()
win.addEventListener('resize', resizeRoot, false)
})(window, document)
</script> -->
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
......
package.json
浏览文件 @ 1b2becb8
{ {
"name": "saas", "name": "project-online",
"version": "0.0.0", "version": "0.0.0",
"scripts": { "scripts": {
"dev": "vite --mode dev", "dev": "vite --mode dev",
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@vueuse/core": "^8.2.4", "@vueuse/core": "^8.2.5",
"axios": "^0.26.1", "axios": "^0.26.1",
"element-plus": "^2.1.8", "element-plus": "^2.1.8",
"pinia": "^2.0.13", "pinia": "^2.0.13",
...@@ -30,8 +30,8 @@ ...@@ -30,8 +30,8 @@
"ali-oss": "^6.17.1", "ali-oss": "^6.17.1",
"chalk": "^5.0.1", "chalk": "^5.0.1",
"eslint": "^8.12.0", "eslint": "^8.12.0",
"eslint-plugin-vue": "^8.5.0", "eslint-plugin-vue": "^8.6.0",
"sass": "^1.49.11", "sass": "^1.50.0",
"typescript": "~4.6.3", "typescript": "~4.6.3",
"vite": "^2.9.1", "vite": "^2.9.1",
"vite-plugin-checker": "^0.4.5", "vite-plugin-checker": "^0.4.5",
......
pnpm-lock.yaml
浏览文件 @ 1b2becb8
...@@ -6,15 +6,15 @@ specifiers: ...@@ -6,15 +6,15 @@ specifiers:
'@vitejs/plugin-vue': ^2.3.1 '@vitejs/plugin-vue': ^2.3.1
'@vue/eslint-config-typescript': ^10.0.0 '@vue/eslint-config-typescript': ^10.0.0
'@vue/tsconfig': ^0.1.3 '@vue/tsconfig': ^0.1.3
'@vueuse/core': ^8.2.4 '@vueuse/core': ^8.2.5
ali-oss: ^6.17.1 ali-oss: ^6.17.1
axios: ^0.26.1 axios: ^0.26.1
chalk: ^5.0.1 chalk: ^5.0.1
element-plus: ^2.1.8 element-plus: ^2.1.8
eslint: ^8.12.0 eslint: ^8.12.0
eslint-plugin-vue: ^8.5.0 eslint-plugin-vue: ^8.6.0
pinia: ^2.0.13 pinia: ^2.0.13
sass: ^1.49.11 sass: ^1.50.0
swiper: ^8.0.7 swiper: ^8.0.7
typescript: ~4.6.3 typescript: ~4.6.3
vite: ^2.9.1 vite: ^2.9.1
...@@ -24,7 +24,7 @@ specifiers: ...@@ -24,7 +24,7 @@ specifiers:
vue-tsc: ^0.33.9 vue-tsc: ^0.33.9
dependencies: dependencies:
'@vueuse/core': 8.2.4_vue@3.2.31 '@vueuse/core': 8.2.5_vue@3.2.31
axios: 0.26.1 axios: 0.26.1
element-plus: 2.1.8_vue@3.2.31 element-plus: 2.1.8_vue@3.2.31
pinia: 2.0.13_typescript@4.6.3+vue@3.2.31 pinia: 2.0.13_typescript@4.6.3+vue@3.2.31
...@@ -36,15 +36,15 @@ devDependencies: ...@@ -36,15 +36,15 @@ devDependencies:
'@rushstack/eslint-patch': 1.1.1 '@rushstack/eslint-patch': 1.1.1
'@types/node': 17.0.23 '@types/node': 17.0.23
'@vitejs/plugin-vue': 2.3.1_vite@2.9.1+vue@3.2.31 '@vitejs/plugin-vue': 2.3.1_vite@2.9.1+vue@3.2.31
'@vue/eslint-config-typescript': 10.0.0_472ac59a1665d7276ffa7649fe6f1d6e '@vue/eslint-config-typescript': 10.0.0_324c71289bd52a05964d00266adebb09
'@vue/tsconfig': 0.1.3_@types+node@17.0.23 '@vue/tsconfig': 0.1.3_@types+node@17.0.23
ali-oss: 6.17.1 ali-oss: 6.17.1
chalk: 5.0.1 chalk: 5.0.1
eslint: 8.12.0 eslint: 8.12.0
eslint-plugin-vue: 8.5.0_eslint@8.12.0 eslint-plugin-vue: 8.6.0_eslint@8.12.0
sass: 1.49.11 sass: 1.50.0
typescript: 4.6.3 typescript: 4.6.3
vite: 2.9.1_sass@1.49.11 vite: 2.9.1_sass@1.50.0
vite-plugin-checker: 0.4.5_vite@2.9.1 vite-plugin-checker: 0.4.5_vite@2.9.1
vue-tsc: 0.33.9_typescript@4.6.3 vue-tsc: 0.33.9_typescript@4.6.3
...@@ -306,7 +306,7 @@ packages: ...@@ -306,7 +306,7 @@ packages:
vite: ^2.5.10 vite: ^2.5.10
vue: ^3.2.25 vue: ^3.2.25
dependencies: dependencies:
vite: 2.9.1_sass@1.49.11 vite: 2.9.1_sass@1.50.0
vue: 3.2.31 vue: 3.2.31
dev: true dev: true
...@@ -407,7 +407,7 @@ packages: ...@@ -407,7 +407,7 @@ packages:
resolution: {integrity: sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==} resolution: {integrity: sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==}
dev: false dev: false
/@vue/eslint-config-typescript/10.0.0_472ac59a1665d7276ffa7649fe6f1d6e: /@vue/eslint-config-typescript/10.0.0_324c71289bd52a05964d00266adebb09:
resolution: {integrity: sha512-F94cL8ug3FaYXlCfU5/wiGjk1qeadmoBpRGAOBq+qre3Smdupa59dd6ZJrsfRODpsMPyTG7330juMDsUvpZ3Rw==} resolution: {integrity: sha512-F94cL8ug3FaYXlCfU5/wiGjk1qeadmoBpRGAOBq+qre3Smdupa59dd6ZJrsfRODpsMPyTG7330juMDsUvpZ3Rw==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
...@@ -417,7 +417,7 @@ packages: ...@@ -417,7 +417,7 @@ packages:
'@typescript-eslint/eslint-plugin': 5.18.0_a07dca3bdfc4bfa60f4dda0c1f9e3287 '@typescript-eslint/eslint-plugin': 5.18.0_a07dca3bdfc4bfa60f4dda0c1f9e3287
'@typescript-eslint/parser': 5.18.0_eslint@8.12.0+typescript@4.6.3 '@typescript-eslint/parser': 5.18.0_eslint@8.12.0+typescript@4.6.3
eslint: 8.12.0 eslint: 8.12.0
eslint-plugin-vue: 8.5.0_eslint@8.12.0 eslint-plugin-vue: 8.6.0_eslint@8.12.0
vue-eslint-parser: 8.3.0_eslint@8.12.0 vue-eslint-parser: 8.3.0_eslint@8.12.0
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
...@@ -477,8 +477,8 @@ packages: ...@@ -477,8 +477,8 @@ packages:
'@types/node': 17.0.23 '@types/node': 17.0.23
dev: true dev: true
/@vueuse/core/8.2.4_vue@3.2.31: /@vueuse/core/8.2.5_vue@3.2.31:
resolution: {integrity: sha512-K8DbVLErlHMnEOqy67BrRbDmWCd4Z9X0a1dL6fQdhABLXBydy69Tm7uF5ZUotAqib9sskItYFsAnLhvGSue6bg==} resolution: {integrity: sha512-5prZAA1Ji2ltwNUnzreu6WIXYqHYP/9U2BiY5mD/650VYLpVcwVlYznJDFcLCmEWI3o3Vd34oS1FUf+6Mh68GQ==}
peerDependencies: peerDependencies:
'@vue/composition-api': ^1.1.0 '@vue/composition-api': ^1.1.0
vue: ^2.6.0 || ^3.2.0 vue: ^2.6.0 || ^3.2.0
...@@ -488,18 +488,18 @@ packages: ...@@ -488,18 +488,18 @@ packages:
vue: vue:
optional: true optional: true
dependencies: dependencies:
'@vueuse/metadata': 8.2.4 '@vueuse/metadata': 8.2.5
'@vueuse/shared': 8.2.4_vue@3.2.31 '@vueuse/shared': 8.2.5_vue@3.2.31
vue: 3.2.31 vue: 3.2.31
vue-demi: 0.12.5_vue@3.2.31 vue-demi: 0.12.5_vue@3.2.31
dev: false dev: false
/@vueuse/metadata/8.2.4: /@vueuse/metadata/8.2.5:
resolution: {integrity: sha512-mn4FLULZAHd6r6vo5hLz+99xzwlVDP9qeVtZGV2Ik40m0zETe2okUr3O1Yoz6FReUoc7KAPrf0/GFpWEXVDAnQ==} resolution: {integrity: sha512-Lk9plJjh9cIdiRdcj16dau+2LANxIdFCiTgdfzwYXbflxq0QnMBeOD2qHgKDE7fuVrtPcVWj8VSuZEx1HRfNQA==}
dev: false dev: false
/@vueuse/shared/8.2.4_vue@3.2.31: /@vueuse/shared/8.2.5_vue@3.2.31:
resolution: {integrity: sha512-sLkuZMEumsmEDYie3m6/nrk7SrLGlyUgtVn/0EJZ8Chaj1YfSmBQuLxNE0ruQ/6VZlqkx44jEZxcgbU7qPyAiw==} resolution: {integrity: sha512-lNWo+7sk6JCuOj4AiYM+6HZ6fq4xAuVq1sVckMQKgfCJZpZRe4i8es+ZULO5bYTKP+VrOCtqrLR2GzEfrbr3YQ==}
peerDependencies: peerDependencies:
'@vue/composition-api': ^1.1.0 '@vue/composition-api': ^1.1.0
vue: ^2.6.0 || ^3.2.0 vue: ^2.6.0 || ^3.2.0
...@@ -915,7 +915,7 @@ packages: ...@@ -915,7 +915,7 @@ packages:
'@element-plus/icons-vue': 1.1.4_vue@3.2.31 '@element-plus/icons-vue': 1.1.4_vue@3.2.31
'@floating-ui/dom': 0.4.4 '@floating-ui/dom': 0.4.4
'@popperjs/core': 2.11.5 '@popperjs/core': 2.11.5
'@vueuse/core': 8.2.4_vue@3.2.31 '@vueuse/core': 8.2.5_vue@3.2.31
async-validator: 4.0.7 async-validator: 4.0.7
dayjs: 1.11.0 dayjs: 1.11.0
escape-html: 1.0.3 escape-html: 1.0.3
...@@ -1155,8 +1155,8 @@ packages: ...@@ -1155,8 +1155,8 @@ packages:
source-map: 0.6.1 source-map: 0.6.1
dev: true dev: true
/eslint-plugin-vue/8.5.0_eslint@8.12.0: /eslint-plugin-vue/8.6.0_eslint@8.12.0:
resolution: {integrity: sha512-i1uHCTAKOoEj12RDvdtONWrGzjFm/djkzqfhmQ0d6M/W8KM81mhswd/z+iTZ0jCpdUedW3YRgcVfQ37/J4zoYQ==} resolution: {integrity: sha512-abXiF2J18n/7ZPy9foSlJyouKf54IqpKlNvNmzhM93N0zs3QUxZG/oBd3tVPOJTKg7SlhBUtPxugpqzNbgGpQQ==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies: peerDependencies:
eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 eslint: ^6.2.0 || ^7.0.0 || ^8.0.0
...@@ -2215,8 +2215,8 @@ packages: ...@@ -2215,8 +2215,8 @@ packages:
resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
dev: true dev: true
/sass/1.49.11: /sass/1.50.0:
resolution: {integrity: sha512-wvS/geXgHUGs6A/4ud5BFIWKO1nKd7wYIGimDk4q4GFkJicILActpv9ueMT4eRGSsp1BdKHuw1WwAHXbhsJELQ==} resolution: {integrity: sha512-cLsD6MEZ5URXHStxApajEh7gW189kkjn4Rc8DQweMyF+o5HF5nfEz8QYLMlPsTOD88DknatTmBWkOcw5/LnJLQ==}
engines: {node: '>=12.0.0'} engines: {node: '>=12.0.0'}
hasBin: true hasBin: true
dependencies: dependencies:
...@@ -2578,14 +2578,14 @@ packages: ...@@ -2578,14 +2578,14 @@ packages:
npm-run-path: 4.0.1 npm-run-path: 4.0.1
strip-ansi: 6.0.1 strip-ansi: 6.0.1
tiny-invariant: 1.2.0 tiny-invariant: 1.2.0
vite: 2.9.1_sass@1.49.11 vite: 2.9.1_sass@1.50.0
vscode-languageclient: 7.0.0 vscode-languageclient: 7.0.0
vscode-languageserver: 7.0.0 vscode-languageserver: 7.0.0
vscode-languageserver-textdocument: 1.0.4 vscode-languageserver-textdocument: 1.0.4
vscode-uri: 3.0.3 vscode-uri: 3.0.3
dev: true dev: true
/vite/2.9.1_sass@1.49.11: /vite/2.9.1_sass@1.50.0:
resolution: {integrity: sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==} resolution: {integrity: sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==}
engines: {node: '>=12.2.0'} engines: {node: '>=12.2.0'}
hasBin: true hasBin: true
...@@ -2605,7 +2605,7 @@ packages: ...@@ -2605,7 +2605,7 @@ packages:
postcss: 8.4.12 postcss: 8.4.12
resolve: 1.22.0 resolve: 1.22.0
rollup: 2.70.1 rollup: 2.70.1
sass: 1.49.11 sass: 1.50.0
optionalDependencies: optionalDependencies:
fsevents: 2.3.2 fsevents: 2.3.2
dev: true dev: true
......
src/assets/css/base.css
浏览文件 @ 1b2becb8
html * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body, body,
h1, h1,
h2, h2,
...@@ -84,6 +76,7 @@ textarea:focus { ...@@ -84,6 +76,7 @@ textarea:focus {
outline: 0; outline: 0;
} }
body { body {
min-width: 375px;
font-size: 14px; font-size: 14px;
background-color: #f9f8f8; background-color: #f9f8f8;
} }
...@@ -96,6 +89,6 @@ body { ...@@ -96,6 +89,6 @@ body {
@media (max-width: 768px) { @media (max-width: 768px) {
html { html {
font-size: 40px; font-size: 50px;
} }
} }
src/assets/css/channel.scss
浏览文件 @ 1b2becb8
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
display: flex; display: flex;
} }
dl + dl { dl + dl {
margin-top: 50px; margin-top: 0.5rem;
} }
dt { dt {
img { img {
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
color: #424242; color: #424242;
} }
p + p { p + p {
margin-top: 20px; margin-top: 0.2rem;
} }
} }
} }
...@@ -54,18 +54,55 @@ ...@@ -54,18 +54,55 @@
th { th {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
line-height: 60px; line-height: 0.6rem;
text-align: center; text-align: center;
} }
td { td {
padding: 18px; padding: 18px;
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
border: 1px solid #8b8b8b; border: 1px solid #ddd;
} }
h2 { h2 {
font-size: 18px; font-size: 18px;
padding: 30px 0; padding: 0.3rem 0;
color: #aa1941; color: #aa1941;
} }
} }
.is-h5 {
.course {
padding: 0.26rem 0.32rem;
background-color: #fff;
dt {
img {
width: 0.34rem;
}
}
dd {
margin-left: 0.34rem;
h4 {
font-size: 0.28rem;
}
p {
font-size: 0.24rem;
line-height: 0.4rem;
}
}
}
.outline {
margin: 0;
padding: 0.26rem 0.32rem;
background-color: #fff;
th {
font-size: 0.24rem;
}
td {
padding: 0.24rem;
font-size: 0.22rem;
}
h2 {
font-size: 0.28rem;
}
}
}
src/components/base/AppCard.vue
浏览文件 @ 1b2becb8
...@@ -16,7 +16,7 @@ defineProps<{ title?: string }>() ...@@ -16,7 +16,7 @@ defineProps<{ title?: string }>()
</div> </div>
</template> </template>
<style> <style lang="scss">
.app-card { .app-card {
margin: 70px 0; margin: 70px 0;
} }
...@@ -30,4 +30,27 @@ defineProps<{ title?: string }>() ...@@ -30,4 +30,27 @@ defineProps<{ title?: string }>()
line-height: 1; line-height: 1;
color: #424242; color: #424242;
} }
.is-h5 {
.app-card {
margin: 0.4rem 0.3rem;
}
.app-card-hd {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.3rem;
}
.app-card-hd__title {
flex: 1;
border-left: 0.06rem solid #aa1941;
padding-left: 0.1rem;
font-size: 0.3rem;
font-weight: bold;
line-height: 1;
}
.app-card-hd__aside {
font-size: 0.2rem;
color: #9b9b9b;
}
}
</style> </style>
src/components/base/AppContainer.vue
浏览文件 @ 1b2becb8
...@@ -113,7 +113,7 @@ function genClassName(menu: IMenu) { ...@@ -113,7 +113,7 @@ function genClassName(menu: IMenu) {
} }
li { li {
margin-left: 22px; margin-left: 22px;
font-size: 12px; font-size: 14px;
line-height: 34px; line-height: 34px;
color: #666; color: #666;
white-space: nowrap; white-space: nowrap;
...@@ -130,17 +130,18 @@ function genClassName(menu: IMenu) { ...@@ -130,17 +130,18 @@ function genClassName(menu: IMenu) {
} }
} }
.app-container-inner { .app-container-inner {
margin: 0.3rem;
.article { .article {
img { img {
max-width: 100%; max-width: 100%;
} }
p { p {
font-size: 16px; font-size: 12px;
line-height: 32px; line-height: 20px;
color: #666; color: #666;
} }
p + p { p + p {
margin-top: 20px; margin-top: 10px;
} }
} }
} }
......
src/components/layout/Footer.vue
浏览文件 @ 1b2becb8
...@@ -3,10 +3,11 @@ ...@@ -3,10 +3,11 @@
<div class="app-footer-inner"> <div class="app-footer-inner">
<div class="app-footer-left"> <div class="app-footer-left">
<router-link to="/" class="app-footer-logo"> <router-link to="/" class="app-footer-logo">
<img src="https://zws-imgs-pub.ezijing.com/pc/base/ezijing-logo-white.svg" height="56" /> <img src="https://zws-imgs-pub.ezijing.com/pc/base/ezijing-logo-white.svg" />
<h1 class="app-name">数字职业技能培训中心</h1> <h1 class="app-name">数字职业技能培训中心</h1>
</router-link> </router-link>
<div class="app-footer-link"> <!-- pc -->
<div class="app-footer-link app-footer-link-pc">
<ul class="app-footer-link-item"> <ul class="app-footer-link-item">
<li><a href="https://www.ezijing.com" target="_blank">清控紫荆教育</a></li> <li><a href="https://www.ezijing.com" target="_blank">清控紫荆教育</a></li>
<li><router-link to="/about">关于项目</router-link></li> <li><router-link to="/about">关于项目</router-link></li>
...@@ -20,6 +21,19 @@ ...@@ -20,6 +21,19 @@
<li><router-link to="/e-commerce">电子商务师</router-link></li> <li><router-link to="/e-commerce">电子商务师</router-link></li>
</ul> </ul>
</div> </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>
<div class="app-footer-contact"> <div class="app-footer-contact">
<h2>联系我们</h2> <h2>联系我们</h2>
...@@ -63,7 +77,7 @@ ...@@ -63,7 +77,7 @@
background-color: #aa1941; background-color: #aa1941;
} }
.app-footer-inner { .app-footer-inner {
width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 50px 0; padding: 50px 0;
display: flex; display: flex;
...@@ -75,6 +89,9 @@ ...@@ -75,6 +89,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
img {
height: 0.55rem;
}
} }
.app-name { .app-name {
margin-left: 14px; margin-left: 14px;
...@@ -84,6 +101,7 @@ ...@@ -84,6 +101,7 @@
line-height: 26px; line-height: 26px;
font-weight: 400; font-weight: 400;
letter-spacing: 2px; letter-spacing: 2px;
white-space: nowrap;
border-left: 1px solid #fff; border-left: 1px solid #fff;
} }
} }
...@@ -148,4 +166,37 @@ ...@@ -148,4 +166,37 @@
margin-left: 10px; 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> </style>
src/components/layout/Header.vue
浏览文件 @ 1b2becb8
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useUserStore } from '@/stores/user' import { useUserStore } from '@/stores/user'
import { useRoute } from 'vue-router'
import AppNav from './Nav.vue' import AppNav from './Nav.vue'
const route = useRoute()
const user = useUserStore() const user = useUserStore()
const LOGINURL = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}` const LOGINURL = `${import.meta.env.VITE_LOGIN_URL}?rd=${encodeURIComponent(location.href)}`
// 菜单控制
const menuVisible = ref<boolean>(false)
function toggleMenu() {
menuVisible.value = !menuVisible.value
}
watch(route, () => {
menuVisible.value = false
})
const classNames = computed(() => {
return {
'has-menu': menuVisible.value
}
})
// 退出登录 // 退出登录
function handleLogout() { function handleLogout() {
user.logout().then(() => { user.logout().then(() => {
...@@ -14,7 +30,7 @@ function handleLogout() { ...@@ -14,7 +30,7 @@ function handleLogout() {
</script> </script>
<template> <template>
<header class="app-header"> <header class="app-header" :class="classNames">
<div class="app-header-inner"> <div class="app-header-inner">
<div class="app-header-left"> <div class="app-header-left">
<router-link to="/" class="logo"> <router-link to="/" class="logo">
...@@ -22,7 +38,10 @@ function handleLogout() { ...@@ -22,7 +38,10 @@ function handleLogout() {
<h1 class="app-name">数字职业技能培训中心</h1> <h1 class="app-name">数字职业技能培训中心</h1>
</router-link> </router-link>
</div> </div>
<div class="app-header-right">中文</div> <div class="app-header-right">
<div class="language">中文</div>
<div class="menu" @click="toggleMenu"></div>
</div>
<div class="app-header-right" v-if="false"> <div class="app-header-right" v-if="false">
<template v-if="user.isLogin"> <template v-if="user.isLogin">
你好，{{ user.userName }} <span class="app-header-logout" @click="handleLogout">退出</span> 你好，{{ user.userName }} <span class="app-header-logout" @click="handleLogout">退出</span>
...@@ -51,17 +70,18 @@ function handleLogout() { ...@@ -51,17 +70,18 @@ function handleLogout() {
color: #aa1941; color: #aa1941;
} }
.app-header-left { .app-header-left {
flex: 1;
.logo { .logo {
display: flex; display: flex;
align-items: center; align-items: center;
img { img {
height: 0.6rem; height: 0.5rem;
} }
} }
.app-name { .app-name {
margin-left: 0.28rem; margin-left: 0.28rem;
padding: 0 0.2rem; padding: 0 0.2rem;
font-size: 0.23rem; font-size: 0.26rem;
line-height: 0.26rem; line-height: 0.26rem;
font-weight: 400; font-weight: 400;
letter-spacing: 2px; letter-spacing: 2px;
...@@ -82,7 +102,24 @@ function handleLogout() { ...@@ -82,7 +102,24 @@ function handleLogout() {
} }
.is-h5 { .is-h5 {
.app-header-inner { .app-header-inner {
padding: 14px 12px; padding: 0.32rem 0.3rem;
box-shadow: 0 0 15px rgb(0 0 0 / 14%);
}
.language {
display: none;
}
.menu {
width: 0.36rem;
height: 0.36rem;
padding: 5px 10px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAh1BMVEUAAABAQEBgYGBVVVVgYGBmZmZoaGhgYGBgYGBlZWVlZWVjY2NjY2NmZmZkZGRlZWVkZGRmZmZjY2NmZmZlZWVmZmZmZmZlZWVmZmZlZWVmZmZmZmZlZWVlZWVmZmZmZmZlZWVmZmZlZWVlZWVmZmZmZmZmZmZlZWVmZmZmZmZlZWVmZmZmZmZgwHa9AAAALHRSTlMABAgMEBQbICgrMENIS09TVF9kZ2hrbG9zd3t/l5+jp6uvu8PD09fb3+vv86pHCLIAAACcSURBVBgZ7cHHFoJAEATAhkUx5wCsOYE6//99nvum/TxwmCo4107JuIqCaQaWXk3T5CCFqY4gB1PVIJWpziDhbppnDyxdRMWmA+eca6mwjIptFyx7mObVB4mmOoMcTFWDFKY6gqQ30zQ5WDIq4++qWYBzzrmvDeeKSQBLLqZpcpC1qU4ge1M1IKWpLiDhbpr3ACysdntBkcO5f/kAGgG16eBu+akAAAAASUVORK5CYII=')
no-repeat center;
background-size: 0.36rem 0.36rem;
cursor: pointer;
}
.has-menu .menu {
background: url('https://webapp-pub.ezijing.com/www/h5/images/icon_close.png') no-repeat center;
background-size: 16px 16px;
} }
} }
</style> </style>
src/components/layout/Nav.vue
浏览文件 @ 1b2becb8
...@@ -22,74 +22,84 @@ const navList = [ ...@@ -22,74 +22,84 @@ const navList = [
<style lang="scss"> <style lang="scss">
/** pc **/ /** pc **/
.app-nav { .is-pc {
border-top: 1px solid #ebebeb; .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 { .app-nav-inner {
margin-top: -4px; max-width: 1200px;
top: 100%; margin: 0 auto;
left: 50%;
transform: translateX(-50%);
border-top: 4px solid #aa1941;
} }
} .app-menu {
.tree-item { height: 72px;
&:hover { display: flex;
align-items: center;
justify-content: space-between;
}
.app-menu > li {
position: relative;
> .cell { > .cell {
color: #aa1941; font-size: 22px;
line-height: 72px;
color: #333;
} }
> .tree-item-group { > .tree-item-group {
display: block !important; margin-top: -4px;
.tree-item { top: 100%;
padding: 18px 24px; left: 50%;
font-size: 16px; transform: translateX(-50%);
color: #333; border-top: 4px solid #aa1941;
white-space: nowrap; }
&:hover, }
&.is-active { .tree-item {
color: #aa1941; &: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 {
&.is-active { > .cell {
> .cell { color: #aa1941;
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;
}
} }
.tree-item-group { .has-menu {
display: none; position: fixed;
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; top: 0;
} left: 0;
.cell-icon { right: 0;
display: none; bottom: 0;
overflow-y: auto;
} }
/** h5 **/ /** h5 **/
.is-h5 { .is-h5 {
...@@ -102,25 +112,25 @@ const navList = [ ...@@ -102,25 +112,25 @@ const navList = [
} }
.app-menu > li { .app-menu > li {
> .cell .cell-title { > .cell .cell-title {
font-size: 0.14rem; font-size: 0.28rem;
font-weight: 700; font-weight: bold;
} }
} }
.app-nav-inner { .app-nav-inner {
padding: 0.1rem; padding: 0.3rem;
} }
.tree-item { .tree-item {
.cell { .cell {
display: flex; display: flex;
align-items: center; align-items: center;
height: 0.52rem; height: 1.02rem;
border-bottom: 1px solid #999; border-bottom: 1px solid #999;
color: #333;
} }
.cell-title { .cell-title {
flex: 1; flex: 1;
font-size: 0.13rem; font-size: 0.13rem;
font-weight: 400; font-weight: 400;
color: #333;
a { a {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -130,6 +140,11 @@ const navList = [ ...@@ -130,6 +140,11 @@ const navList = [
.cell-icon { .cell-icon {
font-size: 0.14rem; font-size: 0.14rem;
} }
&.is-active {
> .cell {
color: #aa1941;
}
}
} }
} }
</style> </style>
src/modules/bd/views/Course.vue
浏览文件 @ 1b2becb8
...@@ -48,10 +48,7 @@ import menus from '../menus' ...@@ -48,10 +48,7 @@ import menus from '../menus'
<dt><img src="https://webapp-pub.ezijing.com/project/vst/icon_kcjs_05.png" /></dt> <dt><img src="https://webapp-pub.ezijing.com/project/vst/icon_kcjs_05.png" /></dt>
<dd> <dd>
<h4>学习内容</h4> <h4>学习内容</h4>
<p> <p>该职业从业者应具备的相关知识和技能，本课程难点是大数据数据库、大数据处理与挖掘。</p>
本课程形式为PPT+语音，共包含40个视频，由刘斌老师讲授，刘老师副教授职称，主攻方向为网络信息安全，曾经带领学生在全国大学生软件测试大赛“web安全”赛项荣获特等奖。
</p>
<p>本课程难点是大数据数据库、大数据处理与挖掘。</p>
</dd> </dd>
</dl> </dl>
</div> </div>
......
src/modules/home/components/Banner.vue
浏览文件 @ 1b2becb8
<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
const list = [{ url: 'https://webapp-pub.ezijing.com/project/vst/banner.png' }]
</script>
<template> <template>
<div class="banner"> <div class="banner">
<img src="https://webapp-pub.ezijing.com/project/vst/banner.png" /> <Swiper autoplay>
<SwiperSlide v-for="(item, index) in list" :key="index">
<img :src="item.url" />
</SwiperSlide>
</Swiper>
</div> </div>
</template> </template>
......
src/modules/home/components/Category.vue
浏览文件 @ 1b2becb8
...@@ -7,24 +7,27 @@ const list = [ ...@@ -7,24 +7,27 @@ const list = [
{ url: 'https://webapp-pub.ezijing.com/www/pc/services/dataAnalysis/hy_03.png', title: '新媒体运营类' }, { url: 'https://webapp-pub.ezijing.com/www/pc/services/dataAnalysis/hy_03.png', title: '新媒体运营类' },
{ url: 'https://webapp-pub.ezijing.com/www/pc/services/dataAnalysis/hy_04.png', title: '品牌运营类' } { url: 'https://webapp-pub.ezijing.com/www/pc/services/dataAnalysis/hy_04.png', title: '品牌运营类' }
] ]
// 修复swiper的bug
// https://github.com/nolimits4web/swiper/issues/2942
const fixSwiperList = [...list, ...list]
</script> </script>
<template> <template>
<AppCard title="重心方向"> <AppCard title="重心方向">
<swiper slides-per-view="auto" :space-between="12" loop> <Swiper slides-per-view="auto" :space-between="12" loop :loopedSlides="fixSwiperList.length">
<swiper-slide v-for="(item, index) in list" :key="index" class="category-item"> <SwiperSlide v-for="(item, index) in fixSwiperList" :key="index" class="category-item">
<img :src="item.url" /> <img :src="item.url" />
<p>{{ item.title }}</p> <p>{{ item.title }}</p>
</swiper-slide> </SwiperSlide>
</swiper> </Swiper>
</AppCard> </AppCard>
</template> </template>
<style lang="scss"> <style lang="scss">
.category-item { .category-item {
position: relative; position: relative;
width: 176px; width: 1.76rem;
height: 224px; height: 2.24rem;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
img { img {
...@@ -44,12 +47,20 @@ const list = [ ...@@ -44,12 +47,20 @@ const list = [
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: 1; z-index: 1;
font-size: 17px; font-size: 0.17rem;
font-weight: 500; font-weight: 500;
color: #fff; color: #fff;
line-height: 224px; line-height: 2.24rem;
text-align: center; text-align: center;
background: rgba(51, 51, 51, 0.4); background: rgba(51, 51, 51, 0.4);
} }
} }
.is-h5 {
.category-item {
p {
font-size: 0.2rem;
font-weight: 400;
}
}
}
</style> </style>
src/modules/home/components/CooperationAreas.vue
浏览文件 @ 1b2becb8
...@@ -61,7 +61,7 @@ const list = [ ...@@ -61,7 +61,7 @@ const list = [
justify-content: center; justify-content: center;
color: #424242; color: #424242;
background: #fff; background: #fff;
border-radius: 5px; border-radius: 0.05rem;
overflow: hidden; overflow: hidden;
.cooperate-icon-hover { .cooperate-icon-hover {
display: none; display: none;
...@@ -89,7 +89,8 @@ const list = [ ...@@ -89,7 +89,8 @@ const list = [
height: 40px; height: 40px;
} }
p { p {
margin-top: 24px; padding: 0 0.28rem;
margin-top: 0.24rem;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
line-height: 24px; line-height: 24px;
...@@ -97,4 +98,21 @@ const list = [ ...@@ -97,4 +98,21 @@ const list = [
color: inherit; color: inherit;
} }
} }
.is-h5 {
.cooperate-wrapper {
grid-column-gap: 0.2rem;
grid-row-gap: 0.2rem;
}
.cooperate-item {
height: 1.8rem;
img {
height: 0.44rem;
}
p {
font-size: 0.22rem;
font-weight: 400;
line-height: 0.3rem;
}
}
}
</style> </style>
src/modules/home/components/SkillsTraining.vue
浏览文件 @ 1b2becb8
...@@ -65,7 +65,7 @@ const list = [ ...@@ -65,7 +65,7 @@ const list = [
display: none; display: none;
} }
&:hover { &:hover {
background-color: #a81840; background-color: #a81840 !important;
color: #ffff; color: #ffff;
.cooperate-icon { .cooperate-icon {
display: none; display: none;
...@@ -78,6 +78,7 @@ const list = [ ...@@ -78,6 +78,7 @@ const list = [
height: 60px; height: 60px;
} }
p { p {
padding: 0 0.28rem;
margin-top: 20px; margin-top: 20px;
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
...@@ -86,4 +87,26 @@ const list = [ ...@@ -86,4 +87,26 @@ const list = [
color: inherit; color: inherit;
} }
} }
.is-h5 {
.cooperate-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0.2rem;
grid-row-gap: 0.2rem;
}
.cooperate-item {
background-color: #fff;
margin: 0;
width: auto;
height: 2.6rem;
img {
height: 0.94rem;
}
p {
margin-top: 0.3rem;
font-size: 0.24rem;
line-height: 0.32rem;
}
}
}
</style> </style>
src/modules/internet/views/Apply.vue
浏览文件 @ 1b2becb8
...@@ -51,7 +51,7 @@ import menus from '../menus' ...@@ -51,7 +51,7 @@ import menus from '../menus'
<dl> <dl>
<dt><img src="https://webapp-pub.ezijing.com/project/vst/icon_apply.png" /></dt> <dt><img src="https://webapp-pub.ezijing.com/project/vst/icon_apply.png" /></dt>
<dd> <dd>
<h4>符合以下条件之一，可申报/具备以下条件的技师：</h4> <h4>符合以下条件之一，可申报技师：</h4>
<p> <p>
1、取得本职业或相关职业三级/高级工职业资格证书（技能等级证书）后，累计从事本职业或相关职业工作 3 1、取得本职业或相关职业三级/高级工职业资格证书（技能等级证书）后，累计从事本职业或相关职业工作 3
年（含）以上，经本职业二级/技师正规培训达规定标准学时，并取得结业证书。<br /> 年（含）以上，经本职业二级/技师正规培训达规定标准学时，并取得结业证书。<br />
...@@ -65,7 +65,7 @@ import menus from '../menus' ...@@ -65,7 +65,7 @@ import menus from '../menus'
<dl> <dl>
<dt><img src="https://webapp-pub.ezijing.com/project/vst/icon_apply.png" /></dt> <dt><img src="https://webapp-pub.ezijing.com/project/vst/icon_apply.png" /></dt>
<dd> <dd>
<h4>符合以下条件之一，可申报一级/高级师：</h4> <h4>符合以下条件之一，可申报一级/高级技师：</h4>
<p> <p>
1、取得本职业或相关职业二级/技师职业资格证书（技能等级证书）后，累计从事本职业或相关职业工作 3 1、取得本职业或相关职业二级/技师职业资格证书（技能等级证书）后，累计从事本职业或相关职业工作 3
年（含）以上，经本职业一级/高级技师正规培训达规定标准学时，并取得结业证书。<br /> 年（含）以上，经本职业一级/高级技师正规培训达规定标准学时，并取得结业证书。<br />
......
src/modules/internet/views/Index.vue
浏览文件 @ 1b2becb8
...@@ -52,11 +52,11 @@ import menus from '../menus' ...@@ -52,11 +52,11 @@ import menus from '../menus'
<dd> <dd>
<h4>主要工作内容</h4> <h4>主要工作内容</h4>
<p> <p>
1、研究数字化平台的用户定位和运营方式 2、接受企业委托，对企业资质和产品质量等信息进行审核<br /> 1、研究数字化平台的用户定位和运营方式<br />2、接受企业委托，对企业资质和产品质量等信息进行审核<br />
3、选定相关产品，设计策划营销方案，制定佣金结算方式<br /> 3、选定相关产品，设计策划营销方案，制定佣金结算方式<br />
4、搭建数字化营销场景，通过直播或短视频等形式对产品进行多平台营销推广<br /> 4、搭建数字化营销场景，通过直播或短视频等形式对产品进行多平台营销推广<br />
5、提升自身传播影响力，加强用户群体活跃度，促进产品从关注到购买的转化率 6、签订销售订单，结算销售货款<br /> 5、提升自身传播影响力，加强用户群体活跃度，促进产品从关注到购买的转化率<br />6、签订销售订单，结算销售货款<br />
7、负责协调产品的售后服务 8、采集分析销售数据，对企业或产品提出优化性建议 7、负责协调产品的售后服务<br />8、采集分析销售数据，对企业或产品提出优化性建议
</p> </p>
</dd> </dd>
</dl> </dl>
......
src/modules/process/views/Index.vue
浏览文件 @ 1b2becb8
...@@ -36,39 +36,39 @@ const list = [ ...@@ -36,39 +36,39 @@ const list = [
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
left: 21px; left: 0.21rem;
width: 1px; width: 1px;
height: 100%; height: 100%;
background-color: #aa1941; background-color: #aa1941;
} }
} }
dl + dl { dl + dl {
padding-top: 70px; padding-top: 0.7rem;
} }
dt { dt {
position: relative; position: relative;
z-index: 1; z-index: 1;
width: 43px; width: 0.43rem;
height: 61px; height: 0.61rem;
background: url(https://webapp-pub.ezijing.com/project/vst/process_bg.png) no-repeat center; background: url(https://webapp-pub.ezijing.com/project/vst/process_bg.png) no-repeat center;
background-size: contain; background-size: contain;
font-size: 30px; font-size: 0.3rem;
font-weight: 500; font-weight: 500;
line-height: 32px; line-height: 0.32rem;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
padding-top: 10px; padding-top: 0.1rem;
box-sizing: border-box; box-sizing: border-box;
} }
dd { dd {
margin-left: 51px; margin-left: 0.5rem;
flex: 1; flex: 1;
font-size: 22px; font-size: 0.22rem;
font-weight: 400; font-weight: 400;
line-height: 34px; line-height: 0.34rem;
color: #333; color: #333;
border-bottom: 1px dashed #b9b9b9; border-bottom: 1px dashed #b9b9b9;
padding-bottom: 10px; padding-bottom: 0.1rem;
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论