提交 05eb4791 authored 作者: pengxiaohui's avatar pengxiaohui

修改

上级 90eec3ae
<template>
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</template>
<script>
import appLink from '@/components/Link'
export default {
props: {
type: {
type: String,
default: 'article_news'
}
},
components: { appLink },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.type,
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
.pages-box{
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
}
</style>
......@@ -113,7 +113,7 @@ export default {
position: relative;
img {
width: 100%;
height:600px;
height:500px;
display: block;
}
.pop-txt-box {
......
......@@ -148,7 +148,7 @@ export default {
font-size: 18px;
line-height: 32px;
color: #ffffff;
width: 281px;
width: 260px;
background: #a9a9a9;
border-radius: 4px;
text-align: center;
......@@ -157,6 +157,7 @@ export default {
.tips{
color:#a9a9a9;
line-height:30px;
text-align:center;
}
}
}
......
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
<new-list :type="type"/>
</div>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/about/tabNav'
import newList from '@/components/about/newList'
export default {
components: { tab, appLink },
components: { tab, newList },
data() {
return {
listData: [],
......@@ -46,38 +17,12 @@ export default {
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: this.currentPaeg,
limit: 10
computed: {
type() {
return this.$route.query.type
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
......@@ -95,78 +40,4 @@ export default {
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
</style>
<template>
<div class="news-content">
<tab />
<div class="news-content-box">
<img
src="https://zws-imgs-pub.ezijing.com/static/public/a72ef577c9bae694c6bfc33e5bfc93af.png"
alt=""
class="banner"
/>
<ul class="list-content">
<template v-for="(item, index) in listData">
<li :key="index">
<app-link :item="{ news: { data: item, path: '/about/news' } }">
<img :src="item.web_img_uri" alt="" />
<div class="right-con">
<div class="time">{{ formatDate(item.start_time) }}</div>
<div class="title">{{ item.title }}</div>
<div class="text">{{ item.abstract }}</div>
</div>
</app-link>
</li>
</template>
</ul>
<div class="pages-box">
<el-pagination
layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="limit"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
</template>
<script>
import appLink from '@/components/Link'
import tab from '@/components/about/tabNav'
export default {
components: { tab, appLink },
data() {
return {
listData: [],
currentPaeg: 1,
total: 0,
limit: 10
}
},
async fetch() {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: this.currentPaeg,
limit: 10
}
this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = res.data.total
return res.data.data
})
},
methods: {
handleCurrentChange(num) {
this.initData(num)
},
initData(num) {
const params = {
project_id: process.env.projectId,
type_tag: this.$route.query.type || 'article_news',
page: num,
limit: 10
}
this.listData = this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => {
this.total = parseInt(res.data.total)
this.listData = res.data.data
})
},
formatDate(value) {
const date = new Date(value * 1000)
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
}
}
}
</script>
<style lang="scss" scoped>
.pages-box{
display: flex;
padding-bottom: 50px;
background: #fff;
justify-content: center;
}
.news-content {
width: 1200px;
margin: 0 auto;
padding-top: 63px;
display: flex;
justify-content: space-between;
}
.news-content-box {
width: 1000px;
padding-bottom: 100px;
display: block;
.banner {
width: 100%;
display: block;
}
.list-content {
width: 1000px;
padding: 50px;
background: #fff;
li {
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
padding-bottom: 36px;
cursor: pointer;
::v-deep a {
display: flex;
flex-wrap: wrap;
height: fit-content;
}
&:hover {
.right-con {
background: rgba(241, 241, 241, 0.6);
.text {
color: #141414;
}
}
}
img {
width: 320px;
height: 100%;
display: block;
}
.right-con {
width: 550px;
margin-left: 15px;
padding-left: 15px;
.time {
font-size: 16px;
font-weight: 300;
line-height: 100%;
color: #aa1941;
// padding-top: 13px;
}
.title {
font-size: 22px;
font-weight: bold;
line-height: 32px;
color: #141414;
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.text {
font-size: 14px;
font-weight: 300;
line-height: 24px;
color: #666666;
margin-top: 15px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
}
}
}
</style>
......@@ -2,7 +2,7 @@
<div class="college-content">
<div class="mian-title">{{ $t('menu.servicesChild.college') }}</div>
<div class="mian">
<tab :data="tabList" @tabChangeIndex="tabChangeIndex" />
<tab :data="tabList" :defaultActive="defaultActive" @tabChangeIndex="tabChangeIndex" />
<div class="college-content-mian">
<template v-if="showModule === 0">
<div class="module-1 module-content-box">
......@@ -36,10 +36,6 @@
数字经济产业学院共建目标
</p>
<img src="https://webapp-pub.ezijing.com/www/pc/services/college/power_01.png" alt="" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image41.png" alt="" v-if="tabActive === 0" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image42.png" alt="" v-if="tabActive === 1" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image43.png" alt="" v-if="tabActive === 2" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image44.png" alt="" v-if="tabActive === 3" />
<ul>
<li
v-for="(item, index) in navList"
......@@ -51,6 +47,12 @@
<div class="name">{{ item.name }}</div>
</li>
</ul>
<div class="img-content">
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image41.png" alt="" v-if="tabActive === 0" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image42.png" alt="" v-if="tabActive === 1" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image43.png" alt="" v-if="tabActive === 2" />
<img src="https://webapp-pub.ezijing.com/www/pc/industry/image44.png" alt="" v-if="tabActive === 3" />
</div>
<div v-if="tabActive === 0" class="part">
<ul>
<li>数字经济人才国家战略</li>
......@@ -129,23 +131,25 @@
:key="index"
class="li"
@click="tabsClick(item, index)"
:class="{ active: index === tabsActive }"
@mouseenter="handleMsEnter(index)"
@mouseleave="handleMsLeave"
:class="{ active: index === tabsActive, isHover: index === hoverIndex }"
>
<img :src="index === tabsActive ? item.activeImg : item.img" alt="" style="width:43px;height:43px" />
<img :src="index === tabsActive || index === hoverIndex ? item.activeImg : item.img" alt="" style="width:43px;height:43px" />
<div class="name">{{ item.name }}</div>
<p >{{ item.dec }}</p>
</li>
</ul>
<div class="content-mian">
<div class="content-mian" style="padding-top:10px;">
<div class="con-img-box" v-if="tabsActive === 0">
<img
<!-- <img
:src="
$cookies.get('lang') == 'en-US'
? 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png'
: 'https://webapp-pub.ezijing.com/www/pc/industry/image6.png'
"
alt=""
/>
/> -->
<div style="position:relative;width:900px;height:262px;margin-bottom:60px">
<img
:src="
......@@ -356,15 +360,20 @@
</div>
</div>
</template>
<template v-if="showModule === 2">
<new-list type="service_case" />
</template>
</div>
</div>
</div>
</template>
<script>
import tab from '../../components/services/tab'
import newList from '../../components/about/newList'
export default {
components: {
tab
tab,
newList
},
data() {
return {
......@@ -444,13 +453,19 @@ export default {
],
tabActive: 0,
tabsActive: 0,
defaultActive: 0,
showModule: 0,
count: 0
count: 0,
hoverIndex: -1
}
},
created() {
this.tabActive = 0
this.tabsActive = 0
if (this.$route.query.type) {
this.defaultActive = parseInt(this.$route.query.type)
this.showModule = parseInt(this.$route.query.type)
}
// const type = this.$route.query.type
// this.showModule = type ? parseInt(type) : 0
const timer = setInterval(() => {
......@@ -469,10 +484,16 @@ export default {
this.tabsActive = index
},
tabChangeIndex(n) {
if (n === 2) {
this.$router.push({ path: '/about/news', query: { type: 'service_case' } })
}
// if (n === 2) {
// this.$router.push({ path: '/about/news', query: { type: 'service_case' } })
// }
this.showModule = n
},
handleMsEnter(index) {
this.hoverIndex = index
},
handleMsLeave() {
this.hoverIndex = -1
}
},
computed: {
......@@ -517,7 +538,7 @@ export default {
font-size: 14px;
font-weight: 300;
line-height: 28px;
color: #777777;
color: #444;
opacity: 1;
}
......@@ -637,7 +658,7 @@ export default {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 62px;
margin-bottom: 32px;
// li {
// // padding: 15px;
// margin-left: 25px;
......@@ -669,7 +690,19 @@ export default {
}
}
}
.img-content{
height:280px;
position:relative;
overflow: hidden;
margin-bottom:30px;
img{
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:100%;
}
}
.part {
li {
list-style-type: disc;
......@@ -684,24 +717,28 @@ export default {
.module-2 {
ul {
display: flex;
justify-content: center;
justify-content: space-around;
align-items: center;
width:900px;
margin:0 auto;
.li {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 151px;
height: 156px;
width: 130px;
height: 132px;
background: #f4f4f4;
cursor:pointer;
border-radius:4px;
transition:0.3s;
.name{
font-size: 16px;
color: #424242;
font-weight: 400;
}
}
.active {
.active, .isHover {
background: #a81840;
border-top: 6px solid #a81840;
.name{
......@@ -711,6 +748,9 @@ export default {
color:#fff;
}
}
.isHover{
transform: translateY(-10px);
}
}
.content-mian {
......
......@@ -162,8 +162,10 @@
? 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png'
: 'https://webapp-pub.ezijing.com/www/pc/services/job/future_manage_11.png'
"
style="margin-bottom:35px;"
style="margin-bottom:20px;"
/>
<div class="module-title" style="margin-bottom:15px;">{{isEn ? '注册报名' : '注册报名'}}</div>
<presence />
</div>
</div>
</template>
......
......@@ -502,25 +502,9 @@
/>
<div class="module-title">{{isEn ? '专业分类' : '专业分类'}}</div>
<div class="tabs">
<div :class="{item: true, active: module6TabActive === 0}" @click="module6TabActive = 0">
<img v-show="module6TabActive !== 0" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1.png">
<img v-show="module6TabActive === 0" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1_on.png">
<p>人工智能方向</p>
</div>
<div :class="{item: true, active: module6TabActive === 1}" @click="module6TabActive = 1">
<img v-show="module6TabActive !== 1" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2.png">
<img v-show="module6TabActive === 1" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2_on.png">
<p>数据技术方向</p>
</div>
<div :class="{item: true, active: module6TabActive === 2}" @click="module6TabActive = 2">
<img v-show="module6TabActive !== 2" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3.png">
<img v-show="module6TabActive === 2" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3_on.png">
<p>云计算方向</p>
</div>
<div :class="{item: true, active: module6TabActive === 3}" @click="module6TabActive = 3">
<img v-show="module6TabActive !== 3" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4.png">
<img v-show="module6TabActive === 3" src="https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4_on.png">
<p>网络安全方向</p>
<div :class="{item: true, active: module6TabActive === index, isHover: module6TabHoverIndex === index}" v-for="(item, index) in module6TabList" :key="index" @click="module6TabActive = index" @mouseenter="module6TabHoverIndex = index" @mouseleave="module6TabHoverIndex = -1">
<img :src="module6TabActive === index || module6TabHoverIndex === index ? item.active_icon : item.icon">
<p>{{item.text}}</p>
</div>
</div>
<div v-show="module6TabActive === 0">
......@@ -1005,7 +989,30 @@ export default {
prevEl: '.swiper-button-prev',
}
},
module6TabActive: 0
module6TabActive: 0,
module6TabHoverIndex: -1,
module6TabList: [
{
icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1.png',
active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon1_on.png',
text: '人工智能方向'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2.png',
active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon2_on.png',
text: '数据技术方向'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3.png',
active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon3_on.png',
text: '云计算方向'
},
{
icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4.png',
active_icon: 'https://webapp-pub.ezijing.com/www/pc/services/major/page6_tab_icon4_on.png',
text: '网络安全方向'
}
]
}
},
created() {
......@@ -1231,13 +1238,16 @@ export default {
.tabs{
display:flex;
.item{
width:150px;
height:150px;
width:130px;
height:130px;
background: #F4F4F4;
text-align:center;
box-sizing:border-box;
padding-top:30px;
border-top:6px solid #f4f4f4;
border-radius: 4px;
margin-right:20px;
transition:0.3s;
cursor:pointer;
img{
width:42px;
......@@ -1246,11 +1256,14 @@ export default {
margin-bottom:16px;
}
}
.item.active{
.item.active, .item.isHover{
border-color:#aa1941;
background:#aa1941;
color:#fff;
}
.item.isHover{
transform: translateY(-10px);
}
}
.img-text{
position:relative;
......
差异被折叠。
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论