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

kun 9/25 9:21

Browse Source
This commit is contained in:
沈学坤
2019-09-25 09:21:20 +08:00
parent 62ee28fadf
commit f86504bdef
16 changed files with 681 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files

430
src/views/personal/Apply.vue Normal file
View File

@@ -0,0 +1,430 @@
<template>
<div class="w" :style="{height:num + 'px'}">
<div class="img-box">
<img class="img" :src="imgUrl.tg" v-if="state == 0" />
<img class="img" :src="imgUrl.btg" v-if="state == 1" />
<img class="img" :src="imgUrl.shz" v-if="state == 2" />
<img class="img" :src="imgUrl.zxz" v-if="state == 3" />
</div>
<form>
<div class="items" v-if="!zhuangtai">
<h3>基本信息</h3>
<!-- start -->
<div class="item">
<label for>社会组织名称:</label>
<input class="input0" type="text" value="劳动组织" />
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>社会组织类型:</label>
<select class="input1" name id>
<option value>劳动</option>
<option value>团体</option>
</select>
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>流动党员数量:</label>
<input class="input0" type="text" value="20" />
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>已有党员数量:</label>
<input class="input0" type="text" value="20" />
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>从业人员总数:</label>
<input class="input0" type="text" value="20" />
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>党组织名称:</label>
<input class="input0" type="text" value="劳动组织" />
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>是否建立党组织:</label>
<label class="label" for>
<input type="radio" name="q" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="q" />&nbsp;&nbsp;否
</label>
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>是否建立“功能型”党组织:</label>
<label class="label" for>
<input type="radio" name="q" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="q" />&nbsp;&nbsp;否
</label>
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>登记管理机关:</label>
<input class="input2" type="text" value="劳动管理机关" />
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>业务主管单位:</label>
<input class="input2" type="text" value="劳动管理机关" />
</div>
<!-- end -->
<!-- start -->
<div class="item">
<label for>隶属的上一级党组织名称:</label>
<input class="input2" type="text" value="劳动组织" />
</div>
<!-- end -->
<div class="btn" @click="anNui()">下一页</div>
</div>
<div class="items" v-if="zhuangtai">
<div>
<h3>党组织书记情况</h3>
<!-- start -->
<div class="it">
<label for>姓名:</label>
<input class="input0" type="text" value />
</div>
<!-- end -->
<!-- start -->
<div class="it">
<label for>性别:</label>
<label class="label" for>
<input type="radio" name="sex" />&nbsp;&nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="sex" />&nbsp;&nbsp;女
</label>
</div>
<!-- end -->
<!-- start -->
<div class="it">
<label for>年龄:</label>
<input class="input0" type="text" value />
</div>
<!-- end -->
<!-- start -->
<div class="it">
<label for>行政职务:</label>
<input class="input0" type="text" value />
</div>
<!-- end -->
<!-- start -->
<div class="it">
<label for>近三年参加上级党组织培训次数:</label>
<input class="input0" type="text" value />
</div>
<!-- end -->
</div>
<div style="margin-top:60px;">
<h3>党组织信息</h3>
<!-- start -->
<div class="it">
<label for>近三年发展党员数:</label>
<input class="input0" type="text" value />
</div>
<!-- end -->
<!-- start -->
<div class="it">
<label for>是否建立群团组织:</label>
<label class="label" for>
<input type="radio" name="zz" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="zz" />&nbsp;&nbsp;否
</label>
</div>
<!-- end -->
<!-- start -->
<div class="it">
<label for>专职党务工作者人数:</label>
<input class="input0" type="text" value />
</div>
<!-- end -->
<!-- start -->
<div class="it">
<label for>是否选派党建工作指导员:</label>
<label class="label" for>
<input type="radio" name="zd" />&nbsp;&nbsp;是&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="zd" />&nbsp;&nbsp;否
</label>
</div>
<!-- end -->
<!-- start -->
<div class="it">
<label for>党组织年度活动经费(万元):</label>
<input class="input0" type="text" value />
</div>
<!-- end -->
<!-- start -->
<div class="it">
<label for>党组织年度活动场所面积(平米):</label>
<input class="input0" type="text" value />
</div>
<!-- end -->
</div>
</div>
</form>
</div>
</template>
<script>
export default {
components: {},
props: {},
data () {
return {
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'),
xa: require('../../../static/img/xa.png')
},
state: 0,
zhuangtai: false,
num: 1050
}
},
computed: {},
watch: {
num (newValue, oldValue) {
this.$emit('listenToChildExen', this.num)
}
},
methods: {
anNui () {
this.zhuangtai = !this.zhuangtai
this.num = 1073
},
sendMsgToParent () {
this.$emit('listenToChildExen', this.num)
}
},
created () {},
mounted () {
this.sendMsgToParent()
}
}
</script>
<style lang='scss' scoped>
.w {
width: 934px;
background-color: #ffffff;
padding: 35px 30px 0px;
box-sizing: border-box;
position: relative;
.items {
width: 100%;
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;
}
h3 {
width: 874px;
height: 37px;
padding-left: 29px;
box-sizing: border-box;
font-family: "MicrosoftYaHei";
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
border-bottom: 1px solid #dedede;
margin-bottom: 60px;
}
.btn {
width: 230px;
height: 63px;
background-color: #e60012;
border-radius: 5px;
margin: 60px auto 0px;
text-align: center;
line-height: 63px;
font-family: "MicrosoftYaHei";
font-size: 26px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #ffffff;
}
.item {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 24px;
.label {
display: inline-block;
width: 386px;
height: 43px;
margin-left: 30px;
text-align: left;
}
label {
width: 197px;
height: 43px;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 43px;
text-align: right;
letter-spacing: 0px;
color: #333333;
}
.input0 {
margin-left: 30px;
width: 386px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
padding-left: 30px;
box-sizing: border-box;
outline: none;
}
.input1 {
margin-left: 30px;
/* 清除默认的箭头样式 */
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;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
padding-left: 30px;
box-sizing: border-box;
outline: none;
}
.input2 {
margin-left: 30px;
width: 647px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
padding-left: 30px;
box-sizing: border-box;
outline: none;
}
}
.it {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
&:last-child {
margin-bottom: 0;
}
.label {
display: inline-block;
width: 386px;
height: 43px;
margin-left: 30px;
text-align: left;
}
label {
width: 229px;
height: 43px;
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 43px;
text-align: right;
letter-spacing: 0px;
color: #333333;
}
.input0 {
margin-left: 30px;
width: 386px;
height: 43px;
background-color: #ffffff;
border: solid 1px #c7c7c7;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
padding-left: 30px;
box-sizing: border-box;
outline: none;
}
}
}
.img-box {
width: 158px;
height: 121px;
opacity: 0.5;
position: absolute;
right: 0%;
top: 0%;
img {
width: 158px;
height: 121px;
}
}
}
</style>

