package-lock.json

@@ -2361,6 +2361,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.nlark.com/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1619755921381&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@@ -2400,6 +2408,14 @@
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
       "dev": true
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npm.taobao.org/axios/download/axios-0.21.1.tgz",
+      "integrity": "sha1-IlY0gZYvTWvemnbVFu8OXTwJsrg=",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1611946213770&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
@@ -2414,6 +2430,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+    },
     "babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz?cache=0&sync_timestamp=1606424647115&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.2.tgz",
@@ -2465,6 +2486,27 @@
         "@babel/helper-define-polyfill-provider": "^0.2.2"
       }
     },
+    "babel-runtime": {
+      "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=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1624966056491&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714298273&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
@@ -4119,8 +4161,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.5",
@@ -4569,6 +4610,19 @@
       "integrity": "sha1-L9FKTlT3dmWHL04j/PSWjoNjgiA=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.3",
+      "resolved": "https://registry.nlark.com/element-ui/download/element-ui-2.15.3.tgz",
+      "integrity": "sha1-VRCKuCo7zGRuewVwhxxIupYwBlI=",
+      "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.4",
       "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz?cache=0&sync_timestamp=1612290836352&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.4.tgz",
@@ -5809,8 +5863,7 @@
     "follow-redirects": {
       "version": "1.14.1",
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.1.tgz?cache=0&sync_timestamp=1620555234886&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.14.1.tgz",
-      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M=",
-      "dev": true
+      "integrity": "sha1-2RFN7Qoc/dM04WTmZirQK/2R/0M="
     },
     "for-in": {
       "version": "1.0.2",
@@ -7874,6 +7927,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.29.1",
+      "resolved": "https://registry.nlark.com/moment/download/moment-2.29.1.tgz",
+      "integrity": "sha1-sr52n6MZQL6e7qZGnAdeNQBvo9M="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz",
@@ -8093,6 +8151,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/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",
@@ -9887,6 +9950,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz?cache=0&sync_timestamp=1613054898763&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.20.0.tgz",
@@ -11083,6 +11151,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",

package.json

@@ -8,7 +8,10 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.3",
+    "moment": "^2.29.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

src/App.vue

@@ -1,32 +1,27 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
+    <headere></headere>
     <router-view/>
+    <foot></foot>
   </div>
 </template>
 
-<style lang="less">
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+<script>
+import headere from './components/heads/index.vue'
+import foot from './components/foot/index.vue'
+export default {
+  components: {
+    headere,
+    foot
+  }
 }
+</script>
 
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
+<style lang="less">
+#app {
+  background: #fff;
+  min-width: 1500px;
+  margin: 0;
+  padding: 0;
 }
 </style>

src/assets/compatible.less

@@ -0,0 +1,75 @@
+// 圆形兼容
+@media screen and (min-width: 1650px) and (max-width: 1700px) {
+    .review {
+     .contentList {
+       .circular {
+         .txtbox{
+           left: 50%;
+           margin-left: -45%;
+           top: 8%;
+         }
+       }
+     }
+    }
+ }
+ @media screen and (min-width: 1600px) and (max-width: 1650px) {
+   .review {
+     .contentList {
+       .circular {
+         .txtbox{
+           left: 50%;
+           margin-left: -50%;
+           top: 8%;
+           .year {
+             font-size: 1.2em;
+           }
+           .title {
+             font-size: 0.8em;
+           }
+           .date {
+             font-size: 2em;
+           }
+           .text {
+             font-size: 0.8em;
+           }
+         }
+       }
+     }
+   }
+ }
+ @media screen and (max-width: 1600px) {
+    .review {
+      .contentList {
+        .circular {
+            transform:rotate(43deg);
+            -ms-transform:rotate(43deg);
+            -moz-transform:rotate(43deg);
+            -webkit-transform:rotate(43deg);
+            -o-transform:rotate(43deg);
+          .txtbox{
+            left: 50%;
+            margin-left: -45%;
+            top: 10%;
+            transform:rotate(-43deg);
+            -ms-transform:rotate(-43deg);
+            -moz-transform:rotate(-43deg);
+            -webkit-transform:rotate(-43deg);
+            -o-transform:rotate(-43deg);
+            .year {
+              font-size: 1em;
+            }
+            .title {
+              font-size: 0.8em;
+            }
+            .date {
+              font-size: 1.2em;
+            }
+            .text {
+              line-height: 2em;
+              font-size: 0.5em;
+            }
+          }
+        }
+      }
+    }
+  }

src/assets/index.less

@@ -0,0 +1,68 @@
+html, body, #app{
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background: #fff;
+}
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+[class*=" el-icon-naf"], [class^=el-icon-naf] {
+  font-family: naf-icons!important;
+}
+::-webkit-scrollbar {/*滚动条整体样式*/
+  width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  border-radius: 5px;
+  background: hsla(220,4%,58%,.3)
+}
+::-webkit-scrollbar-track {/*滚动条里面轨道*/
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+  background: #EDEDED;
+}
+.el-menu-item [class^=naf-icon],.el-submenu [class^=naf-icon] {
+  vertical-align: middle;
+  margin-right: 5px;
+  width: 24px;
+  text-align: center;
+  font-size: 18px;
+}
+.flex.el-tabs {
+  display: flex;
+  flex-direction: column;
+  .el-tabs__content {
+    flex: 1;
+  }
+}
+.el-message {
+  z-index: 9999 !important;
+}
+.el-transfer.compact {
+  .el-transfer-panel {
+    width: 160px;
+  }
+  .el-transfer__buttons {
+    padding: 0 10px;
+  }
+  .el-transfer__buttons > .el-transfer__button {
+    padding: 9px 5px;
+  }
+  .el-transfer__button + .el-transfer__button {
+    margin-left: 5px;
+  }
+  .el-transfer-panel__item {
+    width: 100%;
+  }
+}
+.el-tooltip__popper.is-dark {
+  opacity: 0.8;
+}
+.large-icon {
+  font-size: 2em;
+}

src/components/HelloWorld.vue

@@ -1,60 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/banner.vue

