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 { .flex {
display: flex; display: flex;
justify-content: space-between; 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 Vue from 'vue'
import { Form, FormItem, Button } from 'element-ui' import { Form, FormItem, Button, Card } from 'element-ui'
Vue.use(Form) Vue.use(Form)
Vue.use(FormItem) 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 ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
import 'normalize.css/normalize.css' import 'normalize.css/normalize.css'
import '@/assets/style/global.css' // import '@/assets/style/global.css'
import '@/assets/style/flex.css' import '@/assets/style/flex.css'
Vue.use(ElementUI) Vue.use(ElementUI)

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

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