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.

169 lines
3.9 KiB

<template>
<div>
<div>
<div class="block">
<el-carousel height="35vh">
<el-carousel-item v-for="item in imagelist" :key="item">
<img :src="item" alt="" />
</el-carousel-item>
</el-carousel>
</div>
</div>
<sidebar :num="typeNum" />
<div class="content">
<div class="content-top-box">
<div class="top-box-img" v-for="(item, index) in platform" :key="index">
<img :src="item.img" alt="" />
<p>{{ item.size }}</p>
</div>
</div>
<div class="content-bottom-box">
<div
class="bottom-box-content"
v-for="(item, index) in frame"
:key="index"
>
<p>{{ item.title }}</p>
<ul>
<li v-for="(x, y) in item.list" :key="y">{{ x }}</li>
</ul>
</div>
</div>
</div>
</div>
</template>
<script>
import Sidebar from '@/components/Sidebar'
export default {
name: 'FirstPage',
components: { Sidebar },
data () {
return {
typeNum: 0,
imagelist: ['./../../static/lb001.jpg', './../../static/lb002.jpg', './../../static/lb003.jpg'],
platform: [{
img: './../../static/item001.jpg',
url: '',
size: '创新平台'
}, {
img: './../../static/item002.jpg',
url: '',
size: '孵化平台'
}, {
img: './../../static/item003.jpg',
url: '',
size: '产业平台'
}],
frame: [{
title: '行业资讯',
list: ['行业资讯行业资讯行业资讯行业资讯行业资讯', '行业资讯行业资讯行业资讯行业资讯行业资讯', '行业资讯', '行业资讯', '行业资讯行业资讯行业资讯行业资讯行业资讯'],
url: ''
}, {
title: '活动公告',
list: ['活动公告', '活动公告', '活动公告活动公告活动公告活动公告活动公告', '活动公告活动公告活动公告活动公告活动公告', '活动公告'],
url: ''
}, {
title: '创新挑战',
list: ['创新挑战', '创新挑战创新挑战创新挑战创新挑战创新挑战', '创新挑战', '创新挑战', '创新挑战创新挑战创新挑战创新挑战创新挑战'],
url: ''
}]
}
},
methods: {}
}
</script>
<style lang="scss" scoped>
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
background-color: #d3dce6;
}
.el-carousel__item img {
height: 100%;
width: 100%;
}
.content {
padding: 18px 0;
box-sizing: border-box;
width: 60%;
height: 50vh;
margin: 0 auto;
}
.content-top-box {
display: flex;
height: 45%;
width: 100%;
margin-bottom: 20px;
}
.content-bottom-box {
display: flex;
height: 50%;
width: 100%;
// overflow: hidden;
}
.top-box-img {
flex: 1;
position: relative;
border-radius: 10px;
margin-right: 20px;
cursor: pointer;
box-shadow: 2px 2px 5px #707070;
}
.top-box-img p {
position: absolute;
bottom: 0;
background: #707070;
color: #f0f0f0;
height: 36px;
line-height: 36px;
font-size: 1.1rem;
font-weight: 600;
text-align: center;
width: 100%;
border-radius: 0 0 10px 10px;
}
.top-box-img img {
height: 100%;
width: 100%;
border-radius: 10px;
}
.bottom-box-content {
flex: 1;
position: relative;
border-radius: 10px;
margin-right: 20px;
cursor: pointer;
box-sizing: border-box;
box-shadow: 2px 2px 5px #707070;
}
.bottom-box-content p {
height: 2.5rem;
font-size: 1.1rem;
line-height: 2.5rem;
text-align: center;
font-weight: 600;
color: #707070;
background: #e2e6eb;
border-radius: 10px 10px 0 0;
}
.bottom-box-content ul {
max-width: 100%;
margin: 0.6rem 10% 0 10%;
}
.bottom-box-content li {
list-style: none;
max-width: 90%;
height: 1.5rem;
line-height: 1.5rem;
color: #95989a;
font-size: 0.9rem;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
}
</style>