中泽项目初始化

.gitignore

@@ -0,0 +1,31 @@
+# ---> macOS
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+node_modules
+dist

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "semi": true
+}

README.md

@@ -0,0 +1,70 @@
+## 命令说明：
+
+```
+//安装库
+npm install 
+
+//编译第三方库
+npm run dll 
+
+//测试页面
+npm run dev
+
+//发布项目
+npm run dist
+
+//测试图表
+npm run chart-dev
+
+//发布图表
+npm run chart-dist
+
+
+//运行本地服务 用来访问本地已发布的页面
+npm run server
+
+```
+
+
+## 目录说明：
+
++ dll 预编译目录、将第三方库，编译后，开发测试过程会更快。
++ src 源文件目录
++ dist 项目发布目录
++ dev 项目开发目录,如需要测试demo1时，可运行 npm run dev，然后访问127.0.0.1:3000/demo1.html
++ dev/static 静态资源目录，即该目录下的资源不会走webapck。
++ 本环境使用webpack-dev-server，开发时，会将目录指向dev目录。而发布时会将static目录复制到dist目录下，因此将static放在dev下刚好可以保证在开发目录下与发布目录下可以同样的方式访问static目录。
++ src/pages/demo1、src/pages/demo2分别对应可视化页面，建议按页面整理html、css、图片等源文件
+src/pages/common/为公共目录，可存放跨页面共享的相关资源
+
++ charts 为图表目录
++ charts/chart1、charts/chart2 分别对应一个图表，该图表的所有资源均在对应的目录下。
+
++ charts_tests 为图表测试目录，其下的子目录与charts下的子目录对应。
+如需要测试chart1时，可运行 npm run chart-dev，然后访问127.0.0.1:3000/chart1.html
+注意：不需要在charts_tests下的每个图表目录下创建index.html页，只需创建index.js，如果没有index.html页，会自动调用模版页 template.html
+
++ chartsDist 为图表发布目录
+
+## 新增功能
++ 简单的html拼接（非模版引擎方式）
+用于站网类项目开发，可以将共公的html块提取的共公的文件中 tpl文件（用其他的扩展名也行，但不要使用html，会与HtmlWebpackPlugin中用到的html冲突）。然后在需要的页面中  <%= require('../common/tpl/header.tpl') %> 引入。
+ >> 注：为什么可以在hhtml中用<%= %>引入，见官方说明：https://github.com/jantimon/html-webpack-plugin/blob/main/docs/template-option.md
+ ···
+  {
+    test: /\.tpl$/i,
+    use: [{
+        loader: 'raw-loader',
+        options: {
+            esModule: false,
+        },
+    }]
+}
+ ···
+
+## 注意事项：
++ 需要修改resolve.alias，请到config/common.js中修改
++ 该环境目前使用的库基本上都是最新版本，详见package.json，后续升级需要注意各种版本兼容问题  2022-3-8
++ 安装第三方库使用 npm install xx --save  安装环境依赖库时使用 npm install xx --save-dev。切记不要乱用。
++ 环境及目录搭建好后，建议将示例删掉。
+

config/common.js

@@ -0,0 +1,12 @@
+const path = require("path");
+const common = {
+    resolve: {
+        alias: {
+            chartsDir: path.resolve(__dirname, '../src/charts/'),
+            pagesDir: path.resolve(__dirname, '../src/pages/'),
+            pagesCommonDir: path.resolve(__dirname, '../src/pages/common/')
+        }
+    }
+}
+
+module.exports = common;

config/pageVars.js

@@ -0,0 +1,72 @@
+const fs = require('fs');
+const glob = require("glob");
+const pathVars = require("./pathVars");
+
+function getPages() {
+    let files = glob.sync(pathVars.srcPath + "/pages/*/index.html");
+    //let files = glob.sync(pathVars.srcPath + "/pages/light/index.html");
+
+    //console.log(files);
+    let pageAry = [];
+    files.forEach((filePath) => {
+        //将单个文件路径（/src/pages/news/detail/index.html）路径拆分成数组
+        let tempAry = filePath.split('/');
+        let chunkName = tempAry[tempAry.length - 2];
+        //let htmlName = chunkName + "/index.html";
+        let htmlName = chunkName + ".html";
+        let entryJs = pathVars.pagesPath + "/" + chunkName + "/index.js";
+
+        let obj = {};
+        obj["filePath"] = filePath;
+        obj["chunkName"] = chunkName;
+        obj["htmlName"] = htmlName;
+        obj["entryJs"] = entryJs;
+        pageAry.push(obj);
+    });
+    return pageAry;
+}
+
+function getCharts(){
+    let files = glob.sync(pathVars.srcPath + "/charts/chart*/Chart*.js");
+    let chartsAry=[];
+    files.forEach((filePath) => {
+        let tempAry = filePath.split('/');
+        let chunkName = tempAry[tempAry.length - 2];
+        let obj = {};
+        obj["chunkName"] = chunkName;
+        obj["entryJs"] = filePath;
+        chartsAry.push(obj);
+    });
+    return chartsAry;
+}
+
+function getChartsTest() {
+    let template = pathVars.chartsTestPath + "/template.html"
+    let files = glob.sync(pathVars.srcPath + "/charts_test/chart*/index.js");
+    let chartsAry = [];
+    files.forEach((filePath) => {
+        let tempAry = filePath.split('/');
+        let chunkName = tempAry[tempAry.length - 2];
+
+        //目录下有index.html时，使用index.html作为html模版页，没有时使用template.html作为html模版页
+        let htmlPath = pathVars.srcPath + "/charts_test/" + chunkName + "/index.html";
+        try {
+            fs.statSync(htmlPath).isFile();
+        } catch (e) {
+            htmlPath = template;
+        }
+        let obj = {};
+        obj["chunkName"] = chunkName;
+        obj["entryJs"] = filePath;
+        obj["htmlName"] = chunkName + ".html";
+        obj["htmlPath"] = htmlPath;
+        chartsAry.push(obj);
+    });
+    return chartsAry;
+}
+
+module.exports = {
+    getPages,
+    getCharts,
+    getChartsTest
+};

config/pathVars.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const pathVars = {};
+
+//项目根目录
+/* eslint-disable*/
+pathVars.rootPath = path.resolve(__dirname, '../');
+/* eslint-enable*/
+
+//源文件目录
+pathVars.srcPath = path.resolve(pathVars.rootPath, './src');
+
+//预编译文件存放目录
+pathVars.dllPath = path.resolve(pathVars.rootPath, './dll');
+
+//开发测试目录
+pathVars.devPath = path.resolve(pathVars.rootPath, './dev');
+
+//发布目录
+pathVars.distPath = path.resolve(pathVars.rootPath, './dist');
+
+//js发布目录
+pathVars.distJsPath = path.resolve(pathVars.rootPath, './dist-js');
+
+//node_modules目录
+pathVars.nodeModulesPath = path.resolve(pathVars.rootPath, './node_modules');
+
+//页面目录
+pathVars.pagesPath = path.resolve(pathVars.rootPath, './src/pages');
+
+//图表目录
+pathVars.chartsPath = path.resolve(pathVars.rootPath, './src/charts');
+
+//图表测试目录
+pathVars.chartsTestPath = path.resolve(pathVars.rootPath, './src/charts_test');
+
+//图表发布目录
+pathVars.chartsDistPath = path.resolve(pathVars.rootPath, './chartsDist');
+
+//静态资源目录
+pathVars.staticPath = path.resolve(pathVars.rootPath, './src/static');
+
+module.exports = pathVars;

config/webpack.charts.dev.js

@@ -0,0 +1,127 @@
+const path = require("path");
+const webpack = require('webpack');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HappyPack = require('happypack');
+const os = require('os');
+const happyThreadPool = HappyPack.ThreadPool({
+    size: os.cpus().length
+});
+
+const common = require("./common");
+const pathVars = require("./pathVars");
+const pageVars = require("./pageVars");
+
+//---------------------------------- output -----------------------------------//
+const entryConfig = {};
+
+let pages = pageVars.getChartsTest();
+pages.forEach((page) => {
+    entryConfig[page["chunkName"]] = page["entryJs"];
+});
+
+//---------------------------------- output -----------------------------------//
+
+let outputConfig = {
+    path: pathVars.devPath,
+   // publicPath: "./", // 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如：css中背景图的路径)
+    filename: "[name]/index.js",
+    assetModuleFilename: 'chartImages/[name]_[hash][ext][query]'
+};
+
+
+//---------------------------------- plugin -----------------------------------//
+let pluginConfig = [
+    new webpack.ProvidePlugin({
+        'THREE': require.resolve('three')
+    }),
+    new webpack.DllReferencePlugin({
+        context: pathVars.rootPath,
+        manifest: require(pathVars.dllPath + '/manifest.json')
+    }),
+    new HappyPack({
+        id: 'babel',
+        loaders: ["babel-loader"],
+        threadPool: happyThreadPool
+    })
+];
+
+pages.forEach(function (page) {
+    let htmlPlugin = new HtmlWebpackPlugin({
+        title: 'chartTest',
+        template: page["htmlPath"],
+        filename: page["htmlName"],
+        inject: 'body',
+        chunks: [page["chunkName"]]
+    });
+    pluginConfig.push(htmlPlugin);
+});
+
+module.exports = {
+    mode: 'development',
+    entry: entryConfig,
+    output: outputConfig,
+    resolve: common.resolve,
+    devServer: {
+        compress: true,
+        static: {
+            directory: pathVars.devPath,
+            publicPath: "/"
+        },
+        hot: true,
+        host: 'localhost',
+        port: 3000
+    },
+    module: {
+        rules: [{
+                test: /\.(css|less)$/,
+                include: [pathVars.srcPath],
+                exclude: [pathVars.nodeModulesPath],
+                use: [{
+                        options: {
+                            /* 解决css背景图路径问题 由于图片目录已经定好了，因此这里可以用固定的相对路径*/
+                            publicPath: '../'
+                        },
+                    },
+                    //"css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]",
+                    "css-loader",
+                    "less-loader"
+                ],
+            },
+            {
+                test: /\.js$/,
+                exclude: pathVars.nodeModulesPath,
+                include: pathVars.srcPath,
+                use: ['babel-loader']
+                //use: ["happypack/loader?id=babel"]
+            },
+            {
+                test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/,
+                type: 'asset/resource',
+                parser: {
+                    dataUrlCondition: {
+                        maxSize: 10 * 1024
+                    }
+                }
+            },
+            {
+                test: /\.(glsl|vs|fs|vert|frag)$/,
+                exclude: [pathVars.nodeModulesPath, pathVars.dllPath],
+                use: ["raw-loader", "glslify-loader"]
+            }
+        ]
+    },
+    plugins: pluginConfig,
+    optimization: {
+        runtimeChunk: 'single',
+        splitChunks: {
+            chunks: "all",
+            cacheGroups: {
+                vendor: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'vendor',
+                    chunks: 'all'
+                }
+            }
+        }
+    }
+};

config/webpack.charts.dist.js

@@ -0,0 +1,99 @@
+const path = require("path");
+const webpack = require('webpack');
+const TerserPlugin = require("terser-webpack-plugin");
+const HappyPack = require('happypack');
+const os = require('os');
+const happyThreadPool = HappyPack.ThreadPool({
+    size: os.cpus().length
+});
+
+const common = require("./common");
+const pathVars = require("./pathVars");
+const pageVars = require("./pageVars");
+
+//---------------------------------- output -----------------------------------//
+const entryConfig = {};
+
+let charts = pageVars.getCharts();
+
+charts.forEach((chartItem) => {
+    entryConfig[chartItem["chunkName"]] = chartItem["entryJs"];
+});
+console.log("entryConfig", entryConfig);
+//---------------------------------- output -----------------------------------//
+
+let outputConfig = {
+    path: pathVars.chartsDistPath,
+    publicPath: "./", // 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如：css中背景图的路径)
+    filename: "[name].js",
+    library: "[name]",
+    libraryExport: 'default',
+    umdNamedDefine: true,
+    // es umd
+    libraryTarget: "umd",
+    
+    assetModuleFilename: 'chartImages/[name]_[hash][ext][query]'
+};
+
+
+//---------------------------------- plugin -----------------------------------//
+let pluginConfig = [
+    new HappyPack({
+        id: 'babel',
+        loaders: ["babel-loader"],
+        threadPool: happyThreadPool
+    })
+];
+
+module.exports = {
+    mode: 'production',
+    entry: entryConfig,
+    output: outputConfig,
+    resolve: common.resolve,
+    module: {
+        rules: [{
+                test: /\.(css|less)$/,
+                include: [pathVars.srcPath],
+                exclude: [pathVars.nodeModulesPath],
+                use: [{
+                        options: {
+                            /* 解决css背景图路径问题 由于图片目录已经定好了，因此这里可以用固定的相对路径*/
+                            publicPath: '../'
+                        },
+                    },
+                    //"css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]",
+                    "css-loader",
+                    "less-loader"
+                ],
+            },
+            {
+                test: /\.js$/,
+                exclude: pathVars.nodeModulesPath,
+                include: pathVars.srcPath,
+                use: ['babel-loader']
+                //use: ["happypack/loader?id=babel"]
+            },
+            {
+                test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/,
+                type: 'asset/resource',
+                parser: {
+                    dataUrlCondition: {
+                        maxSize: 10 * 1024
+                    }
+                }
+            },
+            {
+                test: /\.(glsl|vs|fs|vert|frag)$/,
+                exclude: [pathVars.nodeModulesPath, pathVars.dllPath],
+                use: ["raw-loader", "glslify-loader"]
+            }
+        ]
+    },
+    plugins: pluginConfig,
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin()
+        ]
+    }
+};

config/webpack.dev.js

@@ -0,0 +1,168 @@
+const path = require("path");
+const webpack = require("webpack");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HappyPack = require("happypack");
+const os = require("os");
+const happyThreadPool = HappyPack.ThreadPool({
+  size: os.cpus().length,
+});
+
+const common = require("./common");
+const pathVars = require("./pathVars");
+const pageVars = require("./pageVars");
+
+//---------------------------------- output -----------------------------------//
+const packageJson = require("./../package.json");
+const entryConfig = {
+  /*第三方库*/
+  //vendor: Object.keys(packageJson.dependencies)
+};
+
+let pages = pageVars.getPages();
+//console.log("pages", pages);
+pages.forEach(function (page) {
+  entryConfig[page["chunkName"]] = page["entryJs"];
+});
+
+//---------------------------------- output -----------------------------------//
+
+let outputConfig = {
+  path: pathVars.distPath,
+  //publicPath: "./", // 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如：css中背景图的路径)
+  filename: "[name]/index.js",
+  assetModuleFilename: "images/[name]_[hash][ext][query]",
+  //chunkFilename: '[name]/index_[hash].chunk.js'
+};
+
+//---------------------------------- plugin -----------------------------------//
+let pluginConfig = [
+  // new webpack.ProvidePlugin({
+  //   THREE: require.resolve("three"),
+  // }),
+  // new webpack.DllReferencePlugin({
+  //   context: pathVars.rootPath,
+  //   manifest: require(pathVars.dllPath + "/manifest.json"),
+  // }),
+  new MiniCssExtractPlugin({
+    filename: "[name]/index.css",
+  }),
+  new HappyPack({
+    id: "babel",
+    loaders: ["babel-loader"],
+    threadPool: happyThreadPool,
+  }),
+];
+
+pages.forEach(function (page) {
+  let htmlPlugin = new HtmlWebpackPlugin({
+    title: "page1",
+    template: page["filePath"],
+    filename: page["htmlName"],
+    inject: "body",
+    chunks: [page["chunkName"]],
+  });
+  console.log(page);
+  pluginConfig.push(htmlPlugin);
+});
+
+//console.log("pluginConfig", pluginConfig);
+
+module.exports = {
+  cache: {
+    type: "filesystem",
+ },
+  mode: "development",
+  entry: entryConfig,
+  //output属性与webpack-dev-server有冲突
+  output: outputConfig,
+  resolve: common.resolve,
+  devServer: {
+    compress: true,
+    static: {
+      directory: pathVars.devPath,
+      publicPath: "/",
+    },
+    hot: true,
+    // host: "localhost",
+    // host: '192.168.1.115',
+    host: '192.168.1.63',
+    port: 6002,
+    proxy: {
+      '/api': {  // 代理路径
+          target: 'http://192.168.1.33:9100', // 目标地址
+          changeOrigin: true, // 允许跨域
+          pathRewrite: { '^/api': '' }, // 重写路径
+      },
+  },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(css|less)$/,
+        include: [pathVars.srcPath],
+        exclude: [pathVars.nodeModulesPath],
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              /* 解决css背景图路径问题 由于图片目录已经定好了，因此这里可以用固定的相对路径*/
+              publicPath: "../",
+            },
+          },
+          //"css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]",
+          "css-loader",
+          "less-loader",
+        ],
+      },
+      {
+        test: /\.tpl$/i,
+        use: [
+          {
+            loader: "raw-loader",
+            options: {
+              esModule: false,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        exclude: pathVars.nodeModulesPath,
+        include: pathVars.srcPath,
+        use: ["babel-loader"],
+        //use: ["happypack/loader?id=babel"]
+      },
+      {
+        test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/,
+        type: "asset/resource",
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10 * 1024,
+          },
+        },
+        //利用HappyPack打包，图片会损坏。暂时不使用
+        //use: ["happypack/loader?id=url"]
+      },
+      {
+        test: /\.(glsl|vs|fs|vert|frag)$/,
+        exclude: [pathVars.nodeModulesPath, pathVars.dllPath],
+        use: ["raw-loader", "glslify-loader"],
+      },
+    ],
+  },
+  plugins: pluginConfig,
+  optimization: {
+    runtimeChunk: "single",
+    splitChunks: {
+      chunks: "all",
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+          chunks: "all",
+        },
+      },
+    },
+  },
+};

config/webpack.prod.js

@@ -0,0 +1,161 @@
+const path = require("path");
+const webpack = require('webpack');
+const TerserPlugin = require("terser-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const {
+    CleanWebpackPlugin
+} = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const HappyPack = require('happypack');
+const os = require('os');
+const happyThreadPool = HappyPack.ThreadPool({
+    size: os.cpus().length
+});
+
+const common = require("./common");
+const pathVars = require("./pathVars");
+const pageVars = require("./pageVars");
+
+//---------------------------------- output -----------------------------------//
+const packageJson = require("./../package.json");
+const entryConfig = {};
+
+let pages = pageVars.getPages();
+console.log("pages", pages);
+pages.forEach(function (page) {
+    entryConfig[page["chunkName"]] = page["entryJs"];
+});
+
+//---------------------------------- output -----------------------------------//
+
+let outputConfig = {
+    path: pathVars.distPath,
+    publicPath: "./", // 表示资源的发布地址，当配置过该属性后，打包文件中所有通过相对路径引用的资源都会被配置的路径所替换(如：css中背景图的路径)
+    filename: "[name]/index.js",
+    assetModuleFilename: 'images/[name]_[hash][ext][query]'
+    //chunkFilename: '[name]/index_[hash].chunk.js'
+};
+
+let pluginConfig = [
+    new CleanWebpackPlugin({
+        cleanOnceBeforeBuildPatterns: [pathVars.distPath + '/*'],
+    }),
+    // new webpack.ProvidePlugin({
+    //     'THREE': require.resolve('three')
+    // }),
+    new MiniCssExtractPlugin({
+        filename: "[name]/index.css",
+    }),
+    new HappyPack({
+        id: 'babel',
+        loaders: ["babel-loader"],
+        threadPool: happyThreadPool
+    }),
+    new CopyWebpackPlugin({
+        patterns: [{
+            from: pathVars.devPath,
+            to: pathVars.distPath
+        }]
+    })
+];
+pages.forEach(function (page) {
+    let htmlPlugin = new HtmlWebpackPlugin({
+        title: 'page1',
+        template: page["filePath"],
+        filename: page["htmlName"],
+        inject: 'body',
+        chunks: [page["chunkName"]]
+        //chunks: ["manifest", "vendor", "common", page["chunkName"]],
+        //chunksSortMode: 'dependency'
+    });
+    pluginConfig.push(htmlPlugin);
+});
+
+
+module.exports = {
+    mode: 'production',
+    entry: entryConfig,
+    output: outputConfig,
+    resolve: common.resolve,
+    module: {
+        rules: [{
+                test: /\.(css|less)$/,
+                include: [pathVars.srcPath],
+                exclude: [pathVars.nodeModulesPath],
+                use: [{
+                        loader: MiniCssExtractPlugin.loader,
+                        options: {
+                            /* 解决css背景图路径问题 由于图片目录已经定好了，因此这里可以用固定的相对路径*/
+                            publicPath: '../'
+                        },
+                    },
+                    //"css-loader?modules&localIdentName=[name]__[local]-[hash:base64:5]",
+                    "css-loader",
+                    "less-loader"
+                ],
+            },
+            {
+                test: /\.tpl$/i,
+                use: [{
+                    loader: 'raw-loader',
+                    options: {
+                        esModule: false,
+                    },
+                }]
+            },
+            {
+                test: /\.js$/,
+                exclude: pathVars.nodeModulesPath,
+                include: pathVars.srcPath,
+                //use: ['babel-loader'],
+                use: ["happypack/loader?id=babel"]
+            },
+            {
+                test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/,
+                type: 'asset/resource',
+                parser: {
+                    dataUrlCondition: {
+                        maxSize: 10 * 1024
+                    }
+                }
+                //利用HappyPack打包，图片会损坏。暂时不使用
+                //use: ["happypack/loader?id=url"]
+            },
+            {
+                test: /\.(glsl|vs|fs|vert|frag)$/,
+                exclude: [pathVars.nodeModulesPath, pathVars.dllPath],
+                use: ["raw-loader", "glslify-loader"]
+            }
+        ]
+    },
+    plugins: pluginConfig,
+    optimization: {
+        //minimize: true,
+        minimizer: [
+            new TerserPlugin()
+        ],
+        usedExports: true,
+        runtimeChunk: 'single',
+        splitChunks: {
+            chunks: "all",
+            cacheGroups: {
+                vendor: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'vendor',
+                    chunks: 'all',
+                    priority: -10,
+                    reuseExistingChunk: true,
+                },
+                // 其他不是node_modules中的模块
+                default: {
+                    name:"common",
+                    minChunks: 2, //如果有被引用不少于2次
+                    priority: -20,
+                    reuseExistingChunk: true,
+                }
+            }
+
+        }
+    }
+};