240
src/views/personal/Collection.vue Normal file
View File

@@ -0,0 +1,240 @@
<template>
<div class="wr">
<template v-for="(item,index) in mData">
<div class="page" :key="index">
<time>
<span class="iconfont icon-shizhong"></span>
{{item.time}}
</time>
<div id="box">
<template v-for="(list,index) in item.shujv">
<div class="box" :key="index">
<span class="iconfont icon-changyongtubiao-mianxing-"></span>
<aside>
<span class="span1">活动策划是提高市场占有率的有效行为</span>
<span class="span2">来源板块：统一战线</span>
</aside>
<p>活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可升企...升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划</p>
</div>
</template>
</div>
</div>
</template>
<!-- 分页按钮 -->
<div class="pages">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
background
layout="prev, pager, next"
:total="10"
></el-pagination>
</div>
<!-- end -->
</div>
</template>
<script>
export default {
components: {},
props: {},
data () {
return {
pageSize: 1,
currentPage: 1,
totalCount: 1,
mData: [
{ time: '2019-10-14', shujv: [1, 2, 3, 4] },
{ time: '2019-10-14', shujv: [1, 2, 3, 4, 5] }
],
num: 1019
}
},
computed: {},
watch: {},
methods: {
sendMsgToParent () {
this.$emit('listenToChildExen', this.num)
},
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 () {
this.sendMsgToParent()
}
}
</script>
<style lang='scss' scoped>
.wr {
width: 934px;
height: 1019px;
background-color: #ffffff;
box-sizing: border-box;
padding-top: 35px;
.pages {
margin-top: 60px;
margin-right: 24px;
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;
}
}
.page {
margin-bottom: 60px;
height: 364px;
box-sizing: border-box;
#box {
overflow-y: scroll;
height: 375px;
padding-bottom: 40px;
box-sizing: border-box;
&::-webkit-scrollbar {
width: 0px;
}
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.box {
width: 875px;
height: 135px;
box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.15);
border-radius: 5px;
margin-top: 40px;
padding: 31px 23px 32px 28px;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
&:nth-of-type(1) {
margin-top: 30px;
}
.iconfont {
font-size: 23px;
color: #fec300;
position: absolute;
right: 23px;
top: 23px;
}
aside {
width: 689px;
height: 23px;
display: flex;
justify-content: space-between;
align-items: center;
.span1 {
display: inline-block;
width: 60%;
font-family: "MicrosoftYaHei";
font-size: 22px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #333333;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.span2 {
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
letter-spacing: 1px;
color: #999999;
}
}
p {
height: 20px;
line-height: 20px;
width: 100%;
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 1px;
color: #666666;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
}
time {
font-family: "MicrosoftYaHei";
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #666666;
display: flex;
align-items: center;
margin-left: 30px;
.iconfont {
font-size: 24px;
margin-right: 24px;
}
}
}
}
</style>

