diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..51b7e15
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,11 @@
+# 页面标题
+VUE_APP_TITLE = 海威物联官网
+
+# 开发环境配置
+ENV = 'development'
+
+# 若依管理系统/开发环境
+VUE_APP_BASE_API = '/dev-api'
+
+# 路由懒加载
+VUE_CLI_BABEL_TRANSPILE_MODULES = true
diff --git a/.env.production b/.env.production
new file mode 100644
index 0000000..fe42e55
--- /dev/null
+++ b/.env.production
@@ -0,0 +1,9 @@
+# 页面标题
+VUE_APP_TITLE = 海威物联官网
+
+# 生产环境配置
+ENV = 'production'
+
+# 若依管理系统/生产环境
+VUE_APP_BASE_API = '/prod-api'
+
diff --git a/src/App.vue b/src/App.vue
index 1273865..fc8946e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -23,6 +23,8 @@ body {
   &::-webkit-scrollbar {
     display: none
   }
+
+  margin: 0;
 }
 
 #app {
@@ -31,7 +33,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+  //margin-top: 60px;
 
 }
 
diff --git a/src/components/editEl/editEl1.vue b/src/components/editEl/editEl1.vue
new file mode 100644
index 0000000..1ef6610
--- /dev/null
+++ b/src/components/editEl/editEl1.vue
@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <div class="title">
+      <span contenteditable="true" @blur="edit('title', $event)">
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span contenteditable="true" @blur="edit('subTitle', $event)">
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <template v-for="(i,k) in data.list">
+        <div class="item">
+          <div class="icon">
+            <UploadEl :data="i"/>
+          </div>
+          <div class="itemTitle" contenteditable="true" @blur="edit1('title', k,$event)">{{ i.title }}</div>
+          <div class="itemInfo" contenteditable="true" @blur="edit1('value', k,$event)">{{ i.value }}</div>
+        </div>
+        <br v-if="(k+1)%4===0"/>
+      </template>
+      <div class="item">
+        <div style="width:100%;height:100%;" @click="data.list.push({title:'输入。。。',value:'输入。。。'})">
+          <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 16.7vw"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  name: 'EditEl1',
+  components: {UploadEl},
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    edit(key, e) {
+      console.log(this.$props)
+      this.$props.data[key] = e.target.innerText
+    },
+    edit1(key, index, e) {
+      this.$props.data.list[index][key] = e.target.innerText
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.list {
+  margin-top: 3.9vw;
+  padding-bottom: 5.3vw;
+  text-align: center;
+
+  .item {
+    display: inline-block;
+    width: 14.5vw;
+    height: 16.7vw;
+    border-radius: 5px;
+    box-shadow: 0 0 3px #0002;
+    transition: all 0.2s;
+    vertical-align: top;
+    margin: 0 0.75vw 1vw;
+
+    &:hover {
+      background-color: @standard-color;
+
+      .itemTitle {
+        color: #fff;
+      }
+
+      .itemInfo {
+        color: #fff;
+      }
+    }
+
+    .icon {
+      width: 4vw;
+      height: 4vw;
+      margin-top: 2vw;
+      display: inline-block;
+    }
+
+    .itemTitle {
+      transition: all 0.2s;
+      font-size: 1vw;
+      color: #000;
+      margin-top: 1vw;
+      letter-spacing: 1px;
+    }
+
+    .itemInfo {
+      transition: all 0.2s;
+      display: inline-block;
+      width: 82%;
+      font-size: 0.8vw;
+      color: #666;
+      margin-top: 0.9vw;
+      letter-spacing: 2px;
+      line-height: 1.45vw;
+      text-align: left;
+    }
+  }
+}
+
+
+</style>
diff --git a/src/components/editEl/editEl2.vue b/src/components/editEl/editEl2.vue
new file mode 100644
index 0000000..c6f0ff2
--- /dev/null
+++ b/src/components/editEl/editEl2.vue
@@ -0,0 +1,130 @@
+<template>
+  <div >
+    <div class="title">
+      <span contenteditable="true" @blur="edit('title', $event)">
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span contenteditable="true" @blur="edit('subTitle', $event)">
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="content">
+      <div class="left">
+        <div class="contentSubTitle" contenteditable="true" @blur="edit('contentSubTitle', $event)">
+          {{ data.contentSubTitle }}
+        </div>
+        <div class="contentTitle" contenteditable="true" @blur="edit('contentTitle', $event)">
+          {{ data.contentTitle }}
+        </div>
+        <div class="contentInfo" contenteditable="true" @blur="edit('contentInfo', $event)">
+          {{ data.contentInfo }}
+        </div>
+      </div>
+      <div class="right">
+        <UploadEl :data="{icon:data.image}"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  name: 'EditEl2',
+  props: ['data'],
+  components: {
+    UploadEl,
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    edit(key, e) {
+      this.data[key] = e.target.innerText
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.content {
+  display: inline-block;
+  width: 62vw;
+  height: 20.1vw;
+  border: 1px solid #ccc3;
+  margin-top: 3.7vw;
+  margin-bottom: 5.2vw;
+  vertical-align: top;
+
+  .left {
+    vertical-align: top;
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+    position: relative;
+    background-color: #ffffff;
+
+    .contentTitle {
+      position: absolute;
+      top: 18.6%;
+      left: 12.7%;
+      letter-spacing: 1px;
+      font-size: 1.4vw;
+      color: @standard-color;
+    }
+
+    .contentSubTitle {
+      position: absolute;
+      top: 14.6%;
+      left: 12.7%;
+      letter-spacing: 3.2px;
+      font-size: 1.6vw;
+      color: #6666;
+    }
+
+    .contentInfo {
+      text-align: left;
+      position: absolute;
+      top: 35.6%;
+      width: 73%;
+      left: 50%;
+      transform: translateX(-50%);
+      letter-spacing: 2.5px;
+      font-size: 0.8vw;
+      line-height: 1.6vw;
+      color: #666;
+    }
+  }
+
+  .right {
+    display: inline-block;
+    width: 50%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/src/components/editEl/editEl3.vue b/src/components/editEl/editEl3.vue
new file mode 100644
index 0000000..049d982
--- /dev/null
+++ b/src/components/editEl/editEl3.vue
@@ -0,0 +1,125 @@
+<template>
+  <div>
+    <div class="title">
+      <span contenteditable="true" @blur="edit('title', $event)">
+        {{ data.title }}
+      </span>
+    </div>
+    <div class="subTitle">
+      <span contenteditable="true" @blur="edit('subTitle', $event)">
+        {{ data.subTitle }}
+      </span>
+    </div>
+    <div class="list">
+      <div class="item" v-for="(i,k) in data.list">
+        <div class="icon">
+          <UploadEl :data="i"/>
+        </div>
+        <div class="itemTitle" contenteditable="true" @blur="edit1('itemTitle', k,$event)">{{ i.itemTitle }}</div>
+        <div class="itemInfo" contenteditable="true" @blur="edit1('itemInfo', k,$event)">{{ i.itemInfo }}</div>
+      </div>
+      <div class="item" style="vertical-align: top">
+        <div style="width:100%;height:100%;" @click="data.list.push({itemTitle:'输入。。。',itemInfo:'输入。。。'})">
+          <i class="el-icon-circle-plus" style="font-size: 3vw; line-height: 10vw"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import UploadEl from "@/components/editEl/uploadEl.vue";
+
+export default {
+  name: 'EditEl3',
+  components: {UploadEl},
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {
+    edit(key, e) {
+      console.log(this.$props)
+      this.$props.data[key] = e.target.innerText
+    },
+    edit1(key, index, e) {
+      this.$props.data.list[index][key] = e.target.innerText
+    },
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.title {
+  padding-top: 4.2vw;
+  width: 100%;
+  text-align: center;
+  font-size: 2.5vw;
+  letter-spacing: 4px;
+  color: #0003;
+}
+
+.subTitle {
+  padding-top: 0.4vw;
+  width: 100%;
+  text-align: center;
+  font-size: 1.9vw;
+  letter-spacing: 2px;
+  color: #000;
+}
+
+.list {
+  width: 65vw;
+  display: inline-block;
+  margin-top: 3.5vw;
+  margin-bottom: 3.9vw;
+
+  .item {
+    display: inline-block;
+    position: relative;
+    width: 47%;
+    height: 10vw;
+    box-shadow: 0 0 3px #0002;
+    margin: 0 1.5% 1.1vw 1.5%;
+
+    .icon {
+      width: 4vw;
+      height: 4vw;
+      position: absolute;
+      top: 54%;
+      left: 18.2%;
+      transform: translate(-50%, -50%);
+    }
+
+    .itemTitle {
+      top: 37%;
+      left: 33.9%;
+      position: absolute;
+      transform: translatey(-50%);
+      font-size: 1.2vw;
+      letter-spacing: 3px;
+    }
+
+    .itemInfo {
+      top: 62.2%;
+      left: 33.9%;
+      position: absolute;
+      transform: translatey(-50%);
+      font-size: 0.9vw;
+      color: #666;
+      letter-spacing: 2px;
+      text-align: left;
+      white-space: nowrap;
+      width: 63%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+</style>
diff --git a/src/components/editEl/editEl4.vue b/src/components/editEl/editEl4.vue
new file mode 100644
index 0000000..2ec857d
--- /dev/null
+++ b/src/components/editEl/editEl4.vue
@@ -0,0 +1,129 @@
+<template>
+  <div>
+    <div class="content">
+      <div class="left" :style="{backgroundImage:`url(${data.hwProductInfoDetailList[0].productInfoDetailPic})`}">
+      </div>
+      <div class="right">
+        <div class="list">
+          <div class="item" v-for="i in data.hwProductInfoDetailList">
+            <div class="itemTitle">{{ i.productInfoDetailTitle }}</div>
+            <div class="itemInfo">
+              {{ i.productInfoDetailDesc }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'EditEl4',
+  components: {},
+  props: ['data'],
+  data() {
+    return {}
+  },
+  mounted() {
+  },
+  methods: {}
+}
+</script>
+
+<style lang="less" scoped>
+@import "~@/style.less";
+
+.content {
+  display: inline-block;
+  padding-top: 5.1vw;
+  width: 65vw;
+  height: 31vw;
+  text-align: left;
+  vertical-align: top;
+  margin: 0 auto 5.3vw;
+
+  .left {
+    width: 26%;
+    height: 100%;
+    margin: 0% 2%;
+    display: inline-block;
+    vertical-align: top;
+    background-color: #0378f9;
+    background-repeat: no-repeat;
+    background-size: contain;
+
+    .leftTitle {
+      color: #fff;
+      font-size: 1.9vw;
+      letter-spacing: 2px;
+      margin-top: 21.7%;
+      margin-left: 11.8%;
+    }
+
+    .leftSubTitle {
+      color: #fff;
+      width: 75%;
+      line-height: 1.8vw;
+      font-size: 1.1vw;
+      letter-spacing: 2px;
+      margin-top: 5.1%;
+      margin-left: 11.8%;
+      word-break: break-all;
+    }
+  }
+
+  .right {
+    width: 68.5%;
+    height: 100%;
+    display: inline-block;
+
+    .list {
+      width: 100%;
+      height: 100%;
+
+      .item {
+        display: inline-block;
+        width: 48%;
+        height: 48%;
+        box-shadow: 0 0 3px #0002;
+        background-color: #f2f3f5;
+
+        &:nth-child(1) {
+          margin: 0 4% 3% 0;
+        }
+
+        &:nth-child(2) {
+          margin: 0 0 3% 0;
+        }
+
+        &:nth-child(3) {
+          margin: 0 4% 0 0;
+        }
+
+        .itemTitle {
+          margin-top: 8.2%;
+          margin-left: 7.6%;
+          font-size: 1.2vw;
+          line-height: 1.4vw;
+          color: #000;
+          letter-spacing: 2.7px;
+          border-left: 4px solid #3372ff;
+          padding-left: 0.7vw;
+        }
+
+        .itemInfo {
+          margin-top: 6%;
+          width: 88%;
+          margin-left: 7.3%;
+          font-size: 1.1vw;
+          line-height: 1.8vw;
+          color: #333;
+          letter-spacing: 4px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/editEl/uploadEl.vue b/src/components/editEl/uploadEl.vue
new file mode 100644
index 0000000..9f34aa2
--- /dev/null
+++ b/src/components/editEl/uploadEl.vue
@@ -0,0 +1,65 @@
+<template>
+  <div style="width: 100%;height: 100%">
+    <el-upload
+        style="width: 100%;height: 100%"
+        class="avatar-uploader"
+        :action="imageUrl"
+        :show-file-list="false"
+        :on-success="handleAvatarSuccess"
+        :before-upload="beforeAvatarUpload">
+      <img style="width: 100%;height: 100%" v-if="data.icon" :src="data.icon" class="avatar">
+      <i v-else style="width: 100%;height: 100%;font-size: 2vw" class="el-icon-plus avatar-uploader-icon"></i>
+    </el-upload>
+  </div>
+</template>
+<script>
+export default {
+  props: ['data'],
+  data() {
+    return {
+      imageUrl: '/prod-api' + "/file/upload",
+    }
+  },
+  methods: {
+    handleAvatarSuccess(res, file) {
+      if (res.code === 200) {
+        this.$props.data.icon = res.data.url
+      }
+    },
+    beforeAvatarUpload(file) {
+      if (!(file.type === 'image/jpeg' || file.type === 'image/png')) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
+      }
+      return file.type === 'image/jpeg' || file.type === 'image/png'
+    }
+  }
+}
+</script>
+<style scoped>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 4vw;
+  text-align: center;
+}
+
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 460e030..d21bd02 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -6,6 +6,9 @@ Vue.use(Router)
 
 export default new Router({
   routes: [
+    {
+      path: '/editor', component: () => import('@/views/pageEditor/index.vue'),
+    },
     {
       path: '/',
       component: Layout,
diff --git a/src/views/pageEditor/index.vue b/src/views/pageEditor/index.vue
new file mode 100644
index 0000000..1a2fb08
--- /dev/null
+++ b/src/views/pageEditor/index.vue
@@ -0,0 +1,196 @@
+<template>
+  <div>
+    <div class="top">
+      <div class="title">
+        页面编辑器
+      </div>
+      <el-cascader
+          size="small"
+          v-model="value"
+          :options="options"
+          @change="handleChange"></el-cascader>
+    </div>
+    <div class="container">
+      <div class="component" v-for="i in components">
+        <EditEl1 v-if="i.type === 1" :data="i.value"/>
+        <EditEl2 v-if="i.type === 2" :data="i.value"/>
+        <EditEl3 v-if="i.type === 3" :data="i.value"/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import EditEl1 from "@/components/editEl/editEl1.vue";
+import EditEl2 from "@/components/editEl/editEl2.vue";
+import EditEl3 from "@/components/editEl/editEl3.vue";
+
+export default {
+  components: {
+    EditEl1,
+    EditEl2,
+    EditEl3,
+  },
+  data() {
+    return {
+      a: '1',
+      value: [],
+      options: [
+        {
+          value: 'index',
+          label: '首页',
+        },
+        {
+          value: 'guhw',
+          label: '关于海威',
+          children: [
+            {
+              value: 'gsgk',
+              label: '公司概况',
+            },
+            {
+              value: 'ryzz',
+              label: '荣誉资质',
+            }
+          ]
+        },
+      ],
+      components: [
+        {
+          type: 1,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '111',
+                value: '222'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '222',
+                value: '333'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '333',
+                value: '444'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '444',
+                value: '555'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '555',
+                value: '666'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                title: '666',
+                value: '777'
+              },
+            ],
+          },
+        },
+        {
+          type: 2,
+          value: {
+            title: '123',
+            subTitle: '456',
+            contentTitle: 'contentTitle',
+            contentSubTitle: 'DEVELOPMENT PLATFORM',
+            contentInfo: 'contentInfo',
+            image: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+          },
+        },
+        {
+          type: 3,
+          value: {
+            title: '123',
+            subTitle: '456',
+            list: [
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '111',
+                itemInfo: '222'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '222',
+                itemInfo: '333'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '333',
+                itemInfo: '444'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '444',
+                itemInfo: '555'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '555',
+                itemInfo: '666'
+              },
+              {
+                icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+                itemTitle: '666',
+                itemInfo: '777'
+              },
+            ],
+          },
+        },
+      ]
+    }
+  },
+  mounted() {
+
+  },
+  methods: {
+    handleChange(val) {
+      console.log(val)
+    },
+    edit(key, e) {
+      this[key] = e.target.innerText
+    }
+  }
+}
+</script>
+<style scoped lang="less">
+.top {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  width: 100%;
+  height: 50px;
+  background: #fff;
+  box-shadow: 0 6px 4px -4px rgba(0, 0, 0, 0.2);
+  text-align: left;
+
+  .title {
+    line-height: 50px;
+    margin-left: 12px;
+    display: inline-block;
+    margin-right: 12px;
+  }
+}
+
+.container {
+  width: 90%;
+  text-align: left;
+  margin: 0 auto;
+}
+
+.component {
+  text-align: center;
+}
+</style>
\ No newline at end of file