dev/static/font/iconfont.css

@@ -0,0 +1,65 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 4773851 */
+  src: 
+       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAqcAAsAAAAAElQAAApNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACESgqVSJEnATYCJAM0CxwABCAFhGcHgRsbVA+jooZyUkxkf4VxC0+kQhqzmmPlZ8qq11WNPGyUBgsJoAEJAJAkAAAwxawAAMAFaCC04AARRGtl9cws0IXIIfo4VkDqZYAskY2KsKgiHJBQsewAL5dtn9Yl8yrCfJXUrrpOaVeyN3sJ3TGeN5bBGBxC4rAIXYenU//FbOroCoWDQ13igrpBYNZ9c1jOhM3D5iT0THqdmURmUnlNPXzhm0AnXrGJe+Q5S/Ov8wYQGPj3/+/nqniTNE5/eCMlWvti9783uUPfhpmnHRolspAQl0SDkMVDo0dSIUQUYle7XkjieQR6O60Z2rt3cg5zl3kM0DSCmRzozeOytxwm7smKT3hobXXYdcu9xoCK9MCbgIfy08d/yiCSVBlzoCNndxW8RfVhMfe3kb8Zl14vzJ9QIWNryVLjub/7mazCVpn2bm2L68BiC/efUH6l6BRdYcmVTsiEvvL/wC8QpX76Z6YOiy1qsnsDo0ZWKTq9QS21wy9P1AgdxVGPTCm/AC9/GAqoAUMDZTAqUAVGAypgsUAd2GCgHiwENIB1AtVgCBJI/CYk0PIHq44XOol05bcT5DsAZQ4Y62m5rAiJhREVodaI08ZQ18tEKTQeikUlD5+4gMWhSbNHj56t+AZS1whZmciMIKUus3pOHanu3nVg2+PWAmvLTYn3Tm4JzA5q1S4JO3p6qhcrFAA/YDxQs/mYnBpWQVoqHTGFg/XAtKTUTCGw7mDILQv8Z76hEmJJcQQy3UMksA1/JeCqqosgJ0QSGFqUBVIzyFjHAsYShty/Cc/b4WQ0NiApTp0u57NqIiV50cbxIw5gFxHiZZjpt1YUZkBKEFeBjRWxxaOOBRAUtCRy7oLrXFTDRLT1UjIF4FyqQCoRdrOd6Z89e/qLxT5f+m3mKxos+Voqf+pjz7BGYXiao053ebWyT43WNRC51V01RZC1kttWxLru5PakJNU0wXA8KcTCjq0m4qCGxVQCQLxu6MiyRHx56gCPXgoChXnTngN7+o3FuhXNqlnEyTlIw6XfzJrXK7ASLetEMuRtozNeht3FvPee7c//gHhMxgzz29BbWzxNdLUjNX9PDoqGri21U1ppVIbNwzAj2iWP0AEP++SMjwfBSm06kgZ8+InxwfCtcGk48lb9uQmltrhX65VCf/IT25v3Xl/zelChNl16gV0p+mD0nXDg6bD6VNvDWXomo9BYfuZWyxFCStd18FbeuXDez8jRK7Ri5tguuhfNVrkRrLZfkxuVacWKk+6vUrJERrOkcf9i/xuN2OnBmYmsQaF5c8nDOQcMt+YzaWY7N+0wcYq0b1Ys0ebeKU9x8h9y1TvRO1VnI7qHC1VNtgoKBrGRuRysHifwLGhJF5wcix22TmtG95TbJUEhIgLsfKcpmgR1oUiezki7SnE1Gx20K3OSrzltrYQ6G/M2IwdpQ/mcquHXEMCOc4B2FevXY2IHgF/a02+F98JwE/t6k976xr/csK9/3spe0lf8hf38CAuWtPNngMnGuUmHfBvEoyCnsM8x63/h30LYESXxR4G9yd7uPyN+rzK+tZrYqUbx2MiSjiI7D6OPPyJJwWX2Haz1cw6OpXwqpCgL7SfnIUVj+hw/FDwdGzIGyQmUwk+gP/PRzlH6vaqicG+BfWqFUxfPLTwDXfDerBCxARoSkhevwkbPzlQVw/pJR/olACFmGChyy1zZ2c4cT1EeFJTAtojG0VSNMsAaIRrYqIENKKNgFZyOJYGhYF5Rjifb6cz2yAqZSp9c7gNlCp9PUc6J2rZLFX6fHGSu6Ok9G4+ZMGlZTa148+JpNa3srl5nvMr4buIk0Pxu73Z+Nj/Az+cbZR/eZ7D8qcSxMFGQTpwLjzvl9UpSwGdPt6UAMhWnFpuhnyeJ1+jEqLGhtAh/u1K5TDiBDQz8SBpUIC1gYtmYTijlvl0DfbCOWVw0/KNygsW/flxStNg25sGvdqq+RadtnqJtadZOadHqrkaz5V7HIx7KNEMNogtxQ+5m49jahiW9vfogp2rpg6oxRC+N4BmBICfR/ejqbZHe/NF5o6qZwDimofFV6isWj42Nmm8aT3vZyMgugrGooaGxwfNRAK5PfLy8qqrsxIY1YEebjnqdVzF1kDMwz7xyt1XD//l6Q2Fjf3b0XRuf/uNAZDC3nr1XFGD7pQHosPjQNRfnsviS9HXHi/8Z7tcjw0y217fMNaPM1bdf23gbf/psymLc0IkfyiJUlUBFZZXFlq6iSgQS9T8M3CvrKVi1xRYvy5a/Cqx7mw9dAtB9Ik6Wk+Wnu+JtAg88dQFo/vF4rpJJIzjg586Y8y6cBetiwazLhsxtW76exx/bnik3oNtTDbZ8g7NdNgPfJmKxCvT+ZScM6HhG9DfELE0iJyJzBB1zi/XCvF+wmpv/vWmGxMeUB8QrRfBB8XGR11R+Fxnx/F2d259/k3QiBmPbtdRJLkcz35FvcW6SBwwm+oajk0mvyEz676LZIEStP0+hi+nr9j1keiqvFh9IXPZhSBaZLmSg6N5JbJQgl6cTcEbagWT21q1LE8QJ09pb7wla/uT+2UK819Z1aIIoYen6zbshcHMJ6uwggVj+FpYSmPIRRcxClkiFp/YDKFW/RHH+HzmOj1EKSQWr45lKDG4dsX9ky9PyTyX8KgFJ8dn/jxDHHuSS4kIEIzLeT4gNTtOpVfI3yRrtxmm3jARBemT2c9oUc0yYd5Z5KWbcUbWeZrq8JX7bTCG9UiXD4cKehXF6vdqEv4PFTGktV8r8HoUs3Sydc1kbLlT019QZRnTM5ARpZxrS2hoW6oBFmeH5IVPk/8/+n19bfmlTPhQvemh/qOW3BQbPezqiMxUqBuEMe5rFmGnO3EoLtKAJRtj3DLMaM5b1x0440RML/S7VuqW63+xRYX+pJ3fphjXVakYcAmP+AL5XoDjP5uULwzOk4nz5w2u3vPcJASavvT307FZ2ugtZJ1e8NpolfuaHsCKJeOs/eeljWkPKJneyXlSNya+NPWbP5/Chb6v5lV9bdBov/j72USDGDB/TPoaroJW83MER2jXXp9JN1N7+tmEqKGVXZIX36K/oA0JOIWvy/mDnm6BnPTgw5yz0mY990SGLh9ak3EjSWEWy1mrfEriZVAa7Sa21h/S22K09WKQyjNDSZa33BBLmeyHJzAuSzffuWwI/SGWpL1Kb75/0TsXs9gbro2ybNI9aMXHHvMRgOFuUvT3VNhWcnEovNdUexayXI7dW7+ugKYkV6mvbj9EwQ1iyvevBdFEgqwgzLWPbxVgtdWSVbiu0JZawjWhcFGMrjHCX2JNQYMaP5pd3SrOSAkchfS85qWmJeM/0tHVD+O7TEKrfkrStXbP6IuEG44FIVYnZuwuA4laBmMq9LKPJj7vNxSirLOmw45mwtJ2/tRzg1LAbkLmhKVLkKFFFHU200UUfQ4wxxUxzA1PmeRhXQj2X+ITiam6rh+uWbqDgIwVaHLOJB+GnORHetMhbF8dutL/1YZRyCRyPvEzENJEn7muHaUzx5Xc+AAAAAA==') format('woff2'),
+       url('iconfont.woff?t=1734012910808') format('woff'),
+       url('iconfont.ttf?t=1734012910808') format('truetype'),
+       url('iconfont.svg?t=1734012910808#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-youjian:before {
+  content: "\e804";
+}
+
+.icon-dianhua:before {
+  content: "\e67b";
+}
+
+.icon-dadian-1:before {
+  content: "\e602";
+}
+
+.icon-xiala:before {
+  content: "\e60d";
+}
+
+.icon-logo:before {
+  content: "\e60c";
+}
+
+.icon-guanbi:before {
+  content: "\e676";
+}
+
+.icon-arrow-right:before {
+  content: "\e601";
+}
+
+.icon-weixin:before {
+  content: "\e707";
+}
+
+.icon-weibo:before {
+  content: "\e619";
+}
+
+.icon-jiantou:before {
+  content: "\e63a";
+}
+
+.icon-kuaishou:before {
+  content: "\e657";
+}
+
+.icon-douyin:before {
+  content: "\e600";
+}
+

dev/static/font/iconfont.svg

