群发审批
This commit is contained in:
liuye
178
src/project/pidu/AppExamineApprove/AppExamineApprove.vue
Normal file
178
src/project/pidu/AppExamineApprove/AppExamineApprove.vue
Normal file
@@ -0,0 +1,178 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppExamineApprove">
|
||||||
|
<p class="tips">请在12月13日 24:00前完成群发任务</p>
|
||||||
|
<div class="info">
|
||||||
|
<div class="title">群发客户群</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="label">任务名称</span>
|
||||||
|
<span class="value">居民社保最新政策</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="label">创建人</span>
|
||||||
|
<span class="value">李逸云</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="flex">
|
||||||
|
<span class="label">群发范围</span>
|
||||||
|
<span class="value">我的全部居民群<u-icon name="arrow-right" color="#CECECE" size="26"></u-icon></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<span class="label">群发内容</span>
|
||||||
|
</div>
|
||||||
|
<p class="text">构建全域数字大脑，助力政府科学决策，构建全域数字大脑，助力政府科学决策</p>
|
||||||
|
<div class="img-list">
|
||||||
|
<div class="item">
|
||||||
|
<img src="https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
|
||||||
|
<div>
|
||||||
|
<p>数字乡村现场活动照.png</p>
|
||||||
|
<span>24K</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-btn">前往群发</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "AppExamineApprove",
|
||||||
|
appName: "群发审批",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
document.title = '群发审批'
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppExamineApprove {
|
||||||
|
height: 100%;
|
||||||
|
.tips {
|
||||||
|
padding: 32px;
|
||||||
|
background-color: #FFF8F3;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #FF883C;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 24px 32px;
|
||||||
|
.title {
|
||||||
|
padding: 26px 0 28px 32px;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 44px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
padding: 28px 32px;
|
||||||
|
display: flex;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 30px;
|
||||||
|
.label {
|
||||||
|
color: #999;
|
||||||
|
width: 176px;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: #333;
|
||||||
|
width: calc(100% - 176px);
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
border-radius: 8px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 32px 120px;
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 30px;
|
||||||
|
padding: 28px 32px;
|
||||||
|
.label {
|
||||||
|
color: #999;
|
||||||
|
width: 176px;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: #333;
|
||||||
|
width: calc(100% - 176px);
|
||||||
|
word-break: break-all;
|
||||||
|
text-align: right;
|
||||||
|
.u-icon {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
padding: 20px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #333;
|
||||||
|
word-break: break-all;
|
||||||
|
line-height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
margin: 0 32px 32px;
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
margin: 0 32px 0;
|
||||||
|
.item {
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
img {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
width: calc(100% - 180px);
|
||||||
|
p {
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 44px;
|
||||||
|
word-break: break-all;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 112px;
|
||||||
|
line-height: 112px;
|
||||||
|
text-align: center;
|
||||||
|
background: #3975C6;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
185
src/project/pidu/AppExamineApprove/detail.vue
Normal file
185
src/project/pidu/AppExamineApprove/detail.vue
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<div class="detail">
|
||||||
|
<div class="info">
|
||||||
|
<div class="title">群发客户群</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="label">任务名称</span>
|
||||||
|
<span class="value">居民社保最新政策</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<span class="label">创建人</span>
|
||||||
|
<span class="value">李逸云</span>
|
||||||
|
</div>
|
||||||
|
<img src="https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="status-img">
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<div class="flex">
|
||||||
|
<span class="label">群发范围</span>
|
||||||
|
<span class="value">我的全部居民群<u-icon name="arrow-right" color="#CECECE" size="26"></u-icon></span>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<span class="label">群发内容</span>
|
||||||
|
</div>
|
||||||
|
<p class="text">构建全域数字大脑，助力政府科学决策，构建全域数字大脑，助力政府科学决策</p>
|
||||||
|
<div class="img-list">
|
||||||
|
<div class="item">
|
||||||
|
<img src="https://img2.baidu.com/it/u=1361506290,4036378790&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
|
||||||
|
<div>
|
||||||
|
<p>数字乡村现场活动照.png</p>
|
||||||
|
<span>24K</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-btn">前往群发</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "detail",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
document.title = '群发审批'
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.detail {
|
||||||
|
height: 100%;
|
||||||
|
.tips {
|
||||||
|
padding: 32px;
|
||||||
|
background-color: #FFF8F3;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #FF883C;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 24px 32px;
|
||||||
|
position: relative;
|
||||||
|
.title {
|
||||||
|
padding: 26px 0 28px 32px;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 44px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
.item {
|
||||||
|
padding: 28px 32px;
|
||||||
|
display: flex;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 30px;
|
||||||
|
.label {
|
||||||
|
color: #999;
|
||||||
|
width: 176px;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: #333;
|
||||||
|
width: calc(100% - 176px);
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.status-img {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
border-radius: 8px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
background-color: #fff;
|
||||||
|
margin: 0 32px 120px;
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 30px;
|
||||||
|
padding: 28px 32px;
|
||||||
|
.label {
|
||||||
|
color: #999;
|
||||||
|
width: 176px;
|
||||||
|
}
|
||||||
|
.value {
|
||||||
|
color: #333;
|
||||||
|
width: calc(100% - 176px);
|
||||||
|
word-break: break-all;
|
||||||
|
text-align: right;
|
||||||
|
.u-icon {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
padding: 20px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 28px;
|
||||||
|
color: #333;
|
||||||
|
word-break: break-all;
|
||||||
|
line-height: 40px;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
margin: 0 32px 32px;
|
||||||
|
}
|
||||||
|
.img-list {
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #F9F9F9;
|
||||||
|
margin: 0 32px 0;
|
||||||
|
.item {
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
img {
|
||||||
|
width: 160px;
|
||||||
|
height: 160px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
div {
|
||||||
|
width: calc(100% - 180px);
|
||||||
|
p {
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #333;
|
||||||
|
line-height: 44px;
|
||||||
|
word-break: break-all;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 26px;
|
||||||
|
color: #9B9B9B;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom-btn {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 112px;
|
||||||
|
line-height: 112px;
|
||||||
|
text-align: center;
|
||||||
|
background: #3975C6;
|
||||||
|
font-family: PingFangSC-Medium;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 32px;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user