【n】new

.babelrc

+{
+    "plugins": [["import", {
+      "libraryName": "view-design",
+      "libraryDirectory": "src/components"
+    }]]
+  }
\ No newline at end of file

.editorconfig

+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

README.md

+# test
+
+## Build Setup
+
+```bash
+# install dependencies
+$ npm install
+
+# serve with hot reload at localhost:3000
+$ npm run dev
+
+# build for production and launch server
+$ npm run build
+$ npm run start
+
+# generate static project
+$ npm run generate
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
+
+生命周期
+middleware 
+nuxt.config.js > 布局(layout) > 页面(page)
\ No newline at end of file

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}

nuxt.config.js

+export default {
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  ssr:true,
+  target:"static",
+  srcDir:'src/',
+  head: {
+    title: '北京见著科技有限公司-- MES系统',
+    htmlAttrs: {
+      lang: 'en'
+    },
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: '' }
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
+    ]
+  },
+
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [
+    'view-design/dist/styles/iview.css',    
+      {
+        src: '@assets/theme/layout.less',
+        lang: 'less'
+      }
+  ],
+  router:{
+    middleware:"auth",
+    //扩展路由
+    extendRoutes(routes,resolve){
+      // console.warn(routes);
+      // routes.push({
+      //   name:"root",
+      //   path:"/index",
+      //   component:resolve(__dirname,"pages/index.vue")
+      // })
+    }
+  },
+  // loading: {
+  //   color: 'blue',
+  //   height: '5px'
+  // },
+  // axios:{
+  //   proxy:true,
+  // },
+  // proxy:{
+  //   "/":{
+  //     target:"http://localhost:519/"
+  //   }
+  // },
+  // loading:"~/components/loading.vue",
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [
+    '@/plugins/view-ui',
+    '~/plugins/router',
+    {
+      src:'~/plugins/axios',
+      ssr:true
+    }
+  ],
+
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
+
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: [
+  ],
+
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+    '@nuxtjs/axios'
+  ],
+
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {
+    extractCSS: { allChunks: true }
+    // optimization:{
+    //   splitChunks:{
+
+    //   }
+    // }
+  }
+}

package.json

+{
+  "name": "test",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@nuxtjs/axios": "^5.13.1",
+    "@nuxtjs/proxy": "^2.1.0",
+    "babel-plugin-import": "^1.13.3",
+    "core-js": "^3.9.1",
+    "countup.js": "^1.9.3",
+    "nuxt": "^2.15.3",
+    "view-design": "^4.5.0"
+  },
+  "devDependencies": {
+    "less": "^4.1.1",
+    "less-loader": "^7.3.0"
+  }
+}

src/api/request.js

+import axios from 'axios';
+import Config from '@/config';
+import { Message, Notice, LoadingBar } from 'view-design';
+// 创建一个错误
+function errorCreate(msg) {
+    const err = new Error(msg);
+    errorLog(err);
+    throw err;
+}
+
+// 记录和显示错误
+function errorLog(err) {
+    if (err && err.response && err.response.status == 500) {
+        console.log(err.response)
+        Message.error({
+            content: err.response.data.error.message,
+            duration: 5
+        })
+        return;
+    }
+    // 添加到日志
+    // $nuxt.$store.dispatch('admin/log/push', {
+    //     message: '数据请求异常',
+    //     type: 'error',
+    //     meta: {
+    //         error: err
+    //     }
+    // });
+    // 打印到控制台
+    if (process.env.NODE_ENV === 'development') {
+        console.warn(err.response);
+        console.log(err);
+    }
+    // 显示提示，可配置使用 iView 的 $Message 还是 $Notice 组件来显示
+    if (Config.messageType == 1) {
+        Message.error({
+            content: err.message,
+            duration: Setting.modalDuration
+        });
+    } else if (Config.messageType == 2) {
+        Notice.error({
+            title: '提示',
+            desc: err.message,
+            duration: Setting.modalDuration
+        });
+    }
+}
+
+// 创建一个 axios 实例
+const service = axios.create({
+    baseURL: Config.apiBaseUrl,
+    timeout: Config.timeout, // 请求超时时间
+    transformRequest: [(data) => {
+        function dateFormat(date, fmt) {
+            if (null == date || undefined == date) return '';
+            var o = {
+                "M+": date.getMonth() + 1, //月份
+                "d+": date.getDate(), //日
+                "h+": date.getHours(), //小时
+                "m+": date.getMinutes(), //分
+                "s+": date.getSeconds(), //秒
+                "S+": date.getMilliseconds() //毫秒
+            };
+            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+            for (var k in o)
+                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+            return fmt;
+        }
+
+        Date.prototype.toJSON = function () {
+            return dateFormat(this, 'yyyy-MM-ddThh:mm:ss.SSSZ')
+        }
+        return JSON.stringify(data)
+    }]
+});
+// 设置post请求头
+service.defaults.headers.post['Content-Type'] = 'application/json';
+service.defaults.headers.delete['Content-Type'] = 'application/json';
+service.defaults.headers.put['Content-Type'] = 'application/json';
+// 请求拦截器
+service.interceptors.request.use(
+    config => {
+        // 在请求发送之前做一些处理
+        const token = sessionStorage.getItem('token');
+        const linkId = localStorage.getItem("linkId");
+        if (linkId) {
+            config.headers['linkId'] = linkId;
+        }
+        console.warn(Config)
+        // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+        config.headers['Authorization'] = 'Bearer ' + token;
+        LoadingBar.start()
+        return config;
+    },
+    error => {
+        // 发送失败
+        // console.log(error);
+        Promise.reject(error);
+    }
+);
+
+// 响应拦截器
+service.interceptors.response.use(
+    response => {
+        LoadingBar.finish()
+        // dataAxios 是 axios 返回数据中的 data
+        const dataAxios = response.data;
+        // 这个状态码是和后端约定的
+        const { code } = dataAxios;
+        // 根据 code 进行判断
+        if (code === undefined) {
+            // 如果没有 code 代表这不是项目后端开发的接口
+            return dataAxios;
+        } else {
+            // 有 code 代表这是一个后端接口 可以进行进一步的判断
+            switch (code) {
+                case 0:
+                    // [ 示例 ] code === 0 代表没有错误
+                    return dataAxios.data;
+                case 'xxx':
+                    // [ 示例 ] 其它和后台约定的 code
+                    errorCreate(`[ code: xxx ] ${dataAxios.msg}: ${response.config.url}`);
+                    break;
+                default:
+                    // 不是正确的 code
+                    errorCreate(`${dataAxios.msg}: ${response.config.url}`);
+                    break;
+            }
+        }
+
+    },
+    error => {
+        if (error && error.response) {
+            switch (error.response.status) {
+                case 400: error.message = '请求错误'; break;
+                case 401: error.message = '未授权，请登录'; break;
+                case 403: error.message = '拒绝访问'; break;
+                case 404: error.message = `请求地址出错: ${error.response.config.url}`; break;
+                case 408: error.message = '请求超时'; break;
+                case 500: error.message = '服务器内部错误'; break;
+                case 501: error.message = '服务未实现'; break;
+                case 502: error.message = '网关错误'; break;
+                case 503: error.message = '服务不可用'; break;
+                case 504: error.message = '网关超时'; break;
+                case 505: error.message = 'HTTP版本不受支持'; break;
+                default: break;
+            }
+        }
+        errorLog(error);
+        LoadingBar.error()
+        // console.warn("Erro:",error)
+        return Promise.reject(error);
+    }
+);
+let api = service.get;
+let get = (url, params) => {
+    if (params) {
+        return api(url, { "params": params })
+    } else {
+        return api(url)
+    }
+}
+
+service.get = get;
+export default service;

src/app.html

+<!DOCTYPE html>
+<html {{ HTML_ATTRS }}>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    {{ HEAD }}
+  </head>
+  <body {{ BODY_ATTRS }}>
+    {{ APP }}
+  </body>
+</html>
\ No newline at end of file

src/assets/README.md

+# ASSETS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

src/assets/icon/iconfont.css

+@font-face {
+  font-family: "iconfont"; /* Project id 2480204 */
+  src: url('iconfont.woff2?t=1622183498211') format('woff2'),
+       url('iconfont.woff?t=1622183498211') format('woff'),
+       url('iconfont.ttf?t=1622183498211') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.iconlujing1086:before {
+  content: "\e686";
+}
+
+.iconziyuan7:before {
+  content: "\e685";
+}
+
+.iconcixi:before {
+  content: "\e67f";
+}
+
+.iconchukong:before {
+  content: "\e680";
+}
+
+.icongongyeji:before {
+  content: "\e681";
+}
+
+.iconkuozhanxing:before {
+  content: "\e682";
+}
+
+.iconrenyuanfankui:before {
+  content: "\e683";
+}
+
+.iconwifi:before {
+  content: "\e684";
+}
+
+.iconfuwuzhiliang:before {
+  content: "\e679";
+}
+
+.iconshujugongxiang:before {
+  content: "\e67a";
+}
+
+.iconchanpincanshu:before {
+  content: "\e67b";
+}
+
+.iconyujingnengli:before {
+  content: "\e67c";
+}
+
+.iconshujuzhiliang:before {
+  content: "\e67d";
+}
+
+.iconyewuchuangxin:before {
+  content: "\e67e";
+}
+
+.iconyunduanbushu:before {
+  content: "\e674";
+}
+
+.iconkekuozhanxing:before {
+  content: "\e675";
+}
+
+.iconkuaisushangxian:before {
+  content: "\e676";
+}
+
+.iconlinghuopeizhi:before {
+  content: "\e677";
+}
+
+.iconchengbenjiaodi:before {
+  content: "\e678";
+}
+
+.iconjieshengchengben:before {
+  content: "\e6ff";
+}
+
+.iconpeisong:before {
+  content: "\e604";
+}
+
+.icontigaoxiaoshuai:before {
+  content: "\ee40";
+}
+
+.iconVR:before {
+  content: "\e60c";
+}
+
+.iconduocanshu:before {
+  content: "\e670";
+}
+
+.iconzuiyou:before {
+  content: "\e671";
+}
+
+.iconAI:before {
+  content: "\e672";
+}
+
+.iconmubiao:before {
+  content: "\e673";
+}
+
+.iconpingheng:before {
+  content: "\e606";
+}
+
+.iconERP:before {
+  content: "\e66a";
+}
+
+.iconJOT:before {
+  content: "\e66b";
+}
+
+.iconplm:before {
+  content: "\e66c";
+}
+
+.iconyouxiang-:before {
+  content: "\e6af";
+}
+
+.icondianhua01:before {
+  content: "\e68f";
+}
+
+.icondianhua:before {
+  content: "\e605";
+}
+
+.iconzhuce-youxiang:before {
+  content: "\e68e";
+}
+

src/assets/icon/iconfont.json

+{
+  "id": "2480204",
+  "name": "jianzhu",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon",
+  "description": "公司网站",
+  "glyphs": [
+    {
+      "icon_id": "21892568",
+      "name": "路径 1086",
+      "font_class": "lujing1086",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
+    {
+      "icon_id": "21411991",
+      "name": "客服",
+      "font_class": "ziyuan7",
+      "unicode": "e685",
+      "unicode_decimal": 59013
+    },
+    {
+      "icon_id": "20952435",
+      "name": "磁吸",
+      "font_class": "cixi",
+      "unicode": "e67f",
+      "unicode_decimal": 59007
+    },
+    {
+      "icon_id": "20952436",
+      "name": "触控",
+      "font_class": "chukong",
+      "unicode": "e680",
+      "unicode_decimal": 59008
+    },
+    {
+      "icon_id": "20952437",
+      "name": "工业级",
+      "font_class": "gongyeji",
+      "unicode": "e681",
+      "unicode_decimal": 59009
+    },
+    {
+      "icon_id": "20952438",
+      "name": "扩展性",
+      "font_class": "kuozhanxing",
+      "unicode": "e682",
+      "unicode_decimal": 59010
+    },
+    {
+      "icon_id": "20952439",
+      "name": "人员反馈",
+      "font_class": "renyuanfankui",
+      "unicode": "e683",
+      "unicode_decimal": 59011
+    },
+    {
+      "icon_id": "20952440",
+      "name": "wifi",
+      "font_class": "wifi",
+      "unicode": "e684",
+      "unicode_decimal": 59012
+    },
+    {
+      "icon_id": "20945481",
+      "name": "服务质量",
+      "font_class": "fuwuzhiliang",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "20945482",
+      "name": "数据共享",
+      "font_class": "shujugongxiang",
+      "unicode": "e67a",
+      "unicode_decimal": 59002
+    },
+    {
+      "icon_id": "20945483",
+      "name": "产品参数",
+      "font_class": "chanpincanshu",
+      "unicode": "e67b",
+      "unicode_decimal": 59003
+    },
+    {
+      "icon_id": "20945484",
+      "name": "预警能力",
+      "font_class": "yujingnengli",
+      "unicode": "e67c",
+      "unicode_decimal": 59004
+    },
+    {
+      "icon_id": "20945485",
+      "name": "数据质量",
+      "font_class": "shujuzhiliang",
+      "unicode": "e67d",
+      "unicode_decimal": 59005
+    },
+    {
+      "icon_id": "20945486",
+      "name": "业务创新",
+      "font_class": "yewuchuangxin",
+      "unicode": "e67e",
+      "unicode_decimal": 59006
+    },
+    {
+      "icon_id": "20935213",
+      "name": "云端部署",
+      "font_class": "yunduanbushu",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "20935214",
+      "name": "可扩展性",
+      "font_class": "kekuozhanxing",
+      "unicode": "e675",
+      "unicode_decimal": 58997
+    },
+    {
+      "icon_id": "20935215",
+      "name": "快速上线",
+      "font_class": "kuaisushangxian",
+      "unicode": "e676",
+      "unicode_decimal": 58998
+    },
+    {
+      "icon_id": "20935216",
+      "name": "灵活配置",
+      "font_class": "linghuopeizhi",
+      "unicode": "e677",
+      "unicode_decimal": 58999
+    },
+    {
+      "icon_id": "20935217",
+      "name": "成本较低",
+      "font_class": "chengbenjiaodi",
+      "unicode": "e678",
+      "unicode_decimal": 59000
+    },
+    {
+      "icon_id": "5469096",
+      "name": "节省成本",
+      "font_class": "jieshengchengben",
+      "unicode": "e6ff",
+      "unicode_decimal": 59135
+    },
+    {
+      "icon_id": "11462175",
+      "name": "配送",
+      "font_class": "peisong",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "16871888",
+      "name": "提高效率",
+      "font_class": "tigaoxiaoshuai",
+      "unicode": "ee40",
+      "unicode_decimal": 60992
+    },
+    {
+      "icon_id": "18062827",
+      "name": "VR",
+      "font_class": "VR",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "20846388",
+      "name": "多参数",
+      "font_class": "duocanshu",
+      "unicode": "e670",
+      "unicode_decimal": 58992
+    },
+    {
+      "icon_id": "20846389",
+      "name": "最优",
+      "font_class": "zuiyou",
+      "unicode": "e671",
+      "unicode_decimal": 58993
+    },
+    {
+      "icon_id": "20846390",
+      "name": "AI",
+      "font_class": "AI",
+      "unicode": "e672",
+      "unicode_decimal": 58994
+    },
+    {
+      "icon_id": "20846391",
+      "name": "目标",
+      "font_class": "mubiao",
+      "unicode": "e673",
+      "unicode_decimal": 58995
+    },
+    {
+      "icon_id": "3851155",
+      "name": "平衡",
+      "font_class": "pingheng",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "20843459",
+      "name": "ERP",
+      "font_class": "ERP",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
+    {
+      "icon_id": "20843472",
+      "name": "JOT",
+      "font_class": "JOT",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "20843473",
+      "name": "plm",
+      "font_class": "plm",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
+    {
+      "icon_id": "5354204",
+      "name": "邮箱",
+      "font_class": "youxiang-",
+      "unicode": "e6af",
+      "unicode_decimal": 59055
+    },
+    {
+      "icon_id": "18368451",
+      "name": "电 话01",
+      "font_class": "dianhua01",
+      "unicode": "e68f",
+      "unicode_decimal": 59023
+    },
+    {
+      "icon_id": "20719703",
+      "name": "电  话",
+      "font_class": "dianhua",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "19830215",
+      "name": "注册-邮箱",
+      "font_class": "zhuce-youxiang",
+      "unicode": "e68e",
+      "unicode_decimal": 59022
+    }
+  ]
+}

src/assets/theme/phone.less

+/*移动端适配*/
+@media screen and (max-width:600px) {
+  .mainf {
+    width: 100%;
+
+    // overflow: hidden;
+    .main {
+      width: 100%;
+      padding: 0 0px;
+    }
+
+    h1 {
+      font-size: 24px;
+      height: 60px;
+      line-height: 60px;
+    }
+
+    .header {
+      background-color: @theme;
+      height: 60px;
+      position: inherit;
+      padding: 0;
+
+      i {
+        font-size: 24px;
+        color: white;
+        line-height: 60px;
+        margin: 0 5px;
+
+        &.icondianhua {
+          font-size: 18px;
+        }
+      }
+
+      .nav {
+        width: 100%;
+        line-height: 60px;
+        display: flex;
+        position: relative;
+
+        .phone {
+          display: block;
+        }
+
+        .logo {
+          margin-right: 0;
+          flex-grow: 1;
+          text-align: center;
+          display: block;
+          line-height: 60px;
+
+          img {
+            vertical-align: middle;
+            width: 60%;
+          }
+        }
+
+        .menu {
+          display: block;
+          background-color: white;
+          position: absolute;
+          z-index: 99;
+          width: 100%;
+          top: 80px;
+          padding: 0 0 0 10px;
+
+          >a {
+            width: 100%;
+            line-height: 25px;
+            font-size: 14px;
+            color: @theme;
+            display: block;
+            text-align: left;
+            min-width: 100%;
+            padding: 0 5px;
+
+            &.cur {
+              background-color: rgba(@theme, 0.1);
+              position: relative;
+
+              &::before {
+                width: 2px;
+                left: 0;
+                top: 0;
+                content: "";
+                height: 25px;
+                background-color: @theme ;
+                position: absolute;
+              }
+
+              &::after {
+                display: none;
+              }
+            }
+
+            .flexd {
+              position: static;
+              display: block;
+              background-color: white;
+              transform: translateX(-4px);
+              width: 100%;
+
+              .fg {
+                color: black;
+                padding: 0;
+                text-align: left;
+
+                h4 {
+                  font-size: 14px;
+                  font-weight: bold;
+                  line-height: 20px;
+                  padding: 0 10px;
+                }
+
+                a {
+                  color: @theme;
+                  display: block;
+                  text-align: left;
+                  padding: 0 10px;
+
+                  &:hover {
+                    color: @theme;
+                    font-weight: bold;
+                  }
+                }
+              }
+
+            }
+
+            &:hover {
+              background-color: white;
+            }
+          }
+        }
+
+        .ad {
+          font-size: 20px;
+          line-height: 60px;
+          min-width: 180px;
+          font-weight: bold;
+          i {
+            font-size: 20px;
+            margin: 0;
+            vertical-align: -1px;
+          }
+        }
+      }
+    }
+
+
+    .banner {
+      height: 189px;
+    }
+
+    .notice {
+      width: 100%;
+      line-height: 150%;
+    }
+
+    .flex {
+      flex-direction: column;
+    }
+
+    .footer {
+      height: auto;
+
+      .flex {
+        .about {
+          padding: 0 20px;
+
+          p {
+            padding: 0;
+          }
+        }
+
+        .product {
+          .flex {
+            flex-direction: column;
+          }
+
+          padding:0;
+        }
+
+        .fg {
+          width: calc(100% - 20px);
+          padding-left: 20px;
+        }
+      }
+
+      .contact {
+        line-height: 30px;
+        font-size: 14px;
+      }
+    }
+
+    .body {
+      .service {
+        .pr {
+          height: auto;
+        }
+
+        .pa {
+          width: 60%;
+          padding: 5px 10px 0 5px;
+          bottom: 7px;
+          overflow: hidden;
+
+          .title {
+            height: 40px;
+            font-size: 18px;
+            line-height: 20px;
+          }
+
+          .info {
+            // height: 60px;
+            // background-color: red;
+            // width: 100%;
+            margin-top: 5px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            /* 将对象作为弹性伸缩盒子模型显示 */
+            -webkit-line-clamp: 4;
+            /* 控制最多显示几行 */
+            -webkit-box-orient: vertical;
+            /* 设置或检索伸缩盒对象的子元素的排列方式 */
+
+          }
+        }
+      }
+    }
+
+    .product {
+      a.item {
+
+        // width: 90%;
+        img {
+          width: calc(100vw - 20px);
+        }
+
+        // &.w2{
+        //     width: 90%;
+        //     img{
+        //         width: 100vw;
+        //     }
+        // }
+        width: 100%;
+
+        &.w2 {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+
+  .banner1 {
+    img {
+      height: auto;
+    }
+  }
+
+  img {
+    max-width: 100vw;
+  }
+
+  .compnay-info {
+
+    .flex {
+      .fg {
+        img {
+          max-width: 100vw;
+        }
+
+        p {
+          padding-left: 20px;
+        }
+      }
+    }
+
+    .job-items .job-tabs .tab {
+      height: 35px;
+      line-height: 35px;
+      font-size: 18px;
+    }
+  }
+
+  .product-main {
+    .problem {
+      padding: 0;
+
+      .item {
+        line-height: 20px;
+        width: 100%;
+
+        .seq {
+          font-size: 24px;
+          margin-right: 0;
+        }
+
+        &.s1 {
+          padding-left: 0;
+        }
+      }
+    }
+
+    .ac {
+      img {
+        max-width: 100vw;
+      }
+    }
+
+    .menu {
+      display: none;
+    }
+
+    .function {
+      padding: 0;
+
+      .cards {
+        flex-direction: column;
+        height: auto;
+
+        .operate {
+          display: none;
+          background-color: red;
+        }
+
+        .card-body {
+          flex-direction: column;
+
+          .card-item {
+            width: 100%;
+          }
+        }
+      }
+
+    }
+  }
+
+  .case-main {
+    width: 100%;
+
+    .case {
+      .fg {
+        .case-title {
+          font-size: 20px;
+          line-height: 40px;
+
+          img {
+            vertical-align: top;
+            float: left;
+          }
+        }
+
+        width: 100%;
+
+        &.info {
+          padding: 10px;
+        }
+
+        &.img {
+          padding: 0;
+          width: calc(100vw - 20px);
+
+          &.o1 {
+            order: 10;
+          }
+        }
+      }
+    }
+  }
+
+  .case1 {
+    color: #333333;
+    width: 100%;
+
+
+    .caseText {
+      width: 100%;
+      padding: 0 20px;
+      background: #ffffff;
+      display: flex;
+      flex-direction: column;
+      line-height: 40px;
+
+      .titleLine {
+        font-size: 22px;
+        line-height: 40px;
+        margin-top: 70px;
+        font-weight: bolder;
+      }
+
+      P span {
+        margin-left: 50px;
+        display: inline-block;
+      }
+
+      .tD {
+        text-indent: 2em;
+      }
+
+      .s1 {
+        font-size: 14px;
+        font-weight: bolder;
+        margin-top: 20px;
+      }
+
+      .s2 {
+        font-size: 12px;
+        font-weight: bolder;
+      }
+
+      .foot {
+        position: relative;
+        margin-top: 100px;
+        font-size: 16px;
+        margin-bottom: 20px;
+
+        p {
+          cursor: pointer;
+        }
+
+        p:hover {
+          color: #005385;
+        }
+      }
+    }
+  }
+}

src/components/Logo.vue

+<template>
+  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+      fill="#00C58E"
+    />
+    <path
+      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+      fill="#108775"
+    />
+    <path
+      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+      fill="#2F495E"
+    />
+  </svg>
+</template>
+
+<style>
+.NuxtLogo {
+  animation: 1s appear;
+  margin: auto;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+}
+</style>

src/components/README.md

+# COMPONENTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+The components directory contains your Vue.js Components.
+
+_Nuxt.js doesn't supercharge these components._

src/components/count-up.vue

+<template>
+    <span class="ivu-count-up"></span>
+</template>
+<script>
+    import CountUp from 'countup.js';
+
+    export default {
+        name: 'CountUp',
+        props: {
+            start: {
+                type: Number,
+                required: false,
+                default: 0
+            },
+            end: {
+                type: Number,
+                required: true
+            },
+            // 小数位数
+            decimals: {
+                type: Number,
+                required: false,
+                default: 0
+            },
+            // 持续时间
+            duration: {
+                type: Number,
+                required: false,
+                default: 2
+            },
+            // countup.js 设置项
+            options: {
+                type: Object,
+                required: false,
+                default () {
+                    return {};
+                }
+            },
+            callback: {
+                type: Function,
+                required: false,
+                default: () => {}
+            }
+        },
+        data () {
+            return {
+                CountUp: null
+            };
+        },
+        watch: {
+            end (value) {
+                if (this.CountUp && this.CountUp.update) {
+                    this.CountUp.update(value);
+                }
+            }
+        },
+        mounted () {
+            this.init();
+        },
+        methods: {
+            init () {
+                if (!this.CountUp) {
+                    this.CountUp = new CountUp(
+                        this.$el,
+                        this.start,
+                        this.end,
+                        this.decimals,
+                        this.duration,
+                        this.options
+                    );
+                    this.CountUp.start(() => {
+                        this.callback(this.CountUp);
+                    });
+                }
+            },
+            destroy () {
+                this.CountUp = null;
+            }
+        },
+        beforeDestroy () {
+            this.destroy();
+        },
+        start (callback) {
+            if (this.CountUp && this.CountUp.start) {
+                this.CountUp.start(() => {
+                    callback && callback(this.CountUp);
+                });
+            }
+        },
+        pauseResume () {
+            if (this.CountUp && this.CountUp.pauseResume) {
+                this.CountUp.pauseResume();
+            }
+        },
+        reset () {
+            if (this.CountUp && this.CountUp.reset) {
+                this.CountUp.reset();
+            }
+        },
+        update (newEndVal) {
+            if (this.CountUp && this.CountUp.update) {
+                this.CountUp.update(newEndVal);
+            }
+        }
+    };
+</script>
\ No newline at end of file

src/components/loading.vue

+<template>
+ <div v-if="loading">
+loading....
+ </div>
+</template>
+
+<script>
+ export default {
+   data () {
+     return {
+         loading:false
+     }
+   },
+   components: {
+   },
+   methods: {
+       start(){
+           this.loading=true;
+       },
+       finish(){
+           this.loading=false;
+       }
+   }
+ }
+</script>
+
+<style lang="less">
+
+ 
+</style>

src/components/product-functions.vue

+<template>
+    <div class="function">
+      <div class="cards">
+        <div class="operate" :class="{disabled:last}" v-if="list.length>5">
+          <Icon type="ios-arrow-back" size="60" @click="page(-1)"/>
+        </div>
+        <div class="card-body">
+          <div class="card-item" v-for="(li,i) in items" :key="i">
+            <div class="card">
+            <div class="card-title" v-html="li.title">
+              
+            </div>
+            <div class="card-info" v-html="li.content"></div>
+          </div>
+          </div>
+        </div>
+        <div class="operate" :class="{disabled:next}"  v-if="list.length>5">
+          <Icon type="ios-arrow-forward" size="60" @click="page(1)"/>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ProductFuntions',    
+        props:{
+            list:{
+                type:Array,
+                default:[]
+            }
+        },
+        data(){
+            return {
+                index:0,
+            }
+        },
+        methods:{
+            page(n){
+                this.index+=n;
+                if(this.index<0){
+                    this.index=0;
+                } else if(this.index>this.list.length-5){
+                    this.index=this.list.length-5;
+                }
+            }
+        },
+        computed:{
+            items(){
+                return this.list.filter((u,i)=>{
+                    return i>=this.index&&i<this.index+5;
+                })
+            },
+            next(){
+                return this.list.length-this.index-5==0;
+            },
+            last(){
+                return this.index==0
+            }
+        }
+    }
+</script>
\ No newline at end of file

src/components/product-menu.vue

+<template>
+  <div class="menu" v-if="1==2">
+    <div class="title">
+      <span v-text="title"></span>
+    </div>
+    <ul class="nav">
+      <li @click="go(0)" :class="{ cur: index == 0 }">
+        <span>产品简介</span>
+      </li>
+      <li @click="go(1)" :class="{ cur: index == 1 }">
+        <span>核心优势</span>
+      </li>
+      <li @click="go(2)" :class="{ cur: index == 2 }">
+        <span>应对问题</span>
+      </li>
+      <li @click="go(3)" :class="{ cur: index == 3 }">
+        <span>主要功能</span>
+      </li>
+      <li @click="go(4)" :class="{ cur: index == 4 }">
+        <span>适配场景</span>
+      </li>
+      <li @click="go(5)" :class="{ cur: index == 5 }">
+        <span>应用价值</span>
+      </li>
+    </ul>
+    <div class="back" @click="go(-1)">
+      <span>
+        <Icon type="ios-arrow-up" size="30" />
+        顶部
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ProductMenu",
+  data() {
+    return {
+      index: 0,
+      steps: [],
+    };
+  },
+  props: {
+    title: {
+      type: String,
+      default: "目录",
+    },
+  },
+  mounted() {
+    window.addEventListener("scroll", (e) => {
+      let y = window.scrollY;
+      this.steps.forEach((v, i) => {
+        console.warn("scrooll", v, window.scrollY);
+        if (v - y < 160) {
+          this.index = i;
+        }
+      });
+    });
+    let timer = setInterval(() => {
+      if (document.readyState == "complete") {
+        this.initStep();
+        window.clearInterval(timer);
+        console.warn(this.steps);
+      }
+    }, 1000);
+  },
+  methods: {
+    go(i) {
+      if (i == -1) {
+        window.scrollTo(0, 0);
+        this.index = 0;
+      } else {
+        let item = document.getElementById("h" + i);
+        window.scrollTo(0, item.offsetTop - 120);
+        this.index = i;
+        console.warn(i, this.steps[i], item.offsetTop);
+      }
+    },
+    initStep() {
+      let ul = [];
+      for (let index = 0; index < 6; index++) {
+        let item = document.getElementById("h" + index);
+        ul.push(item.offsetTop);
+      }
+      this.steps = ul;
+      console.warn(this.steps);
+    },
+  },
+  computed: {},
+};
+</script>
\ No newline at end of file

src/components/product-problem.vue

+<template>
+    <div class="problem">
+      <div class="item" v-for="(li,i) in list" :class="{ s1: i % 4 < 2 }">
+        <span class="seq"> 0{{ i+1 }} </span>
+        {{li}}
+      </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'ProductProblem',
+        props:{
+            list:{
+                type:Array,
+                default:[]
+            }
+        }
+    }
+</script>
\ No newline at end of file

src/components/send.vue

+<template>
+     <div class="main send">
+         <h2>想要体验一下</h2>
+         <div class="form">
+           <div class="item">
+             <span class="red">*</span>
+             <input type="text" placeholder="您的手机号码">
+           </div>
+           <div class="item">
+             <span class="red">*</span>
+             <input type="text" placeholder="您的称呼">
+           </div>
+           <div class="item">
+             <span class="red">*</span>
+             <input type="text" placeholder="公司名称">
+           </div>
+           <div class="item">
+             <span class="red">*</span>
+             <input type="text" placeholder="邮箱">
+           </div>
+           <div class="item">
+             <span class="red">*</span>
+             <input type="text" placeholder="所在行业">
+           </div>
+           <div class="item">
+            <button>提交</button>
+           </div>
+         </div>
+     </div>
+</template>
+
+<script>
+ export default {
+   name:"send",
+   props:{
+     type:{
+       type:String
+     }
+   },
+   data () {
+     return {
+
+     }
+   },
+   components: {
+   },
+   methods: {
+   }
+ }
+</script>
+
+<style lang="less">
+
+ 
+</style>

src/config.js

+const env = process.env.NODE_ENV;
+const Config = {
+
+    /**
+     * @description: 消息提示类型
+     *[,'Message','Notice']
+     */
+    messageType: 0,
+    /**
+     * @description:  消息提示显示时间，单位秒
+     */
+    messageDuration: 3,
+    /**
+     * @description:  默认接口地址
+     */
+    // apiBaseUrl: "http://localhost:6066",
+    apiBaseUrl: "http://47.92.102.113:6066",
+    // apiBaseUrl: "http://154.8.185.122:8002",
+    timeout: 30000, // 请求超时时间
+}
+export default Config;
\ No newline at end of file

src/layouts/README.md

+# LAYOUTS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts).

src/layouts/error.vue

+<template>
+ <div class="main">
+<h1 v-if="error.statusCode">页面不存在</h1>
+<h1 v-else>发生异常</h1>
+<Button>跳转道首页</Button>
+ </div>
+</template>
+
+<script>
+ export default {
+   data () {
+     return {
+
+     }
+   },
+   props:["error"],
+   methods: {
+   }
+ }
+</script>
+
+<style lang="less">
+
+ 
+</style>

src/middleware/README.md

+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

src/middleware/auth.js

+export default ({
+    store,
+    route,
+    redirect,
+    params,
+    query,
+    req,
+    res
+})=>{
+    /**
+     * content
+     * store 状态树
+     */
+    console.warn("middleware");
+    // redirect("/login")
+    // console.warn("middleware",context)
+}
\ No newline at end of file

src/pages/about/_id.vue

+<template>
+  <div 　class="compnay-info">
+    <div class="banner1">
+           <img src="/images/about.png" alt="关于我们" />
+    </div>
+    <div class="main pt50 job-items">
+      <div class="job-tabs">
+        <div class="tab" :class="{cur:type=='市场'}" @click="change('市场')">市场</div>
+        <div class="tab" :class="{cur:type=='开发'}"  @click="change('开发')">开发</div>
+        <div class="tab" :class="{cur:type=='销售'}"  @click="change('销售')">销售</div>
+      </div>
+      <div class="jobs">
+        <div class="job" v-for="(job, i) in jobs">
+          <div class="job-title">
+            {{ job.title }}
+          </div>
+          <div class="flex">
+            <label class="job-label"> 工作地点： </label>
+            <div class="fg" v-html="job.city"></div>
+          </div>
+
+          <div class="flex">
+            <label class="job-label"> 工作描述： </label>
+            <div class="fg" v-html="job.info"></div>
+          </div>
+          <div class="flex">
+            <label class="job-label"> 任职要求： </label>
+            <div class="fg" v-html="job.ask"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  head: {
+    title: "加入我们---北京见著科技有限公司--MES系统",
+  },
+  name: "",
+  data() {
+    return {
+      type:this.$route.params.type
+    };
+  },
+  computed:{
+    jobs(){
+      return this.$store.state.jobs.filter(u=>{
+        return u.type==this.type
+      })
+    }
+  },
+  methods:{
+    change(type){
+      this.type=type;
+    }
+  }
+};
+</script>

src/pages/about/index.vue

+<template>
+  <div　class="compnay-info">
+    <div class="banner1">
+      <img src="/images/about.png" alt="关于我们" />
+    </div>
+        <div class="bg">
+          <div class="main">            
+      <div class="flex">
+        <div class="fg">
+           <img src="/images/about/map.png" alt="成长之路" />
+        </div>
+        <div class="fg info">
+           <div class="info-title">关于我们</div>
+           <div class="info-content">
+              <p> 　　北京见著科技有限公司,致力于为科研和制造业企业提供智能化解决方案。公司依托对大数据、AI及IOT等技术的研究,聚焦大数据智能应用和生产智能化领域,为企业提供量身定制的高端产品解决方案,助力企业智能化升级。<br/>
+       　　公司坚持自主研发与创新发展, 汇聚了企业管理、应用数学、计算机、自动化和系统工程等领域的专业人才，并与众多科研院所和大学建立科研合作,打造出了一系列技术领先、极具竞争力的产品,服务于广大客户。公司总部在北京，在西安、无锡设有研发中心和分支机构。
+          </p>
+           </div>         
+        </div>
+      </div>
+          </div>     
+      <div class="pt50"></div>
+    </div>    
+    <div class="main pt50">
+      <h1>我们的成长之路</h1>
+      <div class="ac">
+          <img src="/images/about/life.png" alt="成长之路" />
+      </div>
+    </div>
+    <div class="main pt50">
+      <h1>加入我们</h1>
+      <div class="jobs flex">
+       <div class="job fg "  v-for="(c,i) in list" :key="i">
+         <div class="job-title">
+           {{c[0].type}}
+         </div>
+         <div class="job-items" >
+           <nuxt-link v-for="(job,j) in c" :key="i+'-'+j" :to="{ name: 'about-id', params: { id: job.id ,type:c[0].type} }">
+              {{ job.title }}
+            </nuxt-link>
+         </div>
+       </div>
+      </div>
+    </div>
+    <div class="pt50"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  head: {
+    title: "关于我们---北京见著科技有限公司--MES系统",
+  },
+  data() {
+    let groupBy = (list, fn) => {
+      const groups = {};
+      list.forEach(function (o) {
+        const group = JSON.stringify(fn(o));
+        groups[group] = groups[group] || [];
+        groups[group].push(o);
+      });
+      return groups;
+    };
+    let list = groupBy(this.$store.state.jobs, (u) => {
+      return u.type;
+    });
+    console.warn(list, "vvvv,", this.$store.state.jobs);
+    return {
+      list: list,
+    };
+  },
+  components: {},
+  methods: {},
+};
+</script>
\ No newline at end of file

src/pages/case/case1.vue

+<template>
+  <div class="case1">
+    <div class="banner1">
+         <img src="/images/about.png" alt="关于我们" />
+    </div>
+    <div class="caseText">
+      <h4 class="titleLine">中国航天科技集团某研究所MES系统</h4>
+      <h5 class="s1">项目概述</h5>
+      <p class="tD">建立针对涡轮、冲压、固体及组合动力装置的生产管理体系，实现对生产计划和工时的信息化集成管理。</p>
+      <p  class="tD">  对所内生产配套产品，搭建集资源、工艺及工时等信息为一体的基础数据平台，形成从年度到月度计划、从班组到操作者计划的扁平化信息传递和动态执行更新，实现对计划与工时进行按项目、按人员的一
+      对一精准采集与统计。</p>
+      <p  class="tD">建立起面向整体任务的预先评价、面向生产过程的执行管控，以及面向参与全员的绩效考评，探索计划工时信息化协同管理对提高生产绩效管理和加速生产效能提升的积极效果。 </p>
+      
+      <h5 class="s1">项目实施</h5>
+      <p>(1)集成ERP和PLM系统，共享订单、设备、人员、工艺、生产BOM与NC程序数据。</p>
+     <p> (2)搭建基础数据管理平台，实现工艺、资源、人员等信息关联。</p>
+     <p> (3)建立多级计划管理体系，实现计划精准传递和实时监控统计。</p>
+     <p> (4)通过计划工时协同管理，实现精准动态统计和多维考核评价。</p>
+     <p> (5)深度融合管理开发团队，实现系统开发测试和优化高效并行。</p>
+      <h5 class="s1">项目效果</h5>
+      <p class="s2">改变了生产管理模式，提升了生产管理效能</p>
+<p class="tD">将所内传统的逐级向下的传递式计划管理与逐级向上的报送式工时管理模式转变为对计划与工时的一体化协同管理模式。</p>
+      <p class="s2">促进了人才队伍的发展，培养了一支熟悉信息化和智能化管理的队伍</p>
+      <p class="tD">项目的开发实施涉及到所外开发公司和所内型号、生产、质量、物资、检测、信息化、试验、各工艺和车间等十几个部门的各类生产过程参与人员，频繁的业务沟通讨论和流程设计协调，锻炼了一支熟悉网
+      络化、信息化、智能化的管理队伍。</p>
+      <p class="s2">降低了人力成本和时间成本，提高了发展活力</p>
+      <p class="tD">将各单位生产管理相关人员需求减少约15人，节省了各级调度人员在计划沟通反馈和工时统计填报上的时间投入，降低了人力成本，提高了人员工作积极性。</p>
+      <div class="foot">
+        <p class="bp">
+          上一篇：已经是最新的一篇了
+          <!-- <span>1</span> -->
+        </p>
+        <router-link :to="'/case/case2'">
+          <p>下一篇：中国航天科技集团某研究所</p>
+        </router-link>
+      </div>
+      <div class="pt50"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    head: {
+    title: "案例---北京见著科技有限公司--MES系统",
+  },
+  name: "",
+  data() {
+    return {};
+  }
+};
+</script>
\ No newline at end of file

src/pages/case/case2.vue

+<template>
+  <div class="case1">
+    <div class="banner1">
+       <img src="/images/about.png" alt="关于我们" />
+    </div>
+    <div class="caseText">
+      <h4 class="titleLine">中国航天科技集团某厂MES系统</h4>
+      <h5 class="s1">项目概述</h5>
+     <p class="tD"> 本项目是针对装配车间的车间级的 MES 生产执行系统。电子装配车间是产品工艺的最后一个环节，是信息化建设从机械加工向装配的扩展和延伸。项目的目的在于实现从接单到生产制造的“一站式”管控和
+     信息化管理。并通过试点先行，快速见效，在稳定运行的基础上向全所推广。</p>
+      <h5 class="s1">项目实施</h5>
+      <p>(1)系统边界划分与数据管理：ERP与MES主数据共享、MRP计划与MES的数据传递、生产报工数据的实时集成。</p>
+       <p>(2)数据采集：实现从原材料批次、产品序列号、生产工单、配送需求单等全流程使用一维，提高数据采集效率并防呆防错。</p>
+      <p>(3)计划调度：实现对生产任务的全过程管控，包括任务的分卡，调度排产，现场扰动处理，根据现场情况二次排产；提高问题处理效率和管理强度；实现现场管理透明化，使得生产节拍更具连贯性；对物
+     料和产品技术状态的齐套性检查，控制工单下达，避免现场生产待料等待的浪费；计划下达后系统自动发送站内信，责任明确，反应迅速。</p>  
+       <p>(4)生产执行：第一时间接收工单任务，并根据物料条码进行物料安装，通过条码识别对配套件起到防错漏作用。；用工位摄像头可进行在制品图像管理。</p>
+       <p>(5)物料管理配送：中转库物料统一条码管理，方便数据定位和分拣；可与立体库AGV集成，实现物料一体化管理和配送。</p>
+       <p>(6)质量管控和追溯管理：检测模版和隔离工单管理将检测工序和不良品管控要求落地，生产工序过程、操作人员、检验结果、关键设备参数等通过工单管理和设备数据集成采集实现追溯的电子化。</p>
+       <p>(7)现场目视化管理：生产现场通过液晶显示屏将看板需求及其紧要程度进行展示，指导各工序生产安排；大屏能够对物料缺件信息进行快速上报，并对生产绩效进行现场展示，提升生产执行保障能力。</p>
+      <h5 class="s1">项目效果</h5>
+      <p class="tD">项目实现了“透明管控，高效执行，连续流动”三大核心目标。通过采用工人自动刷卡（出入证）及扫描《生产过程跟踪卡》进行自动报开工与完工，节省了车间调度现场巡察记录时间；生产进度信息可在会
+      议室投影展示，节省了领导、调度、生产线工人之间的沟通时间；通过现场的目视化和质量追溯电子化管理，提高了操作效率，为生产和质量过程控制及持续改善提供了详实准确数据；改变了传统的生产管
+      理模式，在生产管理的扁平化、智能化、透明化上取得良好开端，获得了提质、增效、降本、少人化、精细化五大管理实效。</p>
+      <div class="foot">
+        <router-link :to="'/case/case1'">
+          <p>上一篇：中国航天科技集团某研究所</p>
+        </router-link>
+        <p class="bp2">
+          下一篇：已经到底了
+          <!-- <span>1</span> -->
+        </p>
+      </div>
+         <div class="pt50"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    head: {
+    title: "案例---北京见著科技有限公司--MES系统",
+  },
+  name: "",
+  data() {
+    return {};
+  }
+};
+</script>

src/pages/case/index.vue

+<template>
+  <div class="case-main">
+    <div class="banner1">
+      <img src="/images/about.png" alt="关于我们" />
+    </div>
+    <div class="main">
+      <div class="case flex bt1">
+        <div class="info fg">
+          <router-link :to="'/case/case1'">
+            <div class="case-title">
+              <img src="/images/case/a2.png" />中国航天科工集团某研究所 MES 系统
+            </div>
+            <p>　　建立针对涡轮、冲压、固体及组合动力装置的生产管理体系，实现对生产计划和工时的信息化集成管理。
+              <br />　　对所内生产配套产品，搭建集资源、工艺及工时等信息为一体的基础数据平台，形成从年度到月度计划、从班组到操作者计划的扁平化信息传递和动态执行更新，实现对计划与工时进行按项目、按人员的一对一精准采集与统计。
+            </p>
+          </router-link>
+        </div>
+        <div class="img fg">
+          <img src="/images/case/al.png" />
+        </div>
+      </div>
+      <div class="case flex">
+        <div class="img fg o1">
+          <img src="/images/case/al2.png" />
+        </div>
+        <div class="info fg">
+          <router-link :to="'/case/case2'">
+            <div class="case-title">
+              <img src="/images/case/a1.png" />　中国航天科技集团某厂 MES 系统
+            </div>
+            <p>　　本项目是针对装配车间的车间级的 MES
+              生产执行系统。电子装配车间是产品工艺的最后一个环节，是信息化建设从机械加工向装配的扩展和延伸。项目的目的在于实现从接单到生产制造的“一站式”管控和信息化管理。并通过试点先行，快速见效，在稳定运行的基础上向全所推广。
+            </p>
+          </router-link>
+        </div>
+      </div>
+      <div class="pt50"></div>
+      <h1>典型客户</h1>
+      <div class="ac">
+        <img src="/images/case/logos.png" />
+      </div>
+      <div class="pt50"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  head: {
+    title: "案例---北京见著科技有限公司--MES系统",
+  },
+  name: "",
+  data() {
+    return {};
+  },
+};
+</script>
\ No newline at end of file

src/pages/index.vue

+<template>
+  <div>
+    <div class="banner-new">
+      <div class="pr">
+        <img class="act" src="/images/banner/new.jpg" />
+        <div class="pa">
+          <div class="kouhao">
+            <div class="k1">见微知著</div>
+            <div class="k2">成为中国企业走向智能化的好伙伴</div>
+            <img src="/images/banner/kouhao.png" />
+            <div class="k3">
+              以集团型、定制化智能制造方案为基石<br />
+              领先研发标准化、轻量化智能制造云平台<br />
+              助力企业轻松步入智能化发展快车道<br />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="notice" v-if="false">
+      <span class="title"> 见著新闻动态 </span>
+      <a>
+        北京见著科技有限公司于8月8日于A股上市北京见著科技有限公司于8月8日于A股上市
+      </a>
+    </div>
+    <div class="main product">
+      <div class="pt50"></div>
+      <h1>我们的产品</h1>
+      <div class="pt50"></div>
+      <h5>智能制造</h5>
+      <div class="flex">
+        <nuxt-link class="item" to="/product/mes">
+          <img src="/images/home/product/p1.png" />
+          <p>MES智能化制造</p>
+        </nuxt-link>
+        <nuxt-link class="item" to="/product/saas">
+          <img src="/images/home/product/p2.png" />
+          <p>SaaS MES云端协同</p>
+        </nuxt-link>
+        <nuxt-link class="item" to="/product/aps">
+          <img src="/images/home/product/p3.png" />
+          <p>APS高级排产</p>
+        </nuxt-link>
+      </div>
+      <div class="pt50"></div>
+      <h5>大数据应用</h5>
+      <div class="flex">
+        <nuxt-link class="item w2" to="/product/bigdata">
+          <img src="/images/home/product/p4.png" />
+          <p>数据中台</p>
+        </nuxt-link>
+        <nuxt-link class="item w2" to="/product/phm">
+          <img src="/images/home/product/p5.png" alt="phm" />
+          <p>PHM健康管理</p>
+        </nuxt-link>
+      </div>
+      <div class="pt50"></div>
+      <h5>工业互联</h5>
+      <div class="flex">
+        <nuxt-link class="item w2" to="/product/mdc">
+          <img src="/images/home/product/p6.png" />
+          <p>MDC数据采集</p>
+        </nuxt-link>
+        <nuxt-link class="item w2" to="/product/dnc">
+          <img src="/images/home/product/p7.png" alt="MES" />
+          <p>DNC数控联网</p>
+        </nuxt-link>
+      </div>
+    </div>
+    <div class="pt50"></div>
+    <div class="service bg">
+      <div class="main">
+        <h1>20年大项目经验积累</h1>
+        <Carousel
+          autoplay
+          v-model="value2"
+          loop
+          :autoplay-speed="5000"
+          dots="outside"
+        >
+          <CarouselItem>
+            <div class="pr">
+              <img src="/images/home/al/a1.jpg" alt="我们服务于" />
+              <div class="pa">
+                <div class="flexd">
+                  <div class="title">中国航天科工集团某研究所</div>
+                  <div class="info fg">
+                    建立针对涡轮、冲压、固体及组合动力装置的生产管理体系，实现对生产计划和工时的信息化集成管理。
+                    对所内生产配套产品，搭建集资源、工艺及工时等信息为一体的基础数据平台，形成从年度到月度计划、从班组到操作者计划的扁平化信息传递和动态执行更新，实现对计划与工时进行按项目、按人员的一对一精准采集与统计。
+                  </div>
+                  <div class="ar">
+                    <a class="moreal" href="/case/case1">查看</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CarouselItem>
+          <CarouselItem>
+            <div class="pr">
+              <img src="/images/home/al/a2.jpg" alt="我们服务于" />
+              <div class="pa">
+                <div class="flexd">
+                  <div class="title">中国航天科技集团某厂</div>
+                  <div class="info fg">
+                    本项目是针对装配车间的车间级的 MES
+                    生产执行系统。电子装配车间是产品工艺的最后一个环节，是信息化建设从机械加工向装配的扩展和延伸。项目的目的在于实现从接单到生产制造的“一站式”管控和信息化管理。并通过试点先行，快速见效，在稳定运行的基础上向全所推广。
+                  </div>
+                  <div class="ar">
+                    <a class="moreal" href="/case/case2">查看</a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </CarouselItem>
+        </Carousel>
+      </div>
+    </div>
+    <div class="main custom">
+      <h1>我们的客户</h1>
+      <div class="ac">
+        <img src="/images/home/customs.png" alt="" />
+      </div>
+      <div class="pt50 ac">
+        <nuxt-link to="/case">查看更多>></nuxt-link>
+      </div>
+      <div class="pt50"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  head: {
+    title: "北京见著科技有限公司--MES系统",
+  },
+  middleware(context) {
+    console.warn("middleware", "page");
+  },
+  validate(params, query) {
+    console.warn("validate");
+    // console.warn("params",params)
+    // console.warn("query",query)
+    return true;
+  },
+  async asyncData({ $axios }) {
+    // let { data } = await $axios.get("/data/list.json");
+    // return {
+    //   title2: data
+    // };
+  },
+  data() {
+    return {
+      title2: "hooho",
+      value2: 1,
+      auto: false,
+    };
+  },
+  methods: {
+    send(msg) {
+      this.$store.commit("openModal", msg);
+    },
+  },
+};
+</script>
\ No newline at end of file

src/pages/news/_id.vue

+<template>
+  <div>
+    <div class="banner1">
+      <img src="/images/about.png" alt="关于我们" />
+    </div>
+    <div class="main pt50">
+      <h1>这是一篇新闻详细</h1>
+      <div class="ac">
+          {{new Date()}}
+          </div>      
+      <div class="pt50 con">
+        职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职
+        位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位
+        介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介
+        绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍详情职位介绍
+        详情职位介绍详情
+      </div>
+      <div class="pt50">
+          <p>
+              上一篇：没有了
+          </p>
+           <p>
+              下一篇：没有了
+          </p>
+      </div>
+      <div class="pt50"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+    head:{
+    title:"新闻中心---北京见著科技有限公司--MES系统"
+  },
+  name: "",
+  data() {
+    return {};
+  },
+};
+</script>

src/pages/news/index.vue

+<template>
+  <div>
+    <div class="banner1">
+          <img src="/images/about.png" alt="关于我们" />
+    </div>
+    <div class="main pt50">
+      <h1>公司动态</h1>
+    <Row>
+        <Col :span="8" v-for="i in 6" :key="i">
+            <nuxt-link class="news" :to="{ name: 'news-id', params: { id: i } }">
+                <img src="/images/empty.jpg" alt="没有图片">
+                <div class="b">这是第一篇新闻的标题，居中，加粗</div>
+                <p>
+                    这是第一篇新闻的标题，居中，加粗这是第一篇新闻的标题，居中，加粗这是第一篇新闻的标题，居中
+                </p>
+            </nuxt-link>
+        </Col>
+    </Row>
+    </div>
+    <div class="main pt50">
+      <h1>行业动态</h1>    
+       <Row>
+        <Col :span="8" v-for="i in 6" :key="i">
+            <nuxt-link class="news" :to="{ name: 'news-id', params: { id: i } }">
+                <img src="/images/empty.jpg" alt="没有图片">
+                <div class="b">这是第一篇新闻的标题，居中，加粗</div>
+                <p>
+                    这是第一篇新闻的标题，居中，加粗这是第一篇新闻的标题，居中，加粗这是第一篇新闻的标题
+                </p>
+            </nuxt-link>
+        </Col>
+    </Row>
+    </div>
+    <div class="pt50"></div>
+  </div>
+</template>
+
+<script>
+export default {
+    head:{
+    title:"新闻中心---北京见著科技有限公司--MES系统"
+  },
+  data() {
+    return {
+      list: [
+        {
+          id: 1,
+          name: "JAVA开发工程师",
+        },
+        {
+          id: 2,
+          name: "SAAS开发工程师",
+        },
+        {
+          id: 3,
+          name: "软件测试工程师",
+        },
+        {
+          id: 4,
+          name: "高级产品经理",
+        },
+        {
+          id: 5,
+          name: "开发运维工程师",
+        },
+      ],
+    };
+  },
+  components: {},
+  methods: {},
+};
+</script>
\ No newline at end of file

src/pages/product/aps.vue

+<template>
+  <div class="main product-main">
+    <h5>APS高级排产</h5>
+    <h6 id="h0">
+      产品简介
+      <span>INTRODUCTION</span>
+    </h6>
+    <div class="pb50">
+      <p>
+        　　APS（Advanced Planning and
+        Scheduling）即高级计划与排产，运用数学模型和相关技术为复杂的生产和供应问题找出优化的解决方案。
+        APS能够显著提高企业经济效益，它能及时响应客户需求，快速同步生产计划，提供准确的交货日期，减少在制品与成品库存，自动识别潜在瓶颈，最终提高企业管理水平。
+      </p>
+    </div>
+    <h6 id="h1">
+      核心优势
+      <span>ADVANTAGE</span>
+    </h6>
+    <div>
+      <div class="advantage">
+        <div class="img">
+          <img src="/images/product/aps/advantage.png" alt />
+        </div>
+      </div>
+    </div>
+    <h6 id="h2">
+      应对问题
+      <span>PROBLEM</span>
+    </h6>
+    <product-problem :list="product.problems" />
+    <h6 id="h3">
+      主要功能
+      <span>FUNCTION</span>
+    </h6>
+    <product-functions :list="product.functions" />
+    <h6 id="h4">
+      适配场景
+      <span>SCENE</span>
+    </h6>
+    <p>
+      　　适用于离散型企业，特别针对品种多、批量小、工艺流程变化快，对生产计划要求高，却又缺乏计划排产工具的生产型企业。
+    </p>
+    <div class="scene s2">
+      <ul>
+        <li
+          class="scene-img"
+          v-for="(li, i) in list"
+          :key="i"
+          @mouseover="hover(i)"
+          :class="{ cur: pointIndex == i }"
+        >
+          <img :src="li.img" alt="" />
+          <div class="title">
+            {{ li.title }}
+          </div>
+        </li>
+      </ul>
+    </div>
+    <h6 id="h5">
+      应用价值
+      <span>VALUE</span>
+    </h6>
+    <div class="ac">
+      <img src="/images/product/aps/value.png" alt />
+    </div>
+    <div class="pt50"></div>
+    <product-menu title="APS" />
+  </div>
+</template>
+
+<script>
+export default {
+  head: {
+    title: "APS高级排产--北京见著科技有限公司--MES系统",
+  },
+  name: "",
+  data() {
+    return {
+      list: [
+        {
+          title: "订单管理",
+          img: "/images/product/aps/scenarios1.png",
+        },
+        {
+          title: "方案对比",
+          img: "/images/product/aps/scenarios2.png",
+        },
+      ],
+      pointIndex: 0,
+      product: {
+        problems: [
+          "加工周期不确定",
+          "生产准备不及时",
+          "现场信息不透明",
+          "设备利用率低下",
+          "交货期延迟",
+          "产品质量不稳定",
+        ],
+        functions: [
+          {
+            title: "销售<br/>部门",
+            content: "快速确定订单交期",
+          },
+          {
+            title: "计划<br/>部门",
+            content: "模拟多种排产方案",
+          },
+          {
+            title: "生产<br/>管理部门",
+            content: "实时掌控生产进度",
+          },
+          {
+            title: "任务<br/>调度部门",
+            content: "敏捷响应资源变化",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    hover(i) {
+      this.pointIndex = i;
+    },
+  },
+};
+</script>

src/pages/product/bigdata.vue

+<template>
+  <div class="main product-main">
+    <h5>数据中台</h5>
+    <h6 id="h0">
+      产品简介
+      <span>INTRODUCTION</span>
+    </h6>
+    <p>　　数据中台汇集企业内各类业务平台数据，通过数据接口获取各平台数据，对数据进行集中管理，建立数据关联，通过数据计算和加工为用户挖掘数据价值，同时作为各个业务的数据源，为业务系统提供数据和计算服务。
+     </p><p>　　见著科技的数据中台可对接公司信息化管理系统ERP企业资源计划、PLM产品生命周期管理、MES制造执行系统、BPM业务流程管理、KMS知识管理系统等，应用大数据技术，对收集的海量数据进行采集、清洗、动态展示、建立模型、预测分析等技术处理，实现从设计、工艺、制造、交付到运维的全生命周期数据管理。
+    </p>
+    <div class="improtImg">
+      <img src="/images/product/bigdata/top1.png" alt />
+    </div>
+    <h6 id="h1">
+      核心优势
+      <span>ADVANTAGE</span>
+    </h6>
+    <div>
+      <div class="advantage">
+        <div class="img">
+          <img src="/images/product/bigdata/img.png" alt />
+        </div>
+      </div>
+    </div>
+    <h6 id="h2">
+      应对问题
+      <span>PROBLEM</span>
+    </h6>
+    <product-problem :list="product.problems" />
+    <h6 id="h3">
+      主要功能
+      <span>FUNCTION</span>
+    </h6>
+    <product-functions class="bigdata" :list="product.functions" />
+    <div class="ac">  
+              <b>
+         各业务单元关注不同内容，支持根据客户需求定制化功能，以及不同数据权限的控制
+       </b>  
+      <img src="/images/product/bigdata/6.png" alt />
+    </div>
+    <h6 id="h4">
+      适配场景
+      <span>SCENE</span>
+    </h6>
+    <p>　　适用于已实施企业资源计划管理（ERP）系统、产品生命周期管理（PLM）系统、企业生产制造管理（MES）系统的企业，帮助企业实现需求管理、项目管理、产品管理、物料管理、BOM管理、配置管理、工艺管理等功能。</p>
+    <div class="improtImg">
+      <img src="/images/product/bigdata/5.png" alt />
+    </div>
+    <h6 id="h5">
+      应用价值
+      <span>VALUE</span>
+    </h6>
+    <div class="ac">
+
+      <img src="/images/product/bigdata/bottom.png" alt />
+    </div>
+    <div class="pt50"></div>
+    <product-menu title="数据中台" />
+  </div>
+</template>
+
+<script>
+export default {
+    head: {
+    title: "数据中台--北京见著科技有限公司--MES系统",
+  },
+  name: "",
+  data() {
+    return {
+      pointIndex: 1,
+      product: {
+        problems: [
+          "运维参数、工艺参数、质量数据采集",
+          "确立时间参照，圈取故障点抽取实效参数，清洗数据",
+          "修正参数区间及权重，优化映射关系指数",
+          "确认工艺参数与产品质量映射管理基本要素建模 ，推断生产条件的合理区间",
+          "分析故障点和实效参数规划强弱级关联、标签化分类，提纯关联因子"
+        ],
+        functions: [
+          {
+            title: "生产管理对接<br/>MES系统数据",
+            content: ""
+          },
+          {
+            title: "质量管控对接<br/>QS系统数据",
+            content: ""
+          },
+          {
+            title: "智能运维监控<br/>—故障管理、<br/>预警管理",
+            content: ""
+          },
+          {
+            title: "管理业务<br/>场景设计",
+            content: ""
+          },
+          {
+            title: "故障信息与<br/>产品信息联通",
+            content: ""
+          },
+          {
+            title: "基于大数据<br/>的产品全生命周期管理（PLM）",
+            content: ""
+          },
+          {
+            title: "基于大数据<br/>的健康管理（PHM）",
+            content: ""
+          }
+        ]
+      }
+    };
+  },
+  methods: {
+    hover(i) {
+      this.pointIndex = i;
+    }
+  }
+};
+</script>

src/pages/product/dnc.vue

+<template>
+  <div class="main product-main">
+    <h5>DNC数控联网</h5>
+    <h6 id="h0">
+      产品简介
+      <span>INTRODUCTION</span>
+    </h6>
+    <div class="pb50">
+      <p>
+        　　DNC(Distributed Numerical
+        Control)分布式数控，将企业数控设备的网络化，集中化管理，实现NC程序的系统化管理，实现NC程序规范化管理；NC程序版本控制，历时追溯；远程调用NC程序加工；NC程序实时上传下载；对加工设备有效整合，提高设备利用率，减少辅助时间；实现模拟加工到实际加工的枢纽。
+      </p>
+    </div>
+    <h6 id="h1">
+      核心优势
+      <span>ADVANTAGE</span>
+    </h6>
+    <div>
+      <div class="advantage">
+        <div class="img">
+          <img src="/images/product/dnc/img.png" alt />
+        </div>
+      </div>
+    </div>
+    <h6 id="h2">
+      应对问题
+      <span>PROBLEM</span>
+    </h6>
+    <product-problem :list="product.problems" />
+    <h6 id="h3">
+      主要功能
+      <span>FUNCTION</span>
+    </h6>
+    <product-functions :list="product.functions" />
+    <h6 id="h4">
+      适配场景
+      <span>SCENE</span>
+    </h6>
+    <p>　　适用于数控加工车间。</p>
+    <div class="scene s4">
+      <ul>
+        <li
+          class="scene-img"
+          v-for="(li, i) in list"
+          :key="i"
+          @mouseover="hover(i)"
+          :class="{ cur: pointIndex == i }"
+        >
+          <img :src="li.img" alt />
+          <div class="title">{{ li.title }}</div>
+        </li>
+      </ul>
+    </div>
+    <h6 id="h5">
+      应用价值
+      <span>VALUE</span>
+    </h6>
+    <div class="improtImg">
+      <img src="/images/product/dnc/bottom.png" alt />
+    </div>
+    <div class="pt50"></div>
+    <product-menu title="DNC" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+    head: {
+    title: "DNC数控联网--北京见著科技有限公司--MES系统",
+  },
+  data() {
+    return {
+       pointIndex: 0,
+            list: [
+        {
+          title: "数控车床",
+          img: "/images/product/dnc/1.png",
+        },
+        {
+          title: "数控铣床",
+          img: "/images/product/dnc/2.png",
+        },
+        {
+          title: "激光切割",
+          img: "/images/product/dnc/3.png",
+        },
+        {
+          title: "齿轮加工",
+          img: "/images/product/dnc/4.png",
+        }
+      ],
+      product: {
+        problems: [
+          "手工录入程序效率低",
+          "U盘拷入程序，容易被病毒攻击",
+          "程序未集中管理，查询不方便",
+          "缺乏版本管理，导致管理混乱",
+          "程序文件和零件、工艺未关联，容易漏发、错发",
+        ],
+        functions: [
+          {
+            title: "程序<br/>上传",
+            content: "支持设备内数控程序文件一键上传到服务器",
+          },
+          {
+            title: "程序<br/>下载",
+            content: "支持数控程序文件受控后一键下载到设备",
+          },
+          {
+            title: "程序<br/>审核",
+            content:
+              "提供数控程序审批流程，在系统内完成数控程序的审批、审核，保证程序的正确性",
+          },
+          {
+            title: "程序<br/>对比",
+            content:
+              "提供文本比较功能，可以在系统内对两个程序文件进行对比，快速标记文件差异之处",
+          },
+          {
+            title: "程序<br/>版本管理",
+            content:
+              "提供程序版本管理，不同版本对应不同零件、工序，便于管理和追溯",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    hover(i) {
+      this.pointIndex = i;
+    },
+  },
+};
+</script>

src/pages/product/mdc.vue

+<template>
+  <div class="main product-main">
+    <h5>MDC数据采集</h5>
+    <h6 id="h0">
+      产品简介
+      <span> INTRODUCTION </span>
+    </h6>
+    <p>
+      　　MDC (Manufacturing Data Collection & Status
+      Management)系统通过TCP/IP或者其他协议，将数控设备接入到系统中，通过配置设备采集驱动，实现将设备状态数据、过程数据进行收集和状态展示，并对设备利用率、故障率进行分析，帮助企业提升设备利用率、降低故障率
+    </p>
+    <h6 id="h1">
+      核心优势
+      <span> ADVANTAGE </span>
+    </h6>
+    <div>
+      <div class="advantage">
+        <div class="img">
+          <img src="/images/product/mdc/img.png" alt="" />
+        </div>
+      </div>
+    </div>
+    <h6 id="h2">
+      应对问题
+      <span> PROBLEM </span>
+    </h6>
+    <product-problem :list="product.problems" />
+    <h6 id="h3">
+      主要功能
+      <span> FUNCTION </span>
+    </h6>
+    <product-functions :list="product.functions" />
+    <h6 id="h4">
+      适配场景
+      <span> SCENE </span>
+    </h6>
+    <p></p>
+    <div class="scene s3">
+      <ul>
+        <li
+          class="scene-img"
+          v-for="(li, i) in list"
+          :key="i"
+          @mouseover="hover(i)"
+          :class="{ cur: pointIndex == i }"
+        >
+          <img :src="li.img" alt="" />
+          <div class="title">
+            {{ li.title }}
+          </div>
+        </li>
+      </ul>
+    </div>
+    <h6 id="h5">
+      应用价值
+      <span> VALUE </span>
+    </h6>
+    <div class="ac">
+      <img src="/images/product/mdc/bottom.png" alt="" />
+    </div>
+    <product-menu title="MDC" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+  head: {
+    title: "MDC数据采集--北京见著科技有限公司--MES系统",
+  },
+  data() {
+    return {
+      list: [
+        {
+          title: "数控车间",
+          img: "/images/product/mdc/1.png",
+        },
+        {
+          title: "能源监控",
+          img: "/images/product/mdc/2.png",
+        },
+        {
+          title: "物流设备",
+          img: "/images/product/mdc/3.png",
+        },
+      ],
+      pointIndex: 0,
+      product: {
+        problems: [
+          "设备工作状态无法及时获知",
+          "设备历史加工信息无法查询",
+          "设备利用率无法计算",
+          "设备生产数据无法追溯",
+          "刀具寿命无法监控",
+        ],
+        functions: [
+          {
+            title: "设备<br/>状态监控",
+            content: "实现设备开关机、加工、维修等运行状态实时监控",
+          },
+          {
+            title: "设备<br/>故障采集",
+            content:
+              "实时获得机床加工及故障数据，为机床维修、车间安排生产、改善生产效率提供智能决策依据",
+          },
+          {
+            title: "设备<br/>利用率分析",
+            content: "对设备状态进行远程监控采集，对设备利用效率进行统计分析",
+          },
+          {
+            title: "设备<br/>撞击保护",
+            content:
+              "超敏感数控设备撞击保护，避免调错程序、选错坐标给机床造成伤害",
+          },
+          {
+            title: "数控刀具<br/>加工监控",
+            content: "小直径加工的断刀、重载断续切削的崩刀、高精密加工的磨损",
+          },
+          {
+            title: "设备<br/>健康监控",
+            content:
+              "非接触式传动部件磨损监控，实时监控重要传动部件的磨损数据，设备维护未雨绸缪",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    hover(i) {
+      this.pointIndex = i;
+    },
+  },
+};
+</script>

src/pages/product/mes.vue

+<template>
+  <div class="main product-main">
+    <h5>MES智能化制造执行</h5>
+    <h6 id="h0">
+      产品简介
+      <span>INTRODUCTION</span>
+    </h6>
+    <div class="pb50">
+      <p>
+        　　见著MES(Manufacturing Execution System)
+        制造执行系统建立在见著10余年集团型离散制造企业MES定制开发的基础之上，结合最新IT技术自主研发，形成了符合MESA/ISA-S95标准新一代企业级MES系统。
+      </p>
+      <p>
+        　　MES控制和记录产品生产过程中的所有要素（人机料法环测）的活动，将决策层（ERP）的信息转化并传递到执行层（IOT），对从订单下达到产品完成的整个生产过程进行优化管理，
+        对工厂发生的实时事件及时做出反应和报告，并用数据进行指导和处理。能够有效地优化企业的生产管理模式，强化过程管理和控制，为企业智能制造提供必要支撑。
+      </p>
+    </div>
+
+    <h6 id="h1">
+      核心优势
+      <span>ADVANTAGE</span>
+    </h6>
+    <div>
+      <div class="advantage">
+        <div class="img">
+          <img src="/images/product/mes/img.png" alt />
+        </div>
+      </div>
+    </div>
+    <h6 id="h2">
+      应对问题
+      <span>PROBLEM</span>
+    </h6>
+    <product-problem :list="product.problems" />
+    <h6 id="h3">
+      主要功能
+      <span>FUNCTION</span>
+    </h6>
+    <product-functions :list="product.functions" />
+    <h6 id="h4">
+      适配场景
+      <span>SCENE</span>
+    </h6>
+    <p>
+      　　适用于大中型企业，产品种类多，工艺复杂，各车间协同业务比较繁杂，标准化模块满足不了企业应用，需要定制化开发来满足需求。
+    </p>
+    <div class="scene">
+      <ul>
+        <li
+          class="scene-img"
+          v-for="(li, i) in list"
+          :key="i"
+          @mouseover="hover(i)"
+          :class="{ cur: pointIndex == i }"
+        >
+          <img :src="li.img" alt />
+          <div class="title">{{ li.title }}</div>
+        </li>
+      </ul>
+    </div>
+    <h6 id="h5">
+      应用价值
+      <span>VALUE</span>
+    </h6>
+    <div class="ac">
+      <img src="/images/product/mes/bottom.png" alt />
+    </div>
+    <div class="pt50"></div>
+    <product-menu title="MES" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "",
+    head: {
+    title: "MES智能化制造执行--北京见著科技有限公司--MES系统",
+  },
+  data() {
+    return {
+      list: [
+        {
+          title: "装配(作业岛)",
+          img: "/images/product/mes/s1.png",
+        },
+        {
+          title: "装配(流水线)",
+          img: "/images/product/mes/s2.png",
+        },
+        {
+          title: "钳工(群组式)",
+          img: "/images/product/mes/s3.png",
+        },
+        {
+          title: "机加(串行式)",
+          img: "/images/product/mes/s4.png",
+        },
+        {
+          title: "电柜(动态资源)",
+          img: "/images/product/mes/s5.png",
+        },
+        {
+          title: "委外(合同式)",
+          img: "/images/product/mes/s6.png",
+        },
+      ],
+      pointIndex: 0,
+      product: {
+        problems: [
+          "无法快速制定可执行的生产计划",
+          "无法灵活应对插单等带来的计划变更",
+          "对生产要素缺乏数字化管理",
+          "没有全面的数据采集，存在数据盲点",
+          "车间现状没有透明化，不能实现可视化工厂",
+          "没有可靠的品质可控手段，质量数据不能全向追溯",
+          "各个系统数据不能共享，存在数据孤岛",
+          "各业务部门没有实现数字化协同，工作效率低下",
+        ],
+        functions: [
+          {
+            title: "主生产<br/>计划管理",
+            content:
+              "帮助企业实现主生产计划的排产，结合现有产能、节拍，一键形成各车间、物资采购、产前准备等部门的月度计划数据。",
+          },
+          {
+            title: "作业<br/>计划管理",
+            content:
+              "给车间计划调度人员提供APS排产工具，在有限资源约束条件下，进行均衡生产，快速反应，降低库存，减少成本，并通过对生产状况信息的获取，反馈给主生产计划，并根据实际的生产情况做出相应的调整，系统支持分卡、回收等操作。",
+          },
+          {
+            title: "质量<br/>管理",
+            content:
+              "依据质量标准和规范，对质量检验项形成电子卡，并和工艺规程绑定，形成卡控式管理，控制(QC)并预防出错，针对异常问题，支持不合格品审理，提供品质异常报警，提供动态的品质数据监控，避免质量问题批量性产生。",
+          },
+          {
+            title: "物料<br/>管理",
+            content:
+              "实现企业物流全生命周期管理，从物料编码、物流分类、物料主数据、BOM、仓储、配套出库、安装等过程进行管控和记录，实现物料的全向追溯。",
+          },
+          {
+            title: "制造<br/>资源管理",
+            content:
+              "实现企业工装、工具、量具刀具、模具的管理，包括库存预警、有效期预警，并结合生产计划对制造资源库房进行生产准备的监控。",
+          },
+          {
+            title: "工艺<br/>规程管理",
+            content:
+              "实现电子化工艺规程的管理，可以通过和PDM等系统集成，接收工艺路线，同时维护工艺路线的资源信息、工时信息，实现电子作业指导书下达现场指导生产。",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    hover(i) {
+      this.pointIndex = i;
+    },
+  },
+};
+</script>

src/plugins/README.md

+# PLUGINS
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains Javascript plugins that you want to run before mounting the root Vue.js application.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins).

src/plugins/axios.js

+export default ({ $axios }) => {
+    $axios.defaults.timeout = 10000;
+    $axios.defaults.baseURl="http://localhost:519";
+    //请求拦截：
+    $axios.onRequest(config => {
+        config.headers.token = "hello!";
+        // console.log("axios",config);
+        return config;
+    });
+    $axios.onRequest(res => {
+        return res;
+    })
+
+}
\ No newline at end of file

src/plugins/router.js

+export default({app,redirect})=>{
+    // console.log("插件");
+    app.router.beforeEach((to,form,next)=>{
+        // console.warn("插件守卫");
+        // app.$nuxt.$loading.start();
+        next();
+    })
+    app.router.afterEach((to,from)=>{
+        // console.warn("后置守卫")
+        // app.$nuxt.$loading.finish();
+    })
+}
\ No newline at end of file