@@ -0,0 +1,43 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+  <metadata>Created by iconfont</metadata>
+  <defs>
+  <font id="iconfont" horiz-adv-x="1024">
+    <font-face
+      font-family="iconfont"
+      font-weight="400"
+      font-stretch="normal"
+      units-per-em="1024"
+      ascent="896"
+      descent="-128"
+    />
+      <missing-glyph />
+      
+      <glyph glyph-name="youjian" unicode="&#59396;" d="M628.992 288.149333c-57.749333-46.272-93.781333-69.226667-129.728-69.226667-34.517333 0-69.376 21.504-123.285333 63.509333L55.082667 0.042667l903.701333 0L632.661333 290.901333C631.466667 290.026667 630.122667 288.938667 628.992 288.149333zM248.405333 381.141333C172.224 439.893333 84.352 507.882667 0 574.570667L0 42.24c0-1.706667 0.810667-3.136 0.981333-4.714667l323.52 284.714667C301.056 340.544 275.904 359.893333 248.405333 381.141333zM1021.482667 29.866667C1022.784 33.728 1024 37.781333 1024 42.24L1024 597.162667c-101.269333-78.762667-247.829333-192.917333-340.394667-265.962667L1021.482667 29.866667zM960 767.978667 64 767.978667c-23.36 0-64-40.682667-64-64l0-50.432c94.378667-75.136 196.885333-154.218667 283.733333-221.205333 47.893333-36.970667 90.816-70.186667 124.693333-96.64 91.306667-71.616 91.306667-71.616 184.512 2.901333C677.226667 405.973333 904 582.442667 1024 675.776L1024 703.914667C1024 727.36 983.381333 767.978667 960 767.978667z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="dianhua" unicode="&#59003;" d="M864.6 213.2L691.5 339.4c-6.3 4.6-14.9 4.1-20.6-1.2l-96.1-89.7c-81 62.2-148.9 141-199.2 231.3l102.5 78c6.2 4.7 8.2 13.2 4.7 20.1l-95.2 191.8c-4 8-13.7 11.3-21.8 7.3L162.4 676c-0.7-0.3-1.1-0.9-1.7-1.3l-0.2-0.2c-1.7-1.2-3.2-2.7-4.3-4.4 0-0.1-0.1-0.1-0.1-0.2-1-1.6-1.7-3.3-2.1-5.2-0.1-0.5-0.1-1.1-0.2-1.6-0.1-1.4-0.2-2.7 0-4.1 0.1-0.5-0.1-0.9 0-1.4 65.6-303 278.8-552.2 561.7-656.4 0.4-0.2 0.8-0.1 1.3-0.2 1.1-0.3 2.2-0.4 3.3-0.5 0.9-0.1 1.9-0.2 2.8-0.1 1.4 0.1 2.7 0.6 4.1 1.1 0.6 0.2 1.2 0.3 1.8 0.7 1.3 0.7 2.3 1.6 3.4 2.6 0.6 0.5 1.2 0.9 1.7 1.5 0.2 0.2 0.4 0.3 0.6 0.5l133.8 183.6c5.1 7.4 3.5 17.6-3.7 22.8z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="dadian-1" unicode="&#58882;" d="M512.448 829.12H511.552a348.032 348.032 0 0 1-346.88-347.648c0-188.8 119.488-338.496 325.952-532.48 0.384-0.448 0.448-1.024 0.832-1.28 3.072-3.328 6.72-5.504 10.688-6.912 0.896-0.32 1.92-0.32 2.88-0.512 2.24-0.576 4.48-1.408 6.72-1.408L512-61.056l0.256-0.064c2.304 0 4.48 0.832 6.72 1.408 0.96 0.192 1.984 0.192 2.88 0.512a26.816 26.816 0 0 1 10.688 6.848c0.384 0.32 0.448 0.896 0.832 1.28 206.464 194.048 326.016 343.744 326.016 532.544a348.032 348.032 0 0 1-346.944 347.648zM512 299.776a183.744 183.744 0 0 0-183.552 183.552A183.68 183.68 0 0 0 512 666.88a183.68 183.68 0 0 0 183.552-183.488A183.744 183.744 0 0 0 512 299.776z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="xiala" unicode="&#58893;" d="M556.352 156.288a54.656 54.656 0 0 0-45.696-20.64 59.744 59.744 0 0 0-43.936 20.64L78.752 546.368a50.72 50.72 0 1 0 71.712 71.744l361.088-371.2 361.952 371.2a50.72 50.72 0 0 0 71.712-71.744z m0 0"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="logo" unicode="&#58892;" d="M1806.364335 432.405842c-7.870869-7.870869-11.019216-18.102998-11.019216-33.057648v-44.863951c0-14.95465 3.148347-25.186779 11.019216-33.057648 7.870869-7.870869 18.102998-11.019216 33.057648-11.019216h91.302075c14.167563 0 25.186779 3.148347 32.270562 11.019216 7.870869 7.870869 11.019216 18.102998 11.019216 33.057648v44.863951c0 14.95465-3.148347 25.186779-11.019216 33.057648-7.870869 7.870869-18.102998 11.019216-32.270562 11.019216h-91.302075c-14.95465 0-25.186779-3.148347-33.057648-11.019216m28.335127-74.773252v39.354343c0 6.296695 3.148347 8.657955 9.445042 9.445042h81.069946c6.296695 0 8.657955-3.148347 9.445043-9.445042v-40.928516c0-6.296695-3.148347-8.657955-9.445043-9.445043h-81.069946c-6.296695 1.574174-9.445042 5.509608-9.445042 11.019216M1389.208301 432.405842c-7.870869-7.870869-11.019216-18.102998-11.019216-33.057648v-44.863951c0-14.95465 3.148347-25.186779 11.019216-33.057648 7.870869-7.870869 18.102998-11.019216 33.057648-11.019216h91.302076c14.167563 0 25.186779 3.148347 32.270561 11.019216 7.870869 7.870869 11.019216 18.102998 11.019216 33.057648v44.863951c0 14.95465-3.148347 25.186779-11.019216 33.057648-7.870869 7.870869-18.102998 11.019216-32.270561 11.019216h-92.089163c-14.167563 0-25.186779-3.148347-32.270561-11.019216m28.335127-73.986165v38.567256c0 6.296695 3.148347 8.657955 9.445042 9.445042h81.069947c6.296695 0 8.657955-3.148347 9.445042-9.445042v-40.928516c0-6.296695-3.148347-8.657955-9.445042-9.445043h-81.069947c-6.296695 1.574174-9.445042 6.296695-9.445042 11.806303M1585.980015 443.425058v-36.993083h70.050731v-96.024596h39.354342V406.431975h70.837817v36.993083zM2008.645657 443.425058v-133.017679h39.354343V406.431975H2125.134512c0.787087 0 3.148347-0.787087 4.722521-3.148347 1.574174-1.574174 2.361261-3.935434 2.361261-6.296695v-86.579554h39.354342V399.348194c0 14.95465-3.148347 25.186779-11.019216 33.057648l-3.148347-3.148348 3.148347 3.148348c-7.083782 7.083782-15.741737 10.232129-28.335126 11.019216h-123.572637zM1232.578017 443.425058h-17.315911c-11.019216-0.787087-19.677171-3.935434-26.760953-11.019216-7.870869-7.870869-11.019216-18.102998-11.019216-33.057648v-88.940815h39.354343v36.993082h93.663336v35.418909h-93.663336v16.528824c0 1.574174 0 3.935434 0.787087 4.722521 0.787087 0.787087 1.574174 1.574174 3.935434 2.36126h118.850115v36.993083h-107.830899zM789.448117 654.364335C635.96618 654.364335 511.606457 530.004612 511.606457 377.309762s124.359723-277.054573 277.054573-277.054574 277.054573 124.359723 277.054573 277.054574-123.572636 277.054573-276.267486 277.054573z m0-524.986933c-136.953113 0-247.93236 110.19216-247.93236 247.145273s110.19216 247.93236 247.145273 247.93236 247.93236-110.19216 247.93236-247.145273c0.787087-136.166026-110.19216-247.145273-247.145273-247.93236zM725.694081 510.32744H646.198309c-9.445042 0-15.741737-4.722521-20.464258-10.232129L588.740968 447.360492c-4.722521-7.083782-3.935434-14.95465 1.574174-22.038432l36.993082-51.160646c7.870869-10.232129 23.612606-10.232129 31.483475 0L739.074558 486.714835c6.296695 8.657955 0 23.612606-13.380477 23.612605zM774.493467 499.308224L663.51422 347.400461c-5.509608-7.870869-5.509608-14.95465 0-22.825519l37.780169-51.160645c7.870869-10.232129 22.825519-10.232129 31.483474 0.787087l153.481937 211.726364c8.657955 11.806303 1.574174 24.399693-9.445042 24.399692H794.957725c-7.870869 0-15.741737-3.935434-20.464258-11.019216zM773.70638 172.667179l-35.418909 48.799385c-5.509608 7.870869-6.296695 14.95465 0 23.612606l188.900846 258.951576c5.509608 7.870869 16.528824 7.870869 22.038432 0.787086L991.729439 447.360492c4.722521-7.870869 2.361261-15.741737-1.574174-21.251345L897.279016 299.388163l-92.089162-126.720984c-9.445042-11.806303-23.612606-10.232129-31.483474 0z"  horiz-adv-x="2677" />
+      
+      <glyph glyph-name="guanbi" unicode="&#58998;" d="M581.945335 384L948.498428 750.609255a48.008087 48.008087 0 0 1 0 67.519096l-2.010634 1.965703a47.996855 47.996855 0 0 1-67.507862 0L512.370675 453.024263 145.772652 820.094054a48.008087 48.008087 0 0 1-67.519095 0l-1.999401-1.999401a47.10948 47.10948 0 0 1 0-67.519095l366.598023-366.575558L76.254156 17.401977a47.985623 47.985623 0 0 1 0-67.519095l1.999401-1.999401a48.008087 48.008087 0 0 1 67.519095 0l366.598023 366.598023 366.609257-366.598023a47.996855 47.996855 0 0 1 67.507862 0l2.010634 1.999401a48.008087 48.008087 0 0 1 0 67.519095z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="arrow-right" unicode="&#58881;" d="M325.048 802.489l-60.03-59.435 357.181-359.631-360.184-356.603 59.522-59.93 420.207 416.043z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="weixin" unicode="&#59143;" d="M684.2624 559.360922c10.256998 0 20.405555-0.753152 30.472294-1.873715C687.354982 684.973773 551.049933 779.695104 395.467162 779.695104c-173.940736 0-316.424704-118.557184-316.424704-269.103923 0-86.8992 47.403622-158.259405 126.61801-213.608038l-31.648051-95.184896 110.615859 55.468339c39.581082-7.834419 71.337677-15.888896 110.837965-15.888896 9.929523 0 19.775181 0.490189 29.539021 1.257677-6.182093 21.154816-9.763738 43.312435-9.763738 66.302054C415.242342 447.174861 533.955994 559.360922 684.2624 559.360922zM514.125517 645.150822c23.825613 0 39.60873-15.673958 39.60873-39.484314 0-23.715123-15.783117-39.607091-39.60873-39.607091-23.716147 0-47.513088 15.891968-47.513088 39.607091C466.612429 629.477888 490.40937 645.150822 514.125517 645.150822zM292.671693 566.060544c-23.713075 0-47.648154 15.891968-47.648154 39.607091 0 23.810253 23.934054 39.484314 47.648154 39.484314 23.715123 0 39.499264-15.673958 39.499264-39.484314C332.170957 581.95241 316.386816 566.060544 292.671693 566.060544zM973.059686 312.739021c0 126.504141-126.593434 229.620736-268.773478 229.620736-150.553088 0-269.128499-103.116493-269.128499-229.620736 0-126.72215 118.576538-229.620736 269.128499-229.620736 31.510938 0 63.294157 7.945933 94.942208 15.877632l86.79127-47.525376-23.796941 79.073894C925.73696 178.193715 973.059686 241.378714 973.059686 312.739021zM617.027379 352.331776c-15.755469 0-31.648051 15.673958-31.648051 31.661056 0 15.766118 15.892582 31.643648 31.648051 31.643648 23.934054 0 39.60873-15.877632 39.60873-31.643648C656.636109 368.005734 640.961434 352.331776 617.027379 352.331776zM791.077581 352.331776c-15.647027 0-31.430144 15.673958-31.430144 31.661056 0 15.766118 15.783117 31.643648 31.430144 31.643648 23.715123 0 39.605658-15.877632 39.605658-31.643648C830.684262 368.005734 814.793626 352.331776 791.077581 352.331776z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="weibo" unicode="&#58905;" d="M721.989632 427.966464c-33.468416 6.36928-17.53088 24.694784-17.53088 24.694784s32.671744 54.194176-6.381568 93.247488c-48.607232 48.607232-166.549504-6.383616-166.549504-6.383616-44.627968-13.549568-32.669696 6.383616-26.302464 41.44128 0 40.644608-14.342144 109.96736-134.674432 68.524032-119.535616-40.63232-222.337024-184.875008-222.337024-184.875008-71.723008-95.62112-62.1568-168.937472-62.1568-168.937472 17.528832-163.364864 191.258624-207.992832 325.933056-218.353664 141.85472-11.159552 333.099008 48.605184 391.272448 172.136448C861.442048 372.975616 755.456 421.582848 721.989632 427.966464L721.989632 427.966464zM422.356992 122.748928c-141.058048-6.367232-255.00672 64.54272-255.00672 158.58688 0 94.029824 113.948672 168.93952 255.00672 175.321088 141.04576 6.367232 255.004672-51.009536 255.004672-145.03936C677.361664 217.571328 563.402752 129.130496 422.356992 122.748928L422.356992 122.748928zM394.463232 395.282432c-141.85472-16.734208-125.917184-149.815296-125.917184-149.815296s-0.796672-41.428992 38.258688-62.951424c82.88256-44.623872 168.142848-17.528832 211.175424 37.462016C561.012736 275.748864 536.303616 411.219968 394.463232 395.282432L394.463232 395.282432zM358.59456 208.816128c-26.28608-3.18464-47.81056 11.956224-47.81056 34.260992 0 22.319104 19.134464 45.422592 45.422592 47.81056 30.281728 3.198976 50.212864-14.342144 50.212864-36.651008C406.419456 231.917568 384.897024 212.000768 358.59456 208.816128L358.59456 208.816128zM442.27584 279.744512c-9.568256-6.383616-19.918848-5.588992-24.70912 2.387968-5.572608 7.962624-3.18464 20.713472 5.586944 27.09504 10.350592 7.962624 21.510144 5.574656 26.300416-2.400256C454.230016 298.866688 450.250752 286.908416 442.27584 279.744512L442.27584 279.744512zM791.324672 485.330944c11.145216 0 20.713472 8.771584 22.306816 19.931136 0 0.796672 0.796672 1.591296 0.796672 2.387968 16.734208 155.389952-127.496192 128.305152-127.496192 128.305152-12.752896 0-23.115776-10.36288-23.115776-23.117824 0-12.750848 10.364928-23.115776 23.115776-23.115776 103.583744 23.115776 80.480256-81.276928 80.480256-81.276928C767.410176 495.693824 777.775104 485.330944 791.324672 485.330944L791.324672 485.330944zM773.781504 756.314112c-49.403904 11.941888-101.195776 1.970176-115.539968-1.214464-0.796672 0-2.404352-0.600064-3.198976-0.600064-0.796672 0-0.796672-0.698368-0.796672-0.698368-14.34624-3.995648-24.696832-17.487872-24.696832-32.628736 0-18.325504 15.140864-33.452032 33.466368-33.452032 0 0 18.325504 2.402304 31.0784 7.192576 11.956224 4.775936 115.554304 3.198976 167.346176-82.868224 27.89376-62.951424 11.956224-105.189376 10.36288-112.367616 0 0-7.17824-15.939584-7.17824-32.673792 0-18.325504 15.140864-31.049728 34.275328-31.049728 15.142912 0 28.690432-0.755712 31.873024 27.916288l0.796672 0C986.56256 660.48 863.830016 735.586304 773.781504 756.314112L773.781504 756.314112z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="jiantou" unicode="&#58938;" d="M548.352 654.848L716.8 486.4a32.768 32.768 0 0 0 0-46.592 30.72 30.72 0 0 0-45.568 0l-116.736 115.2v-464.896a32.768 32.768 0 1 0-65.024 0V555.008L372.736 435.2a39.424 39.424 0 0 0-45.568 6.656 32.768 32.768 0 0 0 0 46.592l162.816 166.4a35.328 35.328 0 0 0 58.368 0z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="kuaishou" unicode="&#58967;" d="M461.15 335.04c4.59 0.27 325.27 26.47 346.62 23.05 21.34-3.41 106.73-0.87 110.99-34.15 4.2-32.87 0-64.88 0-64.88s-189.53-33.3-193.8-37.56c-4.27-4.27-19.64-19.64-18.78-42.69 0.85-23.05 0.85-112.69 1.71-115.25 0.85-2.56 5.12-19.64 37.56-16.22 25.52 2.69 51.04 11.71 60.77 15.44a5.926 5.926 0 0 1 3.79 6.01l-1.73 23.05c-0.27 3.57-3.61 6.11-7.12 5.4l-48.88-9.78v92.2l158.35 28.72c3.39 0.61 6.53-1.92 6.64-5.36l5.28-156.14s9.01-38.82-57.58-52.48-226.24-53.79-241.61-54.64c-15.37-0.85-40.98-0.85-67.45 5.98-18.69 4.82-41.64 13.48-53.51 18.15-4.05 1.59-5.46 6.58-2.89 10.09l58.24 79.15c2.13 2.9 3.28 6.4 3.28 9.99v87.35c0 4.5-1.73 8.82-4.83 12.08L431.52 293.59a15.695 15.695 0 0 0-4.15 13.2c1.57 10.36 8.14 26.74 33.78 28.25zM376.75 281.45a14.04 14.04 0 0 1-8.05 4.12L144.72 318.4c-3.15 0.6-6.39 0.25-9.29-1.1-9.74-4.51-31.13-17.97-37.98-51.21v-263.17s3.2-52.51 75.56-76.84 160.72-46.1 160.72-46.1 49.3-9.6 69.15 30.73c19.85 40.34 114.61 155.59 114.61 155.59v69.79L376.75 281.45z m-58.38-313.73c-23.05 0.64-117.02 13.55-146.63 40.34-26.89 24.33-13.45 215.78-13.45 215.78s0.48 22.19 13.45 19.85l149.19-26.89s18.57-10.89 18.57-26.25v-206.82s1.92-16.65-21.13-16.01z m637.42 612.13c0 102.2-78.91 185.05-176.24 185.05-55.52 0-105.01-26.98-137.32-69.1C616.44 807.27 523.96 889.78 413.79 889.78c-130.13 0-235.62-115.1-235.62-257.09 0-141.99 105.49-257.09 235.62-257.09 6.86 0 13.63 0.43 20.34 1.06l352.06 18.33c1.55 0.06 3.1 0.14 4.64 0.24l4.91 0.26-0.12 0.13c89.8 8.52 160.17 87.73 160.17 184.23z m-497.02-91.56c-65.85 0-119.24 61.44-119.24 137.24 0 75.79 53.39 137.24 119.24 137.24s119.24-61.44 119.24-137.24c0-75.8-53.38-137.24-119.24-137.24z m348.78 6.4c-43.42 0-78.63 40.52-78.63 90.5s35.2 90.5 78.63 90.5c43.42 0 78.63-40.52 78.63-90.5s-35.21-90.5-78.63-90.5z"  horiz-adv-x="1024" />
+      
+      <glyph glyph-name="douyin" unicode="&#58880;" d="M937.4 472.1c-84 0-165.7 27.3-232.9 77.8v-352.3c0-179.9-138.6-325.6-309.6-325.6S85.3 17.700000000000045 85.3 197.60000000000002c0 179.9 138.6 325.6 309.6 325.6 17.1 0 33.7-1.5 49.9-4.3v-186.6c-15.5 6.1-32 9.2-48.6 9.2-76.3 0-138.2-65-138.2-145.3 0-80.2 61.9-145.3 138.2-145.3 76.2 0 138.1 65.1 138.1 145.3V896H707c0-134.5 103.7-243.5 231.6-243.5v-180.3l-1.2-0.1"  horiz-adv-x="1024" />
+      
+    </font>
+  </defs>
+</svg>

dev/static/images/icon-1.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679477930257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M917.284001 297.722752c-5.406127-5.437849-13.06762-8.396227-21.479197-8.396227-9.611915 0-18.953677 3.844561-25.713638 10.543124L511.980046 659.992589 153.873018 299.91672c-6.729262-6.745634-16.072047-10.619872-25.654286-10.619872-8.470929 0-16.131399 2.989077-21.598924 8.457626-12.301164 12.435217-11.32493 33.69031 2.192945 47.312562l376.764969 378.821815c6.758937 6.788613 15.860223 10.723226 25.052582 10.8143l3.425006 0c8.981559-0.301875 17.814738-4.205788 24.423249-10.8143l376.733247-378.852514C928.728658 331.382363 929.690566 310.113967 917.284001 297.722752" fill="#fff" p-id="2766"></path></svg>

dev/static/images/icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679477930257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M917.284001 297.722752c-5.406127-5.437849-13.06762-8.396227-21.479197-8.396227-9.611915 0-18.953677 3.844561-25.713638 10.543124L511.980046 659.992589 153.873018 299.91672c-6.729262-6.745634-16.072047-10.619872-25.654286-10.619872-8.470929 0-16.131399 2.989077-21.598924 8.457626-12.301164 12.435217-11.32493 33.69031 2.192945 47.312562l376.764969 378.821815c6.758937 6.788613 15.860223 10.723226 25.052582 10.8143l3.425006 0c8.981559-0.301875 17.814738-4.205788 24.423249-10.8143l376.733247-378.852514C928.728658 331.382363 929.690566 310.113967 917.284001 297.722752" fill="#666" p-id="2766"></path></svg>

dev/static/json/carDetail.json

@@ -0,0 +1,500 @@
+{
+  "data": [
+    {
+      "data": [
+        {
+          "data": [
+            {
+              "name": "品牌",
+              "value": "萨瓦纳"
+            },
+            {
+              "name": "系列",
+              "value": "萨瓦纳VX3"
+            },
+            {
+              "name": "版本",
+              "value": "尊享型"
+            },
+            {
+              "name": "用途",
+              "value": "家用座驾"
+            },
+            {
+              "name": "驱动型式",
+              "value": "4×4"
+            },
+            {
+              "name": "发动机型号",
+              "value": "4G20TI3"
+            },
+            {
+              "name": "轴距(mm)",
+              "value": 2790
+            }
+          ],
+          "name": "基本信息"
+        },
+        {
+          "data": [
+            {
+              "name": "发动机生产厂家",
+              "value": "北汽福田汽车股份有限公司"
+            },
+            {
+              "name": "发动机型号",
+              "value": "4G20TI3"
+            },
+            {
+              "name": "发动机排放",
+              "value": "国Ⅴ"
+            },
+            {
+              "name": "燃油种类",
+              "value": "柴油"
+            }
+          ],
+          "name": "发动机"
+        },
+        {
+          "data": [
+            {
+              "name": "变速器型号",
+              "value": "6HP21"
+            },
+            {
+              "name": "变速器型式",
+              "value": "AT"
+            }
+          ],
+          "name": "变速箱"
+        },
+        {
+          "data": [
+            {
+              "name": "驾驶室",
+              "value": "五座版"
+            },
+            {
+              "name": "仪表板",
+              "value": "普通仪表板（连体中平台）"
+            }
+          ],
+          "name": "内部配置"
+        },
+        {
+          "data": [
+            {
+              "name": "轮胎",
+              "value": "265/65R17"
+            },
+            {
+              "name": "前制动器",
+              "value": "盘式"
+            },
+            {
+              "name": "后制动器",
+              "value": "盘式"
+            },
+            {
+              "name": "驻车制动型式",
+              "value": "轮边手制动"
+            }
+          ],
+          "name": "车轮制动"
+        },
+        {
+          "data": [
+            {
+              "name": "转向系统",
+              "value": "动力转向-"
+            },
+            {
+              "name": "驱动型式",
+              "value": "4×4"
+            },
+            {
+              "name": "轴距(mm)",
+              "value": 2790
+            }
+          ],
+          "name": "底盘及转向"
+        }
+      ],
+      "price": "178800.00",
+      "name": "萨瓦纳 2017款  2.0T 四驱汽油尊享版5座"
+    },
+    {
+      "data": [
+        {
+          "data": [
+            {
+              "name": "品牌",
+              "value": "萨瓦纳"
+            },
+            {
+              "name": "系列",
+              "value": "萨瓦纳VX3"
+            },
+            {
+              "name": "版本",
+              "value": "尊享型"
+            },
+            {
+              "name": "用途",
+              "value": "家用座驾"
+            },
+            {
+              "name": "驱动型式",
+              "value": "4×4"
+            },
+            {
+              "name": "发动机型号",
+              "value": "4G20TI3"
+            },
+            {
+              "name": "轴距(mm)",
+              "value": 2790
+            }
+          ],
+          "name": "基本信息"
+        },
+        {
+          "data": [
+            {
+              "name": "发动机生产厂家",
+              "value": "北汽福田汽车股份有限公司"
+            },
+            {
+              "name": "发动机型号",
+              "value": "4G20TI3"
+            },
+            {
+              "name": "发动机排放",
+              "value": "国Ⅴ"
+            },
+            {
+              "name": "燃油种类",
+              "value": "柴油"
+            }
+          ],
+          "name": "发动机"
+        },
+        {
+          "data": [
+            {
+              "name": "变速器型号",
+              "value": "6HP21"
+            },
+            {
+              "name": "变速器型式",
+              "value": "AT"
+            }
+          ],
+          "name": "变速箱"
+        },
+        {
+          "data": [
+            {
+              "name": "驾驶室",
+              "value": "七座版"
+            },
+            {
+              "name": "仪表板",
+              "value": "普通仪表板（连体中平台）"
+            }
+          ],
+          "name": "内部配置"
+        },
+        {
+          "data": [
+            {
+              "name": "轮胎",
+              "value": "265/65R17"
+            },
+            {
+              "name": "前制动器",
+              "value": "盘式"
+            },
+            {
+              "name": "后制动器",
+              "value": "盘式"
+            },
+            {
+              "name": "驻车制动型式",
+              "value": "轮边手制动"
+            }
+          ],
+          "name": "车轮制动"
+        },
+        {
+          "data": [
+            {
+              "name": "转向系统",
+              "value": "动力转向-"
+            },
+            {
+              "name": "驱动型式",
+              "value": "4×4"
+            },
+            {
+              "name": "轴距(mm)",
+              "value": 2790
+            }
+          ],
+          "name": "底盘及转向"
+        }
+      ],
+      "price": "182800.00",
+      "name": "萨瓦纳 2017款  2.0T 四驱汽油尊享版7座"
+    },
+    {
+      "data": [
+        {
+          "data": [
+            {
+              "name": "品牌",
+              "value": "萨瓦纳"
+            },
+            {
+              "name": "系列",
+              "value": "萨瓦纳VX3"
+            },
+            {
+              "name": "版本",
+              "value": "至尊版"
+            },
+            {
+              "name": "用途",
+              "value": "家用座驾"
+            },
+            {
+              "name": "驱动型式",
+              "value": "4×4"
+            },
+            {
+              "name": "发动机型号",
+              "value": "4G20TI3"
+            },
+            {
+              "name": "轴距(mm)",
+              "value": 2790
+            }
+          ],
+          "name": "基本信息"
+        },
+        {
+          "data": [
+            {
+              "name": "发动机生产厂家",
+              "value": "北汽福田汽车股份有限公司"
+            },
+            {
+              "name": "发动机型号",
+              "value": "4G20TI3"
+            },
+            {
+              "name": "发动机排放",
+              "value": "国Ⅴ"
+            },
+            {
+              "name": "燃油种类",
+              "value": "柴油"
+            }
+          ],
+          "name": "发动机"
+        },
+        {
+          "data": [
+            {
+              "name": "变速器型号",
+              "value": "6HP21"
+            },
+            {
+              "name": "变速器型式",
+              "value": "AT"
+            }
+          ],
+          "name": "变速箱"
+        },
+        {
+          "data": [
+            {
+              "name": "驾驶室",
+              "value": "五座版"
+            },
+            {
+              "name": "仪表板",
+              "value": "普通仪表板（连体中平台）"
+            }
+          ],
+          "name": "内部配置"
+        },
+        {
+          "data": [
+            {
+              "name": "轮胎",
+              "value": "265/65R17"
+            },
+            {
+              "name": "前制动器",
+              "value": "盘式"
+            },
+            {
+              "name": "后制动器",
+              "value": "盘式"
+            },
+            {
+              "name": "驻车制动型式",
+              "value": "轮边手制动"
+            }
+          ],
+          "name": "车轮制动"
+        },
+        {
+          "data": [
+            {
+              "name": "转向系统",
+              "value": "动力转向-"
+            },
+            {
+              "name": "驱动型式",
+              "value": "4×4"
+            },
+            {
+              "name": "轴距(mm)",
+              "value": 2790
+            }
+          ],
+          "name": "底盘及转向"
+        }
+      ],
+      "price": "182800.00",
+      "name": "萨瓦纳 2017款  2.0T 四驱汽油至尊版5座"
+    },
+    {
+      "data": [
+        {
+          "data": [
+            {
+              "name": "品牌",
+              "value": "萨瓦纳"
+            },
+            {
+              "name": "系列",
+              "value": "萨瓦纳VX3"
+            },
+            {
+              "name": "版本",
+              "value": "至尊版"
+            },
+            {
+              "name": "用途",
+              "value": "日常代步载物车"
+            },
+            {
+              "name": "驱动型式",
+              "value": "4×4"
+            },
+            {
+              "name": "发动机型号",
+              "value": "4G20TI3"
+            },
+            {
+              "name": "轴距(mm)",
+              "value": 2790
+            }
+          ],
+          "name": "基本信息"
+        },
+        {
+          "data": [
+            {
+              "name": "发动机生产厂家",
+              "value": "北汽福田汽车股份有限公司"
+            },
+            {
+              "name": "发动机型号",
+              "value": "4G20TI3"
+            },
+            {
+              "name": "发动机排放",
+              "value": "国Ⅴ"
+            },
+            {
+              "name": "燃油种类",
+              "value": "柴油"
+            }
+          ],
+          "name": "发动机"
+        },
+        {
+          "data": [
+            {
+              "name": "变速器型号",
+              "value": "6HP21"
+            },
+            {
+              "name": "变速器型式",
+              "value": "AT"
+            }
+          ],
+          "name": "变速箱"
+        },
+        {
+          "data": [
+            {
+              "name": "驾驶室",
+              "value": "七座版"
+            },
+            {
+              "name": "仪表板",
+              "value": "普通仪表板（连体中平台）"
+            }
+          ],
+          "name": "内部配置"
+        },
+        {
+          "data": [
+            {
+              "name": "轮胎",
+              "value": "265/65R17"
+            },
+            {
+              "name": "前制动器",
+              "value": "盘式"
+            },
+            {
+              "name": "后制动器",
+              "value": "盘式"
+            },
+            {
+              "name": "驻车制动型式",
+              "value": "轮边手制动"
+            }
+          ],
+          "name": "车轮制动"
+        },
+        {
+          "data": [
+            {
+              "name": "转向系统",
+              "value": "动力转向-"
+            },
+            {
+              "name": "驱动型式",
+              "value": "4×4"
+            },
+            {
+              "name": "轴距(mm)",
+              "value": 2790
+            }
+          ],
+          "name": "底盘及转向"
+        }
+      ],
+      "price": "186800.00",
+      "name": "萨瓦纳 2017款  2.0T 四驱汽油至尊版7座"
+    }
+  ]
+}

