房地产UI界面-权属资料

src/components/Breadcrumb/index.vue

@@ -54,6 +54,6 @@
   }
 
   .breadcrumb{
-    font-size: 16px;
+    margin-bottom: 20px;
   }
 </style>

src/components/SwichButton/index.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="buttons">
+        <div class=last>
+            <el-button v-if="lastPath" plain type="danger" @click="goLast()">
+                <el-icon style="vertical-align: -20%;">
+                    <ArrowLeftBold />
+                </el-icon>
+                返回
+            </el-button>
+        </div>
+        <div class="next">
+            <el-button v-if="nextPath" plain type="danger" @click="goNext()">
+                继续
+                <el-icon style="vertical-align: -20%;">
+                    <ArrowRightBold />
+                </el-icon>
+            </el-button>
+        </div>
+    </div>
+</template>
+
+<script>
+
+export default {
+
+    name: 'SwichButton',
+
+    props: {
+
+        nextPath: {
+            type: String,
+            required: false
+        },
+        lastPath: {
+            type: String,
+            required: false
+        }
+
+    },
+
+    data() {
+        return {
+
+        }
+    },
+
+    methods: {
+        goLast(){
+            this.$router.push(this.lastPath);
+        },
+        goNext() {
+            this.$router.push(this.nextPath);
+        }
+    }
+
+
+}
+
+</script>
+
+<style scoped>
+.buttons {
+    margin-top: 30px;
+}
+
+.last {
+    float: left;
+}
+
+.next {
+    float: right;
+
+}
+</style>

src/views/house/certificate.vue

@@ -1,37 +1,556 @@
 <template>
     <div class="contrl">
