diff --git a/package-lock.json b/package-lock.json
index 757084a..02aaef2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2085,6 +2085,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2272,6 +2280,11 @@
         }
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
     "babel-helpers": {
       "version": "6.24.1",
       "resolved": "https://registry.npm.taobao.org/babel-helpers/download/babel-helpers-6.24.1.tgz",
@@ -2475,7 +2488,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -2484,8 +2496,7 @@
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk=",
-          "dev": true
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
         }
       }
     },
@@ -4410,8 +4421,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
     },
     "default-gateway": {
       "version": "5.0.3",
@@ -4753,6 +4763,14 @@
         }
       }
     },
+    "dom7": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.3.tgz",
+      "integrity": "sha512-QTxHHDox+M6ZFz1zHPAHZKI3JOHY5iY4i9BK2uctlggxKQwRhO3q3HHFq1BKsT25Bm/ySSj70K6Wk/G4bs9rMQ==",
+      "requires": {
+        "ssr-window": "^1.0.1"
+      }
+    },
     "domain-browser": {
       "version": "1.2.0",
       "resolved": "https://registry.npm.taobao.org/domain-browser/download/domain-browser-1.2.0.tgz",
@@ -4896,6 +4914,19 @@
       "integrity": "sha1-lIctaCMhnygS8uNaLOKn0Dweqj8=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.12.0.tgz",
+      "integrity": "sha512-DapyT0PW4i/1ETPHk8K8Qbe8B6hj10+dXsRTrOTFryV9wAs6e9mCxbV65awokyR2/v/KuIHJmqX+mH3wUa4rOQ==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.1",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.1.tgz",
@@ -10639,6 +10670,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -10696,8 +10732,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -12615,6 +12650,11 @@
       "integrity": "sha1-79qpjqdFEyTQkrKyFjpqHXqaIUc=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.12.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.12.0.tgz?cache=0&sync_timestamp=1564641434608&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.12.0.tgz",
@@ -13584,6 +13624,11 @@
         "tweetnacl": "~0.14.0"
       }
     },
+    "ssr-window": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
+      "integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
+    },
     "ssri": {
       "version": "6.0.1",
       "resolved": "https://registry.npm.taobao.org/ssri/download/ssri-6.0.1.tgz",
@@ -13905,6 +13950,15 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "swiper": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/swiper/-/swiper-4.5.1.tgz",
+      "integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
+      "requires": {
+        "dom7": "^2.1.3",
+        "ssr-window": "^1.0.1"
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npm.taobao.org/symbol-tree/download/symbol-tree-3.2.4.tgz",
@@ -14177,6 +14231,11 @@
       "integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=",
       "dev": true
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -14742,6 +14801,15 @@
       "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz",
       "integrity": "sha1-pysaQqTYKnIepDjRtr9V5mGVxjc="
     },
+    "vue-awesome-swiper": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
+      "integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "swiper": "^4.0.7"
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz",
diff --git a/package.json b/package.json
index 9181433..c1a20d1 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
+    "element-ui": "^2.12.0",
     "vue": "^2.6.10",
+    "vue-awesome-swiper": "^3.1.3",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
   },
diff --git a/src/App.vue b/src/App.vue
index 74e98fb..c1ec0f0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,4 +5,6 @@
 </template>
 
 <style lang="scss">
+// 引入去掉浏览器默认样式css
+@import './assets/css/selfSetCss.css';
 </style>
