<template>
|
<view class="problem-report-page">
|
<view class="info-cards">
|
<view class="info-top">
|
<view class="num">诉求号：7843523454</view>
|
<view class="status">正在办理</view>
|
</view>
|
|
<view class="address">
|
<view class="adr">江苏省常州市溧阳市牛顿大道172号</view>
|
<image src="/static/position@2x.png" class="w-31 h-31" mode="aspectFill"></image>
|
</view>
|
|
<view class="table-head">
|
<view class="type flex1">问题类型</view>
|
<view class="person flex1">群众</view>
|
<view class="phone flex1">联系电话</view>
|
</view>
|
|
<view class="table-body">
|
<view class="table-item">
|
<view class="type-tip flex1">
|
<view class="tip">
|
教育
|
</view>
|
</view>
|
<view class="person-item flex1">沙振</view>
|
<view class="phone-item flex1">14225874426</view>
|
</view>
|
</view>
|
|
</view>
|
|
<view class="input-card">
|
<view class="title mb-27">
|
上报说明
|
</view>
|
<u--textarea style="background-color:rgba(248, 248, 248, 1);border: unset;padding:25rpx 30.77rpx;"
|
height="365.38rpx" v-model="content" placeholder="请输入内容"></u--textarea>
|
</view>
|
|
<view class="notice-tip flex a-center ">
|
<image src="/static/warnng@2x.png" class="w-31 h-31 mr-15" mode="aspectFill"></image>
|
提交后会由上级部门进行审核，请留意审核结果
|
</view>
|
|
<view class="btn">提交至上级部门</view>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
content: '',
|
};
|
}
|
}
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
.problem-report-page {
|
padding-top: 38.46rpx;
|
margin: 0 30.77rpx;
|
|
.info-cards {
|
padding: 21.15rpx 26.92rpx 36.54rpx 26.92rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
background: linear-gradient(180deg, #FFDCDB 0%, rgba(255, 255, 255, 0) 100%);
|
border-radius: 19rpx;
|
|
.info-top {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.num {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 23rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 33rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.status {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 23rpx;
|
color: #FF4948;
|
line-height: 33rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
}
|
|
.address {
|
margin: 32.69rpx 13.46rpx 30.77rpx 13.46rpx;
|
display: flex;
|
justify-content: space-between;
|
// height: 106rpx;
|
background: linear-gradient(270deg, rgba(255, 241, 0, 0.5) 0%, rgba(255, 249, 172, 0.25) 48%, rgba(255, 255, 255, 0.2) 100%, #FFFFFF 100%);
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 19rpx;
|
align-items: center;
|
padding: 38.46rpx 26.92rpx 36.54rpx 26.92rpx;
|
|
.adr {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
}
|
|
.table-head {
|
display: flex;
|
text-align: center;
|
|
.type {
|
text-align: left;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.person {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.phone {
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
}
|
|
.table-item {
|
display: flex;
|
display: flex;
|
text-align: center;
|
margin-top: 8rpx;
|
|
.tip {
|
width: calc(108rpx - 30.77rpx - 30.77rpx);
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 23rpx;
|
color: #FAAD14;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
padding: 1.92rpx 30.77rpx;
|
background: #FFFBE6;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
border-radius: 8rpx;
|
border: 2rpx solid #FFF1B8;
|
}
|
|
.person-item {
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
|
.phone-item {
|
font-family: PingFang-SC, PingFang-SC;
|
font-weight: 500;
|
font-size: 27rpx;
|
color: #000000;
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
}
|
|
|
}
|
|
.input-card {
|
// width: 688rpx;
|
min-height: calc(504rpx - 34.62rpx - 38.46rpx);
|
padding: 34.62rpx 30.77rpx 38.46rpx 30.77rpx;
|
border-radius: 19rpx;
|
background: #FFFFFF;
|
box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(0, 0, 0, 0.1);
|
margin-top: 38.46rpx;
|
|
.title {
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 27rpx;
|
color: rgba(0, 0, 0, 0.88);
|
line-height: 38rpx;
|
text-shadow: 0px 0px 27px rgba(0, 0, 0, 0.1);
|
}
|
}
|
|
.notice-tip {
|
margin-top: 38.46rpx;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 400;
|
font-size: 27rpx;
|
color: #FF4948;
|
line-height: 42rpx;
|
}
|
|
|
.btn {
|
position: fixed;
|
bottom: calc(38.46rpx + env(safe-area-inset-bottom));
|
left: 0;
|
right: 0;
|
width: 688rpx;
|
height: 96rpx;
|
background: linear-gradient(270deg, #FC8D55 0%, #FF4948 100%);
|
border-radius: 48rpx;
|
margin: 0 auto;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-family: PingFangSC, PingFang SC;
|
font-weight: 600;
|
font-size: 35rpx;
|
color: #FFFFFF;
|
}
|
}
|
</style>
|
