Merge branch 'master' of http://118.178.224.202:3000/ewide/zsxt_nbzs_h5

FrontCode1/vue/src/assets/style/flex.css

@@ -1,4 +1,5 @@
 .flex {
   display: flex;
   justify-content: space-between;
+  align-items: center;
 }

FrontCode1/vue/src/elementui/index.js

@@ -1,7 +1,8 @@
 import Vue from 'vue'
 
-import { Form, FormItem, Button } from 'element-ui'
+import { Form, FormItem, Button, Card } from 'element-ui'
 
 Vue.use(Form)
 Vue.use(FormItem)
-Vue.use(Button)
+Vue.use(Button)
+Vue.use(Card)

FrontCode1/vue/src/main.js

@@ -6,7 +6,7 @@ import '@/elementui'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import 'normalize.css/normalize.css'
-import '@/assets/style/global.css'
+// import '@/assets/style/global.css'
 import '@/assets/style/flex.css'
 
 Vue.use(ElementUI)

FrontCode1/vue/src/views/login.vue

@@ -19,112 +19,134 @@
       <div @click="compensate()"></div>
     </div>
     <!-- 背景图 -->
-    <div class="background" @click="handle()"></div>
-    <!-- 标题 -->
-    <div class="content">
-      <div>
-        <div></div>
-        <span>曙光一村地块</span>
-        <div></div>
-      </div>
-      <!-- 征收信息 -->
-      <div>
-        <span
-          ><i class="el-icon-map-location"></i> 项目所在区域：{{
-            this.source.region
-          }}
-        </span>
-        <span
-          ><i class="el-icon-s-home"></i> 征收部门：{{ this.source.section }}
-        </span>
-        <span
-          ><i class="el-icon-date"></i> 所属年份：{{ this.source.date }}
-        </span>
-        <span
-          ><i class="el-icon-date"></i> 征收决定号：<span style="color:blue">{{
-            this.source.number
-          }}</span>
-        </span>
-      </div>
-      <!-- 分户评估结果 -->
-      <div>
-        <div>
-          <div></div>
-          <div>分户评估结果</div>
-          <div></div>
-        </div>
-        <div>
-          <div></div>
-          <div>
-            <div class="flex">
-              <span> 评估报告编号：</span>
-              <span>{{ this.source.bianhao }}</span>
-            </div>
-            <div class="flex">
-              <span>被征收房屋地址：</span>
-              <span>{{ this.source.address }}</span>
-            </div>
-            <div class="flex">
-              <span> 评估总金额：</span>
-              <span style="color:red">{{ this.source.totalMoney }} </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 补偿协议 -->
-      <div>
-        <div>
-          <div></div>
-          <div>补偿协议</div>
-          <div></div>
-        </div>
-        <div>
-          <div></div>
-          <div>
-            <div class="flex">
-              <span>协议编号：</span>
-              <span>{{ this.source.bianhao }}</span>
-            </div>
-            <div class="flex">
-              <span>被征收房屋地址：</span>
-              <span>{{ this.source.address }}</span>
-            </div>
-            <div class="flex">
-              <span>补偿方式：</span>
-              <span>{{ this.source.style }}</span>
-            </div>
-            <div class="flex">
-              <span>合计补偿资金：</span>
-              <span style="color:red">{{ this.source.money }} </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 图片跳转 -->
-      <div></div>
-      <!-- 征收政策 -->
-      <div>
-        <span>征收政策</span>
-        <div>
-          <div>共8条</div>
-          <div>查看全部</div>
-        </div>
-        <div>
-          <div>宁波市住房和城乡建设委员会关于开展</div>
-          <div>
-            <div>
-              <span>发布时间：</span>
-              <span>2021-9-1</span>
-            </div>
-            <div>
-              <span>区域：</span>
-              <span>海曙区</span>
-            </div>
-          </div>
-        </div>
-      </div>
+    <div class="background" @click="handle()">
+      <img src="../assets/background.png" alt="" />
+    </div>
+    <!-- 标题 -->
+    <el-card>
+      <div class="content">
+        <!-- 曙光一村 -->
+        <div>
+          <div>
+            <img src="../assets/window.png" alt="" />
+          </div>
+          <span>曙光一村地块</span>
+          <div>
+            <img src="../assets/xieyi.png" alt="" />
+          </div>
+        </div>
+        <!-- 征收信息 -->
+        <div>
+          <div class="flex">
+            <img src="../assets/01zhushuju_hangzhengquyu@3x.png" alt="" />
+            <span>项目所在区域：{{ this.source.region }}</span>
+          </div>
+          <div class="flex">
+            <img src="../assets/bumenguanli-3@3x.png" alt="" />
+            <span>征收部门：{{ this.source.section }}</span>
+          </div>
+          <div class="flex">
+            <img src="../assets/yanchurili@3x.png" alt="" />
+            <span>所属年份：{{ this.source.date }}</span>
+          </div>
+          <div class="flex">
+            <img src="../assets/918caidan_wenjian@3x.png" alt="" />
+            <span
+              >征收决定号：<span style="color:blue">{{
+                this.source.number
+              }}</span></span
+            >
+          </div>
+        </div>
+        <!-- 分户评估结果 -->
+        <div>
+          <div>
+            <div>
+              <img src="../assets/pingu.png" alt="" />
+            </div>
+            <span>分户评估结果</span>
+            <div>
+              <img src="../assets/jiantou.png" alt="" />
+            </div>
+          </div>
+          <div>
+            <div></div>
+            <div>
+              <div class="flex">
+                <span> 评估报告编号：</span>
+                <span>{{ this.source.bianhao }}</span>
+              </div>
+              <div class="flex">
+                <span>被征收房屋地址：</span>
+                <span>{{ this.source.address }}</span>
+              </div>
+              <div class="flex">
+                <span> 评估总金额：</span>
+                <span style="color:red">{{ this.source.totalMoney }} </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- 补偿协议 -->
+        <div>
+          <div>
+            <div>
+              <img src="../assets/xy.png" alt="" />
+            </div>
+            <span>补偿协议</span>
+            <div>
+              <img src="../assets/jiantou.png" alt="" />
+            </div>
+          </div>
+          <div>
+            <div></div>
+            <div>
+              <div class="flex">
+                <span>协议编号：</span>
+                <span>{{ this.source.bianhao }}</span>
+              </div>
+              <div class="flex">
+                <span>被征收房屋地址：</span>
+                <span>{{ this.source.address }}</span>
+              </div>
+              <div class="flex">
+                <span>补偿方式：</span>
+                <span>{{ this.source.style }}</span>
+              </div>
+              <div class="flex">
+                <span>合计补偿资金：</span>
+                <span style="color:red">{{ this.source.money }} </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-card>
+    <!-- 图片跳转 -->
+    <div>
+      <img src="../assets/zhengshou.png" alt="" />
+    </div>
+    <!-- 征收政策 -->
+    <div>
+      <span>征收政策</span>
+      <div>
+        <div>共8条</div>
+        <div>查看全部</div>
+      </div>
+      <el-card>
+        <div>宁波市住房和城乡建设委员会关于开展</div>
+        <div class="flex">
+          <div>
+            <span>发布时间：</span>
+            <span>2021-9-1</span>
+          </div>
+          <div>
+            <span>区域：</span>
+            <span>全大市</span>
+          </div>
+        </div>
+      </el-card>
     </div>