dev/static/json/getProvince.json

@@ -0,0 +1,175 @@
+{
+    "status": 0,
+    "data": [
+        {
+            "dmpId": "b48ff4c1-0ef1-4ae2-b225-9607e5403973",
+            "id": "79",
+            "provinceName": "安徽省"
+        },
+        {
+            "dmpId": "4720b1ab-2c54-4483-9949-85dbe26d70e9",
+            "id": "70",
+            "provinceName": "澳门特别行政区"
+        },
+        {
+            "dmpId": "8b31d63f-d4f7-4ad9-a8ae-2e44785f8a92",
+            "id": "69",
+            "provinceName": "北京市"
+        },
+        {
+            "dmpId": "1132b8f8-1842-4bad-8dd3-fe1545173e5f",
+            "id": "83",
+            "provinceName": "福建省"
+        },
+        {
+            "dmpId": "09e3bfd6-55cd-4c83-919d-a9e57cb9a45e",
+            "id": "94",
+            "provinceName": "甘肃省"
+        },
+        {
+            "dmpId": "58495ad8-71d9-40d0-93fa-faacaa81e39b",
+            "id": "87",
+            "provinceName": "广东省"
+        },
+        {
+            "dmpId": "53c3559c-0eb9-4bd1-8bce-8cab2306c31f",
+            "id": "89",
+            "provinceName": "广西壮族自治区"
+        },
+        {
+            "dmpId": "81dcc255-a603-41a1-910b-975838c0238f",
+            "id": "90",
+            "provinceName": "贵州省"
+        },
+        {
+            "dmpId": "729444c5-2c11-4577-a648-d0abe1ab0898",
+            "id": "88",
+            "provinceName": "海南省"
+        },
+        {
+            "dmpId": "e06e867c-83c3-47d3-afda-ec9edea6fe2d",
+            "id": "74",
+            "provinceName": "河北省"
+        },
+        {
+            "dmpId": "c6a8d32a-72f5-48f0-8b54-9c158c6ac9d9",
+            "id": "86",
+            "provinceName": "河南省"
+        },
+        {
+            "dmpId": "d095cd02-0411-4f84-bb7d-920c922f3770",
+            "id": "77",
+            "provinceName": "黑龙江省"
+        },
+        {
+            "dmpId": "3f71bb32-d5cd-4e49-8725-3539e0ea7890",
+            "id": "85",
+            "provinceName": "湖北省"
+        },
+        {
+            "dmpId": "396cd2a4-4bf6-4a1b-a461-7bbb8b919854",
+            "id": "84",
+            "provinceName": "湖南省"
+        },
+        {
+            "dmpId": "6299c992-0ebf-42e1-8a08-2069a2f89a1c",
+            "id": "76",
+            "provinceName": "吉林省"
+        },
+        {
+            "dmpId": "61faa23f-3147-4af8-a4f9-2326638d21b6",
+            "id": "78",
+            "provinceName": "江苏省"
+        },
+        {
+            "dmpId": "05272271-a6f3-41eb-8cef-98a6a8e1994d",
+            "id": "82",
+            "provinceName": "江西省"
+        },
+        {
+            "dmpId": "abc673bc-2307-4ba6-9601-4232737d414f",
+            "id": "75",
+            "provinceName": "辽宁省"
+        },
+        {
+            "dmpId": "47d05ee4-4842-463e-86bc-d771adc5e723",
+            "id": "72",
+            "provinceName": "内蒙古自治区"
+        },
+        {
+            "dmpId": "282353e1-7f9c-4e36-aee9-1621528c25a6",
+            "id": "95",
+            "provinceName": "宁夏回族自治区"
+        },
+        {
+            "dmpId": "aebce5d1-2684-430e-92e7-ede38cfc7508",
+            "id": "96",
+            "provinceName": "青海省"
+        },
+        {
+            "dmpId": "4e00ea12-a40d-4d9a-8a7b-7ecca8f80ec6",
+            "id": "80",
+            "provinceName": "山东省"
+        },
+        {
+            "dmpId": "051e3a2e-7756-4940-b300-3b779ae744f4",
+            "id": "73",
+            "provinceName": "山西省"
+        },
+        {
+            "dmpId": "925582bd-369e-4cae-8fab-0f4f5baffbb7",
+            "id": "93",
+            "provinceName": "陕西省"
+        },
+        {
+            "dmpId": "3909c717-0f09-439d-9168-0a262260af3e",
+            "id": "102",
+            "provinceName": "上海市"
+        },
+        {
+            "dmpId": "18ed1838-80c9-4b54-9e5f-a3e5980639b4",
+            "id": "91",
+            "provinceName": "四川省"
+        },
+        {
+            "dmpId": "53c43b53-de03-4dc4-bd12-caa0efa91721",
+            "id": "99",
+            "provinceName": "台湾省"
+        },
+        {
+            "dmpId": "4e2d8653-5b8f-464e-aa7b-da718a9e0457",
+            "id": "71",
+            "provinceName": "天津市"
+        },
+        {
+            "dmpId": "eebb25d8-20ad-4a7f-9222-203f0b139d27",
+            "id": "98",
+            "provinceName": "西藏自治区"
+        },
+        {
+            "dmpId": "d690749f-b78b-4a10-abad-4ee2672606e7",
+            "id": "101",
+            "provinceName": "香港特别行政区"
+        },
+        {
+            "dmpId": "fa000574-fe60-43ca-9fbc-f9ae7261a237",
+            "id": "97",
+            "provinceName": "新疆维吾尔自治区"
+        },
+        {
+            "dmpId": "452b846b-01c1-4e9c-823b-58013f9a4f7c",
+            "id": "92",
+            "provinceName": "云南省"
+        },
+        {
+            "dmpId": "8421df1b-3899-4085-bd84-5fe7d1f6ae59",
+            "id": "81",
+            "provinceName": "浙江省"
+        },
+        {
+            "dmpId": "93d6253a-61ec-427e-b2e6-aaff555e4dbf",
+            "id": "100",
+            "provinceName": "重庆市"
+        }
+    ]
+}

dev/static/json/lbsArea.json

@@ -0,0 +1,110 @@
+[
+    {
+        "北京市": 8
+    },
+    {
+        "天津市": 8
+    },
+    {
+        "河北": 8
+    },
+    {
+        "山西": 8
+    },
+    {
+        "内蒙古": 8
+    },
+    {
+        "辽宁":""
+    },
+    {
+        "吉林": 824
+    },
+    {
+        "黑龙江": 829
+    },
+    {
+        "上海市": 12
+    },
+    {
+        "江苏": 10
+    },
+    {
+        "浙江": 10
+    },
+    {
+        "安徽": 10
+    },
+    {
+        "福建": 10
+    },
+    {
+        "江西": 824
+    },
+    {
+        "山东": 824
+    },
+    {
+        "河南省": 12
+    },
+    {
+        "湖北": 829
+    },
+    {
+        "湖南": 829
+    },
+    {
+        "广东": 829
+    },
+    {
+        "广西": ""
+    },
+    {
+        "海南": 829
+    },
+    {
+        "重庆市": ""
+    },
+    {
+        "四川": ""
+    },
+    {
+        "贵州": 12
+    },
+    {
+        "云南": ""
+    },
+    {
+        "西藏": ""
+    },
+    {
+        "陕西": ""
+    },
+    {
+        "甘肃": ""
+    },
+    {
+        "青海": ""
+    },
+    {
+        "宁夏": ""
+    },
+    {
+        "新疆": 824
+    },
+    {
+        "台湾": ""
+    },
+    {
+        "香港": ""
+    },
+    {
+        "澳门": ""
+    },
+    {
+        "美国": ""
+    },
+    {
+        "英国": ""
+    }
+]

dev/static/json/mPmsInfo.json

@@ -0,0 +1,690 @@
+[
+    {"x":233.53, "y":116.18
+    },
+    {"x":273.84, "y":61.35
+    },
+    {"x":198.74, "y":207.03
+    },
+    {"x":227.16, "y":164.85
+    },
+    {"x":204.82, "y":119.74
+    },
+    {"x":241.46, "y":138.41
+    },
+    {"x":241.95, "y":136.89
+    },
+    {"x":228.12, "y":153.14
+    },
+    {"x":214.01, "y":181.98
+    },
+    {"x":229.26, "y":105.38
+    },
+    {"x":183.79, "y":105.11
+    },
+    {"x":212.21, "y":184.36
+    },
+    {"x":176.74, "y":115.44
+    },
+    {"x":205.73, "y":114.94
+    },
+    {"x":229.41, "y":117.89
+    },
+    {"x":165.85, "y":177.45
+    },
+    {"x":250.61, "y":91.3
+    },
+    {"x":234.94, "y":153.53
+    },
+    {"x":166.43, "y":161.49
+    },
+    {"x":211.53, "y":86.63
+    },
+    {"x":189.42, "y":93.86
+    },
+    {"x":121.78, "y":71.4
+    },
+    {"x":178.45, "y":146.95
+    },
+    {"x":221.46, "y":146.73
+    },
+    {"x":205.85, "y":180.82
+    },
+    {"x":220.66, "y":124.69
+    },
+    {"x":266.65, "y":51.08
+    },
+    {"x":100.05, "y":71.06
+    },
+    {"x":211.38, "y":181.64
+    },
+    {"x":272.51, "y":58.85
+    },
+    {"x":219.72, "y":98.23
+    },
+    {"x":162.66, "y":170.91
+    },
+    {"x":215.22, "y":133.69
+    },
+    {"x":112.82, "y":62.41
+    },
+    {"x":223.65, "y":135.62
+    },
+    {"x":182.46, "y":163.08
+    },
+    {"x":179.09, "y":112.85
+    },
+    {"x":242.56, "y":59.66
+    },
+    {"x":183.26, "y":147.28
+    },
+    {"x":173.13, "y":156.11
+    },
+    {"x":199.89, "y":88.41
+    },
+    {"x":225.41, "y":91.1
+    },
+    {"x":224.3, "y":90.11
+    },
+    {"x":197.68, "y":190.05
+    },
+    {"x":203.21, "y":131.07
+    },
+    {"x":231.44, "y":135.26
+    },
+    {"x":186.56, "y":140.92
+    },
+    {"x":194.57, "y":182.62
+    },
+    {"x":226.79, "y":159.12
+    },
+    {"x":221.19, "y":152.43
+    },
+    {"x":238.59, "y":134.14
+    },
+    {"x":209.05, "y":128.99
+    },
+    {"x":102.83, "y":66.27
+    },
+    {"x":229.03, "y":173.15
+    },
+    {"x":274.6, "y":56.83
+    },
+    {"x":240.31, "y":152.79
+    },
+    {"x":225.95, "y":134.88
+    },
+    {"x":218.45, "y":159.88
+    },
+    {"x":258.56, "y":71.92
+    },
+    {"x":127.57, "y":76.15
+    },
+    {"x":125.68, "y":77.28
+    },
+    {"x":207.74, "y":105.22
+    },
+    {"x":187.11, "y":102.78
+    },
+    {"x":218.8, "y":125.52
+    },
+    {"x":251.68, "y":40.39
+    },
+    {"x":206.11, "y":87.91
+    },
+    {"x":95.26, "y":107.34
+    },
+    {"x":214.02, "y":146.57
+    },
+    {"x":195.92, "y":121.85
+    },
+    {"x":142.79, "y":76.58
+    },
+    {"x":147.81, "y":72.32
+    },
+    {"x":263.48, "y":64.35
+    },
+    {"x":231.79, "y":94.98
+    },
+    {"x":220.12, "y":121.41
+    },
+    {"x":200.34, "y":124.54
+    },
+    {"x":81.57, "y":95.01
+    },
+    {"x":238.67, "y":141.19
+    },
+    {"x":159.55, "y":93.17
+    },
+    {"x":250.91, "y":75.04
+    },
+    {"x":187.42, "y":113.17
+    },
+    {"x":108.32, "y":57.47
+    },
+    {"x":258.76, "y":29.9
+    },
+    {"x":211.9, "y":91.44
+    },
+    {"x":253.36, "y":62.67
+    },
+    {"x":166.56, "y":168.24
+    },
+    {"x":241.41, "y":96.85
+    },
+    {"x":185.99, "y":120.8
+    },
+    {"x":227.26, "y":97.34
+    },
+    {"x":227.9, "y":95.59
+    },
+    {"x":209.63, "y":103.78
+    },
+    {"x":240.91, "y":108.47
+    },
+    {"x":207.69, "y":156.95
+    },
+    {"x":214.45, "y":140.37
+    },
+    {"x":236.23, "y":159.29
+    },
+    {"x":240.61, "y":148.38
+    },
+    {"x":225.11, "y":141.99
+    },
+    {"x":188.83, "y":115.53
+    },
+    {"x":216.25, "y":115.62
+    },
+    {"x":186.18, "y":164.9
+    },
+    {"x":181.9, "y":118.67
+    },
+    {"x":181.71, "y":151.61
+    },
+    {"x":205.41, "y":141.84
+    },
+    {"x":219.4, "y":151.92
+    },
+    {"x":191.11, "y":121.84
+    },
+    {"x":230.91, "y":140.01
+    },
+    {"x":225.19, "y":125.72
+    },
+    {"x":231.1, "y":122.84
+    },
+    {"x":136.98, "y":148.91
+    },
+    {"x":136.85, "y":148.91
+    },
+    {"x":213.12, "y":151.8
+    },
+    {"x":189.16, "y":186.77
+    },
+    {"x":189.28, "y":135.15
+    },
+    {"x":191.53, "y":87.83
+    },
+    {"x":117.36, "y":82.84
+    },
+    {"x":233.65, "y":137.19
+    },
+    {"x":205.65, "y":151.07
+    },
+    {"x":189.33, "y":115.87
+    },
+    {"x":212.53, "y":125.2
+    },
+    {"x":185.94, "y":132.13
+    },
+    {"x":188.64, "y":142.64
+    },
+    {"x":212.15, "y":180.72
+    },
+    {"x":192.21, "y":114.46
+    },
+    {"x":224.75, "y":92.21
+    },
+    {"x":198.59, "y":109.79
+    },
+    {"x":264.39, "y":74.19
+    },
+    {"x":215.7, "y":119.85
+    },
+    {"x":217.78, "y":88.35
+    },
+    {"x":202.45, "y":149.61
+    },
+    {"x":166.91, "y":97.65
+    },
+    {"x":225.81, "y":122.53
+    },
+    {"x":160.48, "y":174.53
+    },
+    {"x":226.4, "y":103.6
+    },
+    {"x":180.07, "y":138.93
+    },
+    {"x":210.1, "y":100.49
+    },
+    {"x":200.44, "y":158.0
+    },
+    {"x":198.91, "y":143.36
+    },
+    {"x":215.99, "y":181.74
+    },
+    {"x":179.59, "y":141.91
+    },
+    {"x":233.22, "y":127.82
+    },
+    {"x":226.73, "y":89.82
+    },
+    {"x":223.73, "y":157.85
+    },
+    {"x":252.83, "y":80.83
+    },
+    {"x":134.03, "y":146.92
+    },
+    {"x":222.83, "y":179.06
+    },
+    {"x":171.48, "y":163.4
+    },
+    {"x":180.31, "y":180.1
+    },
+    {"x":214.32, "y":117.06
+    },
+    {"x":217.56, "y":156.67
+    },
+    {"x":116.74, "y":69.06
+    },
+    {"x":234.34, "y":137.95
+    },
+    {"x":126.51, "y":148.96
+    },
+    {"x":126.51, "y":148.95
+    },
+    {"x":233.57, "y":116.33
+    },
+    {"x":176.63, "y":165.61
+    },
+    {"x":129.07, "y":39.26
+    },
+    {"x":155.65, "y":138.95
+    },
+    {"x":178.52, "y":159.14
+    },
+    {"x":208.21, "y":106.6
+    },
+    {"x":210.34, "y":115.75
+    },
+    {"x":165.23, "y":184.43
+    },
+    {"x":225.55, "y":148.56
+    },
+    {"x":178.75, "y":168.62
+    },
+    {"x":208.99, "y":95.39
+    },
+    {"x":236.91, "y":83.72
+    },
+    {"x":248.32, "y":85.52
+    },
+    {"x":197.8, "y":178.26
+    },
+    {"x":236.61, "y":144.06
+    },
+    {"x":252.61, "y":64.55
+    },
+    {"x":139.2, "y":145.53
+    },
+    {"x":145.77, "y":146.67
+    },
+    {"x":166.47, "y":121.39
+    },
+    {"x":225.5, "y":117.9
+    },
+    {"x":198.35, "y":175.04
+    },
+    {"x":212.25, "y":161.04
+    },
+    {"x":201.6, "y":169.58
+    },
+    {"x":221.84, "y":175.12
+    },
+    {"x":204.84, "y":179.63
+    },
+    {"x":170.71, "y":171.09
+    },
+    {"x":204.2, "y":97.04
+    },
+    {"x":174.75, "y":103.07
+    },
+    {"x":215.6, "y":141.46
+    },
+    {"x":184.14, "y":159.36
+    },
+    {"x":206.08, "y":168.79
+    },
+    {"x":190.29, "y":128.65
+    },
+    {"x":223.88, "y":180.04
+    },
+    {"x":216.17, "y":181.69
+    },
+    {"x":211.24, "y":184.29
+    },
+    {"x":226.79, "y":141.71
+    },
+    {"x":245.61, "y":83.99
+    },
+    {"x":226.22, "y":100.67
+    },
+    {"x":209.73, "y":118.0
+    },
+    {"x":193.74, "y":173.09
+    },
+    {"x":217.8, "y":174.58
+    },
+    {"x":230.4, "y":172.17
+    },
+    {"x":224.33, "y":114.3
+    },
+    {"x":234.73, "y":131.77
+    },
+    {"x":184.45, "y":151.17
+    },
+    {"x":209.15, "y":120.17
+    },
+    {"x":225.62, "y":109.35
+    },
+    {"x":223.4, "y":116.49
+    },
+    {"x":173.26, "y":110.61
+    },
+    {"x":165.98, "y":106.12
+    },
+    {"x":197.18, "y":201.62
+    },
+    {"x":201.47, "y":197.99
+    },
+    {"x":147.57, "y":111.15
+    },
+    {"x":229.61, "y":108.58
+    },
+    {"x":224.22, "y":92.35
+    },
+    {"x":224.97, "y":131.26
+    },
+    {"x":232.12, "y":125.61
+    },
+    {"x":214.12, "y":184.16
+    },
+    {"x":208.89, "y":172.72
+    },
+    {"x":237.81, "y":155.62
+    },
+    {"x":198.97, "y":118.74
+    },
+    {"x":210.57, "y":142.76
+    },
+    {"x":235.79, "y":140.31
+    },
+    {"x":210.66, "y":156.13
+    },
+    {"x":199.65, "y":153.96
+    },
+    {"x":201.64, "y":191.17
+    },
+    {"x":232.08, "y":130.83
+    },
+    {"x":229.07, "y":104.22
+    },
+    {"x":214.51, "y":126.25
+    },
+    {"x":226.57, "y":178.35
+    },
+    {"x":233.34, "y":113.25
+    },
+    {"x":223.63, "y":178.77
+    },
+    {"x":218.02, "y":114.62
+    },
+    {"x":236.79, "y":105.97
+    },
+    {"x":211.05, "y":117.52
+    },
+    {"x":274.51, "y":68.72
+    },
+    {"x":200.96, "y":184.16
+    },
+    {"x":155.27, "y":129.0
+    },
+    {"x":174.34, "y":175.1
+    },
+    {"x":212.75, "y":185.86
+    },
+    {"x":176.65, "y":140.68
+    },
+    {"x":245.46, "y":62.4
+    },
+    {"x":257.87, "y":81.9
+    },
+    {"x":179.74, "y":106.97
+    },
+    {"x":188.8, "y":177.39
+    },
+    {"x":209.0, "y":152.74
+    },
+    {"x":236.36, "y":127.07
+    },
+    {"x":242.63, "y":85.52
+    },
+    {"x":178.88, "y":144.77
+    },
+    {"x":187.91, "y":97.2
+    },
+    {"x":216.05, "y":104.27
+    },
+    {"x":233.23, "y":166.11
+    },
+    {"x":232.8, "y":92.42
+    },
+    {"x":177.01, "y":178.34
+    },
+    {"x":238.49, "y":144.99
+    },
+    {"x":259.97, "y":57.05
+    },
+    {"x":181.73, "y":137.26
+    },
+    {"x":221.8, "y":110.77
+    },
+    {"x":209.38, "y":181.4
+    },
+    {"x":182.27, "y":148.4
+    },
+    {"x":208.06, "y":144.97
+    },
+    {"x":229.94, "y":137.64
+    },
+    {"x":237.75, "y":139.84
+    },
+    {"x":203.73, "y":189.36
+    },
+    {"x":210.77, "y":145.87
+    },
+    {"x":208.3, "y":139.8
+    },
+    {"x":232.23, "y":168.95
+    },
+    {"x":227.57, "y":112.35
+    },
+    {"x":221.45, "y":115.32
+    },
+    {"x":214.1, "y":157.57
+    },
+    {"x":243.45, "y":88.65
+    },
+    {"x":236.54, "y":90.27
+    },
+    {"x":226.37, "y":129.46
+    },
+    {"x":220.25, "y":103.97
+    },
+    {"x":209.68, "y":161.07
+    },
+    {"x":232.59, "y":150.17
+    },
+    {"x":210.28, "y":133.95
+    },
+    {"x":168.24, "y":187.49
+    },
+    {"x":171.6, "y":109.72
+    },
+    {"x":196.45, "y":122.01
+    },
+    {"x":213.73, "y":123.59
+    },
+    {"x":201.81, "y":179.09
+    },
+    {"x":189.06, "y":163.62
+    },
+    {"x":206.02, "y":174.56
+    },
+    {"x":181.71, "y":144.41
+    },
+    {"x":217.68, "y":167.04
+    },
+    {"x":233.2, "y":83.5
+    },
+    {"x":253.58, "y":76.76
+    },
+    {"x":247.09, "y":84.34
+    },
+    {"x":191.56, "y":138.36
+    },
+    {"x":204.13, "y":118.13
+    },
+    {"x":232.85, "y":122.3
+    },
+    {"x":164.43, "y":156.53
+    },
+    {"x":256.39, "y":82.65
+    },
+    {"x":243.4, "y":72.86
+    },
+    {"x":185.03, "y":142.56
+    },
+    {"x":189.76, "y":156.76
+    },
+    {"x":216.42, "y":107.21
+    },
+    {"x":137.73, "y":137.12
+    },
+    {"x":216.45, "y":110.04
+    },
+    {"x":205.93, "y":159.53
+    },
+    {"x":213.38, "y":120.4
+    },
+    {"x":210.93, "y":154.47
+    },
+    {"x":200.97, "y":93.12
+    },
+    {"x":217.57, "y":143.26
+    },
+    {"x":146.55, "y":91.43
+    },
+    {"x":187.72, "y":148.13
+    },
+    {"x":198.77, "y":139.5
+    },
+    {"x":234.4, "y":149.62
+    },
+    {"x":172.54, "y":101.28
+    },
+    {"x":195.74, "y":187.38
+    },
+    {"x":249.74, "y":78.4
+    },
+    {"x":197.66, "y":157.15
+    },
+    {"x":196.95, "y":120.38
+    },
+    {"x":227.68, "y":140.41
+    },
+    {"x":187.68, "y":99.72
+    },
+    {"x":246.43, "y":181.45
+    },
+    {"x":240.34, "y":85.78
+    },
+    {"x":233.96, "y":134.51
+    },
+    {"x":253.83, "y":71.11
+    },
+    {"x":211.28, "y":154.27
+    },
+    {"x":211.29, "y":112.21
+    },
+    {"x":241.59, "y":81.2
+    },
+    {"x":221.01, "y":129.86
+    },
+    {"x":194.84, "y":189.22
+    },
+    {"x":206.84, "y":186.34
+    },
+    {"x":213.03, "y":103.41
+    },
+    {"x":105.71, "y":82.68
+    },
+    {"x":122.83, "y":52.98
+    },
+    {"x":185.42, "y":98.18
+    },
+    {"x":95.85, "y":131.69
+    },
+    {"x":182.62, "y":126.92
+    },
+    {"x":212.37, "y":135.9
+    },
+    {"x":175.81, "y":145.04
+    },
+    {"x":237.34, "y":112.47
+    },
+    {"x":244.57, "y":87.06
+    },
+    {"x":213.05, "y":172.88
+    },
+    {"x":230.17, "y":136.22
+    },
+    {"x":214.63, "y":129.44
+    },
+    {"x":280.99, "y":61.4
+    },
+    {"x":215.52, "y":114.42
+    },
+    {"x":272.36, "y":52.66
+    },
+    {"x":225.11, "y":154.44
+    },
+    {"x":218.03, "y":138.74
+    },
+    {"x":229.68, "y":146.44
+    },
+    {"x":218.24, "y":143.65
+    },
+    {"x":258.26, "y":48.17
+    },
+    {"x":197.49, "y":164.94
+    },
+    {"x":191.82, "y":164.78
+    },
+    {"x":182.79, "y":170.79
+    },
+    {"x":256.86, "y":51.64
+    },
+    {"x":222.86, "y":171.17
+    }
+]