@@ -0,0 +1,56 @@
+<template>
+  <el-carousel indicator-position="none" height="500px" class="carousel">
+    <el-carousel-item v-for="(item, index) in list" :key="index">
+      <img :src="item.path" alt="banner" class="banner" @click="btn(item)">
+    </el-carousel-item>
+  </el-carousel>
+</template>
+
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+      list: [
+        {
+          title: '图片1',
+          shortTitle: '这是第一张图片',
+          slug: '这是第一张图片描述',
+          path: require('../assets/banner/26025416.png'),
+          annex: '',
+          istop: false,
+          id: '2'
+        },
+        {
+          title: '图片2',
+          shortTitle: '这是第2张图片',
+          slug: '这是第2张图片描述',
+          path: require('../assets/banner/26025632.png'),
+          annex: '',
+          istop: false,
+          id: '2'
+        }
+      ]
+    }
+  },
+  methods: {
+    btn (e) {
+      console.log(e)
+      this.$router.push(`/page/${e.id}`)
+    }
+  },
+  mounted () {}
+}
+</script>
+
+<style lang="less" scoped>
+.carousel {
+  margin-top: 10px;
+}
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
+</style>

src/components/breadcrumb.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="breadcrumbbox">
+    <span class="you">您的位置：</span>
+    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
+      <el-breadcrumb-item>首页</el-breadcrumb-item>
+      <el-breadcrumb-item>{{ item }}</el-breadcrumb-item>
+      <el-breadcrumb-item v-if="type && type !== ''">{{ type }}</el-breadcrumb-item>
+    </el-breadcrumb>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    item: String,
+    type: String
+  },
+  components: {},
+  data () {
+    return {}
+  },
+  methods: {},
+  mounted () {}
+}
+</script>
+
+<style lang="less" scoped>
+.breadcrumbbox {
+  width: 100%;
+  border: 1px solid #e2e6f6;
+  display: flex;
+  .you {
+    margin: 1% 0 1% 15%;
+    color: #000;
+  }
+  .breadcrumb {
+    margin: 1.2%;
+  }
+}
+</style>

src/components/foot/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="infosbox">
+    <div class="box">
+      <links></links>
+      <div class="textbox">
+        <div class="infobox">
+          <div class="info">
+            <div class="title">主办单位：</div>
+            <div class="text">{{ datas && datas.company }}</div>
+          </div>
+          <div class="info">
+            <div class="title">单位电话：</div>
+            <div class="text">{{ datas && datas.phone }}</div>
+          </div>
+          <div class="info">
+            <div class="title">单位地址：</div>
+            <div class="text">{{ datas && datas.address }}</div>
+          </div>
+          <div class="info">
+            <div class="title">单位邮编：</div>
+            <div class="text">{{ datas && datas.postcode }}</div>
+          </div>
+          <div class="info">
+            <div class="title">备案号：</div>
+            <div class="text">{{ datas && datas.record }}</div>
+          </div>
+        </div>
+        <img src="../../assets/foot/sy.png" alt="事业单位" class="sydw">
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import links from './links.vue'
+export default {
+  components: {
+    links
+  },
+  data () {
+    return {
+      datas: {
+        // 名称
+        name: '吉林省社会科学院、吉林省社会科学界联合会 © 2021',
+        // 描述
+        describe: '',
+        // 单位
+        company: '吉林省社会科学院、吉林省社会科学界联合会 © 2021',
+        // 电话
+        phone: '0431-84637225（编辑室）　0431-81294835（编务室）　',
+        // 地址
+        address: '吉林省长春市自由大路5399号',
+        // 邮箱
+        mail: 'jjzh1985@vip.163.com',
+        // 邮编
+        postcode: '130033',
+        // 备案号
+        record: '吉ICP备 15003060号-1'
+      }
+    }
+  },
+  methods: {},
+  mounted () {}
+}
+</script>
+
+<style lang="less" scoped>
+.infosbox {
+  width: 100%;
+  height: 250px;
+  background: #ebebeb;
+  .box {
+    width: 80%;
+    margin: 0 auto;
+  }
+  .infobox {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    padding-top: 25px;
+    .info {
+      width: 49%;
+      display: flex;
+      margin-top: 5px;
+      .title {
+        width: 15%;
+        text-align: left;
+        color: #666;
+        font-size: 0.8em;
+      }
+      .text {
+        width: 70%;
+        text-align: left;
+        color: #666;
+        font-size: 0.8em;
+      }
+    }
+  }
+  .textbox {
+    display: flex;
+  }
+  .sydw {
+    display: block;
+    margin: 2% 0 0 -10%;
+    height: 4em;
+  }
+}
+</style>

