Skip to content

P
project-www-pc
提交 ec16d572 authored 作者: matian's avatar matian
浏览文件
操作

updates

上级 9cfdeed3
显示空白字符变更
内嵌 并排
正在显示 包含 406 行增加 和 2 行删除
pages/practice/laboratory/marketing.vue
浏览文件 @ ec16d572
...@@ -86,10 +86,10 @@ ...@@ -86,10 +86,10 @@
<div class="list_left"> <div class="list_left">
<div <div
class="left_tab" class="left_tab"
:class="{ active: index === tabActive }"
v-for="(item, index) in tabList" v-for="(item, index) in tabList"
:key="index" :key="index"
@mouseover="navActive(item, index)" @mouseover="navActive(item, index)"
:class="{ active: index === tabActive }"
> >
<div class="tab_con"> <div class="tab_con">
<div class="con_index">{{ index + 1 }}</div> <div class="con_index">{{ index + 1 }}</div>
...@@ -145,6 +145,133 @@ ...@@ -145,6 +145,133 @@
“学 - 练 - 训 - 赛”一体化人才培养，教学与行业场景无缝衔接 “学 - 练 - 训 - 赛”一体化人才培养，教学与行业场景无缝衔接
</div> </div>
</div> </div>
<div class="laboratory_con">
<div class="con_tab">
<div
class="tab_item"
v-for="(item, index) in laboratoryList"
:key="index"
@mouseover="navTabActive(item, index)"
:class="{ active: index === tabLabActive }"
>
<img :src="item.img" class="item_img" />
<img :src="item.imgActive" class="item_imgActive" />
<div class="item_tit">{{ item.tit }}</div>
<div class="item_desc">{{ item.desc }}</div>
</div>
</div>
<div class="con_main" v-if="tabLabActive === 0">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab1_bg.png"
class="main_img1"
/>
<div class="main_part">
<div class="part_list" v-for="(item, index) in labList1">
<div class="list_index">{{ '0' + (index + 1) }}</div>
<div class="list_tit">{{ item }}</div>
</div>
</div>
</div>
<div class="con_main" v-if="tabLabActive === 1">
<el-carousel :interval="4000" type="card" height="370px" arrow="never">
<el-carousel-item v-for="(item, index) in labList2" :key="item">
<img :src="item" class="main_img" />
</el-carousel-item>
</el-carousel>
</div>
<div class="con_main" v-if="tabLabActive === 2">
<img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/laTab3_bg.png" alt="" />
</div>
</div>
</div>
<div class="content_laboratory1">
<div class="laboratory1_con">
<div class="con_tit">紫荆教育数字营销实验室</div>
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/la1_img.png"
class="con_img"
/>
</div>
</div>
<div class="content_resource">
<div class="resource_tit">
配套资源：内置数字化营销案例与配套数据
</div>
<div class="resource_desc">
数字营销实验室内置经过教育适配化之后的行业真实教学案例库，目前案例数量已达近20个，教学学时数已达到80+。每一个行业教学案例包含4个课时的学习内容和资源，既有面向学生的学习资源（实验指导书、实验学习视频等），也有面向教师的资源（教学指导、教学方案、教学PPT、视频、题库等），案例配套数据集以及相关程序等。让学生在校即可熟练掌握真实商业环境下的营销场景、营销流程和自动化、精细化营销，实现教学与行业的无缝对接。
</div>
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/resource_img.png"
class="resource_img"
/>
</div>
<div class="content_service">
<div class="service_tit">紫荆教育实验室产品配套服务</div>
<div class="service_con">
<div class="con_left">
<img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon1.png" class="left_img" />
<div class="left_tit">实习就业服务</div>
<ul class="left_desc">
<li v-for="(item, index) in servicesList1" :key="index">
<p>{{ item }}</p>
</li>
</ul>
</div>
<div class="con_right">
<div class="right_list">
<div class="right_top">
<img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon2.png" class="top_img" />
<div class="top_tit">产品服务</div>
</div>
<ul class="right_desc">
<li v-for="(item, index) in servicesList2" :key="index">
<p>{{ item }}</p>
</li>
</ul>
</div>
<div class="right_list">
<div class="right_top">
<img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon3.png" class="top_img" />
<div class="top_tit">资源服务</div>
</div>
<ul class="right_desc">
<li v-for="(item, index) in servicesList3" :key="index">
<p>{{ item }}</p>
</li>
</ul>
</div>
<div class="right_list">
<div class="right_top">
<img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon4.png" class="top_img" />
<div class="top_tit">教学服务</div>
</div>
<ul class="right_desc">
<li v-for="(item, index) in servicesList4" :key="index">
<p>{{ item }}</p>
</li>
</ul>
</div>
<div class="right_list">
<div class="right_tit"></div>
<div class="right_top">
<img src="https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_icon5.png" class="top_img" />
<div class="top_tit">科研服务</div>
</div>
<ul class="right_desc">
<li v-for="(item, index) in servicesList5" :key="index">
<p>{{ item }}</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="content_bottom">
<img src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/bottom_img.png" class="bottom_img" />
</div> </div>
</div> </div>
</template> </template>
...@@ -154,6 +281,7 @@ export default { ...@@ -154,6 +281,7 @@ export default {
data() { data() {
return { return {
tabActive: 0, tabActive: 0,
tabLabActive: 0,
swiperOption: { swiperOption: {
slidesPerView: 'auto', slidesPerView: 'auto',
spaceBetween: 18, spaceBetween: 18,
...@@ -320,12 +448,51 @@ export default { ...@@ -320,12 +448,51 @@ export default {
'课题申报支撑服务', '课题申报支撑服务',
'实习就业支撑服务', '实习就业支撑服务',
'……' '……'
] ],
laboratoryList: [
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab1.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab1_active.png',
tit: '平台产品',
desc: 'E-SaaS数字营销实验室'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2_active.png',
tit: '配套资源',
desc: '紫荆教育课程体系'
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab3.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab3_active.png',
tit: '配套服务',
desc: '产品服务+教学服务+科研服务+…'
}
],
labList1: [
'工业级数字营销平台产品',
'全面实现营销精细化管理',
'完善的营销数据分析画像',
'完善的营销数据分析画像'
],
labList2: [
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2_bg1.png',
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2_bg2.png',
'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/practice/marketing/laTab2_bg3.png'
],
servicesList1: ['就业实习辅导', '职业素养提升', '面试技巧提升', '实训实习辅助安排', '辅助推荐就业', '……'],
servicesList2: ['产品免费升级服务', '免费产品使用培训服务', '产品定期巡检与优化服务', '产品使用分析与建议', '……'],
servicesList3: ['配套课程资源', '课程资源免费更新服务', '行业案例免费升级服务', '课程资源开发服务', '……'],
servicesList4: ['师资培训服务', '企业讲师教学服务', '大咖讲堂/紫荆讲堂', '教学成果联合申请', '……'],
servicesList5: ['科研成果转化服务', '当地行业企业服务支持', '课题申报支撑服务', '行业真实营销服务支撑', '……']
} }
}, },
methods: { methods: {
navActive(item, index) { navActive(item, index) {
this.tabActive = index this.tabActive = index
},
navTabActive(item, index) {
this.tabLabActive = index
} }
} }
} }
...@@ -774,6 +941,243 @@ export default { ...@@ -774,6 +941,243 @@ export default {
color: #ffffff; color: #ffffff;
} }
} }
.laboratory_con {
width: 1200px;
margin: 80px auto;
.con_tab {
display: flex;
justify-content: space-around;
.tab_item {
display: flex;
flex-direction: column;
align-items: center;
.item_imgActive {
display: none;
}
.item_tit {
width: 72px;
font-size: 18px;
font-weight: 400;
line-height: 34px;
color: #333333;
border-bottom: 1px solid #707070;
margin-top: 15px;
}
.item_desc {
font-size: 14px;
font-weight: 400;
line-height: 34px;
color: #777777;
margin-top: 14px;
}
}
.active {
.item_tit {
border-bottom: 1px solid #aa1941;
}
.item_img {
display: none;
}
.item_imgActive {
display: block;
}
}
}
.con_main {
width: 100%;
margin-top: 82px;
position: relative;
.main_part {
position: absolute;
top: 124px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 630px;
.part_list {
width: 300px;
height: 100px;
background: #ffffff;
margin-top: 30px;
padding: 24px 0 25px 23px;
text-align: left;
.list_index {
font-size: 30px;
font-weight: normal;
line-height: 34px;
color: #d5d5d5;
}
.list_tit {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #333333;
margin-top: 5px;
}
}
}
.main_img1 {
height: 500px;
}
.el-carousel {
background: rgba(249, 248, 248, 0.59);
}
}
}
}
.content_laboratory1 {
background: #ffffff;
padding: 120px 0;
.laboratory1_con {
width: 1200px;
margin: auto;
text-align: center;
.con_tit {
font-size: 30px;
font-weight: bold;
line-height: 34px;
color: #333333;
}
.con_img {
margin-top: 80px;
}
}
}
.content_resource {
width: 1200px;
margin: 90px auto;
text-align: center;
.resource_tit {
font-size: 30px;
font-weight: bold;
line-height: 32px;
color: #333333;
}
.resource_desc {
margin-top: 36px;
font-size: 18px;
font-weight: 400;
line-height: 34px;
color: #666666;
}
.resource_img {
margin-top: 62px;
}
}
.content_service {
width: 100%;
height: 917px;
background: url('https://webapp-pub.ezijing.com/www/pc/practice/marketing/service_bg.png') no-repeat center;
background-size: 100% 100%;
margin-top: 114px;
text-align: center;
.service_tit {
font-size: 30px;
font-weight: 500;
line-height: 34px;
color: #ffffff;
padding-top: 120px;
}
.service_con {
width: 1200px;
margin: 95px auto;
display: flex;
.con_left {
width: 380px;
height: 538px;
background: #ffffff;
padding: 121px 0 0 52px;
text-align: left;
.left_img {
width: 27px;
height: 26px;
}
.left_tit {
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #333333;
}
ul {
padding-left: 10px;
margin-top: 34px;
li {
font-size: 16px;
font-weight: 400;
list-style-type: disc;
color: #aa1941;
margin-left: 10px;
p {
color: #666666 !important;
margin-top: 26px;
}
}
}
}
.con_right {
width: 790px;
height: 538px;
margin-left: 30px;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
.right_list {
width: 380px;
height: 254px;
background: #ffffff;
padding: 30px 0 0 30px;
text-align: left;
.right_top {
display: flex;
align-items: center;
.top_img {
width: 24px;
height: 24px;
}
.top_tit {
margin-left: 10px;
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #333333;
}
}
.right_desc {
padding-left: 10px;
li {
font-size: 16px;
font-weight: 400;
list-style-type: disc;
color: #aa1941;
margin-left: 10px;
p {
color: #666666 !important;
margin-top: 16px;
}
}
}
}
.right_list:nth-child(3),
.right_list:nth-child(4) {
margin-top: 30px;
}
}
}
}
.content_bottom{
margin-top:70px;
.bottom_img{
width:100
}
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论