dev/static/json/pPmsInfo.json

@@ -0,0 +1,690 @@
+[
+    {"x":920.27, "y":543.71
+    },
+    {"x":1037.74, "y":383.37
+    },
+    {"x":818.86, "y":809.41
+    },
+    {"x":901.7, "y":686.05
+    },
+    {"x":836.6, "y":554.14
+    },
+    {"x":943.36, "y":608.73
+    },
+    {"x":944.78, "y":604.28
+    },
+    {"x":904.51, "y":651.82
+    },
+    {"x":863.37, "y":736.16
+    },
+    {"x":907.83, "y":512.12
+    },
+    {"x":775.3, "y":511.35
+    },
+    {"x":858.12, "y":743.11
+    },
+    {"x":754.75, "y":541.56
+    },
+    {"x":839.23, "y":540.1
+    },
+    {"x":908.24, "y":548.72
+    },
+    {"x":723.02, "y":722.89
+    },
+    {"x":970.04, "y":470.94
+    },
+    {"x":924.37, "y":652.95
+    },
+    {"x":724.71, "y":676.23
+    },
+    {"x":856.14, "y":457.3
+    },
+    {"x":791.72, "y":478.43
+    },
+    {"x":594.59, "y":412.75
+    },
+    {"x":759.73, "y":633.7
+    },
+    {"x":885.08, "y":633.05
+    },
+    {"x":839.58, "y":732.75
+    },
+    {"x":882.76, "y":568.59
+    },
+    {"x":1016.78, "y":353.32
+    },
+    {"x":531.25, "y":411.77
+    },
+    {"x":855.71, "y":735.17
+    },
+    {"x":1033.86, "y":376.06
+    },
+    {"x":880.01, "y":491.22
+    },
+    {"x":713.72, "y":703.77
+    },
+    {"x":866.91, "y":594.94
+    },
+    {"x":568.48, "y":386.45
+    },
+    {"x":891.45, "y":600.55
+    },
+    {"x":771.41, "y":680.87
+    },
+    {"x":761.61, "y":533.97
+    },
+    {"x":946.57, "y":378.42
+    },
+    {"x":773.74, "y":634.68
+    },
+    {"x":744.23, "y":660.48
+    },
+    {"x":822.22, "y":462.51
+    },
+    {"x":896.6, "y":470.36
+    },
+    {"x":893.37, "y":467.48
+    },
+    {"x":815.77, "y":759.74
+    },
+    {"x":831.89, "y":587.27
+    },
+    {"x":914.18, "y":599.52
+    },
+    {"x":783.38, "y":616.06
+    },
+    {"x":806.71, "y":738.03
+    },
+    {"x":900.62, "y":669.3
+    },
+    {"x":884.3, "y":649.73
+    },
+    {"x":935.02, "y":596.24
+    },
+    {"x":848.93, "y":581.18
+    },
+    {"x":539.35, "y":397.74
+    },
+    {"x":907.13, "y":710.32
+    },
+    {"x":1039.94, "y":370.13
+    },
+    {"x":940.03, "y":650.77
+    },
+    {"x":898.15, "y":598.41
+    },
+    {"x":876.3, "y":671.52
+    },
+    {"x":993.21, "y":414.28
+    },
+    {"x":611.45, "y":426.64
+    },
+    {"x":605.95, "y":429.94
+    },
+    {"x":845.1, "y":511.68
+    },
+    {"x":784.99, "y":504.52
+    },
+    {"x":877.33, "y":571.03
+    },
+    {"x":973.15, "y":322.05
+    },
+    {"x":840.34, "y":461.04
+    },
+    {"x":517.29, "y":517.87
+    },
+    {"x":863.4, "y":632.58
+    },
+    {"x":810.65, "y":560.3
+    },
+    {"x":655.81, "y":427.89
+    },
+    {"x":670.45, "y":415.45
+    },
+    {"x":1007.55, "y":392.13
+    },
+    {"x":915.2, "y":481.73
+    },
+    {"x":881.18, "y":559.02
+    },
+    {"x":823.54, "y":568.16
+    },
+    {"x":477.39, "y":481.8
+    },
+    {"x":935.24, "y":616.87
+    },
+    {"x":704.65, "y":476.42
+    },
+    {"x":970.92, "y":423.4
+    },
+    {"x":785.88, "y":534.91
+    },
+    {"x":555.36, "y":372.02
+    },
+    {"x":993.8, "y":291.4
+    },
+    {"x":857.23, "y":471.36
+    },
+    {"x":978.05, "y":387.21
+    },
+    {"x":725.1, "y":695.96
+    },
+    {"x":943.22, "y":487.18
+    },
+    {"x":781.7, "y":557.23
+    },
+    {"x":901.99, "y":488.61
+    },
+    {"x":903.86, "y":483.51
+    },
+    {"x":850.62, "y":507.45
+    },
+    {"x":941.78, "y":521.18
+    },
+    {"x":844.94, "y":662.96
+    },
+    {"x":864.66, "y":614.46
+    },
+    {"x":928.13, "y":669.78
+    },
+    {"x":940.88, "y":637.9
+    },
+    {"x":895.73, "y":619.18
+    },
+    {"x":789.98, "y":541.8
+    },
+    {"x":869.89, "y":542.07
+    },
+    {"x":782.26, "y":686.19
+    },
+    {"x":769.81, "y":551.01
+    },
+    {"x":769.25, "y":647.34
+    },
+    {"x":838.32, "y":618.76
+    },
+    {"x":879.09, "y":648.23
+    },
+    {"x":796.63, "y":560.28
+    },
+    {"x":912.63, "y":613.4
+    },
+    {"x":895.95, "y":571.62
+    },
+    {"x":913.17, "y":563.18
+    },
+    {"x":638.88, "y":639.43
+    },
+    {"x":638.51, "y":639.43
+    },
+    {"x":860.78, "y":647.88
+    },
+    {"x":790.95, "y":750.17
+    },
+    {"x":791.31, "y":599.18
+    },
+    {"x":797.84, "y":460.8
+    },
+    {"x":581.69, "y":446.2
+    },
+    {"x":920.62, "y":605.16
+    },
+    {"x":839.0, "y":645.76
+    },
+    {"x":791.46, "y":542.81
+    },
+    {"x":859.05, "y":570.1
+    },
+    {"x":781.56, "y":590.36
+    },
+    {"x":789.45, "y":621.09
+    },
+    {"x":857.94, "y":732.47
+    },
+    {"x":799.83, "y":538.7
+    },
+    {"x":894.68, "y":473.62
+    },
+    {"x":818.42, "y":525.01
+    },
+    {"x":1010.2, "y":420.9
+    },
+    {"x":868.3, "y":554.46
+    },
+    {"x":874.35, "y":462.31
+    },
+    {"x":829.68, "y":641.47
+    },
+    {"x":726.12, "y":489.51
+    },
+    {"x":897.75, "y":562.28
+    },
+    {"x":707.37, "y":714.38
+    },
+    {"x":899.48, "y":506.93
+    },
+    {"x":764.47, "y":610.23
+    },
+    {"x":851.97, "y":497.82
+    },
+    {"x":823.81, "y":666.03
+    },
+    {"x":819.37, "y":623.21
+    },
+    {"x":869.14, "y":735.44
+    },
+    {"x":763.06, "y":618.98
+    },
+    {"x":919.35, "y":577.77
+    },
+    {"x":900.44, "y":466.62
+    },
+    {"x":891.7, "y":665.57
+    },
+    {"x":976.51, "y":440.33
+    },
+    {"x":630.28, "y":633.62
+    },
+    {"x":889.09, "y":727.62
+    },
+    {"x":739.43, "y":681.81
+    },
+    {"x":765.16, "y":730.66
+    },
+    {"x":864.27, "y":546.28
+    },
+    {"x":873.71, "y":662.14
+    },
+    {"x":579.9, "y":405.92
+    },
+    {"x":922.61, "y":607.37
+    },
+    {"x":608.36, "y":639.59
+    },
+    {"x":608.37, "y":639.54
+    },
+    {"x":920.38, "y":544.17
+    },
+    {"x":754.45, "y":688.28
+    },
+    {"x":615.82, "y":318.77
+    },
+    {"x":693.29, "y":610.32
+    },
+    {"x":759.95, "y":669.36
+    },
+    {"x":846.46, "y":515.7
+    },
+    {"x":852.68, "y":542.47
+    },
+    {"x":721.22, "y":743.3
+    },
+    {"x":897.01, "y":638.41
+    },
+    {"x":760.61, "y":697.07
+    },
+    {"x":848.74, "y":482.91
+    },
+    {"x":930.12, "y":448.79
+    },
+    {"x":963.37, "y":454.04
+    },
+    {"x":816.13, "y":725.27
+    },
+    {"x":929.23, "y":625.25
+    },
+    {"x":975.87, "y":392.72
+    },
+    {"x":645.36, "y":629.56
+    },
+    {"x":664.49, "y":632.89
+    },
+    {"x":724.83, "y":558.96
+    },
+    {"x":896.87, "y":548.76
+    },
+    {"x":817.73, "y":715.87
+    },
+    {"x":858.25, "y":674.91
+    },
+    {"x":827.2, "y":699.89
+    },
+    {"x":886.18, "y":716.09
+    },
+    {"x":836.65, "y":729.27
+    },
+    {"x":737.19, "y":704.29
+    },
+    {"x":834.79, "y":487.73
+    },
+    {"x":748.95, "y":505.36
+    },
+    {"x":868.0, "y":617.66
+    },
+    {"x":776.34, "y":669.99
+    },
+    {"x":840.25, "y":697.57
+    },
+    {"x":794.26, "y":580.17
+    },
+    {"x":892.14, "y":730.47
+    },
+    {"x":869.66, "y":735.31
+    },
+    {"x":855.29, "y":742.89
+    },
+    {"x":900.61, "y":618.36
+    },
+    {"x":955.47, "y":449.58
+    },
+    {"x":898.95, "y":498.35
+    },
+    {"x":850.91, "y":549.03
+    },
+    {"x":804.31, "y":710.16
+    },
+    {"x":874.41, "y":714.52
+    },
+    {"x":911.14, "y":707.46
+    },
+    {"x":893.45, "y":538.21
+    },
+    {"x":923.76, "y":589.32
+    },
+    {"x":777.23, "y":646.05
+    },
+    {"x":849.21, "y":555.38
+    },
+    {"x":897.2, "y":523.74
+    },
+    {"x":890.72, "y":544.61
+    },
+    {"x":744.61, "y":527.42
+    },
+    {"x":723.41, "y":514.3
+    },
+    {"x":814.33, "y":793.57
+    },
+    {"x":826.83, "y":782.98
+    },
+    {"x":669.76, "y":529.0
+    },
+    {"x":908.83, "y":521.48
+    },
+    {"x":893.12, "y":474.03
+    },
+    {"x":895.31, "y":587.81
+    },
+    {"x":916.16, "y":571.28
+    },
+    {"x":863.71, "y":742.54
+    },
+    {"x":848.46, "y":709.07
+    },
+    {"x":932.72, "y":659.07
+    },
+    {"x":819.54, "y":551.2
+    },
+    {"x":853.36, "y":621.45
+    },
+    {"x":926.84, "y":614.29
+    },
+    {"x":853.62, "y":660.54
+    },
+    {"x":821.53, "y":654.22
+    },
+    {"x":827.33, "y":763.02
+    },
+    {"x":916.04, "y":586.57
+    },
+    {"x":907.26, "y":508.72
+    },
+    {"x":864.84, "y":573.18
+    },
+    {"x":899.98, "y":725.54
+    },
+    {"x":919.72, "y":535.16
+    },
+    {"x":891.42, "y":726.77
+    },
+    {"x":875.05, "y":539.15
+    },
+    {"x":929.77, "y":513.86
+    },
+    {"x":854.75, "y":547.65
+    },
+    {"x":1039.7, "y":404.92
+    },
+    {"x":825.34, "y":742.53
+    },
+    {"x":692.18, "y":581.2
+    },
+    {"x":747.76, "y":716.02
+    },
+    {"x":859.71, "y":747.49
+    },
+    {"x":754.49, "y":615.35
+    },
+    {"x":955.02, "y":386.44
+    },
+    {"x":991.19, "y":443.47
+    },
+    {"x":763.51, "y":516.77
+    },
+    {"x":789.89, "y":722.72
+    },
+    {"x":848.77, "y":650.63
+    },
+    {"x":928.5, "y":575.57
+    },
+    {"x":946.79, "y":454.05
+    },
+    {"x":761.0, "y":627.33
+    },
+    {"x":787.32, "y":488.22
+    },
+    {"x":869.31, "y":508.87
+    },
+    {"x":919.37, "y":689.74
+    },
+    {"x":918.14, "y":474.24
+    },
+    {"x":755.55, "y":725.5
+    },
+    {"x":934.71, "y":627.96
+    },
+    {"x":997.3, "y":370.8
+    },
+    {"x":769.29, "y":605.35
+    },
+    {"x":886.06, "y":527.89
+    },
+    {"x":849.87, "y":734.44
+    },
+    {"x":770.89, "y":637.95
+    },
+    {"x":846.04, "y":627.92
+    },
+    {"x":909.78, "y":606.49
+    },
+    {"x":932.55, "y":612.9
+    },
+    {"x":833.42, "y":757.72
+    },
+    {"x":853.94, "y":630.54
+    },
+    {"x":846.72, "y":612.78
+    },
+    {"x":916.47, "y":698.04
+    },
+    {"x":902.9, "y":532.51
+    },
+    {"x":885.05, "y":541.19
+    },
+    {"x":863.62, "y":664.75
+    },
+    {"x":949.17, "y":463.21
+    },
+    {"x":929.03, "y":467.93
+    },
+    {"x":899.38, "y":582.56
+    },
+    {"x":881.55, "y":508.0
+    },
+    {"x":850.74, "y":675.0
+    },
+    {"x":917.52, "y":643.11
+    },
+    {"x":852.5, "y":595.69
+    },
+    {"x":729.97, "y":752.25
+    },
+    {"x":739.79, "y":524.81
+    },
+    {"x":812.19, "y":560.76
+    },
+    {"x":862.56, "y":565.38
+    },
+    {"x":827.83, "y":727.69
+    },
+    {"x":790.65, "y":682.44
+    },
+    {"x":840.08, "y":714.46
+    },
+    {"x":769.23, "y":626.28
+    },
+    {"x":874.07, "y":692.46
+    },
+    {"x":919.31, "y":448.15
+    },
+    {"x":978.68, "y":428.44
+    },
+    {"x":959.79, "y":450.61
+    },
+    {"x":797.93, "y":608.59
+    },
+    {"x":834.57, "y":549.41
+    },
+    {"x":918.28, "y":561.62
+    },
+    {"x":718.89, "y":661.72
+    },
+    {"x":986.87, "y":445.67
+    },
+    {"x":949.04, "y":417.03
+    },
+    {"x":778.92, "y":620.85
+    },
+    {"x":792.7, "y":662.39
+    },
+    {"x":870.4, "y":517.47
+    },
+    {"x":641.06, "y":604.95
+    },
+    {"x":870.48, "y":525.75
+    },
+    {"x":839.83, "y":670.5
+    },
+    {"x":861.54, "y":556.07
+    },
+    {"x":854.39, "y":655.69
+    },
+    {"x":825.37, "y":476.28
+    },
+    {"x":873.75, "y":622.92
+    },
+    {"x":666.77, "y":471.33
+    },
+    {"x":786.77, "y":637.16
+    },
+    {"x":818.96, "y":611.92
+    },
+    {"x":922.79, "y":641.52
+    },
+    {"x":742.51, "y":500.15
+    },
+    {"x":810.14, "y":751.93
+    },
+    {"x":967.51, "y":433.24
+    },
+    {"x":815.71, "y":663.54
+    },
+    {"x":813.66, "y":556.0
+    },
+    {"x":903.21, "y":614.57
+    },
+    {"x":786.64, "y":495.58
+    },
+    {"x":957.86, "y":734.59
+    },
+    {"x":940.09, "y":454.82
+    },
+    {"x":921.51, "y":597.33
+    },
+    {"x":979.41, "y":411.92
+    },
+    {"x":855.41, "y":655.12
+    },
+    {"x":855.46, "y":532.11
+    },
+    {"x":943.74, "y":441.41
+    },
+    {"x":883.76, "y":583.72
+    },
+    {"x":807.5, "y":757.31
+    },
+    {"x":842.48, "y":748.91
+    },
+    {"x":860.5, "y":506.37
+    },
+    {"x":547.77, "y":445.74
+    },
+    {"x":597.64, "y":358.89
+    },
+    {"x":780.06, "y":491.09
+    },
+    {"x":519.01, "y":589.07
+    },
+    {"x":771.88, "y":575.12
+    },
+    {"x":858.6, "y":601.4
+    },
+    {"x":752.04, "y":628.12
+    },
+    {"x":931.35, "y":532.85
+    },
+    {"x":952.42, "y":458.54
+    },
+    {"x":860.58, "y":709.53
+    },
+    {"x":910.47, "y":602.31
+    },
+    {"x":865.19, "y":582.49
+    },
+    {"x":1058.56, "y":383.51
+    },
+    {"x":867.79, "y":538.57
+    },
+    {"x":1033.42, "y":357.96
+    },
+    {"x":895.71, "y":655.61
+    },
+    {"x":875.08, "y":609.7
+    },
+    {"x":909.04, "y":632.22
+    },
+    {"x":875.71, "y":624.06
+    },
+    {"x":992.33, "y":344.81
+    },
+    {"x":815.23, "y":686.31
+    },
+    {"x":798.71, "y":685.84
+    },
+    {"x":772.4, "y":703.41
+    },
+    {"x":988.26, "y":354.96
+    },
+    {"x":889.18, "y":704.53
+    }
+]

