提交

2023-07-04 19:16:34 +08:00 · 2023-07-04 19:16:34 +08:00 · 732184b18e
commit 732184b18e
57 changed files with 28156 additions and 0 deletions
--- a/.gitignore
+++ b/.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?
--- a/README.md
+++ b/README.md
@ -0,0 +1,19 @@
+# zufang
+
+## 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/).
--- a/babel.config.js
+++ b/babel.config.js
@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "baseUrl": "./",
+    "moduleResolution": "node",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "esnext",
+      "dom",
+      "dom.iterable",
+      "scripthost"
+    ]
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,36 @@
+{
+  "name": "zufang",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "axios": "^1.4.0",
+    "core-js": "^3.8.3",
+    "element-plus": "^2.3.7",
+    "element-ui": "^2.15.13",
+    "sass-loader": "^8.0.0",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.3",
+    "sass": "^1.63.6",
+    "style-resources-loader": "^1.5.0",
+    "vue-cli-plugin-style-resources-loader": "^0.1.5"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,101 @@
+<template>
+  <header-nav v-if="isHeader === 1"></header-nav>
+  <router-view />
+</template>
+<script>
+import { onMounted, watch, ref, } from 'vue';
+import { useRoute } from 'vue-router';
+
+import headerNav from './components/public/head.vue'
+export default ({
+  setup() {
+    const route = useRoute();
+
+    let isHeader = ref(0) //  判断头部是否需要展示和状态 编辑头部和首页收不不也一样 0 为不显示 1 是编辑页面的小头部 2 是大头部
+
+    // 监听路径变化
+    watch(
+      () => route.path,
+      (newValue) => {
+        if (newValue === '/edit') isHeader.value  = 1
+      }
+    );
+    return {
+      isHeader,
+      route // 在Vue 3中，需要手动从Vue实例中导入 $route
+    }
+  },
+
+  data() {
+    return {
+    };
+  },
+  components: {
+    headerNav
+  }
+
+})
+
+</script>
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html {
+  background-color: #eff7ff;
+}
+
+.shadow {
+  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
+  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
+}
+
+.radius16 {
+  border-radius: 16px;
+}
+
+.flexflex {
+  display: flex;
+}
+
+.flex1 {
+  flex: 1;
+}
+
+.flexcenter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.flexacenter {
+  display: flex;
+  align-items: center;
+}
+
+.flexjcenter {
+  display: flex;
+  justify-content: center;
+}
+
+/* // 全局css 加上以下代码，可以隐藏上下箭头 */
+
+/* // 取消input的上下箭头 */
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+
+}
+
+input::-webkit-outer-spin-button {
+  -webkit-appearance: none !important;
+
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>
--- a/src/assets/img/edit/QRCode.svg
+++ b/src/assets/img/edit/QRCode.svg
--- a/src/assets/img/edit/arrows.svg
+++ b/src/assets/img/edit/arrows.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1666 -5943 )">
+    <path d="M 6.125 11.7213541666667  C 6.28298611111111 11.7213541666667  6.41970486111111 11.6636284722222  6.53515625 11.5481770833333  L 10.6731770833333 7.41015625  C 10.7886284722222 7.29470486111111  10.8463541666667 7.15798611111111  10.8463541666667 7  C 10.8463541666667 6.84201388888889  10.7886284722222 6.70529513888889  10.6731770833333 6.58984375  L 6.53515625 2.45182291666667  C 6.41970486111111 2.33637152777778  6.28298611111111 2.27864583333333  6.125 2.27864583333333  C 5.96701388888889 2.27864583333333  5.83029513888889 2.33637152777778  5.71484375 2.45182291666667  L 4.78515625 3.38151041666667  C 4.66970486111111 3.49696180555555  4.61197916666667 3.63368055555555  4.61197916666667 3.79166666666667  C 4.61197916666667 3.94965277777778  4.66970486111111 4.08637152777778  4.78515625 4.20182291666667  L 7.58333333333333 7  L 4.78515625 9.79817708333333  C 4.66970486111111 9.91362847222222  4.61197916666667 10.0503472222222  4.61197916666667 10.2083333333333  C 4.61197916666667 10.3663194444444  4.66970486111111 10.5030381944444  4.78515625 10.6184895833333  L 5.71484375 11.5481770833333  C 5.83029513888889 11.6636284722222  5.96701388888889 11.7213541666667  6.125 11.7213541666667  Z M 13.0611979166667 3.486328125  C 13.6870659722222 4.55881076388889  14 5.73003472222222  14 7  C 14 8.26996527777778  13.6870659722222 9.44118923611111  13.0611979166667 10.513671875  C 12.4353298611111 11.5861545138889  11.5861545138889 12.4353298611111  10.513671875 13.0611979166667  C 9.44118923611111 13.6870659722222  8.26996527777778 14  7 14  C 5.73003472222222 14  4.55881076388889 13.6870659722222  3.486328125 13.0611979166667  C 2.41384548611111 12.4353298611111  1.56467013888889 11.5861545138889  0.938802083333333 10.513671875  C 0.312934027777778 9.44118923611111  0 8.26996527777778  0 7  C 0 5.73003472222222  0.312934027777778 4.55881076388889  0.938802083333333 3.486328125  C 1.56467013888889 2.41384548611111  2.41384548611111 1.56467013888889  3.486328125 0.938802083333333  C 4.55881076388889 0.312934027777777  5.73003472222222 0  7 0  C 8.26996527777778 0  9.44118923611111 0.312934027777777  10.513671875 0.938802083333333  C 11.5861545138889 1.56467013888889  12.4353298611111 2.41384548611111  13.0611979166667 3.486328125  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1666 5943 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/bj-img1200.png
+++ b/src/assets/img/edit/bj-img1200.png
--- a/src/assets/img/edit/bj-img1920.png
+++ b/src/assets/img/edit/bj-img1920.png
--- a/src/assets/img/edit/black-tick.svg
+++ b/src/assets/img/edit/black-tick.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="13px" height="10px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -453 -10591 )">
+    <path d="M 12.7651612903226 1.38047138047138  C 12.9217204301075 1.53759820426487  13 1.72839506172839  13 1.95286195286195  C 13 2.17732884399551  12.9217204301075 2.36812570145903  12.7651612903226 2.52525252525253  L 6.69290322580645 8.61952861952862  L 5.55225806451613 9.76430976430976  C 5.39569892473118 9.92143658810325  5.20559139784946 10  4.98193548387097 10  C 4.75827956989247 10  4.56817204301075 9.92143658810325  4.41161290322581 9.76430976430976  L 3.27096774193548 8.61952861952862  L 0.234838709677419 5.57239057239057  C 0.0782795698924732 5.41526374859708  0 5.22446689113356  0 5  C 0 4.77553310886644  0.0782795698924732 4.58473625140292  0.234838709677419 4.42760942760943  L 1.37548387096774 3.28282828282828  C 1.53204301075269 3.12570145903479  1.72215053763441 3.04713804713805  1.9458064516129 3.04713804713805  C 2.1694623655914 3.04713804713805  2.35956989247312 3.12570145903479  2.51612903225806 3.28282828282828  L 4.98193548387097 5.76599326599327  L 10.4838709677419 0.235690235690236  C 10.6404301075269 0.0785634118967449  10.8305376344086 0  11.0541935483871 0  C 11.2778494623656 0  11.4679569892473 0.0785634118967449  11.6245161290323 0.235690235690236  L 12.7651612903226 1.38047138047138  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 453 10591 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/blue-arrow.svg
+++ b/src/assets/img/edit/blue-arrow.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1337 -5943 )">
+    <path d="M 6.125 11.7213541666667  C 6.28298611111111 11.7213541666667  6.41970486111111 11.6636284722222  6.53515625 11.5481770833333  L 10.6731770833333 7.41015625  C 10.7886284722222 7.29470486111111  10.8463541666667 7.15798611111111  10.8463541666667 7  C 10.8463541666667 6.84201388888889  10.7886284722222 6.70529513888889  10.6731770833333 6.58984375  L 6.53515625 2.45182291666667  C 6.41970486111111 2.33637152777778  6.28298611111111 2.27864583333333  6.125 2.27864583333333  C 5.96701388888889 2.27864583333333  5.83029513888889 2.33637152777778  5.71484375 2.45182291666667  L 4.78515625 3.38151041666667  C 4.66970486111111 3.49696180555555  4.61197916666667 3.63368055555555  4.61197916666667 3.79166666666667  C 4.61197916666667 3.94965277777778  4.66970486111111 4.08637152777778  4.78515625 4.20182291666667  L 7.58333333333333 7  L 4.78515625 9.79817708333333  C 4.66970486111111 9.91362847222222  4.61197916666667 10.0503472222222  4.61197916666667 10.2083333333333  C 4.61197916666667 10.3663194444444  4.66970486111111 10.5030381944444  4.78515625 10.6184895833333  L 5.71484375 11.5481770833333  C 5.83029513888889 11.6636284722222  5.96701388888889 11.7213541666667  6.125 11.7213541666667  Z M 13.0611979166667 3.486328125  C 13.6870659722222 4.55881076388889  14 5.73003472222222  14 7  C 14 8.26996527777778  13.6870659722222 9.44118923611111  13.0611979166667 10.513671875  C 12.4353298611111 11.5861545138889  11.5861545138889 12.4353298611111  10.513671875 13.0611979166667  C 9.44118923611111 13.6870659722222  8.26996527777778 14  7 14  C 5.73003472222222 14  4.55881076388889 13.6870659722222  3.486328125 13.0611979166667  C 2.41384548611111 12.4353298611111  1.56467013888889 11.5861545138889  0.938802083333333 10.513671875  C 0.312934027777778 9.44118923611111  0 8.26996527777778  0 7  C 0 5.73003472222222  0.312934027777778 4.55881076388889  0.938802083333333 3.486328125  C 1.56467013888889 2.41384548611111  2.41384548611111 1.56467013888889  3.486328125 0.938802083333333  C 4.55881076388889 0.312934027777777  5.73003472222222 0  7 0  C 8.26996527777778 0  9.44118923611111 0.312934027777777  10.513671875 0.938802083333333  C 11.5861545138889 1.56467013888889  12.4353298611111 2.41384548611111  13.0611979166667 3.486328125  Z " fill-rule="nonzero" fill="#62b1ff" stroke="none" transform="matrix(1 0 0 1 1337 5943 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/blue-tick.svg
+++ b/src/assets/img/edit/blue-tick.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1695 -7443 )">
+    <path d="M 11.5390625 5.93359375  C 11.6484375 5.82421875  11.703125 5.6875  11.703125 5.5234375  C 11.703125 5.35329861111111  11.6484375 5.21354166666667  11.5390625 5.10416666666667  L 10.7096354166667 4.28385416666667  C 10.5941840277778 4.16840277777778  10.4574652777778 4.11067708333333  10.2994791666667 4.11067708333333  C 10.1414930555556 4.11067708333333  10.0047743055556 4.16840277777778  9.88932291666667 4.28385416666667  L 6.17057291666667 7.99348958333333  L 4.11067708333333 5.93359375  C 3.99522569444444 5.81814236111111  3.85850694444444 5.76041666666667  3.70052083333333 5.76041666666667  C 3.54253472222222 5.76041666666667  3.40581597222222 5.81814236111111  3.29036458333333 5.93359375  L 2.4609375 6.75390625  C 2.3515625 6.86328125  2.296875 7.00303819444444  2.296875 7.17317708333333  C 2.296875 7.33723958333333  2.3515625 7.47395833333333  2.4609375 7.58333333333333  L 5.76041666666667 10.8828125  C 5.87586805555556 10.9982638888889  6.01258680555556 11.0559895833333  6.17057291666667 11.0559895833333  C 6.33463541666667 11.0559895833333  6.47439236111111 10.9982638888889  6.58984375 10.8828125  L 11.5390625 5.93359375  Z M 13.0611979166667 3.486328125  C 13.6870659722222 4.55881076388889  14 5.73003472222222  14 7  C 14 8.26996527777778  13.6870659722222 9.44118923611111  13.0611979166667 10.513671875  C 12.4353298611111 11.5861545138889  11.5861545138889 12.4353298611111  10.513671875 13.0611979166667  C 9.44118923611111 13.6870659722222  8.26996527777778 14  7 14  C 5.73003472222222 14  4.55881076388889 13.6870659722222  3.486328125 13.0611979166667  C 2.41384548611111 12.4353298611111  1.56467013888889 11.5861545138889  0.938802083333333 10.513671875  C 0.312934027777778 9.44118923611111  0 8.26996527777778  0 7  C 0 5.73003472222222  0.312934027777778 4.55881076388889  0.938802083333333 3.486328125  C 1.56467013888889 2.41384548611111  2.41384548611111 1.56467013888889  3.486328125 0.938802083333333  C 4.55881076388889 0.312934027777777  5.73003472222222 0  7 0  C 8.26996527777778 0  9.44118923611111 0.312934027777777  10.513671875 0.938802083333333  C 11.5861545138889 1.56467013888889  12.4353298611111 2.41384548611111  13.0611979166667 3.486328125  Z " fill-rule="nonzero" fill="#62b1ff" stroke="none" transform="matrix(1 0 0 1 1695 7443 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/certifying-agent.png
+++ b/src/assets/img/edit/certifying-agent.png
--- a/src/assets/img/edit/circle-pitch.svg
+++ b/src/assets/img/edit/circle-pitch.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -757 -913 )">
+    <path d="M 12.3567708333333 7.64322916666667  C 13.0078125 8.29427083333333  13.3333333333333 9.07986111111111  13.3333333333333 10  C 13.3333333333333 10.9201388888889  13.0078125 11.7057291666667  12.3567708333333 12.3567708333333  C 11.7057291666667 13.0078125  10.9201388888889 13.3333333333333  10 13.3333333333333  C 9.07986111111111 13.3333333333333  8.29427083333333 13.0078125  7.64322916666667 12.3567708333333  C 6.9921875 11.7057291666667  6.66666666666667 10.9201388888889  6.66666666666667 10  C 6.66666666666667 9.07986111111111  6.9921875 8.29427083333333  7.64322916666667 7.64322916666667  C 8.29427083333333 6.9921875  9.07986111111111 6.66666666666667  10 6.66666666666667  C 10.9201388888889 6.66666666666667  11.7057291666667 6.9921875  12.3567708333333 7.64322916666667  Z M 13.5546875 3.8671875  C 12.4696180555556 3.23350694444444  11.2847222222222 2.91666666666667  10 2.91666666666667  C 8.71527777777778 2.91666666666667  7.53038194444445 3.23350694444444  6.4453125 3.8671875  C 5.36024305555556 4.50086805555555  4.50086805555556 5.36024305555555  3.8671875 6.4453125  C 3.23350694444444 7.53038194444444  2.91666666666667 8.71527777777778  2.91666666666667 10  C 2.91666666666667 11.2847222222222  3.23350694444444 12.4696180555556  3.8671875 13.5546875  C 4.50086805555556 14.6397569444444  5.36024305555556 15.4991319444444  6.4453125 16.1328125  C 7.53038194444445 16.7664930555556  8.71527777777778 17.0833333333333  10 17.0833333333333  C 11.2847222222222 17.0833333333333  12.4696180555556 16.7664930555556  13.5546875 16.1328125  C 14.6397569444444 15.4991319444444  15.4991319444444 14.6397569444444  16.1328125 13.5546875  C 16.7664930555556 12.4696180555556  17.0833333333333 11.2847222222222  17.0833333333333 10  C 17.0833333333333 8.71527777777778  16.7664930555556 7.53038194444444  16.1328125 6.4453125  C 15.4991319444444 5.36024305555555  14.6397569444444 4.50086805555555  13.5546875 3.8671875  Z M 18.6588541666667 4.98046875  C 19.5529513888889 6.51258680555555  20 8.18576388888889  20 10  C 20 11.8142361111111  19.5529513888889 13.4874131944444  18.6588541666667 15.01953125  C 17.7647569444444 16.5516493055556  16.5516493055556 17.7647569444444  15.01953125 18.6588541666667  C 13.4874131944444 19.5529513888889  11.8142361111111 20  10 20  C 8.18576388888889 20  6.51258680555556 19.5529513888889  4.98046875 18.6588541666667  C 3.44835069444444 17.7647569444444  2.23524305555556 16.5516493055556  1.34114583333333 15.01953125  C 0.447048611111111 13.4874131944444  0 11.8142361111111  0 10  C 0 8.18576388888889  0.447048611111111 6.51258680555555  1.34114583333333 4.98046875  C 2.23524305555556 3.44835069444444  3.44835069444444 2.23524305555555  4.98046875 1.34114583333333  C 6.51258680555556 0.447048611111109  8.18576388888889 0  10 0  C 11.8142361111111 0  13.4874131944444 0.447048611111109  15.01953125 1.34114583333333  C 16.5516493055556 2.23524305555555  17.7647569444444 3.44835069444444  18.6588541666667 4.98046875  Z " fill-rule="nonzero" fill="#62b1ff" stroke="none" transform="matrix(1 0 0 1 757 913 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/close-icon.svg
+++ b/src/assets/img/edit/close-icon.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1244 -8602 )">
+    <path d="M 13.6700336700337 10.4646464646465  C 13.8900112233446 10.6846240179573  14 10.9517396184063  14 11.2659932659933  C 14 11.5802469135802  13.8900112233446 11.8473625140292  13.6700336700337 12.0673400673401  L 12.0673400673401 13.6700336700337  C 11.8473625140292 13.8900112233446  11.5802469135802 14  11.2659932659933 14  C 10.9517396184063 14  10.6846240179574 13.8900112233446  10.4646464646465 13.6700336700337  L 7 10.2053872053872  L 3.53535353535354 13.6700336700337  C 3.31537598204265 13.8900112233446  3.04826038159371 14  2.73400673400673 14  C 2.41975308641975 14  2.15263748597082 13.8900112233446  1.93265993265993 13.6700336700337  L 0.32996632996633 12.0673400673401  C 0.109988776655443 11.8473625140292  0 11.5802469135802  0 11.2659932659933  C 0 10.9517396184063  0.109988776655443 10.6846240179573  0.32996632996633 10.4646464646465  L 3.79461279461279 7  L 0.32996632996633 3.53535353535353  C 0.109988776655443 3.31537598204265  0 3.04826038159371  0 2.73400673400673  C 0 2.41975308641975  0.109988776655443 2.15263748597082  0.32996632996633 1.93265993265993  L 1.93265993265993 0.32996632996633  C 2.15263748597082 0.109988776655443  2.41975308641975 0  2.73400673400673 0  C 3.04826038159371 0  3.31537598204265 0.109988776655443  3.53535353535354 0.32996632996633  L 7 3.79461279461279  L 10.4646464646465 0.32996632996633  C 10.6846240179574 0.109988776655443  10.9517396184063 0  11.2659932659933 0  C 11.5802469135802 0  11.8473625140292 0.109988776655443  12.0673400673401 0.32996632996633  L 13.6700336700337 1.93265993265993  C 13.8900112233446 2.15263748597082  14 2.41975308641975  14 2.73400673400673  C 14 3.04826038159371  13.8900112233446 3.31537598204265  13.6700336700337 3.53535353535353  L 10.2053872053872 7  L 13.6700336700337 10.4646464646465  Z " fill-rule="nonzero" fill="#d7d7d7" stroke="none" transform="matrix(1 0 0 1 1244 8602 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/cross-icon.png
+++ b/src/assets/img/edit/cross-icon.png
--- a/src/assets/img/edit/cross.svg
+++ b/src/assets/img/edit/cross.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter19">
+      <feColorMatrix type="matrix" values="1 0 0 0 0.355555555555556  0 1 0 0 0.355555555555556  0 0 1 0 0.355555555555556  0 0 0 1 0  " in="SourceGraphic" />
+    </filter>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1760 -6439 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="12" height="12" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJBQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwyGIIwAAAC90Uk5TABNKPQQKSVMVTO/OIjDc4iMx7esMS+Mk7CrMvgHWGB/f2BoZF8sDIFI7Cbw6PCsDqUolAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAASAAAAEgARslrPgAAAX9JREFUWMPtlttWwjAQRSOFilVpK1i8gHgDFdH5/78zNaRNmzTJmeWjeZp0rb2TQpM5QvzBOBklY5yapKdTVZ1lROcXKH85I8rS3/UlT5QXGF9e1dR8IctrItygeKJE1okqqVoC+785QrdyMr6DDQ1/v6qnRU7YW+j90/pBPdg8Qnto1n961o8gg4OHDE4eMAzw0YZBPtLg4aMMXj7CEOCDhiAfMETwXkMU7zFE8oOGln8RgmEAeKcB4h0GkLcMMN8zMPiOgcXLe7LShv79B++Btb5twPmugcMbvwOtXzl8+/9BXc/F8wwmzzF0edzQ9s/8WGD5wfh+wc5r8XDvtniGwTp/7PzQfL/M/GB8/6z80Dk/jPzQO39wfrDOL5gfHOcfyg/O+wPIDwP3z39+8Bqi+WB+CPKB/BDBu/ID2j+XTect6ulkBvKGYbuTsxG0fzXe9FuUcvKOrm/u4UPW0wzntaHa13U6J/oEedm7t5I/qHrx9b1CeSF25WGPU/b4AazFu1v2/ZorAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTExLTE0VDE5OjI3OjEzKzA4OjAwWwLoYgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0xMS0xNFQxOToyNzoxMyswODowMCpfUN4AAABJdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uXzZibmxndG1jdXh0L2d1YW5iaS5zdmeJnhE5AAAAAElFTkSuQmCC" x="1760px" y="6439px" filter="url(#filter19)" />
+  </g>
+</svg>
--- a/src/assets/img/edit/diamond-selected.svg
+++ b/src/assets/img/edit/diamond-selected.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -757 -976 )">
+    <path d="M 8.33333333333333 15.4947916666667  C 8.55902777777778 15.4947916666667  8.75434027777778 15.4123263888889  8.91927083333333 15.2473958333333  L 16.9140625 7.25260416666667  C 17.0789930555556 7.08767361111111  17.1614583333333 6.89236111111111  17.1614583333333 6.66666666666667  C 17.1614583333333 6.44097222222222  17.0789930555556 6.24565972222222  16.9140625 6.08072916666667  L 15.5859375 4.75260416666667  C 15.4210069444444 4.58767361111111  15.2256944444444 4.50520833333333  15 4.50520833333333  C 14.7743055555556 4.50520833333333  14.5789930555556 4.58767361111111  14.4140625 4.75260416666667  L 8.33333333333333 10.8333333333333  L 5.5859375 8.0859375  C 5.42100694444445 7.92100694444444  5.22569444444445 7.83854166666667  5 7.83854166666667  C 4.77430555555556 7.83854166666667  4.57899305555556 7.92100694444444  4.4140625 8.0859375  L 3.0859375 9.4140625  C 2.92100694444444 9.57899305555556  2.83854166666667 9.77430555555556  2.83854166666667 10  C 2.83854166666667 10.2256944444444  2.92100694444444 10.4210069444444  3.0859375 10.5859375  L 7.74739583333333 15.2473958333333  C 7.91232638888889 15.4123263888889  8.10763888888889 15.4947916666667  8.33333333333333 15.4947916666667  Z M 18.8997395833333 1.10026041666667  C 19.6332465277778 1.83376736111111  20 2.71701388888889  20 3.75  L 20 16.25  C 20 17.2829861111111  19.6332465277778 18.1662326388889  18.8997395833333 18.8997395833333  C 18.1662326388889 19.6332465277778  17.2829861111111 20  16.25 20  L 3.75 20  C 2.71701388888889 20  1.83376736111111 19.6332465277778  1.10026041666667 18.8997395833333  C 0.366753472222222 18.1662326388889  0 17.2829861111111  0 16.25  L 0 3.75  C 0 2.71701388888889  0.366753472222222 1.83376736111111  1.10026041666667 1.10026041666667  C 1.83376736111111 0.366753472222221  2.71701388888889 0  3.75 0  L 16.25 0  C 17.2829861111111 0  18.1662326388889 0.366753472222221  18.8997395833333 1.10026041666667  Z " fill-rule="nonzero" fill="#62b1ff" stroke="none" transform="matrix(1 0 0 1 757 976 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/diamond-unselected.svg
+++ b/src/assets/img/edit/diamond-unselected.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1207 -976 )">
+    <path d="M 17.5142045454545 2.48579545454545  C 17.0691287878788 2.0407196969697  16.5340909090909 1.81818181818182  15.9090909090909 2  L 4.09090909090909 2  C 3.46590909090909 1.81818181818182  2.93087121212121 2.0407196969697  2.48579545454545 2.48579545454545  C 2.0407196969697 2.93087121212121  1.81818181818182 3.46590909090909  2 4.09090909090909  L 2 15.9090909090909  C 1.81818181818182 16.5340909090909  2.0407196969697 17.0691287878788  2.48579545454545 17.5142045454545  C 2.93087121212121 17.9592803030303  3.46590909090909 18.1818181818182  4.09090909090909 18  L 15.9090909090909 18  C 16.5340909090909 18.1818181818182  17.0691287878788 17.9592803030303  17.5142045454545 17.5142045454545  C 17.9592803030303 17.0691287878788  18.1818181818182 16.5340909090909  18 15.9090909090909  L 18 4.09090909090909  C 18.1818181818182 3.46590909090909  17.9592803030303 2.93087121212121  17.5142045454545 2.48579545454545  Z M 18.7997159090909 1.20028409090909  C 19.5999053030303 2.00047348484848  20 2.96401515151515  20 4.09090909090909  L 20 15.9090909090909  C 20 17.0359848484848  19.5999053030303 17.9995265151515  18.7997159090909 18.7997159090909  C 17.9995265151515 19.5999053030303  17.0359848484849 20  15.9090909090909 20  L 4.09090909090909 20  C 2.96401515151515 20  2.00047348484849 19.5999053030303  1.20028409090909 18.7997159090909  C 0.400094696969697 17.9995265151515  0 17.0359848484848  0 15.9090909090909  L 0 4.09090909090909  C 0 2.96401515151515  0.400094696969697 2.00047348484848  1.20028409090909 1.20028409090909  C 2.00047348484849 0.400094696969695  2.96401515151515 0  4.09090909090909 0  L 15.9090909090909 0  C 17.0359848484849 0  17.9995265151515 0.400094696969695  18.7997159090909 1.20028409090909  Z " fill-rule="nonzero" fill="#d7d7d7" stroke="none" transform="matrix(1 0 0 1 1207 976 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/disabled-icon.svg
+++ b/src/assets/img/edit/disabled-icon.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1247 -6282 )">
+    <path d="M 7 10.8463541666667  C 7.15798611111111 10.8463541666667  7.29470486111111 10.7886284722222  7.41015625 10.6731770833333  L 11.5481770833333 6.53515625  C 11.6636284722222 6.41970486111111  11.7213541666667 6.28298611111111  11.7213541666667 6.125  C 11.7213541666667 5.96701388888889  11.6636284722222 5.83029513888889  11.5481770833333 5.71484375  L 10.6184895833333 4.78515625  C 10.5030381944444 4.66970486111111  10.3663194444444 4.61197916666667  10.2083333333333 4.61197916666667  C 10.0503472222222 4.61197916666667  9.91362847222222 4.66970486111111  9.79817708333333 4.78515625  L 7 7.58333333333333  L 4.20182291666667 4.78515625  C 4.08637152777778 4.66970486111111  3.94965277777778 4.61197916666667  3.79166666666667 4.61197916666667  C 3.63368055555556 4.61197916666667  3.49696180555556 4.66970486111111  3.38151041666667 4.78515625  L 2.45182291666667 5.71484375  C 2.33637152777778 5.83029513888889  2.27864583333333 5.96701388888889  2.27864583333333 6.125  C 2.27864583333333 6.28298611111111  2.33637152777778 6.41970486111111  2.45182291666667 6.53515625  L 6.58984375 10.6731770833333  C 6.70529513888889 10.7886284722222  6.84201388888889 10.8463541666667  7 10.8463541666667  Z M 13.0611979166667 3.486328125  C 13.6870659722222 4.55881076388889  14 5.73003472222222  14 7  C 14 8.26996527777778  13.6870659722222 9.44118923611111  13.0611979166667 10.513671875  C 12.4353298611111 11.5861545138889  11.5861545138889 12.4353298611111  10.513671875 13.0611979166667  C 9.44118923611111 13.6870659722222  8.26996527777778 14  7 14  C 5.73003472222222 14  4.55881076388889 13.6870659722222  3.486328125 13.0611979166667  C 2.41384548611111 12.4353298611111  1.56467013888889 11.5861545138889  0.938802083333333 10.513671875  C 0.312934027777778 9.44118923611111  0 8.26996527777778  0 7  C 0 5.73003472222222  0.312934027777778 4.55881076388889  0.938802083333333 3.486328125  C 1.56467013888889 2.41384548611111  2.41384548611111 1.56467013888889  3.486328125 0.938802083333333  C 4.55881076388889 0.312934027777777  5.73003472222222 0  7 0  C 8.26996527777778 0  9.44118923611111 0.312934027777777  10.513671875 0.938802083333333  C 11.5861545138889 1.56467013888889  12.4353298611111 2.41384548611111  13.0611979166667 3.486328125  Z " fill-rule="nonzero" fill="#d7d7d7" stroke="none" transform="matrix(1 0 0 1 1247 6282 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/fail-btn-icon.svg
+++ b/src/assets/img/edit/fail-btn-icon.svg
@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter928">
+      <feColorMatrix type="matrix" values="1 0 0 0 1  0 1 0 0 1  0 0 1 0 1  0 0 0 1 0  " in="SourceGraphic" />
+    </filter>
+  </defs>
+  <g transform="matrix(1 0 0 1 -994 -11549 )">
+    <image preserveAspectRatio="none" style="overflow:visible" width="24" height="24" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAyKADAAQAAAABAAAAyAAAAACbWz2VAAAKTElEQVR4Ae2dzWtUVxTAnWQYgzSF2hAKKYpQ2y5aW0vNkJDowk2xrSUS7Id2L4VAiS2lVKir0hYshdD+BVIsZOXCgiJYEyNjiptCN1L8gIjF0I3o6DjJ9LxqMJlM7rx3733zcc9PCJl595777vmd8+PNV5xMpVLpXMc/CECgJoGOmkc5CAEI/E8AQWgECBgIIIgBDkMQQBB6AAIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCAIAY4DEEAQegBCBgIIIgBDkMQQBB6AAIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCAIAY4DEEAQegBCBgIIIgBDkMQQBB6AAIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCAIAY4DEEAQegBCBgIIIgBDkMQQBB6AAIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCAIAY4DEEAQegBCBgIIIgBDkMQQBB6AAIGAghigMMQBBCEHoCAgQCCGOAwBAEEoQcgYCCQNYwxFBCBiYmJ7OTk5KZyubwlSiubzV4dHR29MTY2Vg4oTe+pZCqVSqf3VVmwZQjs2bNn4/z8/GGp8yfy0718Y5lM5o78/NzT03Ps1KlT/y4f4/YjAggScCcMDQ3tvH///i+S4nN10rzV1dX10fT09Pk689QNI0igJR8eHh4oFotnJb1czBRLuVzug5mZmZMx56uYxpP0AMs8MjLSLXIcl9TiyhFRyJVKpRODg4N7A0RinRKCWKNr3cC5ubnDsrvNFjtEkipoCFIFpN3vjo+P5xYXFw855IEky+AhyDIYIdwsFAo7JI8ex1yQ5DFABHHspFYLl/c5tnraE5IISATx1E2BLqNeEgQJrLPlHfIrnlNSLQmCeO6mZi+Xz+dnZQ/znvehVhLeKPTcSa2wXH9//1F5JetICntR92YiV5AUuqjZS/b19R2TPVxPYR/qriRcQVLoolZY0uKjJkm2reZKwhUkSVu00dypqamL0WerZMulFLat5kqCICl0T6ssGX3wEEncqoEgbvxaPhpJ3EqEIG782iIaSezLhCD27NoqEknsyoUgdtzaMgpJkpcNQZIza+sIJElWPgRJxiuI2UgSv4wIEp9VUDORJF45ESQepyBnIUn9siJIfUZBz0ASc3kRxMxHxSiSrF1mBFmbjaoRJKldbgSpzUXlUSRZXXYEWc1E9REkWVl+BFnJg3tCAEmetAGCPGHBrWUEkOQRDARZ1hTcXEkASfh/sVZ2BPdWEdAuCVeQVS3BgWoCmiVBkOpu4H5NAlolQZCa7cDBWgQ0SoIgtTqBY2sS0CYJgqzZCgysRUCTJAiyVhdw3EhAiyQIYmwDBk0ENEiCIKYOYKwugdAlQZC6LcCEegRClgRB6lWf8VgEQpUEQWKVn0lxCIQoCYLEqTxzYhMITRIEiV16JsYlEJIkCBK36sxLRCAUSRAkUdmZnIRACJIgSJKKMzcxgXaXJLXvKNy/f/9TN2/efKNcLm/MZDLZxGQJCIrAwsLCm/LNu59KUmn0QmrfmehdkF27dm0rFosHBMZ7AuOFoKpMMq1MYKGjo+OLS5cu/ehzk14FGRgYOChXjM8qlcorPjfJWhCISaAikkyIJOMx59ed5k2QfD5/UC6j38sZe+uelQkQSI9ApbOz85tCofC1j1N4eZIu38n9usgRWYscPqrCGi4EMtKLn+/cuXPIZZGlWC+CPHjw4ENZcNvSovyGQJMJ5O7du/etjz04C7Jv375n5Qn52z42wxoQ8Ehgx+7du593Xc9ZkNu3b78om3jZdSPEQ8Azgc67d+++47qmsyDyqlWf6yaIh0AaBOS5yKuu6zoLIi/pZlw3QTwEWpWAsyDZbHauVZNjX7oJyMu9f7oScBZkw4YNf8sm/nLdCPEQ8Eyg3N3d/Zvrms6CnD59+h9599J5I66JEA+BKgJ/nDlz5nrVscR3nQWJzihXkV/lA4mXE5+dAAikQ6C0fv36r3ws7UWQc+fOXZbnIhOyIZ6P+KgKa7gQiD6PdezChQu/uyyyFOvts1jRgvJhxY8fPnwYfaT5taUT8BsCDSRQkUcyP83OzkY96OWfV0GiHQ0NDW0vlUrvy8u/78rPS152ySIQqE9gQV61+lI+pPhD/anxZ3gXZOnUBw4cePratWvb5c2aZ/iDqSUqen9LH/AHU3rLT+YmAoODg3vlUcUJmZMzzbMcS+2vCaP9eHmSbpkYYQoItLMcUXkQREGTNivFdpcDQZrVOQrOG4IcCKKgUZuRYihyIEgzuifwc4YkB4IE3qyNTi80ORCk0R0U8PlClANBAm7YRqYWqhwI0sguCvRcIcuBIIE2baPSCl0OBGlUJwV4Hg1yIEiAjduIlLTIgSCN6KbAzqFJDgQJrHnTTkebHAiSdkcFtL5GORAkoAZOMxWtciBIml0VyNqa5UCQQJo4rTS0y4EgaXVWAOsix6Mi8heFATSz7xSQ4wlRBHnCgltCADlWtgGCrOSh+h5yrC4/gqxmovIIctQuO4LU5qLqKHKsXW4EWZuNihHkMJcZQcx8gh5FjvrlRZD6jIKcgRzxyoog8TgFNQs54pcTQeKzCmImciQrI4Ik49XWs5EjefkQJDmztoxADruyIYgdt7aKQg77ciGIPbu2iEQOtzIhiBu/lo5GDvfypPYdhe5bYwUXAsPDwwPFYvGsrNF2X3vmkrfvWK4gvom2wHojIyPdIsdx2QpyONYDQRwBtmL43NzcYdnX5hT2luoXZqawX+clEcQZYWstMD4+nltcXDyUwq7UyRExRJAUOqmZSxYKhR1y/h7Pe1ApR8QQQTx3UrOXK5fLWz3vQa0cEUcE8dxNgS2nWg4ECaybo3Sy2ewVT2mplyPiyBXEUze1yjL5fH5W9jLvuB/keAyQNwodO6kVw/v7+4/KK1lHLPeGHMvAcQVZBiOUm319fcckl+sW+SBHFTSuIFVAQrlr8VET5KhRfK4gNaCEcGhqaupiV1fXW5LLrRj53IrmzszMnIwxV9UUBAm43NPT0+d7e3u3dXR0fJfJZO5Upxodi8aiOdHc6nHur1vHQywlXTAxMZGdnJzcJG8kbolSlpeDr46Ojt4YGxsrK0FglSaCWGEjSAsBHmJpqTR5WhFAECtsBGkhgCBaKk2eVgQQxAobQVoIIIiWSpOnFQEEscJGkBYCCKKl0uRpRQBBrLARpIUAgmipNHlaEUAQK2wEaSGAIFoqTZ5WBBDEChtBWgggiJZKk6cVAQSxwkaQFgIIoqXS5GlFAEGssBGkhQCCaKk0eVoRQBArbARpIYAgWipNnlYEEMQKG0FaCCCIlkqTpxUBBLHCRpAWAgiipdLkaUUAQaywEaSFAIJoqTR5WhFAECtsBGkhgCBaKk2eVgQQxAobQVoIIIiWSpOnFQEEscJGkBYCCKKl0uRpRQBBrLARpIUAgmipNHlaEUAQK2wEaSGAIFoqTZ5WBBDEChtBWgggiJZKk6cVAQSxwkaQFgIIoqXS5GlFAEGssBGkhcB/SaFFDUmhGzIAAAAASUVORK5CYII=" x="994px" y="11549px" filter="url(#filter928)" />
+  </g>
+</svg>
--- a/src/assets/img/edit/fail-icon.png
+++ b/src/assets/img/edit/fail-icon.png
--- a/src/assets/img/edit/hint-icon.png
+++ b/src/assets/img/edit/hint-icon.png
--- a/src/assets/img/edit/how-img.svg
+++ b/src/assets/img/edit/how-img.svg
--- a/src/assets/img/edit/img.png
+++ b/src/assets/img/edit/img.png
--- a/src/assets/img/edit/learn-more-icon.svg
+++ b/src/assets/img/edit/learn-more-icon.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -535 -572 )">
+    <path d="M 7 13.3958333333333  C 7.18055555555556 13.3958333333333  7.33680555555556 13.3298611111111  7.46875 13.1979166666667  L 12.1979166666667 8.46875  C 12.3298611111111 8.33680555555555  12.3958333333333 8.18055555555555  12.3958333333333 8  C 12.3958333333333 7.81944444444444  12.3298611111111 7.66319444444444  12.1979166666667 7.53125  L 7.46875 2.80208333333333  C 7.33680555555556 2.67013888888889  7.18055555555556 2.60416666666667  7 2.60416666666667  C 6.81944444444445 2.60416666666667  6.66319444444445 2.67013888888889  6.53125 2.80208333333333  L 5.46875 3.86458333333333  C 5.33680555555556 3.99652777777778  5.27083333333333 4.15277777777778  5.27083333333333 4.33333333333333  C 5.27083333333333 4.51388888888889  5.33680555555556 4.67013888888889  5.46875 4.80208333333333  L 8.66666666666667 8  L 5.46875 11.1979166666667  C 5.33680555555556 11.3298611111111  5.27083333333333 11.4861111111111  5.27083333333333 11.6666666666667  C 5.27083333333333 11.8472222222222  5.33680555555556 12.0034722222222  5.46875 12.1354166666667  L 6.53125 13.1979166666667  C 6.66319444444445 13.3298611111111  6.81944444444445 13.3958333333333  7 13.3958333333333  Z M 14.9270833333333 3.984375  C 15.6423611111111 5.21006944444444  16 6.54861111111111  16 8  C 16 9.45138888888889  15.6423611111111 10.7899305555556  14.9270833333333 12.015625  C 14.2118055555556 13.2413194444444  13.2413194444444 14.2118055555556  12.015625 14.9270833333333  C 10.7899305555556 15.6423611111111  9.45138888888889 16  8 16  C 6.54861111111111 16  5.21006944444444 15.6423611111111  3.984375 14.9270833333333  C 2.75868055555556 14.2118055555556  1.78819444444444 13.2413194444444  1.07291666666667 12.015625  C 0.357638888888889 10.7899305555556  0 9.45138888888889  0 8  C 0 6.54861111111111  0.357638888888889 5.21006944444444  1.07291666666667 3.984375  C 1.78819444444444 2.75868055555556  2.75868055555556 1.78819444444444  3.984375 1.07291666666667  C 5.21006944444444 0.357638888888888  6.54861111111111 0  8 0  C 9.45138888888889 0  10.7899305555556 0.357638888888888  12.015625 1.07291666666667  C 13.2413194444444 1.78819444444444  14.2118055555556 2.75868055555556  14.9270833333333 3.984375  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 535 572 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/location-icon.png
+++ b/src/assets/img/edit/location-icon.png
--- a/src/assets/img/edit/logo-text.png
+++ b/src/assets/img/edit/logo-text.png
--- a/src/assets/img/edit/logo.png
+++ b/src/assets/img/edit/logo.png
--- a/src/assets/img/edit/media-add.svg
+++ b/src/assets/img/edit/media-add.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -779 -2179 )">
+    <path d="M 15.6818181818182 6.13636363636364  C 15.8939393939394 6.34848484848485  16 6.60606060606061  16 6.90909090909091  L 16 9.09090909090909  C 16 9.39393939393939  15.8939393939394 9.65151515151515  15.6818181818182 9.86363636363636  C 15.469696969697 10.0757575757576  15.2121212121212 10.1818181818182  14.9090909090909 10.1818181818182  L 10.1818181818182 10.1818181818182  L 10.1818181818182 14.9090909090909  C 10.1818181818182 15.2121212121212  10.0757575757576 15.469696969697  9.86363636363636 15.6818181818182  C 9.65151515151515 15.8939393939394  9.39393939393939 16  9.09090909090909 16  L 6.90909090909091 16  C 6.60606060606061 16  6.34848484848485 15.8939393939394  6.13636363636364 15.6818181818182  C 5.92424242424242 15.469696969697  5.81818181818182 15.2121212121212  5.81818181818182 14.9090909090909  L 5.81818181818182 10.1818181818182  L 1.09090909090909 10.1818181818182  C 0.787878787878788 10.1818181818182  0.53030303030303 10.0757575757576  0.318181818181818 9.86363636363636  C 0.106060606060606 9.65151515151515  0 9.39393939393939  0 9.09090909090909  L 0 6.90909090909091  C 0 6.60606060606061  0.106060606060606 6.34848484848485  0.318181818181818 6.13636363636364  C 0.53030303030303 5.92424242424242  0.787878787878788 5.81818181818182  1.09090909090909 5.81818181818182  L 5.81818181818182 5.81818181818182  L 5.81818181818182 1.09090909090909  C 5.81818181818182 0.787878787878787  5.92424242424242 0.530303030303029  6.13636363636364 0.318181818181818  C 6.34848484848485 0.106060606060606  6.60606060606061 0  6.90909090909091 0  L 9.09090909090909 0  C 9.39393939393939 0  9.65151515151515 0.106060606060606  9.86363636363636 0.318181818181818  C 10.0757575757576 0.530303030303029  10.1818181818182 0.787878787878787  10.1818181818182 1.09090909090909  L 10.1818181818182 5.81818181818182  L 14.9090909090909 5.81818181818182  C 15.2121212121212 5.81818181818182  15.469696969697 5.92424242424242  15.6818181818182 6.13636363636364  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 779 2179 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/play-icon.svg
+++ b/src/assets/img/edit/play-icon.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -626 -8420 )">
+    <path d="M 4.98046875 1.34114583333333  C 6.51258680555556 0.447048611111109  8.18576388888889 0  10 0  C 11.8142361111111 0  13.4874131944444 0.447048611111109  15.01953125 1.34114583333333  C 16.5516493055556 2.23524305555555  17.7647569444444 3.44835069444444  18.6588541666667 4.98046875  C 19.5529513888889 6.51258680555555  20 8.18576388888889  20 10  C 20 11.8142361111111  19.5529513888889 13.4874131944444  18.6588541666667 15.01953125  C 17.7647569444444 16.5516493055556  16.5516493055556 17.7647569444444  15.01953125 18.6588541666667  C 13.4874131944444 19.5529513888889  11.8142361111111 20  10 20  C 8.18576388888889 20  6.51258680555556 19.5529513888889  4.98046875 18.6588541666667  C 3.44835069444444 17.7647569444444  2.23524305555556 16.5516493055556  1.34114583333333 15.01953125  C 0.447048611111111 13.4874131944444  0 11.8142361111111  0 10  C 0 8.18576388888889  0.447048611111111 6.51258680555555  1.34114583333333 4.98046875  C 2.23524305555556 3.44835069444444  3.44835069444444 2.23524305555555  4.98046875 1.34114583333333  Z M 7.91666666666667 14.8828125  L 15 10.7161458333333  C 15.2777777777778 10.5598958333333  15.4166666666667 10.3211805555556  15.4166666666667 10  C 15.4166666666667 9.67881944444444  15.2777777777778 9.44010416666667  15 9.28385416666667  L 7.91666666666667 5.1171875  C 7.64756944444445 4.95225694444444  7.36979166666667 4.94791666666667  7.08333333333333 5.10416666666667  C 6.80555555555556 5.26909722222222  6.66666666666667 5.51215277777778  6.66666666666667 5.83333333333333  L 6.66666666666667 14.1666666666667  C 6.66666666666667 14.4878472222222  6.80555555555556 14.7309027777778  7.08333333333333 14.8958333333333  C 7.22222222222222 14.9652777777778  7.36111111111111 15  7.5 15  C 7.64756944444445 15  7.78645833333333 14.9609375  7.91666666666667 14.8828125  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 626 8420 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/star-icon.png
+++ b/src/assets/img/edit/star-icon.png
--- a/src/assets/img/edit/succeed-pop-bj.svg
+++ b/src/assets/img/edit/succeed-pop-bj.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="460px" height="447px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask fill="white" id="clip931">
+      <path d="M 0 427.522875816993  L 0 0  C 0 0  97.5347125892818 37.5301724081448  230.92 37.0065359477124  C 355.131169600606 36.5189147230747  460 0  460 0  L 460 427.522875816993  C 460 438.430065359478  451.904 447  441.6 447  L 18.4 447  C 8.09600000000001 447  0 438.430065359478  0 427.522875816993  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -1111 -10299 )">
+    <path d="M 0 427.522875816993  L 0 0  C 0 0  97.5347125892818 37.5301724081448  230.92 37.0065359477124  C 355.131169600606 36.5189147230747  460 0  460 0  L 460 427.522875816993  C 460 438.430065359478  451.904 447  441.6 447  L 18.4 447  C 8.09600000000001 447  0 438.430065359478  0 427.522875816993  Z " fill-rule="nonzero" fill="#f6f6f6" stroke="none" transform="matrix(1 0 0 1 1111 10299 )" />
+    <path d="M 0 427.522875816993  L 0 0  C 0 0  97.5347125892818 37.5301724081448  230.92 37.0065359477124  C 355.131169600606 36.5189147230747  460 0  460 0  L 460 427.522875816993  C 460 438.430065359478  451.904 447  441.6 447  L 18.4 447  C 8.09600000000001 447  0 438.430065359478  0 427.522875816993  Z " stroke-width="2" stroke="#ebebeb" fill="none" transform="matrix(1 0 0 1 1111 10299 )" mask="url(#clip931)" />
+  </g>
+</svg>
--- a/src/assets/img/edit/succeed-pop-bj1.svg
+++ b/src/assets/img/edit/succeed-pop-bj1.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="460px" height="500px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <mask fill="white" id="clip929">
+      <path d="M 0 478.213507625273  L 0 0  C 0 0  96.5238034983727 31.8584503828297  229.909090909091 31.2727272727261  C 354.120260509697 30.727289661274  460 0  460 0  L 460 478.213507625273  C 460 490.413943355121  451.904 500  441.6 500  L 18.4 500  C 8.096 500  0 490.413943355121  0 478.213507625273  Z " fill-rule="evenodd" />
+    </mask>
+  </defs>
+  <g transform="matrix(1 0 0 1 -361 -10296 )">
+    <path d="M 0 478.213507625273  L 0 0  C 0 0  96.5238034983727 31.8584503828297  229.909090909091 31.2727272727261  C 354.120260509697 30.727289661274  460 0  460 0  L 460 478.213507625273  C 460 490.413943355121  451.904 500  441.6 500  L 18.4 500  C 8.096 500  0 490.413943355121  0 478.213507625273  Z " fill-rule="nonzero" fill="#f6f6f6" stroke="none" transform="matrix(1 0 0 1 361 10296 )" />
+    <path d="M 0 478.213507625273  L 0 0  C 0 0  96.5238034983727 31.8584503828297  229.909090909091 31.2727272727261  C 354.120260509697 30.727289661274  460 0  460 0  L 460 478.213507625273  C 460 490.413943355121  451.904 500  441.6 500  L 18.4 500  C 8.096 500  0 490.413943355121  0 478.213507625273  Z " stroke-width="2" stroke="#ebebeb" fill="none" transform="matrix(1 0 0 1 361 10296 )" mask="url(#clip929)" />
+  </g>
+</svg>
--- a/src/assets/img/edit/successfully-ticked.png
+++ b/src/assets/img/edit/successfully-ticked.png
--- a/src/assets/img/edit/thin-arrow-disabled.svg
+++ b/src/assets/img/edit/thin-arrow-disabled.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="7px" height="10px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -706 -6478 )">
+    <path d="M 6.87972508591065 4.76953907815631  C 6.95990836197022 4.83633934535738  7 4.91315965263861  7 5  C 7 5.08684034736139  6.95990836197022 5.16366065464262  6.87972508591065 5.23046092184369  L 1.27491408934708 9.8997995991984  C 1.19473081328751 9.96659986639947  1.10252004581901 10  0.998281786941581 10  C 0.894043528064147 10  0.801832760595647 9.96659986639947  0.721649484536082 9.8997995991984  L 0.120274914089347 9.39879759519038  C 0.0400916380297824 9.33199732798931  0 9.25517702070808  0 9.16833667334669  C 0 9.0814963259853  0.0400916380297824 9.00467601870407  0.120274914089347 8.93787575150301  L 4.84707903780069 5  L 0.120274914089347 1.06212424849699  C 0.0400916380297824 0.995323981295925  0 0.918503674014696  0 0.831663326653307  C 0 0.744822979291916  0.0400916380297824 0.668002672010687  0.120274914089347 0.601202404809619  L 0.721649484536082 0.100200400801603  C 0.801832760595647 0.0334001336005341  0.894043528064147 0  0.998281786941581 0  C 1.10252004581901 0  1.19473081328751 0.0334001336005341  1.27491408934708 0.100200400801603  L 6.87972508591065 4.76953907815631  Z " fill-rule="nonzero" fill="#aaaaaa" stroke="none" transform="matrix(1 0 0 1 706 6478 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/thin-arrow.svg
+++ b/src/assets/img/edit/thin-arrow.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="7px" height="10px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1156 -5945 )">
+    <path d="M 6.87972508591065 4.76953907815631  C 6.95990836197022 4.83633934535738  7 4.91315965263861  7 5  C 7 5.08684034736139  6.95990836197022 5.16366065464262  6.87972508591065 5.23046092184369  L 1.27491408934708 9.8997995991984  C 1.19473081328751 9.96659986639947  1.10252004581901 10  0.998281786941581 10  C 0.894043528064147 10  0.801832760595647 9.96659986639947  0.721649484536082 9.8997995991984  L 0.120274914089347 9.39879759519038  C 0.0400916380297824 9.33199732798931  0 9.25517702070808  0 9.16833667334669  C 0 9.0814963259853  0.0400916380297824 9.00467601870407  0.120274914089347 8.93787575150301  L 4.84707903780069 5  L 0.120274914089347 1.06212424849699  C 0.0400916380297824 0.995323981295925  0 0.918503674014696  0 0.831663326653307  C 0 0.744822979291916  0.0400916380297824 0.668002672010687  0.120274914089347 0.601202404809619  L 0.721649484536082 0.100200400801603  C 0.801832760595647 0.0334001336005341  0.894043528064147 0  0.998281786941581 0  C 1.10252004581901 0  1.19473081328751 0.0334001336005341  1.27491408934708 0.100200400801603  L 6.87972508591065 4.76953907815631  Z " fill-rule="nonzero" fill="#62b1ff" stroke="none" transform="matrix(1 0 0 1 1156 5945 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/tick.svg
+++ b/src/assets/img/edit/tick.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -540 -5254 )">
+    <path d="M 13.1875 6.78125  C 13.3125 6.65625  13.375 6.5  13.375 6.3125  C 13.375 6.11805555555556  13.3125 5.95833333333333  13.1875 5.83333333333333  L 12.2395833333333 4.89583333333333  C 12.1076388888889 4.76388888888889  11.9513888888889 4.69791666666667  11.7708333333333 4.69791666666667  C 11.5902777777778 4.69791666666667  11.4340277777778 4.76388888888889  11.3020833333333 4.89583333333333  L 7.05208333333333 9.13541666666667  L 4.69791666666667 6.78125  C 4.56597222222222 6.64930555555556  4.40972222222222 6.58333333333333  4.22916666666667 6.58333333333333  C 4.04861111111111 6.58333333333333  3.89236111111111 6.64930555555556  3.76041666666667 6.78125  L 2.8125 7.71875  C 2.6875 7.84375  2.625 8.00347222222222  2.625 8.19791666666667  C 2.625 8.38541666666667  2.6875 8.54166666666667  2.8125 8.66666666666667  L 6.58333333333333 12.4375  C 6.71527777777778 12.5694444444444  6.87152777777778 12.6354166666667  7.05208333333333 12.6354166666667  C 7.23958333333333 12.6354166666667  7.39930555555556 12.5694444444444  7.53125 12.4375  L 13.1875 6.78125  Z M 14.9270833333333 3.984375  C 15.6423611111111 5.21006944444444  16 6.54861111111111  16 8  C 16 9.45138888888889  15.6423611111111 10.7899305555556  14.9270833333333 12.015625  C 14.2118055555556 13.2413194444444  13.2413194444444 14.2118055555556  12.015625 14.9270833333333  C 10.7899305555556 15.6423611111111  9.45138888888889 16  8 16  C 6.54861111111111 16  5.21006944444444 15.6423611111111  3.984375 14.9270833333333  C 2.75868055555556 14.2118055555556  1.78819444444444 13.2413194444444  1.07291666666667 12.015625  C 0.357638888888889 10.7899305555556  0 9.45138888888889  0 8  C 0 6.54861111111111  0.357638888888889 5.21006944444444  1.07291666666667 3.984375  C 1.78819444444444 2.75868055555556  2.75868055555556 1.78819444444444  3.984375 1.07291666666667  C 5.21006944444444 0.357638888888888  6.54861111111111 0  8 0  C 9.45138888888889 0  10.7899305555556 0.357638888888888  12.015625 1.07291666666667  C 13.2413194444444 1.78819444444444  14.2118055555556 2.75868055555556  14.9270833333333 3.984375  Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 540 5254 )" />
+  </g>
+</svg>
--- a/src/assets/img/edit/uploading-icon.svg
+++ b/src/assets/img/edit/uploading-icon.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -1005 -3043 )">
+    <path d="M 13.01953125 8.35546875  C 13.13671875 8.48046875  13.1640625 8.6171875  13.1015625 8.765625  C 13.0390625 8.921875  12.921875 9  12.75 9  L 10.5 9  L 10.5 13.125  C 10.5 13.234375  10.46484375 13.32421875  10.39453125 13.39453125  C 10.32421875 13.46484375  10.234375 13.5  10.125 13.5  L 7.875 13.5  C 7.765625 13.5  7.67578125 13.46484375  7.60546875 13.39453125  C 7.53515625 13.32421875  7.5 13.234375  7.5 13.125  L 7.5 9  L 5.25 9  C 5.140625 9  5.05078125 8.96484375  4.98046875 8.89453125  C 4.91015625 8.82421875  4.875 8.734375  4.875 8.625  C 4.875 8.53125  4.9140625 8.4375  4.9921875 8.34375  L 8.73046875 4.60546875  C 8.81640625 4.53515625  8.90625 4.5  9 4.5  C 9.09375 4.5  9.18359375 4.53515625  9.26953125 4.60546875  L 13.01953125 8.35546875  Z M 12.19921875 3.48046875  C 11.22265625 2.91015625  10.15625 2.625  9 2.625  C 7.84375 2.625  6.77734375 2.91015625  5.80078125 3.48046875  C 4.82421875 4.05078125  4.05078125 4.82421875  3.48046875 5.80078125  C 2.91015625 6.77734375  2.625 7.84375  2.625 9  C 2.625 10.15625  2.91015625 11.22265625  3.48046875 12.19921875  C 4.05078125 13.17578125  4.82421875 13.94921875  5.80078125 14.51953125  C 6.77734375 15.08984375  7.84375 15.375  9 15.375  C 10.15625 15.375  11.22265625 15.08984375  12.19921875 14.51953125  C 13.17578125 13.94921875  13.94921875 13.17578125  14.51953125 12.19921875  C 15.08984375 11.22265625  15.375 10.15625  15.375 9  C 15.375 7.84375  15.08984375 6.77734375  14.51953125 5.80078125  C 13.94921875 4.82421875  13.17578125 4.05078125  12.19921875 3.48046875  Z M 16.79296875 4.482421875  C 17.59765625 5.861328125  18 7.3671875  18 9  C 18 10.6328125  17.59765625 12.138671875  16.79296875 13.517578125  C 15.98828125 14.896484375  14.896484375 15.98828125  13.517578125 16.79296875  C 12.138671875 17.59765625  10.6328125 18  9 18  C 7.3671875 18  5.861328125 17.59765625  4.482421875 16.79296875  C 3.103515625 15.98828125  2.01171875 14.896484375  1.20703125 13.517578125  C 0.40234375 12.138671875  0 10.6328125  0 9  C 0 7.3671875  0.40234375 5.861328125  1.20703125 4.482421875  C 2.01171875 3.103515625  3.103515625 2.01171875  4.482421875 1.20703125  C 5.861328125 0.402343749999998  7.3671875 0  9 0  C 10.6328125 0  12.138671875 0.402343749999998  13.517578125 1.20703125  C 14.896484375 2.01171875  15.98828125 3.103515625  16.79296875 4.482421875  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 1005 3043 )" />
+  </g>
+</svg>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/styles/variables.less
+++ b/src/assets/styles/variables.less
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,59 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
--- a/src/components/edit/about-pop.vue
+++ b/src/components/edit/about-pop.vue
@ -0,0 +1,171 @@
+<template>
+    <!-- 关于发布弹窗 -->
+    <div class="flexcenter pop-mask" v-if="popState">
+        <div class="pop about-pop shadow">
+            <div class="about-title">关于发布</div>
+            <div class="about-tab flexacenter">
+                <div class="about-tab-item flexcenter" :class="{ 'pitch': key === tab }" v-for="(value, key) in tabList"
+                    :key="key" @click="cutTab(key)">
+                    {{ value }}
+                </div>
+            </div>
+            <div class="about-list flexflex">
+                <div class="about-list-item" v-for="(item, index) in cutTabArray[tab]" :key="index">
+                    <div v-html="item"></div>
+                </div>
+            </div>
+
+            <div class="close flexcenter" @click="$emit('close')">关闭</div>
+        </div>
+    </div>
+</template>
+  
+<script>
+import { ref, reactive, onMounted, getCurrentInstance, watch, computed } from 'vue';
+
+export default {
+    name: 'GterFangAboutPop',
+    props: ['popState', "intermediary"],
+
+    setup(props) {
+
+        const { proxy } = getCurrentInstance()
+
+        const tabList = {
+            person: "个人账号",
+            intermediary: "中介账号",
+            more: "更多说明",
+        };
+
+        const tab = ref("person"); // person intermediary more
+        
+        computed(() => {
+            if (props['intermediary'] == 1) tab = "intermediary"
+            else tab = "person"
+        })
+
+
+        const cutTabArray = reactive({});
+
+
+        // 监听 prop 变化
+        watch(() => props.popState, (newValue) => {
+            if (newValue && Object.keys(cutTabArray).length === 0) init();
+        });
+
+
+        onMounted(() => {
+        });
+
+        const init = () => {
+            proxy.$post("/tenement/forum/about").then((res) => {
+                cutTabArray['person'] = res.data['person']
+                cutTabArray['intermediary'] = res.data['intermediary']
+                cutTabArray['more'] = res.data['more']
+            });
+        };
+
+        const cutTab = (tabvalue) => {
+            tab.value = tabvalue;
+        };
+
+
+
+
+        console.log("cutTabArray", cutTabArray);
+        return {
+            tabList,
+            tab,
+            cutTabArray,
+            init,
+            cutTab,
+            // popState,
+        };
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.close {
+    height: 50px;
+    width: 180px;
+    border: 1px solid rgba(215, 215, 215, 1);
+    border-radius: 55px;
+    margin: 0 auto;
+    cursor: pointer;
+}
+
+.pop-mask {
+    position: fixed;
+    top: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.698039215686274);
+    z-index: 1000;
+}
+
+.pop {
+    &.about-pop {
+        width: 600px;
+        height: 627px;
+        background: inherit;
+        background-color: rgba(255, 255, 255, 1);
+        border-radius: 20px;
+
+        .about-title {
+            color: #000;
+            font-size: 24px;
+            font-weight: 650;
+            margin: 0 auto;
+            text-align: center;
+            padding: 30px 0;
+        }
+
+        .about-tab {
+            height: 70px;
+            background-color: rgba(246, 246, 246, 1);
+            justify-content: space-around;
+
+            .about-tab-item {
+
+                width: 120px;
+                height: 40px;
+                border-radius: 60px;
+                font-size: 18px;
+                color: #555;
+                cursor: pointer;
+
+                &.pitch {
+                    background: rgba(98, 177, 255, 1);
+                    font-weight: 650;
+                    color: #fff;
+                }
+            }
+
+
+        }
+
+        .about-list {
+            flex-direction: column;
+            color: #555;
+            font-size: 16px;
+            line-height: 30px;
+            padding: 0 30px 0 53px;
+            height: 374px;
+
+            .about-list-item {
+                padding: 30px 0;
+
+                &:not(:last-of-type) {
+                    border-bottom: 1px dashed #ebebeb;
+                }
+
+                b {
+                    color: #000;
+                }
+            }
+        }
+
+    }
+}
+</style>
--- a/src/components/public/head.vue
+++ b/src/components/public/head.vue
@ -0,0 +1,130 @@
+<template>
+    <header class="container-header">
+        <nav class="header-nav flexacenter">
+            <div class="header-nav-item" :class="{ pitch: index == 3 }" v-for="(item, index) in navList" :key="index">
+                {{ item }}</div>
+            <img class="header-nav-item header-user-img"
+                src="https://oss.gter.net/avatar/97KwEWIDY-QTHTXcpEbnWQxaRv6Xz0ll1wRhYWNh/middle?random=1687145465">
+        </nav>
+
+        <div class="logo-box flexacenter">
+            <img class="logo-icon" src="@/assets/img/edit/logo.png" />
+            <img class="logo-text" src="@/assets/img/edit/logo-text.png" />
+        </div>
+
+        <div class="container-header-bj"></div>
+    </header>
+</template>
+
+<script>
+export default {
+    name: 'ZufangHead',
+
+    data() {
+        return {
+            navList: ["寄托首页", "论坛", "Offer榜", "港校租房", "院校库", "兑换店", "搜索", "招生官", "中外合办院校"],
+
+        };
+    },
+
+    mounted() {
+
+    },
+
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="less">
+// 头部是公共的 特殊处理
+.container-header {
+    flex-direction: column;
+    position: relative;
+    height: 260px;
+    margin: 0 auto;
+
+
+    .container-header-bj {
+        width: 100vw;
+        height: 260px;
+        background-image: url('@/assets/img/edit/bj-img1920.png');
+        background-repeat: no-repeat;
+        background-position: center;
+        position: absolute;
+        top: 0;
+
+        &::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 100vw;
+            max-width: 1920px;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.698039215686274);
+        }
+    }
+
+    .header-nav {
+        height: 46px;
+        max-width: 1200px;
+        justify-content: flex-end;
+        margin: 0 auto;
+        position: relative;
+        z-index: 1;
+        cursor: pointer;
+
+        .header-nav-item {
+            color: rgba(215, 215, 215, 0.988235294117647);
+            font-size: 14px;
+            font-weight: 400;
+            margin-left: 24px;
+
+            &.pitch {
+                color: #62B1FF;
+                font-weight: 650;
+                position: relative;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    bottom: -3px;
+                    left: 0;
+                    width: 100%;
+                    height: 3px;
+                    border-radius: 28px;
+                    background-color: rgba(98, 177, 255, 1);
+
+                }
+            }
+        }
+
+        .header-user-img {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+        }
+    }
+
+    .logo-box {
+        position: relative;
+        margin: 21px auto 0;
+        max-width: 1200px;
+        z-index: 1;
+
+        .logo-icon {
+            width: 30px;
+            height: 31px;
+        }
+
+        .logo-text {
+            width: 173px;
+            height: 31px;
+            margin-left: 9px;
+        }
+    }
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import 'element-plus/lib/locale/lang/zh-cn'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+//引入封装Axios请求
+import Axios from '@/utils/axios';
+
+const app = createApp(App)
+
+app.use(store).use(router).use(Axios).use(ElementPlus, {
+    locale: zhCn
+}).mount('#app')
+
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,33 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/about',
+    name: 'about',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  },
+  {
+    path: '/edit',
+    name: 'edit',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/edit.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+export default router
--- a/src/store/index.js
+++ b/src/store/index.js
@ -0,0 +1,14 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@ -0,0 +1,90 @@
+import axios from 'axios';
+import QS from 'qs';
+import router from '../router/index'
+//qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
+//  let protocol = window.location.protocol; //协议
+//  let host = window.location.host; //主机
+//  axios.defaults.baseURL = protocol + "//" + host;
+axios.defaults.baseURL = 'https://app.gter.net'
+
+axios.interceptors.request.use( //响应拦截
+    async config => {
+        // 每次发送请求之前判断vuex中是否存在token        
+        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
+        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
+        config.headers.token = sessionStorage.getItem('token')
+        if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "x2mmnl9grt51bpplj2k6ioiuummzhnw3"
+        return config;
+    },
+    error => {
+        return Promise.error(error);
+    })
+// 响应拦截器
+axios.interceptors.response.use(
+    response => {
+        if (response.status === 200) return Promise.resolve(response); //进行中        
+        else return Promise.reject(response); //失败       
+
+    },
+    // 服务器状态码不是200的情况    
+    error => {
+        if (error.response.status) {
+            switch (error.response.status) {
+                // 401: 未登录                
+                case 401:
+                    break
+                // 403 token过期                
+                // 清除本地token和清空vuex中token对象                
+                // 跳转登录页面                
+                case 403:
+                    router.push('/login')
+                    break
+                // 404请求不存在                
+                case 404:
+                    break;
+                // 其他错误，直接抛出错误提示                
+                default:
+            }
+            return Promise.reject(error.response);
+        }
+    }
+);
+/** 
+ * get方法，对应get请求 
+ * @param {String} url [请求的url地址] 
+ * @param {Object} params [请求时携带的参数] 
+ */
+const $get = (url, params) => {
+    return new Promise((resolve, reject) => {
+        axios.get(url, {
+            params: params,
+        }).then(res => {
+            resolve(res.data);
+        }).catch(err => {
+            reject(err.data)
+        })
+    });
+}
+/** 
+ * post方法，对应post请求 
+ * @param {String} url [请求的url地址] 
+ * @param {Object} params [请求时携带的参数] 
+ */
+const $post = (url, params) => {
+    return new Promise((resolve, reject) => {
+        //是将对象 序列化成URL的形式，以&进行拼接   
+        axios.post(url, QS.stringify(params)).then(res => {
+            resolve(res.data);
+        }).catch(err => {
+            reject(err.data)
+        })
+    });
+}
+//下面是vue3必须加的，vue2不需要，只需要暴露出去get，post方法就可以
+export default {
+    install: (app) => {
+        app.config.globalProperties['$get'] = $get;
+        app.config.globalProperties['$post'] = $post;
+        app.config.globalProperties['$axios'] = axios;
+    }
+}
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -0,0 +1,18 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'HomeView',
+  components: {
+    HelloWorld
+  }
+}
+</script>
--- a/src/views/edit.vue
+++ b/src/views/edit.vue
--- a/vue.config.js
+++ b/vue.config.js
@ -0,0 +1,41 @@
+const { defineConfig } = require('@vue/cli-service')
+const path = require('path')
+
+module.exports = defineConfig({
+  configureWebpack: {
+    resolve: {
+      alias: {
+        '@': path.join(__dirname, './src/')
+      }
+    },
+  },
+
+  css: {
+    loaderOptions: {
+      less: {
+        lessOptions: {
+          // 如果需要在全局引入变量文件，可以在此处添加
+          // modifyVars: {
+          //   '@primary-color': '#1DA57A'
+          // }
+        }
+      }
+    }
+  },
+  pluginOptions: {
+    'style-resources-loader': {
+      preProcessor: 'scss',
+      patterns: []
+    }
+  },
+
+  chainWebpack: config => {
+    config.module
+      .rule('scss')
+      .use('sass-loader')
+      .loader('sass-loader')
+      .end()
+  }
+
+
+})
--- a/yarn.lock
+++ b/yarn.lock