Skip to content

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

feat: 适配移动端

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