-    <el-card class="box-card"> </el-card>
   </div>
 </template>
 
@@ -164,8 +186,7 @@ export default {
 
 <style lang="less" scoped>
 .container {
-  background-color: #808d91;
-  height: 100%;
+  background-color: #f0f9fb;
   background: url('../assets/3.png') no-repeat;
   background-size: 100%;
   .top {
@@ -212,139 +233,171 @@ export default {
     }
   }
   .background {
-    height: 90px;
     margin: 0 10px;
-    background: url('../assets/background.png') no-repeat;
+    img {
+      width: 100%;
+    }
   }
-  .content {
+  > .el-card {
     margin: 10px;
-    background-color: #ffffff;
-    > :nth-child(1) {
-      background: url('../assets/3.png') no-repeat;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      height: 50px;
-      margin: 10px 0;
+    .el-card__body {
+      padding: 0;
+    }
+    .content {
       background-color: #ffffff;
+      // box-shadow: 10px 10px 10px 10px #e3e9eb;
       > :nth-child(1) {
-        background: url('../assets/window.png') no-repeat;
-        background-size: auto 100%;
-        width: 20%;
-        height: 100%;
+        background: url('../assets/3.png') no-repeat;
+        background-size: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 10px 0;
+        > :nth-child(1) {
+          width: 20%;
+          text-align: left;
+          img {
+            width: 80%;
+          }
+        }
+        > span {
+          width: 50%;
+        }
+        > :nth-child(3) {
+          text-align: right;
+          img {
+            width: 50%;
+          }
+        }
       }
+      // 征收信息
+      > :nth-child(2) {
+        img {
+          width: 5%;
+        }
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        // height: 100px;
+        padding-left: 10px;
+        .flex {
+          > :nth-child(2) {
+            width: 90%;
+          }
+        }
+      }
+      // 分户评估结果
       > :nth-child(3) {
-        width: 30%;
-        height: 100%;
-        background: url('../assets/xieyi.png') no-repeat;
-        background-size: 100% auto;
-        background-position: center;
+        padding: 10px;
+        > :nth-child(1) {
+          display: flex;
+          justify-content: space-between;
+          padding: 15px 0;
+          align-items: center;
+          > :nth-child(1) {
+            width: 13%;
+            text-align: left;
+            img {
+              width: 80%;
+            }
+          }
+          > span {
+            width: 65%;
+            color: blue;
+          }
+          > :nth-child(3) {
+            text-align: right;
+            img {
+              width: 50%;
+            }
+          }
+        }
+        > :nth-child(2) {
+          display: flex;
+          // padding: 10px;
+          > :nth-child(1) {
+            width: 10%;
+            background: url('../assets/shuxian0.png') no-repeat;
+            background-size: auto 100%;
+            background-position: center;
+          }
+          > :nth-child(2) {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            width: 90%;
+            > div {
+              margin: 10px 0;
+            }
+          }
+        }
+      }
+      // 补偿协议
+      > :nth-child(4) {
+        padding: 10px;
+        > :nth-child(1) {
+          display: flex;
+          justify-content: space-between;
+          padding: 15px 0;
+          align-items: center;
+          > :nth-child(1) {
+            width: 13%;
+            text-align: left;
+            img {
+              width: 80%;
+            }
+          }
+          > span {
+            width: 65%;
+            color: blue;
+          }
+          > :nth-child(3) {
+            text-align: right;
+            img {
+              width: 50%;
+            }
+          }
+        }
+        > :nth-child(2) {
+          display: flex;
+          > :nth-child(1) {
+            width: 10%;
+            background: url('../assets/shuxian.png') no-repeat;
+            background-size: auto 100%;
+            background-position: center;
+          }
+          > :nth-child(2) {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            width: 90%;
+            > div {
+              margin: 10px 0;
+            }
+          }
+        }
       }
     }
+  }
+  // 图片跳转
+  > :nth-child(5) {
+    margin: 10px;
+    img {
+      width: 100%;
+    }
+  }
+  // 征收政策
+  > :nth-child(6) {
+    margin: 10px;
     > :nth-child(2) {
       display: flex;
-      flex-direction: column;
       justify-content: space-between;
-      margin-top: 10px;
-      background-color: #ffffff;
-      height: 100px;
-      padding-left: 10px;
-    }
-    // 分户评估结果
-    > :nth-child(3) {
-      > :nth-child(1) {
-        display: flex;
-        margin: 15px 0;
-        justify-content: space-between;
-        height: 40px;
-        align-items: center;
-        > :nth-child(1) {
-          height: 100%;
-          width: 20%;
-          background: url('../assets/pingu.png') no-repeat;
-          background-size: auto 100%;
-        }
-        > :nth-child(3) {
-          height: 100%;
-          width: 11%;
-          background: url('../assets/jiantou.png') no-repeat;
-          background-size: auto 100%;
-        }
-      }
-      > :nth-child(2) {
-        display: flex;
-        > :nth-child(1) {
-          width: 10%;
-          background: url('../assets/shuxian0.png') no-repeat;
-          background-size: auto 100%;
-          background-position: center;
-        }
-        > :nth-child(2) {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          height: 70px;
-          width: 90%;
-        }
-      }
-    }
-    // 补偿协议
-    > :nth-child(4) {
-      > :nth-child(1) {
-        margin: 15px 0;
-        display: flex;
-        justify-content: space-between;
-        height: 40px;
-        align-items: center;
-        > :nth-child(1) {
-          height: 100%;
-          width: 20%;
-          background: url('../assets/xy.png') no-repeat;
-          background-size: auto 95%;
-        }
-        > :nth-child(3) {
-          height: 100%;
-          width: 11%;
-          background: url('../assets/jiantou.png') no-repeat;
-          background-size: auto 100%;
-        }
-      }
-      > :nth-child(2) {
-        display: flex;
-        > :nth-child(1) {
-          height: 100px;
-          width: 10%;
-          background: url('../assets/shuxian.png') no-repeat;
-          background-size: auto 100%;
-          background-position: center;
-        }
-        > :nth-child(2) {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          height: 100px;
-          width: 90%;
-        }
-      }
-    }
-    // 图片跳转
-    > :nth-child(5) {
-      background: url('../assets/zhengshou.png') no-repeat;
-      height: 50px;
-      background-size: auto 100%;
       margin: 10px 0;
     }
-    // 征收政策
-    > :nth-child(6) {
-      > :nth-child(2) {
-        display: flex;
-        justify-content: space-between;
-        margin: 10px 0;
-      }
-      > :nth-child(3) {
-        > :nth-child(2) {
-          display: flex;
-          justify-content: space-between;
+    > .el-card {
+      padding: 10px;
+      .flex {
+        > div {
           margin: 10px 0;
         }
       }