diff --git a/src/assets/css/selfSetCss.css b/src/assets/css/selfSetCss.css
new file mode 100644
index 0000000..3ea449f
--- /dev/null
+++ b/src/assets/css/selfSetCss.css
@@ -0,0 +1,82 @@
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+form,
+fieldset,
+input,
+textarea,
+p,
+blockquote,
+th,
+td {
+  margin: 0;
+  padding: 0;
+  font-family:'MicrosoftYaHei';
+}
+body{
+  background-color:#F8F8F8;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+fieldset,
+img {
+  border: 0;
+}
+
+address,
+caption,
+cite,
+code,
+dfn,
+em,
+strong,
+th,
+var {
+  font-style: normal;
+  font-weight: normal;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+caption,
+th {
+  text-align: left;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+
+q:before,
+q:after {
+  content: '';
+}
+
+abbr,
+acronym {
+  border: 0;
+}
\ No newline at end of file
diff --git a/src/assets/js/canvas_identifying.js b/src/assets/js/canvas_identifying.js
new file mode 100644
index 0000000..546b456
--- /dev/null
+++ b/src/assets/js/canvas_identifying.js
@@ -0,0 +1,60 @@
+// 生成并渲染出验证码图形
+// 参数canvaswidth验证码宽度 canvasheight验证码高度 refidentifying是获取到验证码所在的dom元素====》document.getElementById('canvas')
+function draw (canvaswidth, canvasheight, refidentifying) {
+  var showNum = []
+  var canvas = refidentifying // 获取到canvas的对象，演员
+  console.log(canvas.getContext)
+  var context = canvas.getContext('2d') // 获取到canvas画图的环境，演员表演的舞台
+  canvas.width = canvaswidth
+  canvas.height = canvasheight
+  var sCode = 'a,b,c,d,e,f,g,h,i,j,k,m,n,p,q,r,s,t,u,v,w,x,y,z,A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0'
+  var aCode = sCode.split(',')
+  var aLength = aCode.length // 获取到数组的长度
+
+  for (var i = 0; i < 4; i++) { // 这里的for循环可以控制验证码位数（如果想显示6位数，4改成6即可）
+    var j = Math.floor(Math.random() * aLength) // 获取到随机的索引值
+    // var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
+    var deg = Math.random() - 0.5 // 产生一个随机弧度
+    var txt = aCode[j] // 得到随机的一个内容
+    showNum[i] = txt.toLowerCase()
+    var x = 10 + i * 20 // 文字在canvas上的x坐标
+    var y = 20 + Math.random() * 8 // 文字在canvas上的y坐标
+    context.font = 'bold 23px 微软雅黑'
+
+    context.translate(x, y)
+    context.rotate(deg)
+
+    context.fillStyle = randomColor()
+    context.fillText(txt, 0, 0)
+
+    context.rotate(-deg)
+    context.translate(-x, -y)
+  }
+  for (var i1 = 0; i1 <= 5; i1++) { // 验证码上显示线条
+    context.strokeStyle = randomColor()
+    context.beginPath()
+    context.moveTo(Math.random() * canvaswidth, Math.random() * canvasheight)
+    context.lineTo(Math.random() * canvaswidth, Math.random() * canvasheight)
+    context.stroke()
+  }
+  for (var i2 = 0; i2 <= 30; i2++) { // 验证码上显示小点
+    context.strokeStyle = randomColor()
+    context.beginPath()
+    var x2 = Math.random() * canvaswidth
+    var y2 = Math.random() * canvasheight
+    context.moveTo(x2, y2)
+    context.lineTo(x2 + 1, y2 + 1)
+    context.stroke()
+  }
+  // 返回验证码内容
+  return showNum
+}
+
+// 得到随机的颜色值
+function randomColor () {
+  var r = Math.floor(Math.random() * 256)
+  var g = Math.floor(Math.random() * 256)
+  var b = Math.floor(Math.random() * 256)
+  return 'rgb(' + r + ',' + g + ',' + b + ')'
+}
+exports.default = draw
diff --git a/src/assets/js/flexible.js b/src/assets/js/flexible.js
new file mode 100644
index 0000000..6e1ad5d
--- /dev/null
+++ b/src/assets/js/flexible.js
@@ -0,0 +1,110 @@
+
+/* eslint-disable */
+!(function (a, b) {
+  function c () {
+    var b = f.getBoundingClientRect().width
+    b / i > 540 && (b = 540 * i)
+    var c = b / 10
+    f.style.fontSize = c + 'px', k.rem = a.rem = c
+  }
+  var d; var e = a.document
+    var f = e.documentElement
+    var g = e.querySelector('meta[name="viewport"]')
+    var h = e.querySelector('meta[name="flexible"]')
+    var i = 0
+    var j = 0
+    var k = b.flexible || (b.flexible = {})
+  if (g) {
+    // console.warn('将根据已有的meta标签来设置缩放比例')
+    var l = g.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
+    l && (j = parseFloat(l[1]), i = parseInt(1 / j))
+  } else if (h) {
+    var m = h.getAttribute('content')
+    if (m) {
+      var n = m.match(/initial\-dpr=([\d\.]+)/)
+        var o = m.match(/maximum\-dpr=([\d\.]+)/)
+      n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2)))
+    }
+  }
+  if (!i && !j) {
+    var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi))
+      var q = a.devicePixelRatio
+    i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
+  }
+  if (f.setAttribute('data-dpr', i), !g)
+  {
+ if (g = e.createElement('meta'), g.setAttribute('name', 'viewport'), g.setAttribute('content', 'initial-scale=' + j + ', maximum-scale=' + j + ', minimum-scale=' + j + ', user-scalable=no'), f.firstElementChild) f.firstElementChild.appendChild(g)
+    else {
+    var r = e.createElement('div')
+      r.appendChild(g), e.write(r.innerHTML)
+  } 
+} a.addEventListener('resize', function () {
+    clearTimeout(d), d = setTimeout(c, 300)
+  }, !1), a.addEventListener('pageshow', function (a) {
+    a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
+  }, !1), e.readyState === 'complete' ? e.body.style.fontSize = 12 * i + 'px' : e.addEventListener('DOMContentLoaded', function () {
+    e.body.style.fontSize = 12 * i + 'px'
+  }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) {
+    var b = parseFloat(a) * this.rem
+    return typeof a === 'string' && a.match(/rem$/) && (b += 'px'), b
+  }, k.px2rem = function (a) {
+    var b = parseFloat(a) / this.rem
+    return typeof a === 'string' && a.match(/px$/) && (b += 'rem'), b
+  }
+}(window, window.lib || (window.lib = {})))
+!(function (a, b) {
+  function c () {
+    var b = f.getBoundingClientRect().width
+    // 淘宝适配方案这里用的是540
+    // b / i > 540 && (b = 540 * i)
+    // 我这里根据屏幕宽度改变根字体大小160 为根字体的10倍     1920为设计稿的宽度
+    var selfFontSizeG = 160/((1920-17)/document.body.clientWidth)
+    b / i > selfFontSizeG && (b = selfFontSizeG * i)
+    var c = b / 10
+    f.style.fontSize = c + 'px', k.rem = a.rem = c
+  }
+  var d; var e = a.document
+    var f = e.documentElement
+    var g = e.querySelector('meta[name="viewport"]')
+    var h = e.querySelector('meta[name="flexible"]')
+    var i = 0
+    var j = 0
+    var k = b.flexible || (b.flexible = {})
+  if (g) {
+    // console.warn('将根据已有的meta标签来设置缩放比例')
+    var l = g.getAttribute('content').match(/initial\-scale=([\d\.]+)/)
+    l && (j = parseFloat(l[1]), i = parseInt(1 / j))
+  } else if (h) {
+    var m = h.getAttribute('content')
+    if (m) {
+      var n = m.match(/initial\-dpr=([\d\.]+)/)
+        var o = m.match(/maximum\-dpr=([\d\.]+)/)
+      n && (i = parseFloat(n[1]), j = parseFloat((1 / i).toFixed(2))), o && (i = parseFloat(o[1]), j = parseFloat((1 / i).toFixed(2)))
+    }
+  }
+  if (!i && !j) {
+    var p = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi))
+      var q = a.devicePixelRatio
+    i = p ? q >= 3 && (!i || i >= 3) ? 3 : q >= 2 && (!i || i >= 2) ? 2 : 1 : 1, j = 1 / i
+  }
+  if (f.setAttribute('data-dpr', i), !g)
+  { 
+if (g = e.createElement('meta'), g.setAttribute('name', 'viewport'), g.setAttribute('content', 'initial-scale=' + j + ', maximum-scale=' + j + ', minimum-scale=' + j + ', user-scalable=no'), f.firstElementChild) f.firstElementChild.appendChild(g)
+    else {
+    var r = e.createElement('div')
+      r.appendChild(g), e.write(r.innerHTML)
+  } 
+} a.addEventListener('resize', function () {
+    clearTimeout(d), d = setTimeout(c, 300)
+  }, !1), a.addEventListener('pageshow', function (a) {
+    a.persisted && (clearTimeout(d), d = setTimeout(c, 300))
+  }, !1), e.readyState === 'complete' ? e.body.style.fontSize = 12 * i + 'px' : e.addEventListener('DOMContentLoaded', function () {
+    e.body.style.fontSize = 12 * i + 'px'
+  }, !1), c(), k.dpr = a.dpr = i, k.refreshRem = c, k.rem2px = function (a) {
+    var b = parseFloat(a) * this.rem
+    return typeof a === 'string' && a.match(/rem$/) && (b += 'px'), b
+  }, k.px2rem = function (a) {
+    var b = parseFloat(a) / this.rem
+    return typeof a === 'string' && a.match(/px$/) && (b += 'rem'), b
+  }
+}(window, window.lib || (window.lib = {})))
diff --git a/src/components/footerInfor/FooterInfor.vue b/src/components/footerInfor/FooterInfor.vue
new file mode 100644
index 0000000..1f9e02a
--- /dev/null
+++ b/src/components/footerInfor/FooterInfor.vue
@@ -0,0 +1,180 @@
+<template>
+  <div class="footerInfor">
+    <div class="footer_header">
+      <div class="footer_model">
+        <div v-for="(item,index) in model_list" :key="index">
+          <div @click="skipTitle()" class="titleS">{{item.title}}</div>
+          <div v-for="(list,key) in item.cont" :key="key" @click="skipCont()">{{list.text}}</div>
+        </div>
+      </div>
+    </div>
+    <div class="footer_bottom">
+      <div class="bottom_model">
+        <img :src="bottom_infor.leftImg" alt />
+        <div>{{bottom_infor.introCopyright}}</div>
+        <div>{{bottom_infor.introSite}}</div>
+        <div>{{bottom_infor.introIdentificationCode}}</div>
+        <div>{{bottom_infor.introAQ}}</div>
+        <img :src="bottom_infor.rightImg" alt />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'footerInfor',
+  data () {
+    return {
+      model_list: [
+        {
+          title: '统计法规',
+          titleUrl: '',
+          cont: [
+            { text: '《统计法》统计法实施条例', textUrl: '' },
+            { text: '人口普查条例', textUrl: '' }
+          ]
+        },
+        {
+          title: '标准制度',
+          titleUrl: '',
+          cont: [
+            { text: '国民经济行业分类', textUrl: '' },
+            { text: '国民经济核算统计报表制度', textUrl: '' },
+            { text: '更多制度>>', textUrl: '' }
+          ]
+        },
+        {
+          title: '统计数据生产过程',
+          titleUrl: '',
+          cont: [
+            { text: '统计数据生产过程 国内生产总值（GDP）', textUrl: '' },
+            { text: '居民消费者价格指数（CPI）', textUrl: '' }
+          ]
+        },
+        {
+          title: '在线电话',
+          titleUrl: '',
+          cont: [
+            { text: '咨询电话：010-68576320', textUrl: '' },
+            { text: '周一至周五上午8：00-11:30,下午1:00-5:00', textUrl: '' }
+          ]
+        }
+      ],
+      // model_bottom 信息
+      bottom_infor: {
+        leftImg: require('../../../static/footerInfor/tbomleft.png'),
+        introCopyright: '版权所有：中华人民共和国国家统计局 党政机关',
+        introSite: '地址：北京市西城区月坛南街57号（100826）',
+        introIdentificationCode: '网站标识码 bm36000005',
+        introAQ: '京ICP备05034670号',
+        rightImg: require('../../../static/footerInfor/tbomRight.png')
+      }
+    }
+  },
+  methods: {
+    skipTitle () {
+
+    },
+    skipCont () {
+
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.footerInfor {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  & > .footer_header {
+    width: 100%;
+    background-color: #336379;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    & > .footer_model {
+      padding-top: 3.875rem;
+      width: 84.25rem;
+      height: 15.75rem;
+      // border: 1px solid red;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-evenly;
+      align-items: center;
+      & > div {
+        height: 15.75rem;
+        max-width: 20rem;
+        & > .titleS {
+          max-width: 20rem;
+          margin-bottom: 2.375rem;
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0rem;
+          color: #ffffff;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1; /* 省略号在第几行 */
+          -webkit-box-orient: vertical;
+        }
+        & > .titleS:hover{
+          cursor: pointer;
+        }
+        & > div:nth-child(n + 2) {
+          max-width: 20rem;
+          font-size: 1rem;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 1.75rem;
+          letter-spacing: 0rem;
+          color: #ffffff;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1; /* 省略号在第几行 */
+          -webkit-box-orient: vertical;
+        }
+        & > div:nth-child(n + 2):hover{
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  & > .footer_bottom {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    background-color: #19303b;
+    & > .bottom_model {
+      width: 84.25rem;
+      height: 6.375rem;
+      // border: 1px solid red;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-evenly;
+      align-items: center;
+      & > img {
+        width: 3.75rem;
+        height: 3.875rem;
+      }
+      & > img:last-child {
+        width: 7rem;
+        height: 4.6875rem;
+      }
+      & > div {
+        font-size: 1.125rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: -0.0625rem;
+        color: #ffffff;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/nav/Nav.vue b/src/components/nav/Nav.vue
new file mode 100644
index 0000000..c3f4912
--- /dev/null
+++ b/src/components/nav/Nav.vue
@@ -0,0 +1,462 @@
+<template>
+  <div class="nav">
+    <div class="navCont">
+      <img :src="imageUrl.logo" alt srcset />
+      <div
+        v-for="(item,index) in navCont"
+        :key="index"
+        @click="navClick(index,item.url)"
+        :class="{fontSty:index==1&&colorD}"
+      >{{item.text}}</div>
+      <div class="dsearch">
+        <!-- <img :src="imageUrl.search" alt srcset /> -->
+        <!-- 未登录 -->
+        <div class="div1" v-if="!userLogin" @click="loginWindow()">登录</div>
+        <!-- 登陆成功后显示 -->
+        <div
+          :class="{loginAfter:true,loginAfters:fontsF}"
+          v-if="userLogin"
+          @click="userLoginC()"
+        >{{userName}}</div>
+      </div>
+      <!-- 数据二级导航 -->
+      <div class="dataTwo" v-if="twonav">
+        <div>月度数据</div>
+        <div>季度数据</div>
+        <div>年度数据</div>
+      </div>
+      <!-- 个人信息二级导航 -->
+      <div class="dataTwos" v-if="personalInfo">
+        <div>个人中心</div>
+        <div>退出</div>
+      </div>
+    </div>
+    <!-- 登陆窗口 -->
+    <section class="loginSty" v-if="showWinStatic">
+      <div class="loginSty_wcont">
+        <div class="wcont_header">
+          <div>登录</div>
+          <img :src="imageUrl.deleteimg" alt @click="closeLoginWind(false)" />
+        </div>
+        <div class="wcont_content">
+          <div>
+            <img :src="imageUrl.usernames" alt />
+            <input type="text" placeholder="请输入用户名" v-model="username" />
+          </div>
+          <div>
+            <img :src="imageUrl.userpwds" alt />
+            <input type="text" placeholder="请输入密码" v-model="userpwd" />
+          </div>
+          <div>
+            <input type="text" placeholder="请输入验证码" v-model="useryzm" />
+            <canvas ref="identifyDom" @click="get_identity()"></canvas>
+          </div>
+          <div @click="closeLoginWind(true)">确认</div>
+          <div>
+            <span>没有账号？去注册</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+<script>
+export default {
+  name: 'navs',
+  data: function () {
+    return {
+      imageUrl: {
+        logo: require('../../../static/nav/navlogo.png'),
+        search: require('../../../static/nav/search.png'),
+        deleteimg: require('../../../static/nav/deleteImg.png'),
+        usernames: require('../../../static/nav/username.png'),
+        userpwds: require('../../../static/nav/userpwds.png')
+      },
+      navCont: [
+        { text: '首页', url: '/' },
+        { text: '数据', url: '/companyIntroduction' },
+        { text: '公司介绍', url: '/companyIntroduction' },
+        { text: '联系我们', url: '/relation' },
+        { text: '个人中心', url: 123 },
+        { text: '帮助', url: 123 }
+      ],
+      twonav: false,
+      colorD: false,
+      userName: '十画.TeFuir',
+      // 用户名和登陆的显示隐藏
+      userLogin: false,
+      personalInfo: false,
+      fontsF: false,
+      // 登陆窗口
+      showWinStatic: false,
+      // 用户名
+      username: '',
+      // 密码
+      userpwd: '',
+      // 验证码
+      useryzm: '',
+      // 图片中的验证码
+      imgIdentify: null
+    }
+  },
+  methods: {
+    navClick (indexs, url) {
+      if (indexs === 1) {
+        this.twonav = !this.twonav
+        this.colorD = !this.colorD
+        this.fontsF = false
+        this.personalInfo = false
+      } else {
+        this.twonav = false
+        this.colorD = false
+        this.fontsF = false
+        this.personalInfo = false
+        this.$router.push({
+          path: url
+        })
+      }
+    },
+    userLoginC () {
+      this.personalInfo = !this.personalInfo
+      this.fontsF = !this.fontsF
+      this.twonav = false
+      this.colorD = false
+    },
+    loginWindow () {
+      this.showWinStatic = true
+      this.get_identity()
+    },
+    // 关闭登录窗口
+    closeLoginWind (status) {
+      if (status) {
+        // 调接口上传，成功后关闭窗口
+        if (this.username === '') {
+          alert('用户名不能为空！')
+        } else if (this.userpwd === '') {
+          alert('密码不能为空！')
+        } else if (this.useryzm === '') {
+          alert('验证码不能为空！')
+        } else if (this.useryzm.toLocaleLowerCase() !== this.imgIdentify) {
+          alert('验证码输入不正确请重新输入！')
+        } else {
+          // 调接口判断密码是否输入正确,改变登录状态
+          this.showWinStatic = !this.showWinStatic
+        }
+      } else {
+        this.showWinStatic = !this.showWinStatic
+      }
+    },
+    // 获取验证码图片及内容
+    get_identity () {
+      // 获取验证码渲染区域
+      this.$nextTick(() => {
+        let identifyD = this.$refs.identifyDom
+        console.log(identifyD, 'ref')
+        var content = this.$identify(100, 30, identifyD)
+        this.imgIdentify = content.join('')
+        console.log(this.imgIdentify)
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+// 登陆窗口
+.loginSty {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.28);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  & > .loginSty_wcont {
+    width: 37.5rem;
+    height: 32.6875rem;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    & > .wcont_header {
+      width: 32.8125rem;
+      height: 3.875rem;
+      border-bottom: 0.0625rem solid #dbdbdb;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      & > div {
+        margin-left: 1rem;
+        font-size: 1.375rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #333333;
+      }
+      & > img {
+        margin-right: 1rem;
+        width: 1.3125rem;
+        height: 1.3125rem;
+      }
+      & > img:hover {
+        cursor: pointer;
+      }
+    }
+    & > .wcont_content {
+      width: 30.8125rem;
+      height: 26.5rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
+      & > div:nth-last-child(n + 2) {
+        width: 100%;
+        height: 3.25rem;
+        border: 0.0625rem solid #dbdbdb;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        & > input {
+          width: 21.625rem;
+          height: 1.6rem;
+          border: none;
+        }
+        & > input::-webkit-input-placeholder {
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 2rem;
+          letter-spacing: 0rem;
+          color: #999999;
+        }
+        & > input::-moz-placeholder {
+          /* Mozilla Firefox 19+ */
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 2rem;
+          letter-spacing: 0rem;
+          color: #999999;
+        }
+        & > input:-moz-placeholder {
+          /* Mozilla Firefox 4 to 18 */
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 2rem;
+          letter-spacing: 0rem;
+          color: #999999;
+        }
+        & > input:-ms-input-placeholder {
+          /* Internet Explorer 10-11 */
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 2rem;
+          letter-spacing: 0rem;
+          color: #999999;
+        }
+      }
+      & > div:nth-child(1) {
+        & > img {
+          margin: 0 1.2rem;
+          width: 1.375rem;
+          height: 1.3125rem;
+        }
+      }
+      & > div:nth-child(2) {
+        & > img {
+          margin: 0 1.35625rem;
+          width: 1.0625rem;
+          height: 1.3125rem;
+        }
+      }
+      & > div:nth-child(3) {
+        & > input {
+          margin: 0 1.35625rem;
+        }
+        & > canvas:hover {
+          cursor: pointer;
+        }
+      }
+      & > div:nth-last-child(2) {
+        width: 100%;
+        height: 3.1875rem;
+        background-color: #52b6e3;
+        border-radius: 0.3125rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #ffffff;
+      }
+      & > div:nth-last-child(2):hover {
+        cursor: pointer;
+      }
+      & > div:last-child {
+        width: 100%;
+        height: 3.1875rem;
+        border-radius: 0.3125rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-end;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #52b6e3;
+        & > span {
+          border-bottom: 0.125rem solid #52b6e3;
+        }
+        & > span:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+.nav {
+  width: 100%;
+  height: 5.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color:#fff;
+  & > .navCont {
+    position: relative;
+    width: 84.25rem;
+    height: 5.5rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    align-items: center;
+    border: 1px solid black;
+    & > .fontSty {
+      color: #52b6e3 !important;
+    }
+    & > div:hover {
+      cursor: pointer;
+      color: #52b6e3;
+    }
+    & > .dataTwo {
+      width: 8rem;
+      height: 10rem;
+      position: absolute;
+      top: 3.425rem;
+      left: 18.825rem;
+      z-index: 10;
+      background-image: url("../../../static/nav/xl.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      & > div {
+        margin-top: 0.985rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #333333;
+      }
+      & > div:hover {
+        cursor: pointer;
+        color: #52b6e3;
+      }
+    }
+    & > .dataTwos {
+      width: 8rem;
+      height: 6.125rem;
+      position: absolute;
+      top: 3.425rem;
+      right: 3.825rem;
+      background-image: url("../../../static/nav/xl.png");
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      & > div {
+        margin-top: 0.375rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #333333;
+      }
+      & > div:hover {
+        cursor: pointer;
+        color: #52b6e3;
+      }
+    }
+    & > img {
+      width: 9.375rem;
+      height: 3.375rem;
+    }
+    & > img:hover {
+      cursor: pointer;
+    }
+    & > div {
+      font-size: 1.375rem;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0rem;
+      color: #333333;
+    }
+    & > .dsearch {
+      margin-left: 8.625rem;
+      width: 13.25rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      & > img {
+        width: 1.75rem;
+        height: 1.75rem;
+      }
+      & > .div1 {
+        width: 4.375rem;
+        height: 2.75rem;
+        background-color: #52b6e3;
+        border-radius: 0.25rem;
+        font-size: 1.375rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #ffffff;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+      }
+      & > .loginAfter {
+        font-size: 1.375rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #666666;
+      }
+      & > .loginAfter:hover {
+        color: #52b6e3;
+      }
+      & > .loginAfters {
+        color: #52b6e3 !important;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
new file mode 100644
index 0000000..1ae7cbd
--- /dev/null
+++ b/src/components/search/search.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="search">
+    <div class="kuang">
+      <input type="text" v-model="searchContext" placeholder="全站搜索" />
+      <img :src="imgUrl.search" alt />
+    </div>
+    <div class="tjHold">
+      统计热词
+      <div>
+        <div v-for="(item,index) in hotFont" :key="index">{{item}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'search',
+  data () {
+    return {
+      imgUrl: {
+        search: require('../../../static/index/search.png')
+      },
+      searchContext: '',
+      hotFont: ['GDP', 'CPI', '总人口', '社会消费品零售总额', '粮食产量', 'PMI']
+    }
+  }
+}
+</script>
+<style scoped lang="scss">
+.search {
+  margin: 1.25rem 0;
+  width: 84.25rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  & > .kuang {
+    width: 43.25rem;
+    height: 3.5rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    border: 0.125rem solid #414141;
+    border-radius: 0.35rem;
+    & > img {
+      width: 1.75rem;
+      height: 1.75rem;
+    }
+    & > img:hover {
+      cursor: pointer;
+    }
+    & > input {
+      width: 36rem;
+      border: none;
+      font-size: 1.25rem;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0rem;
+      color: #333333;
+      background-color: #f8f8f8;
+    }
+    & > input:focus {
+      outline: none;
+    }
+  }
+  & > .tjHold {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 1.25rem;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0rem;
+    color: #333333;
+    & > div {
+      margin-left: 2.25rem;
+      width: 25.25rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      flex-wrap: wrap;
+      font-size: 1.25rem;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0rem;
+      color: #999999;
+      & > div {
+        margin-right: 1.25rem;
+      }
+      & > div:hover {
+        cursor: pointer;
+        color: #52b6e3;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 681c728..cf3a58c 100644
--- a/src/main.js
+++ b/src/main.js
@@ -3,6 +3,17 @@ import App from './App.vue'
 import router from './router'
 import store from './store'
 import axios from 'axios'
+// 导入elementUI
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+// 导入图形验证码
+import identify from '../src/assets/js/canvas_identifying.js'
+import '../src/assets/js/flexible.js'
+// 引入swiper
+import VueAwesomeSwiper from 'vue-awesome-swiper'
+
+// require styles
+import 'swiper/dist/css/swiper.css'
 // axios请求配置
 var root = process.env.VUE_APP_BASE_API
 // console.log(root)
@@ -21,9 +32,15 @@ axios.interceptors.request.use(config => {
   // }
   return config
 })
+// 将图形验证码写入
+Vue.prototype.$identify = identify.default
+Vue.prototype.$axios = axios
+
+Vue.use(VueAwesomeSwiper)
+Vue.use(ElementUI)
+
 Vue.config.productionTip = false
 
-Vue.prototype.$axios = axios
 new Vue({
   router,
   store,
diff --git a/src/router.js b/src/router.js
index 387e2f5..b617cca 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,17 +1,51 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Index from '@/views/index/Index.vue'
+// 导航
+import Nav from '@/components/nav/Nav.vue'
+// 页脚信息
+import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
+// 公司介绍
+import CmpanyIntroduction from '@/views/companyIntroduction/CompanyIntroduction.vue'
+// 联系我们
+import Relation from '@/views/relation/Relation.vue'
+// 个人中心
+import PersonalCenter from '@/views/personalCenter/PersonalCenter.vue'
 
 Vue.use(Router)
 
 export default new Router({
   mode: 'history',
   base: process.env.BASE_URL,
-  routes: [
-    {
-      path: '/',
-      name: 'index',
-      component: Index
-    }
+  routes: [{
+    path: '/',
+    name: 'index',
+    component: Index
+  },
+  {
+    path: '/nav',
+    name: 'nav',
+    component: Nav
+  },
+  {
+    path: '/footerInfor',
+    name: 'footerInfor',
+    component: FooterInfor
+  },
+  {
+    path: '/companyIntroduction',
+    name: 'companyIntroduction',
+    component: CmpanyIntroduction
+  },
+  {
+    path: '/relation',
+    name: 'relation',
+    component: Relation
+  },
+  {
+    path: '/personalCenter',
+    name: 'personalCenter',
+    component: PersonalCenter
+  }
   ]
 })
diff --git a/src/views/companyIntroduction/CompanyIntroduction.vue b/src/views/companyIntroduction/CompanyIntroduction.vue
new file mode 100644
index 0000000..cb6b302
--- /dev/null
+++ b/src/views/companyIntroduction/CompanyIntroduction.vue
@@ -0,0 +1,240 @@
+<template>
+  <div class="companyIntroduction">
+    <Navs></Navs>
+    <div class="content">
+      <!-- 全局搜索 -->
+      <search></search>
+      <div class="cont">
+        <div class="cont_top">
+          <div class="left">公司介绍</div>
+          <div class="right">
+            <img :src="imgurl.pos" alt />
+            <span>当前位置：</span>
+            <span @click="$router.push('/')">首页</span>
+            >
+            <span @click="$router.push('/companyIntroduction')">公司介绍</span>
+          </div>
+        </div>
+        <div class="cont_bottom">
+          <div class="bottom_left">
+            <div v-for="(item,index) in componData" :key="index">
+              <img :src="item.url" alt />
+              <div class="cont">
+                <div class="title">{{item.title}}</div>
+                <div class="co">{{item.cont}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="bottom_right">
+            <div class="top">
+              <div class="left">公司简介</div>
+              <div class="right"></div>
+            </div>
+            <!-- 公司简介区域 -->
+            <div class="cont">
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;河北知时数据科技有限公司（ZSDT）是国内专业的数据、信息与软件服务提供商，是一家拥有先进软件开发技术和自主知识产权的高科技企业，在数据的挖掘、应用及服务等相关技术领域，始终保持国际领先地位。
+              <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司致力于数据领域发展，秉承“专注数据 共享价值”的企业理念，依托自身的数据资源、技术研发优势及丰富的市场运营经验，打通数据获取、数据处理、数据服务环节，通过数据挖掘分析、机器学习预测，推动相关技术、应用和产业的创新，实现数据价值最大化。
+              <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司拥有专业的数据研究团队，现有数十名10年以上从事调研方案设计、数据采集、数据分析、数据挖掘的专业人员，同时与多家国内知名院校专家保持着密切合作
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="finashLeft"></div>
+
+    <!-- 页脚信息 -->
+    <FooterInfors></FooterInfors>
+  </div>
+</template>
+<script>
+// 导航
+import Nav from '@/components/nav/Nav.vue'
+// 页脚信息
+import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
+// 全局搜索
+import search from '@/components/search/search.vue'
+export default {
+  name: 'companyIntroduction',
+  components: {
+    Navs: Nav,
+    FooterInfors: FooterInfor,
+    search: search
+  },
+  data () {
+    return {
+      imgurl: {
+        pos: require('../../../static/company/posweizhi.png')
+      },
+      componData: [
+        {
+          url: require('../../../static/company/gongsi.png'),
+          title: '企业文化',
+          cont: '持诚信互利共荣，以厚德载物'
+
+        },
+        {
+          url: require('../../../static/company/linian.png'),
+          title: '理念',
+          cont: '释放政府数据价值'
+
+        },
+        {
+          url: require('../../../static/company/dingwei.png'),
+          title: '定位',
+          cont: '数据资源及技术服务商'
+
+        },
+        {
+          url: require('../../../static/company/yuanjing.png'),
+          title: '愿景',
+          cont: '推动数据成为最有价值的资产'
+
+        }
+      ]
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  & > .cont {
+    width: 84.25rem;
+    // border: 1px solid red;
+    background-color: #fff;
+    & > .cont_top {
+      width: 100%;
+      height: 5.125rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 0.0625rem solid #dbdbdb;
+      & > .left {
+        margin-left: 1.5rem;
+        font-size: 1.5rem;
+        font-weight: bold;
+        font-stretch: normal;
+        letter-spacing: 0.125rem;
+        color: #000000;
+      }
+      & > .right {
+        margin-right: 1.5rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #8fa3ae;
+        & > img {
+          width: 1rem;
+          height: 1.25rem;
+          margin-right: 0.45rem;
+        }
+        & > span:nth-child(n + 3):hover {
+          cursor: pointer;
+          color: #52b6e3;
+        }
+      }
+    }
+    & > .cont_bottom {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: flex-start;
+      & > .bottom_left {
+        width: 42rem;
+        // border: 1px solid red;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        & > div {
+          width: 42rem;
+          height: 8.625rem;
+          display: flex;
+          flex-direction: row;
+          justify-content: flex-start;
+          align-items: center;
+          & > img {
+            margin: 0 1.5rem 0 0rem;
+            width: 3.875rem;
+            height: 3.25rem;
+          }
+          & > .cont {
+            height: 4.25rem;
+            // border: 1px solid red;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: flex-start;
+            & > .title {
+              font-size: 1.625rem;
+              font-weight: normal;
+              font-stretch: normal;
+              // line-height: 34px;
+              letter-spacing: 0rem;
+              color: #000000;
+            }
+            & > .co {
+              font-size: 1.25rem;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0rem;
+              color: #333333;
+            }
+          }
+        }
+      }
+      & > .bottom_right {
+        margin-top: 1rem;
+        width: 37.25rem;
+        // border: 1px solid red;
+
+        & > .top {
+          width: 100%;
+          height: 5.5rem;
+          font-size: 3rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 34px;
+          letter-spacing: 0.125rem;
+          color: #000000;
+          display: flex;
+          flex-direction: row;
+          justify-content: space-between;
+          align-items: center;
+          border-bottom: 0.25rem solid #dbdbdb;
+          & > .right {
+            width: 20.625rem;
+            height: 1.5rem;
+            background-color: #52b6e3;
+          }
+        }
+        & > .cont {
+          margin: 0 auto;
+          width: 36.875rem;
+          margin-top: 2.5rem;
+          // border: 1px solid red;
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          line-height: 2.125rem;
+          letter-spacing: 0.0625rem;
+          color: #333333;
+        }
+      }
+    }
+  }
+}
+.finashLeft {
+  margin-bottom: 1.875rem;
+  width: 42.875rem;
+  height: 1.5rem;
+  background-color: #52b6e3;
+}
+</style>
diff --git a/src/views/index/Index.vue b/src/views/index/Index.vue
index 717c55a..da87cf9 100644
--- a/src/views/index/Index.vue
+++ b/src/views/index/Index.vue
@@ -1,16 +1,827 @@
 <template>
-  <div>这是首页</div>
+  <div>
+    <!-- 首页导航 -->
+    <Navs></Navs>
+    <!-- content -->
+    <section class="content">
+      <!-- swiper -->
+      <div class="content_cont">
+        <!-- swiper -->
+        <swiper :options="swiperOption" class="swipersty">
+          <swiper-slide v-for="(item,index) in bannerLuBo" :key="index">
+            <img :src="item" alt style="width: 84.25rem;height: 33.25rem;" />
+          </swiper-slide>
+          <div class="swiper-pagination" slot="pagination"></div>
+          <div
+            class="swiper-button-prev"
+            slot="button-prev"
+            :style="{'background-image':'url('+lunboUp+')'}"
+          ></div>
+          <div
+            class="swiper-button-next"
+            slot="button-next"
+            :style="{'background-image':'url('+lunboNext+')'}"
+          ></div>
+        </swiper>
+        <!-- 全局搜索 -->
+        <search></search>
+        <!-- 主内容 -->
+        <div class="mainCont">
+          <div class="mainCont_left">
+            <div class="left1">
+              <div class="header">快速查询（专题统计报表）</div>
+              <img :src="titleimg" alt />
+              <el-tabs v-model="activeName" @tab-click="handleClick">
+                <el-tab-pane
+                  :label="item.label"
+                  :name="item.name"
+                  v-for="(item,index) in dataSearchDatas"
+                  :key="index"
+                  class="Listpane"
+                >
+                  <div class="ListpaneLeft">
+                    <div v-for="(listLeft,keyLeft) in item.textArrLeft" :key="keyLeft">{{listLeft}}</div>
+                  </div>
+                  <div class="center"></div>
+                  <div class="ListpaneRight">
+                    <div
+                      v-for="(listRight,keyRight) in item.textArrRight"
+                      :key="keyRight"
+                      class="ListpaneRight"
+                    >{{listRight}}</div>
+                  </div>
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+            <div class="left2">
+              <div class="header">可视化图表</div>
+              <img :src="titleimg" alt />
+              <div class="top">可视化统计图秉持方便易用的理念展示统计数字，通过简单的图像或动态界面及互动式统计图，您可更清楚了解一些统计指标。</div>
+              <!-- swiper -->
+              <swiper :options="swiperOptionS" class="swipersty" style="margin-top:1.2rem;">
+                <swiper-slide v-for="(item,index) in dataSwiperS" :key="index">
+                  <img :src="item.url" alt style="width:16.125rem;height:11.25rem;" />
+                  <div class="cont">
+                    <div class="top">
+                      {{item.label}}
+                      <span>/{{'0'}}{{index+1}}</span>
+                    </div>
+                    <div class="bottom">{{item.compone}}</div>
+                  </div>
+                </swiper-slide>
+                <div class="swiper-pagination" slot="pagination"></div>
+                <div
+                  class="swiper-button-prev"
+                  slot="button-prev"
+                  :style="{'background-image':'url('+ksLeft+')'}"
+                ></div>
+                <div
+                  class="swiper-button-next"
+                  slot="button-next"
+                  :style="{'background-image':'url('+ksRight+')'}"
+                ></div>
+              </swiper>
+            </div>
+            <div class="left3">
+              <div class="header">数据资讯</div>
+              <img :src="titleimg" alt />
+              <div class="dataMessage" v-for="(item,index) in dataZxun" :key="index">
+                <div class="message_left">
+                  <div class="top">{{item.title}}</div>
+                  <div class="center">{{item.cont}}</div>
+                  <div class="bottom">
+                    <span>{{item.time}}</span>
+                    <span>查看详情</span>
+                  </div>
+                </div>
+                <img :src="item.url" alt />
+              </div>
+              <div class="moreD">
+                <div>查看更多-></div>
+              </div>
+            </div>
+          </div>
+          <div class="mainCont_right">
+            <div class="right1">
+              <div class="title">数据更新</div>
+              <div class="content">
+                <div v-for="(item,index) in dataUpdata" :key="index">
+                  <div class="up">
+                    {{computedStr(item.title)}}
+                    <div class="next">({{item.updataTime}})</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="right2">
+              <div class="title">24小时热文</div>
+              <div class="content">
+                <div v-for="(item,index) in twentyFourtimeData" :key="index">
+                  <img :src="item.url" alt />
+                  <div>
+                    <div class="top">{{item.title}}</div>
+                    <div class="bottom">{{item.content}}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- 页脚信息 -->
+    <FooterInfors></FooterInfors>
+  </div>
 </template>
 
 <script>
+// 导航
+import Nav from '@/components/nav/Nav.vue'
+// 页脚信息
+import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
+// 全局搜索
+import search from '@/components/search/search.vue'
 export default {
+  name: 'index',
+  components: {
+    Navs: Nav,
+    FooterInfors: FooterInfor,
+    search: search
+  },
   data () {
     return {
-
+      swiperOption: {
+        spaceBetween: 30,
+        centeredSlides: true,
+        autoplay: {
+          delay: 2500,
+          disableOnInteraction: false
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      },
+      bannerLuBo: [
+        require('../../../static/index/banner1.png'),
+        require('../../../static/index/banner1.png'),
+        require('../../../static/index/banner1.png'),
+        require('../../../static/index/banner1.png'),
+        require('../../../static/index/banner1.png'),
+        require('../../../static/index/banner1.png'),
+        require('../../../static/index/banner1.png')
+      ],
+      lunboUp: require('../../../static/index/leftS.png'),
+      lunboNext: require('../../../static/index/rightS.png'),
+      titleimg: require('../../../static/index/title12.png'),
+      ksLeft: require('../../../static/index/ksLeft.png'),
+      ksRight: require('../../../static/index/ksRight.png'),
+      // 默认选中
+      activeName: 'first',
+      // 月度、季度、年度数据
+      dataSearchDatas: [
+        {
+          label: '月度 /Monthly',
+          name: 'first',
+          textArrLeft: [
+            '月度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
+            '月度工业增加值增工业增加值增速工业速。',
+            '月度工业增加值增速。',
+            '月度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
+          ],
+          textArrRight: [
+            '月度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
+            '月度工业增加值增工业增加值增速工业速。',
+            '月度工业增加值增速。',
+            '月度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
+          ]
+        },
+        {
+          label: '季度 /Quarter',
+          name: 'second',
+          textArrLeft: [
+            '季度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
+            '季度工业增加值增工业增加值增速工业速。',
+            '季度工业增加值增速。',
+            '季度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
+          ],
+          textArrRight: [
+            '季度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
+            '季度工业增加值增工业增加值增速工业速。',
+            '季度工业增加值增速。',
+            '季度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
+          ]
+        },
+        {
+          label: '年度 /Year',
+          name: 'third',
+          textArrLeft: [
+            '年度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
+            '年度工业增加值增工业增加值增速工业速。',
+            '年度工业增加值增速。',
+            '年度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
+          ],
+          textArrRight: [
+            '年度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
+            '年度工业增加值增工业增加值增速工业速。',
+            '年度工业增加值增速。',
+            '年度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
+          ]
+        }
+      ],
+      swiperOptionS: {
+        spaceBetween: 30,
+        centeredSlides: true,
+        autoplay: {
+          delay: 2500,
+          disableOnInteraction: false
+        },
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev'
+        }
+      },
+      dataSwiperS: [
+        {
+          url: require('../../../static/index/luboer.png'),
+          label: '大中城市住宅销售价格',
+          compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
+        },
+        {
+          url: require('../../../static/index/luboer.png'),
+          label: '大中城市住宅销售价格',
+          compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
+        },
+        {
+          url: require('../../../static/index/luboer.png'),
+          label: '大中城市住宅销售价格',
+          compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
+        },
+        {
+          url: require('../../../static/index/luboer.png'),
+          label: '大中城市住宅销售价格',
+          compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
+        }
+      ],
+      // 资讯数据
+      dataZxun: [
+        {
+          title: '这里是资讯',
+          cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
+          time: '57分钟前',
+          url: require('../../../static/index/zixuntu.png')
+        },
+        {
+          title: '这里是资讯',
+          cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
+          time: '57分钟前',
+          url: require('../../../static/index/zixuntu.png')
+        },
+        {
+          title: '这里是资讯',
+          cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
+          time: '57分钟前',
+          url: require('../../../static/index/zixuntu.png')
+        },
+        {
+          title: '这里是资讯',
+          cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
+          time: '57分钟前',
+          url: require('../../../static/index/zixuntu.png')
+        }
+      ],
+      // 数据更新
+      dataUpdata: [
+        {
+          title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
+          updataTime: '2019-09-06 17:47:39'
+        },
+        {
+          title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
+          updataTime: '2019-09-06 17:47:39'
+        },
+        {
+          title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
+          updataTime: '2019-09-06 17:47:39'
+        },
+        {
+          title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
+          updataTime: '2019-09-06 17:47:39'
+        },
+        {
+          title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
+          updataTime: '2019-09-06 17:47:39'
+        },
+        {
+          title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）（按旅游目的分组）',
+          updataTime: '2019-09-06 17:47:39'
+        }
+      ],
+      // 24小时热闻数据
+      twentyFourtimeData: [
+        {
+          url: require('../../../static/index/timeLZ.png'),
+          title: '这是标题',
+          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
+        },
+        {
+          url: require('../../../static/index/timeLZ.png'),
+          title: '这是标题',
+          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
+        },
+        {
+          url: require('../../../static/index/timeLZ.png'),
+          title: '这是标题',
+          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
+        },
+        {
+          url: require('../../../static/index/timeLZ.png'),
+          title: '这是标题',
+          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
+        },
+        {
+          url: require('../../../static/index/timeLZ.png'),
+          title: '这是标题',
+          content: '数据热文数据热文数据热文数据热文数据热文数据热文'
+        }
+      ]
+    }
+  },
+  methods: {
+    handleClick (tab, event) {
+      console.log(tab, event)
+    }
+  },
+  computed: {
+    // 计算字符串
+    computedStr () {
+      return (str) => {
+        let Strs = ''
+        str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
+        return Strs
+      }
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
+.content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  & > .content_cont {
+    width: 84.25rem;
+    // border: 1px solid red;
+    & > .swipersty {
+      width: 100%;
+      height: 33.25rem;
+    }
+    & > .mainCont {
+      margin-top: 3.125rem;
+      margin-bottom:3.125rem;
+      width: 100%;
+      // border: 0.0625rem solid red;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: flex-start;
+      & > .mainCont_left {
+        // border: 0.0625rem solid red;
+        width: 55.625rem;
+        box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
+        background-color: #fff;
+        & > .left1 {
+          margin-top: 2.5rem;
+          width: 100%;
+          & > .header {
+            width: 100%;
+            text-align: center;
+            font-size: 1.625rem;
+            font-weight: bold;
+            font-stretch: normal;
+            letter-spacing: 0.375rem;
+            color: #000000;
+          }
+          & > img {
+            width: 100%;
+            height: 0.75rem;
+          }
+          /deep/ .el-tabs__item {
+            font-size: 1.4rem;
+            font-weight: bold;
+            font-stretch: normal;
+          }
+          .Listpane {
+            padding: 1.25rem;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+
+            & > .ListpaneLeft {
+              width: 24.75rem;
+              display: flex;
+              flex-direction: column;
+              justify-content: flex-start;
+              align-items: flex-start;
+              & > div {
+                width: 100%;
+                height: 4.375rem;
+                font-size: 1.125rem;
+                font-weight: normal;
+                font-stretch: normal;
+                line-height: 2rem;
+                letter-spacing: 0rem;
+                color: #666666;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: flex-start;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2; /* 省略号在第几行 */
+                -webkit-box-orient: vertical;
+              }
+              & > div:nth-last-child(n + 2) {
+                border-bottom: 0.0625rem solid #f0f0f0;
+              }
+              & > div:hover {
+                cursor: pointer;
+                color: #52b6e3;
+              }
+            }
+            & > .center {
+              width: 0.125rem;
+              height: 17rem;
+              background-color: #dbdbdb;
+            }
+            & > .ListpaneRight {
+              width: 24.75rem;
+              display: flex;
+              flex-direction: column;
+              justify-content: flex-start;
+              align-items: flex-start;
+              & > div {
+                width: 100%;
+                height: 4.375rem;
+                font-size: 1.125rem;
+                font-weight: normal;
+                font-stretch: normal;
+                line-height: 2rem;
+                letter-spacing: 0rem;
+                color: #666666;
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+                align-items: flex-start;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2; /* 省略号在第几行 */
+                -webkit-box-orient: vertical;
+              }
+              & > div:nth-last-child(n + 2) {
+                border-bottom: 0.0625rem solid #f0f0f0;
+              }
+              & > div:hover {
+                cursor: pointer;
+                color: #52b6e3;
+              }
+            }
+          }
+        }
+        & > .left2 {
+          width: 100%;
+          & > .header {
+            width: 100%;
+            text-align: center;
+            font-size: 1.625rem;
+            font-weight: bold;
+            font-stretch: normal;
+            letter-spacing: 0.375rem;
+            color: #000000;
+          }
+          & > img {
+            width: 100%;
+            height: 0.75rem;
+          }
+          & > .top {
+            margin: 0 auto;
+            width: 39.75rem;
+            text-align: center;
+            font-size: 1rem;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0.125rem;
+            color: #565656;
+          }
+          /deep/.swiper-slide {
+            display: flex;
+            flex-direction: row;
+            justify-content: space-evenly;
+            align-items: flex-start;
+            & > .cont {
+              display: flex;
+              flex-direction: column;
+              justify-content: flex-start;
+              align-items: flex-start;
+              & > .top {
+                font-size: 1.375rem;
+                font-weight: bold;
+                font-stretch: normal;
+                line-height: 1.125rem;
+                letter-spacing: 0.125rem;
+                color: #333333;
+                & > span {
+                  color: #52b6e3;
+                }
+              }
+              & > .bottom {
+                width: 32.125rem;
+                font-size: 1.125rem;
+                font-weight: normal;
+                font-stretch: normal;
+                line-height: 2.125rem;
+                letter-spacing: 0rem;
+                color: #2d2d2d;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 4; /* 省略号在第几行 */
+                -webkit-box-orient: vertical;
+              }
+            }
+          }
+        }
+        & > .left3 {
+          margin-top: 1.5rem;
+          width: 100%;
+          & > .header {
+            width: 100%;
+            text-align: center;
+            font-size: 1.625rem;
+            font-weight: bold;
+            font-stretch: normal;
+            letter-spacing: 0.375rem;
+            color: #000000;
+          }
+          & > img {
+            width: 100%;
+            height: 0.75rem;
+          }
+          & > .dataMessage {
+            width: 100%;
+            height: 10.625rem;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: center;
+            & > .message_left {
+              width: 39.125rem;
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+              align-items: flex-start;
+              & > .top {
+                width: 39.125rem;
+                font-size: 1.375rem;
+                font-weight: normal;
+                font-stretch: normal;
+                // line-height: 1.375rem;
+                letter-spacing: 0.125rem;
+                color: #232323;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 1; /* 省略号在第几行 */
+                -webkit-box-orient: vertical;
+              }
+              & > .center {
+                width: 39.125rem;
+                font-size: 1.25rem;
+                font-weight: normal;
+                font-stretch: normal;
+                line-height: 2rem;
+                letter-spacing: 0rem;
+                color: #424242;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                display: -webkit-box;
+                -webkit-line-clamp: 2; /* 省略号在第几行 */
+                -webkit-box-orient: vertical;
+              }
+              & > .bottom {
+                width: 37.625rem;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
+                & > span:nth-child(1) {
+                  font-size: 1rem;
+                  font-weight: normal;
+                  font-stretch: normal;
+                  line-height: 1.875rem;
+                  letter-spacing: 0rem;
+                  color: #999999;
+                }
+                & > span:nth-child(2) {
+                  padding: 0.125rem 0.75rem;
+                  font-size: 1rem;
+                  font-weight: normal;
+                  font-stretch: normal;
+                  line-height: 1.875rem;
+                  letter-spacing: 0rem;
+                  color: #999999;
+                  border: 0.0625rem solid #999;
+                  border-radius: 0.9375rem;
+                }
+                & > span:nth-child(2):hover {
+                  cursor: pointer;
+                  color: #52b6e3;
+                  border: 0.0625rem solid #52b6e3;
+                }
+              }
+            }
+            & > img {
+              width: 13.125rem;
+              height: 7.5rem;
+              border-radius: 0.725rem;
+            }
+          }
+          & > .dataMessage:nth-last-child(n + 1) {
+            border-bottom: 0.0625rem solid #dbdbdb;
+          }
+          & > .moreD {
+            width: 100%;
+            height: 7.5rem;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-end;
+            align-items: center;
+            & > div {
+              margin-right: 1.5rem;
+              font-size: 1.25rem;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0.125rem;
+              color: #9ea5a7;
+            }
+            & > div:hover{
+              cursor: pointer;
+              color: #52b6e3;
+            }
+          }
+        }
+      }
+      & > .mainCont_right {
+        width: 27.375rem;
+        & > .right1 {
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: center;
+          background-color: #ffffff;
+          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
+          & > .title {
+            width: 24.875rem;
+            height: 3.75rem;
+            font-size: 1.5rem;
+            font-weight: bold;
+            font-stretch: normal;
+            letter-spacing: 0.3125rem;
+            color: #000000;
+            border-bottom: 0.0625rem solid #dbdbdb;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+          }
+          & > .content {
+            width: 24.875rem;
+            & > div {
+              width: 100%;
+              height: 5.25rem;
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              align-items: center;
+              & > .up {
+                position: relative;
+                width: 100%;
+                display: flex;
+                flex-direction: row;
+                justify-content: flex-start;
+                align-items: center;
+                flex-wrap: wrap;
+                font-size: 1.125rem;
+                line-height: 2.125rem;
+                color: #333333;
+                // border: 1px solid red;
+                & > .next {
+                  width: 12.625rem;
+                  position: absolute;
+                  right: 0;
+                  bottom: 0;
+                  font-size: 1.125rem;
+                }
+              }
+              & > .up:hover {
+                cursor: pointer;
+                color: #52b6e3;
+              }
+            }
+            & > div:nth-last-child(n + 2) {
+              border-bottom: 0.0625rem solid #dbdbdb;
+            }
+          }
+        }
+        & > .right2 {
+          margin-top: 1.25rem;
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: center;
+          background-color: #ffffff;
+          box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
+          & > .title {
+            width: 24.875rem;
+            height: 3.75rem;
+            font-size: 1.5rem;
+            font-weight: bold;
+            font-stretch: normal;
+            letter-spacing: 0.3125rem;
+            color: #000000;
+            border-bottom: 0.0625rem solid #dbdbdb;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+          }
+          & > .content {
+            width: 24.875rem;
+            & > div {
+              width: 100%;
+              height: 7.625rem;
+              display: flex;
+              flex-direction: row;
+              justify-content: space-around;
+              align-items: center;
+              & > img {
+                width: 7.25rem;
+                height: 5.125rem;
+              }
+              & > div {
+                width: 16rem;
+                height: 5.125rem;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: flex-start;
+                & > .top {
+                  font-size: 1.125rem;
+                  font-weight: normal;
+                  font-stretch: normal;
+                  // line-height: 23px;
+                  letter-spacing: 0rem;
+                  color: #333333;
+                }
+                & > .bottom {
+                  width: 16rem;
+                  font-size: 1rem;
+                  font-weight: normal;
+                  font-stretch: normal;
+                  line-height: 1.5rem;
+                  letter-spacing: 0rem;
+                  color: #666666;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  display: -webkit-box;
+                  -webkit-line-clamp: 2; /* 省略号在第几行 */
+                  -webkit-box-orient: vertical;
+                }
+              }
+            }
+            & > div:hover {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/views/personalCenter/PersonalCenter.vue b/src/views/personalCenter/PersonalCenter.vue
new file mode 100644
index 0000000..88eece8
--- /dev/null
+++ b/src/views/personalCenter/PersonalCenter.vue
@@ -0,0 +1,12 @@
+<template>
+  <div></div>
+</template>
+<script>
+export default {
+  name: 'personal'
+
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/views/relation/Relation.vue b/src/views/relation/Relation.vue
new file mode 100644
index 0000000..38b55cd
--- /dev/null
+++ b/src/views/relation/Relation.vue
@@ -0,0 +1,275 @@
+<template>
+  <div class="relation">
+    <!-- 首页导航 -->
+    <Navs></Navs>
+    <div class="relation_cont">
+      <div class="header">
+        <div class="left">联系我们</div>
+        <div class="right">
+          <img :src="imgurl.pos" alt />
+          <span>当前位置：</span>
+          <span @click="$router.push('/')">首页</span>
+          >
+          <span @click="$router.push('/relation')">联系我们</span>
+        </div>
+      </div>
+      <div class="center">
+        <div class="title">留言板</div>
+        <div class="center_input">
+          <input type="text" placeholder="姓名*" v-model="leave.name" />
+          <input type="text" placeholder="邮箱*" v-model="leave.mail" />
+          <input type="text" placeholder="电话*" v-model="leave.iphone" />
+        </div>
+        <input type="text" placeholder="标题*" v-model="leave.title" />
+        <textarea v-model="leave.cont" placeholder="留言内容*"></textarea>
+        <div class="sub">提交</div>
+      </div>
+      <div class="bottom">
+        <div class="contactWay">联系方式</div>
+        <div class="contactWay_cont">
+          <div v-for="(item,index) in relationData" :key="index">
+            <div>
+              <span>地区</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.region}}
+            </div>
+            <div>
+              <span>联系人</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;{{item.name}}
+            </div>
+            <div>
+              <span>电话</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.iphone}}
+            </div>
+            <div>
+              <span>地址</span>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{item.site}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 页脚信息 -->
+    <FooterInfors></FooterInfors>
+  </div>
+</template>
+<script>
+// 导航
+import Nav from '@/components/nav/Nav.vue'
+// 页脚信息
+import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
+export default {
+  name: 'relation',
+  components: {
+    Navs: Nav,
+    FooterInfors: FooterInfor
+  },
+  data () {
+    return {
+      imgurl: {
+        pos: require('../../../static/company/posweizhi.png')
+      },
+      leave: {
+        name: '',
+        mail: '',
+        iphone: '',
+        title: '',
+        cont: ''
+      },
+      relationData: [
+        {
+          region: '华东',
+          name: '李先生',
+          iphone: '000-12345678',
+          site: '北京市西城区月坛南街57号'
+        },
+        {
+          region: '华东',
+          name: '李先生',
+          iphone: '000-12345678',
+          site: '北京市西城区月坛南街57号'
+        },
+        {
+          region: '华东',
+          name: '李先生',
+          iphone: '000-12345678',
+          site: '北京市西城区月坛南街57号'
+        }
+      ]
+    }
+  }
+
+}
+</script>
+<style lang="scss" scoped>
+.relation_cont {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  & > .header {
+    width: 84.25rem;
+    height: 4.25rem;
+    // border: 1px solid red;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    & > .left {
+      // margin-left: 1.5rem;
+      font-size: 1.5rem;
+      font-weight: bold;
+      font-stretch: normal;
+      letter-spacing: 0.125rem;
+      color: #000000;
+    }
+    & > .right {
+      // margin-right: 1.5rem;
+      font-size: 1.25rem;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0rem;
+      color: #8fa3ae;
+      & > img {
+        width: 1rem;
+        height: 1.25rem;
+        margin-right: 0.45rem;
+      }
+      & > span:nth-child(n + 3):hover {
+        cursor: pointer;
+        color: #52b6e3;
+      }
+    }
+  }
+  & > .center {
+    width: 84.25rem;
+    height: 63.5rem;
+    // border: 1px solid red;
+    background-color: #ffffff;
+    box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    & > .title {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 8.75rem;
+      font-size: 1.5rem;
+      font-weight: normal;
+      font-stretch: normal;
+      // line-height: 19px;
+      letter-spacing: 0rem;
+      color: #000000;
+    }
+    & > .center_input {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      & > input {
+        width: 21.25rem;
+        height: 3.125rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #666666;
+        opacity: 0.7;
+      }
+    }
+    & > input {
+      width: 77.4rem;
+      height: 3.125rem;
+      font-size: 1.25rem;
+      font-weight: normal;
+      font-stretch: normal;
+      letter-spacing: 0rem;
+      color: #666666;
+      opacity: 0.7;
+    }
+    & > textarea {
+      width: 77.4rem;
+      height: 35rem;
+    }
+    & > .sub {
+      width: 23.5rem;
+      height: 3.5rem;
+      background-color: #52b6e3;
+      border-radius: 0.3125rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      font-size: 1.375rem;
+      font-weight: normal;
+      font-stretch: normal;
+      // line-height: 19px;
+      letter-spacing: 0rem;
+      color: #ffffff;
+    }
+    & > .sub:hover {
+      cursor: pointer;
+    }
+  }
+  & > .bottom {
+    width: 84.25rem;
+    // border: 1px solid red;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    & > .contactWay {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+      height: 6.2rem;
+      font-size: 1.5rem;
+      font-weight: normal;
+      font-stretch: normal;
+      // line-height: 19px;
+      letter-spacing: 0rem;
+      color: #000000;
+    }
+    & > .contactWay_cont {
+      margin-bottom:2.375rem;
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      & > div {
+        width: 22.25rem;
+        height: 10.625rem;
+        // border: 1px solid red;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: flex-start;
+        & > div {
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0rem;
+          color: #666666;
+          & > span {
+            font-size: 1.25rem;
+            font-weight: normal;
+            font-stretch: normal;
+            letter-spacing: 0rem;
+            color: #333333;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/static/company/dingwei.png b/static/company/dingwei.png
new file mode 100644
index 0000000..4aad0e0
Binary files /dev/null and b/static/company/dingwei.png differ
diff --git a/static/company/gongsi.png b/static/company/gongsi.png
new file mode 100644
index 0000000..098a698
Binary files /dev/null and b/static/company/gongsi.png differ
diff --git a/static/company/linian.png b/static/company/linian.png
new file mode 100644
index 0000000..2bc8fc0
Binary files /dev/null and b/static/company/linian.png differ
diff --git a/static/company/posweizhi.png b/static/company/posweizhi.png
new file mode 100644
index 0000000..8f0ce9f
Binary files /dev/null and b/static/company/posweizhi.png differ
diff --git a/static/company/yuanjing.png b/static/company/yuanjing.png
new file mode 100644
index 0000000..7702bbe
Binary files /dev/null and b/static/company/yuanjing.png differ
diff --git a/static/footerInfor/tbomRight.png b/static/footerInfor/tbomRight.png
new file mode 100644
index 0000000..961b563
Binary files /dev/null and b/static/footerInfor/tbomRight.png differ
diff --git a/static/footerInfor/tbomleft.png b/static/footerInfor/tbomleft.png
new file mode 100644
index 0000000..cb36a97
Binary files /dev/null and b/static/footerInfor/tbomleft.png differ
diff --git a/static/index/banner1.png b/static/index/banner1.png
new file mode 100644
index 0000000..64d6225
Binary files /dev/null and b/static/index/banner1.png differ
diff --git a/static/index/ksLeft.png b/static/index/ksLeft.png
new file mode 100644
index 0000000..833ddac
Binary files /dev/null and b/static/index/ksLeft.png differ
diff --git a/static/index/ksRight.png b/static/index/ksRight.png
new file mode 100644
index 0000000..3eeea5e
Binary files /dev/null and b/static/index/ksRight.png differ
diff --git a/static/index/leftS.png b/static/index/leftS.png
new file mode 100644
index 0000000..10cb161
Binary files /dev/null and b/static/index/leftS.png differ
diff --git a/static/index/luboer.png b/static/index/luboer.png
new file mode 100644
index 0000000..76de314
Binary files /dev/null and b/static/index/luboer.png differ
diff --git a/static/index/rightS.png b/static/index/rightS.png
new file mode 100644
index 0000000..87d8320
Binary files /dev/null and b/static/index/rightS.png differ
diff --git a/static/index/search.png b/static/index/search.png
new file mode 100644
index 0000000..8c556ef
Binary files /dev/null and b/static/index/search.png differ
diff --git a/static/index/timeLZ.png b/static/index/timeLZ.png
new file mode 100644
index 0000000..60d4a90
Binary files /dev/null and b/static/index/timeLZ.png differ
diff --git a/static/index/title12.png b/static/index/title12.png
new file mode 100644
index 0000000..e5b5779
Binary files /dev/null and b/static/index/title12.png differ
diff --git a/static/index/zixuntu.png b/static/index/zixuntu.png
new file mode 100644
index 0000000..399771e
Binary files /dev/null and b/static/index/zixuntu.png differ
diff --git a/static/nav/deleteImg.png b/static/nav/deleteImg.png
new file mode 100644
index 0000000..a7b0525
Binary files /dev/null and b/static/nav/deleteImg.png differ
diff --git a/static/nav/navlogo.png b/static/nav/navlogo.png
new file mode 100644
index 0000000..b265a81
Binary files /dev/null and b/static/nav/navlogo.png differ
diff --git a/static/nav/search.png b/static/nav/search.png
new file mode 100644
index 0000000..d273b32
Binary files /dev/null and b/static/nav/search.png differ
diff --git a/static/nav/username.png b/static/nav/username.png
new file mode 100644
index 0000000..9b45035
Binary files /dev/null and b/static/nav/username.png differ
diff --git a/static/nav/userpwds.png b/static/nav/userpwds.png
new file mode 100644
index 0000000..15956b1
Binary files /dev/null and b/static/nav/userpwds.png differ
diff --git a/static/nav/xl.png b/static/nav/xl.png
new file mode 100644
index 0000000..3983a4c
Binary files /dev/null and b/static/nav/xl.png differ