提交 2b2c3cc8 authored 作者: matian's avatar matian

页面优化

上级 da8c766b
......@@ -14,7 +14,7 @@
<div class="content_tab">
<div class="tab_con">
<div v-for="(item, index) in zyList" :key="index">
<div class="con_item">
<div class="con_item" :style="`background:url(${item.imgUrl}) no-repeat center`">
<div class="item_tit">{{ item.tit }}</div>
<div class="item_con">
<nuxt-link class="subNav-li" :to="{ name: item.name }">
......@@ -39,12 +39,14 @@ export default {
{
tit: '商业数据分析实验室',
name: 'practice-laboratory-analysis',
url: 'https://bi.ezijing.com/bi/'
url: 'https://bi.ezijing.com/bi/',
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/practice/laboratory/tab11.png'
},
{
tit: '数字营销实验室',
name: 'practice-laboratory-marketing',
url: 'https://digitalmarketinglab.ezijing.com/login'
url: 'https://digitalmarketinglab.ezijing.com/login',
imgUrl: 'https://webapp-pub.ezijing.com/www/pc/practice/laboratory/tab22.png'
}
]
}
......@@ -112,11 +114,8 @@ export default {
}
.con_item:nth-child(1) {
margin-right: 20px;
background: url(https://webapp-pub.ezijing.com/www/pc/practice/laboratory/tab1.png);
}
.con_item:nth-child(2) {
background: url(https://webapp-pub.ezijing.com/www/pc/practice/laboratory/tab2.png);
}
.con_item {
width: 590px;
height: 420px;
......
......@@ -8,7 +8,7 @@
<p class="section-desc">
打造人才和产业对接的“最后一公里”,搭载智慧人才库、人才测评、在线课堂、人才管理、资源共享、项目对接等六项服务,疏解企业人才“选、育、留”难题
</p>
<div class="platform-list">
<!-- <div class="platform-list">
<div class="platform-item" v-for="(item, index) in list" :key="item.image_url">
<div class="platform-item__content">
<div class="platform-item__header">
......@@ -20,6 +20,17 @@
</div>
<div class="platform-item__pic"><img :src="item.image_url" /></div>
</div>
</div> -->
<div class="section_con" v-for="(item, index) in list" :key="index">
<div class="con_left">
<div class="left_index">{{ '0' + (index + 1) }}</div>
<div class="left_tit">{{ item.title }}</div>
<div class="left_desc">{{ item.subtitle }}</div>
<div class="left_tips">
{{ item.desc }}
</div>
</div>
<img :src="item.image_url" alt="" />
</div>
</div>
</section>
......@@ -32,25 +43,25 @@ export default {
return {
list: [
{
image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/1.jpg',
image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/img1.png',
title: '数字金融',
subtitle: '高质量就业',
desc: '引入中国中小企业协会,拓展“国际软件外包交付基地”企业资源,提供充足的就业岗位,帮助人才高质量就业。'
},
{
image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/2.jpg',
image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/img2.png',
title: '建设数字人才库',
subtitle: '引才',
desc: '通过产业学院、实践基地集聚人才,划分类型、精细入库,打造“一链六类多群”人才储备平台,为企业“引才”。'
},
{
image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/3.jpg',
image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/img3.png',
title: '建设线上内训平台',
subtitle: '育才',
desc: '开发线上培训SaaS平台,融合多形态的资源建设“技能字典”,形成泛在学习网络,为企业“育才”。'
},
{
image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/4.jpg',
image_url: 'https://webapp-pub.ezijing.com/www/pc/practice/talent/img4.png',
title: '建设“技能码”',
subtitle: '留才',
desc: '采集技能类型、技能等级、学习轨迹等数据生成“技能码”,开展人才需求研究,服务精准招聘,为企业“留才”。'
......@@ -96,55 +107,49 @@ export default {
max-width: 100%;
}
}
.platform-list {
margin-top: 100px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.platform-item {
.section_con {
margin-top: 92px;
display: flex;
padding: 40px 20px;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
border-radius: 6px;
overflow: hidden;
}
justify-content: space-between;
.platform-item__content {
margin-right: 14px;
h3 {
margin-top: 10px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 34px;
color: #aa1941;
.con_left {
margin-right: 73px;
.left_index {
font-size: 60px;
font-weight: normal;
color: #eaeaea;
}
.left_tit {
font-size: 22px;
font-weight: 500;
color: #424242;
margin-top: -47px;
}
.left_desc {
font-size: 24px;
font-weight: 500;
line-height: 42px;
color: #aa1941;
margin-top: 50px;
}
.left_tips {
font-size: 16px;
font-weight: 400;
line-height: 30px;
color: #666666;
margin-top: 27px;
}
}
p {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 24px;
color: #666666;
img {
width: 581px;
height: 483px;
}
}
.platform-item__header {
position: relative;
span {
font-size: 50px;
font-family: Helvetica Neue LT Pro;
font-weight: normal;
line-height: 24px;
color: #eaeaea;
}
h2 {
position: absolute;
left: 0;
bottom: 0;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #333333;
.section_con:nth-child(2n) {
flex-direction: row-reverse;
margin-top: 58px;
.con_left {
margin-left: 70px;
}
}
</style>
......@@ -22,35 +22,35 @@
<p class="section-desc">
以商业数据分析为底层技术,以数字营销、数字运营、数字会计为核心基础专业,同时,基于数字经济典型应用场景,以数字化改造和专业升级为关键,围绕数字金融、数字贸易、数字农业、数字能源等核心行业应用方向,进行“数字+全行业”的专业建设
</p>
<el-tabs class="my-tabs">
<el-tab-pane>
<template #label>
<!-- <el-tab-pane> -->
<!-- <template #label>
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_1.png" class="icon" />
<img
src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_1_hover.png"
class="active-icon"
/>
<p>核心类专业</p>
</template>
<div class="topic">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_bg.jpg" class="topic-bg" />
<div class="topic-cover">
<h4>核心类专业</h4>
<p>
在现在这个信息爆炸的时代,每分每秒都在产生大量的数据,数据分析师能够在海量的数据中使企业清晰的了解到目前的现状与竞争环境,并且充分利用数据带来的价值,为企业进行风险评判与决策支持。通过数据分析和展现,呈献给企业决策者的将是一份清晰、准确且有数据支撑的有价值的报告。商业数据分析已成为数字化企业提升竞争力必不可少的岗位。
</p>
</div>
</div>
<div class="tab-section">
<h3 class="tab-section-title"><span>商业数据分析</span></h3>
<p class="tab-section-desc">
培养学生具备扎实的商业经济与运行管理知识的同时,基于大数据分析平台,通过数理统计等数学思维的培养,掌握数据收集、数据处理、数据分析、数据可视化、预测建模等数据分析核心知识和方法。
</p>
<div class="tab-section-img">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_1.png" />
</div>
</div>
</el-tab-pane>
</template> -->
<div class="topic">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_bg.jpg" class="topic-bg" />
<div class="topic-cover">
<h4>核心类专业</h4>
<p>
在现在这个信息爆炸的时代,每分每秒都在产生大量的数据,数据分析师能够在海量的数据中使企业清晰的了解到目前的现状与竞争环境,并且充分利用数据带来的价值,为企业进行风险评判与决策支持。通过数据分析和展现,呈献给企业决策者的将是一份清晰、准确且有数据支撑的有价值的报告。商业数据分析已成为数字化企业提升竞争力必不可少的岗位。
</p>
</div>
</div>
<div class="tab-section">
<h3 class="tab-section-title"><span>商业数据分析</span></h3>
<p class="tab-section-desc">
培养学生具备扎实的商业经济与运行管理知识的同时,基于大数据分析平台,通过数理统计等数学思维的培养,掌握数据收集、数据处理、数据分析、数据可视化、预测建模等数据分析核心知识和方法。
</p>
<div class="tab-section-img">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_1.png" />
</div>
</div>
<!-- </el-tab-pane> -->
<el-tabs class="my-tabs">
<el-tab-pane>
<template #label>
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_2.png" class="icon" />
......@@ -69,7 +69,7 @@
</p>
</div>
</div>
<el-tabs class="my-tabs2">
<!-- <el-tabs class="my-tabs2">
<el-tab-pane>
<template #label>
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/icon_1.png" class="icon" />
......@@ -119,7 +119,38 @@
</div>
</div>
</el-tab-pane>
</el-tabs>
</el-tabs> -->
<div class="tab-section">
<h3 class="tab-section-title"><span>数字营销</span></h3>
<div class="tab-section-img">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_1_1.png" />
</div>
</div>
<div class="tab-section">
<h3 class="tab-section-title"><span>数字运营</span></h3>
<div class="tab-section-img">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_2_1.png" />
</div>
</div>
<div class="tab-section">
<h3 class="tab-section-title"><span>数字会计</span></h3>
<div class="topic">
<img
src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/tab_3_1.png"
class="topic-bg"
/>
<div class="topic-cover">
<div class="cover_tit">强基础+精营用+复合型</div>
<p>
本专业方向面对财务共享服务中心、大数据服务机构、大中小企业、行政事业等单位的数据处理和数据分析岗位、财务机器人应用岗位、会计核算岗位、财务管理岗位、管理会计、产品数字化运营和数字化营销、税务风险控制及商业数据分析等相关岗位,培养理想信念坚定,德、智、体、美、劳等全面发展,具有一定的科学文化水平,良好的人文素养、职业道德和创新意识;熟悉典型的数据分析工具和技巧,具备一定的财务数据分析能力,会计软件操作和维护能力,精核算、通税法、擅理财、长分析的高素质技术层数字化会计人才。
</p>
<h4 class="cover_tips">适应“大智移云物区”时代的信息技术挑战</h4>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane>
<template #label>
......@@ -130,7 +161,7 @@
/>
<p>应用类专业</p>
</template>
<div class="tab-section row">
<!-- <div class="tab-section row">
<div class="tab-section-pic">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_1.png" />
</div>
......@@ -139,6 +170,18 @@
数字化推动了企业商业模式的创新与重塑。越来越多传统产业从线下走向线上,数字化转型基于新一代数字科技,以连接为基础,以数据为关键要素,以价值释放为目标,以数据赋能为主线,为企业带来的是全方位的焕然一新。目前已有越来越多的数据化场景应用到各行各业。数字化场景的应用为企业注入新的活力。
</p>
</div>
</div> -->
<div class="topic">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_1.png" class="topic-bg" />
<div class="topic-cover1">
<img
src="https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/services/professional/img3_1_1.png"
alt=""
/>
<p>
数字化直接完成了业务的在线化,使许多工作都可以交由机器自动完成,从而在最大幅度上降低失误、提升效率。数字化推动了企业运营模式的颠覆式变革。基于网络,企业可以直接与客户建立连接,建立真正以客户为中心的运营模式。基于数字化的运营模式涉及营销、运营管理以及财务三个基础方向。
</p>
</div>
</div>
<div class="tab-section row">
<div class="tab-section-content">
......@@ -303,11 +346,13 @@ export default {
.el-tabs__item {
display: flex;
flex-direction: column;
// flex-direction: column;
align-items: center;
justify-content: center;
width: 220px;
height: 220px;
// width: 220px;
// height: 220px;
width: 380px;
height: 82px;
margin: 0 30px;
padding: 0;
.active-icon {
......@@ -325,14 +370,14 @@ export default {
}
}
img {
margin-bottom: 34px;
height: 60px;
height: 55px;
}
p {
font-size: 22px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 1;
margin-left: 21px;
}
}
}
......@@ -439,6 +484,30 @@ export default {
color: #ffffff;
}
}
.topic-cover1 {
background-color: rgba(0, 0, 0, 0.6);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 0 92px 0 143px;
box-sizing: border-box;
display: flex;
align-items: center;
color: #fff;
img {
margin-right: 73px;
}
p {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
line-height: 30px;
color: #ffffff;
}
}
.tab-section {
&.row {
display: flex;
......@@ -447,6 +516,41 @@ export default {
gap: 64px;
margin-top: 30px;
}
.topic-cover {
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 64px 82px 0 98px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
color: #fff;
box-sizing: border-box;
.cover_tit {
font-size: 18px;
font-weight: 500;
line-height: 26px;
color: #ffffff;
}
p {
font-size: 14px;
font-weight: 300;
line-height: 26px;
color: #ffffff;
margin-top: 24px;
}
.cover_tips {
font-size: 16px;
font-weight: 500;
color: #ffffff;
margin-top: 20px;
}
}
}
.tab-section-title {
position: relative;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论