package.json

@@ -0,0 +1,49 @@
+{
+  "name": "foton-2023",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dll": "webpack --config config/webpack.dll.js",
+    "dev": "webpack-dev-server --config config/webpack.dev.js --progress",
+    "dist": "webpack --config config/webpack.prod.js",
+    "chart-dev": "webpack-dev-server --config config/webpack.charts.dev.js --progress",
+    "chart-dist": "webpack --config config/webpack.charts.dist.js",
+    "server": "http-server -a 192.168.1.59 -p 3001 -o ./dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "gsap": "^3.11.3",
+    "hammerjs": "^2.0.8",
+    "locomotive-scroll": "^4.1.4",
+    "swiper": "^8.4.6",
+    "vh-check": "^2.0.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/preset-env": "^7.16.11",
+    "babel-loader": "^8.2.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.6.0",
+    "glob": "^7.2.0",
+    "glslify-loader": "^2.0.0",
+    "happypack": "^5.0.1",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "http-server": "^14.1.0",
+    "less": "^4.1.2",
+    "less-loader": "^10.2.0",
+    "mini-css-extract-plugin": "^2.5.3",
+    "raw-loader": "^4.0.2",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.69.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4"
+  }
+}

src/pages/404/App.js

@@ -0,0 +1,19 @@
+import Swiper from 'swiper/bundle'
+import gsap from 'gsap'
+import Hammer from 'hammerjs'
+import Common from '../common/js/Common'
+import { isMobile, scrollFun } from '../common/js/utils'
+
+export default class App {
+    constructor() {
+        this.initEvent()
+    }
+    initEvent(){
+        let btnList  = document.querySelectorAll('.btn')
+        btnList.forEach(item=>{
+            item.addEventListener('click',()=>{
+                history.go(-1)
+            })
+        })
+    }
+}

src/pages/404/index.css

@@ -0,0 +1,93 @@
+/* -----------------------------公共部分--------------------------- */
+body {
+  overflow-x: hidden;
+  background-color: #000;
+}
+
+.main {
+  width: 100vw;
+  /* height: 100vh; */
+  transition: transform 0.8s ease 0.1s;
+  display: flex;
+  justify-content: center;
+}
+
+@media screen and (min-width:800px){
+  .pc{
+    display:block;
+    width:100vw;
+    height:calc(100vh - 60px);
+  }
+  .back-img{
+    background: url('./404.jpg') no-repeat center;
+    background-size:cover;
+    width:100%;
+    height:100%;
+  }
+  .txt{
+    color: #fff;
+    font-size: 16px;
+    position: absolute;
+    top: 75%;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .btn{
+    font-size: 16px;
+    position: absolute;
+    top: calc(75% + 60px);
+    left: 50%;
+    background: #fff;
+    transform: translateX(-50%);
+    width: 225px;
+    height: 60px;
+    border-radius: 50px;
+    text-align: center;
+    line-height: 60px;
+    cursor:pointer;
+  }
+  .mobile{
+    display:none;
+  }
+}
+
+@media screen and (max-width:800px){
+  .pc{
+    display:none;
+  }
+  .mobile{
+    display:block;
+    width:100vw;
+    height:calc(100vh - 60px);
+  }
+  .back-img{
+    background: url('./404-mobile.jpg') no-repeat center;
+    background-size:cover;
+    width:100%;
+    height:100%;
+  }
+  .txt{
+    color: #fff;
+    font-size: 16px;
+    position: absolute;
+    top: calc(50% + 50px + var(--vh-offset, 0px));
+    left: 50%;
+    white-space: nowrap;
+    font-size: 12px;
+    transform: translateX(-50%);
+  }
+  .btn{
+    top: calc(50% + 90px + var(--vh-offset, 0px));
+    left: 50%;
+    white-space: nowrap;
+    transform: translatex(-50%);
+    font-size: 12px;
+    position: absolute;
+    width: 125px;
+    height: 30px;
+    text-align: center;
+    background: #fff;
+    line-height: 30px;
+    border-radius: 50px;
+  }
+}

src/pages/404/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="cn">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title></title>
+        <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
+        <link href="./static/css/swiper-bundle.min.css" rel="stylesheet" type="text/css" />
+        <%= require('../common/tpl/headerLink.tpl') %>
+    </head>
+    <body class="third">
+        <!----------------------------- 导航 ----------------------------->
+        <%= require('../common/tpl/header.tpl') %>
+        <!----------------------------- 页面主体 ----------------------------->
+        <div class="main">
+            <div class="pc">
+                <div class="back-img">
+                    <div class="txt">很抱歉，您要访问的页面地址有误,或者该页面不存在。</div>
+                    <div class="btn">返回上一页</div>
+                </div>
+            </div>
+            <div class="mobile">
+                <div class="back-img">
+                    <div class="txt">很抱歉，您要访问的页面地址有误,或者该页面不存在。</div>
+                    <div class="btn">返回上一页</div>
+                </div>
+            </div>
+        </div>
+        <%= require('../common/tpl/bottomBar.tpl') %>
+    </body>
+</html>

src/pages/404/index.js

@@ -0,0 +1,19 @@
+import "./../common/css/common.less";
+import "./index.css";
+import App from './App.js';
+import vhCheck from "vh-check"; 
+
+// swiper的css目前环境解析不出来，放static下，不走webpack 
+//import 'swiper/swiper-bundle.css';
+
+vhCheck();
+// swiper的css目前环境解析不出来，放static下，不走webpack 
+//import 'swiper/swiper-bundle.css';
+
+
+ //禁止浏览器刷新后回到上一个页面滚动位置
+ if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual';
+}
+
+new App();

src/pages/about/App.js

@@ -0,0 +1,171 @@
+import Swiper from 'swiper/bundle'
+import gsap from 'gsap'
+import LocomotiveScroll from 'locomotive-scroll';
+import Common from '../common/js/Common'
+import {
+    isMobile
+} from '../common/js/utils'
+
+export default class App {
+    constructor() {
+        let common = new Common(document.querySelector('.main'),5)   //导航菜单高亮，0是首页，后面的按顺序添加
+        this.isMobile = isMobile()
+        
+        this.scroll = new LocomotiveScroll();
+
+        // 图片及视频资源懒加载。防止阻塞js执行
+        let lazyDoms = document.querySelectorAll(".lazy");
+        let isMob=this.isMobile;
+        lazyDoms.forEach((item) => {
+            if (item.nodeName == "PICTURE") {
+                item.children[0].setAttribute("srcset", item.children[0].dataset.srcset);
+                item.children[1].setAttribute("src", item.children[1].dataset.src);
+            }
+            if (item.nodeName == "IMG") {
+                if(isMob){item.setAttribute("src", item.dataset.srcm);}
+                else{
+                    item.setAttribute("src", item.dataset.src);
+                }
+                
+            }
+            if (item.nodeName == "VIDEO") {
+                console.log(item, 'item---2')
+                item.setAttribute("src", item.dataset.src);
+                // item.load();
+            }
+        });
+        
+        this.swiperAll();
+        
+    }
+    //产品轮播
+    swiperAll() {
+        let isMobile = this.isMobile;
+        let mySwiper = new Swiper('.masterSwiper1', {
+            autoplay: false,//可选选项，自动滑动
+            // 如果需要前进后退按钮
+            navigation: {
+                nextEl: '.btn-nextP1',
+                prevEl: '.btn-prevP1',
+            }
+        });
+        let mySwiper2 = new Swiper('.masterSwiper2', {
+            autoplay: false,//可选选项，自动滑动
+            // 如果需要前进后退按钮
+            navigation: {
+                nextEl: '.btn-nextP2',
+                prevEl: '.btn-prevP2',
+            }
+        });
+        let mySwiper3 = new Swiper('.masterSwiper3', {
+            autoplay: false,//可选选项，自动滑动
+            // 如果需要前进后退按钮
+            navigation: {
+                nextEl: '.btn-nextP3',
+                prevEl: '.btn-prevP3',
+            }
+        });
+        let ckTypes = document.querySelectorAll(".oneTit");
+        let masterDivs = document.querySelectorAll(".masterDiv");
+        function masterShow(num){
+            masterDivs.forEach((item,index)=>{
+                if(index==num){
+                    item.classList.add("masterShow");
+                }else{
+                    item.classList.remove("masterShow");
+                }
+            })
+        }
+        
+        ckTypes.forEach((item,index)=>{
+            item.addEventListener("click", (e) => {
+                
+                item.parentNode.querySelectorAll(".oneTit").forEach(item=>{
+                    item.classList.remove("ckTit");
+                });
+                item.classList.add("ckTit");
+                masterShow(index)
+            });
+        });
+        let paddingH=60;
+        if(isMobile){
+            let twoSwiper = new Swiper('.twoSwiper', {
+                autoplay: false,//可选选项，自动滑动
+                spaceBetween: 10,
+                loop: true,
+                centeredSlides: true,
+                slidesPerView: 'auto',
+                // 如果需要前进后退按钮
+                navigation: {
+                    nextEl: '.btn-nextP4',
+                    prevEl: '.btn-prevP4',
+                }
+            });
+            paddingH=30;
+        }else{
+            let twoSwiper = new Swiper('.twoSwiper', {
+                autoplay: false,//可选选项，自动滑动
+                slidesPerView: 3,
+                spaceBetween: 10,
+                // 如果需要前进后退按钮
+                navigation: {
+                    nextEl: '.btn-nextP4',
+                    prevEl: '.btn-prevP4',
+                }
+            });
+        }
+        
+
+        //切换显示隐藏
+        let liTitleArray = document.querySelectorAll('.liTitle');
+        liTitleArray.forEach((child )=>{
+            child.addEventListener('click', (event) => {
+                // 获取被点击元素的父元素
+                let parentElement = event.currentTarget.parentNode;
+                let infoSonLi = parentElement.querySelector('.infoSonLi');
+                let actualHeight = infoSonLi.offsetHeight;
+                // 初始化子元素总高度
+                let childrenTotalHeight = paddingH;
+
+                // 遍历所有子元素，累加它们的高度
+                Array.from(infoSonLi.children).forEach(child => {
+                    childrenTotalHeight += child.offsetHeight;
+                });
+                let totalHeight = childrenTotalHeight;
+                if (parentElement.classList.contains("infoLiShow")) {
+                    parentElement.classList.remove('infoLiShow')
+                    gsap.to(infoSonLi,{paddingTop:0,height:0,duration:0.5})
+                    
+                }else{
+                    parentElement.classList.add('infoLiShow');
+                    gsap.to(infoSonLi,{paddingTop:paddingH,height:totalHeight,duration:0.5})
+                    // gsap.to(infoSonLi,{height:totalHeight,duration:1,onComplete: () => infoSonLi.style.height = 'auto'})
+                }
+            });
+        });
+        //添加表单动画
+        let liTits = document.querySelectorAll('.liTit');
+        liTits.forEach((val)=>{
+            val.style.height = val.offsetHeight+'px';
+            let liTitMove = val.querySelector('.liTitMove');
+            if(isMobile){
+                liTitMove.classList.remove("moveUp");
+                liTitMove.classList.add("fadeInUp");
+            }else{
+                // 获取 liTit 下的所有 div 元素
+                let divs = liTitMove.querySelector('div');
+                if(divs){
+                    // 克隆 div 元素
+                    let clonedDiv = divs.cloneNode(true);
+                    
+                    // 将克隆的 div 插入到 liTit 的后面
+                    divs.parentElement.appendChild(clonedDiv);;
+                }
+            }
+            
+        })
+    }
+    
+
+
+}

src/pages/about/images/720d.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 750 1330" style="enable-background:new 0 0 750 1330;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;}
+	.st1{font-family:'SourceHanSansCN-Bold-GBpc-EUC-H';}
+	.st2{font-size:163.8541px;}
+</style>
+<path d="M554.1,356.6c-14.6,0-26.5,11.5-26.5,25.7v0.6c0.1,14,11.9,25.2,26.3,25.1h0.2c14.6,0,26.5-11.5,26.5-25.8
+	C580.5,368.1,568.7,356.6,554.1,356.6z M554.1,394.9L554.1,394.9c-7.1,0.1-12.8-5.4-12.9-12.3v-0.3c0-6.9,5.8-12.6,12.9-12.6
+	c7.1,0,12.9,5.6,12.9,12.6C567,389.3,561.2,394.9,554.1,394.9z"/>
+<path d="M402.6,587.2"/>
+<path d="M350.7,581c-109.2-5.2-193.3-38-193.3-77.7c0-25.7,35.3-48.5,89.9-62.8c-45.8,12.3-74.8,30.7-74.8,51.4
+	c0,33.6,77.3,61.5,178.2,66.2 M414.8,579.7c109-5.2,193.3-38,193.3-77.8c0-25.7-35.3-48.5-89.9-62.7c45.6,12.3,74.8,30.7,74.8,51.4
+	c0,33.6-77.3,61.5-178.1,66.2"/>
+<rect x="157.5" y="373.1" class="st0" width="450.6" height="259.3"/>
+<text transform="matrix(1 0 0 1 230.6735 488.2739)" class="st1 st2">720</text>
+<polygon points="402.6,570.5 350.5,525.9 350.5,615.2 402.6,570.4 "/>
+</svg>

