Skip to content

bdc / bdcdj-web

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

feat:业务办理

1 parent 998d5e39
Inline Side-by-side
Showing 8 changed files with 246 additions and 44 deletions
......@@ -28,6 +28,7 @@ export default {
overflow-x: auto;
padding: 15px;
box-sizing: border-box;
background-color: #fefefe;
}
}
</style>
\ No newline at end of file
......
......@@ -47,7 +47,6 @@ export default {
</script>
<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
@import "~@/styles/variables.scss";
.app-wrapper {
@include clearfix;
......
......@@ -125,6 +125,10 @@ a:hover {
text-decoration: none;
}
ul li {
list-style: none;
}
div:focus {
outline: none;
}
......
//*****start*通用查询条件，列表样式******//
.from-clues {
padding: 10px;
background: #f7f7f7;
min-width: 1280px;
height: 100%;
width: 100%;
&-header {
width: 100%;
padding: 20px 20px 0 20px;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #e8edf3;
}
&-content {
width: 100%;
padding: 20px;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 8px;
margin-top: 10px;
border: 1px solid #e8edf3;
}
.el-form--inline .el-form-item {
width: auto;
margin-right: 0px;
.el-form-item__content {
width: auto;
}
}
}
//*****end*通用查询条件，列表样式******//
padding: 10px;
background: #f7f7f7;
min-width: 1280px;
height: 100%;
width: 100%;
.width200px{
width: 200px;
}
&-header {
width: 100%;
padding: 20px 20px 0 20px;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #e8edf3;
}
&-content {
width: 100%;
padding: 20px;
box-sizing: border-box;
background: #FFFFFF;
border-radius: 8px;
margin-top: 10px;
border: 1px solid #e8edf3;
}
.el-form--inline .el-form-item {
width: auto;
margin-right: 0px;
.el-form-item__content {
width: auto;
}
}
}
\ No newline at end of file
......
// base color
$blue:#324157;
$light-blue:#3A71A8;
$light-blue:#0F93F6;
$red:#C03639;
$pink: #E65D6E;
$green: #30B08F;
......@@ -22,6 +22,9 @@ $subMenuHover:#2e69ca;
$sideBarWidth: 170px;
$sideBarFontSize:15px;
// border颜色
$borderColor: #EBEEF5;
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
......@@ -34,4 +37,5 @@ $sideBarFontSize:15px;
subMenuHover: $subMenuHover;
sideBarWidth: $sideBarWidth;
sideBarFontSize: $sideBarFontSize;
borderColor: $borderColor;
}
\ No newline at end of file
......
.ywsq {
display: flex;
/deep/.el-card__body {
padding: 0 !important;
}
.ywsq-left {
width: 25%;
.box-card {
margin-bottom: 20px;
cursor: pointer;
}
.item-title {
font-size: 18px;
font-weight: 700;
padding: 20px;
&:hover {
background-color: $light-blue;
color: $menuText;
}
}
.item-list {
padding: 0 20px 25px 20px;
margin-top: -5px;
.active {
background-color: $light-blue;
color: $menuText;
}
li {
line-height: 36px;
background-color: rgb(235, 235, 235);
margin-top: 10px;
padding-left: 10px;
border-radius: 2px;
box-sizing: border-box;
border: 1px solid rgb(235, 235, 235);
&:hover {
background-color: $light-blue;
color: $menuText;
}
}
}
}
.ywsq-right {
width: 65%;
margin-left: 30px;
.right-title {
font-size: 18px;
font-weight: 700;
padding: 20px;
border-bottom: 1px solid $borderColor;
.type-content {
padding: 20px;
@include flex;
}
}
}
}
\ No newline at end of file
<template>
<div>
22222222222222
<div class="ywsq">
<div class="ywsq-left">
<el-card class="box-card" v-for="(item, index) in leftList" :key="index">
<div class="item-title" @click="handleTitle(item)">{{ item.title }}</div>
<el-collapse-transition>
<ul class="item-list" v-show="item.open">
<li v-for="(obj, key) in item.list" :key="key" @click="handleList(item.list, obj)"
:class="obj.select ? 'active' : ''">{{ obj.name }}</li>
</ul>
</el-collapse-transition>
</el-card>
</div>
<!-- right -->
<div class="ywsq-right">
<div class="right-type el-card box-card is-always-shadow">
<div class="right-title">登记类型</div>
<ul class="type-content">
<li 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>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {},
name: '该组件名称',
data () {
return {
};
leftList: [
{
title: '常办业务',
open: true,
list: [
{
name: '国有建设用地使用权',
select: false
}
]
},
{
title: '一并申请',
open: false,
list: [
{
name: '国有建设用地使用权',
select: false
},
{
name: '国有建设用地使用权/房屋所有权',
select: false
}
]
},
{
title: '业务申请',
open: false,
list: [
{
name: '国有建设用地使用权',
select: false
},
{
name: '国有建设用地使用权/房屋所有权',
select: false
},
{
name: '宅基地使用权',
select: false
},
{
name: '宅基地使用权/房屋所有权',
select: false
},
{
name: '集体建设用地使用权',
select: false
},
{
name: '集体建设用地使用权/房屋所有权',
select: false
}
]
}
],
typeList: [
{
name: '首次登记',
},
{
name: '转移登记',
},
{
name: '变更登记',
},
{
name: '注销登记'
}
],
situationList: [
{
name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
},
{
name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
},
{
name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
},
{
name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
},
{
name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
}
]
}
},
methods: {
handleList (list, obj) {
list.forEach(item => {
item.select = false
});
obj.select = true
},
handleTitle (obj) {
this.leftList.forEach(item => {
item.open = false
})
obj.open = true
},
}
}
</script>
<style scoped lang='scss'>
@import "~@/styles/mixin.scss";
@import './index.scss';
</style>
\ No newline at end of file
......
......@@ -49,7 +49,12 @@ module.exports = {
css: {
extract: true, // 是否使用css分离插件 ExtractTextPlugin
sourceMap: false, // 开启 CSS source maps?
modules: false // 启用 CSS modules for all css / pre-processor files.
loaderOptions: {
sass: {
prependData: `@import "@/styles/variables.scss";`
}
},
modules: false,// 启用 CSS modules for all css / pre-processor files.
},
// configureWebpack通过操作对象的形式，来修改默认的webpack配置
configureWebpack: {
......