forked from TALL/check-work
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
169 lines
3.9 KiB
5 years ago
|
<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>
|