房地产工作台UI设计

src/assets/base.css

@@ -156,3 +156,24 @@ background: linear-gradient(15deg, rgba(255,255,255,1) 0%, rgba(252,252,252,1) 5
   text-decoration: underline;
   cursor: pointer;
 }
+.form-item {
+  .el-input--small {
+    font-size: 16px;
+  }
+  .el-form-item__label {
+    width: 21px;
+    font-size: 16px;
+    font-weight:450;
+    color: rgba(102, 102, 102, 1);
+    color: #040000;
+    line-height: 16px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  .el-input__inner {
+    color: #040000 !important;
+    font-size: 16px;
+  }
+}

src/components/Breadcrumb/index.vue

@@ -0,0 +1,59 @@
+<template>
+  <el-breadcrumb class="breadcrumb" :separator-icon="ArrowRight">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item, index) in breadcrumbData" :key="index + 'id'">
+        <span v-if="index === breadcrumbData.length - 1" class="no-redirect" style="color:black">{{ item.meta.title
+          }}</span>
+        <span v-else class="no-redirect">{{ item.meta.title }}</span>
+      </el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+
+<script setup>
+  import { ref, watch } from "vue";
+  import { useRoute, useRouter } from "vue-router";
+  import { ArrowRight } from '@element-plus/icons-vue'
+
+  const route = useRoute();
+  const router = useRouter();
+
+  // 生成数组数据
+  const breadcrumbData = ref([]);
+  const getBreadcrumbData = () => {
+    breadcrumbData.value = route.matched.filter((item) => {
+      return item.meta && item.meta.title;
+    });
+  };
+  // 监听路由发生改变时触发
+  watch(
+    route,
+    () => {
+      getBreadcrumbData();
+    },
+    {
+      immediate: true,
+    }
+  );
+
+
+</script>
+<style lang="css" scoped>
+  .breadcrumb-enter-active,
+  .breadcrumb-leave-active {
+    transition: all 0.5s;
+  }
+  .breadcrumb-enter-from,
+  .breadcrumb-leave-active {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  .breadcrumb-leave-active {
+    position: absolute;
+  }
+
+  .breadcrumb{
+    font-size: 16px;
+  }
+</style>

src/layout/components/Navbar.vue

@@ -9,7 +9,7 @@
       <div class="meunsDiv">
         <el-row :gutter="20">
           <el-col :span="6"><div class="meuns"><span class="menu-text"
-             @mouseenter="showMenuCard(0)" @mouseleave="hiddenMenuCard(0)" @click="goto('major')">房地产报告</span></div></el-col>
+             @mouseenter="showMenuCard(0)" @mouseleave="hiddenMenuCard(0)" @click="goto('house')">房地产报告</span></div></el-col>
           <el-col :span="6"><div class="meuns"><span class="menu-text"
             @mouseenter="showMenuCard(1)" @mouseleave="hiddenMenuCard(1)" @click="goto('assets')">资产报告</span></div></el-col>
           <el-col :span="6"><div class="meuns"><span class="menu-text"

src/router/index.js

@@ -2,10 +2,13 @@ import { createWebHashHistory, createRouter } from 'vue-router'
 
 import Layout from '../layout/index.vue'
 import HomeView from '../views/home/index.vue'
-import MajorHome from '../views/major/home.vue'
+import HouseHome from '../views/house/home.vue'
 import AssetsHome from '../views/assets/home.vue'
 import PlanningHome from '../views/planning/home.vue'
 import PersonalHome from '../views/personal/home.vue'
+import HouseWorkbench from '../views/house/workbench/index.vue'
+import Consignor from '../views/house/consignor.vue'
+import Certificate from '../views/house/certificate.vue'
 
 const routes = [
   {
@@ -15,7 +18,10 @@ const routes = [
   {
     path: '/home',
     component: Layout,
-    name: 'home',
+    name: 'index',
+    meta: {
+      title: '首页'
+    },
     children: [
       {
         path: 'index',
@@ -23,9 +29,12 @@ const routes = [
         name: 'homeIndex',
       },
       {
-        path: 'major',
-        component: MajorHome,
-        name: 'majorIndex'
+        path: 'house',
+        component: HouseHome,
+        name: 'houseIndex',
+        meta: {
+          title:'房地产首页'
+        }
       },
       {
         path: 'assets',
@@ -41,6 +50,32 @@ const routes = [
         path: 'personal',
         component: PersonalHome,
         name: 'personalIndex'
+      },
+      {
+        path: 'houseWorkbench',
+        component: HouseWorkbench,
+        name: 'houseWorkbench',
+        meta: {
+          title:'房地产工作台'
+        },
+        children: [
+          {
+            path: 'consignor',
+            component: Consignor,
+            name: 'consignor',
+            meta: {
+              title:'委托人信息'
+            },
+          },
+          {
+            path: 'certificate',
+            component: Certificate,
+            name: 'certificate',
+            meta: {
+              title:'权属资料'
+            },
+          }
+        ]
       }
     ]
   },

src/views/home/index.vue

@@ -11,7 +11,7 @@
           </div>
           <div class="option">
               <div class="create-btn">
-                <button class="cssbuttons-io-button" @click="goto('major')">
+                <button class="cssbuttons-io-button" @click="goto('houseWorkbench/consignor')">
                   房地产
                   <div class="icon">
                     <svg
@@ -176,7 +176,8 @@ export default {
 
 .content {
   /* margin-left: 160px; */
-  /* padding: 70px 20px 30px 20px; */
+  /* margin-right: 160px; */
+  /* padding: 50px 20px 20px 20px; */
 }
 
 .words {
@@ -269,7 +270,7 @@ p {
 
 .no-border {
   border: none;
-  border-radius: 0.3em;
+  border-radius: 0.6em;
 }
 </style>
 

src/views/house/certificate.vue

@@ -0,0 +1,51 @@
+<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>
+    </div>
+</template>
+
+<script>
+ export default {
+    data() {
+    return {
+        consignor: {
+            name: null,
+            type: null,
+            address: null,
+            legalPerson: null,
+            legalCode: null
+        },
+    }
+}
+ }
+
+
+</script>
+
+<style scoped>
+.contrl {
+    font-size: 20px;
+    width: 70.9%;
+    height: 1000px;
+    border-right: 1.5px #dae1eb solid;
+    padding: 20px 20px 20px 0px;
+    float: left;
+
+}
+</style>

src/views/house/consignor.vue

@@ -0,0 +1,51 @@
+<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>
+    </div>
+</template>
+
+<script>
+ export default {
+    data() {
+    return {
+        consignor: {
+            name: null,
+            type: null,
+            address: null,
+            legalPerson: null,
+            legalCode: null
+        },
+    }
+}
+ }
+
+
+</script>
+
+<style scoped>
+.contrl {
+    font-size: 20px;
+    width: 70.9%;
+    height: 1000px;
+    border-right: 1.5px #dae1eb solid;
+    padding: 20px 20px 20px 0px;
+    float: left;
+
+}
+</style>

src/views/house/home.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="base">
+    <div class="content">
+      <div class="breadcrumb">
+       <Breadcrumb />
+      </div>
+      HOUSE-HOME
+    </div>
+  </div>
+</template>
+
+<script>
+ import Breadcrumb from '../../components/Breadcrumb/index.vue'
+export default {
+  name:'houseHome',
+  data() {
+    return {
+      msg: 0
+    }
+  }
+}
+</script>
+
+<style scoped>
+.base {
+  min-height: calc(100vh - 80px);
+  width: 100%;
+}
+.content {
+  margin-left: 160px;
+  padding: 50px 20px 20px 20px;
+}
+</style>
+

src/views/house/workbench/components/bench.vue

@@ -0,0 +1,50 @@
+<template>
+    <section class="bench-main">
+      <router-view v-slot="{ Component }">
+        <transition>
+          <keep-alive>
+            <component :is="Component" />
+          </keep-alive>
+        </transition>
+      </router-view>
+    </section>
+  </template>
+  
+  <script>
+  export default {
+    name: 'Bench',
+  
+    watch:{
+      $route: {
+        deep: true,
+        immediate: true,
+        handler() {
+        },
+     },
+    },
+
+    data(){
+      return {
+      }
+    },
+    created(){
+    },
+    computed: {
+    
+    },
+  
+  
+    methods:{
+     
+  
+    }
+  }
+  </script>
+  
+  <style  scoped>
+  .bench-main {
+    width: 100%;
+  }
+  </style>
+  
+  

src/views/house/workbench/components/index.js

@@ -0,0 +1,2 @@
+export { default as Bench } from './bench.vue'
+export { default as Timeline } from './timeline.vue'

src/views/house/workbench/components/timeline.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="contrl-bar">
+        <el-timeline style="max-width: 600px">
+          <el-timeline-item timestamp="未完成" placement="top">
+            <el-card shadow="never"  @click="goto('consignor')" class="timeline-card report-item">
+              <h4>委托人信息</h4>
+              <p>Tom committed 2018/4/12 20:46</p>
+            </el-card>
+          </el-timeline-item>
+          <el-timeline-item timestamp="未完成" placement="top">
+            <el-card shadow="never" @click="goto('certificate')" class="timeline-card report-item">
+              <h4>权属信息</h4>
+              <p>Tom committed 2018/4/3 20:46</p>
+            </el-card>
+          </el-timeline-item>
+          <el-timeline-item timestamp="未完成" placement="top">
+            <el-card shadow="never" class="timeline-card report-item">
+              <h4>项目基本信息</h4>
+              <p>Tom committed 2018/4/2 20:46</p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+           
+        }
+    },
+    methods:{
+      goto(path) {
+        this.$router.push(`/home/houseWorkbench/${path}`)
+      }
+    }
+ }
+
+</script>
+
+<style scoped>
+.contrl-bar{
+  height: 600px;
+  width: 25%;
+  float: right;
+}
+
+.timeline-card:hover{
+  cursor: pointer;
+}
+</style>

src/views/house/workbench/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="base">
+      <div class="content">
+        <div class="breadcrumb">
+         <Breadcrumb />
+        </div>
+        <Bench></Bench>
+        <Timeline></Timeline>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+   import Breadcrumb from '../../../components/Breadcrumb/index.vue'
+   import { Timeline, Bench } from "./components";
+    export default {
+      name:'houseWorkBench',
+      components:{
+        Breadcrumb,
+        Bench,
+        Timeline
+      },
+      data() {
+        return {
+          consignor: {
+              name:null,
+              type:null,
+              address:null,
+              legalPerson:null,
+              legalCode:null
+          },
+          activeName:'consignor'
+        }
+      }
+    }
+  </script>
+  
+  <style scoped>
+  .base {
+    min-height: calc(100vh - 80px);
+    width: 100%;
+  }
+  .content {
+    margin-left: 160px;
+    margin-right: 160px;
+    padding: 50px 20px 20px 20px;
+    
+  }
+  
+  </style>
+  
+  

src/views/house/workbench1.vue

@@ -0,0 +1,124 @@
+<!-- <template>
+  <div class="base">
+    <div class="content">
+      <div class="breadcrumb">
+       <Breadcrumb />
+      </div>
+      <div class="contrl">
+        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+          <el-tab-pane label="委托人信息" name="consignor">
+              <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-tab-pane>
+          <el-tab-pane label="权属资料" name="second">
+            <div class="certificate-div">
+            </div>
+          </el-tab-pane>
+          <el-tab-pane label="Role" name="third">Role</el-tab-pane>
+          <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
+        </el-tabs>
+      </div>
+      <div class="contrl-bar">
+        <el-timeline style="max-width: 600px">
+          <el-timeline-item timestamp="未完成" placement="top" color="#ff6154">
+            <el-card shadow="hover" >
+              <h4>委托人信息</h4>
+              <p>Tom committed 2018/4/12 20:46</p>
+            </el-card>
+          </el-timeline-item>
+          <el-timeline-item timestamp="未完成" placement="top" color="#ff6154">
+            <el-card shadow="hover">
+              <h4>权属信息</h4>
+              <p>Tom committed 2018/4/3 20:46</p>
+            </el-card>
+          </el-timeline-item>
+          <el-timeline-item timestamp="未完成" placement="top" color="#ff6154">
+            <el-card shadow="hover">
+              <h4>项目基本信息</h4>
+              <p>Tom committed 2018/4/2 20:46</p>
+            </el-card>
+          </el-timeline-item>
+        </el-timeline>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+ import Breadcrumb from '../../components/Breadcrumb/index.vue'
+  export default {
+    name:'houseWorkBench',
+    components:{
+      Breadcrumb
+    },
+    data() {
+      return {
+        consignor: {
+            name:null,
+            type:null,
+            address:null,
+            legalPerson:null,
+            legalCode:null
+        },
+        activeName:'consignor'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.base {
+  min-height: calc(100vh - 80px);
+  width: 100%;
+}
+.content {
+  margin-left: 160px;
+  margin-right: 160px;
+  padding: 50px 20px 20px 20px;
+  
+}
+.contrl{
+  font-size: 20px;
+  width: 70.9%;
+  height: 1000px;
+  border-right: 1.5px #dae1eb solid;
+  padding: 20px 20px 20px 0px;
+  float: left;
+
+}
+
+.contrl-bar{
+  height: 600px;
+  width: 25%;
+  float: right;
+}
+
+
+:deep(.el-tabs__item.is-active, .el-tabs__active-bar) {
+  color: #ff6154 !important;
+}
+
+:deep(.el-tabs__item:hover) {
+  color: #ff6154 !important;
+}
+
+:deep(.el-tabs__active-bar){
+  background-color: #ff6154 !important;
+}
+</style>
+ -->

src/views/major/home.vue

@@ -1,26 +0,0 @@
-<script>
-export default {
-  name:'majorHome',
-  data() {
-    return {
-      msg: 0
-    }
-  }
-}
-</script>
-
-<template>
-  <div class="home">
-     MAJOR_HOME
-  </div>
-</template>
-
-<style scoped>
-  .home {
-    background-color: #ffffff;
-    min-height: calc(100vh - 80px);
-    min-width: 1520px;
-    margin-left: 160px;
-  }
-</style>
-