asd/chaoyangpc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

kun 9/19 21:40

Browse Source
This commit is contained in:
kun
2019-09-19 21:38:58 +08:00
parent dd5f652106
commit 685e122678
40 changed files with 3049 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/headerNav.vue
View File

@@ -1,10 +1,10 @@
<template>
<div id="wrapper" :style="{'background-image':'url('+imgUrl.home+')'}">
<div class="box">
<div @click="btn(0)" :class="styleNum == 0 ? 'style': ''">党组织建设</div>
<div @click="btn(1)" :class="styleNum == 1 ? 'style': ''">社会组织信用信息查询</div>
<div @click="btn(2)" :class="styleNum == 2 ? 'style': ''">政府购买社会组织服务项目管理</div>
<div @click="btn(3)" :class="styleNum == 3 ? 'style': ''">个人中心</div>
<div @click="$jump('homePage')" :class="styleNum == 0 ? 'style': ''">党组织建设</div>
<div @click="$jump('homePage')" :class="styleNum == 1 ? 'style': ''">社会组织信用信息查询</div>
<div @click="$jump('project')" :class="styleNum == 2 ? 'style': ''">政府购买社会组织服务项目管理</div>
<div @click="$jump('homePage')" :class="styleNum == 3 ? 'style': ''">个人中心</div>
<div>
<span @click="$jump('login')">登录</span> |
<span @click="$jump('registered')">注册</span>

4
src/main.js
View File

