update:样式更新

This commit is contained in:
2021-10-12 13:26:36 +08:00
parent b767a81f09
commit 30892a757e
6 changed files with 148 additions and 111 deletions

View File

@@ -7,36 +7,38 @@
element-loading-background=" rgba(118,118,118)"
>
<div class="topBox">
<div class="titleBox">
被征收人信息查询
<div style="padding:15px 0">
<div class="titleBox">
被征收人信息查询
</div>
</div>
<div class="baseInfo">
<van-image :src="require('@/assets/img/renyuanliebiao.png')" />
<img src="@/assets/img/renyuanliebiao.png" />
<span>被征收人姓名{{ data.userName }}</span>
</div>
<div class="baseInfo">
<van-image :src="require('@/assets/img/credentials_icon.png')" />
<img src="@/assets/img/credentials_icon.png" />
<span>身份证号码{{ setIdCard(data.idCard) }}</span>
</div>
<!-- 三张背景图 -->
<div class="gridBg ">
<div style="background:#1897FB;">
<van-image :src="require('@/assets/img/scan.png')" />
<img src="@/assets/img/scan.png" />
<span>扫一扫</span>
</div>
<div @click="gotoProject('pg')" style="background:#F1AE4B;">
<van-image :src="require('@/assets/img/evaluation.png')" />
<img src="@/assets/img/evaluation.png" />
<span>查评估结果</span>
</div>
<div @click="gotoProject('xy')" style="background:#16D7ED;">
<van-image :src="require('@/assets/img/compensation.png')" />
<img src="@/assets/img/compensation.png" />
<span>查补偿协议</span>
</div>
</div>
</div>
<!-- 大背景图 -->
<div>
<van-image :src="require('@/assets/img/government.png')" />
<div class="bigImage">
<img src="@/assets/img/government.png" />
</div>
<!-- 项目内容 -->
<div :key="item.prjId" v-for="item in data.prjList">
@@ -61,26 +63,33 @@
<!-- 项目内容 -->
<div class="projectCenterBox">
<div>
<img src="@/assets/img/project_area.png" />
<span>项目所在区域</span>
<div>
<img src="@/assets/img/project_area.png" />
<span>项目所在区域</span>
</div>
<div>{{ item.area }}</div>
</div>
<div>
<img src="@/assets/img/project_dep.png" />
<span>征收部门</span>
<div>
<img src="@/assets/img/project_dep.png" />
<span>征收部门</span>
</div>
<div>{{ item.zsbm }}</div>
</div>
<div>
<img src="@/assets/img/project_year.png" />
<span>所属年份</span>
<div>
<img src="@/assets/img/project_year.png" />
<span>所属年份</span>
</div>
<div>{{ item.year }}</div>
</div>
<div>
<img src="@/assets/img/project_no.png" />
<span>征收决定号</span>
<span style="color: #3883f1">
{{ item.zsjdh }}
</span>
<div>
<img src="@/assets/img/project_no.png" />
<span>征收决定号</span>
</div>
<div class="blue">{{ item.zsjdh }}</div>
</div>
</div>
<!-- 分户评估结果部分 -->
@@ -212,7 +221,7 @@ export default {
{
name: "请求出错暂时没有可用数据",
currentState: "无数据",
area: "宁波市房屋建设和建筑管理办公室",
area: "宁波市房屋建设管理办公室九号楼",
zsbm: "无数据",
year: "无数据",
zsjdh: "无数据",
@@ -459,25 +468,21 @@ export default {
background: #f6f7f8;
padding-bottom: 20px;
> div:nth-child(n + 2) {
margin-top: 10px;
margin-right: 12px;
margin-left: 10px;
margin: 10px 12px 0 10px;
}
}
// 最上面盒子
.topBox {
overflow: hidden;
width: 100%;
height: 225px;
background: url(../assets/img/bg.png);
background-size: 100% 225px;
background-size: 100% auto;
background-repeat: no-repeat;
.titleBox {
display: flex;
align-items: center;
justify-content: center;
width: 173px;
height: 36px;
margin: 15px 0 15px 0;
border-radius: 0 22px 22px 0;
background: rgba(6, 63, 142, 0.66);
font-size: 16px;
@@ -487,7 +492,8 @@ export default {
.baseInfo {
display: flex;
margin: 5px 0;
.van-image {
align-items: center;
img {
height: 21px;
padding-right: 10px;
padding-left: 31px;
@@ -498,11 +504,11 @@ export default {
}
.gridBg {
display: flex;
overflow: hidden;
align-items: center;
justify-content: space-around;
margin: 10px 12px 0 10px;
height: 120px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.28);
> div {
@@ -512,24 +518,25 @@ export default {
justify-content: center;
width: 90px;
height: 80px;
margin: 12px 6px;
padding-top: 5px;
margin: 20px 0 10px;
border-radius: 10px;
.van-image {
width: 38px;
img {
height: 35px;
}
span {
padding-top: 5px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
line-height: 20px;
height: 20px;
color: #fff;
}
}
}
}
// 大背景图
.bigImage {
img {
width: 100%;
}
}
// 项目部分
.project {
display: flex;
@@ -597,22 +604,30 @@ export default {
.projectCenterBox {
> div {
display: flex;
align-items: center;
align-items: flex-start;
padding-top: 15px;
img {
height: 15px;
padding: 0 10px;
> :nth-child(1) {
display: flex;
align-items: center;
img {
height: 15px;
padding: 0 10px;
}
:nth-child(2) {
font-weight: 400;
color: #b3b5b9;
width: 106px;
}
}
span {
font-weight: 400;
color: #b3b5b9;
white-space: nowrap;
}
div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
> :last-child {
color: #363a44;
width: 55%;
}
.blue {
color: #3883f1;
}
}
}
@@ -640,20 +655,20 @@ export default {
font-weight: 400;
> div {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
padding-left: 12px;
span {
:nth-child(1) {
white-space: nowrap;
color: #b3b5b9;
}
> span:nth-child(2) {
:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
color: #363a44;
}
}
> div:nth-child(2) {
> :nth-child(2) {
margin: 15px 0;
}
}
@@ -669,7 +684,6 @@ export default {
background: #2468f2;
}
span {
font-family: PingFangSC-Regular, PingFang SC;
font-size: 16px;
font-weight: 400;
color: #2468f2;
@@ -681,14 +695,14 @@ export default {
font-weight: 400;
> div {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
padding-left: 12px;
span {
:nth-child(1) {
white-space: nowrap;
color: #b3b5b9;
}
> span:nth-child(2) {
:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
color: #363a44;

View File

@@ -73,16 +73,9 @@ export default {
"https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=fwzs"
);
}, 3000);
} else if (result.data.message == "未上传附件") {
this.$message({
message: "无附件",
duration: 3000,
type: "info",
center: true
});
} else {
this.$message({
message: "请求出错",
message: result.data.message,
duration: 3000,
type: "error",
center: true

View File

@@ -65,7 +65,12 @@ export default {
}
},
onFail: function(err) {
console.log("错误信息", err);
this.$notify({
title: "错误",
message: "请求失败",
type: "error",
duration: 3000
});
}
});
},

View File

@@ -13,32 +13,30 @@
<el-card body-style="padding:0 4px 0">
<div>
<img alt src="@/assets/img/bianhao.png" />
协议编号
<span>协议编号</span>
<b>{{ item.xyNo }}</b>
</div>
<div>
<img alt src="@/assets/img/name.png" />
被征收人姓名
<span> 被征收人姓名</span>
<b>{{ info.userName }}</b>
</div>
<div>
<img alt src="@/assets/img/address.png" />
协议类型
<span> 协议类型</span>
<b>{{ item.switchProductionWay }}</b>
</div>
<div style="vertical-align:bottom">
<img alt src="@/assets/img/money.png" />
评估总金额
<b style="color: #3C70DD;font-size:16px">{{ item.countValue }}</b
>
</div>
<div>
<img alt src="@/assets/img/money.png" />
合计补偿金额
<b style="color: #E55454;font-size:16px">{{
item.summationShouldCompensateMoney
}}</b
>
<span> 评估总金额</span>
<b class="blue">{{ item.countValue }}</b>
<b></b>
</div>
<div>
<img alt src="@/assets/img/money.png" />
<span>合计补偿金额</span>
<b class="red">{{ item.summationShouldCompensateMoney }}</b>
<b></b>
</div>
<div class="line">
<img alt src="@/assets/img/hengxian.png" />
@@ -146,15 +144,30 @@ export default {
.el-card {
margin: 0 10px 10px;
.el-card__body {
.blue {
color: #3c70dd;
font-size: 16px;
}
.red {
color: #e55454;
font-size: 16px;
}
> div {
margin: 14px 0;
display: flex;
align-items: center;
height: 20px;
img {
color: #b3b5b9;
> img {
margin-right: 6px;
height: 100%;
}
> span {
width: 106px;
}
b {
color: #363a44;
}
}
.line {
opacity: 1;
@@ -170,9 +183,7 @@ export default {
align-items: center;
justify-content: center;
overflow: hidden;
> div {
height: 100%;
}
height: 20px;
img {
margin-right: 10px;
height: 100%;

View File

@@ -4,6 +4,7 @@
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background=" rgba(118,118,118)"
>
<div class="top">
<div>
@@ -11,14 +12,14 @@
<img src="@/assets/img/houseLocation.png" alt="" />
<span>被征收房屋座落:</span>
</div>
<span>{{ info.houseAddress }}</span>
<span>({{ info.houseAddress }})</span>
</div>
<div>
<div>
<img src="@/assets/img/evaluateType.png" alt="" />
<span>评估方式:</span>
</div>
<span>{{ info.valuationMethodText }}</span>
<span>({{ info.valuationMethodText }})</span>
</div>
<div class="evaluateNumber">
<div>
@@ -48,15 +49,15 @@
</div>
<div>
<span>超容积率土地补偿费:</span>
<span>{{ info.exceedLandMoney }}</span>
<div>({{ info.exceedLandMoney }})</div>
</div>
<div>
<span>阁楼补偿费:</span>
<span>{{ info.atticAssessedValue }}</span>
<div>({{ info.atticAssessedValue }})</div>
</div>
<div>
<span>备注:</span>
<span>{{ info.remark }}</span>
<div>({{ info.remark }})</div>
</div>
</el-card>
<div class="bottom">
@@ -192,6 +193,7 @@ export default {
> div {
display: flex;
align-items: center;
color: #b3b5b9;
img {
height: 20px;
margin-right: 10px;
@@ -201,6 +203,9 @@ export default {
margin-right: 10px;
}
}
> span {
color: #363a44;
}
}
}
.el-card {
@@ -211,9 +216,13 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
color: #b3b6b9;
> span:nth-child(2) {
color: red;
}
> div {
color: #363a44;
}
}
}
}

View File

@@ -21,24 +21,24 @@
</div>
<div>
<img alt src="@/assets/img/bianhao.png" />
评估报告编号
<span> 评估报告编号</span>
<b>{{ item.assessmentNo }}</b>
</div>
<div>
<img alt src="@/assets/img/name.png" />
被征收人姓名
<span> 被征收人姓名</span>
<b>{{ info.userName }}</b>
</div>
<div class="address">
<div>
<img alt src="@/assets/img/address.png" />
<span>被征收人房屋地址</span>
<span>被征收人房屋地址</span>
<b>{{ item.houseAddress }}</b>
</div>
<div>
<img alt src="@/assets/img/money.png" />
评估总金额
<span> 评估总金额</span>
<b style="color: red;font-size:18px">{{ item.countValue }}</b
>
><b></b>
</div>
<div class="line">
<img alt src="@/assets/img/hengxian.png" />
@@ -68,29 +68,29 @@
>
<div v-if="item.type == '2'">
<el-card body-style="padding:4px">
<div class="absolute" style="background-color:#268FF2">
<div class="absolute" style="background:#268FF2">
<span>商业</span>
</div>
<div>
<img alt src="@/assets/img/bianhao.png" />
评估报告编号
<span> 评估报告编号</span>
<b>{{ item.assessmentNo }}</b>
</div>
<div>
<img alt src="@/assets/img/name.png" />
被征收人姓名
<span> 被征收人姓名</span>
<b>{{ info.userName }}</b>
</div>
<div class="address">
<div>
<img alt src="@/assets/img/address.png" />
<span>被征收人房屋地址</span>
<span>被征收人房屋地址</span>
<b>{{ item.houseAddress }}</b>
</div>
<div>
<img alt src="@/assets/img/money.png" />
评估总金额
<span> 评估总金额</span>
<b style="color: red;font-size:18px">{{ item.countValue }}</b
>
><b></b>
</div>
<div class="line">
<img alt src="@/assets/img/hengxian.png" />
@@ -233,19 +233,23 @@ export default {
> div {
margin: 14px 0;
display: flex;
align-items: center;
align-items: flex-start;
line-height: 20px;
color: #b3b5b9;
img {
margin-right: 6px;
width: 20px;
}
span {
white-space: nowrap;
> span:nth-child(2) {
margin-right: 16px;
width: 97px;
}
> :nth-child(n + 3) {
color: #363a44;
max-width: 57%;
}
}
.address {
align-items: flex-start;
}
.absolute {
background-color: #f7be24;
position: absolute;
@@ -282,6 +286,7 @@ export default {
span {
padding-right: 10px;
font-size: 12px;
color: #3876f3;
}
}
}