ewide/zsxt_nbzs_h5
22
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update:更新样式

Browse Source
This commit is contained in:
lisl
2021-09-09 13:06:10 +08:00
parent ea7af395f3
commit df7c7050de
8 changed files with 284 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
FrontCode1/vue/src/assets/01zhushuju_hangzhengquyu@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
FrontCode1/vue/src/assets/918caidan_wenjian@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
FrontCode1/vue/src/assets/bumenguanli-3@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 722 B

1
FrontCode1/vue/src/assets/style/flex.css
View File

@@ -1,4 +1,5 @@
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}

BIN
FrontCode1/vue/src/assets/yanchurili@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

5
FrontCode1/vue/src/elementui/index.js
View File

@@ -1,7 +1,8 @@
import Vue from 'vue'
import { Form, FormItem, Button } from 'element-ui'
import { Form, FormItem, Button, Card } from 'element-ui'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Button)
Vue.use(Button)
Vue.use(Card)

2
FrontCode1/vue/src/main.js
View File

@@ -6,7 +6,7 @@ import '@/elementui'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import 'normalize.css/normalize.css'
import '@/assets/style/global.css'
// import '@/assets/style/global.css'
import '@/assets/style/flex.css'
Vue.use(ElementUI)

505
FrontCode1/vue/src/views/login.vue
View File

@@ -19,112 +19,134 @@
<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 class="background" @click="handle()">
<img src="../assets/background.png" alt="" />
</div>
<!-- 标题 -->
<el-card>
<div class="content">
<!-- 曙光一村 -->
<div>
<div>
<img src="../assets/window.png" alt="" />
</div>
<span>曙光一村地块</span>
<div>
<img src="../assets/xieyi.png" alt="" />
</div>
</div>
<!-- 征收信息 -->
<div>
<div class="flex">
<img src="../assets/01zhushuju_hangzhengquyu@3x.png" alt="" />
<span>项目所在区域：{{ this.source.region }}</span>
</div>
<div class="flex">
<img src="../assets/bumenguanli-3@3x.png" alt="" />
<span>征收部门：{{ this.source.section }}</span>
</div>
<div class="flex">
<img src="../assets/yanchurili@3x.png" alt="" />
<span>所属年份：{{ this.source.date }}</span>
</div>
<div class="flex">
<img src="../assets/918caidan_wenjian@3x.png" alt="" />
<span
>征收决定号：<span style="color:blue">{{
this.source.number
}}</span></span
>
</div>
</div>
<!-- 分户评估结果 -->
<div>
<div>
<div>
<img src="../assets/pingu.png" alt="" />
</div>
<span>分户评估结果</span>
<div>
<img src="../assets/jiantou.png" alt="" />
</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>
<img src="../assets/xy.png" alt="" />
</div>
<span>补偿协议</span>
<div>
<img src="../assets/jiantou.png" alt="" />
</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>
</el-card>
<!-- 图片跳转 -->
<div>
<img src="../assets/zhengshou.png" alt="" />
</div>
<!-- 征收政策 -->
<div>
<span>征收政策</span>
<div>
<div>共8条</div>
<div>查看全部</div>
</div>
<el-card>
<div>宁波市住房和城乡建设委员会关于开展</div>
<div class="flex">
<div>
<span>发布时间：</span>
<span>2021-9-1</span>
</div>
<div>
<span>区域：</span>
<span>全大市</span>
</div>
</div>
</el-card>
</div>
<el-card class="box-card"> </el-card>
</div>
</template>
@@ -164,8 +186,7 @@ export default {
<style lang="less" scoped>
.container {
background-color: #808d91;
height: 100%;
background-color: #f0f9fb;
background: url('../assets/3.png') no-repeat;
background-size: 100%;
.top {
@@ -212,139 +233,171 @@ export default {
}
}
.background {
height: 90px;
margin: 0 10px;
background: url('../assets/background.png') no-repeat;
img {
width: 100%;
}
}
.content {
> .el-card {
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;
.el-card__body {
padding: 0;
}
.content {
background-color: #ffffff;
// box-shadow: 10px 10px 10px 10px #e3e9eb;
> :nth-child(1) {
background: url('../assets/window.png') no-repeat;
background-size: auto 100%;
width: 20%;
height: 100%;
background: url('../assets/3.png') no-repeat;
background-size: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 10px 0;
> :nth-child(1) {
width: 20%;
text-align: left;
img {
width: 80%;
}
}
> span {
width: 50%;
}
> :nth-child(3) {
text-align: right;
img {
width: 50%;
}
}
}
// 征收信息
> :nth-child(2) {
img {
width: 5%;
}
display: flex;
flex-direction: column;
justify-content: space-between;
// height: 100px;
padding-left: 10px;
.flex {
> :nth-child(2) {
width: 90%;
}
}
}
// 分户评估结果
> :nth-child(3) {
width: 30%;
height: 100%;
background: url('../assets/xieyi.png') no-repeat;
background-size: 100% auto;
background-position: center;
padding: 10px;
> :nth-child(1) {
display: flex;
justify-content: space-between;
padding: 15px 0;
align-items: center;
> :nth-child(1) {
width: 13%;
text-align: left;
img {
width: 80%;
}
}
> span {
width: 65%;
color: blue;
}
> :nth-child(3) {
text-align: right;
img {
width: 50%;
}
}
}
> :nth-child(2) {
display: flex;
// padding: 10px;
> :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;
width: 90%;
> div {
margin: 10px 0;
}
}
}
}
// 补偿协议
> :nth-child(4) {
padding: 10px;
> :nth-child(1) {
display: flex;
justify-content: space-between;
padding: 15px 0;
align-items: center;
> :nth-child(1) {
width: 13%;
text-align: left;
img {
width: 80%;
}
}
> span {
width: 65%;
color: blue;
}
> :nth-child(3) {
text-align: right;
img {
width: 50%;
}
}
}
> :nth-child(2) {
display: flex;
> :nth-child(1) {
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;
width: 90%;
> div {
margin: 10px 0;
}
}
}
}
}
}
// 图片跳转
> :nth-child(5) {
margin: 10px;
img {
width: 100%;
}
}
// 征收政策
> :nth-child(6) {
margin: 10px;
> :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;
> .el-card {
padding: 10px;
.flex {
> div {
margin: 10px 0;
}
}