src/components/foot/links.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="linkbox">
+    <span>友情链接</span>
+    <div class="imgbox">
+      <a v-for="(item, index) in list" :key="index" :href="item.links">
+        <img class="item" :src="item.path" :alt="item.name">
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+      list: [
+        {
+          name: '友情链接1',
+          path: require('../../assets/foot/y1.png'),
+          links: 'http://baidu.com'
+        },
+        {
+          name: '友情链接2',
+          path: require('../../assets/foot/y2.png'),
+          links: 'http://youku.com'
+        },
+        {
+          name: '友情链接3',
+          path: require('../../assets/foot/y3.png'),
+          links: 'http://taobao.com'
+        },
+        {
+          name: '友情链接4',
+          path: require('../../assets/foot/y4.png'),
+          links: 'http://4399.com'
+        },
+        {
+          name: '友情链接2',
+          path: require('../../assets/foot/y2.png'),
+          links: 'http://youku.com'
+        }
+      ]
+    }
+  },
+  methods: {
+    times () {
+      const a = this.list[0]
+      this.list.splice(0, 1)
+      this.list.push(a)
+    }
+  },
+  mounted () {
+    setInterval(this.times, 2000)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.linkbox {
+  display: flex;
+  padding-top: 50px;
+  span {
+    line-height: 2em;
+    width: 8%;
+  }
+  .imgbox {
+    width: 80%;
+    height: 4vh;
+    display: flex;
+    overflow: hidden;
+    .item {
+      display: block;
+      height: 100%;
+      margin: 0 10px;
+    }
+  }
+}
+</style>

src/components/heads/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="container">
+    <div class="top">
+        <img src="../../assets/logo.png" alt="logo" class="logo">
+        <div class="search">
+            <div class="inputbox">
+                <input placeholder="搜索" class="input1" type="text">
+                <button class="btn1">搜索</button>
+            </div>
+            <h3 class="el-icon-phone"> 0431-84637225</h3>
+        </div>
+    </div>
+    <menus class="menu"></menus>
+  </div>
+</template>
+
+<script>
+import menus from './menus.vue'
+export default {
+  components: {
+    menus
+  },
+  data () {
+    return {}
+  },
+  methods: {},
+  mounted () {}
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+    width: 100%;
+    margin-top: 3%;
+    .top {
+        width: 70%;
+        margin: 0 auto;
+        display: flex;
+        .logo {
+            width: 25%;
+            display: block;
+        }
+        .search {
+            width: 50%;
+            display: flex;
+            margin-left: 20%;
+            margin-top: 1em;
+            .inputbox {
+                display: flex;
+                height: 2em;
+                margin-top: 0.5em;
+                .input1 {
+                    border: none;
+                    background: #f1f1f1;
+                    height: 100%;
+                }
+                .btn1 {
+                    background: red;
+                    color: #fff;
+                    border: none;
+                    height: 100%;
+                    padding: 10px;
+                    display: block;
+                }
+            }
+            h3 {
+                margin-left: 3%;
+            }
+        }
+    }
+}
+</style>

src/components/heads/menus.vue

@@ -0,0 +1,88 @@
+<template>
+<div>
+  <div class="menubox">
+    <div class="menu">
+      <span class="menu-item" :class="itemId == '0' ? 'item' : ''" @click="btn({ code: '0' })">首页</span>
+      <span class="menu-item" :class="item.code == itemId ? 'item' : ''" v-for="(item, index) in items" :key="index" @click="btn(item)">{{item.name}}</span>
+    </div>
+  </div>
+  <div class="xian"></div>
+</div>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapState, mapActions } = createNamespacedHelpers('menu')
+export default {
+  components: {},
+  data () {
+    return {
+      itemId: '0'
+    }
+  },
+  methods: {
+    ...mapActions(['getmenu']),
+    btn (e) {
+      this.itemId = e.code
+      let types
+      if (e.code === '0') {
+        this.$router.push('/')
+        return
+      }
+      if (e.type === 1) {
+        location.href(e.uri)
+        return
+      }
+      if (e.type === 0) types = 'list'
+      if (e.type === 2) types = 'page'
+      this.$router.push(
+        { path: `/${types}/${e.code}` },
+        onComplete => {},
+        onAbort => {}
+      )
+    }
+  },
+  mounted () {
+    this.getmenu()
+    this.itemId = sessionStorage.getItem('itemId') || '0'
+  },
+  computed: {
+    ...mapState(['items'])
+  },
+  watch: {
+    itemId (val) {
+      sessionStorage.setItem('itemId', val)
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.menubox {
+  width: 100%;
+  background: #c9161d;
+  .menu {
+    width: 70%;
+    margin: 2px auto;
+    display: flex;
+    .menu-item {
+      display: block;
+      width: 10%;
+      line-height: 3em;
+      color: #fff;
+      cursor: pointer;
+      text-align: center;
+    }
+    .item {
+      background: #fff;
+      color: #c9161d;
+    }
+  }
+}
+.xian {
+  width: 100%;
+  height: 2px;
+  background: #8b0005;
+  margin-top: 3px;
+}
+</style>

src/components/sidebar/buttons.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="btnbox">
+    <div class="btn" :class="index % 2 !== 0 ? 'btn2' : ''" v-for="(item, index) in list" :key="index">
+      <div class="box">
+        <img :src="item.icons" alt="图标" class="icon">
+        <div class="textbox">
+          <span class="zhtext">{{ item.title }}</span>
+          <span class="entext">{{ item.en }}</span>
+          <b class="xian">——</b>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+      list: [
+        {
+          title: '在线投稿系统',
+          en: 'Online submission',
+          icons: require('../../assets/icons/icon1.png'),
+          uri: '',
+          path: ''
+        },
+        {
+          title: '文稿处理系统',
+          en: 'Document processing',
+          icons: require('../../assets/icons/icon2.png'),
+          uri: '',
+          path: ''
+        },
+        {
+          title: '投稿指南',
+          en: 'Guidelines',
+          icons: require('../../assets/icons/icon3.png'),
+          uri: '',
+          path: ''
+        },
+        {
+          title: '常见问题释疑',
+          en: 'Asked Questions',
+          icons: require('../../assets/icons/icon4.png'),
+          uri: '',
+          path: ''
+        },
+        {
+          title: '下载中心',
+          en: 'Download center',
+          icons: require('../../assets/icons/icon5.png'),
+          uri: '',
+          path: ''
+        }
+      ]
+    }
+  },
+  methods: {},
+  mounted () {}
+}
+</script>
+
+<style lang="less" scoped>
+.btnbox {
+  width: 100%;
+  .box {
+    width: 70%;
+    margin: 0 auto;
+    padding-top: 20px;
+    display: flex;
+    cursor: pointer;
+    .icon {
+      height: 30%;
+      margin-top: 10px;
+      margin-right: 10%;
+    }
+    .textbox {
+      width: 80%;
+      margin: 5px auto;
+      .entext {
+        font-size: 0.5em;
+      }
+      span {
+        display: block;
+        color: #fff;
+      }
+      b {
+        color: #fff;
+      }
+    }
+  }
+  .btn {
+    background: #a80002;
+  }
+  .btn2 {
+    background: #880203;
+  }
+}
+</style>

src/components/sidebar/cover.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <img src="../../assets/cover.png" alt="封面" class="cover">
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    w: String,
+    h: String
+  },
+  components: {},
+  data () {
+    return {}
+  },
+  methods: {},
+  mounted () {}
+}
+</script>
+
+<style lang="less" scoped>
+.cover {
+  display: block;
+  width: 100%;
+}
+</style>

