update:前段代码首次上传
This commit is contained in:
354
FrontCode1/vue/src/views/login.vue
Normal file
354
FrontCode1/vue/src/views/login.vue
Normal file
@@ -0,0 +1,354 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<!-- 顶部 -->
|
||||
<div class="top">
|
||||
<div></div>
|
||||
<div>
|
||||
<i class="el-icon-user-solid"></i>
|
||||
<span>被征收人姓名：胡伯钧</span>
|
||||
</div>
|
||||
<div>
|
||||
<i class="el-icon-postcard"></i>
|
||||
<span>身份证号码：330901197603064256</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片跳转 -->
|
||||
<div class="middle">
|
||||
<div @click="QRcode()"></div>
|
||||
<div @click="evaluate()"></div>
|
||||
<div @click="compensate()"></div>
|
||||
</div>
|
||||
<!-- 背景图 -->
|
||||
<div class="background" @click="handle()"></div>
|
||||
<!-- 标题 -->
|
||||
<div class="content">
|
||||
<div>
|
||||
<div></div>
|
||||
<span>曙光一村地块</span>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- 征收信息 -->
|
||||
<div>
|
||||
<span
|
||||
><i class="el-icon-map-location"></i> 项目所在区域：{{
|
||||
this.source.region
|
||||
}}
|
||||
</span>
|
||||
<span
|
||||
><i class="el-icon-s-home"></i> 征收部门：{{ this.source.section }}
|
||||
</span>
|
||||
<span
|
||||
><i class="el-icon-date"></i> 所属年份：{{ this.source.date }}
|
||||
</span>
|
||||
<span
|
||||
><i class="el-icon-date"></i> 征收决定号：<span style="color:blue">{{
|
||||
this.source.number
|
||||
}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 分户评估结果 -->
|
||||
<div>
|
||||
<div>
|
||||
<div></div>
|
||||
<div>分户评估结果</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="flex">
|
||||
<span> 评估报告编号：</span>
|
||||
<span>{{ this.source.bianhao }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span>被征收房屋地址：</span>
|
||||
<span>{{ this.source.address }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span> 评估总金额：</span>
|
||||
<span style="color:red">{{ this.source.totalMoney }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 补偿协议 -->
|
||||
<div>
|
||||
<div>
|
||||
<div></div>
|
||||
<div>补偿协议</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div></div>
|
||||
<div>
|
||||
<div class="flex">
|
||||
<span>协议编号：</span>
|
||||
<span>{{ this.source.bianhao }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span>被征收房屋地址：</span>
|
||||
<span>{{ this.source.address }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span>补偿方式：</span>
|
||||
<span>{{ this.source.style }}</span>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span>合计补偿资金：</span>
|
||||
<span style="color:red">{{ this.source.money }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图片跳转 -->
|
||||
<div></div>
|
||||
<!-- 征收政策 -->
|
||||
<div>
|
||||
<span>征收政策</span>
|
||||
<div>
|
||||
<div>共8条</div>
|
||||
<div>查看全部</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>宁波市住房和城乡建设委员会关于开展</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>发布时间：</span>
|
||||
<span>2021-9-1</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>区域：</span>
|
||||
<span>海曙区</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-card class="box-card"> </el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
source: {
|
||||
region: '海曙区',
|
||||
section: '宁海县房屋征收管理中心',
|
||||
date: 2019,
|
||||
number: '海政发[2021]',
|
||||
bianhao: '044',
|
||||
address: '宁波市江北区泗洲街16号404',
|
||||
totalMoney: '180234元',
|
||||
style: '产权调换',
|
||||
money: '180257元',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handle() {
|
||||
console.log(111)
|
||||
},
|
||||
QRcode() {
|
||||
console.log(11)
|
||||
},
|
||||
evaluate() {
|
||||
this.$router.push('/evaluate')
|
||||
},
|
||||
compensate() {
|
||||
this.$router.push('/compensate')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
background-color: #808d91;
|
||||
height: 100%;
|
||||
background: url('../assets/3.png') no-repeat;
|
||||
background-size: 100%;
|
||||
.top {
|
||||
// background-color: #eff8ff;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
> :nth-child(1) {
|
||||
height: 30px;
|
||||
background-size: auto 100%;
|
||||
background-image: url('../assets/person.png');
|
||||
z-index: 99;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
.middle {
|
||||
margin: 0 10px;
|
||||
background-color: #ffffff;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
padding: 10px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
> div {
|
||||
height: 100%;
|
||||
width: 32%;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
> :nth-child(1) {
|
||||
background: url('../assets/middle1.png') no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
> :nth-child(2) {
|
||||
background: url('../assets/middle2.png') no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
background: url('../assets/middle3.png') no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
.background {
|
||||
height: 90px;
|
||||
margin: 0 10px;
|
||||
background: url('../assets/background.png') no-repeat;
|
||||
}
|
||||
.content {
|
||||
margin: 10px;
|
||||
background-color: #ffffff;
|
||||
> :nth-child(1) {
|
||||
background: url('../assets/3.png') no-repeat;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
margin: 10px 0;
|
||||
background-color: #ffffff;
|
||||
> :nth-child(1) {
|
||||
background: url('../assets/window.png') no-repeat;
|
||||
background-size: auto 100%;
|
||||
width: 20%;
|
||||
height: 100%;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
background: url('../assets/xieyi.png') no-repeat;
|
||||
background-size: 100% auto;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
> :nth-child(2) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
background-color: #ffffff;
|
||||
height: 100px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
// 分户评估结果
|
||||
> :nth-child(3) {
|
||||
> :nth-child(1) {
|
||||
display: flex;
|
||||
margin: 15px 0;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
> :nth-child(1) {
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
background: url('../assets/pingu.png') no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
height: 100%;
|
||||
width: 11%;
|
||||
background: url('../assets/jiantou.png') no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
> :nth-child(2) {
|
||||
display: flex;
|
||||
> :nth-child(1) {
|
||||
width: 10%;
|
||||
background: url('../assets/shuxian0.png') no-repeat;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
}
|
||||
> :nth-child(2) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 补偿协议
|
||||
> :nth-child(4) {
|
||||
> :nth-child(1) {
|
||||
margin: 15px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
align-items: center;
|
||||
> :nth-child(1) {
|
||||
height: 100%;
|
||||
width: 20%;
|
||||
background: url('../assets/xy.png') no-repeat;
|
||||
background-size: auto 95%;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
height: 100%;
|
||||
width: 11%;
|
||||
background: url('../assets/jiantou.png') no-repeat;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
}
|
||||
> :nth-child(2) {
|
||||
display: flex;
|
||||
> :nth-child(1) {
|
||||
height: 100px;
|
||||
width: 10%;
|
||||
background: url('../assets/shuxian.png') no-repeat;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
}
|
||||
> :nth-child(2) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 图片跳转
|
||||
> :nth-child(5) {
|
||||
background: url('../assets/zhengshou.png') no-repeat;
|
||||
height: 50px;
|
||||
background-size: auto 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
// 征收政策
|
||||
> :nth-child(6) {
|
||||
> :nth-child(2) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
> :nth-child(2) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user