You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

128 lines
3.5 KiB

<!--
* @Author: wally
* @email: 18603454788@163.com
* @Date: 2021-01-13 17:21:29
* @LastEditors: wally
* @LastEditTime: 2021-01-19 11:16:22
-->
<template>
<div style="padding-bottom: 50px">
<banner :show-page="showPage" />
<h-nav />
<div class="inner">
<bread-crumb :arr="arr" />
</div>
<div class="inner d-flex flex-nowrap justify-space-between">
<div :key="index" @click="jump(item.url)" class="content-box" v-for="(item, index) in list">
<img :src="item.imgUrl" />
<div class="con-title">{{ item.title }}</div>
<div class="con-con">{{ item.content }}</div>
<!-- <div class="d-flex justify-space-between" v-if="index % 2 === 0">
<div class="introduce-box">
<p class="introduce-title">{{ item.title }}</p>
<p class="introduce-content">{{ item.content }}</p>
</div>
<img :src="item.imgUrl" style="width: 452px" />
</div>
<div class="d-flex justify-space-between" v-else>
<img :src="item.imgUrl" style="width: 452px" />
<div class="introduce-box">
<p class="introduce-title">{{ item.title }}</p>
<p class="introduce-content">{{ item.content }}</p>
</div>
</div> -->
</div>
</div>
</div>
</template>
<script>
import Banner from 'components/Banner/Banner.vue';
import HNav from './../components/HNav.vue';
import BreadCrumb from 'components/BreadCrumb/BreadCrumb.vue';
export default {
name: 'News',
components: { HNav, Banner, BreadCrumb },
data() {
return {
str: '这是政策界面',
title: '创新资源平台',
typeOfPlatform: '创新平台',
arr: [
{ name: '创新平台', url: '/NewPlatform/NewCore' },
{ name: '创新资源平台', url: '' },
],
showPage: 32,
list: [
{
title: '科技资源开放共享服务平台',
content: '研发试验、检验检测、资源共享',
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/86d502b304944e0c849bff8dcf55ac08.jpg',
url: '/NewPlatform/Share',
},
{
title: '知识产权与技术转移转化服务平台',
content: '知识产权、成果转化、技术转移',
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/4f9b898da25e48d3b73b47345ed14a9a.jpg',
url: '/NewPlatform/Transfer',
},
{
title: '知识培训与科技人才服务平台',
content: '技术培训、管理培训、知识讲座',
imgUrl: 'https://www.sxwikionline.com/gateway/greenvalley/uploads/upload/20210104/f5fb570cfd7547279138a591818325e0.jpg',
url: '/NewPlatform/Develop',
},
],
};
},
methods: {
jump(url) {
this.$router.push(url);
},
},
};
</script>
<style lang="stylus" scoped>
.inner {
margin: 10px auto 15px;
}
.content-box {
padding: 0 !important;
width: 30%;
height: auto !important;
margin: 50px 0;
cursor: pointer;
position: relative;
img {
width: 100%;
}
}
.con-title {
position: absolute;
bottom: 23px;
color: #ffffff;
font-size: 1.6rem;
text-align: center;
width: 100%;
background-image: linear-gradient(rgba(#545454, 0), rgba(0, 0, 0, 0.6));
}
@media only screen and (max-width: 1650px) {
.con-title {
font-size: 1rem;
}
}
.con-con {
background: white;
box-shadow: 0 0 6px #ccc;
height: 26%;
display: flex;
justify-content: center;
align-items: center;
}
</style>