src/components/sidebar/index.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="sidebarbox">
+    <div class="coverbox">
+      <h3 class="title">[ 本期封面 ]</h3>
+      <cover class="cover"></cover>
+      <p>经济纵横 2021第1期  总第190期</p>
+      <p>出版时间：2021年01月01日</p>
+      <el-button class="btn" size="mini">查看详细内容</el-button>
+    </div>
+    <buttons class="btns"></buttons>
+  </div>
+</template>
+
+<script>
+import cover from './cover.vue'
+import buttons from './buttons.vue'
+export default {
+  components: {
+    buttons,
+    cover
+  },
+  data () {
+    return {}
+  },
+  methods: {},
+  mounted () {}
+}
+</script>
+
+<style lang="less" scoped>
+.sidebarbox {
+  width: 15%;
+  .coverbox {
+    width: 100%;
+    background: #f0f0f0;
+    margin: 5% 0;
+    padding-bottom: 5%;
+    p {
+      width: 100%;
+      text-align: center;
+      font-size: 0.8em;
+    }
+    .title {
+      color: #a80002;
+      font-size: 1em;
+      line-height: 3em;
+      width: 100%;
+      text-align: center;
+      margin: 0;
+    }
+    .cover {
+      width: 80%;
+      margin: 0 auto;
+    }
+    .btn {
+      display: block;
+      background: #a80002;
+      color: #fff;
+      margin: 0 auto;
+    }
+  }
+  .btns {
+    margin-top: 10%;
+  }
+}
+</style>

src/components/sidebar/title.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="titlebox">
+    <div class="txtbox" :class="{ txtbox2: type !== '1', txtbox3: type == '8' }">
+      <img src="../../assets/icons/tb0.png" alt="图标" class="tb">
+      <h4>{{ title }}</h4>
+      <span>{{ en }}</span>
+    </div>
+    <div class="xian" :class="{ xian2: type !== '1' && type !== '8', xian3: type == '8' }"></div>
+    <a class="more" :class="{ more2: type == '8' }" v-if="type !== '1' && type !== '正文'" @click="btn">更多>></a>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: String,
+    en: String,
+    type: String
+  },
+  components: {},
+  data () {
+    return {}
+  },
+  methods: {
+    btn () {
+      this.$emit('jump', this.type)
+    }
+  },
+  mounted () {}
+}
+</script>
+
+<style lang="less" scoped>
+.titlebox {
+  position: relative;
+  width: 100%;
+  color: #a40000;
+  display: flex;
+  .txtbox {
+    width: 28%;
+    display: flex;
+    .tb {
+      height: 30px;
+    }
+    h4 {
+      margin: 0 10px;
+    }
+    span {
+      font-size: 0.8em;
+      line-height: 2em;
+    }
+  }
+  .txtbox2 {
+    width: 17%;
+  }
+  .xian {
+    width: 75%;
+    height: 3px;
+    background: #a40000;
+    margin: 0 10px;
+    margin-top: 2%;
+  }
+  .xian2 {
+    width: 83%;
+  }
+  .txtbox3 {
+    width: 40%;
+  }
+  .xian3 {
+    width: 60%;
+  }
+  .more {
+    position: absolute;
+    right: 2%;
+    color: #999;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .more2 {
+    right: 2%;
+    top: -40%;
+  }
+}
+</style>

src/main.js

@@ -2,9 +2,11 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import './assets/index.less'
 Vue.config.productionTip = false
-
+Vue.use(ElementUI)
 new Vue({
   router,
   store,

src/router/index.js

@@ -1,29 +1,46 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
     path: '/',
-    name: 'Home',
-    component: Home
+    name: 'home',
+    component: () => import('../views/home.vue')
   },
   {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+    path: '/page/:id',
+    name: 'page',
+    component: () => import('../views/page.vue'),
+    props: true
+  },
+  {
+    path: '/list/:id',
+    name: 'list',
+    component: () => import('../views/list.vue'),
+    props: true
+  },
+  {
+    path: '/details/:id',
+    name: 'details',
+    component: () => import('../views/details.vue'),
+    props: true
   }
 ]
 
 const router = new VueRouter({
   mode: 'history',
-  base: process.env.BASE_URL,
+  // base: process.env.BASE_URL,
   routes
 })
-
+router.beforeEach((to, from, next) => {
+  // if (to.path === from.path) return
+  // // 此处判断登录状态  失效则退回登录页  清空登录状态
+  // const token = sessionStorage.getItem('token')
+  // if (!token && !/\/login$/.test(to.path)) {
+  //   next('/login')
+  // }
+  next()
+})
 export default router

src/store/column.js

@@ -0,0 +1,20 @@
+import axios from 'axios'
+const api = {
+  query: '/api/column/menuquery'
+}
+const state = {
+  items: []
+}
+const mutations = {
+  column (state, payload) {
+    state.items = payload
+  }
+}
+const actions = {
+  async getcolumn ({ commit }, payload) {
+    const res = await axios.get(api.query, { params: { code: payload.code } })
+    if (res.data.errcode === 0) commit('column', res.data.data)
+    return res
+  }
+}
+export default { state, mutations, actions, namespaced: true }

src/store/content.js

@@ -0,0 +1,33 @@
+import axios from 'axios'
+const api = {
+  query: '/api/content/query',
+  details: '/api/content/details'
+}
+const state = {
+  items: [],
+  total: 0,
+  contentitem: ''
+}
+const mutations = {
+  content (state, payload) {
+    console.log(payload)
+    state.items = payload.data
+    state.total = payload.total
+  },
+  details (state, payload) {
+    state.contentitem = payload.data
+  }
+}
+const actions = {
+  async getcontent ({ commit }, { code, skip, limit } = {}) {
+    const res = await axios.get(api.query, { params: { code, skip, limit } })
+    if (res.data.errcode === 0) commit('content', res.data)
+    return res
+  },
+  async getdetails ({ commit }, { id } = {}) {
+    const res = await axios.get(api.details, { params: { id } })
+    if (res.data.errcode === 0) commit('details', res.data)
+    return res
+  }
+}
+export default { state, mutations, actions, namespaced: true }