578
src/views/personal/Declare.vue Normal file
View File

@@ -0,0 +1,578 @@
<template>
<div class="wra">
<div id="box">
<div class="bottom">
<!-- 公告 -->
<div class="top">
<img :src="imgUrl.xlb" alt />
<div>
<span>世界婚博会已通过初审</span>
<time>[2019-07-31]</time>
</div>
</div>
<!-- 表格 -->
<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 < 4" @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>
</div>
</template>
<script>
export default {
components: {},
props: {},
data () {
return {
num: 1165,
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
},
sendMsgToParent () {
this.$emit('listenToChildExen', this.num)
},
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 () {
this.sendMsgToParent()
}
}
</script>
<style lang='scss' scoped>
.wra {
width: 934px;
height: 1165px;
background-color: #ffffff;
padding: 35px 30px 0px;
box-sizing: border-box;
#box {
margin: 0 auto;
width: 100%;
box-sizing: border-box;
.bottom {
padding: 0px 30px 0px;
box-sizing: border-box;
width: 100%;
height: auto;
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: 100%;
height: auto;
.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: 100%;
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 !important;
}
.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 !important;
}
.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 !important;
}
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: 100%;
height: 181px;
border: solid 1px #dadada;
background-color: #f6f6f6;
.top-b {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
div {
width: 202px;
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: 100%;
height: 40px;
background-color: #f6f6f6;
text-align: center;
line-height: 40px;
border: 1px solid #dadada;
}
}
}
.top {
width: 100%;
height: 40px;
margin: 0px 0 30px;
display: flex;
justify-content: space-between;
align-items: center;
img {
width: 33px;
height: 27px;
}
div {
width: 750px;
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>

109
src/views/personal/Modify.vue Normal file
View File

@@ -0,0 +1,109 @@
<template>
<div class="wrap">
<form onsubmit="return false">
<div class="box">
<label for>请输入原密码:</label>
<input class="input" type="text" name id />
</div>
<div class="box">
<label for>请输入新密码:</label>
<input class="input" type="text" name id />
</div>
<div class="box">
<label for>请再次输入新密码:</label>
<input class="input" type="text" name id />
</div>
<div class="btn">
<input type="submit" name id value="保存" />
</div>
</form>
</div>
</template>
<script>
export default {
components: {},
props: {},
data () {
return {
num: 654
}
},
computed: {},
watch: {},
methods: {
sendMsgToParent () {
this.$emit('listenToChildExen', this.num)
}
},
created () {},
mounted () {
this.sendMsgToParent()
}
}
</script>
<style lang='scss' scoped>
.wrap {
width: 934px;
height: 654px;
background-color: #ffffff;
padding-top: 36px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-start;
form {
.box {
width: 100%;
margin-bottom: 30px;
label {
font-family: "MicrosoftYaHei";
font-size: 16px;
font-weight: normal;
font-stretch: normal;
line-height: 40px;
letter-spacing: 0px;
color: #333333;
width: 133px;
height: 40px;
text-align: right;
display: inline-block;
}
.input {
width: 400px;
height: 40px;
background-color: #ffffff;
border-radius: 5px;
border: solid 1px #dbdbda;
outline: none;
margin-left: 30px;
}
}
.btn {
display: flex;
justify-content: center;
margin-top: 60px;
input[type="submit"] {
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;
text-align: center;
letter-spacing: 0px;
color: #ffffff;
outline: none;
}
}
}
}
</style>

134
src/views/personal/PersonalZte.vue Normal file
View File

@@ -0,0 +1,134 @@
<template>
<div class="wrapper">
<header-nav :index_num="index_num"></header-nav>
<div id="box">
<div class="left"
:style="{height:heightVal+'px'}">
<div class="list"
@click="btn(index)"
v-for="(list,index) in text"
:key="index"
:class="sub == index ? 'color' : ''">{{list}}</div>
</div>
<div class="right">
<apply v-if="sub == 0"
@listenToChildExen="showMsgFromChild"></apply>
<collection v-if="sub == 1"
@listenToChildExen="showMsgFromChild"></collection>
<declare v-if="sub == 2"
@listenToChildExen="showMsgFromChild"></declare>
<modify v-if="sub == 3"
@listenToChildExen="showMsgFromChild"></modify>
</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";
import Apply from "./Apply";
import Collection from "./Collection";
import Declare from "./Declare";
import Modify from "./Modify";
export default {
components: {
HeaderNav,
FooterNav,
Apply,
Collection,
Declare,
Modify
},
props: {},
data() {
return {
index_num: 3,
text: ["党组织申请", "我的收藏", "项目申报", "个人中心-修改密码"],
sub: 0,
heightVal: 1050
};
},
computed: {},
watch: {},
methods: {
showMsgFromChild(data) {
this.heightVal = data;
},
btn(index) {
let s = this.sub;
s = index;
this.sub = s;
}
},
created() {},
mounted() {}
};
</script>
<style lang='scss' scoped>
.wrapper {
width: 1280px;
#box {
width: 100%;
margin: 40px auto 0;
box-sizing: border-box;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
.left {
width: 241px;
background-color: #ffffff;
box-shadow: 0px 7px 11px 0px rgba(231, 231, 231, 0.7);
border-radius: 2px;
.list {
width: 100%;
height: 48px;
margin-top: 21px;
text-align: left;
line-height: 48px;
padding-left: 37px;
box-sizing: border-box;
font-family: "MicrosoftYaHei";
font-size: 20px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #333333;
}
.color {
position: relative;
color: #e60012;
&::after {
content: "";
width: 5px;
height: 48px;
background-color: #e60012;
border-radius: 8px;
position: absolute;
left: 0%;
top: 0%;
}
}
}
.right {
width: 934px;
background-color: #ffffff;
}
}
.footer {
margin-top: 80px;
}
}
</style>