src/pages/about/index.html

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>关于卡文</title>
+    <meta name="description" content=""/>
+    <meta name="Keywords" content=""/>
+    <meta
+      content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width"
+      name="viewport"
+    />
+    <link
+      href="./static/css/swiper-bundle.min.css"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <%= require('../common/tpl/headerLink.tpl') %>
+  </head>
+
+  <body>
+    <%= require('../common/tpl/header.tpl') %>
+    
+    <div class="main">
+      <div class="one">
+        <div class="h3">企业文化</div>
+        <div class="chooseType">
+          <span class="oneTit btn2 ckTit h5R">使命</span>
+          <span class="h5R">/</span>
+          <span class="h5R oneTit btn2">核心价值观</span>
+          <span class="h5R">/</span>
+          <span class="h5R oneTit btn2">愿景</span>
+        </div>
+        <div class="swiperDiv">
+          <div class="masterDiv masterShow">
+            <div class="swiper masterSwiper1">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                  <img class="lazy" data-src="./static/images/about/one1.jpg" data-srcM="./static/images/about/one1.jpg" alt="" />
+                  <div class="h4R">成为新能源技术领先的国际企业，具有创新能力、竞争优势和国际影响力</div>
+                </div>
+                <!-- 多个直接复制添加swiper-slide -->
+                <div class="swiper-slide">
+                  <img class="lazy" data-src="./static/images/about/one1.jpg" data-srcM="./static/images/about/one1.jpg" alt="" />
+                    <div class="h4R">成为新能源技术领先的国际企业，具有创新能力、竞争优势和国际影响力</div>
+                </div>
+              </div>
+              <!-- 如果需要导航按钮 -->
+              <div class="btn-prev btn-prevP1"><span class="icon iconfont icon-jiantou"></span></div>
+              <div class="btn-next btn-nextP1"><span class="icon iconfont icon-jiantou"></span></div>
+            </div>
+            <!-- <a href="" class="btn btnBlack">查看更多</a> -->
+          </div>
+          <div class="masterDiv">
+            <div class="swiper masterSwiper2">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                  <img class="lazy" data-src="./static/images/about/one1.jpg" data-srcM="./static/images/about/one1.jpg" alt="" />
+                  <div class="h4R">成为新能源技术领先的国际企业，具有创新能力、竞争优势和国际影响力</div>
+                </div>
+                <!-- 多个直接复制添加swiper-slide -->
+                <div class="swiper-slide">
+                  <img class="lazy" data-src="./static/images/about/one1.jpg" data-srcM="./static/images/about/one1.jpg" alt="" />
+                    <div class="h4R">成为新能源技术领先的国际企业，具有创新能力、竞争优势和国际影响力</div>
+                </div>
+              </div>
+              <!-- 如果需要导航按钮 -->
+              <div class="btn-prev btn-prevP2"><span class="icon iconfont icon-jiantou"></span></div>
+              <div class="btn-next btn-nextP2"><span class="icon iconfont icon-jiantou"></span></div>
+            </div>
+            <!-- <a href="" class="btn btnBlack">查看更多</a> -->
+          </div>
+          <div class="masterDiv">
+            <div class="swiper masterSwiper3">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                  <img class="lazy" data-src="./static/images/about/one1.jpg" data-srcM="./static/images/about/one1.jpg" alt="" />
+                  <div class="h4R">成为新能源技术领先的国际企业，具有创新能力、竞争优势和国际影响力</div>
+                </div>
+                <!-- 多个直接复制添加swiper-slide -->
+                <div class="swiper-slide">
+                  <img class="lazy" data-src="./static/images/about/one1.jpg" data-srcM="./static/images/about/one1.jpg" alt="" />
+                  <div class="h4R">成为新能源技术领先的国际企业，具有创新能力、竞争优势和国际影响力</div>
+                </div>
+              </div>
+              <!-- 如果需要导航按钮 -->
+              <div class="btn-prev btn-prevP3"><span class="icon iconfont icon-jiantou"></span></div>
+              <div class="btn-next btn-nextP3"><span class="icon iconfont icon-jiantou"></span></div>
+            </div>
+            <!-- <a href="" class="btn btnBlack">查看更多</a> -->
+          </div>
+        </div>
+
+      </div>
+      <div class="two" id="about1">
+        <div class="h3">品牌故事</div>
+        <div class="swiper twoSwiper">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <img class="lazy" data-src="./static/images/about/two1.jpg" data-srcM="./static/images/about/two1.jpg" alt="" />
+              <div class="swTxt">
+                <div class="h4">零碳卡文</div>
+                <div class="h6R">我们专注打造零碳产品和方案，让低碳惠及每一个人。</div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <img class="lazy" data-src="./static/images/about/two1.jpg" data-srcM="./static/images/about/two1.jpg" alt="" />
+              <div class="swTxt">
+                <div class="h4">科技卡文</div>
+                <div class="h6R">我们坚信科技成就生态之美，追求创造超客户预期的价值。</div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <img class="lazy" data-src="./static/images/about/two1.jpg" data-srcM="./static/images/about/two1.jpg" alt="" />
+              <div class="swTxt">
+                <div class="h4">生态卡文</div>
+                <div class="h6R">我们与合作伙伴是一体，共同打造具有革新意义的商业模式。</div>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <img class="lazy" data-src="./static/images/about/two1.jpg" data-srcM="./static/images/about/two1.jpg" alt="" />
+              <div class="swTxt">
+                <div class="h4">零碳卡文</div>
+                <div class="h6R">我们专注打造零碳产品和方案，让低碳惠及每一个人。</div>
+              </div>
+            </div>
+          </div>
+          <!-- 如果需要导航按钮 -->
+          <div class="btn-prev btn-prevP4"><span class="icon iconfont icon-jiantou"></span></div>
+          <div class="btn-next btn-nextP4"><span class="icon iconfont icon-jiantou"></span></div>
+        </div>
+      </div>
+      <div class="three">
+        <div class="h3">合作伙伴</div>
+        <div class="imgs">
+          <img class="lazy" data-src="./static/images/about/three.jpg" data-srcM="./static/images/about/threem.jpg" alt="" />
+        </div>
+      </div>
+      <div class="careersType" id="about2">
+        <div class="h3">可持续发展</div>
+        <div class="typeCon">
+            <div class="infoul">
+              <div class="infoLi">
+                      <div class="liTitle">
+                        <div class="h4R liTit">
+                          <div class="wow moveUp liTitMove" data-wow-delay="0.2s">
+                            <div>绿色能源解决方案</div>
+                          </div>
+                        </div>
+                        <div class="btn"><div class="btnjbg"></div></div>
+                      </div>
+                      <div class="infoSonLi">
+                        <div class="h6R">
+                          <div>我们建设绿色供应链体系，坚持使用可持续材料和环保工艺，实现资源的高效利用和循环再生，降低能源消耗和排放。</div>
+                        </div>
+                    </div>
+              </div>
+              <div class="infoLi">
+                      <div class="liTitle">
+                        <div class="h4R liTit">
+                          <div class="wow moveUp liTitMove" data-wow-delay="0.2s">
+                            <div>绿色供应链体系</div>
+                          </div>
+                        </div>
+                        <div class="btn"><div class="btnjbg"></div></div>
+                      </div>
+                      <div class="infoSonLi">
+                        <div class="h6R">
+                          <div>我们建设绿色供应链体系，坚持使用可持续材料和环保工艺，实现资源的高效利用和循环再生，降低能源消耗和排放。</div>
+                        </div>
+                    </div>
+              </div>
+              <div class="infoLi">
+                      <div class="liTitle">
+                        <div class="h4R liTit">
+                          <div class="wow moveUp liTitMove" data-wow-delay="0.2s">
+                            <div>绿色能源生态圈</div>
+                          </div>
+                        </div>
+                        <div class="btn"><div class="btnjbg"></div></div>
+                      </div>
+                      <div class="infoSonLi">
+                        <div class="h6R">
+                          <div>我们建设绿色供应链体系，坚持使用可持续材料和环保工艺，实现资源的高效利用和循环再生，降低能源消耗和排放。</div>
+                        </div>
+                    </div>
+              </div>
+              <div class="infoLi">
+                      <div class="liTitle">
+                        <div class="h4R liTit">
+                          <div class="wow moveUp liTitMove" data-wow-delay="0.2s">
+                            <div>碳资产管理</div>
+                          </div>
+                        </div>
+                        <div class="btn"><div class="btnjbg"></div></div>
+                      </div>
+                      <div class="infoSonLi">
+                        <div class="h6R">
+                          <div>我们建设绿色供应链体系，坚持使用可持续材料和环保工艺，实现资源的高效利用和循环再生，降低能源消耗和排放。</div>
+                        </div>
+                    </div>
+              </div>
+            </div>
+        </div>
+      </div>
+      <div class="five" id="about3">
+        <img class="lazy" data-src="./static/images/about/five.jpg" data-srcM="./static/images/about/fivem.jpg" alt="" />
+        <div class="fiveText">
+          <div class="h3">经销商加盟</div>
+          <div class="h6R">我们诚挚邀请您成为我们的经销商加盟伙伴，<br>期待您的加入，让我们一起携手开创更加光明的明天！</div>
+          <div class="h4R"><span class="iconfont icon-dianhua"></span>010-69756927</div>
+        </div>
+      </div>
+      <div class="six" id="about4">
+        <div class="h3">联系我们</div>
+        <div class="h6R">您可以通过以下方式与我们取得联系，期待与您的进一步沟通与合作，感谢您对我们的信任与支持！</div>
+        <div class="sixCon">
+          <div>
+            <div><span class="iconfont icon-dianhua"></span></div>
+            <div class="h6R">010-69756927</div>
+          </div>
+          <div>
+            <div><span class="iconfont icon-dadian-1"></span></div>
+            <div class="h6R">北京市昌平区未来科学城<br>南区英才南一街5号院2号楼9层901</div>
+          </div>
+          <div>
+            <div><span class="iconfont icon-youjian"></span></div>
+            <div class="h6R">chenliang27@foton.com.cn</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <%= require('../common/tpl/footer.tpl') %>
+    <%= require('../common/tpl/bottomBar.tpl') %>
+  </body>
+</html>

src/pages/about/index.js

@@ -0,0 +1,15 @@
+import "./../common/css/common.less";
+import "./index.less";
+import vhCheck from "vh-check"; //移动端浏览器100vh高度不一致
+import App from './App.js';
+
+// swiper的css目前环境解析不出来，放static下，不走webpack 
+//import 'swiper/swiper-bundle.css';
+
+vhCheck();
+//禁止浏览器刷新后回到上一个页面滚动位置
+if ('scrollRestoration' in history) {
+    history.scrollRestoration = 'manual';
+}
+
+new App();

src/pages/about/index.less

@@ -0,0 +1,573 @@
+
+//pc端样式
+.main {
+    width: 100%;
+    max-width: 1920px;
+    margin: 0 auto;
+}
+
+.one{
+  width: 100%;
+  max-width: 1720px;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 190px;
+  padding-bottom: 120px;
+  .chooseType{
+    display: flex;
+    justify-content: center;
+    margin-top: 54px;
+    margin-bottom: 40px;
+    .oneTit{
+      cursor: pointer;
+      padding: 0 50px;
+    }
+    .ckTit{
+      color: #48a038;
+    }
+  }
+  .swiperDiv{
+    width: 100%;
+    .masterDiv{
+      width: 100%;
+      display: none;
+    }
+    .masterShow{
+      display: block;
+    }
+    img{
+      width: 100%;
+      height: auto;
+    }
+    .btn-prev,.btn-next{
+      position: absolute;
+      top: 50%;
+      margin-top: -22px;
+      width: 44px;
+      height: 44px;
+      border: 1px solid #fff;
+      z-index: 2;
+      text-align: center;
+      color: #fff;
+      background: transparent;
+      transition: all .3s ease-in-out;
+      cursor: pointer;
+      span{
+        font-size: 36px;
+        display: inline-block;
+        transform: rotate(90deg);
+        line-height: 44px;
+
+      }
+      &:hover{
+        background: #48a038;
+        border-color: #48a038;
+      }
+    }
+    .btn-prev{
+      left: 40px;
+      transform: rotate(-180deg);
+    }
+    .btn-next{
+      right: 40px;
+    }
+    .swiper-button-disabled{
+      cursor: no-drop;
+      background: transparent;
+      color: #979292;
+      border-color: #979292;
+      &:hover{
+        background: transparent;
+        border-color: #979292;
+        color: #979292;
+      }
+    }
+    .btn{
+      margin-top: 90px;
+    }
+    .swiper-slide{
+      .h4R{
+        color: #ffffff;
+        position: absolute;
+        bottom: 58px;
+        left: 0px;
+        width: 100%;
+      }
+    }
+  }
+}
+.two{
+  width: 100%;
+  max-width: 1720px;
+  margin: 0 auto;
+  text-align: center;
+  padding-bottom: 260px;
+  .swiper{
+    margin-top: 50px;
+  }
+  .swiper-slide{
+    
+    img{
+      width: 100%;
+      display: block;
+    }
+    .swTxt{
+      position: absolute;
+      bottom: 0px;
+      left: 0px;
+      width: 100%;
+      padding: 36px 60px;
+      width: 100%;
+      box-sizing: border-box;
+      text-align: left;
+      color: #fff;
+      .h4{
+        margin-bottom: 15px;
+      }
+    }
+  }
+  .btn-prev,.btn-next{
+    position: absolute;
+    top: 50%;
+    margin-top: -22px;
+    width: 44px;
+    height: 44px;
+    border: 1px solid #000;
+    z-index: 2;
+    text-align: center;
+    color: #000;
+    background: transparent;
+    transition: all .3s ease-in-out;
+    cursor: pointer;
+    span{
+      font-size: 36px;
+      display: inline-block;
+      transform: rotate(90deg);
+      line-height: 44px;
+
+    }
+    &:hover{
+      background: #48a038;
+      border-color: #48a038;
+      color: #fff;
+    }
+  }
+  .btn-prev{
+    left: 40px;
+    transform: rotate(-180deg);
+  }
+  .btn-next{
+    right: 40px;
+  }
+  .swiper-button-disabled{
+    cursor: no-drop;
+    background: transparent;
+    color: #979292;
+    border-color: #979292;
+    &:hover{
+      background: transparent;
+      border-color: #979292;
+      color: #979292;
+    }
+  }
+}
+.three{
+  width: 100%;
+  max-width: 1720px;
+  margin: 0 auto;
+  text-align: center;
+  padding-bottom: 150px;
+  .imgs{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 50px;
+    img{
+      width: 100%;
+      display: block;
+    }
+  }
+}
+.careersType{
+  width: 100%;
+  text-align: center;
+  background: rgba(249, 249, 249, 1);
+  padding: 120px 0px;
+  .typeCon{
+      width: 100%;
+      max-width: 1300px;
+      margin: 0 auto;
+      text-align: left;
+      margin-top: 30px;
+      .infoul{
+          width: 100%;
+          .infoLi{
+              padding: 60px 0;
+              border-bottom:1px solid #9FA3A5;
+              width: 100%;
+              .liTitle{
+                  display: flex;
+                  width: 100%;
+                  justify-content: space-between;
+                  cursor: pointer;
+                  .liTit{
+                      width: calc(100% - 100px);
+                      overflow: hidden;
+                      display: flex;
+                      flex-wrap: wrap;
+                      &>div{
+                          width: 100%;
+                      }
+                  }
+                  .btn{
+                      width: 40px;
+                      height: 40px;
+                      display: flex;
+                      align-items: center;
+                      justify-content: center;
+                      background-color: #B2B5B7;
+                      color: #fff;
+                      cursor: pointer;
+                      transition: all .3s;
+                      position: relative;
+                      transform: scale(1);
+                      border: 0px solid #48a038;
+                      &::before{
+                          content: '';
+                          width: 10px;
+                          height: 2px;
+                          background-color: #fff;
+                          z-index: 2;
+                      }
+                      &::after{
+                          content: '';
+                          width: 2px;
+                          height: 10px;
+                          background-color: #fff;
+                          left: 50%;
+                          position: absolute;
+                          top: 50%;
+                          transform: translate(-50%, -50%);
+                      }
+                      .btnjbg{
+                          position: absolute;
+                          bottom: 0px;
+                          left: -1px;
+                          right: 0px;
+                          top: 0px;
+                          background-color: #48a038;
+                          -webkit-clip-path: inset(100%);
+                          clip-path: inset(100%);
+                          transition: clip-path .65s cubic-bezier(.19,1,.22,1), -webkit-clip-path .65s cubic-bezier(.19,1,.22,1);
+                      }
+                      &:hover{
+                        border: 0px solid #48a038;
+                      }
+                  }
+              }
+              
+              .infoSonLi{
+                  width: 100%;
+                  height: 0px;
+                  box-sizing: border-box;
+                  overflow: hidden;
+                  border-bottom: 1px dashed #000000;
+                  margin-bottom: 95px;
+                  // transition: all 0.3s ease-in-out;
+                  margin-top: 0px;
+                  
+                  &:last-child{
+                      border-bottom: 0px;
+                      margin-bottom: 0px;
+                      
+                  }
+                  .h4{
+                      margin-top: 80px;
+                      font-size: 28px;
+                      &:first-child{
+                          margin-top: 0;
+                          color: #0056a7;
+                      }
+                  }
+                  .h5R{
+                      margin-top: 40px;
+                  }
+                  .text{
+                      color: #9fa3a5;
+                  }
+                  .btn2{
+                      margin: 130px 0 140px;
+                  }
+              }
+          }
+          .infoLiShow{
+              .liTitle{
+                  .btn{
+                      // background-color: #0054A7;
+                      &::before{
+                          content: '';
+                          width: 10px;
+                          height: 2px;
+                          background-color: #fff;  
+                      }
+                      &::after{
+                          display: none;
+                      }
+                      .btnjbg{
+                        -webkit-clip-path: inset(0);
+                        clip-path: inset(0);
+                      }
+                  }
+              }
+              // @-webkit-keyframes textDown{
+              //     0%{height: 0%;}
+              //     100%{height: 100%;}
+              // }
+              // @keyframes textDown{
+              //     0%{height: 0%;}
+              //     100%{height: 100%;}
+              // }
+              
+              .infoSonLi{
+                // padding-top: 60px;
+              }
+          }
+      }
+  }
+}
+.five{
+  width: 100%;
+  max-width: 1720px;
+  margin: 0 auto;
+  text-align: center;
+  position: relative;
+  color: #ffffff;
+  img{
+    width: 100%;
+    display: block;
+  }
+  .fiveText{
+    position: absolute;
+    width: 100%;
+    top: 0px;
+    left: 0px;
+    padding-top: 75px;
+    .h6R{
+      margin-top: 26px;
+      margin-bottom: 35px;
+      br{
+        display: none;
+      }
+    }
+    .h4R{
+      span{
+        font-size: 24px;
+        margin-right: 10px;
+      }
+    }
+    
+  }
+}
+.six{
+  width: 100%;
+  max-width: 1300px;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 120px;
+  .h6R{
+    margin-top: 30px;
+    margin-bottom: 80px;
+  }
+  .sixCon{
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    span{
+      display: inline-block;
+      padding-bottom: 30px;
+      font-size: 38px;
+      border-bottom: 1px solid #C9C9C9;
+      color: #707271;
+    }
+  }
+}
+
+
+@media screen and (min-width: 801px) and (max-width: 1400px) {
+  .main{
+      padding: 0px 20px;
+      box-sizing: border-box;
+      .careersType{
+          .typeCon,.h2{
+              padding-left: 20px;
+          padding-right: 20px;
+          box-sizing: border-box;
+          }
+          
+      }
+  }
+}
+.mTxt{
+  display: none;
+}
+//移动端样式
+@media screen and (max-width:800px) {
+  .pcTxt{
+    display: none;
+  }
+  .mTxt{
+    display: block;
+  }
+  .one{
+    padding-top: 110px;
+    padding-bottom: 110px;
+    .chooseType{
+      margin-top: 30px;
+      margin-bottom: 40px;
+      .oneTit{
+        padding: 0 21px;
+      }
+    }
+    .swiperDiv{
+      padding: 0 15px;
+      box-sizing: border-box;
+      .btn-prev,.btn-next{
+        margin-top: -12px;
+        width: 24px;
+        height: 24px;
+        display: none;
+        span{
+          font-size: 22px;
+          line-height: 24px;
+        }
+      }
+      .swiper-slide .h4R{
+        color: #333333;
+        position: relative;
+        bottom: auto;
+        left: auto;
+        width: 100%;
+        margin-top: 20px;
+        text-align: left;
+      }
+    }
+  }
+  .two{
+    padding-bottom: 110px;
+    .swiper{
+      margin-top: 30px;
+      .btn-prev,.btn-next{
+        display: none;
+      }
+    }
+    .swiper-slide{
+      width: 75%;
+      .swTxt{
+        padding: 30px 20px;
+        .h4{
+          margin-bottom: 5px;
+        }
+      }
+    }
+    
+  }
+  .three{
+    padding: 0px 15px 110px;
+    box-sizing: border-box;
+    .imgs{
+      margin-top: 40px;
+    }
+  }
+
+  .careersType{
+    padding: 110px 0px;
+    .typeCon{
+        padding: 0px 15px 0px;
+        margin-top: 10px;
+        box-sizing: border-box;
+        .infoul{
+            .infoLi{
+                padding: 30px 0;
+                .liTitle{
+                    align-items: center;
+                    .liTit{
+                        height: auto;
+                        line-height: 25px;
+                        width: calc(100% - 40px);
+                        overflow: initial;
+                    }
+                    .btn{
+                        width: 25px;
+                        height: 25px;
+                        left: 0px;
+                        .btnjbg{
+                            left: 0px;
+                        }
+                        &::before{
+                            content: '';
+                            width: 8px;
+                            height: 2px;
+                        }
+                        &::after{
+                            content: '';
+                            width: 2px;
+                            height: 8px;
+                        }
+                    }
+                }
+                .infoSonLi{
+                    margin-bottom: 75px;
+                    .text{
+                        margin-bottom: 0px;
+                    }
+                }
+            }
+        }
+    }
+}
+  .five{
+    .fiveText{
+      padding-top: 52px;
+      .h6R{
+        margin-top: 9px;
+        margin-bottom: 24px;
+        line-height: 27px;
+        br{
+          display: block;
+        }
+      }
+      .h4R{
+        font-size: 14px;
+        span{
+          font-size: 19px;
+          margin-right: 10px;
+        }
+      }
+    }
+  }
+  .six{
+    padding: 110px 15px;
+    box-sizing: border-box;
+    .h6R{
+      margin-top: 25px;
+      margin-bottom: 0px;
+    }
+    .sixCon{
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      flex-direction: column;
+      align-items: center;
+      &>div{
+        margin-top: 50px;
+      }
+      span{
+        font-size: 19px;
+        padding-bottom: 15px;
+      }
+      .h6R{
+        margin-top: 16px;
+      }
+    }
+  }
+
+}

src/pages/common/components/Select.css