src/store/index.js

@@ -1,6 +1,9 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-
+import menu from './menu'
+import column from './column'
+import content from './content'
+import page from './page'
 Vue.use(Vuex)
 
 export default new Vuex.Store({
@@ -11,5 +14,9 @@ export default new Vuex.Store({
   actions: {
   },
   modules: {
+    menu,
+    column,
+    content,
+    page
   }
 })

src/store/menu.js

@@ -0,0 +1,20 @@
+import axios from 'axios'
+const api = {
+  query: '/api/menu/query'
+}
+const state = {
+  items: []
+}
+const mutations = {
+  menus (state, payload) {
+    state.items = payload
+  }
+}
+const actions = {
+  async getmenu ({ commit }, payload) {
+    const res = await axios.get(api.query)
+    if (res.data.errcode === 0) commit('menus', res.data.data)
+    return res
+  }
+}
+export default { state, mutations, actions, namespaced: true }

src/store/page.js

@@ -0,0 +1,20 @@
+import axios from 'axios'
+const api = {
+  query: '/api/page/details'
+}
+const state = {
+  pageitem: {}
+}
+const mutations = {
+  details (state, payload) {
+    state.pageitem = payload[0]
+  }
+}
+const actions = {
+  async getdetails ({ commit }, payload) {
+    const res = await axios.get(api.query, { params: { code: payload.code } })
+    if (res.data.errcode === 0) commit('details', res.data.data)
+    return res
+  }
+}
+export default { state, mutations, actions, namespaced: true }

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +1,533 @@
 <template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div class="container">
+    <banner></banner>
+    <!-- 关于我们 -->
+    <div class="about w">
+      <div class="leftbox">
+        <titles type="1" title="关于我们" en="About us"></titles>
+        <cover class="cover"></cover>
+        <div class="abouttext">
+          <h4>本刊介绍：</h4>
+          <p>
+            经济纵横》是吉林省社会科学院（社科联）主管、主办的经济学综合性学术期刊。创办于1985年，月刊，每期约20万字。
+          </p>
+          <p>
+            《经济纵横》被确定为国家社科基金资助期刊（经济学类）。同时，还是中文社会科学引文索引（CSSCI）来源期刊、全国中文核心期刊、中国人文社会科学核心期刊。近年来，多次被列入中国人民大学书报资料中心“复印报刊资料”重要转载来源期刊。2016年，被吉林省新闻出版广电局评为“吉林省一级期刊”“吉林省社科期刊30强”...
+          </p>
+          <b>→</b>
+        </div>
+      </div>
+      <bottons class="bottons"></bottons>
+    </div>
+    <!-- 本期要目 -->
+    <div class="directory w">
+      <titles type="9" title="本期要目" en="Directory" @jump="jumpList"></titles>
+      <div class="contentList">
+        <el-card class="imgbox" v-for="(item, index) in directorylist" :key="index">
+          <img :src="item.path" alt="人物">
+          <p class="text" @click="jump(item)">{{ item.text }}</p>
+          <p class="date">{{ item.date }}</p>
+        </el-card>
+      </div>
+    </div>
+    <!-- 最新动态 -->
+    <div class="news w">
+      <titles type="2" title="最新动态" en="news" @jump="jumpList"></titles>
+      <div class="contentList">
+        <div class="imngbox" v-for="(item, index) in newslist" :key="index" @click="jump(item)">
+          <img :src="item.path" alt="最新动态" class="left">
+          <div class="right">
+            <p class="title">{{ item.title }}</p>
+            <p class="date">{{ item.date }}</p>
+            <p class="text">{{ item.text }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 往期回顾 -->
+    <div class="review w">
+      <div class="titlebox">
+        <div class="xian"></div>
+        <div class="title">
+          <img src="../assets/icons/tb0.png" alt="图标">
+          <h2 class="black">往期</h2>
+          <h2 class="red">回顾</h2>
+        </div>
+        <div class="xian"></div>
+        <div class="more" @click="jumpList('4')">更多>></div>
+      </div>
+      <div class="contentList">
+        <div class="circular" @click="jump(item)" :class="{ circular2: mous == index }" v-for="(item, index) in reviewlist" :key="index" @mouseover="mouseOver(index)" @mouseleave="mouseLeave(index)">
+          <div class="txtbox">
+            <p class="year" :class="{ year2: mous == index }">{{ item.year }}</p>
+            <p class="date" :class="{ date2: mous == index }">{{ item.date }}</p>
+            <p class="title" :class="{ title2: mous == index }">{{ item.title }}</p>
+            <p class="text" :class="{ text2: mous == index }">{{ item.text }}</p>
+            <p class="yes" :class="{ yes2: mous == index }">✔</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 联系我们 -->
+    <div class="communication w">
+      <div class="left">
+        <titles type="8" title="联系我们" en="Communication" @jump="jumpList"></titles>
+        <div class="textlist">
+          <p class="textbox" @click="jump(item)" v-for="(item, index) in communicationlist" :key="index">
+            <span class="text">{{ item.text }}</span>
+            <span class="date">{{ item.date }}</span>
+          </p>
+        </div>
+      </div>
+      <div class="right">
+        <div class="text">
+          <h2>本刊声明</h2>
+          <span>statement</span>
+          <p>1.本刊实行双向匿名审稿制度。</p>
+          <p>2.本刊不以任何形式收取审稿费、版面费。</p>
+          <p>3.本刊未与任何社会中介机构合作办刊，    并保留向假冒者追究法律责任的权利。</p>
+        </div>
+        <div class="weixin">
+          <img src="../assets/weixin.png" alt="微信">
+          <p>微信</p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
+import banner from '../components/banner.vue'
+import bottons from '../components/sidebar/buttons.vue'
+import cover from '../components/sidebar/cover.vue'
+import titles from '../components/sidebar/title.vue'
 export default {
-  name: 'Home',
   components: {
-    HelloWorld
-  }
+    banner,
+    cover,
+    bottons,
+    titles
+  },
+  data () {
+    return {
+      mous: -1,
+      communicationlist: [
+        {
+          text: '《经济纵横》在2019年度复印报刊资料转…',
+          date: '2020-12-13',
+          id: '1'
+        },
+        {
+          text: '《经济纵横》在2019年度复印报刊资料转…',
+          date: '2020-12-13',
+          id: '1'
+        },
+        {
+          text: '《经济纵横》在2019年度复印报刊资料转…',
+          date: '2020-12-13',
+          id: '1'
+        },
+        {
+          text: '《经济纵横》在2019年度复印报刊资料转…',
+          date: '2020-12-13',
+          id: '1'
+        },
+        {
+          text: '《经济纵横》在2019年度复印报刊资料转…',
+          date: '2020-12-13',
+          id: '1'
+        }
+      ],
+      directorylist: [
+        {
+          path: require('../assets/people/r1.png'),
+          text: '罗雄飞 关于《资本论》研究对象及相关',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          path: require('../assets/people/r2.png'),
+          text: '程恩富 40年中美农产品贸易：回顾与展',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          path: require('../assets/people/r4.png'),
+          text: '杨丹辉 百年未有之大变局下全球价值链',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          path: require('../assets/people/r4.png'),
+          text: '杨丹辉 百年未有之大变局下全球价值链',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          path: require('../assets/people/r5.png'),
+          text: '钟春平 高质量发展需要有创造性破坏思',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          path: require('../assets/people/r6.png'),
+          text: '张自然 空间聚集条件下政府效率的影响',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          path: require('../assets/people/r8.png'),
+          text: '于长革 “十四五”时期加强财政统筹的',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          path: require('../assets/people/r8.png'),
+          text: '于长革 “十四五”时期加强财政统筹的',
+          date: '2021-03-10',
+          id: '1'
+        }
+      ],
+      newslist: [
+        {
+          title: '第四届当代中国马克思主…',
+          path: require('../assets/people/new1.png'),
+          text: '“第四届当代中国马克思主义政治经济学创新与发展高端论坛暨《经济纵横》……',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          title: '《经济纵横》召开“社会主义…',
+          path: require('../assets/people/new2.png'),
+          text: '“第四届当代中国马克思主义政治经济学创新与发展高端论坛暨《经济纵横》……',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          title: '疫情防控 吉林在行动…',
+          path: require('../assets/people/new3.png'),
+          text: '第四届当代中国马克思主义政治经济学创新与发展高端论坛暨《经济纵横》……',
+          date: '2021-03-10',
+          id: '1'
+        },
+        {
+          title: '中央经济工作会议在北京举…',
+          path: require('../assets/people/new1.png'),
+          text: '“第四届当代中国马克思主义政治经济学创新与发展高端论坛暨《经济纵横》……',
+          date: '2021-03-10',
+          id: '1'
+        }
+      ],
+      reviewlist: [
+        {
+          title: '《经济纵横》2021年第03期目录',
+          date: '第03期',
+          text: '马克思主义政治经济学创新与发展关于《资本论》研究对象及相关问题的再认识',
+          year: '2021年',
+          id: '1'
+        },
+        {
+          title: '《经济纵横》2021年第03期目录',
+          date: '第02期',
+          text: '马克思主义政治经济学创新与发展关于《资本论》研究对象及相关问题的再认识',
+          year: '2021年',
+          id: '1'
+        },
+        {
+          title: '《经济纵横》2021年第03期目录',
+          date: '第12期',
+          text: '马克思主义政治经济学创新与发展关于《资本论》研究对象及相关问题的再认识',
+          year: '2021年',
+          id: '1'
+        },
+        {
+          title: '《经济纵横》2021年第03期目录',
+          date: '第01期',
+          text: '马克思主义政治经济学创新与发展关于《资本论》研究对象及相关问题的再认识',
+          year: '2021年',
+          id: '1'
+        }
+      ]
+    }
+  },
+  methods: {
+    // 移入事件
+    mouseOver (e) {
+      this.mous = e
+    },
+    // 移出事件
+    mouseLeave (e) {
+      this.mous = -1
+    },
+    jump (e) {
+      console.log(e)
+      this.$router.push(`/details/${e.id}`)
+    },
+    jumpList (e) {
+      console.log(e)
+      this.$router.push(`/list/${e}`)
+    }
+  },
+  mounted () {}
 }
 </script>
+<style lang="less" scoped>
+.w {
+  width: 80%;
+  margin: 5vh auto;
+}
+/* 关于我们 */
+.about {
+  display: flex;
+  margin-bottom: 5vh;
+  .leftbox {
+    width: 70%;
+    display: flex;
+    color: #696969;
+    font-size: 1.2em;
+    flex-wrap: wrap;
+    .cover {
+      width: 25%;
+      padding-top: 20px;
+    }
+    .abouttext {
+      width: 50%;
+      margin: 0 10%;
+      p {
+        text-indent: 1em;
+      }
+    }
+  }
+  .bottons {
+    width: 30%;
+  }
+}
+/* 本期要目 */
+.directory {
+  margin-top: 15vh;
+  .contentList {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .imgbox {
+      width: 23%;
+      margin: 1%;
+      /deep/ .el-card__body {
+        height: 100%;
+        img {
+          display: block;
+          height: 70%;
+          width: 100%;
+        }
+        p {
+          color: #696969;
+        }
+        .text {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+/* 最新动态 */
+.news {
+  .contentList {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    .imngbox {
+      width: 50%;
+      height: 15vh;
+      display: flex;
+      margin: 1% 0;
+      .left {
+        width: 25%;
+        margin-right: 5%;
+      }
+      .right {
+        width: 70%;
+        p {
+          color: #696969;
+        }
+      }
+    }
+  }
+}
+/* 往期回顾 */
+.review {
+  margin-top: 15vh;
+  .titlebox {
+    width: 100%;
+    display: flex;
+    position: relative;
+    .title {
+      width: 20%;
+      display: flex;
+      img {
+        height: 30px;
+        margin-top: 20px;
+      }
+      h2 {
+        margin-top: -10px;
+        font-size: 2.5em;
+        letter-spacing: 5px;
+      }
+      .black {
+        margin-left: 20px;
+      }
+      .red {
+        color: #eb4f38;
+      }
+    }
+    .xian {
+      width: 40%;
+      height: 3px;
+      background: #a40000;
+      margin: 0 10px;
+      margin-top: 2%;
+    }
+    .more {
+      position: absolute;
+      right: 2%;
+      color: #999;
+    }
+  }
+  .contentList {
+    width: 100%;
+    height: 40vh;
+    display: flex;
+    .circular {
+      width: 20%;
+      height: 80%;
+      margin: 5% 2.5%;
+      border-radius: 38%;
+      background: #f0f0f0;
+      transform:rotate(45deg);
+      -ms-transform:rotate(45deg);
+      -moz-transform:rotate(45deg);
+      -webkit-transform:rotate(45deg);
+      -o-transform:rotate(45deg);
+      position: relative;
+      .txtbox{
+        position: absolute;
+        left: 50%;
+        margin-left: -50%;
+        top: 8%;
+        transform:rotate(-45deg);
+        -ms-transform:rotate(-45deg);
+        -moz-transform:rotate(-45deg);
+        -webkit-transform:rotate(-45deg);
+        -o-transform:rotate(-45deg);
+         width: 90%;
+        p {
+          line-height: 1.5em;
+          width: 100%;
+          margin: 0 auto;
+          text-align: center;
+        }
+        .year {
+          color: #eb4f38;
+          font-size: 1.5em;
+        }
+        .title {
+          margin-top: 5px;
+          font-size: 1em;
+          color: #222;
+        }
+        .date {
+          font-size: 2.5em;
+          color: #eb4f38;
+        }
+        .text {
+          margin-top: 10px;
+          font-size: 0.8em;
+          color: #666666;
+        }
+        .yes {
+          width: 30px;
+          height: 30px;
+          margin: 8% auto;
+          color: #eb4f38;
+          border: 1px solid;
+          border-color: #999;
+          border-radius: 50%;
+          background: #f0f0f0;
+          line-height: 30px;
+        }
+        .year2 {
+          color: #fff;
+        }
+        .title2 {
+          color: #fff;
+        }
+        .date2 {
+          color: #fff;
+        }
+        .text2 {
+          color: #fff;
+        }
+        .yes2 {
+          background: #fff;
+          color: #039ae4;
+        }
+      }
+    }
+    .circular2 {
+      background: #c9161d;
+    }
+  }
+}
+// 联系我们
+.communication {
+  display: flex;
+  .left {
+    width: 50%;
+    margin-left: 5%;
+    .textlist {
+      width: 100%;
+      .textbox  {
+        width: 90%;
+        margin: 5% auto;
+        color: #999999;
+        display: flex;
+        .text {
+          width: 70%;
+          display: block;
+          cursor: pointer;
+        }
+        .date {
+          display: block;
+          width: 30%;
+          text-align: right;
+        }
+      }
+    }
+  }
+  .right {
+    width: 45%;
+    margin-left: 5%;
+    background: #a80002;
+    display: flex;
+    .text {
+      width: 70%;
+      color: #fff;
+      font-size: 0.8em;
+      margin: 10% 5%;
+    }
+    .weixin {
+      width: 15%;
+      color: #fff;
+      margin-top: 20%;
+      img{
+        width: 100%;
+      }
+      p {
+        width: 100%;
+        display: block;
+        text-align: center
+      }
+    }
+  }
+}
+@import '../assets/compatible.less';
+</style>

src/views/details.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="container">
+    <breadcrumb :type="'正文'" :item="item" :en="en"></breadcrumb>
+    <div class="contentbox">
+      <sidebar class="sidebar"></sidebar>
+      <div class="box">
+        <titles :type="'正文'" :title="item" :en="en"></titles>
+        <div class="html">
+          <h2>{{ contentitem.title }}</h2>
+          <h4>{{ contentitem.shortTitle }}</h4>
+          <p class="slug">{{ contentitem.slug }}</p>
+          <div class="content" v-html="contentitem.content"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import breadcrumb from '../components/breadcrumb.vue'
+import sidebar from '../components/sidebar/index.vue'
+import titles from '../components/sidebar/title.vue'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState, mapActions } = createNamespacedHelpers('menu')
+const { mapState: contentnmapState, mapActions: contentmapActions } = createNamespacedHelpers('content')
+export default {
+  props: {
+    id: String
+  },
+  components: {
+    breadcrumb,
+    sidebar,
+    titles
+  },
+  data () {
+    return {
+      item: '',
+      en: '',
+      code: ''
+    }
+  },
+  methods: {
+    ...mapActions(['getmenu']),
+    ...contentmapActions(['getdetails']),
+    async filteritem () {
+      this.code = sessionStorage.getItem('itemId')
+      const items = this.items.filter(p => p.code === this.code)[0]
+      this.item = items.name
+      this.en = items.en
+    }
+  },
+  mounted () {
+    this.getmenu()
+    this.filteritem()
+    this.getdetails({ id: this.id })
+  },
+  computed: {
+    ...mapState(['items']),
+    ...contentnmapState(['contentitem'])
+  },
+  watch: {
+    id (val) {
+      this.filteritem()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  width: 90%;
+  margin: 0 auto;
+  margin-top: 2%;
+  .contentbox {
+    display: flex;
+    margin: 5%;
+    .sidebar {
+      width: 20%;
+      margin-right: 5%;
+    }
+    .box {
+      width: 75%;
+      .html {
+        width: 100%;
+        margin: 5% 0;
+        h2, h4 {
+          width: 100%;
+          text-align: center;
+        }
+        .slug {
+          font-size: 0.8em;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/list.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="container">
+    <img src="../assets/banner/26025632.png" alt="头图" class="topimg">
+    <div class="box">
+      <breadcrumb :type="'列表'" :item="item" :en="en"></breadcrumb>
+      <el-button class="btn">{{ item }}</el-button>
+      <el-card class="box-card" v-for="(item, index) in contentitems" :key="index">
+        <img :src="item.uri || imguri" alt="缩略图" class="imgs">
+        <div class="item">
+          <h4 class="title" @click="btn(item)">{{ item.title }}</h4>
+          <div class="details">{{ item.slug }}</div>
+          <div class="other">
+            <div class="el-icon-time date">{{ item.createAt | dates }}</div>
+            <div class="el-icon-view num">{{ item.num || 100 }}</div>
+          </div>
+        </div>
+      </el-card>
+      <el-pagination
+        class="pagination"
+        background
+        layout="prev, pager, next"
+        @current-change="currentChange"
+        :page-size="pageSize"
+        :total="contenttotal">
+      </el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+import moment from 'moment'
+import breadcrumb from '../components/breadcrumb.vue'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState, mapActions } = createNamespacedHelpers('menu')
+const { mapState: columnmapState, mapActions: columnmapActions } = createNamespacedHelpers('column')
+const { mapState: contentnmapState, mapActions: contentmapActions } = createNamespacedHelpers('content')
+export default {
+  props: {
+    id: String
+  },
+  components: {
+    breadcrumb
+  },
+  data () {
+    return {
+      en: '',
+      pageSize: 6,
+      item: '',
+      imguri: require('../assets/moren.png')
+    }
+  },
+  methods: {
+    ...mapActions(['getmenu']),
+    ...columnmapActions(['getcolumn']),
+    ...contentmapActions(['getcontent']),
+    // 分页
+    currentChange (e) {
+      console.log(e)
+      this.getcontent({ code: this.columnitems[0].code, skip: e - 1, limit: this.pageSize })
+    },
+    // 跳转正文
+    btn (e) {
+      this.$router.push(`/details/${e._id}`)
+    },
+    async filteritem () {
+      const items = this.items.filter(p => p.code === this.id)[0]
+      this.item = items.name
+      this.en = items.en
+      const res = await this.getcolumn(items)
+      if (res.data.errcode === 0) {
+        await this.getcontent({ code: this.columnitems[0].code, skip: 0, limit: this.pageSize })
+      }
+    }
+  },
+  mounted () {
+    this.getmenu()
+    this.filteritem()
+  },
+  computed: {
+    ...mapState(['items']),
+    ...columnmapState({ columnitems: 'items' }),
+    ...contentnmapState({ contentitems: 'items', contenttotal: 'total' })
+  },
+  watch: {
+    id (val) {
+      this.filteritem()
+    }
+  },
+  filters: {
+    dates (e) {
+      return moment(Number(e)).format('YYYY-MM-DD')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.topimg {
+  width: 100%;
+}
+.btn {
+  background: #a80002;
+  color: #fff;
+  margin: 0 15%;
+  margin-top: 2%;
+  font-size: 1.5em;
+  padding: 20px;
+  letter-spacing: 5px;
+}
+.box {
+  width: 90%;
+  margin: 5% auto;
+}
+.box-card {
+  width: 70%;
+  margin: 2% 15%;
+  /deep/ .el-card__body {
+    display: flex;
+    .imgs {
+      width: 15%;
+      margin: 0 2.5%;
+    }
+    .item {
+      width: 75%;
+      .details {
+        color: #999999;
+        font-size: 0.8em;
+      }
+      .title {
+        cursor: pointer;
+      }
+      .other {
+        line-height: 3em;
+        color: #666;
+        .date {
+          margin-right: 20px;
+        }
+      }
+    }
+  }
+}
+.pagination {
+  margin-left: 15%;
+   /deep/ .el-pager li:not(.disabled).active {
+    background: #a80002;
+  }
+}
+</style>

src/views/page.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="container">
+    <breadcrumb :type="'正文'" :item="item" :en="en"></breadcrumb>
+    <div class="contentbox">
+      <sidebar class="sidebar"></sidebar>
+      <div class="box">
+        <titles :type="'正文'" :title="item" :en="en"></titles>
+        <div class="html">
+          <h2>{{ pageitem && pageitem.title }}</h2>
+          <h4>{{ pageitem && pageitem.shortTitle }}</h4>
+          <p class="slug">{{ pageitem && pageitem.slug }}</p>
+          <div class="content" v-html="pageitem && pageitem.content"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import breadcrumb from '../components/breadcrumb.vue'
+import sidebar from '../components/sidebar/index.vue'
+import titles from '../components/sidebar/title.vue'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState, mapActions } = createNamespacedHelpers('menu')
+const { mapState: pagemapState, mapActions: pagemapActions } = createNamespacedHelpers('page')
+export default {
+  props: {
+    id: String
+  },
+  components: {
+    breadcrumb,
+    sidebar,
+    titles
+  },
+  data () {
+    return {
+      item: '',
+      en: '',
+      code: ''
+    }
+  },
+  methods: {
+    ...mapActions(['getmenu']),
+    ...pagemapActions(['getdetails']),
+    async filteritem () {
+      this.code = sessionStorage.getItem('itemId')
+      const items = this.items.filter(p => p.code === this.id)[0]
+      this.item = items.name
+      this.en = items.en
+    }
+  },
+  mounted () {
+    this.getmenu()
+    this.filteritem()
+    this.getdetails({ code: this.id })
+  },
+  computed: {
+    ...mapState(['items']),
+    ...pagemapState(['pageitem'])
+  },
+  watch: {
+    id (val) {
+      this.filteritem()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.container {
+  width: 90%;
+  margin: 0 auto;
+  margin-top: 2%;
+  .contentbox {
+    display: flex;
+    margin: 5%;
+    .sidebar {
+      width: 20%;
+      margin-right: 5%;
+    }
+    .box {
+      width: 75%;
+      .html {
+        width: 100%;
+        margin: 5% 0;
+        h2, h4 {
+          width: 100%;
+          text-align: center;
+        }
+        .slug {
+          font-size: 0.8em;
+        }
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -0,0 +1,16 @@
+
+const baseUrl = '/'
+
+module.exports = {
+  publicPath: baseUrl,
+  productionSourceMap: false,
+  devServer: {
+    port: 4000,
+    proxy: {
+      '/api/': {
+        target: 'http://localhost:7001'
+        // target: 'http://192.168.4.1:7001'
+      }
+    }
+  }
+}