init

package-lock.json

@@ -2167,6 +2167,11 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "amfe-flexible": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npm.taobao.org/amfe-flexible/download/amfe-flexible-2.2.1.tgz",
+      "integrity": "sha1-NT8AKJ5NOMqIoh6zhUQgMIrwtVk="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npm.taobao.org/ansi-colors/download/ansi-colors-3.2.4.tgz",
@@ -2206,7 +2211,6 @@
       "version": "3.2.1",
       "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz",
       "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
-      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -2425,6 +2429,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npm.taobao.org/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1605751734916&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%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",
@@ -2478,6 +2490,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=1606424914143&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.2.tgz",
@@ -2529,6 +2546,27 @@
         "@babel/helper-define-polyfill-provider": "^0.2.0"
       }
     },
+    "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=1619088116467&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",
@@ -3068,7 +3106,6 @@
       "version": "2.4.2",
       "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz",
       "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
-      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -3473,7 +3510,6 @@
       "version": "1.9.3",
       "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
       "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
-      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -3481,8 +3517,7 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
     },
     "color-string": {
       "version": "1.5.5",
@@ -4266,8 +4301,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",
@@ -4720,6 +4754,19 @@
       "integrity": "sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.1",
+      "resolved": "https://registry.npm.taobao.org/element-ui/download/element-ui-2.15.1.tgz",
+      "integrity": "sha1-raAKpuMsAndKLndWPdhGaPgTzf8=",
+      "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",
@@ -4876,8 +4923,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz?cache=0&sync_timestamp=1618677243201&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescape-string-regexp%2Fdownload%2Fescape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "eslint": {
       "version": "6.8.0",
@@ -6216,8 +6262,7 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz?cache=0&sync_timestamp=1618559744568&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhas-flag%2Fdownload%2Fhas-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
     },
     "has-symbols": {
       "version": "1.0.2",
@@ -8788,6 +8833,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",
@@ -9386,7 +9436,6 @@
       "version": "7.0.35",
       "resolved": "https://registry.nlark.com/postcss/download/postcss-7.0.35.tgz",
       "integrity": "sha1-0r4AuZj38hHYonaXQHny6SuXDiQ=",
-      "dev": true,
       "requires": {
         "chalk": "^2.4.2",
         "source-map": "^0.6.1",
@@ -9396,14 +9445,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npm.taobao.org/source-map/download/source-map-0.6.1.tgz",
-          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM=",
-          "dev": true
+          "integrity": "sha1-dHIq8y6WFOnCh6jQu95IteLxomM="
         },
         "supports-color": {
           "version": "6.1.0",
           "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-6.1.0.tgz?cache=0&sync_timestamp=1618560998281&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-6.1.0.tgz",
           "integrity": "sha1-B2Srxpxj1ayELdSGfo0CXogN+PM=",
-          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
@@ -9886,6 +9933,14 @@
         }
       }
     },
+    "postcss-pxtorem": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npm.taobao.org/postcss-pxtorem/download/postcss-pxtorem-5.1.1.tgz?cache=0&sync_timestamp=1615001062880&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpostcss-pxtorem%2Fdownload%2Fpostcss-pxtorem-5.1.1.tgz",
+      "integrity": "sha1-GYpowQ+a0tQjcO9mKZ17MWj4z/o=",
+      "requires": {
+        "postcss": "^7.0.27"
+      }
+    },
     "postcss-reduce-initial": {
       "version": "4.0.3",
       "resolved": "https://registry.npm.taobao.org/postcss-reduce-initial/download/postcss-reduce-initial-4.0.3.tgz",
@@ -10506,6 +10561,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",
@@ -11504,7 +11564,6 @@
       "version": "5.5.0",
       "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1618560998281&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
       "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
-      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
@@ -11754,6 +11813,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": {
+    "amfe-flexible": "^2.2.1",
     "core-js": "^3.6.5",
+    "element-ui": "^2.15.1",
+    "postcss-pxtorem": "^5.1.1",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"

postcss.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: {
+    'postcss-pxtorem': {
+      // 能够把所有元素的px单位转成Rem
+      // rootValue: 转换px的基准值。
+      rootValue: 192,
+      propList: ['*'],
+      // 使用selectorBlackList过滤，使某些样式不进行rem转换,我给body设置了min-width
+      selectorBlackList: ['body']
+    }
+  }
+}