-        <el-form :model="consignor" label-width="auto" style="margin-top: 30px;">
-            <el-form-item label="名称:" class="form-item">
-                <el-input v-model="consignor.name" clearable />
-            </el-form-item>
-            <el-form-item label="类型:" class="form-item">
-                <el-input v-model="consignor.type" clearable />
-            </el-form-item>
-            <el-form-item label="住所:" class="form-item">
-                <el-input v-model="consignor.address" clearable />
-            </el-form-item>
-            <el-form-item label="法定代表人:" class="form-item">
-                <el-input v-model="consignor.legalPerson" clearable />
-            </el-form-item>
-            <el-form-item label="统一社会信用代码:" class="form-item">
-                <el-input v-model="consignor.legalCode" clearable />
-            </el-form-item>
-        </el-form>
+        <el-checkbox-group v-model="certificates">
+            <el-checkbox label="《不动产权证书》" :disabled="certificate1" value="1" />
+            <el-checkbox label="《房屋所有权证》（新）" :disabled="certificate2" value="2" />
+            <el-checkbox label="《房屋所有权证》（旧）" :disabled="certificate3" value="3" />
+            <el-checkbox label="《国有土地使用证》（新）" :disabled="certificate4" value="4" />
+            <el-checkbox label="《国有土地使用证》（旧）" :disabled="certificate5" value="5" />
+        </el-checkbox-group>
+
+        <el-tabs v-model="activeName" class="certificates-tabs">
+            <el-tab-pane label="《不动产权证书》" name="1" :lazy="true" v-if="certificates.includes('1')">
+                <el-form :model="fixedAssetsCertificate" label-width="auto" style="margin-top: 30px;">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="不动产权证书号:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.certificateNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="权利人:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.ownShipUser" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="共有情况:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.ownShipInfo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="房屋坐落:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.location" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="不动产单元号:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.unitNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="权利类型:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.ownShipType" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="权利性质:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.ownShipNature" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="用途:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.useTo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="面积描述:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.acreageDesc" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="使用期限描述:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.expireDateDesc" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="权利其他状况:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.ownShipOtherInfo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="附记:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.attachInfo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="《房屋所有权证》（新）" name="2" :lazy="true" v-if="certificates.includes('2')">
+                <el-form :model="houseOwnNewCertificate" label-width="auto" style="margin-top: 30px;">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="房屋所有权证号:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.certificateNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="房屋所有权人:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.ownShipUser" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="共有情况:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.ownShipInfo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="房屋坐落:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.location" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="登记日期:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.registerDate" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="房屋性质:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.houseNature" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="规划用途:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.useTo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="总层数:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.allFloor" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="建筑面积:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.acreage" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="套内建筑面积:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.innerAcreage" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="附记:" class="form-item">
+                                <el-input v-model="houseOwnNewCertificate.attachInfo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="《房屋所有权证》（旧）" name="3" :lazy="true" v-if="certificates.includes('3')">
+                <el-form :model="houseOwnOldCertificate" label-width="auto" style="margin-top: 30px;">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="房屋所有权证号:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.certificateNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="房屋所有权人:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.ownShipUser" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="房屋坐落:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.location" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="丘（地）号:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.areaNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="产别:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.ownShipType" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="幢号:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.buildingNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="房号:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.houseNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="结构:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.structure" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="房屋总层数:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.allFloor" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="所在楼层:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.atFloor" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="建筑面积:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.acreage" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="设计用途:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.useTo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="附记:" class="form-item">
+                                <el-input v-model="houseOwnOldCertificate.attachInfo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="《国有土地使用证》（新）" name="4" :lazy="true" v-if="certificates.includes('4')">
+                <el-form :model="landUseNewCertificate" label-width="auto" style="margin-top: 30px;">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="不动产权证书号:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.certificateNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="土地使用权人:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.landUseUser" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="座落:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.location" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="地号:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.landNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="图号:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.imageNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="地类用途:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.useTo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="取得价格:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.takePrice" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="使用权类型:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.useType" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="终止日期:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.expireDate" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="使用权面积:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.acreage" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="其中分摊面积:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.outerAcreage" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="记事:" class="form-item">
+                                <el-input v-model="fixedAssetsCertificate.attachInfo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="《国有土地使用证》（旧）" name="5" :lazy="true" v-if="certificates.includes('5')">
+                <el-form :model="landUseOldCertificate" label-width="auto" style="margin-top: 30px;">
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="不动产权证书号:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.certificateNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="土地使用权人:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.landUseUser" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="座落:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.location" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="地号:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.landNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="图号:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.imageNo" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="地类用途:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.useTo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="土地等级:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.landLevel" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="使用权类型:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.useType" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="终止日期:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.expireDate" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="使用权面积:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.acreage" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row :gutter="20">
+                        <el-col :span="12">
+                            <el-form-item label="其中分摊面积:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.outerAcreage" clearable />
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="12">
+                            <el-form-item label="记事:" class="form-item">
+                                <el-input v-model="landUseOldCertificate.attachInfo" clearable />
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </el-tab-pane>
+        </el-tabs>
+       
+        <SwitchButton :nextPath="nextPath" :lastPath="lastPath"></SwitchButton>
     </div>
 </template>
 
 <script>