@@ -0,0 +1,79 @@
+.select-title {
+    padding-left: 10px;
+    width: calc(100%-10px);
+    height: 30px;
+    line-height: 30px;
+    color: #fff;
+    border-bottom: solid 1px #5B5B5B;
+}
+.select-title::after{
+    content: "";
+    display: block;
+    float: right;
+    width: 20px;
+    height: 100%;
+    /* background-color: aqua; */
+    background-image: url("./icon.svg");
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: 50% 50%;
+}
+.select-title-open::after{
+    transform: scaleY(-1);
+}
+
+.select-dropList {
+    position: absolute;
+    top: 40px;
+    margin-top: 1px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    width: 100%;
+    height: 250px;
+    max-height: 400px;
+    overflow: hidden;
+    overflow-y: auto;
+    background-color: #181818;
+    z-index: 99;
+    transition: all 0.3s ease 0s;
+}
+
+.select-dropList::-webkit-scrollbar {
+    width: 3px;
+    /* background-color: #666; */
+}
+
+.select-dropList::-webkit-scrollbar-thumb {
+    background-color: #b5b5b5;
+}
+
+.select-dropList-close {
+    visibility: hidden;
+    opacity: 0;
+    transform: translateY(-40px);
+}
+
+.select-dropList-open {
+    visibility: visible;
+    opacity: 1;
+    transform: translateY(0px);
+}
+
+.select-listItem {
+    margin-left: 20px;
+    color: #999999;
+    font-size: 16px;
+    line-height: 30px;
+    cursor: pointer;
+}
+
+
+.select-listItem:hover {
+    color: #fff;
+}
+@media screen and (max-width:800px) {
+    .select-listItem{
+        font-size:12px;
+    }
+    
+}

src/pages/common/components/Select.js

@@ -0,0 +1,125 @@
+import "./Select.css";
+export default class Select {
+  /**
+   * @param {HTMLElement} dom 初始化组件的容器
+   * @param {Object[]}  data -  下拉列表数组
+   * @param {string} data[].value - 列表实际值
+   * @param {string} data[].label - 列表显示值
+   * @param {string} [defaultVal] - 默认标题
+   */
+  constructor(dom, data, defaultVal) {
+    this.dom = dom;
+    this.data = data;
+    this.defaultVal = defaultVal || "-请选择-";
+    this.createDom();
+  }
+
+  createDom() {
+    let title = document.createElement("div");
+    title.className = "select-title";
+    title.innerText = this.defaultVal;
+    this.dom.appendChild(title);
+    this.title = title;
+
+    //
+    let dropList = document.createElement("div");
+    dropList.className = "select-dropList";
+    dropList.classList.add("select-dropList-close");
+    dropList.classList.add("swiper-no-swiping");
+    dropList.dataset.flag = 0;
+    this.dom.appendChild(dropList);
+    this.dropList = dropList;
+    //
+    let data = this.data;
+    this.setData(data);
+    //
+    title.addEventListener("click", (e) => {
+      console.log(dropList.dataset);
+      if (this.data.length == 0) return;
+      if (dropList.dataset.flag == 0) {
+        this.open();
+      } else {
+        this.close();
+      }
+    });
+    //
+    dropList.addEventListener("click", (e) => {
+      this.close();
+      if (e.target.classList.contains("select-listItem")) {
+        let indexId = e.target.dataset.indexId;
+        //
+        this.toSelect(indexId);
+      }
+    });
+    //
+    document.addEventListener("click", (e) => {
+      //点击组件外部
+      if (!this.dom.contains(e.target)) {
+        this.close();
+      } else {
+        //console.log("---------");
+      }
+    });
+  }
+  //设置数据
+  setData(data) {
+    //清空容器
+    while (this.dropList.firstChild) {
+      this.dropList.removeChild(this.dropList.lastChild);
+    }
+    //
+    this.data = data;
+    data.forEach((item, index) => {
+      let listItem = document.createElement("div");
+      listItem.dataset.value = item["value"];
+      listItem.dataset.label = item["label"];
+      listItem.dataset.indexId = index;
+      listItem.innerText = item["label"];
+      listItem.className = "select-listItem";
+      this.dropList.appendChild(listItem);
+    });
+  }
+
+  reset(isClearData) {
+    this.title = this.defaultVal;
+    if (isClearData) {
+      this.data = [];
+      while (this.dropList.firstChild) {
+        this.dropList.removeChild(this.dropList.lastChild);
+      }
+    }
+  }
+
+  //选择某一项，并对外派发事件
+  toSelect(indexId) {
+    console.log(this.data, indexId, "fffffffffffffff");
+    let selectedData = this.data[indexId];
+    this.title.innerText = this.data[indexId].label;
+    this.sendEvent(selectedData);
+  }
+
+  open() {
+    this.dropList.dataset.flag = 1;
+    this.title.classList.add("select-title-open");
+    this.dropList.classList.remove("select-dropList-close");
+    this.dropList.classList.add("select-dropList-open");
+  }
+
+  close() {
+    this.dropList.dataset.flag = 0;
+    if (this.title.classList) {
+      this.title.classList.remove("select-title-open");
+    }
+    this.dropList.classList.remove("select-dropList-open");
+    this.dropList.classList.add("select-dropList-close");
+  }
+
+  sendEvent(data) {
+    let event = new CustomEvent("change", {
+      detail: {
+        value: data,
+      },
+    });
+    this.dom.dispatchEvent(event);
+  }
+}

src/pages/common/components/icon.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1679477930257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2765" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M917.284001 297.722752c-5.406127-5.437849-13.06762-8.396227-21.479197-8.396227-9.611915 0-18.953677 3.844561-25.713638 10.543124L511.980046 659.992589 153.873018 299.91672c-6.729262-6.745634-16.072047-10.619872-25.654286-10.619872-8.470929 0-16.131399 2.989077-21.598924 8.457626-12.301164 12.435217-11.32493 33.69031 2.192945 47.312562l376.764969 378.821815c6.758937 6.788613 15.860223 10.723226 25.052582 10.8143l3.425006 0c8.981559-0.301875 17.814738-4.205788 24.423249-10.8143l376.733247-378.852514C928.728658 331.382363 929.690566 310.113967 917.284001 297.722752" fill="#666" p-id="2766"></path></svg>

src/pages/common/js/Common.js

@@ -0,0 +1,220 @@
+/* 
+页面公共部分
+包含头部导航、页脚等
+ */
+
+import { isMobile } from "./utils";
+import gsap from 'gsap'
+import LocomotiveScroll from 'locomotive-scroll';
+export default class Common {
+  /* 
+    mainDom - 菜单展开时，需要往下移动的dom节点
+    curNavId - 当前栏目id,控制哪个栏目默认高亮。首页为：-1
+     */
+  constructor(mainDom, curNavId) {
+    this.mainDom = mainDom;
+    this.curNavId = curNavId;
+    this.isMobile = isMobile();
+    //判断是否移动端
+    if (this.isMobile) {
+      this.initHeaderM();
+      this.initFooterM();
+    } else {
+      this.headerMenu();
+    }
+    new WOW().init();
+    
+    // let goTop = document.querySelector(".goTopBtn");
+    // const scroll = new LocomotiveScroll();
+    // goTop.addEventListener("click", (e) => {
+    //   console.log('click');
+      
+    //   scroll.scrollTo(0);
+    //   console.log('click2');
+    // });
+    // window.requestUrl = 'https://www.foton.com.cn';
+    this.textAni();
+    
+  }
+  textAni(){
+    let mod = this.isMobile;
+    let texts=document.querySelectorAll(".aniTxtUp");
+    texts.forEach(text=>{
+      let txt=text.innerText;
+      let txtDiv=txt.split(' ');
+      text.innerHTML='';
+      let textNow='';
+      let delTime=0;
+
+      txtDiv.forEach(itemTxt=>{
+        if(mod){
+          textNow+=`<div class="wow wordInUp" data-wow-delay="`+delTime.toFixed(2)+`s">${itemTxt}</div> `;
+          delTime+=0.1;
+        }else{
+          textNow+=`<div>`;
+          let txtArr=itemTxt.split('');
+          txtArr.forEach(item=>{
+            // if(item===' '){
+            //   item='&nbsp;';
+            // }
+            textNow+=`<span class="wow wordInUp" data-wow-delay="`+delTime.toFixed(2)+`s">${item}</span>`;
+            delTime+=0.02;
+          })
+          textNow+=`</div> `
+        }
+        
+        
+      })
+      text.innerHTML=textNow;
+      
+      
+      
+    })
+  }
+  //pc头部菜单
+  headerMenu() {
+    // 获取所有匹配的元素
+    let menuItems = document.querySelectorAll(".menuOne");
+    let navItems = document.querySelectorAll(".menu .menuOne");
+
+    let logo = document.querySelector(".headerPC .logo");
+    logo.addEventListener("click", (e) => {
+      window.location.href ="/index.html"
+    });
+    
+    //设置一级菜单高亮
+    let curNavId=this.curNavId;
+    navItems.forEach((item, index) => {
+      item.dataset.id = index;
+      if (curNavId == index) {
+        item.classList.add("menuClicked");
+      }
+    });
+
+    // 为每个元素添加 mouseenter 事件监听器
+    menuItems.forEach(function(item) {
+      try {
+        item.addEventListener("mouseenter", (e) => {
+          let targetDom = item.querySelector(".menuSon");
+          if (targetDom?.classList?.contains("open")) {
+            console.log("元素有 open 类");
+          } else {
+            if(targetDom){targetDom.classList.add("open");
+            gsap.fromTo(targetDom, { yPercent: -10,opacity:0}, { yPercent: 0,opacity:1});}
+          }
+        });
+          
+          item.addEventListener("mouseleave", (e) => {
+            let targetDom = item.querySelector(".menuSon");
+          if (targetDom?.classList?.contains("open")) {
+            gsap.to(targetDom, {
+              yPercent: -10,opacity:0,
+              onComplete: () => {
+                targetDom.classList.remove("open");
+              }
+            })
+          } 
+          
+        });
+      } catch (error) {}
+    });
+    //向下滚动隐藏菜单，向上滚动显示菜单
+    // 获取滚动条位置并更新显示
+    let scrollyOld=0;
+    let headerDom = document.querySelector("header");
+    let careersType = document.querySelector(".careersType .titleBg");
+    let isMobile=this.isMobile;
+    function updateScrollChange() {
+      try {
+        
+        let scrollY = window.scrollY;
+        if(scrollyOld<scrollY&&!headerDom.classList.contains("hideHeader")){
+          headerDom.classList.add("hideHeader");
+          careersType.classList.remove("topType");
+        }else if(scrollyOld>scrollY&&headerDom.classList.contains("hideHeader")){
+          headerDom.classList.remove("hideHeader");
+          if(careersType&&!isMobile){
+            careersType.classList.add("topType");
+          }
+        }
+        scrollyOld=scrollY;
+      } catch (error) {}
+    }
+  
+      
+  // 添加滚动事件监听器
+  window.addEventListener('scroll', updateScrollChange);
+  
+    
+  }
+  
+  //移动端头部
+  initHeaderM() {
+    let navFlagBtn = document.querySelector(".headerMobile .navFlagBtn");
+    let navFlag = document.querySelector(".headerMobile .navFlag");
+    let navMenu = document.querySelector(".headerMobile .navMenu");
+    let logo = document.querySelector(".headerMobile .logo");
+    logo.addEventListener("click", (e) => {
+      window.location.href ="/index.html"
+    });
+
+    navMenu.addEventListener("click", (e) => {
+      console.log("click");
+      navFlagBtn.click();
+    });
+    
+    //0-关闭状态、1-为打开状态
+    navFlagBtn.addEventListener("click", (e) => {
+      let flag = parseInt(navFlagBtn.dataset.flag) || 0;
+      if (flag == 0) {
+        navFlagBtn.dataset.flag = 1;
+        navFlagBtn
+          .querySelector(".lineTop")
+          .classList.add("arrowDirectionDown");
+        navFlagBtn
+          .querySelector(".lineBottom")
+          .classList.add("arrowDirectionUp");
+        navFlagBtn
+          .querySelector(".lineCenter")
+          .classList.add("arrowDirectionCenter");
+        navFlag.classList.add("FlagOpen");
+        navFlagBtn.classList.add("btnOpen");
+        gsap.fromTo(navFlag, { xPercent: 100,opacity:0}, { xPercent: 0,opacity:1});
+      } else {
+        navFlagBtn.dataset.flag = 0;
+        navFlagBtn
+          .querySelector(".lineTop")
+          .classList.remove("arrowDirectionDown");
+        navFlagBtn
+          .querySelector(".lineBottom")
+          .classList.remove("arrowDirectionUp");
+        navFlagBtn
+          .querySelector(".lineCenter")
+          .classList.remove("arrowDirectionCenter");
+        gsap.to(navFlag, {
+            xPercent: 100,opacity:0,
+            onComplete: () => {
+              navFlag.classList.remove("FlagOpen");
+            }
+          });
+          navFlagBtn.classList.remove("btnOpen");
+      }
+    });
+  }
+
+  initFooterM(){
+    let menuItems = document.querySelectorAll(".footerClick");
+    menuItems.forEach(function(item) {
+        let targetDom = item.querySelector(".h7");
+        targetDom.setAttribute("href", "javascript:void(0)");
+        item.addEventListener("click", (e) => {
+          if (item?.classList?.contains("ckShow")) {
+            item.classList.remove("ckShow");
+          } else {
+           item.classList.add("ckShow");
+          }
+        });
+    });
+  }
+  
+}

src/pages/common/js/utils.js

@@ -0,0 +1,113 @@
+function isMobile() {
+    
+    let isMobile =  /Android|webOS|iPhone|iPad|iPod|BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(
+        navigator.userAgent
+    );
+    if(window.innerWidth < 1080)isMobile=true;
+    return isMobile
+}
+
+//判断元素是否在可视区
+function isInViePortOfOne(el) {
+    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+    const offsetTop = el.offsetTop
+    const scollTop = document.documentElement.scrollTop
+    const top = offsetTop - scollTop
+    return top <= viewPortHeight && top >= 0
+}
+
+// 滚动时动画动态显示  （动画类，触发时距离视口底部距离, 元素消失时距离视口距离）
+function scrollFun(elements, Bot_show, Top_disp, if_loop = true) {
+    let doms = document.querySelectorAll(elements)
+    window.addEventListener('scroll', debounce(callback, 200))
+
+    function callback(params) {
+        doms.forEach((dom) => {
+            //视口高度
+            const viewPortHeight =
+                window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+            //元素在页面中位置
+            const offsetTop = getEleTop(dom)
+            //页面滚动高度
+            const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+            //元素到视口顶部的距离;
+            const top = offsetTop - scrollTop
+            // console.log(top, Top_disp)
+            if (top <= viewPortHeight - Bot_show && top >= Top_disp) {
+                dom.classList.add('ani-fadeIn')
+            } else if (if_loop) {
+                //dom.classList.remove('ani-fadeIn')
+            }
+        })
+    }
+    // 主动触发一次滚动事件
+    const scrollEvent = new Event('scroll')
+    window.dispatchEvent(scrollEvent)
+}
+
+// 滚动时动画动态显示  （动画类，触发时距离视口底部距离, 元素消失时距离视口距离）
+function scrollFun2(wrpDoms, setHeightDoms, Bot_show, Top_disp, posi) {
+    let wrp_Doms = document.querySelectorAll(wrpDoms)
+    let height_Doms = document.querySelectorAll(setHeightDoms)
+    // let scale_Doms = document.querySelectorAll(setScaleDoms)
+    // 初始化位置
+    wrp_Doms.forEach((dom, index) => {
+        if (posi[index]) {
+            dom.style.top = posi[index]['y'] + 'px'
+            dom.style.left = posi[index]['x'] + 'px'
+        } else {
+            // dom.style.opacity = 0
+        }
+    })
+    document.querySelector('.cirs2').style.opacity = '0'
+    window.addEventListener('scroll', debounce(callback, 200))
+
+    function callback(params) {
+        height_Doms.forEach((dom, index) => {
+            //视口高度
+            const viewPortHeight =
+                window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
+            //元素在页面中位置
+            const offsetTop = getEleTop(dom)
+            //页面滚动高度
+            const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
+            //元素到视口顶部的距离;
+            const top = offsetTop - scrollTop
+            // console.log(top, Top_disp)
+            if (top <= viewPortHeight - Bot_show && top >= Top_disp) {
+                dom.classList.add(posi[index]?.high ? 'rise_120' : 'rise_60')
+                dom.querySelector('.circle_big').classList.add('scale')
+            } else {
+                // dom.classList.remove('rise_120')
+                // dom.classList.remove('rise_60')
+            }
+        })
+    }
+    // 主动触发一次滚动事件
+    const scrollEvent = new Event('scroll')
+    window.dispatchEvent(scrollEvent)
+}
+
+// 获取面向document的绝对高度
+function getEleTop(dom) {
+    let top = dom.offsetTop
+    while (dom != document.body && dom.offsetParent) {
+        dom = dom.offsetParent
+        top += dom.offsetTop
+    }
+    return top
+}
+
+// 节流（单位时间执行一次）
+function debounce(fn, wait) {
+    let timer = null
+    return function (params) {
+        if (timer) return false
+        timer = setTimeout(() => {
+            fn()
+            timer = null
+        }, wait)
+    }
+}
+
+export { isMobile, scrollFun, scrollFun2 }

src/pages/common/tpl/footer.tpl

@@ -0,0 +1,67 @@
+<footer>
+    <div class="wow fadeIn footer">
+        <div class="footerClick">
+            <a class="h7" href="./news.html"><span>产品</span></a>
+            <span class="icon iconfont icon-arrow-right"></span>
+            <div class="footerShow show1"><a class="h7R" href="./news.html"><span>新能源整车</span></a>
+            <a class="h7R" href="./news.html#structure"><span>核心零部件</span></a>
+            <a class="h7R" href="./news.html#structure"><span>充电站</span></a>
+            <a class="h7R" href="./news.html#structure"><span>软件服务</span></a></div>
+        </div>
+        <div class="footerClick">
+            <a class="h7" href="./aboutUs.html"><span>解决方案</span></a>
+            <span class="icon iconfont icon-arrow-right"></span>
+            <div class="footerShow show2"><a class="h7R" href="./aboutUs.html#introduction"><span>能源管理方案</span></a>
+            <a class="h7R" href="./aboutUs.html#structure"><span>智慧能源管理体系</span></a>
+            <a class="h7R" href="./aboutUs.html#structure"><span>租贸业务管理方案</span></a>
+            <a class="h7R" href="./aboutUs.html#structure"><span>二手车解决方案</span></a></div>
+        </div>
+        <div class="footerClick">
+            <a class="h7" href="./serve.html"><span>服务</span></a>
+            <span class="icon iconfont icon-arrow-right"></span>
+            <div class="footerShow show3"><a class="h7R" href="./serve.html"><span>购车流程</span></a>
+            <a class="h7R" href="./serve.html#serve2"><span>门店地图</span></a>
+            <a class="h7R" href="./serve.html#serve3"><span>门店预约体验</span></a>
+            <a class="h7R" href="./serve.html#serve4"><span>服务体系</span></a>
+            <a class="h7R" href="./serve.html#serve5"><span>用户留言</span></a></div>
+        </div>
+        <div class="footerClick">
+            <a class="h7" href="./aboutUs.html"><span>新闻资讯</span></a>
+            <span class="icon iconfont icon-arrow-right"></span>
+            <div class="footerShow show4"><a class="h7R" href="./aboutUs.html#introduction"><span>公司新闻</span></a>
+            <a class="h7R" href="./aboutUs.html#structure"><span>行业新闻</span></a></div>
+        </div>
+        <div class="footerClick">
+            <a class="h7" href="./about.html"><span>关于卡文</span></a>
+            <span class="icon iconfont icon-arrow-right"></span>
+            <div class="footerShow show5"><a class="h7R" href="./about.html#about1"><span>品牌故事</span></a>
+            <a class="h7R" href="./about.html#about2"><span>可持续发展</span></a>
+            <a class="h7R" href="./about.html#about3"><span>经销商加盟</span></a>
+            <a class="h7R" href="./about.html#about4"><span>联系我们</span></a></div>
+        </div>
+    </div>
+    <div class="footerIcon">
+        <div><span class="icon iconfont icon-weixin"></span></div>
+        <div><span class="icon iconfont icon-douyin"></span></div>
+        <div><span class="icon iconfont icon-weibo"></span></div>
+        <div><span class="icon iconfont icon-kuaishou"></span></div>
+    </div>
+    <div class="footerText">法律声明 <span></span>隐私政策 <br>版权公告 Copyright © 2024 北京卡文新能源汽车有限公司　<br><a href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备2023038730号</a></div>
+    <!--<div class="goTop">
+        <div class="btn goTopBtn">
+                  <a href="javascript:void(0);">
+                    <div class="btnShow">
+                          <div class="btnMove">
+                            <div class="btnIcon"></div>
+                            <div class="btnIcon"></div>
+                          </div>
+                        </div>
+                  </a>
+                </div>
+    </div> -->
+</footer>
+<div class="chooseM">
+    <a href="">购车咨询</a>
+    <span></span>
+    <a href="./serveBooking.html">门店预约体验</a>
+</div>