src/App.vue

@@ -1,32 +1,9 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div>
     <router-view/>
   </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;
-}
 
-#nav {
-  padding: 30px;
-
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>

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/pay.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="pay">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :before-close='hClose'>
+      <div>
+        <div class="title">扫码付费阅读</div>
+        <div class="content">
+          <div class="left">
+            <!-- <img src="@/assets/code.png" alt=""> -->
+            <img src="@/assets/yl/code.jpg" alt="">
+          </div>
+          <div class="right">
+            <p>微信扫描二维码</p>
+            <!-- <p>支付宝扫描二维码</p> -->
+            <p>支付3元即可解锁精彩资讯内容</p>
+            <div class="btn">
+              <el-button type="primary" @click="hSubmit">确 定</el-button>
+              <el-button type="danger" @click="hClose">取 消</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'pay',
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      require: true
+    },
+    new: {
+      type: String
+    }
+  },
+  data () {
+    return {
+      isPay: true
+    }
+  },
+  methods: {
+    hClose () {
+      this.$emit('close', false)
+    },
+    hSubmit () {
+      if (this.isPay) {
+        this.$router.push(this.new)
+        this.hClose()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/.el-dialog__body {
+  padding: 30px 50px;
+  padding-left: 80px;
+}
+/deep/.el-dialog {
+  border-radius: 20px;
+  width: 680px;
+  height: 340px;
+}
+/deep/.el-button--primary {
+    background-color: #639CFF;
+    border-color: #639CFF;
+    margin-right: 10px;
+}
+/deep/.el-dialog__headerbtn .el-dialog__close {
+  font-size:30px;
+}
+.title {
+  font-size: 22px;
+  color: #333;
+  margin-bottom: 20px;
+  margin-left: 10px;
+}
+.content>div {
+  display: inline-block;
+  height: 160px;
+  vertical-align: middle;
+}
+.content {
+ width: 520px;
+}
+.content .left {
+  margin-right: 20px;
+  width: 160px;
+  img {
+    width: 100%;
+  }
+}
+.content .right {
+  position: relative;
+  width: 300px;
+  p {
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+  .btn {
+    position: absolute;
+    bottom: 0;
+    max-width: 100%;
+  }
+}
+.el-button {
+  width: 140px;
+}
+</style>

src/main.js

@@ -2,6 +2,11 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import '@/utils/flexible'
+import '@/style/base.less'
+
+import '@/plugin/element.js'
+import 'element-ui/lib/theme-chalk/index.css'
 
 Vue.config.productionTip = false
 

src/plugin/element.js

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

src/router/index.js

@@ -11,12 +11,24 @@ const routes = [
     component: Home
   },
   {
-    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: '/New_1',
+    name: 'New_1',
+    component: () => import('../views/newlist/new_1.vue')
+  },
+  {
+    path: '/New_2',
+    name: 'New_2',
+    component: () => import('../views/newlist/new_2.vue')
+  },
+  {
+    path: '/New_3',
+    name: 'New_3',
+    component: () => import('../views/newlist/new_3.vue')
+  },
+  {
+    path: '/New_4',
+    name: 'New_4',
+    component: () => import('../views/newlist/new_4.vue')
   }
 ]
 

src/store/index.js

@@ -5,8 +5,24 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    seeNew_1: false,
+    seeNew_2: false,
+    seeNew_3: false,
+    seeNew_4: false
   },
   mutations: {
+    setSeeNew_1 (payload, val) {
+      payload.seeNew_1 = val
+    },
+    setSeeNew_2 (payload, val) {
+      payload.seeNew_2 = val
+    },
+    setSeeNew_3 (payload, val) {
+      payload.seeNew_3 = val
+    },
+    setSeeNew_4 (payload, val) {
+      payload.seeNew_4 = val
+    }
   },
   actions: {
   },

src/style/base.css

@@ -0,0 +1,133 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+body {
+  background-color: #fff;
+  font: 16px 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
+  color: #666;
+  min-width: 1100px;
+}
+.w {
+  width: 1200px;
+  margin: 0 auto;
+}
+.wNew {
+  width: 1000px;
+  margin: 0 auto;
+}
+li {
+  display: inline-block;
+  list-style: none;
+  color: #333;
+}
+img {
+  display: inline-block;
+  border: 0;
+  vertical-align: middle;
+}
+a {
+  text-decoration: none;
+  color: #333;
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+.clearfix:after {
+  content: '';
+  visibility: hidden;
+  height: 0;
+  display: block;
+  clear: both;
+}
+.clearfix {
+  *zoom: 1;
+}
+.w200 {
+  width: 200px;
+}
+.w210 {
+  width: 210px;
+}
+.w582 {
+  width: 582px;
+}
+.w588 {
+  width: 588px;
+}
+.w100pre {
+  width: 100%;
+}
+/* 公共部分 */
+.head {
+  height: 120px;
+  line-height: 120px;
+}
+.head img {
+  width: 180px;
+  margin-right: 400px;
+}
+.foot {
+  height: 60px;
+  line-height: 60px;
+  font-size: 20px;
+  background-color: #414141;
+  text-align: center;
+  margin-top: 97px;
+}
+.foot a {
+  color: #FFFFFF;
+}
+.new .head {
+  border-bottom: 1px solid #DCDCDC;
+}
+.new .content {
+  margin-top: 20px;
+  position: relative;
+}
+.new .content .title {
+  font-size: 20px;
+  color: #333;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+.new .content .time {
+  font-size: 18px;
+  color: #999;
+  margin-bottom: 20px;
+}
+.new .content img {
+  width: 100%;
+  height: 300px;
+  margin-bottom: 20px;
+}
+.new .content .article {
+  font-size: 16px;
+  margin-bottom: 20px;
+  text-indent: 2em;
+  line-height: 38px;
+}
+.new .content .toTop {
+  width: 50px;
+  height: 140px;
+  padding: 20px 10px;
+  background-color: #EFF0F4;
+  position: absolute;
+  top: 600px;
+  right: -150px;
+  border-radius: 10px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.new .content .toTop img {
+  width: 32px;
+  height: 32px;
+  display: block;
+  margin: 0 auto;
+  margin-bottom: 10px;
+}

src/style/base.less

@@ -0,0 +1,136 @@
+*{
+  padding: 0;
+  margin: 0;
+}
+body {
+  background-color: #fff;
+  font: 16px 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
+  color: #666;
+  min-width: 1100px;
+}
+.w {
+  width: 1200px;
+  margin: 0 auto;
+}
+.wNew {
+  width: 1000px;
+  margin: 0 auto;
+}
+li {
+  display: inline-block;
+  list-style: none;
+  color: #333;
+}
+img {
+  display: inline-block;
+  border: 0;
+  vertical-align: middle;
+}
+a {
+  text-decoration: none;
+  color: #333;
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+.clearfix:after {
+  content: '';
+  visibility: hidden;
+  height: 0;
+  display: block;
+  clear: both;
+}
+.clearfix {
+  *zoom: 1;
+}
+.w200 {
+  width: 200px;
+}
+.w210 {
+  width: 210px;
+}
+.w582 {
+  width: 582px;
+}
+.w588 {
+  width: 588px;
+}
+.w100pre {
+  width: 100%;
+}
+
+/* 公共部分 */
+.head {
+  height: 120px;
+  line-height: 120px;
+  img {
+    width: 180px;
+    margin-right: 400px;
+  }
+}
+.foot {
+  height: 60px;
+  line-height: 60px;
+  font-size: 20px;
+  background-color: #414141;
+  text-align: center;
+  margin-top: 97px;
+  a {
+    color: #FFFFFF;
+  }
+}
+.new {
+  .head {
+    border-bottom: 1px solid #DCDCDC;
+  }
+  .content {
+    margin-top: 20px;
+    position: relative;
+    .title {
+      font-size: 20px;
+      color: #333;
+      font-weight: 700;
+      margin-bottom: 20px;
+    }
+    .time {
+      font-size: 18px;
+      color: #999;
+      margin-bottom: 20px;
+    }
+    img {
+      width: 100%;
+      height: 300px;
+      margin-bottom: 20px;
+    }
+    .article {
+      font-size: 16px;
+      margin-bottom: 20px;
+      text-indent:2em;
+      line-height: 38px;
+    }
+    .toTop {
+      width: 50px;
+      height: 140px;
+      padding: 20px 10px;
+      background-color: #EFF0F4;
+      position: absolute;
+      top: 600px;
+      right: -150px;
+      border-radius: 10px;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      img {
+        width: 32px;
+        height: 32px;
+        display: block;
+        margin: 0 auto;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}

src/utils/flexible.js

@@ -0,0 +1,51 @@
+/* eslint-disable no-redeclare */
+(function flexible (window, document) {
+  var docEl = document.documentElement
+  var dpr = window.devicePixelRatio || 1
+
+  // adjust body font size
+  function setBodyFontSize () {
+    if (document.body) {
+      document.body.style.fontSize = (12 * dpr) + 'px'
+    } else {
+      document.addEventListener('DOMContentLoaded', setBodyFontSize)
+    }
+  }
+  setBodyFontSize()
+
+  // set 1rem = viewWidth / 10
+  function setRemUnit () {
+    // var rem = docEl.clientWidth / 10
+    // docEl.style.fontSize = rem + 'px'
+    if (docEl.clientWidth > 1100) {
+      var rem = docEl.clientWidth / 10
+    } else {
+      var rem = 1100 / 10
+    }
+    // console.log('docEl.clientWidth', docEl.clientWidth, 'rem', rem);
+    docEl.style.fontSize = rem + 'px'
+  }
+
+  setRemUnit()
+
+  // reset rem unit on page resize
+  window.addEventListener('resize', setRemUnit)
+  window.addEventListener('pageshow', function (e) {
+    if (e.persisted) {
+      setRemUnit()
+    }
+  })
+
+  // detect 0.5px supports
+  if (dpr >= 2) {
+    var fakeBody = document.createElement('body')
+    var testElement = document.createElement('div')
+    testElement.style.border = '.5px solid transparent'
+    fakeBody.appendChild(testElement)
+    docEl.appendChild(fakeBody)
+    if (testElement.offsetHeight === 1) {
+      docEl.classList.add('hairlines')
+    }
+    docEl.removeChild(fakeBody)
+  }
+}(window, document))

src/views/About.vue

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

src/views/newlist/new_2.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="new">
+    <div class="head">
+      <div class="wNew">
+        <img src="@/assets/yw/logo.png" alt="">
+      </div>
+    </div>
+    <div class="content wNew">
+      <div class="title">“加油”的猫腻，如何更省钱？</div>
+      <div class="time">2021-04-07 13:10:12</div>
+      <!-- <img src="@/assets/service_r1@2x.png" alt=""> -->
+      <img src="@/assets/yw/02-2.png" alt="">
+      <div class="article">
+        现在油价越来越贵，但是路还得跑，油还得加，养成良好的加油习惯，能帮你省下不小的费用环而在消费端，车主和司机对油品质量和加油体验的要求也越来越高，对油品的价格也比较敏感。对于民营加油站来说，还需扭转用户的认知，解决信任问题。在市场境改变和竞争愈发激烈的态势下，加油站该如何打破原有的运营模式，在存量市场挖掘新的增量，实现降本增效?
+      </div>
+      <div class="article">加油时，不妨观察两种车。一是油站里面油罐车，当正要进加油站时，如果发现油槽上停着一辆油罐车在卸油，这时就要注意，因为油罐车补充油料时，会涌起槽底多年的沉积，影响油质。如果这些杂质进入到发动机缸内，会影响发动机使用寿命。</div>
+      <div class="article">现在很多地方都配备了自主加油站，车主可以自己动手，没有工作人员监管。这个时候往往会出现加油不灭车的情况，虽然大概率上不会出现问题，但是小编仍旧要提醒用户们不要大意，熄个火不费多少力气。</div>
+      <div class="article">去油站加油时，总是会遇到加油站的店员向自己推荐使用一些叫做“汽油添加剂”的产品。店员声称，加入了“汽油添加剂”后车辆动力不但能够提升，还可以节油30%，并解决发动机怠速抖动、加速不畅等问题。</div>
+      <div class="article">加油两个业务，定位能源零售平台，覆盖加油、充电、加气、光伏、储能多种能源品类，为车主提供实惠、便捷、可靠的一站式数字化用能服务。</div>
+      <div class="article">每家油站的品牌、规模、位置、发展阶段不同，但过往常用的营销手段却很单一、同质化严重，这就导致油站的营销效果常常不尽如人意。而团油在大数据和算法的基础上，可为油站提供基于符合油站特点与用户偏好的一整套营销体系，实现营销策略的个性化、实时化、多元化，从而提高油站营销效率。</div>
+      <div class="article">面对当前经营困境及碳达峰、碳中和远景目标，传统加油站亟需拥抱数字化，从前端营销获客到后端用户运营，再到数字化服务，全方位发力，才能在微利时代下打开更多增长空间，迎来更可持续地健康发展。</div>
+      <div class="toTop">
+        <div @click="$router.push('/')">
+          <img src="@/assets/home@2x.png" alt="">
+          <span>首页</span>
+        </div>
+        <div>
+          <a href="javascript:scrollTo(0,0);">
+            <img src="@/assets/toTop@2x.png" alt="">
+            <span>顶部</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="foot">
+      <a href="https://beian.miit.gov.cn/">京ICP备2022025002号-1</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/newlist/new_3.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="new">
+    <div class="head">
+      <div class="wNew">
+        <img src="@/assets/yw/logo.png" alt="">
+      </div>
+    </div>
+    <div class="content wNew">
+      <div class="title">什么是信息？探索信息本质</div>
+      <div class="time">2019-08-29 13:25:59</div>
+      <!-- <img src="@/assets/service_r2@2x.png" alt=""> -->
+      <img src="@/assets/yl/03.jpg" alt="">
+      <div class="article">
+        科学家曾经对数百万粒子组成的流体进行模拟，要想计算出它是如何流动的，计算机只需遵循一组保存在其内存中的指令。这只是计算机力量的冰山一角，科学家还用类似的方式对整个宇宙结构进行计算机模拟，它揭示了图灵思想的真正力量。
+      </div>
+      <div class="article">把指令转换成机器能理解的符号，让我们不仅能重现简单的画面或声音，还能重现一个过程，一个系统，一个正在变化和发展的事物，通过操控简单的符号，计算机能够捕捉到自然界的本质和秩序。</div>
+      <div class="article">对信息的这种常识性理解在哲学上属于认识论范畴。认识论探讨人类认识的本质、结构以及认识与客观实在的关系。香农的信息概念就暗含了信息的作用对象，即认识主体，也就是信宿；相应地产生各类信息的实体称为信源。</div>
+      <div class="article">香农表明，你发送任何消息都可以翻译成二进制数学，一长串的1和0的序列，一种写相同信息的方法。香农意识到，将信息转化为二进制数学会产生强大的力量，它能使信息易于管理，准确，可控和精确。在他的论文中，香农展示了一个二进制数字其中的1或0是信息的基本单位。</div>
+      <div class="article">怎么定义信息这个“东西”呢？先来说说两种最经典的定义。第一种是信息论奠基人香农所定义的“信息是用来消除随机不确定性的东西”。第二种是控制论创始人维纳所定义的“信息是人们在适应外部世界，并使这种适应反作用于外部世界的过程中，同外部世界进行互相交换的内容和名称”。这两个定义是被引用最多且最贴切的说法。</div>
+      <div class="article">信息”这个词的使用频率高速增长，其形态也从语言文字、鸿雁传书和密码学扩展到了数字视听乃至虚拟现实。但在大多数人的印象中，信息也还是指有新意的消息。
+        香农建立了一个新的深远的理论，他探索的想法成为了现在被称为信息理论的基石，将信息这个抽象的概念变成了有形的东西，以前还只是个模糊的概念，如今已经变成可衡量的实体了！</div>
+      <div class="toTop">
+        <div @click="$router.push('/')">
+          <img src="@/assets/home@2x.png" alt="">
+          <span>首页</span>
+        </div>
+        <div>
+          <a href="javascript:scrollTo(0,0);">
+            <img src="@/assets/toTop@2x.png" alt="">
+            <span>顶部</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="foot">
+      <a href="https://beian.miit.gov.cn/">京ICP备2022025002号-1</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/newlist/new_4.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="new">
+    <div class="head">
+      <div class="wNew">
+        <img src="@/assets/yw/logo.png" alt="">
+      </div>
+    </div>
+    <div class="content wNew">
+      <div class="title">科技的下一个十年</div>
+      <div class="time">2019-09-02 16:33:14</div>
+      <img src="@/assets/yl/04.jpg" alt="">
+      <div class="article">
+        首先，将科技创新融入文化产业，充分发挥政府的引导服务功能，激发科技人才的创新活力，在文化市场的自由竞争中解决产品制作与传播等技术问题，并将创新成果渗透到文化产业中，推动文化科技的融合发展。
+      </div>
+      <div class="article">而在电脑数码领域，改变也同样无处不在。Windows 10成为微软“最后一代操作系统”，笔记本取代台式机成为PC市场增长关键，无线网络、无线键鼠全面普及，而真无线耳机则正在成为市场新宠。</div>
+      <div class="article">增强文化融合，聚集科技创新元素。技术产出对提升产业科技创新能力发挥着核心作用，通过科技创新实现产业、技术和资源的融合，有利于提升产品竞争力，进而提升文化产业的综合竞争力和科技创新能力。</div>
+      <div class="article">完善创业投资监管体制和发展政策，纵深推进大众创业万众创新。延续执行企业研发费用加计扣除75%政策,将制造业企业加计扣除比例提高到100%，用税收优惠机制激励企业加大研发投入，着力推动企业以创新引领发展。</div>
+      <div class="article">那么世界经济论坛就认为呢，这个技术一定会在未来几年内被广泛的商业化啊。那么大家如果谁有路子的去搞个什么代理，未来几年说不定你就发了对不对，并且还被初创企业还有其他一些公司呢？它的价值是非常非常大的啊，那么这个了我就不展开，因为它比涉及到医学比较的这个专业，那总归有一点的。</div>
+      <div class="article">最后，利用大数据、人工智能、物联网等，联合更多文化产业集群、科研院所和文化企业，实现产业科技创新联盟，实现新时代区域文化产业科技创新能力的可持续发展。</div>
+      <div class="toTop">
+        <div @click="$router.push('/')">
+          <img src="@/assets/home@2x.png" alt="">
+          <span>首页</span>
+        </div>
+        <div>
+          <a href="javascript:scrollTo(0,0);">
+            <img src="@/assets/toTop@2x.png" alt="">
+            <span>顶部</span>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="foot">
+      <a href="https://beian.miit.gov.cn/">京ICP备2022025002号-1</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

vue.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  publicPath: './',
+  productionSourceMap: false,
+  pages: {
+    index: {
+      // page 的入口
+      entry: 'src/main.js',
+      // 模板来源
+      template: 'public/index.html',
+      // 在 dist/index.html 的输出
+      filename: 'index.html',
+      title: '游来有旺'
+    }
+  },
+  devServer: {
+    open: true
+  }
+
+}