Skip to content

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

chore：官网首页开发

上级 07bf175c
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 1003 行增加 和 51 行删除
components/Head.vue
浏览文件 @ 6c796606
差异被折叠。
components/home/alumniStories.vue
浏览文件 @ 6c796606
...@@ -2,9 +2,9 @@ ...@@ -2,9 +2,9 @@
<div class="home-alumni"> <div class="home-alumni">
<AppCard title="校友故事" class="max-width"> <AppCard title="校友故事" class="max-width">
<template #header-aside><nuxt-link to="/alumnus/story">查看更多+</nuxt-link></template> <template #header-aside><nuxt-link to="/alumnus/story">查看更多+</nuxt-link></template>
<p class="tips">You are What you together，结识6000+ 同样优秀的人！</p> <!-- <p class="tips">You are What you together，结识6000+ 同样优秀的人！</p> -->
</AppCard> </AppCard>
<div class="swiper-content"> <!-- <div class="swiper-content">
<div v-swiper:mySwiper="swiperOptions" ref="mySwiper"> <div v-swiper:mySwiper="swiperOptions" ref="mySwiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in listData" :key="index"> <div class="swiper-slide" v-for="(item, index) in listData" :key="index">
...@@ -15,7 +15,20 @@ ...@@ -15,7 +15,20 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div> -->
<app-link v-if="listData.length > 0" :data="listData[0]" :to="`/alumnus/story/${listData[0].id}`">
<div class="alumni_content">
<img class="content_img" :src="listData[0].web_img_uri" loading="lazy" />
<div class="content_desc">
<div class="desc_tit">
{{ listData[0].title }}
</div>
<div class="desc_con">
{{ listData[0].abstract }}
</div>
</div>
</div>
</app-link>
</div> </div>
</template> </template>
<script> <script>
...@@ -53,7 +66,8 @@ export default { ...@@ -53,7 +66,8 @@ export default {
margin: 0 auto; margin: 0 auto;
} }
.home-alumni { .home-alumni {
padding-top: 60px; max-width: 1200px;
margin: 80px auto;
.tips { .tips {
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
...@@ -98,6 +112,36 @@ export default { ...@@ -98,6 +112,36 @@ export default {
height: 266px; height: 266px;
} }
} }
.alumni_content {
display: flex;
height: 450px;
.content_img {
width: 600px;
height: 100%;
object-fit: cover;
}
.content_desc {
width: 568px;
height: 100%;
margin-left: 32px;
.desc_tit {
margin-top: 56px;
font-size: 20px;
line-height: 32px;
color: #000000;
}
.desc_con {
text-align: justify;
font-size: 16px;
font-weight: 400;
line-height: 34px;
color: #666666;
margin-top: 30px;
}
}
}
} }
.is-h5 { .is-h5 {
.home-alumni { .home-alumni {
......
components/home/banner.vue
浏览文件 @ 6c796606
<template> <template>
<div class="home-banner"> <div class="home-banner">
<swiper :options="swiperOption" ref="mySwiper"> <!-- <swiper :options="swiperOption" ref="mySwiper">
<swiper-slide v-for="(item, index) in listData" :key="index"> <swiper-slide v-for="(item, index) in listData" :key="index">
<template v-if="item.uri"> <template v-if="item.uri">
<a :href="item.uri" target="_black"> <a :href="item.uri" target="_black">
...@@ -15,7 +15,8 @@ ...@@ -15,7 +15,8 @@
<template v-if="!isMobile"> <template v-if="!isMobile">
<div class="prev-button"></div> <div class="prev-button"></div>
<div class="next-button"></div> <div class="next-button"></div>
</template> </template> -->
<img src="https://webapp-pub.ezijing.com/www/pc/home/pc-index-banner.png" alt="" />
</div> </div>
</template> </template>
<script> <script>
...@@ -53,6 +54,9 @@ export default { ...@@ -53,6 +54,9 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.home-banner { .home-banner {
position: relative; position: relative;
img {
width: 100%;
}
.swiper-wrapper { .swiper-wrapper {
width: 100%; width: 100%;
display: flex; display: flex;
......
components/home/openClass.vue
浏览文件 @ 6c796606
...@@ -3,31 +3,48 @@ ...@@ -3,31 +3,48 @@
<template #header-aside> <template #header-aside>
<nuxt-link to="/about/lesson">{{ $t('viewMore') }}</nuxt-link> <nuxt-link to="/about/lesson">{{ $t('viewMore') }}</nuxt-link>
</template> </template>
<app-link :data="listData.first" :to="`/about/lesson/${listData.first.id}`"> <div class="main">
<img :src="listData.first.web_img_uri" class="banner" /> <ul>
</app-link> <li v-for="(item, index) in listData.list" :key="index">
<ul> <app-link :data="item" :to="`/about/lesson/${item.id}`">
<li v-for="(item, index) in listData.list" :key="index"> <!-- <div class="title">{{ item.title }}</div>
<app-link :data="item" :to="`/about/lesson/${item.id}`"> <div class="con-txt">{{ item.abstract }}</div>
<div class="title">{{ item.title }}</div> <div class="info-box">
<div class="con-txt">{{ item.abstract }}</div> <div class="time">{{ formatDate(item.start_time) }}</div>
<div class="info-box"> <div class="look-num">
<div class="time">{{ formatDate(item.start_time) }}</div> <div class="icon"></div>
<div class="look-num"> <div class="num">{{ item.remarks }}</div>
<div class="icon"></div> </div>
<div class="num">{{ item.remarks }}</div> <div class="btn">{{ $t('home.openLesson.btn') }}</div>
</div> -->
<div class="main_content">
<div class="time">
<div class="date">{{ formatDate(item.start_time) }}</div>
<div class="year ">{{ formatYear(item.start_time) }}</div>
</div>
<div class="content_right">
<div class="tit">{{ item.title }}</div>
<div class="desc">{{ item.abstract }}</div>
</div>
</div> </div>
<div class="btn">{{ $t('home.openLesson.btn') }}</div> </app-link>
</div> </li>
</app-link> <!-- <li>
</li>
<li>
<img src="https://zws-imgs-pub.ezijing.com/static/public/5a92e49bf43a7c7a7fb75cd1415ffc2b.png" class="logo" /> <img src="https://zws-imgs-pub.ezijing.com/static/public/5a92e49bf43a7c7a7fb75cd1415ffc2b.png" class="logo" />
<div class="wecome">HI！欢迎回来</div> <div class="wecome">HI！欢迎回来</div>
<div class="course-btn" @click="showEnroll">课程预约</div> <div class="course-btn" @click="showEnroll">课程预约</div>
<div class="login-txt" @click="showEnroll">注册/登陆</div> <div class="login-txt" @click="showEnroll">注册/登陆</div>
</li> </li> -->
</ul> </ul>
<div class="banner_con">
<app-link :data="listData.first" :to="`/about/lesson/${listData.first.id}`">
<template v-if="listData.list.length > 0">
<img :src="listData.list[0].web_img_uri" class="banner_img" loading="lazy" />
<div class="text">{{ listData.list[0].title }}</div>
</template>
</app-link>
</div>
</div>
</AppCard> </AppCard>
</template> </template>
<script> <script>
...@@ -68,31 +85,132 @@ export default { ...@@ -68,31 +85,132 @@ export default {
}, },
formatDate(value) { formatDate(value) {
const date = new Date(value * 1000) const date = new Date(value * 1000)
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() return date.getMonth() + 1 + '/' + date.getDate()
},
formatYear(value) {
const date = new Date(value * 1000)
return date.getFullYear()
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.main {
display: flex;
}
.home-class { .home-class {
padding-top: 80px;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 80px auto;
.banner { .banner_con {
width: 1200px; position: relative;
display: block; width: 600px;
height: 450px;
.banner_img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.text {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
line-height: 40px;
background: rgba(0, 0, 0, 0.5);
padding: 0 20px;
font-size: 20px;
color: #fefefe;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
ul { ul {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
padding-top: 27px; width: 600px;
padding: 79px 30px 64px 0;
li { li {
width: 285px; width: 568px;
height: 287px; height: 84px;
background: #ffffff;
padding: 43px 22px 34px;
box-sizing: border-box; box-sizing: border-box;
cursor: pointer; cursor: pointer;
margin-bottom: 33px;
.main_content {
display: flex;
align-items: center;
.time {
width: 76px;
height: 84px;
background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.1);
border-radius: 6px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.date {
font-size: 26px;
font-weight: normal;
color: #999999;
opacity: 0.8;
}
.year {
font-size: 24px;
font-weight: normal;
color: #999999;
opacity: 0.8;
}
}
.content_right {
margin-left: 17px;
.tit {
font-size: 18px;
font-weight: 500;
line-height: 24px;
color: #333333;
}
.desc {
font-size: 14px;
font-weight: 400;
line-height: 22px;
color: #666666;
margin-top: 11px;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //超出第几行，关键在这里
line-clamp: 2; //超出第几行，关键在这里
}
}
}
&:hover {
.main_content {
.content_right {
.tit {
color: #aa1941;
}
}
.time {
background: #aa1941;
text-align: center;
.date {
color: #ffffff;
}
.year {
color: #ffffff;
}
}
}
}
.logo { .logo {
width: 89px; width: 89px;
display: block; display: block;
......
components/home/projectNotice.vue
浏览文件 @ 6c796606
...@@ -95,19 +95,18 @@ export default { ...@@ -95,19 +95,18 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.home-news { .home-news {
padding-top: 80px;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 80px auto;
.news-content { .news-content {
margin-top: 15px; margin-top: 15px;
display: flex; display: flex;
.left-content { .left-content {
width: 771px; width: 600px;
height: 282px; height: 282px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px 29px rgba(0, 0, 0, 0.03); box-shadow: 0px 0px 29px rgba(0, 0, 0, 0.03);
padding: 60px 88px 60px 74px; padding: 72px 49px 18px 51px;
display: flex; display: flex;
.tit { .tit {
font-size: 34px; font-size: 34px;
...@@ -142,22 +141,21 @@ export default { ...@@ -142,22 +141,21 @@ export default {
width: 430px; width: 430px;
font-size: 18px; font-size: 18px;
font-weight: 400; font-weight: 400;
// line-height: 100%;
color: #424242; color: #424242;
text-align: center; text-align: center;
} }
.time { .time {
font-size: 30px; font-size: 30px;
font-weight: bold; font-weight: bold;
line-height: 100%;
color: #aa1941; color: #aa1941;
margin-left: 40px; white-space: nowrap;
margin-left: 10px;
} }
} }
} }
} }
.right-content { .right-content {
margin-left: auto; margin-left: 81px;
ul { ul {
li { li {
display: flex; display: flex;
...@@ -198,7 +196,7 @@ export default { ...@@ -198,7 +196,7 @@ export default {
} }
} }
.text { .text {
width: 275px; width: 423px;
font-size: 18px; font-size: 18px;
line-height: 24px; line-height: 24px;
color: #424242; color: #424242;
......
components/home/projectService.vue 0 → 100644
浏览文件 @ 6c796606
<template>
<div class="home_menu">
<h2 class="menu_title">产品与服务</h2>
<div class="menu_card">
<div class="menu_card_top">
<div class="card_top_left">
<div class="left_gov">
<Goverment />
</div>
<div class="left_school">
<School />
</div>
</div>
<div class="card_top_right">
<Company />
</div>
</div>
<div class="menu_card_bottom">
<Personal />
</div>
</div>
</div>
</template>
<script>
import Goverment from './projectService/goverment.vue'
import School from './projectService/school.vue'
import Company from './projectService/company.vue'
import Personal from './projectService/personal.vue'
export default { components: { Goverment, School, Company, Personal } }
</script>
<style lang="scss" scoped>
.home_menu {
max-width: 1200px;
margin: 65px auto;
.menu_title {
font-size: 30px;
font-weight: bold;
color: #333333;
}
.menu_card {
margin-top: 20px;
.menu_card_top {
width: 100%;
height: 510px;
display: flex;
.card_top_left {
width: 980px;
height: 100%;
.left_gov {
width: 100%;
height: 245px;
background: #ffffff;
padding: 30px;
box-sizing: border-box;
}
.left_school {
width: 100%;
height: 245px;
margin-top: 20px;
padding: 30px;
background: #ffffff;
}
}
.card_top_right {
width: 200px;
height: 100%;
margin-left: 20px;
background: #ffffff;
}
}
.menu_card_bottom {
width: 100%;
height: 643px;
background: #ffffff;
margin-top: 18px;
padding: 30px;
}
}
}
</style>
components/home/projectService/company.vue 0 → 100644
浏览文件 @ 6c796606
<template>
<div class="main_content">
<div class="content_com">
<h5 class="gov_tit">企业</h5>
<ul class="gov_con">
<li v-for="(item, index) in companyList" :key="index">
<div class="con_desc" v-html="item.desc"></div>
</li>
</ul>
</div>
<img class="com_img" src=" https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/company/clip.png" alt="" />
</div>
</template>
<script>
export default {
data() {
return {
companyList: [
{
desc: `数字化转型 <br />高级研修<br />项目`
},
{
desc: '成功案例'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.main_content {
position: relative;
.content_com {
padding: 30px;
box-sizing: border-box;
.gov_tit {
font-size: 20px;
font-weight: 500;
color: #333333;
border-left: 4px solid #aa1941;
padding-left: 6px;
line-height: 1;
}
.gov_con {
margin-top: 31px;
display: flex;
flex-direction: column;
align-items: center;
li {
width: 100px;
height: 134px;
border: 1px solid #dbdbdb;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
white-space: nowrap;
cursor: pointer;
.con_desc {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #555454;
text-align: center;
margin-top: 12px;
}
&:hover {
background: #aa1941;
.con_desc {
color: #ffffff;
}
}
}
li:nth-child(1) {
margin-top: 58px;
}
li:nth-child(2) {
margin-top: 40px;
}
}
}
.com_img {
width: 200px;
height: 218.79px;
position: absolute;
top: 292px;
}
}
</style>
components/home/projectService/goverment.vue 0 → 100644
浏览文件 @ 6c796606
<template>
<div>
<h5 class="gov_tit">政府</h5>
<ul class="gov_con">
<li v-for="(item, index) in govList" :key="index">
<template v-if="!item.isChild">
<div class="con_desc" v-html="item.desc"></div>
</template>
<template v-else>
<div class="con_part">
<img :src="item.img" class="icon" />
<img :src="item.imgActive" alt="" class="icon_active" />
<div class="con_desc" v-html="item.desc"></div>
</div>
</template>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
govList: [
{
img: '',
imgActive: '',
desc: `数字人才<br />产教融合<br />实践基地`,
isChild: false
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/gov/icon_gongjian.png',
imgActive: 'https://webapp-pub.ezijing.com/www/pc/home/gov/icon_gongjian_active.png',
desc: `数字经济<br />产业学院`,
isChild: true
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_shiyan.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_shiyan_active.png',
desc: `数字经济 <br />实验室`,
isChild: true
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_1%2Bx.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_1%2Bx_active.png',
desc: `数字经济 <br />职业技能中心`,
isChild: true
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_pt.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/gov/icon_pt_active.png',
desc: `数字经济产业& <br />人才服务平台`,
isChild: true
},
{
img: '',
imgActive: '',
desc: `数字化管理<br />高级培训`,
isChild: false
},
{
img: '',
imgActive: '',
desc: `紫荆E-SAAS <br />平台`,
isChild: false
},
{
img: '',
imgActive: '',
desc: `成功案例`,
isChild: false
}
]
}
}
}
</script>
<style lang="scss" scoped>
.gov_tit {
font-size: 20px;
font-weight: 500;
color: #333333;
border-left: 4px solid #aa1941;
padding-left: 6px;
line-height: 1;
}
.gov_con {
margin-top: 31px;
display: flex;
li {
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
white-space: nowrap;
cursor: pointer;
.con_part {
width: 100px;
height: 106px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.icon_active {
display: none;
}
}
.con_desc {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #555454;
text-align: center;
margin-top: 12px;
}
}
li:nth-child(1) {
width: 100px;
height: 134px;
border-left: 1px solid #dbdbdb;
border-right: 1px solid #dbdbdb;
background: #f6f5f5;
}
li:nth-child(2) {
padding-left: 14px;
}
li:nth-child(2),
li:nth-child(3),
li:nth-child(4) {
width: 100px;
}
li:nth-child(5) {
width: 150px;
height: 134px;
border-right: 1px solid #dbdbdb;
}
li:nth-child(6),
li:nth-child(7),
li:nth-child(8) {
width: 100px;
height: 134px;
margin-left: 20px;
border: 1px solid #dbdbdb;
}
li:nth-child(2):hover,
li:nth-child(3):hover,
li:nth-child(4):hover,
li:nth-child(5):hover {
.con_part {
background: #aa1941;
.icon_active {
display: block;
}
.icon {
display: none;
}
.con_desc {
color: #ffffff;
}
}
}
li:nth-child(1):hover,
li:nth-child(6):hover,
li:nth-child(7):hover,
li:nth-child(8):hover {
background: #aa1941;
.con_desc {
color: #ffffff;
}
}
}
</style>
components/home/projectService/personal.vue 0 → 100644
浏览文件 @ 6c796606
<template>
<div class="main_content">
<h5 class="gov_tit">个人</h5>
<div class="content_top">
<h6 class="top_title">国际学位</h6>
<div class="top_con">
<div class="con_left">
<div class="left_tit">— 硕士 —</div>
<ul class="left_con">
<li v-for="(item, index) in masterList" :key="index">
<AppLink :data="item">
<img :src="item.img" alt="" class="con_img" />
<div class="con_desc" v-html="item.desc"></div>
</AppLink>
</li>
</ul>
</div>
<div class="con_left">
<div class="left_tit">— MBA —</div>
<ul class="left_con left_con2">
<li v-for="(item, index) in mbaList" :key="index">
<AppLink :data="item">
<img :src="item.img" alt="" class="con_img" />
<div class="con_desc" v-html="item.desc"></div>
</AppLink>
</li>
</ul>
</div>
</div>
</div>
<div class="content_top">
<h6 class="top_title">留学深造</h6>
<div class="top_con">
<div class="con_left">
<div class="left_tit">— 硕士直通车 —</div>
<ul class="left_con1">
<li v-for="(item, index) in masterAbroadList" :key="index">
<AppLink :data="item">
<div class="con">
<img :src="item.img" alt="" class="con_img" />
<div class="con_desc" v-html="item.desc"></div>
</div>
</AppLink>
</li>
</ul>
</div>
<div class="con_left">
<div class="left_tit">— 博士 —</div>
<ul class="left_con1 left_con2">
<li v-for="(item, index) in doctorList" :key="index">
<AppLink :data="item">
<div class="con">
<img :src="item.img" alt="" class="con_img" />
<div class="con_desc" v-html="item.desc"></div>
</div>
</AppLink>
</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
components: { AppLink },
data() {
return {
masterList: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_med1.png',
desc: '教育学硕士(儿童)<br/>MED',
href: 'https://cu.ezijing.com/'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_msf.png',
desc: '金融硕士<br/>MSF',
href: 'https://kelley.ezijing.com/'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_map.png',
desc: '应用心理学硕士<br/>MAP',
href: 'https://ciis.ezijing.com/'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/master_med2.png',
desc: '教育学硕士(家庭) <br/>MED',
href: 'https://cuw.ezijing.com/index'
}
],
mbaList: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba1.png',
desc: '数字领导力方向<br/>MBA',
href: 'https://marywood.ezijing.com/'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba2.png',
desc: '酒店和旅游方向<br/>MBA',
href: 'https://shms.ezijing.com/'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/mba3.png',
desc: '餐饮管理方向<br/>MBA',
href: 'https://caas.ezijing.com/'
}
],
masterAbroadList: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad1.png',
desc: '纽约州立大学石溪分校<br/>金融学硕士保研项目',
href: 'https://sbu-plus.ezijing.com/'
},
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad2.png',
desc: '斯蒂文斯理工学院<br/>工程管理硕士保研项目',
href: 'https://sit-plus.ezijing.com/'
}
],
doctorList: [
{
img: 'https://webapp-pub.ezijing.com/www/pc/home/personal/abroad3.png',
desc: '加州浸会大学<br/>工商管理博士项目DBA',
href: 'https://cbu-plus.ezijing.com/'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.gov_tit {
font-size: 20px;
font-weight: 500;
color: #333333;
border-left: 4px solid #aa1941;
padding-left: 6px;
line-height: 1;
}
.content_top {
margin-top: 48px;
.top_title {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.top_con {
margin-top: 10px;
display: flex;
.con_left {
height: 192px;
display: flex;
flex-direction: column;
align-items: center;
.left_tit {
font-size: 16px;
color: #000000;
}
.left_con {
display: flex;
justify-content: space-around;
margin-top: 10px;
li {
width: 148px;
height: 156px;
opacity: 1;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
cursor: pointer;
&:hover {
background: #aa1940;
.con_desc {
color: #f9f8f8;
}
}
.con_img {
width: 128px;
height: 90px;
}
.con_desc {
text-align: center;
margin-top: 10px;
font-size: 14px;
line-height: 18px;
color: #333333;
}
}
li:last-child {
margin-right: 37px;
}
}
.left_con1 {
display: flex;
margin-top: 30px;
li {
width: 342px;
height: 130px;
background: #f9f8f8;
box-sizing: border-box;
.con {
width: 342px;
height: 130px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 16px 10px 10px;
}
&:hover {
background: #aa1940;
.con_desc {
color: #f9f8f8;
}
}
.con_img {
width: 160px;
height: 110px;
}
.con_desc {
margin-left: 16px;
white-space: nowrap;
text-align: center;
width: 140px;
font-size: 14px;
line-height: 18px;
color: #333333;
}
}
li:nth-child(2) {
margin-left: 40px;
}
li:last-child {
margin-right: 37px;
}
}
.left_con2 {
padding-left: 35px;
border-left: 1px dashed #c4c4c4;
}
}
}
}
</style>
components/home/projectService/school.vue 0 → 100644
浏览文件 @ 6c796606
<template>
<div>
<h5 class="gov_tit">院校</h5>
<ul class="gov_con">
<li v-for="(item, index) in schoolList" :key="index">
<template v-if="!item.isChild">
<div class="con_desc" v-html="item.desc"></div>
</template>
<template v-else>
<div class="con_part">
<div class="img_box">
<img :src="item.img" class="icon" />
<img :src="item.imgActive" class="icon_active" />
</div>
<div class="con_desc" v-html="item.desc"></div>
</div>
</template>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
schoolList: [
{
desc: `数字经济 <br />产业学院`,
isChild: false
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_gz.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_gz_active.png',
desc: `数字化改造`,
isChild: true
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_sy.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_sy_active.png',
desc: `数字经济实验室`,
isChild: true
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_yf.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_yf_active.png',
desc: `教学研发`,
isChild: true
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_rx.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_rx_active.png',
desc: `引产入校`,
isChild: true
},
{
img: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_jy.png',
imgActive: 'https://webapp-pub.oss-cn-beijing.aliyuncs.com/www/pc/home/school/icon_jy_active.png',
desc: `实习就业`,
isChild: true
},
{
desc: `成功案例`,
isChild: false
}
]
}
}
}
</script>
<style lang="scss" scoped>
.gov_tit {
font-size: 20px;
font-weight: 500;
color: #333333;
border-left: 4px solid #aa1941;
padding-left: 6px;
line-height: 1;
}
.gov_con {
margin-top: 31px;
display: flex;
li {
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
white-space: nowrap;
cursor: pointer;
.con_part {
width: 100px;
height: 106px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.img_box {
width: 64px;
height: 64px;
background: #f6f5f5;
border-radius: 50%;
text-align: center;
line-height: 64px;
display: flex;
justify-content: center;
align-items: center;
.icon {
display: block;
}
.icon_active {
display: none;
}
}
}
.con_desc {
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #555454;
text-align: center;
margin-top: 12px;
}
}
li:nth-child(1) {
width: 100px;
height: 134px;
border-left: 1px solid #dbdbdb;
border-right: 1px solid #dbdbdb;
background: #f6f5f5;
}
li:nth-child(2),
li:nth-child(3),
li:nth-child(4),
li:nth-child(5),
li:nth-child(6) {
width: 138px;
}
li:nth-child(6) {
border-right: 1px solid #dbdbdb;
}
li:nth-child(7) {
width: 100px;
height: 134px;
margin-left: 20px;
border: 1px solid #dbdbdb;
}
li:nth-child(2):hover,
li:nth-child(3):hover,
li:nth-child(4):hover,
li:nth-child(5):hover,
li:nth-child(6):hover {
.con_part {
.img_box {
background: #aa1941;
.icon_active {
display: block;
}
.icon {
display: none;
}
}
.con_desc {
color: #aa1941;
}
}
}
li:nth-child(1):hover,
li:nth-child(7):hover {
background: #aa1941;
.con_desc {
color: #ffffff;
}
}
}
</style>
langs/zh-CN.js
浏览文件 @ 6c796606
export default { export default {
menu: { menu: {
about: '关于紫荆', about: '关于紫荆',
contact: '政府教育合作',
services: '教育服务', services: '教育服务',
degree: '在线国际学位', degree: '在线国际学位',
industrialCollege: '数字经济产业学院', industrialCollege: '数字经济产业学院',
...@@ -15,6 +16,7 @@ export default { ...@@ -15,6 +16,7 @@ export default {
openLesson: '公开课', openLesson: '公开课',
contact: '联系我们' contact: '联系我们'
}, },
servicesChild: { servicesChild: {
cert: '岗课赛证', cert: '岗课赛证',
x: '1+X', x: '1+X',
...@@ -63,7 +65,7 @@ export default { ...@@ -63,7 +65,7 @@ export default {
doctorChild: { doctorChild: {
edd: '工商管理博士DBA', edd: '工商管理博士DBA',
studyAbroad: '海外留学2+1（即将推出）', studyAbroad: '海外留学2+1（即将推出）',
cbu_online:'工商管理博士DBA' cbu_online: '工商管理博士DBA'
} }
}, },
industrialCollegeChild: { industrialCollegeChild: {
......
pages/index.vue
浏览文件 @ 6c796606
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
<div class="home"> <div class="home">
<!-- 轮播图 --> <!-- 轮播图 -->
<banner /> <banner />
<HomeMenu /> <project-service />
<!-- <HomeMenu /> -->
<!-- 产业学院 --> <!-- 产业学院 -->
<!-- <industrial-college /> --> <!-- <industrial-college /> -->
<!-- 学位教育 --> <!-- 学位教育 -->
...@@ -14,9 +15,9 @@ ...@@ -14,9 +15,9 @@
<!-- 项目公告 --> <!-- 项目公告 -->
<project-notice /> <project-notice />
<!-- 教育服务案例 --> <!-- 教育服务案例 -->
<service-case /> <!-- <service-case /> -->
<!-- 校长寄语 --> <!-- 校长寄语 -->
<headmaster-msg /> <!-- <headmaster-msg /> -->
<!-- 校友故事 --> <!-- 校友故事 -->
<alumni-stories /> <alumni-stories />
<!-- 公开课 --> <!-- 公开课 -->
...@@ -26,6 +27,7 @@ ...@@ -26,6 +27,7 @@
<script> <script>
import banner from '../components/home/banner' import banner from '../components/home/banner'
import projectService from '../components/home/projectService.vue'
import HomeMenu from '@/components/home/homeMenu' import HomeMenu from '@/components/home/homeMenu'
import degreeEducation from '../components/home/degreeEducation' import degreeEducation from '../components/home/degreeEducation'
import educationServices from '../components/home/educationServices' import educationServices from '../components/home/educationServices'
...@@ -39,6 +41,7 @@ import onlineEdu from '../components/home/onlineEdu' ...@@ -39,6 +41,7 @@ import onlineEdu from '../components/home/onlineEdu'
export default { export default {
components: { components: {
banner, banner,
projectService,
HomeMenu, HomeMenu,
degreeEducation, degreeEducation,
educationServices, educationServices,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论