update:新增评估页面和协议页面

FrontCode1/vue/src/router/index.js

@@ -4,22 +4,22 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [{
-        path: '/',
-        redirect: '/login',
-    },
-    {
-        path: '/login',
-        component: () =>
-            import ('@/views/login'),
-    },
-    { path: '/evaluate', component: () =>
-            import ('@/views/evaluate') },
-    { path: '/compensate', component: () =>
-            import ('@/views/compensate') },
+    path: '/',
+    redirect: '/login',
+  },
+  {
+    path: '/login',
+    component: () =>
+      import ('@/views/login'),
+  },
+  { path: '/evaluate', component: () =>
+      import ('@/views/agreement') },
+  { path: '/compensate', component: () =>
+      import ('@/views/compensate') },
 ]
 
 const router = new VueRouter({
-    routes,
+  routes,
 })
 
 export default router

FrontCode1/vue/src/views/agreement.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="container">
+    <div class="image"><img src="@/assets/image/agreement.png" alt="" /></div>
+    <div class="text">为您查询到{{ this.result }}条结果</div>
+    <div v-for="(item, index) in info" :key="index">
+      <el-card>
+        <div>
+          <img src="@/assets/image/bianhao.png" alt="" />
+          评估报告编号：<b>{{ item.number }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/name.png" alt="" />
+          被征收人姓名：<b>{{ item.name }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/address.png" alt="" />
+          被征收人房屋地址：<b>{{ item.address }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/money.png" alt="" />
+          评估总金额：<b style="color:red">{{ item.money }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/money.png" alt="" />
+          合计补偿金额：<b style="color:red">{{ item.money }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/hengxian.png" alt="" />
+        </div>
+        <div class="date">
+          <div class="flex backgroundColor">
+            <img src="@/assets/image/shijian.png" alt="" />
+            签订日期：{{ item.time }}
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script>
+import TABLE from '@/components/table'
+export default {
+  components: {
+    TABLE,
+  },
+  data() {
+    return {
+      result: '2',
+      info: [
+        {
+          number: '044',
+          name: '胡守钧',
+          address: '宁波市江北区四洲街16号404',
+          money: '180234元',
+          person: '王勇',
+          time: '2021-9-1',
+        },
+        {
+          number: '044',
+          name: '胡守钧',
+          address: '宁波市江北区四洲街16号404',
+          money: '180234元',
+          person: '王勇',
+          time: '2021-9-1',
+        },
+      ],
+    }
+  },
+  created() {
+    console.log(1234)
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  .image {
+    text-align: center;
+    margin-top: 20px;
+  }
+  .text {
+    text-align: center;
+    margin: 10px 0;
+    color: #2d6df2;
+    font-weight: bolder;
+  }
+  .el-card {
+    margin: 0 10px 10px;
+    ::v-deep.el-card__body {
+      padding: 0 10px;
+      > div {
+        margin: 10px 0;
+      }
+      .date {
+        display: flex;
+        justify-content: center;
+        .backgroundColor {
+          background-color: #e3ebfd;
+          img {
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

FrontCode1/vue/src/views/compensate.vue

@@ -1,25 +1,36 @@
 <template>
   <div class="container">
-    <img src="@/assets/evalute.png" alt="" />
-    <div>
-      <div>
-        <span> 应征户姓名：{{ this.source.name }} </span>
-        <span> 身份证号码：{{ this.source.idCard }} </span>
-      </div>
-      <div>请选择您的征收项目</div>
-      <div><i class="el-icon-caret-bottom"></i></div>
-    </div>
-    <div>
-      <div>
+    <div class="image"><img src="@/assets/image/evalute.png" alt="" /></div>
+    <div class="text">为您查询到{{ this.result }}条结果</div>
+    <div v-for="(item, index) in info" :key="index">
+      <el-card>
         <div>
-          <span>{{ source.date }}</span>
-          <span>{{ source.address }}</span>
+          <img src="@/assets/image/bianhao.png" alt="" />
+          评估报告编号：<b>{{ item.number }}</b>
         </div>
         <div>
-          <div>郁金花园北地块</div>
-          <div>协议签订阶段</div>
+          <img src="@/assets/image/name.png" alt="" />
+          被征收人姓名：<b>{{ item.name }}</b>
         </div>
-      </div>
+        <div>
+          <img src="@/assets/image/address.png" alt="" />
+          被征收人房屋地址：<b>{{ item.address }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/money.png" alt="" />
+          评估总金额：<b style="color:red">{{ item.money }}</b>
+        </div>
+        <div class="flex">
+          <div class="flex backgroundColor">
+            <img src="@/assets/image/renyuan.png" alt="" />
+            评估人员：{{ item.person }}
+          </div>
+          <div class="flex backgroundColor">
+            <img src="@/assets/image/shijian.png" alt="" />
+            评估时间：{{ item.time }}
+          </div>
+        </div>
+      </el-card>
     </div>
   </div>
 </template>
@@ -31,64 +42,56 @@ export default {
   },
   data() {
     return {
-      source: {
-        name: '李四',
-        idCard: '330901197603064256',
-        address: '镇海区',
-        date: '2020-5-1',
-      },
+      result: '2',
+      info: [
+        {
+          number: '044',
+          name: '胡守钧',
+          address: '宁波市江北区四洲街16号404',
+          money: '180234元',
+          person: '王勇',
+          time: '2021-9-1',
+        },
+        {
+          number: '044',
+          name: '胡守钧',
+          address: '宁波市江北区四洲街16号404',
+          money: '180234元',
+          person: '王勇',
+          time: '2021-9-1',
+        },
+      ],
     }
   },
+  created() {
+    console.log(1234)
+  },
 }
 </script>
 
 <style lang="less" scoped>
 .container {
-  > :nth-child(1) {
-    padding: 10px;
-    background-color: #b6c8dd;
-    > :nth-child(1) {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 50px;
-      border-bottom: 3px solid #ffffff;
-      padding-bottom: 10px;
-    }
-    > :nth-child(2) {
-      text-align: center;
-      margin-top: 10px;
-    }
-    // 箭头
-    > :nth-child(3) {
-      text-align: center;
-    }
+  .image {
+    text-align: center;
+    margin-top: 20px;
   }
-  > :nth-child(2) {
-    padding: 10px;
-    background-color: #f5faff;
-    > :nth-child(1) {
-      border: 1px solid black;
-      padding: 10px;
-      background-color: #ffffff;
-      > :nth-child(1) {
-        display: flex;
-        justify-content: space-around;
-        height: 30px;
-        align-items: center;
-        border-bottom: 1px solid #a8cbec;
-        color: #5cb1ff;
+  .text {
+    text-align: center;
+    margin: 10px 0;
+    color: #2d6df2;
+    font-weight: bolder;
+  }
+  .el-card {
+    margin: 0 10px 10px;
+    ::v-deep.el-card__body {
+      padding: 0 10px;
+      > div {
+        margin: 10px 0;
       }
-      > :nth-child(2) {
-        div {
-          text-align: center;
-          margin: 10px;
-        }
-        > :nth-child(1) {
-          color: #1e7ed7;
-        }
-        > :nth-child(2) {
-          color: #5cc6ff;
+      .backgroundColor {
+        background-color: #e3ebfd;
+        img {
+          margin-right: 10px;
         }
       }
     }

FrontCode1/vue/src/views/login.vue

@@ -20,7 +20,7 @@
     </div>
     <!-- 背景图 -->
     <div class="background" @click="handle()">
-      <img src="../assets/background.png" alt="" />
+      <img src="../assets/image/background.png" alt="" />
     </div>
     <!-- 标题 -->
     <el-card>
@@ -28,29 +28,29 @@
         <!-- 曙光一村 -->
         <div>
           <div>
-            <img src="../assets/window.png" alt="" />
+            <img src="../assets/image/window.png" alt="" />
           </div>
           <span>曙光一村地块</span>
           <div>
-            <img src="../assets/xieyi.png" alt="" />
+            <img src="../assets/image/xieyi.png" alt="" />
           </div>
         </div>
         <!-- 征收信息 -->
         <div>
           <div class="flex">
-            <img src="../assets/01zhushuju_hangzhengquyu@3x.png" alt="" />
+            <img src="../assets/image/01zhushuju_hangzhengquyu@3x.png" alt="" />
             <span>项目所在区域：{{ this.source.region }}</span>
           </div>
           <div class="flex">
-            <img src="../assets/bumenguanli-3@3x.png" alt="" />
+            <img src="../assets/image/bumenguanli-3@3x.png" alt="" />
             <span>征收部门：{{ this.source.section }}</span>
           </div>
           <div class="flex">
-            <img src="../assets/yanchurili@3x.png" alt="" />
+            <img src="../assets/image/yanchurili@3x.png" alt="" />
             <span>所属年份：{{ this.source.date }}</span>
           </div>
           <div class="flex">
-            <img src="../assets/918caidan_wenjian@3x.png" alt="" />
+            <img src="../assets/image/918caidan_wenjian@3x.png" alt="" />
             <span
               >征收决定号：<span style="color:blue">{{
                 this.source.number
@@ -62,11 +62,11 @@
         <div>
           <div>
             <div>
-              <img src="../assets/pingu.png" alt="" />
+              <img src="../assets/image/pingu.png" alt="" />
             </div>
             <span>分户评估结果</span>
             <div @click="evaluate()">
-              <img src="../assets/jiantou.png" alt="" />
+              <img src="../assets/image/jiantou.png" alt="" />
             </div>
           </div>
           <div>
@@ -91,11 +91,11 @@
         <div>
           <div>
             <div>
-              <img src="../assets/xy.png" alt="" />
+              <img src="../assets/image/xy.png" alt="" />
             </div>
             <span>补偿协议</span>
             <div @click="compensate()">
-              <img src="../assets/jiantou.png" alt="" />
+              <img src="../assets/image/jiantou.png" alt="" />
             </div>
           </div>
           <div>
@@ -124,7 +124,7 @@
     </el-card>
     <!-- 图片跳转 -->
     <div>
-      <img src="../assets/zhengshou.png" alt="" />
+      <img src="../assets/image/zhengshou.png" alt="" />
     </div>
     <!-- 征收政策 -->
     <div>
@@ -234,7 +234,7 @@ export default {
 <style lang="less" scoped>
 .container {
   background-color: #f0f9fb;
-  background: url('../assets/3.png') no-repeat;
+  background: url('../assets/image/3.png') no-repeat;
   background-size: 100%;
   .top {
     padding: 10px;
@@ -245,7 +245,7 @@ export default {
     > :nth-child(1) {
       height: 30px;
       background-size: auto 100%;
-      background-image: url('../assets/person.png');
+      background-image: url('../assets/image/person.png');
       z-index: 99;
       background-repeat: no-repeat;
     }
@@ -266,15 +266,15 @@ export default {
       background-repeat: no-repeat;
     }
     > :nth-child(1) {
-      background: url('../assets/middle1.png') no-repeat;
+      background: url('../assets/image/middle1.png') no-repeat;
       background-size: auto 100%;
     }
     > :nth-child(2) {
-      background: url('../assets/middle2.png') no-repeat;
+      background: url('../assets/image/middle2.png') no-repeat;
       background-size: auto 100%;
     }
     > :nth-child(3) {
-      background: url('../assets/middle3.png') no-repeat;
+      background: url('../assets/image/middle3.png') no-repeat;
       background-size: auto 100%;
     }
   }
@@ -293,7 +293,7 @@ export default {
     .content {
       background-color: #ffffff;
       > :nth-child(1) {
-        background: url('../assets/3.png') no-repeat;
+        background: url('../assets/image/3.png') no-repeat;
         background-size: 100%;
         display: flex;
         justify-content: space-between;
@@ -366,7 +366,7 @@ export default {
           // padding: 10px;
           > :nth-child(1) {
             width: 10%;
-            background: url('../assets/shuxian0.png') no-repeat;
+            background: url('../assets/image/shuxian0.png') no-repeat;
             background-size: auto 100%;
             background-position: center;
           }
@@ -411,7 +411,7 @@ export default {
           display: flex;
           > :nth-child(1) {
             width: 10%;
-            background: url('../assets/shuxian.png') no-repeat;
+            background: url('../assets/image/shuxian.png') no-repeat;
             background-size: auto 100%;
             background-position: center;
           }

FrontCode2/sunshine_levy/src/views/agreement.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="container">
+    <div class="image"><img src="@/assets/image/agreement.png" alt="" /></div>
+    <div class="text">为您查询到{{ this.result }}条结果</div>
+    <div v-for="(item, index) in info" :key="index">
+      <el-card>
+        <div>
+          <img src="@/assets/image/bianhao.png" alt="" />
+          评估报告编号：<b>{{ item.number }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/name.png" alt="" />
+          被征收人姓名：<b>{{ item.name }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/address.png" alt="" />
+          被征收人房屋地址：<b>{{ item.address }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/money.png" alt="" />
+          评估总金额：<b style="color:red">{{ item.money }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/money.png" alt="" />
+          合计补偿金额：<b style="color:red">{{ item.money }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/hengxian.png" alt="" />
+        </div>
+        <div class="date">
+          <div class="flex backgroundColor">
+            <img src="@/assets/image/shijian.png" alt="" />
+            签订日期：{{ item.time }}
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script>
+import TABLE from '@/components/table'
+export default {
+  components: {
+    TABLE,
+  },
+  data() {
+    return {
+      result: '2',
+      info: [
+        {
+          number: '044',
+          name: '胡守钧',
+          address: '宁波市江北区四洲街16号404',
+          money: '180234元',
+          person: '王勇',
+          time: '2021-9-1',
+        },
+        {
+          number: '044',
+          name: '胡守钧',
+          address: '宁波市江北区四洲街16号404',
+          money: '180234元',
+          person: '王勇',
+          time: '2021-9-1',
+        },
+      ],
+    }
+  },
+  created() {
+    console.log(1234)
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  .image {
+    text-align: center;
+    margin-top: 20px;
+  }
+  .text {
+    text-align: center;
+    margin: 10px 0;
+    color: #2d6df2;
+    font-weight: bolder;
+  }
+  .el-card {
+    margin: 0 10px 10px;
+    ::v-deep.el-card__body {
+      padding: 0 10px;
+      > div {
+        margin: 10px 0;
+      }
+      .date {
+        display: flex;
+        justify-content: center;
+        .backgroundColor {
+          background-color: #e3ebfd;
+          img {
+            margin-right: 10px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

FrontCode2/sunshine_levy/src/views/compensate.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="container">
+    <div class="image"><img src="@/assets/image/evalute.png" alt="" /></div>
+    <div class="text">为您查询到{{ this.result }}条结果</div>
+    <div v-for="(item, index) in info" :key="index">
+      <el-card>
+        <div>
+          <img src="@/assets/image/bianhao.png" alt="" />
+          评估报告编号：<b>{{ item.number }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/name.png" alt="" />
+          被征收人姓名：<b>{{ item.name }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/address.png" alt="" />
+          被征收人房屋地址：<b>{{ item.address }}</b>
+        </div>
+        <div>
+          <img src="@/assets/image/money.png" alt="" />
+          评估总金额：<b style="color:red">{{ item.money }}</b>
+        </div>
+        <div class="flex">
+          <div class="flex backgroundColor">
+            <img src="@/assets/image/renyuan.png" alt="" />
+            评估人员：{{ item.person }}
+          </div>
+          <div class="flex backgroundColor">
+            <img src="@/assets/image/shijian.png" alt="" />
+            评估时间：{{ item.time }}
+          </div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+<script>
+import TABLE from '@/components/table'
+export default {
+  components: {
+    TABLE,
+  },
+  data() {
+    return {
+      result: '2',
+      info: [
+        {
+          number: '044',
+          name: '胡守钧',
+          address: '宁波市江北区四洲街16号404',
+          money: '180234元',
+          person: '王勇',
+          time: '2021-9-1',
+        },
+        {
+          number: '044',
+          name: '胡守钧',
+          address: '宁波市江北区四洲街16号404',
+          money: '180234元',
+          person: '王勇',
+          time: '2021-9-1',
+        },
+      ],
+    }
+  },
+  created() {
+    console.log(1234)
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  .image {
+    text-align: center;
+    margin-top: 20px;
+  }
+  .text {
+    text-align: center;
+    margin: 10px 0;
+    color: #2d6df2;
+    font-weight: bolder;
+  }
+  .el-card {
+    margin: 0 10px 10px;
+    ::v-deep.el-card__body {
+      padding: 0 10px;
+      > div {
+        margin: 10px 0;
+      }
+      .backgroundColor {
+        background-color: #e3ebfd;
+        img {
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+}
+</style>