Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
b22eeb16 by 任超
Options

style:申请业务

1 parent 493ba200
Inline Side-by-side
Showing 2 changed files with 120 additions and 68 deletions
.ywsq {
display: flex;
height: 100%;
/deep/.el-collapse-item__header {
padding-left: 20px;
font-weight: 700;
font-size: 16px;
border: 1px solid $borderColor;
border-top: none;
}
.active {
background-color: $light-blue !important;
color: $menuText !important;
}
.ywsq-left {
width: 25%;
width: 260px;
background-color: #fff;
height: 100%;
box-sizing: border-box;
padding: 10px;
p {
width: 100%;
line-height: 36px;
border: 1px solid $borderColor;
font-weight: 700;
padding: 5px 0 5px 10px;
background-color: #fff;
margin-bottom: 5px;
box-sizing: border-box;
cursor: pointer;
border-radius: 3px;
&:hover {
border: 1px solid $light-blue;
color: $light-blue;
}
}
.box-card {
margin-bottom: 20px;
......@@ -29,10 +59,7 @@
.item-list {
padding: 0 20px 0 20px;
.active {
background-color: $light-blue;
color: $menuText;
}
li {
cursor: pointer;
......@@ -46,16 +73,19 @@
transition: all 0.3s;
&:hover {
background-color: $light-blue;
color: $menuText;
border: 1px solid $light-blue;
color: $light-blue;
}
}
}
}
.ywsq-right {
width: calc(75% - 10px);
width: calc(100% - 270px);
margin-left: 10px;
height: 100%;
display: flex;
flex-direction: column;
.right-type {
margin-bottom: 20px;
......@@ -69,31 +99,33 @@
}
.cactive {
background-color: $green;
color: $menuText;
}
.type-content {
@include flex;
justify-content: space-between;
padding: 0 20px;
margin: 50px 0;
margin: 20px 0;
li {
width: 23.5%;
height: 50px;
line-height: 50px;
border: 1px solid $borderColor;
border-radius: 5px;
box-sizing: border-box;
padding-left: 10px;
cursor: pointer;
transition: all 0.3s;
cursor: pointer;
&:hover {
border: 1px solid $light-blue;
color: $light-blue;
}
}
}
.right-situation {
flex: 1;
height: 100%;
ul {
padding: 20px;
@include flex;
......@@ -108,12 +140,16 @@
@include flex;
justify-content: space-between;
margin-left: 20px;
cursor: pointer;
p {
@include flex-center;
}
&:hover {
border: 1px solid $light-blue;
color: $light-blue;
}
p:nth-child(1) {
flex: 1;
......@@ -134,5 +170,11 @@
}
}
}
.submit-button {
padding: 15px 0;
text-align: center;
background-color: #fff;
}
}
}
\ No newline at end of file
......
<template>
<div class="ywsq">
<div class="ywsq-left">
<el-collapse v-model="activeNames" accordion>
<el-collapse-item :title="item.title" :name="index + 1" v-for="(item, index) in leftList" :key="index">
<p v-for="(item, index) in leftList" @click="handleleftTitle(index)" :key="index"
:class="{ 'active': n == index }">{{ item }}</p>
<el-collapse disabled v-model="activeNames">
<el-collapse-item title="业务申请" name="1">
<ul class="item-list">
<li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)"
:class="obj.check ? 'active' : ''">{{ obj.name }}</li>
<li v-for="(obj, key) in list" :key="key" @click="handleList(list, obj)" :class="obj.check ? 'active' : ''">
{{ obj.name }}</li>
</ul>
</el-collapse-item>
</el-collapse>
......@@ -13,25 +15,43 @@
<!-- right -->
<div class="ywsq-right">
<div class="right-type el-card box-card is-always-shadow">
<div class="right-type el-card box-card is-always-shadow" v-if="n == -1">
<div class="right-title">登记类型</div>
<ul class="type-content">
<li :class="item.select ? 'cactive' : ''" @click="handleTypeSelect(item)" v-for="(item, index) in typeList"
<li :class="item.select ? 'active' : ''" @click="handleTypeSelect(item)" v-for="(item, index) in typeList"
:key="index">{{ item.name }}</li>
</ul>
</div>
<div class="right-situation el-card box-card is-always-shadow">
<div class="right-title">业务列表</div>
<ul>
<li v-for="(item, index) in busList" :key="index">
<p>
{{ item.name }}
</p>
<p :class="item.select ? 'cactive' : ''" @click="handleCollection(item)">
<i class="el-icon-star-off" :class="item.select ? 'cactive' : ''"></i>
</p>
</li>
</ul>
<div v-if="n >= 0">
<div class="right-title">业务列表</div>
<ul>
<li v-for="(item, index) in busList" :key="index">
<p>
{{ item.name }}
</p>
<p :class="item.select ? 'active' : ''" @click="handleCollection(item)">
<i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
</p>
</li>
</ul>
</div>
<div v-if="n == -1">
<div class="right-title">登记情形</div>
<ul>
<li v-for="(item, index) in busList" :key="index">
<p>
{{ item.name }}
</p>
<p :class="item.select ? 'active' : ''" @click="handleCollection(item)">
<i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
</p>
</li>
</ul>
</div>
</div>
<div class="submit-button">
<el-button type="primary">选择不动产信息</el-button>
</div>
</div>
</div>
......@@ -40,46 +60,29 @@
export default {
data () {
return {
activeNames: [1],
n: -1,
activeNames: ['1'],
leftList: [
'常办业务', '一并申请', '补申请',
],
list: [
{
name: '国有建设用地使用权',
},
{
title: '常办业务',
list: [
{
name: '国有建设用地使用权',
}
]
name: '国有建设用地使用权/房屋所有权',
},
{
title: '一并申请',
list: [
{
name: '国有建设用地使用权',
}
]
name: '宅基地使用权',
},
{
title: '业务申请',
list: [
{
name: '国有建设用地使用权',
},
{
name: '国有建设用地使用权/房屋所有权',
},
{
name: '宅基地使用权',
},
{
name: '宅基地使用权/房屋所有权',
},
{
name: '集体建设用地使用权',
},
{
name: '集体建设用地使用权/房屋所有权',
}
]
name: '宅基地使用权/房屋所有权',
},
{
name: '集体建设用地使用权',
},
{
name: '集体建设用地使用权/房屋所有权',
}
],
typeList: [
......@@ -130,10 +133,17 @@ export default {
}
},
methods: {
handleleftTitle (index) {
this.n = index
this.list.forEach(item => {
if (item.check) item.check = false
})
},
handleList (list, obj) {
list.forEach(item => {
if (item.check) item.check = false
})
this.n = -1
this.$set(obj, 'check', true)
},
handleCollection (item) {
......