598 lines
16 KiB
Vue
598 lines
16 KiB
Vue
<template>
|
||
<div class="wrapper">
|
||
<header-nav :index_num="index_num"></header-nav>
|
||
<div id="box">
|
||
<!-- 公告 -->
|
||
<div class="top">
|
||
<img :src="imgUrl.xlb"
|
||
alt />
|
||
<div>
|
||
<span>世界婚博会已通过初审</span>
|
||
<time>[2019-07-31]</time>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<!-- 表格 -->
|
||
<div class="table">
|
||
<div class="top-p">项目概览</div>
|
||
<div class="top-b">
|
||
<div>
|
||
<section>
|
||
<span>初筛通过</span>
|
||
<span>10</span>
|
||
</section>
|
||
</div>
|
||
<div>
|
||
<section>
|
||
<span>立项通过</span>
|
||
<span>10</span>
|
||
</section>
|
||
</div>
|
||
<div>
|
||
<section>
|
||
<span>执行中</span>
|
||
<span>10</span>
|
||
</section>
|
||
</div>
|
||
<div>
|
||
<section>
|
||
<span>已完结</span>
|
||
<span>10</span>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 下拉框 -->
|
||
<div class="select">
|
||
<select class="one"
|
||
name="date">
|
||
<option value>2017/10/14 至 2017/10/15</option>
|
||
<option value>2017/10/14 至 2017/10/15</option>
|
||
</select>
|
||
<select class="two"
|
||
name="type">
|
||
<option value>类型1</option>
|
||
<option value>类型2</option>
|
||
</select>
|
||
<select class="three"
|
||
name="area">
|
||
<option value>区域1</option>
|
||
<option value>区域2</option>
|
||
</select>
|
||
<span @click="$jump('application')">项目申报</span>
|
||
</div>
|
||
<!-- container -->
|
||
<div class="con">
|
||
<!-- 导航 -->
|
||
<div class="top-t">
|
||
<h3 @click="btn(index)"
|
||
v-for="(item,index) in text"
|
||
:key="index"
|
||
:class="sub == index ? 'style' : ''">{{item}}</h3>
|
||
</div>
|
||
<!-- 主题内容 -->
|
||
<div class="cc">
|
||
<template v-for="(item,index) in sData">
|
||
<div class="list"
|
||
:key="index"
|
||
v-if="index < 9"
|
||
@click="$jump('schedule')">
|
||
<div class="div">
|
||
<div class="bb">
|
||
<h3>世界婚博会</h3>
|
||
<h5>活动</h5>
|
||
</div>
|
||
<time>2019-07-19</time>
|
||
</div>
|
||
<dl>
|
||
<dt>
|
||
<img :src="imgUrl.tg"
|
||
v-if="item.state == 0" />
|
||
<img :src="imgUrl.btg"
|
||
v-if="item.state == 1" />
|
||
<img :src="imgUrl.shz"
|
||
v-if="item.state == 2" />
|
||
<img :src="imgUrl.zxz"
|
||
v-if="item.state == 3" />
|
||
</dt>
|
||
<dd>
|
||
<span class="iconfont icon-zuzhijiegou"></span>
|
||
<span>朝阳社会组织</span>
|
||
</dd>
|
||
<dd>
|
||
<span class="iconfont icon-weizhi"></span>
|
||
<span>北京市朝阳区建外街道</span>
|
||
</dd>
|
||
<dd>
|
||
<span class="iconfont icon-shenhetongguo1"></span>
|
||
<span>当前申报阶段：立项审核中</span>
|
||
</dd>
|
||
</dl>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<!-- 分页按钮 -->
|
||
<div class="page">
|
||
<el-pagination @size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
:current-page="currentPage"
|
||
:page-size="pageSize"
|
||
background
|
||
layout="prev, pager, next"
|
||
:total="10"></el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer-nav class="footer"></footer-nav>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
/* eslint-disable */
|
||
import HeaderNav from "../../components/HeaderNav";
|
||
/* eslint-disable */
|
||
import FooterNav from "../../components/FooterNav";
|
||
export default {
|
||
components: {
|
||
HeaderNav,
|
||
FooterNav
|
||
},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
index_num: 2,
|
||
pageSize: 1,
|
||
currentPage: 1,
|
||
totalCount: 1,
|
||
imgUrl: {
|
||
xlb: require("../../../static/img/xlb.png"),
|
||
tg: require("../../../static/img/tg.png"),
|
||
btg: require("../../../static/img/btg.png"),
|
||
shz: require("../../../static/img/shz.png"),
|
||
zxz: require("../../../static/img/zxz.png")
|
||
},
|
||
text: ["全部", "项目初筛", "项目立项"],
|
||
sub: 0,
|
||
sData: [
|
||
{ state: 0 },
|
||
{ state: 0 },
|
||
{ state: 0 },
|
||
{ state: 1 },
|
||
{ state: 1 },
|
||
{ state: 2 },
|
||
{ state: 3 },
|
||
{ state: 3 },
|
||
{ state: 2 },
|
||
{ state: 0 }
|
||
]
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
methods: {
|
||
btn(index) {
|
||
let s = this.sub;
|
||
s = index;
|
||
this.sub = s;
|
||
},
|
||
handleSizeChange(val) {
|
||
this.pageNum = val;
|
||
this.getPackData();
|
||
},
|
||
handleCurrentChange(val) {
|
||
this.currentPage = val;
|
||
this.getPackData();
|
||
},
|
||
getPackData() {}
|
||
},
|
||
created() {
|
||
this.currentPage = Number(localStorage.getItem("pagination")) || 1;
|
||
this.handleCurrentChange(this.currentPage);
|
||
},
|
||
mounted() {}
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.wrapper {
|
||
width: 1280px;
|
||
box-sizing: border-box;
|
||
|
||
.footer {
|
||
margin-top: 80px;
|
||
}
|
||
|
||
#box {
|
||
margin: 0 auto;
|
||
width: 1200px;
|
||
box-sizing: border-box;
|
||
|
||
.bottom {
|
||
padding: 35px 30px 0px;
|
||
box-sizing: border-box;
|
||
width: 1200px;
|
||
height: 1320px;
|
||
background-color: #ffffff;
|
||
|
||
.page {
|
||
margin-top: 60px;
|
||
height: 36px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
|
||
/deep/ .el-pagination.is-background .el-pager li {
|
||
color: #333 !important;
|
||
}
|
||
|
||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||
background-color: #e60012;
|
||
color: #fff !important;
|
||
}
|
||
|
||
/deep/ .el-icon.el-icon-arrow-left::before {
|
||
content: "上一页";
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 1px;
|
||
color: #666;
|
||
}
|
||
|
||
/deep/ .el-pagination .btn-prev {
|
||
width: 80px;
|
||
}
|
||
|
||
/deep/ .el-pagination .btn-next {
|
||
width: 80px;
|
||
}
|
||
|
||
/deep/ .el-icon.el-icon-arrow-right::before {
|
||
content: "下一页";
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 1px;
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
.con {
|
||
width: 1140px;
|
||
height: 773px;
|
||
|
||
.cc {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
.list {
|
||
margin-bottom: 60px;
|
||
width: 367px;
|
||
height: 184px;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 19px 21px 3px rgba(145, 142, 142, 0.1);
|
||
border-radius: 10px;
|
||
padding: 19px 29px 0px 16px;
|
||
box-sizing: border-box;
|
||
|
||
dl {
|
||
width: 100%;
|
||
height: 97px;
|
||
margin-top: 25px;
|
||
position: relative;
|
||
|
||
dd {
|
||
margin-bottom: 22px;
|
||
.iconfont {
|
||
font-size: 17px;
|
||
color: #ccc;
|
||
margin-right: 16px;
|
||
}
|
||
span {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
dt {
|
||
img {
|
||
position: absolute;
|
||
right: -8.5%;
|
||
bottom: -26%;
|
||
width: 119px;
|
||
height: 95px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.div {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
time {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #999999;
|
||
}
|
||
.bb {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
h5 {
|
||
margin-left: 6px;
|
||
height: 18px;
|
||
color: #f6ad35;
|
||
text-align: center;
|
||
line-height: 18px;
|
||
border: 1px solid #f6ad35;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
}
|
||
h3 {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-t {
|
||
width: 1140px;
|
||
height: 38px;
|
||
padding-left: 12px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
border-bottom: 1px solid #ccc;
|
||
margin-bottom: 60px;
|
||
|
||
h3 {
|
||
text-align: center;
|
||
margin-right: 78px;
|
||
width: 90px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333;
|
||
}
|
||
|
||
.style {
|
||
color: #e60012;
|
||
position: relative;
|
||
&::after {
|
||
content: "";
|
||
width: 91px;
|
||
height: 2px;
|
||
background-image: linear-gradient(#e60012, #e60012),
|
||
linear-gradient(#ff7f7f, #ff7f7f);
|
||
background-blend-mode: normal, normal;
|
||
position: absolute;
|
||
left: 0%;
|
||
bottom: -94%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.select {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 50px;
|
||
margin-bottom: 50px;
|
||
|
||
.one {
|
||
padding-left: 30px;
|
||
box-sizing: border-box;
|
||
/* 清除默认的箭头样式 */
|
||
appearance: none;
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
/* 右侧添加小箭头的背景图 */
|
||
background: url("../../../static/img/xa.png") 280px center no-repeat;
|
||
background-size: 14px 8px;
|
||
width: 325px;
|
||
height: 38px;
|
||
background-color: #f9f8f8;
|
||
border-radius: 4px;
|
||
border: solid 1px #c7c7c7;
|
||
outline: none;
|
||
font-size: 18px;
|
||
color: #666;
|
||
}
|
||
|
||
.two {
|
||
padding-left: 30px;
|
||
box-sizing: border-box;
|
||
/* 清除默认的箭头样式 */
|
||
appearance: none;
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
/* 右侧添加小箭头的背景图 */
|
||
background: url("../../../static/img/xa.png") 90px center no-repeat;
|
||
background-size: 14px 8px;
|
||
width: 134px;
|
||
height: 38px;
|
||
background-color: #f9f8f8;
|
||
border-radius: 4px;
|
||
border: solid 1px #c7c7c7;
|
||
outline: none;
|
||
font-size: 18px;
|
||
color: #666;
|
||
}
|
||
|
||
.three {
|
||
padding-left: 30px;
|
||
box-sizing: border-box;
|
||
/* 清除默认的箭头样式 */
|
||
appearance: none;
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
/* 右侧添加小箭头的背景图 */
|
||
background: url("../../../static/img/xa.png") 90px center no-repeat;
|
||
background-size: 14px 8px;
|
||
width: 134px;
|
||
height: 38px;
|
||
background-color: #f9f8f8;
|
||
border-radius: 4px;
|
||
border: solid 1px #c7c7c7;
|
||
outline: none;
|
||
font-size: 18px;
|
||
color: #666;
|
||
}
|
||
span {
|
||
display: inline-block;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
width: 96px;
|
||
height: 32px;
|
||
background-image: linear-gradient(
|
||
69deg,
|
||
#cc263f 0%,
|
||
#f42b47 100%,
|
||
#ed162d 100%,
|
||
#e60012 100%
|
||
),
|
||
linear-gradient(#e60012, #e60012);
|
||
background-blend-mode: normal, normal;
|
||
border-radius: 4px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.table {
|
||
width: 1137px;
|
||
height: 181px;
|
||
border: solid 1px #dadada;
|
||
background-color: #f6f6f6;
|
||
box-sizing: border-box;
|
||
|
||
.top-b {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
div {
|
||
width: 283px;
|
||
height: 139px;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
section {
|
||
width: 72px;
|
||
height: 67px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
span:first-child {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #666666;
|
||
}
|
||
|
||
span:last-child {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #e60012;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-p {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
width: 1136px;
|
||
height: 40px;
|
||
background-color: #f6f6f6;
|
||
text-align: center;
|
||
line-height: 40px;
|
||
border-bottom: 1px solid #dadada;
|
||
border-right: 1px solid #dadada;
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top {
|
||
width: 732px;
|
||
height: 40px;
|
||
margin: 30px 0 30px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
img {
|
||
width: 33px;
|
||
height: 27px;
|
||
}
|
||
div {
|
||
width: 672px;
|
||
height: 21px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
span {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #666666;
|
||
}
|
||
|
||
time {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
letter-spacing: 0px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |