update:前段代码首次上传

FrontCode1/vue/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

FrontCode1/vue/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

FrontCode1/vue/README.md

@@ -0,0 +1,19 @@
+# vue-three
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

FrontCode1/vue/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

FrontCode1/vue/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "vue-three",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^3.17.2",
+    "element-ui": "^2.15.6",
+    "less": "^4.1.1",
+    "less-loader": "^6.2.0",
+    "normalize.css": "^8.0.1",
+    "style-loader": "^3.2.1",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
+    "vuex": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

FrontCode1/vue/src/App.vue

@@ -0,0 +1,11 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+<style>
+#app {
+  padding: 0;
+  height: 100%;
+}
+</style>

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

@@ -0,0 +1,4 @@
+.flex {
+  display: flex;
+  justify-content: space-between;
+}

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

@@ -0,0 +1,4 @@
+html,
+body {
+    height: 100%;
+}

FrontCode1/vue/src/components/table.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="box">
+    <div>
+      <span>{{ data.date }}</span>
+      <span>{{ data.address }}</span>
+    </div>
+    <div>
+      <div>郁金花园北地块</div>
+      <div>协议签订阶段</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'table',
+  props: ['data'],
+}
+</script>
+<style lang="less" scoped>
+.box {
+  > :nth-child(1) {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: 10px;
+  }
+  > :nth-child(2) {
+    border-top: 2px solid #a8cbec;
+    > div {
+      text-align: center;
+    }
+  }
+}
+</style>

FrontCode1/vue/src/elementui/index.js

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

FrontCode1/vue/src/main.js

@@ -0,0 +1,20 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+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/flex.css'
+
+Vue.use(ElementUI)
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: (h) => h(App),
+}).$mount('#app')

FrontCode1/vue/src/router/index.js

@@ -0,0 +1,25 @@
+import Vue from 'vue'
+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') },
+]
+
+const router = new VueRouter({
+    routes,
+})
+
+export default router

FrontCode1/vue/src/store/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

FrontCode1/vue/src/util/index.js

@@ -0,0 +1,27 @@
+import axios from "axios"
+
+const instance = axios.create({
+    baseURL: "https://some-domain.com/api/",
+    timeout: 5000,
+
+})
+
+// 添加请求拦截器
+axios.interceptors.request.use(function(config) {
+    // 在发送请求之前做些什么
+    return config;
+}, function(error) {
+    // 对请求错误做些什么
+    return Promise.reject(error);
+});
+
+// 添加响应拦截器
+axios.interceptors.response.use(function(response) {
+    // 对响应数据做点什么
+    return response;
+}, function(error) {
+    // 对响应错误做点什么
+    return Promise.reject(error);
+});
+
+export default instance

FrontCode1/vue/src/views/compensate.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="container">
+    <div>
+      <div>
+        <span> 应征户姓名：{{ this.source.name }} </span>
+        <span> 身份证号码：{{ this.source.idCard }} </span>
+      </div>
+      <div>请选择您的征收项目</div>
+    </div>
+    <div>
+      <div>
+        <div>
+          <span>{{ source.date }}</span>
+          <span>{{ source.address }}</span>
+        </div>
+        <div>
+          <div>郁金花园北地块</div>
+          <div>协议签订阶段</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import TABLE from '@/components/table'
+export default {
+  components: {
+    TABLE,
+  },
+  data() {
+    return {
+      source: {
+        name: '李四',
+        idCard: '330901197603064256',
+        address: '镇海区',
+        date: '2020-5-1',
+      },
+    }
+  },
+}
+</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(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;
+      }
+      > :nth-child(2) {
+        div {
+          text-align: center;
+          margin: 10px;
+        }
+        > :nth-child(1) {
+          color: #1e7ed7;
+        }
+        > :nth-child(2) {
+          color: #5cc6ff;
+        }
+      }
+    }
+  }
+}
+</style>

FrontCode1/vue/src/views/evaluate.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="container">
+    <div>
+      <div>
+        <span> 应征户姓名：{{ this.source.name }} </span>
+        <span> 身份证号码：{{ this.source.idCard }} </span>
+      </div>
+      <div>请选择您的征收项目</div>
+    </div>
+    <div>
+      <div>
+        <div>
+          <span>{{ source.date }}</span>
+          <span>{{ source.address }}</span>
+        </div>
+        <div>
+          <div>郁金花园北地块</div>
+          <div>协议签订阶段</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import TABLE from '@/components/table'
+export default {
+  components: {
+    TABLE,
+  },
+  data() {
+    return {
+      source: {
+        name: '李四',
+        idCard: '330901197603064256',
+        address: '镇海区',
+        date: '2020-5-1',
+      },
+    }
+  },
+}
+</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(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;
+      }
+      > :nth-child(2) {
+        div {
+          text-align: center;
+          margin: 10px;
+        }
+        > :nth-child(1) {
+          color: #1e7ed7;
+        }
+        > :nth-child(2) {
+          color: #5cc6ff;
+        }
+      }
+    }
+  }
+}
+</style>

FrontCode1/vue/src/views/information.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>征收信息页面</div>
+</template>

FrontCode1/vue/src/views/login.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="container">
+    <!-- 顶部 -->
+    <div class="top">
+      <div></div>
+      <div>
+        <i class="el-icon-user-solid"></i>
+        <span>被征收人姓名：胡伯钧</span>
+      </div>
+      <div>
+        <i class="el-icon-postcard"></i>
+        <span>身份证号码：330901197603064256</span>
+      </div>
+    </div>
+    <!-- 图片跳转 -->
+    <div class="middle">
+      <div @click="QRcode()"></div>
+      <div @click="evaluate()"></div>
+      <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>
+    <el-card class="box-card"> </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      source: {
+        region: '海曙区',
+        section: '宁海县房屋征收管理中心',
+        date: 2019,
+        number: '海政发[2021]',
+        bianhao: '044',
+        address: '宁波市江北区泗洲街16号404',
+        totalMoney: '180234元',
+        style: '产权调换',
+        money: '180257元',
+      },
+    }
+  },
+  methods: {
+    handle() {
+      console.log(111)
+    },
+    QRcode() {
+      console.log(11)
+    },
+    evaluate() {
+      this.$router.push('/evaluate')
+    },
+    compensate() {
+      this.$router.push('/compensate')
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  background-color: #808d91;
+  height: 100%;
+  background: url('../assets/3.png') no-repeat;
+  background-size: 100%;
+  .top {
+    // background-color: #eff8ff;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100px;
+    > :nth-child(1) {
+      height: 30px;
+      background-size: auto 100%;
+      background-image: url('../assets/person.png');
+      z-index: 99;
+      background-repeat: no-repeat;
+    }
+  }
+  .middle {
+    margin: 0 10px;
+    background-color: #ffffff;
+    background: rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    height: 100px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    > div {
+      height: 100%;
+      width: 32%;
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+    }
+    > :nth-child(1) {
+      background: url('../assets/middle1.png') no-repeat;
+      background-size: auto 100%;
+    }
+    > :nth-child(2) {
+      background: url('../assets/middle2.png') no-repeat;
+      background-size: auto 100%;
+    }
+    > :nth-child(3) {
+      background: url('../assets/middle3.png') no-repeat;
+      background-size: auto 100%;
+    }
+  }
+  .background {
+    height: 90px;
+    margin: 0 10px;
+    background: url('../assets/background.png') no-repeat;
+  }
+  .content {
+    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;
+      background-color: #ffffff;
+      > :nth-child(1) {
+        background: url('../assets/window.png') no-repeat;
+        background-size: auto 100%;
+        width: 20%;
+        height: 100%;
+      }
+      > :nth-child(3) {
+        width: 30%;
+        height: 100%;
+        background: url('../assets/xieyi.png') no-repeat;
+        background-size: 100% auto;
+        background-position: center;
+      }
+    }
+    > :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;
+          margin: 10px 0;
+        }
+      }
+    }
+  }
+}
+</style>