@@ -3,9 +3,12 @@ import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui'
import '../static/css/reset.css'
import '../static/css/swiper.css'
import '../static/fonts/iconfont.css'
import 'element-ui/lib/theme-chalk/index.css'
Vue.prototype.$jump = function (url) {
this.$router.push({
@@ -13,6 +16,7 @@ Vue.prototype.$jump = function (url) {
})
}
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({

33
src/router.js
View File

@@ -3,10 +3,16 @@ import Router from 'vue-router'
/** 首页 */
import homePage from './views/homePage/homePage'
import applyFor from './views/homePage/applyFor'
import newsDetails from './views/homePage/newsDetails'
/** 登录 */
import login from './views/login/login'
/** 注册 */
import registered from './views/registered/registered'
/** 项目管理 */
import project from './views/project/project'
import schedule from './views/project/schedule'
import application from './views/project/application'
/** 头部导航 */
import headerNav from './components/headerNav'
@@ -16,14 +22,39 @@ import footerNav from './components/footerNav'
Vue.use(Router)
export default new Router({
mode: 'history',
mode: 'hash',
base: process.env.BASE_URL,
routes: [
{
path: '/application',
name: 'application',
component: application
},
{
path: '/project',
name: 'project',
component: project
},
{
path: '/schedule',
name: 'schedule',
component: schedule
},
{
path: '/',
name: 'homePage',
component: homePage
},
{
path: '/applyFor',
name: 'applyFor',
component: applyFor
},
{
path: '/newsDetails',
name: 'newsDetails',
component: newsDetails
},
{
path: '/login',
name: 'login',

643
src/views/homePage/applyFor.vue Normal file
View File

@@ -0,0 +1,643 @@
<template>
<div class="wr">
<headerNav :index_num="index_num"></headerNav>
<div class="wrapperr">
<p class="title">党组织申请</p>
<!-- 进度条 -->
<div class="he">
<div
class="list"
v-for="(item,index) in text"
:key="index"
:style="{'background-image': sub == index ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}"
>
<span :style="sub == index ? 'color:#fff' : 'color:#000'">{{item}}</span>
</div>
</div>
<!-- 用户填写的内容 -->
<form action method enctype="multipart/form-data">
<!-- 党组织申请1 -->
<div id="boxOne" v-if="sub == 0">
<h3>基本信息</h3>
<div class="b">
<div class="o">
<label>
<span>社会组织名称:</span>
<input class="input" type="text" name="name" />
</label>
<label>
<span>社会组织类型:</span>
<select name="type" id></select>
</label>
</div>
<div class="o">
<label>
<span>流动党员数量:</span>
<input class="input" type="text" name="name" />
</label>
<label>
<span>已有党员数量:</span>
<input class="input" type="text" name="name" />
</label>
</div>
<div class="o">
<label>
<span>从业人员总数:</span>
<input class="input" type="text" name="name" />
</label>
<label>
<span>党组织名称:</span>
<input class="input" type="text" name="name" />
</label>
</div>
<div class="o-zero">
<span>是否建立党组织:</span>
<div>
<label for>
<input type="radio" name="yn" value="yes" checked />&nbsp;&nbsp;是
</label>&nbsp;&nbsp;&nbsp;&nbsp;
<label for>
<input type="radio" name="yn" value="no" />&nbsp;&nbsp;否
</label>
</div>
</div>
<div class="o-one">
<span>是否建立“功能型”党组织:</span>
<div>
<label for>
<input type="radio" name="ynn" value="yes" checked />&nbsp;&nbsp;是
</label>&nbsp;&nbsp;&nbsp;&nbsp;
<label for>
<input type="radio" name="ynn" value="no" />&nbsp;&nbsp;否
</label>
</div>
</div>
<div class="o-o">
<label>登记管理机关:</label>
<input type="text" />
</div>
<div class="o-o">
<label>业务主管单位:</label>
<input type="text" />
</div>
<div class="o-two">
<label>隶属的上一级党组织名称:</label>
<input type="text" />
</div>
</div>
<div class="btn" @click="btn(1)">下一步</div>
</div>
<!-- 党组织申请2 -->
<div id="boxTwo" v-if="sub == 1">
<!-- !!!!!! -->
<h3>党组织书记情况</h3>
<div class="b">
<div>
<label for>姓名:</label>
<input type="text" />
</div>
<div style="display: flex;
align-items: center;">
<label for>姓别:</label>
<label class="label">
<input type="radio" name="sex" />&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="sex" />&nbsp;&nbsp;女
</label>
</div>
<div>
<label for>年龄:</label>
<input type="text" />
</div>
<div>
<label for>行政职务:</label>
<input type="text" />
</div>
<div>
<label for>近三年参加上级党组织培训次数:</label>
<input type="text" />
</div>
</div>
<!-- !!!!!! -->
<h3 style="margin-top:35px;">党组织信息</h3>
<div class="b">
<div>
<label for>近三年发展党员数:</label>
<input type="text" />
</div>
<div style="display: flex;
align-items: center;">
<label for>是否建立群团组织:</label>
<label class="label">
<input type="radio" name="ss" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="ss" />&nbsp;&nbsp;否
</label>
</div>
<div>
<label for>专职党务工作者人数:</label>
<input type="text" />
</div>
<div style="display: flex;
align-items: center;">
<label for>是否选派党建工作指导员:</label>
<label class="label">
<input type="radio" name="ww" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="ww" />&nbsp;&nbsp;否
</label>
</div>
<div>
<label for>党组织年度活动经费(万元):</label>
<input type="text" />
</div>
<div>
<label for>党组织年度活动场所面积(平米):</label>
<input type="text" />
</div>
</div>
<div @click="btn(2)" style="display:flex;justify-content:center;margin-top:35px;">
<input type="submit" value="立即提交" />
</div>
</div>
</form>
<!-- succeed -->
<div class="succeed" v-if="sub == 2">
<div>
<img :src="imgUrl.succeed" alt />
<span>党组织申请已提交成功！</span>
</div>
</div>
</div>
<footerNav class="footer"></footerNav>
</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 {
imgUrl: {
bg0: require("../../../static/img/bg0.png"),
bg1: require("../../../static/img/bg1.png"),
succeed: require("../../../static/img/succeed.png")
},
text: ["1 填写基本信息", "2 填写党组织信息", "3 提交审核"],
sub: 0,
index_num: 0
};
},
computed: {},
watch: {},
methods: {
btn(n) {
let s = this.sub;
s = n;
this.sub = s;
}
},
created() {},
mounted() {}
};
</script>
<style lang='scss' scoped>
.wr {
width: 1280px;
box-sizing: border-box;
.footer {
margin-top: 80px;
}
}
.wrapperr {
width: 1200px;
margin: 40px auto;
padding: 34px 31px 100px;
box-sizing: border-box;
background-color: #ffffff;
.succeed {
margin-top: 70px;
div {
width: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
img {
width: 118px;
height: 118px;
margin-bottom: 28px;
}
span {
font-family: "MicrosoftYaHei";
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
}
form {
h3 {
width: 1138px;
height: 38px;
font-family: "MicrosoftYaHei";
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
border-bottom: 2px solid #dedede;
padding-left: 30px;
box-sizing: border-box;
margin-bottom: 58px;
}
label input[type="radio"] {
width: 17px;
height: 17px;
appearance: none;
-webkit-appearance: none;
outline: none;
margin: 0;
cursor: pointer;
}
label input[type="radio"]:after {
width: 17px;
height: 17px;
display: block;
content: "";
background: url("../../../static/img/wxz.png") no-repeat;
background-size: 100% 100%;
}
label input[type="radio"]:checked:after {
background: url("../../../static/img/xz.png") no-repeat;
}
#boxTwo {
.b {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
div {
margin-bottom: 25px;
height: 43px;
label {
text-align: right;
width: 229px;
height: 16px;
display: inline-block;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
input[type="text"] {
margin-left: 30px;
width: 386px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
outline: none;
}
.label {
width: 386px;
height: 43px;
margin-left: 30px;
display: flex;
align-items: center;
}
}
}
input[type="submit"] {
width: 330px;
height: 63px;
line-height: 63px;
text-align: center;
background-color: #e60012;
border-radius: 5px;
font-family: "MicrosoftYaHei";
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
}
#boxOne {
.b {
width: 100%;
.o-two {
width: 100%;
height: 43px;
display: flex;
align-items: center;
padding-left: 16px;
box-sizing: border-box;
margin-bottom: 60px;
label {
display: inline-block;
width: 181px;
height: 16px;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
input {
width: 913px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
margin-left: 30px;
outline: none;
}
}
.o-o {
width: 100%;
height: 43px;
display: flex;
align-items: center;
padding-left: 96px;
box-sizing: border-box;
margin-bottom: 25px;
label {
display: inline-block;
width: 101px;
height: 16px;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
input {
width: 913px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
margin-left: 30px;
outline: none;
}
}
.o-one {
width: 100%;
height: 43px;
box-sizing: border-box;
display: flex;
align-items: center;
margin-bottom: 11px;
div {
margin-left: 30px;
display: flex;
align-items: center;
label {
display: flex;
align-items: center;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 25px;
letter-spacing: 0px;
color: #333333;
}
/*
label input[type="radio"] {
width: 17px;
height: 17px;
appearance: none;
-webkit-appearance: none;
outline: none;
margin: 0;
cursor: pointer;
}
label input[type="radio"]:after {
width: 17px;
height: 17px;
display: block;
content: "";
background: url("../../../static/img/wxz.png") no-repeat;
background-size: 100% 100%;
}
label input[type="radio"]:checked:after {
background: url("../../../static/img/xz.png") no-repeat;
}*/
}
span {
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
.o-zero {
margin-bottom: 11px;
width: 100%;
height: 43px;
padding-left: 80px;
box-sizing: border-box;
display: flex;
align-items: center;
div {
margin-left: 30px;
display: flex;
align-items: center;
label {
display: flex;
align-items: center;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 25px;
letter-spacing: 0px;
color: #333333;
}
/*
label input[type="radio"] {
width: 17px;
height: 17px;
appearance: none;
-webkit-appearance: none;
outline: none;
margin: 0;
cursor: pointer;
}
label input[type="radio"]:after {
width: 17px;
height: 17px;
display: block;
content: "";
background: url("../../../static/img/wxz.png") no-repeat;
background-size: 100% 100%;
}
label input[type="radio"]:checked:after {
background: url("../../../static/img/xz.png") no-repeat;
}
*/
}
span {
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
.o {
margin-bottom: 25px;
width: 100%;
height: 43px;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 96px;
box-sizing: border-box;
label {
width: 547px;
height: 43px;
display: inline-block;
box-sizing: border-box;
select {
width: 386px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
outline: none;
box-sizing: border-box;
/* 清除默认的箭头样式 */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* 右侧添加小箭头的背景图 */
background: url("../../../static/img/xa.png") 360px center
no-repeat;
background-size: 14px 8px;
}
.input {
width: 386px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
outline: none;
box-sizing: border-box;
}
span {
margin-right: 30px;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
display: inline-block;
width: 101px;
text-align: right;
}
}
}
}
.btn {
cursor: pointer;
margin: 0 auto;
width: 230px;
height: 63px;
background-color: #e60012;
border-radius: 5px;
font-family: "MicrosoftYaHei";
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 63px;
letter-spacing: 0px;
color: #ffffff;
text-align: center;
}
}
}
.he {
margin: 44px auto 70px;
width: 598px;
height: 34px;
display: flex;
justify-content: space-between;
align-items: center;
.list {
width: 192px;
height: 34px;
line-height: 34px;
text-align: center;
background-size: 100% 100%;
font-family: "MicrosoftYaHei";
font-size: 14px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
}
}
.title {
text-align: center;
font-family: "MicrosoftYaHei";
font-size: 22px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
</style>

264
src/views/homePage/homePage.vue
View File

@@ -1,146 +1,148 @@
<template>
<div class="wrapper">
<headerNav :index_num="index_num"></headerNav>
<!-- 内容ONE -->
<div class="container">
<!-- 轮播图 -->
<div class="swiperone">
<div class="swiper-container swiper-one">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img :src="imgUrl.lb" alt />
<div class="box">加强基础设施建设，完善城市功能，扩大城市容量</div>
</div>
<div class="swiper-slide">
<img :src="imgUrl.lb" alt />
<div class="box">加强基础设施建设，完善城市功能，扩大城市容量</div>
</div>
<div class="swiper-slide">
<img :src="imgUrl.lb" alt />
<div class="box">加强基础设施建设，完善城市功能，扩大城市容量</div>
<div id="box">
<!-- 内容ONE -->
<div class="container">
<!-- 轮播图 -->
<div class="swiperone">
<div class="swiper-container swiper-one">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img :src="imgUrl.lb" alt />
<div class="box">加强基础设施建设，完善城市功能，扩大城市容量</div>
</div>
<div class="swiper-slide">
<img :src="imgUrl.lb" alt />
<div class="box">加强基础设施建设，完善城市功能，扩大城市容量</div>
</div>
<div class="swiper-slide">
<img :src="imgUrl.lb" alt />
<div class="box">加强基础设施建设，完善城市功能，扩大城市容量</div>
</div>
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
<!-- 通知公告的box -->
<div class="right">
<!-- 通知公告 -->
<div class="top">
<div class="b">
<span>通知公告</span>
<span>更多>></span>
</div>
</div>
<!-- 列表显示 -->
<ul>
<template v-for="(item,index) in mData">
<li :key="index" v-if="index < 8">
<a href="javascript:void(0);">
<span>{{item.text}}</span>
<time>[{{item.time}}]</time>
</a>
</li>
</template>
</ul>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>
<!-- 通知公告的box -->
<div class="right">
<!-- 通知公告 -->
<div class="top">
<div class="b">
<span>通知公告</span>
<span>更多>></span>
<!-- TWO -->
<div class="container-two">
<p class="title">新闻动态</p>
<div id="box">
<!-- 党组织信息 -->
<div class="box-child">
<div class="top-p">
<div>
<img class="o" :src="imgUrl.gq" alt />
<span>党组织信息</span>
</div>
<span @click="$jump('newsDetails')">更多>></span>
</div>
<div class="p">
<div class="text">
<p>党的建设即马克思主义建党理论同党的建设实践的统一，马克思主义党的学说的应用。</p>
<p>党的建设包括三个方面的含义：</p>
<p>一是研究党的建设的理论科学；</p>
<p>二是在马克思主义党的学说指导下所进行的党的建设的实践活动；</p>
<p>三是作为理论原则与实际行动两者中介的约法规章。</p>
</div>
<div class="img" @click="$jump('applyFor')">
<div class="img-box">
<img :src="imgUrl.wjx" alt />
<span>申请成为党组织</span>
</div>
</div>
</div>
</div>
<!-- 统一战线 -->
<div class="box-child">
<div class="top-p">
<div>
<img class="n" :src="imgUrl.ws" alt />
<span>统一战线</span>
</div>
<span @click="$jump('newsDetails')">更多>></span>
</div>
<ul class="ulo">
<template v-for="(item,index) in mmData">
<li :key="index" v-if="index<9">
<a href="javascript:void(0);">{{item.text}}</a>
</li>
</template>
</ul>
</div>
<!-- 组织生活 -->
<div class="box-child">
<div class="top-p">
<div>
<img class="e" :src="imgUrl.zz" alt />
<span>组织生活</span>
</div>
<span @click="$jump('newsDetails')">更多>></span>
</div>
<ul class="ult">
<template v-for="(item,index) in mmmData">
<li :key="index" v-if="index<9">
<a href="javascript:void(0);">{{item.text}}</a>
</li>
</template>
</ul>
</div>
</div>
<!-- 列表显示 -->
<ul>
<template v-for="(item,index) in mData">
<li :key="index" v-if="index < 8">
<a href="javascript:void(0);">
<span>{{item.text}}</span>
<time>[{{item.time}}]</time>
</a>
</li>
</div>
<!-- THREE -->
<div class="container-three">
<p class="title">@书记</p>
<div class="box-list">
<template v-for="(item,index) in sData">
<div class="list" :key="index" v-if="index<3">
<img :src="item.img" alt />
<div class="wen-ben">
<h3>{{item.title}}</h3>
<p>{{item.text}}</p>
</div>
</div>
</template>
</ul>
</div>
</div>
<!-- TWO -->
<div class="container-two">
<p class="title">新闻动态</p>
<div id="box">
<!-- 党组织信息 -->
<div class="box-child">
<div class="top-p">
<div>
<img class="o" :src="imgUrl.gq" alt />
<span>党组织信息</span>
</div>
<span>更多>></span>
</div>
<div class="p">
<div class="text">
<p>党的建设即马克思主义建党理论同党的建设实践的统一，马克思主义党的学说的应用。</p>
<p>党的建设包括三个方面的含义：</p>
<p>一是研究党的建设的理论科学；</p>
<p>二是在马克思主义党的学说指导下所进行的党的建设的实践活动；</p>
<p>三是作为理论原则与实际行动两者中介的约法规章。</p>
</div>
<div class="img">
<div class="img-box">
<img :src="imgUrl.wjx" alt />
<span>申请成为党组织</span>
</div>
</div>
</div>
</div>
<!-- 统一战线 -->
<div class="box-child">
<div class="top-p">
<div>
<img class="n" :src="imgUrl.ws" alt />
<span>统一战线</span>
</div>
<span>更多>></span>
</div>
<ul class="ulo">
<template v-for="(item,index) in mmData">
<li :key="index" v-if="index<9">
<a href="javascript:void(0);">{{item.text}}</a>
</li>
</template>
</ul>
</div>
<!-- 组织生活 -->
<div class="box-child">
<div class="top-p">
<div>
<img class="e" :src="imgUrl.zz" alt />
<span>组织生活</span>
</div>
<span>更多>></span>
</div>
<ul class="ult">
<template v-for="(item,index) in mmmData">
<li :key="index" v-if="index<9">
<a href="javascript:void(0);">{{item.text}}</a>
</li>
</template>
</ul>
</div>
</div>
</div>
<!-- THREE -->
<div class="container-three">
<p class="title">@书记</p>
<div class="box-list">
<template v-for="(item,index) in sData">
<div class="list" :key="index" v-if="index<3">
<img :src="item.img" alt />
<div class="wen-ben">
<h3>{{item.title}}</h3>
<p>{{item.text}}</p>
<!-- FOUR -->
<div class="container-four">
<p class="title">党建矩阵</p>
<div class="swiper-box-list">
<div class="swiper-container swiper-two">
<div class="swiper-wrapper">
<template v-for="(item,index) in list">
<div class="swiper-slide" :key="index">
<img :src="imgUrl.img3" alt />
<span>中国政府网站{{index+1}}</span>
</div>
</template>
</div>
<div class="swiper-button-next"></div>
</div>
</template>
</div>
</div>
<!-- FOUR -->
<div class="container-four">
<p class="title">党建矩阵</p>
<div class="swiper-box-list">
<div class="swiper-container swiper-two">
<div class="swiper-wrapper">
<template v-for="(item,index) in list">
<div class="swiper-slide" :key="index">
<img :src="imgUrl.img3" alt />
<span>中国政府网站{{index+1}}</span>
</div>
</template>
</div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
@@ -293,7 +295,7 @@ export default {
created() {},
mounted() {
// this.initSwiper();
this.initialSwiper();
// this.initialSwiper();
}
};
</script>
@@ -301,7 +303,6 @@ export default {
<style lang='scss' scoped>
.wrapper {
width: 1280px;
height: 2893px;
box-sizing: border-box;
position: relative;
@@ -519,6 +520,7 @@ export default {
width: 309px;
display: flex;
justify-content: flex-end;
cursor: pointer;
.img-box {
width: 157px;

243
src/views/homePage/newsDetails.vue Normal file
View File

@@ -0,0 +1,243 @@
<template>
<div class="wrapper">
<headerNav :index_num="index_num"></headerNav>
<div class="box">
<div class="left">
<dl>
<dt>
<img class="one" :src="imgUrl.img5" alt />
<img class="two" :src="imgUrl.wjx" alt />
</dt>
<dd>
<span class="d-o">因势而谋书写能源转型发展大文章</span>
</dd>
<dd>
<span class="d-b">
来源:央视网
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
发布时间:2019-08-08
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
浏览量:11123
</span>
</dd>
</dl>
<div class="text">
<p>近日,国家能源局召开党组中心组学习(扩大)会议,专题学习《习近平新时代中国特色社会主义思想学习纲要》中关于“掌握马克思主义思想方法和工作方法”重要论述扎实推进国家能源局“不忘初心、牢记使命”主题教育。马克思主义思想方法和工作方法是我们党的看家本领。落实‘四个革命、一个合作’能源安全新战略,构建清洁低碳、安全高效的能源体系任务艰巨而繁重,迫切需要我们掌握科学的世界观和方法论,树立科学的思想方法和工作方法。”国家能源局党组书记、局长章建华开门见山,强调了把马克思主义的科学方法和工作方法贯穿能源发展全过程的重要意义坚持实事求是在调查硏究中找准问题在革命建设改革各个历史时期,中国共产党运用马克思主义世界观和方法论,系统、具体、历史地分析中国社会运动及其发展规律,在实践过程中形成了实事求是、问题导向等一系列科学的思想方法和工作方法。</p>
<p>习近平总书记关于掌握马克思主义思想方法和工作方法的重要论述,是马克思主义世界观和方法论在当代中国的具体运用我国仍处于并将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来,我国‘富煤少油缺气’的资源禀赋,决定了煤炭在较长一个时期內作为我国主体能源的地位不会发玍变化,这就要求我们坚持从煤炭资源丰富旳国情岀发,切实抓好煤炭清洁高效利用。”章建华说对此,国家能源局党组成员、副局长刘宝华也指岀,煤炭资源的清洁开发和利用,是保障能源安全旳基石。“近些年我们在煤电领堿实施以大代小,老小机组拆除近亿千瓦,极大地提髙了煤电发电的整体质量,能效大幅提升,污染大幅下降。在煤炭领堿实施产能置换政策,对提髙效率、降低成本、提升安全水平也发挥了决定性的作用。”实际工作中的问题则需要通过调査研究来发现和解决。主题教育开展以来,国家能源局党组高度重视调查研究工作,在中央第二十指导组的指导下,局党组和40个基层党组织结合职责任务,有针对性地确定调研课题118个,局领导和各部门各单位主要负责同志带头深入一线接地气、搞调研。坚持理想信念在服务人民中担当履责正如章建华所说,马克思主乂的世界观、人生观、价值观与方法论是有机统一的,方法论的背后是党性修养、是价值追求、是品格境界。掌握马克思主义的思想方法和工作方法必须知行合一,植于心、践于行。共产党员必须把理想信念植于心,树牢“四个意识”,坚定“四个自信”,坚决做到“两个维护”,自觉把对党忠诚体现到对党的信仰忠诚上,体现到对党组织忠诚上</p>
</div>
</div>
<div class="right">
<h3>热点新闻</h3>
<div>
<template v-for="(item,index) in list">
<dl :key="index" v-if="index < 4">
<dt>
<img :src="imgUrl.img4" alt />
</dt>
<dd>
<span class="dd">活动策划是提高市场占有率的有效行为</span>
</dd>
<dd>
<time>2019-10-14</time>
</dd>
</dl>
</template>
</div>
</div>
</div>
<footerNav class="footer"></footerNav>
</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: 0,
imgUrl: {
img4: require("../../../static/img/img4.png"),
img5: require("../../../static/img/img5.png"),
wjx: require("../../../static/img/wjx.png")
},
list: [1, 2, 3, 4, 5, 6, 7, 8, 9]
};
},
computed: {},
watch: {},
methods: {},
created() {},
mounted() {}
};
</script>
<style lang='scss' scoped>
.wrapper {
width: 1280px;
box-sizing: border-box;
.box {
width: 100%;
padding: 42px 40px 0px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.left {
width: 840px;
height: 1283px;
background-color: #ffffff;
padding: 35px 30px 70px;
box-sizing: border-box;
dl {
position: relative;
width: 780px;
height: 587px;
box-sizing: border-box;
dd {
.d-o {
display: inline-block;
margin: 28px 0 23px;
font-family: "MicrosoftYaHei";
font-size: 24px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
.d-b {
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #999999;
}
}
dt {
.one {
width: 780px;
height: 494px;
}
.two {
width: 28px;
height: 26px;
position: absolute;
right: 0%;
bottom: 5%;
}
}
}
.text {
margin: 38px auto 0px;
overflow: hidden;
width: 775px;
height: 550px;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
line-height: 40px;
letter-spacing: 0px;
color: #666666;
p {
text-indent: 1em;
}
}
}
.right {
width: 301px;
height: 1282px;
background-color: #ffffff;
border: solid 1px rgba($color: #ccc, $alpha: 0.48);
padding-top: 33px;
box-sizing: border-box;
div {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
dl {
margin-bottom: 30px;
dt {
img {
width: 260px;
height: 144px;
border-radius: 10px;
}
}
dd {
span {
margin-top: 10px;
display: inline-block;
width: 266px;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
line-height: 30px;
letter-spacing: 1px;
color: #333333;
display: -webkit-box;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;
white-space: normal;
}
time {
display: inline-block;
width: 266px;
text-align: right;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 30px;
letter-spacing: 1px;
color: #999999;
}
}
}
h3 {
margin-left: 20px;
margin-bottom: 30px;
font-family: "MicrosoftYaHei";
font-size: 22px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
}
.footer {
margin-top: 80px;
}
}
</style>

644
src/views/project/application.vue Normal file
View File

@@ -0,0 +1,644 @@
<template>
<div class="wrapper">
<headerNav :index_num="index_num"></headerNav>
<div id="box">
<h3>项目创建</h3>
<!-- 导航 -->
<div class="box">
<div
:class="sub == 0 ? 'color' : ''"
:style="{'background-image': sub == 0 ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}"
>1 填写基本信息</div>
<div
:class="sub == 1 ? 'color' : ''"
:style="{'background-image': sub == 1 ? 'url('+imgUrl.bg0+')' : 'url('+imgUrl.bg1+')'}"
>2 填写详细信息</div>
</div>
<form action>
<div v-if="sub == 0">
<h4>一、基本信息</h4>
<!-- start -->
<aside>
<div>
<label for>项目名称:</label>
<input type="text" name id />
</div>
<div>
<label for>项目申报单位:</label>
<input type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>项目类型:</label>
<input type="text" name id />
</div>
<div>
<label for>项目落地区域:</label>
<input type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>一级项目方向:</label>
<input type="text" name id />
</div>
<div>
<label for>二级项目方向:</label>
<input type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>项目服务领域:</label>
<input type="text" name id />
</div>
<div>
<label for>申报单位属性:</label>
<input type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>申请日期:</label>
<select name id>
<option value>2019-01-31</option>
<option value>2019-01-20</option>
</select>
</div>
<div>
<label for>截止日期:</label>
<select name id>
<option value>2019-01-31</option>
<option value>2019-01-20</option>
</select>
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>通讯地址:</label>
<input type="text" name id />
</div>
<div>
<label for>邮政编码:</label>
<input type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>电子信箱:</label>
<input type="text" name id />
</div>
<div>
<label for>传真电话:</label>
<input type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>法定代表人:</label>
<input type="text" name id />
</div>
<div>
<label for>法人代码:</label>
<input type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>负责人姓名:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>职务:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>办公电话:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>手机:</label>
<input class="i" type="text" name id />
</div>
</aside>
<!-- end -->
<aside>
<div>
<label for>联系人姓名:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>职务:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>办公电话:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>手机:</label>
<input class="i" type="text" name id />
</div>
</aside>
<!-- end -->
<div class="btn" @click="btn(1)">下一步</div>
</div>
<div v-if="sub == 1">
<div class="cc">
<!-- start -->
<aside>
<div>
<label for>项目主责单位:</label>
<input class="i-i" type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>项目名称:</label>
<input type="text" name id />
</div>
<div>
<label for>邮政编码:</label>
<input type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>电子信箱:</label>
<input type="text" name id />
</div>
<div>
<label for>传真电话:</label>
<input type="text" name id />
</div>
</aside>
<!-- end -->
<!-- start -->
<aside>
<div>
<label for>负责人姓名:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>职务:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>办公电话:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>手机:</label>
<input class="i" type="text" name id />
</div>
</aside>
<!-- end -->
<aside>
<div>
<label for>联系人姓名:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>职务:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>办公电话:</label>
<input class="i" type="text" name id />
</div>
<div>
<label for>手机:</label>
<input class="i" type="text" name id />
</div>
</aside>
<!-- end -->
</div>
<div>
<div class="xx">
<h5>二、申报单位简介</h5>
<textarea name id></textarea>
</div>
<div class="xx">
<h5>三、项目简介</h5>
<textarea name id></textarea>
</div>
<div class="xx">
<h5>四、项目论证</h5>
<textarea name id></textarea>
</div>
<div class="xx">
<h5>五、经费预算</h5>
<textarea name id></textarea>
</div>
<div class="xxx">
<h5>六、申报单位承诺</h5>
<div>
<input type="checkbox" name id checked />
<label for>我们确认项目中报内容的真实性,并愿意承担相应的责任</label>
</div>
</div>
<div class="xxx">
<h5>七、项目主责单位意见</h5>
<div class="btnn">
<span>上传文件</span>
</div>
</div>
</div>
<div class="ll">
<div>保存</div>
<input type="submit" name id value="提交" />
</div>
</div>
</form>
</div>
<footerNav class="footer"></footerNav>
</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,
sub: 0,
imgUrl: {
bg0: require("../../../static/img/bg0.png"),
bg1: require("../../../static/img/bg1.png"),
xa: require("../../../static/img/xa.png")
}
};
},
computed: {},
watch: {},
methods: {
btn(index) {
let s = this.sub;
s = index;
this.sub = s;
}
},
created() {},
mounted() {}
};
</script>
<style lang='scss' scoped>
.wrapper {
width: 1280px;
box-sizing: border-box;
#box {
margin: 40px auto 0;
padding: 34px 32px 100px 28px;
box-sizing: border-box;
width: 1200px;
background-color: #ffffff;
form {
.ll {
margin-top: 80px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
div {
margin-right: 152px;
width: 197px;
height: 63px;
background-color: #ff9800;
border-radius: 5px;
font-family: "MicrosoftYaHei";
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 63px;
letter-spacing: 0px;
color: #ffffff;
text-align: center;
}
input[type="submit"] {
width: 197px;
height: 63px;
background-color: #e60012;
border-radius: 5px;
font-family: "MicrosoftYaHei";
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 63px;
text-align: center;
letter-spacing: 0px;
color: #ffffff;
outline: none;
}
}
.xxx {
margin-top: 60px;
width: 100%;
height: 72px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
div {
display: flex;
align-items: center;
}
label {
margin-left: 16px;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 25px;
letter-spacing: 0px;
color: #323232;
}
.btnn {
cursor: pointer;
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;
display: flex;
justify-content: center;
align-items: center;
span {
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
}
}
.xx {
margin-top: 60px;
width: 100%;
height: 188px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
textarea {
width: 1139px;
height: 138px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
resize: none;
}
h5 {
width: 100%;
font-family: "MicrosoftYaHei";
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
.cc {
width: 1140px;
margin: 0 auto 0px;
aside {
width: 100%;
height: 43px;
div {
display: flex;
align-items: center;
label {
display: inline-block;
width: 101px;
height: 43px;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 43px;
text-align: right;
letter-spacing: 0px;
color: #323232;
}
.i-i {
width: 1009px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
outline: none;
margin-left: 30px;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #323232;
}
}
}
}
.btn {
margin: 60px auto 0;
width: 230px;
height: 63px;
background-color: #e60012;
border-radius: 5px;
font-family: "MicrosoftYaHei";
font-size: 26px;
font-weight: normal;
font-stretch: normal;
line-height: 63px;
letter-spacing: 0px;
text-align: center;
color: #ffffff;
}
aside {
width: 1138px;
height: 43px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
label {
display: inline-block;
width: 101px;
height: 43px;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 43px;
text-align: right;
letter-spacing: 0px;
color: #323232;
}
select {
/* 清除默认的箭头样式 */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* 右侧添加小箭头的背景图 */
background: url("../../../static/img/xa.png") 360px center no-repeat;
background-size: 14px 8px;
width: 386px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
padding-left: 83px;
box-sizing: border-box;
outline: none;
margin-left: 30px;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #323232;
}
input {
box-sizing: border-box;
width: 386px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
outline: none;
margin-left: 30px;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #323232;
}
.i {
width: 151px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
outline: none;
margin-left: 30px;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #323232;
}
}
h4 {
width: 1138px;
height: 38px;
font-family: "MicrosoftYaHei";
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
padding-left: 30px;
box-sizing: border-box;
border-bottom: 1px solid #ccc;
margin-bottom: 54px;
}
}
.box {
width: 395px;
height: 34px;
margin: 44px auto 70px;
display: flex;
justify-content: space-between;
align-items: center;
div {
width: 192px;
height: 34px;
background-size: 100% 100%;
font-family: "MicrosoftYaHei";
font-size: 14px;
font-weight: normal;
font-stretch: normal;
line-height: 34px;
text-align: center;
letter-spacing: 0px;
color: #333333;
}
.color {
color: #fff;
}
}
h3 {
width: 89px;
height: 23px;
margin: 0 auto;
font-family: "MicrosoftYaHei";
font-size: 22px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
.footer {
margin-top: 80px;
}
}
</style>

576
src/views/project/project.vue Normal file
View File

@@ -0,0 +1,576 @@
<template>
<div class="wrapper">
<headerNav :index_num="index_num"></headerNav>
<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>
<footerNav class="footer"></footerNav>
</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:not(.disabled).active {
background-color: #e60012;
}
/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: #646464;
}
/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: #646464;
}
}
.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: -86%;
}
}
}
}
.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;
}
.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;
}
.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;
}
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;
.top-b {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
div {
width: 282px;
height: 140px;
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;
}
}
}
.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>

522
src/views/project/schedule.vue Normal file
View File

@@ -0,0 +1,522 @@
<template>
<div class="wrapper">
<headerNav :index_num="index_num"></headerNav>
<div id="box">
<!-- 导航 -->
<div class="top">
<div class="span">
<span @click="btn(0)" :class="sub == 0 ? 'style' : ''">项目进度</span>
<span @click="btn(1)" :class="sub == 1 ? 'style' : ''">项目信息</span>
</div>
<div class="daochu" v-if="sub == 1">项目导出</div>
</div>
<!-- 进度 -->
<div class="img" v-if="sub == 0">
<img :src="imgUrl.tg" v-if="state == 0" />
<img :src="imgUrl.btg" v-if="state == 1" />
<img :src="imgUrl.shz" v-if="state == 2" />
<img :src="imgUrl.zxz" v-if="state == 3" />
</div>
<!-- 项目流程 -->
<div class="bobb" v-if="sub == 0">
<div class="left">
<div class="time">
<span>2019-09-01</span>
<span>2019-09-01</span>
<span>2019-09-01</span>
<span>2019-09-01</span>
<span>2019-09-01</span>
</div>
<div class="jdt">
<!-- 已申报 -->
<img class="sx0" :src="imgUrl.sx0" alt />
<img class="d0" :src="imgUrl.d0" v-if="zt != 0" />
<img class="d1" :src="imgUrl.d1" v-if="zt == 0" />
<!-- 审核中 -->
<img class="sx1" :src="imgUrl.sx1" alt />
<img class="d0" :src="imgUrl.d0" v-if="zt != 1" />
<img class="d1" :src="imgUrl.d1" v-if="zt == 1" />
<!-- 审核通过 -->
<img class="sx1" :src="imgUrl.sx1" alt />
<img class="d0" :src="imgUrl.d0" v-if="zt != 2" />
<img class="d1" :src="imgUrl.d1" v-if="zt == 2" />
<!-- 评审中 -->
<img class="sx1" :src="imgUrl.sx1" alt />
<img class="d0" :src="imgUrl.d0" v-if="zt != 3" />
<img class="d1" :src="imgUrl.d1" v-if="zt == 3" />
<!-- 评审通过 -->
<img class="sx1" :src="imgUrl.sx1" alt />
<img class="d0" :src="imgUrl.d0" v-if="zt != 4" />
<img class="d1" :src="imgUrl.d1" v-if="zt == 4" />
<!-- end -->
<img class="sx1" :src="imgUrl.sx1" alt />
</div>
<div class="bb">
<div class="o">
<span>项目已申报</span>
<img class="oo" :src="imgUrl.d0" alt />
</div>
<div>
<span>初筛审核中</span>
<img class="oo" :src="imgUrl.d0" alt />
</div>
<div>
<span>初筛审核通过</span>
<img class="oo" :src="imgUrl.d0" alt />
</div>
<div>
<span>立项评审中</span>
<img class="oo" :src="imgUrl.d0" alt />
</div>
<div>
<span>立项评审通过</span>
<img class="oo" :src="imgUrl.d0" alt />
</div>
</div>
</div>
<div class="right">
<p>项目流程说明</p>
<ul>
<li v-for="(list,index) in text" :key="index">{{list}}</li>
</ul>
</div>
</div>
<!-- 项目信息 -->
<div class="boxx" v-if="sub == 1">
<h3>一、基本信息</h3>
<div class="one-o">
<ul v-for="(item,index) in arr" :key="index">
<template v-for="(item,index) in text1">
<li :key="index">{{item}}</li>
</template>
</ul>
</div>
<h3>二、申报单位简介:</h3>
<div class="one-e">
<p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
</div>
<h3>三、项目简介</h3>
<div class="one-e">
<p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
</div>
<h3>四、项目论证</h3>
<div class="one-e">
<p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
</div>
<h3>五、经费预算:</h3>
<div class="one-e">
<p>我国仍处于井将长期处于社会主义初级阶段,是最大的国情和实际。“我们开展各项工作,要一切从实际出发,牢牢立足这个最大国情和实际,不要超越阶段。从能源来看,我国當富煤少油缺气?的资源禀赋,决定了煤炭在较长一个时期内作为我国主体能源的地位不会发玍变化,这就婓求我们坚持从煤炭资源丰富的囯情出发,切实抓好煤炭清洁高效利用。”章建华</p>
</div>
<h3>六、申报单位承诺:</h3>
<div class="one-e">
<p>我们确认项目中报内容的真实性,并愿意承担相应的责任</p>
</div>
<h3>七、项目主责单位意见 :</h3>
<div class="one-e">
<p>
<span>
<span>下载</span>
&nbsp;|&nbsp;
<span>预览</span>
</span>
</p>
</div>
</div>
</div>
<footerNav class="footer"></footerNav>
</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,
sub: 0,
imgUrl: {
tg: require("../../../static/img/tg.png"),
btg: require("../../../static/img/btg.png"),
shz: require("../../../static/img/shz.png"),
zxz: require("../../../static/img/zxz.png"),
sx0: require("../../../static/img/sx0.png"),
sx1: require("../../../static/img/sx1.png"),
d0: require("../../../static/img/d0.png"),
d1: require("../../../static/img/d1.png")
},
state: 0,
zt: 2,
arr: [1, 2, 3],
text: [
"第一步：填写并提交项目申报书",
"第二步：线上初筛审核",
"第三步：项目初筛结果查询",
"第四步：线下立项评审",
"第五步：立项结果查询"
],
text1: [
"项目名称：世界婚会",
"项目申报单位：劳动社会组织",
"项目类型：活动",
"项目落地区域：北区",
"一级项目方向：婚礼",
"一级项目方向：婚礼",
"项目服务领域：北区",
"项目有效期：2019-09-02至2019-09-23",
"申报单位属性：国企",
"通讯地址：北京市海涟区",
"电子信箱：15901401996@qq.com",
"传真电话：81223221",
"邮政编码：100000"
]
};
},
computed: {},
watch: {},
methods: {
btn(index) {
let s = this.sub;
s = index;
this.sub = s;
}
},
created() {},
mounted() {}
};
</script>
<style lang='scss' scoped>
.wrapper {
width: 1280px;
box-sizing: border-box;
#box {
margin: 40px auto 0;
width: 1200px;
background-color: #ffffff;
padding: 35px 30px 100px;
box-sizing: border-box;
position: relative;
.boxx {
margin-top: 68px;
width: 100%;
box-sizing: border-box;
.one-e {
width: 100%;
margin-top: 27px;
margin-bottom: 60px;
p {
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
line-height: 39px;
letter-spacing: 0px;
color: #666666;
}
span {
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
line-height: 39px;
letter-spacing: 0px;
color: #7471ef;
}
}
.one-o {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 30px;
margin-bottom: 60px;
ul {
width: 350px;
height: 674px;
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
border-radius: 5px;
padding: 30px 0 0 20px;
box-sizing: border-box;
li {
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
margin-bottom: 28px;
color: #333333;
}
}
}
h3 {
font-family: "MicrosoftYaHei";
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
.bobb {
margin-top: 110px;
width: 100%;
height: 974px;
padding: 0 40px 0 11px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.left {
width: 419px;
height: 974px;
display: flex;
justify-content: space-evenly;
align-items: flex-start;
.time {
width: 120px;
height: 734px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: flex-end;
margin-top: 72px;
.span {
display: inline-block;
width: 119px;
height: 18px;
font-family: "MicrosoftYaHei";
font-size: 22px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
.jdt {
width: 32px;
height: 974px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.sx0 {
width: 3px;
height: 79px;
}
.sx1 {
width: 3px;
height: 153px;
}
.wzx {
width: 20px;
height: 21px;
}
.zx {
width: 20px;
height: 21px;
}
}
.bb {
margin-top: 70px;
width: 180px;
height: 750px;
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: flex-start;
.o {
padding-left: 5px;
box-sizing: border-box;
width: 170px;
height: 36px;
position: relative;
border-bottom: 2px solid #b0c3cd;
img {
width: 10px;
height: 10px;
position: absolute;
right: 0%;
bottom: -16%;
}
}
div {
padding-left: 5px;
box-sizing: border-box;
width: 100%;
height: 36px;
position: relative;
border-bottom: 2px solid #b0c3cd;
img {
width: 10px;
height: 10px;
position: absolute;
right: 0%;
bottom: -16%;
}
}
span {
display: inline-block;
width: 135px;
height: 22px;
text-align: center;
line-height: 22px;
font-family: "MicrosoftYaHei";
font-size: 22px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
}
}
.right {
padding: 35px 30px;
box-sizing: border-box;
width: 535px;
height: 698px;
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
border-radius: 10px;
ul {
margin-top: 48px;
li {
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
line-height: 48px;
letter-spacing: 0px;
color: #666666;
}
}
p {
text-align: center;
width: 100%;
font-family: "MicrosoftYaHei";
font-size: 24px;
font-weight: normal;
font-stretch: normal;
line-height: 31px;
letter-spacing: 0px;
color: #333333;
}
}
}
.img {
width: 119px;
height: 95px;
position: absolute;
right: 0%;
top: 1%;
img {
width: 119px;
height: 95px;
}
}
.top {
width: 1140px;
height: 38px;
border-bottom: 1px solid #ccc;
padding-left: 12px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
.daochu {
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;
line-height: 32px;
text-align: center;
letter-spacing: 0px;
color: #ffffff;
}
.span {
span {
margin-right: 40px;
display: inline-block;
width: 120px;
height: 38px;
text-align: center;
font-family: "MicrosoftYaHei";
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
.style {
color: #e60012;
position: relative;
&::after {
content: "";
width: 120px;
height: 2px;
background-color: #e60012;
position: absolute;
bottom: 0%;
left: 0%;
}
}
}
}
}
.footer {
margin-top: 80px;
}
}
</style>

2
src/views/registered/registered.vue
View File

@@ -3,7 +3,7 @@
<div class="box">
<div class="boxx">
<h3>立 即 注 冊</h3>
<form action method>
<form action method enctype="multipart/form-data">
<!-- 请输入组织名称 -->
<label>
<span class="one">