Skip to content

P
project-www-pc
提交 33768c75 authored 作者: lhh's avatar lhh
浏览文件
操作

update

上级 e1663534
隐藏空白字符变更
内嵌 并排
正在显示 包含 370 行增加 和 4 行删除
components/Head.vue
浏览文件 @ 33768c75
......@@ -176,8 +176,8 @@ export default {
]
},
{
name: '职业技能大赛'
// path: '/digital/yx_4'
name: '职业技能大赛',
path: '/digital/ds'
}
// {
......
components/home/digital.vue
浏览文件 @ 33768c75
......@@ -146,8 +146,8 @@ export default {
{
icon: 'https://webapp-pub.ezijing.com/www/pc/digital/icon/yx_2.png',
hoverIcon: 'https://webapp-pub.ezijing.com/www/pc/digital/icon/yx_2_hover.png',
title: '职业技能大赛'
// path: 'digital/yx_4'
title: '职业技能大赛',
path: 'digital/ds'
}
]
}
......
pages/digital/ds.vue 0 → 100644
浏览文件 @ 33768c75
<!-- 引产入校 -->
<template>
<div>
<div class="banner">
<img src="https://webapp-pub.ezijing.com/www/pc/digital/ds/banner1.png" />
<div class="cover">
<div class="cover-inner">
<div class="h1">
<h1>150</h1>
<div class="j">＋</div>
<span>高校咨询参赛</span>
</div>
<h6>2023年全国大学生商业数据分析与应用大赛</h6>
<div class="text-list">
<div class="text-list_item">
<div class="list_item_t">
<div class="num">195</div>
<div class="d">个</div>
</div>
<div class="list_item_b">学校报名</div>
</div>
<div class="text-list_item">
<div class="list_item_t">
<div class="num">52</div>
<div class="d">名次</div>
</div>
<div class="list_item_b">指导教师</div>
</div>
<div class="text-list_item">
<div class="list_item_t">
<div class="num">41</div>
<div class="d">支</div>
</div>
<div class="list_item_b">参赛队伍</div>
</div>
<div class="text-list_item">
<div class="list_item_t">
<div class="num">16</div>
<div class="d">个</div>
</div>
<div class="list_item_b">省市</div>
</div>
</div>
</div>
</div>
</div>
<section class="section">
<div class="section-inner">
<h2 class="section-title">赛项名称</h2>
<div class="sx-list">
<div class="sx-list_item" v-for="item in nameList">
<img :src="item.logo" class="logo" />
<div class="bg-box">
<img :src="item.bg" />
<div class="text" v-html="item.text"></div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="section-inner">
<h2 class="section-title">赛项简介</h2>
<div class="intr-top">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/sx-bg.png" />
<div class="intr-top_r">
<p>面向泛管理类和财经商贸类专业</p>
<p>商业数据分析和数字营销两大类行业赛事群。</p>
<p>
赛项设计遵循《2023年全国职业院校技能大赛制度汇编》的总体指导思想及原则。
赛项平台贯穿模拟多个真实的商业级工作平台，利用大数据、人工智能技术，采用行业真实数据和案例集。竞赛内容设计适应数字经济国家战略对人才培养的需求，覆盖数字+金融、贸易、电商、服务、零售等数十个行业。通过大赛促进大数据应用融入管理类、财经商贸等专业大类，推进专业实践教学水平，加快专业教师大数据应用水平，培养学生大数据应用与数字营销技能。
</p>
</div>
</div>
<div class="intr-list">
<div class="intr-l_item" v-for="item in schoolList">{{ item }}</div>
</div>
</div>
</section>
<section class="section">
<div class="section-inner">
<h2 class="section-title">选手风采</h2>
<div class="xs-list">
<div class="xs-items">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-1.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-2.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-3.png">
</div>
<div class="xs-items">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-4.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-5.png">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/fc-6.png">
</div>
</div>
</div>
</section>
<!-- <section class="section">
<div class="section-inner">
<h2 class="section-title">交付案例</h2>
<ul class="al-list">
<li v-for="item in jfalList" :key="item"><img :src="item" /></li>
</ul>
</div>
</section> -->
</div>
</template>
<script>
export default {
data() {
return {
nameList: [
{
logo: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-logo.png',
bg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-bg1.png',
text: '第一届<br />全国大学生商业数据分析与应用大赛'
},
{
logo: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-logo.png',
bg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-bg2.png',
text: '第二届<br />全国大学生商业数据分析与应用大赛'
},
{
logo: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-logo.png',
bg: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/digital/ds/name-bg3.png',
text: '第一届<br />全国大学生数字营销技能大赛'
}
],
schoolList: [
'安阳师范学院',
'北京财贸职业学院',
'常州工业职业技术学院',
'桂林理工大学南宁分校',
'河南财经政法大学',
'吉林工商学院',
'吉林农业大学',
'江西工商职业技术学院',
'黎明职业大学',
'南宁职业技术学院',
'内蒙古警察职业学院',
'清远职业技术学院',
'沈阳工业大学',
'石家庄邮电职业技术学院',
'四川财经职业学院',
'四川职业技术学院',
'天津滨海汽车工程职业学院',
'长春大学',
'长春金融高等专科学校',
'重庆工商大学派斯学院'
]
}
}
}
</script>
<style lang="scss" scoped>
.banner {
position: relative;
img {
width: 100%;
}
.cover {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4039);
line-height: 1;
color: #ffffff;
.h1 {
display: flex;
align-items: center;
margin-bottom: 18px;
h1 {
font-size: 56px;
font-weight: bold;
color: #ffffff;
line-height: 100%;
}
span {
font-size: 22px;
margin-left: 10px;
}
.j {
font-size: 40px;
font-weight: bold;
}
}
h6 {
font-size: 28px;
line-height: 100%;
}
.text-list {
display: flex;
margin-top: 88px;
margin-left: -40px;
.text-list_item {
width: 198px;
text-align: center;
border-right: 1px solid #fff;
&:last-child {
border: none;
}
.list_item_t {
display: flex;
justify-content: center;
align-items: flex-end;
.num {
font-size: 56px;
font-weight: bold;
color: #ffffff;
line-height: 100%;
}
.d {
font-size: 20px;
color: #ffffff;
line-height: 35px;
margin-left: 5px;
}
}
}
.list_item_b {
font-size: 16px;
color: #ffffff;
margin-top: 8px;
}
}
}
.cover-inner {
height: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: column;
}
}
.section:nth-child(odd) {
background-color: #f9f8f8;
}
.section:nth-child(even) {
background-color: #fff;
}
.section-inner {
width: 1200px;
margin: 0 auto;
padding: 100px 0;
}
.section-title {
margin-bottom: 36px;
font-size: 30px;
font-family: Source Han Sans CN;
font-weight: bold;
line-height: 32px;
color: #333333;
text-align: center;
}
.sx-list {
display: flex;
justify-content: space-between;
.sx-list_item {
width: 370px;
border: 1px solid #dbdbdb;
padding: 19px 25px 25px;
box-sizing: border-box;
cursor: pointer;
&:hover {
.bg-box {
img {
transform: scale(1.1);
}
}
}
.logo {
width: 145px;
display: block;
}
.bg-box {
margin-top: 18px;
position: relative;
overflow: hidden;
img {
width: 320px;
display: block;
transition: all 0.2s;
}
.text {
position: absolute;
top: 0;
left: 0;
text-align: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: 18px;
color: #ffffff;
line-height: 30px;
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.4039);
}
}
}
}
.intr-top {
display: flex;
img {
width: 576px;
height: fit-content;
}
.intr-top_r {
margin-left: 44px;
p {
font-size: 16px;
color: #333333;
line-height: 36px;
margin-bottom: 20px;
position: relative;
text-align: justify;
&::before {
content: '';
position: absolute;
top: 15px;
left: -15px;
width: 6px;
height: 6px;
background: #aa1941;
border-radius: 50%;
}
}
}
}
.intr-list {
display: flex;
flex-wrap: wrap;
padding-top: 30px;
margin-right: -20px;
.intr-l_item {
background-color: #fff;
width: 224px;
background: #ffffff;
border-radius: 5px 5px 5px 5px;
font-size: 16px;
color: #333333;
line-height: 47px;
text-align: center;
margin-right: 20px;
margin-bottom: 20px;
}
}
.xs-list{
.xs-items{
display: flex;
justify-content: space-between;
margin-bottom: 30px;
img{
width: 380px;
}
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论