+import  SwitchButton from '../../components/SwichButton/index.vue'
+
  export default {
+    components:{
+        SwitchButton
+    },
+
+    watch:{
+        certificates:{
+            handler(nv,ov){
+                // if (nv.includes("1")){
+                //     this.certificate2=true;
+                //     this.certificate3=true;
+                //     this.certificate4=true;
+                //     this.certificate5=true;
+                // }else{
+                //     this.certificate1=false;
+                //     this.certificate2=false;
+                //     this.certificate3=false;
+                //     this.certificate4=false;
+                //     this.certificate5=false;
+                // }
+                // if (nv.includes("2")){
+                //     this.certificate1=true;
+                //     this.certificate3=true;
+                // }
+                // if (nv.includes("3")){
+                //     this.certificate1=true;
+                //     this.certificate2=true;
+                // }
+                // if (nv.includes("4")){
+                //     this.certificate1=true;
+                //     this.certificate5=true;
+                // }
+                // if (nv.includes("5")){
+                //     this.certificate1=true;
+                //     this.certificate4=true;
+                // }
+                this.activeName = nv[0];
+                
+            }
+        }
+    },
+
     data() {
-    return {
-        consignor: {
-            name: null,
-            type: null,
-            address: null,
-            legalPerson: null,
-            legalCode: null
-        },
-    }
+        return {
+            consignor: {
+                name: null,
+                type: null,
+                address: null,
+                legalPerson: null,
+                legalCode: null
+            },
+            nextPath:'/home/houseWorkbench/certificate',
+            lastPath:'/home/houseWorkbench/consignor',
+            certificates:[],
+            certificate1:false,
+            certificate2:false,
+            certificate3:false,
+            certificate4:false,
+            certificate5:false,
+            activeName:null,
+            fixedAssetsCertificate:{
+                id:null,
+                businessType:'HOUSE',
+                businessId:null,
+                certificateNo:null,
+                ownShipUser:null,
+                ownShipInfo:null,
+                location:null,
+                unitNo:null,
+                ownShipType:null,
+                ownShipNature:null,
+                useTo:null,
+                acreageDesc:null,
+                expireDateDesc:null,
+                ownShipOtherInfo:null,
+                attachInfo:null,
+
+            },
+            houseOwnNewCertificate:{
+                id:null,
+                businessType:'HOUSE',
+                businessId:null,
+                isNew:true,
+                certificateNo:null,
+                ownShipUser:null,
+                ownShipInfo:null,
+                location:null,
+                registerDate:null,
+                houseNature:null,
+                useTo:null,
+                allFloor:null,
+                acreage:null,
+                innerAcreage:null,
+                attachInfo:null
+            },
+            houseOwnOldCertificate:{
+                id:null,
+                businessType:'HOUSE',
+                businessId:null,
+                isNew:false,
+                certificateNo:null,
+                ownShipUser:null,
+                location:null,
+                areaNo:null,
+                ownShipType:null,
+                buildingNo:null,
+                houseNo:null,
+                structure:null,
+                useTo:null,
+                allFloor:null,
+                atFloor:null,
+                acreage:null,
+                attachInfo:null
+            },
+            landUseNewCertificate:{
+                id:null,
+                businessType:'HOUSE',
+                businessId:null,
+                isNew:true,
+                certificateNo:null,
+                landUseUser:null,
+                location:null,
+                landNo:null,
+                imageNo:null,
+                useTo:null,
+                takePrice:null,
+                useType:null,
+                expireDate:null,
+                acreage:null,
+                outerAcreage:null,
+                attachInfo:null
+            },
+            landUseOldCertificate:{
+                id:null,
+                businessType:'HOUSE',
+                businessId:null,
+                isNew:false,
+                certificateNo:null,
+                landUseUser:null,
+                location:null,
+                landNo:null,
+                imageNo:null,
+                useTo:null,
+                landLevel:null,
+                useType:null,
+                expireDate:null,
+                acreage:null,
+                outerAcreage:null,
+                attachInfo:null
+            }
+        }
 }
  }
 
@@ -48,4 +567,28 @@
     float: left;
 
 }
+:deep(.el-checkbox__label) {
+    font-size: 15px;
+}
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+    background-color: #ff6154;
+    border-color: #ff6154;
+    font-size: 20px;
+}
+:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
+    color:#ff6154;
+    
+}
+:deep(.el-tabs__active-bar){
+    background-color:#ff6154;
+}
+:deep(.el-tabs__item.is-active) {
+    color:#ff6154;
+}
+:deep(.el-tabs__item:hover){
+    color:#ff6154;
+}
+.certificates-tabs {
+ margin-top: 30px;
+}
 </style>

src/views/house/consignor.vue

@@ -17,11 +17,16 @@
                 <el-input v-model="consignor.legalCode" clearable />
             </el-form-item>
         </el-form>
+        <SwitchButton :nextPath="nextPath"></SwitchButton>
     </div>
 </template>
 
 <script>
+import  SwitchButton from '../../components/SwichButton/index.vue'
  export default {
+    components:{
+        SwitchButton
+    },
     data() {
     return {
         consignor: {
@@ -31,6 +36,7 @@
             legalPerson: null,
             legalCode: null
         },
+        nextPath:'/home/houseWorkbench/certificate'
     }
 }
  }
@@ -44,7 +50,7 @@
     width: 70.9%;
     height: 1000px;
     border-right: 1.5px #dae1eb solid;
-    padding: 20px 20px 20px 0px;
+    padding: 0px 20px 20px 0px;
     float: left;
 
 }