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

页面优化

上级 da8c766b
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<div class="content_tab"> <div class="content_tab">
<div class="tab_con"> <div class="tab_con">
<div v-for="(item, index) in zyList" :key="index"> <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_tit">{{ item.tit }}</div>
<div class="item_con"> <div class="item_con">
<nuxt-link class="subNav-li" :to="{ name: item.name }"> <nuxt-link class="subNav-li" :to="{ name: item.name }">
...@@ -39,12 +39,14 @@ export default { ...@@ -39,12 +39,14 @@ export default {
{ {
tit: '商业数据分析实验室', tit: '商业数据分析实验室',
name: 'practice-laboratory-analysis', 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: '数字营销实验室', tit: '数字营销实验室',
name: 'practice-laboratory-marketing', 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 { ...@@ -112,11 +114,8 @@ export default {
} }
.con_item:nth-child(1) { .con_item:nth-child(1) {
margin-right: 20px; 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 { .con_item {
width: 590px; width: 590px;
height: 420px; height: 420px;
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<p class="section-desc"> <p class="section-desc">
打造人才和产业对接的“最后一公里”,搭载智慧人才库、人才测评、在线课堂、人才管理、资源共享、项目对接等六项服务,疏解企业人才“选、育、留”难题 打造人才和产业对接的“最后一公里”,搭载智慧人才库、人才测评、在线课堂、人才管理、资源共享、项目对接等六项服务,疏解企业人才“选、育、留”难题
</p> </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" v-for="(item, index) in list" :key="item.image_url">
<div class="platform-item__content"> <div class="platform-item__content">
<div class="platform-item__header"> <div class="platform-item__header">
...@@ -20,6 +20,17 @@ ...@@ -20,6 +20,17 @@
</div> </div>
<div class="platform-item__pic"><img :src="item.image_url" /></div> <div class="platform-item__pic"><img :src="item.image_url" /></div>
</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>
</div> </div>
</section> </section>
...@@ -32,25 +43,25 @@ export default { ...@@ -32,25 +43,25 @@ export default {
return { return {
list: [ 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: '数字金融', title: '数字金融',
subtitle: '高质量就业', subtitle: '高质量就业',
desc: '引入中国中小企业协会,拓展“国际软件外包交付基地”企业资源,提供充足的就业岗位,帮助人才高质量就业。' 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: '建设数字人才库', title: '建设数字人才库',
subtitle: '引才', subtitle: '引才',
desc: '通过产业学院、实践基地集聚人才,划分类型、精细入库,打造“一链六类多群”人才储备平台,为企业“引才”。' 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: '建设线上内训平台', title: '建设线上内训平台',
subtitle: '育才', subtitle: '育才',
desc: '开发线上培训SaaS平台,融合多形态的资源建设“技能字典”,形成泛在学习网络,为企业“育才”。' 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: '建设“技能码”', title: '建设“技能码”',
subtitle: '留才', subtitle: '留才',
desc: '采集技能类型、技能等级、学习轨迹等数据生成“技能码”,开展人才需求研究,服务精准招聘,为企业“留才”。' desc: '采集技能类型、技能等级、学习轨迹等数据生成“技能码”,开展人才需求研究,服务精准招聘,为企业“留才”。'
...@@ -96,55 +107,49 @@ export default { ...@@ -96,55 +107,49 @@ export default {
max-width: 100%; max-width: 100%;
} }
} }
.platform-list { .section_con {
margin-top: 100px; margin-top: 92px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.platform-item {
display: flex; display: flex;
padding: 40px 20px; justify-content: space-between;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
border-radius: 6px;
overflow: hidden;
}
.platform-item__content { .con_left {
margin-right: 14px; margin-right: 73px;
h3 { .left_index {
margin-top: 10px; font-size: 60px;
font-size: 16px; font-weight: normal;
font-family: Source Han Sans CN; color: #eaeaea;
font-weight: 400; }
line-height: 34px; .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; color: #aa1941;
margin-top: 50px;
} }
p { .left_tips {
font-size: 14px; font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 30px;
color: #666666; color: #666666;
margin-top: 27px;
} }
}
.platform-item__header {
position: relative;
span {
font-size: 50px;
font-family: Helvetica Neue LT Pro;
font-weight: normal;
line-height: 24px;
color: #eaeaea;
} }
h2 { img {
position: absolute; width: 581px;
left: 0; height: 483px;
bottom: 0; }
font-size: 18px; }
font-family: Source Han Sans CN; .section_con:nth-child(2n) {
font-weight: 500; flex-direction: row-reverse;
color: #333333; margin-top: 58px;
.con_left {
margin-left: 70px;
} }
} }
</style> </style>
...@@ -22,16 +22,15 @@ ...@@ -22,16 +22,15 @@
<p class="section-desc"> <p class="section-desc">
以商业数据分析为底层技术,以数字营销、数字运营、数字会计为核心基础专业,同时,基于数字经济典型应用场景,以数字化改造和专业升级为关键,围绕数字金融、数字贸易、数字农业、数字能源等核心行业应用方向,进行“数字+全行业”的专业建设 以商业数据分析为底层技术,以数字营销、数字运营、数字会计为核心基础专业,同时,基于数字经济典型应用场景,以数字化改造和专业升级为关键,围绕数字金融、数字贸易、数字农业、数字能源等核心行业应用方向,进行“数字+全行业”的专业建设
</p> </p>
<el-tabs class="my-tabs"> <!-- <el-tab-pane> -->
<el-tab-pane> <!-- <template #label>
<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.png" class="icon" />
<img <img
src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_1_hover.png" src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_1_hover.png"
class="active-icon" class="active-icon"
/> />
<p>核心类专业</p> <p>核心类专业</p>
</template> </template> -->
<div class="topic"> <div class="topic">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_bg.jpg" class="topic-bg" /> <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_bg.jpg" class="topic-bg" />
<div class="topic-cover"> <div class="topic-cover">
...@@ -50,7 +49,8 @@ ...@@ -50,7 +49,8 @@
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_1.png" /> <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_1_1.png" />
</div> </div>
</div> </div>
</el-tab-pane> <!-- </el-tab-pane> -->
<el-tabs class="my-tabs">
<el-tab-pane> <el-tab-pane>
<template #label> <template #label>
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_2.png" class="icon" /> <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/icon_2.png" class="icon" />
...@@ -69,7 +69,7 @@ ...@@ -69,7 +69,7 @@
</p> </p>
</div> </div>
</div> </div>
<el-tabs class="my-tabs2"> <!-- <el-tabs class="my-tabs2">
<el-tab-pane> <el-tab-pane>
<template #label> <template #label>
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/icon_1.png" class="icon" /> <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/base/icon_1.png" class="icon" />
...@@ -119,7 +119,38 @@ ...@@ -119,7 +119,38 @@
</div> </div>
</div> </div>
</el-tab-pane> </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>
<el-tab-pane> <el-tab-pane>
<template #label> <template #label>
...@@ -130,7 +161,7 @@ ...@@ -130,7 +161,7 @@
/> />
<p>应用类专业</p> <p>应用类专业</p>
</template> </template>
<div class="tab-section row"> <!-- <div class="tab-section row">
<div class="tab-section-pic"> <div class="tab-section-pic">
<img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_1.png" /> <img src="https://webapp-pub.ezijing.com/www/pc/services/professional/tab_3_1.png" />
</div> </div>
...@@ -139,6 +170,18 @@ ...@@ -139,6 +170,18 @@
数字化推动了企业商业模式的创新与重塑。越来越多传统产业从线下走向线上,数字化转型基于新一代数字科技,以连接为基础,以数据为关键要素,以价值释放为目标,以数据赋能为主线,为企业带来的是全方位的焕然一新。目前已有越来越多的数据化场景应用到各行各业。数字化场景的应用为企业注入新的活力。 数字化推动了企业商业模式的创新与重塑。越来越多传统产业从线下走向线上,数字化转型基于新一代数字科技,以连接为基础,以数据为关键要素,以价值释放为目标,以数据赋能为主线,为企业带来的是全方位的焕然一新。目前已有越来越多的数据化场景应用到各行各业。数字化场景的应用为企业注入新的活力。
</p> </p>
</div> </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>
<div class="tab-section row"> <div class="tab-section row">
<div class="tab-section-content"> <div class="tab-section-content">
...@@ -303,11 +346,13 @@ export default { ...@@ -303,11 +346,13 @@ export default {
.el-tabs__item { .el-tabs__item {
display: flex; display: flex;
flex-direction: column; // flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 220px; // width: 220px;
height: 220px; // height: 220px;
width: 380px;
height: 82px;
margin: 0 30px; margin: 0 30px;
padding: 0; padding: 0;
.active-icon { .active-icon {
...@@ -325,14 +370,14 @@ export default { ...@@ -325,14 +370,14 @@ export default {
} }
} }
img { img {
margin-bottom: 34px; height: 55px;
height: 60px;
} }
p { p {
font-size: 22px; font-size: 22px;
font-family: Source Han Sans CN; font-family: Source Han Sans CN;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
margin-left: 21px;
} }
} }
} }
...@@ -439,6 +484,30 @@ export default { ...@@ -439,6 +484,30 @@ export default {
color: #ffffff; 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 { .tab-section {
&.row { &.row {
display: flex; display: flex;
...@@ -447,6 +516,41 @@ export default { ...@@ -447,6 +516,41 @@ export default {
gap: 64px; gap: 64px;
margin-top: 30px; 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 { .tab-section-title {
position: relative; position: relative;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论