first

1 year ago · f1ec699f7c
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 .DS_Store
 node_modules
 /dist


 # local env files
 .env.local
 .env.*.local

 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*

 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/.npmrc
+++ b/.npmrc
@@ -0,0 +1 @@
 shamefully-hoist=true
--- a/README.md
+++ b/README.md
@@ -0,0 +1,29 @@
 # data

 ## Project setup

 ```
 pnpm install
 ```

 ### Compiles and hot-reloads for development

 ```
 pnpm run serve
 ```

 ### Compiles and minifies for production

 ```
 pnpm run build
 ```

 ### Lints and fixes files

 ```
 pnpm run lint
 ```

 ### Customize configuration

 See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -0,0 +1,19 @@
 {
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
 }
--- a/package.json
+++ b/package.json
@@ -0,0 +1,45 @@
 {
  "name": "data",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "echarts": "^5.4.3",
    "socket.io-client": "2.4.0",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,17 @@
 <!DOCTYPE html>
 <html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.png">
    <title>缔智元数据看板</title>
  </head>
  <body>
    <noscript>
      <strong>当前浏览器不支持JavaScript，请更换浏览器。</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,30 @@
 <template>
  <div id="app">
    <HeadPage msg="Welcome to Your Vue.js App" />
  </div>
 </template>

 <script>
 import HeadPage from "./components/HeadPage.vue";

 export default {
  name: "App",
  components: {
    HeadPage,
  },
 };
 </script>

 <style>
 html {
  font-size: 71.75px;
 }
 body {
  margin: 0 !important;
 }
 /* #app {
  height: 100vh; 
 background-color: rgb(4, 18, 94); 
  overflow: hidden; 
 } */
 </style>
--- a/src/assets/images/bg.jpg
+++ b/src/assets/images/bg.jpg
--- a/src/assets/images/head.jpg
+++ b/src/assets/images/head.jpg
--- a/src/assets/images/head_bg.png
+++ b/src/assets/images/head_bg.png
--- a/src/assets/images/jt.png
+++ b/src/assets/images/jt.png
--- a/src/assets/images/lbx.png
+++ b/src/assets/images/lbx.png
--- a/src/assets/images/line.png
+++ b/src/assets/images/line.png
--- a/src/assets/images/loading.gif
+++ b/src/assets/images/loading.gif
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/images/map.png
+++ b/src/assets/images/map.png
--- a/src/assets/images/weather.png
+++ b/src/assets/images/weather.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HeadPage.vue
+++ b/src/components/HeadPage.vue
--- a/src/components/asd.vue
+++ b/src/components/asd.vue
--- a/src/components/dashboard/BarLineChart.vue
+++ b/src/components/dashboard/BarLineChart.vue
@@ -0,0 +1,240 @@
 <template>
  <div :class="className" :style="{ height: '250px', width: '100%' }" />
 </template>

 <script>
 import * as echarts from "echarts";
 import resize from "./mixins/resize";

 require("echarts/theme/macarons"); // echarts theme

 export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    X: {
      type: Array,
      default: () => {
        return [];
      },
    },
    sType: {
      type: String,
      default: "bar",
    },
    Y1: {
      type: Object,
      default: () => {
        return {};
      },
    },
    Y2: {
      type: Object,
      default: () => {
        return {};
      },
    },
    Xdata: {
      type: Array,
      default: () => {
        return [];
      },
    },
    data1: {
      type: Array,
      default: () => {
        return [];
      },
    },
    data2: {
      type: Array,
      default: () => {
        return [];
      },
    },
    barName: {
      type: String,
      default: "",
    },
    lineName: {
      type: String,
      default: "",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      dataX: [],
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        console.log(val);
        this.setOptions(val);
      },
    },
    data2: {
      deep: true,
      handler(val) {
        console.log(val);
        this.initChart();
      },
    },
    data1: {
      deep: true,
      handler(val) {
        console.log(val);
        this.initChart();
      },
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      console.log(expectedData, actualData);
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     saveAsImage: { show: true },
        //   },
        // },
        xAxis: [
          {
            type: "category",
            data: this.Xdata,
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#c5ccff", // 刻度线颜色
                width: 2, // 刻度线宽度
              },
            },
          },
        ],
        yAxis: [
          {
            axisLine: {
              lineStyle: {
                color: "#c5ccff",
                width: 2,
              },
            },
            type: "value",
            // name: this.lineName && this.barName ? this.barName : null,
            // min: this.Y1.min,
            // max: this.Y1.max,
            interval: this.Y1.interval,
            axisLabel: {
              formatter: `{value} ${this.Y1.formatter}`,
            },
            splitLine: {
              // 刻度线的样式
              lineStyle: {
                color: "rgba(200,200,200,0.5)",
              },
            },
          },
          {
            axisLine: {
              lineStyle: {
                color: "#c5ccff",
                width: 2,
              },
            },
            type: "value",
            // name: this.lineName && this.barName ? this.lineName : null,
            min: this.Y2.min,
            max: this.Y2.max,
            interval: this.Y2.interval,
            axisLabel: {
              formatter: `{value} ${this.Y2.formatter}`,
            },
          },
        ],
        series: [
          {
            name: this.barName,
            type: this.sType,
            tooltip: {
              valueFormatter: function (value) {
                return value;
              },
            },
            // 折线的样式
            lineStyle: {
              color: "rgba(255, 235, 123,1)",
            },
            // 折线上数字的样式
            label: {
              show: true,
              position: "top",
              color: "#fff",
            },
            areaStyle: {
              color: "rgba(0,0,0,0)",
            },
            // 折线上每一个小点的样式
            itemStyle: {
              color: "#497ABC",
            },
            data: this.data1,
          },
        ],
      });
    },
  },
 };
 </script>
 <style scoped>
 .left {
  position: absolute;
  top: 0.4rem;
  right: -10px;
 }
 .right {
  position: absolute;
  top: 0.4rem;
  right: -15px;
 }
 </style>
--- a/src/components/dashboard/mixins/resize.js
+++ b/src/components/dashboard/mixins/resize.js
@@ -0,0 +1,56 @@
 import { debounce } from '@/utils'

 export default {
  data() {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted() {
    this.initListener()
  },
  activated() {
    if (!this.$_resizeHandler) {
      // avoid duplication init
      this.initListener()
    }

    // when keep-alive chart activated, auto resize
    this.resize()
  },
  beforeDestroy() {
    this.destroyListener()
  },
  deactivated() {
    this.destroyListener()
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_sidebarResizeHandler(e) {
      if (e.propertyName === 'width') {
        this.$_resizeHandler()
      }
    },
    initListener() {
      this.$_resizeHandler = debounce(() => {
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)

      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    destroyListener() {
      window.removeEventListener('resize', this.$_resizeHandler)
      this.$_resizeHandler = null

      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
    },
    resize() {
      const { chart } = this
      chart && chart.resize()
    }
  }
 }
--- a/src/css/comon0.css
+++ b/src/css/comon0.css
@@ -0,0 +1,162 @@
@charset "utf-8";
 *{
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box}
 *,body{padding:0px;	margin:0px;color: #222;font-family: "微软雅黑";}
 body{ background:#000d4a url(../images/bg.jpg) center top; background-size:cover;color:#666; padding-bottom: 30px;font-size: .1rem;}
 li{ list-style-type:none;}
 table{}
 i{ margin:0px; padding:0px; text-indent:0px;}
 img{ border:none; max-width: 100%;}
 a{ text-decoration:none; color:#399bff;}
 a.active,a:focus{ outline:none!important; text-decoration:none;}
 ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
 a:hover{ color:#06c; text-decoration: none!important}


 .clearfix:after, .clearfix:before {
 	display: table;
 	content: " "
 }
 .clearfix:after {
 	clear: both
 }
 .pulll_left{float:left;}
 .pulll_right{float:right;}
 /*谷哥滚动条样式*/

  ::-webkit-scrollbar {width:5px;height:5px;position:absolute}
  ::-webkit-scrollbar-thumb {background-color:#5bc0de}
  ::-webkit-scrollbar-track {background-color:#ddd}

 /***/

 .loading{position:fixed; left:0; top:0; font-size:.3rem; z-index:100000000;width:100%; height:100%; background:#1a1a1c; text-align:center;}
 .loadbox{position:absolute; width:160px;height:150px; color: #324e93; left:50%; top:50%; margin-top:-100px; margin-left:-75px;}
 .loadbox img{ margin:10px auto; display:block; width:40px;}

 .copyright{ background:rgba(19,31,64,.32); border: 1px solid rgba(255,255,255,.05); line-height:.5rem; text-align: center; padding-right: 15px; bottom: 0; color:rgba(255,255,255,.7); font-size: .16rem; }

 .head{ height:1.05rem; background: url(../images/head_bg.png) no-repeat center center; background-size: 100% 100%; position: relative}
 .head h1{ color:#fff; text-align: center; font-size: .42rem; line-height:.75rem;}
 .head h1 img{ width:1.5rem; display: inline-block; vertical-align: middle; margin-right: .2rem}
 .weather{ position:absolute; right:.3rem; top:0; line-height: .75rem;}
 .weather img{ width:.37rem; display: inline-block; vertical-align: middle;}
 .weather span{color:rgba(255,255,255,.7); font-size: .18rem; padding-right: .1rem;}

 .mainbox{ padding:.4rem .4rem 0rem .4rem;}
 .mainbox>ul{ margin-left:-.4rem; margin-right:-.4rem;}
 .mainbox>ul>li{ float: left; padding: 0 .4rem}
 .mainbox>ul>li{ width: 30%}
 .mainbox>ul>li:nth-child(2){ width: 40%}

 .boxall{ border: 1px solid rgba(25,186,139,.17); padding:0 .3rem .3rem .3rem;  background: rgba(255,255,255,.04) url(../images/line.png); background-size: 100% auto; position: relative; margin-bottom: .3rem; z-index: 10;}
 .boxall:before,
 .boxall:after{ position:absolute; width: .1rem; height: .1rem; content: "";  border-top: 2px solid #02a6b5; top: 0;}
 .boxall:before,.boxfoot:before{border-left: 2px solid #02a6b5;left: 0;}
 .boxall:after,.boxfoot:after{border-right: 2px solid #02a6b5; right: 0;}
 .alltitle{ font-size:.24rem; color:#fff; text-align: center; line-height: .6rem; border-bottom:1px solid rgba(255,255,255,.2)}

 .boxfoot{ position:absolute; bottom: 0; width: 100%; left: 0;}
 .boxfoot:before,
 .boxfoot:after{ position:absolute; width: .1rem; height: .1rem;  content: "";border-bottom: 2px solid #02a6b5; bottom: 0;}

 .bar{background:rgba(101,132,226,.1); padding: .15rem;}
 .barbox li,.barbox2 li{ width:50%; text-align: center; position: relative;}
 .barbox:before,
 .barbox:after{ position:absolute; width: .3rem; height: .1rem; content: ""; }
 .barbox:before{border-left: 2px solid #02a6b5;left: 0;border-top: 2px solid #02a6b5; }
 .barbox:after{border-right: 2px solid #02a6b5; right: 0; bottom: 0;border-bottom: 2px solid #02a6b5; }

 .barbox li:first-child:before{ position:absolute; content: ""; height:50%; width: 1px; background: rgba(255,255,255,.2); right: 0; top: 25%;}

 .barbox{  border: 1px solid rgba(25,186,139,.17); position: relative;}
 .barbox li{ font-size: .6rem; color: #ffeb7b; padding: .05rem 0;  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: bold;}
 .barbox2 li{ font-size: .19rem; color: #637c9f; padding-top: .1rem;}

 .map{  position:relative; height: 7.2rem; z-index: 9;}
 .map4{ width: 200%; height:7rem;  position: relative; left: -50%; top: 4%; margin-top: .2rem; z-index: 5;}
 .map1,.map2,.map3{ position:absolute;}
 .map1{ width:6.43rem; z-index: 2;top:.45rem; left: .4rem;  animation: myfirst2 15s infinite linear;}
 .map2{ width:5.66rem; top:.85rem; left: .77rem; z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
 .map3{ width:5.18rem; top:1.07rem; left: 1.13rem; z-index: 1;}

 #echarts1,#echarts2,#echarts3,#echarts6,#echarts7,#echarts8{ position:relative;}
 #echarts1:before,
 #echarts2:before,
 #echarts3:before,
 #echarts6:before,
 #echarts7:before,
 #echarts8:before{ position:absolute; content: "23124"; width: 100%; text-align: center; bottom: .15rem; color: #fff; opacity: .7; font-size: .18rem;}

 #echarts1:before{ content: "平均单客价"}
 #echarts2:before{ content: "男消费"}
 #echarts3:before{ content: "女消费"}

 #echarts6:before{ content: "新增会员"}
 #echarts7:before{ content: "新增领卡会员"}
 #echarts8:before{ content: "新增消费会员"}



 .tabs { text-align: center; padding: .1rem 0 0 0;}
 .tabs a {
    position: relative;
    display: inline-block;
    margin-left: 1px;
    padding:.05rem .2rem;
    color: #898989;
    transition: all .3s ease-out 0s;
    font-size: 14px;
 }
 .tabs li{ display:inline-block;}
 .tabs a:after {
    position: absolute;
    width: 1px;
    height: 10px;
    background-color: rgba(255,255,255,.1);
    content: '';
 	 margin-left:0; right:-1px;    margin-top: 7px;
 	
 	
 }
 .tabs li a.active {border: 1px solid rgba(25,186,139,.17); background: rgba(255,255,255,.05); color:#fff;}

 .tit02{ text-align:center; margin: .1rem 0; position: relative}
 .tit02 span{border: 1px solid rgba(25,186,139,.17); letter-spacing: 2px; padding: .01rem .2rem; background: rgba(255,255,255,.05);  font-size: .18rem;  color: #49bcf7;}
 .tit02:before,.tit02:after{ position:absolute; width:26%; height: 1px;background: rgba(25,186,139,.2);  content: ""; top: .12rem;}
 .tit02:after{ right:0;}
 .tit02:before{ left:0;}

 .wrap{ height:2.54rem; overflow: hidden;}
 .wrap li{  line-height:.42rem; height:.42rem; font-size: .18rem; text-indent: .24rem; margin-bottom: .1rem; }
 .wrap li p{border: 1px solid rgba(25,186,139,.17);color: rgba(255,255,255,.6); }
 .sy{ float:left; width: 33%; height: 2.2rem; margin-top: -.25rem;}


 .adduser{ height:1.5rem; overflow: hidden;}
 .adduser li{height:.5rem;}
 .adduser img{ width: .40rem; border-radius: .5rem; margin-right: .1rem; display: inline-block; vertical-align: middle;}
 .adduser span{  line-height:.5rem; font-size: .18rem;color: rgba(255,255,255,.6); }

 .sycm ul{ margin-left:-.5rem;margin-right:-.5rem;  padding: .16rem 0;}
 .sycm li{ float: left; width: 33.33%; text-align: center; position: relative}
 .sycm li:before{ position:absolute; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
 .sycm li:last-child:before{ width: 0;}

 .sycm li h2{ font-size:.3rem; color: #c5ccff;}
 .sycm li span{ font-size:.18rem; color: #fff; opacity: .5;}

@keyframes myfirst2
 {
 from {transform: rotate(0deg);}
 to {transform: rotate(359deg);}
 }

@keyframes myfirst
 {
 from {transform: rotate(0deg);}
 to {transform: rotate(-359deg);}
 }

--- a/src/js/area_echarts.js
+++ b/src/js/area_echarts.js
@@ -0,0 +1,164 @@
 $.getJSON('js/map.json', function(data){
 	$.each(data, function (infoIndex, info){
     	var city = info.children;
 		for(var i =0;i<city.length;i++){
 			var citydetail = new Array();
 			var name = city[i].name;
 			geoCoordMap[name]= citydetail;
 			var lat = parseFloat(city[i].lat);
 			var log = parseFloat(city[i].log);
 			citydetail.push(log);
 			citydetail.push(lat);
 		}
      }) 
     map_1_option.series[0].data = convertData(data2.sort(function (a, b) {
                return b.value - a.value;
            })),
 /*            }).slice(0, 6)),
 */     map_1.setOption(map_1_option);
 });


 var geoCoordMap = {
 	
 };

 var data2 = [
 ];
 var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
 };
 //地图容器
 var map_1 = echarts.init(document.getElementById('map_1'));
 //地图容器
 //34个省、市、自治区的名字拼音映射数组


 //网络零售当期分布
 var map_1_option = {

 /*    title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },*/
 	 grid: {
        top: '0',
        left: '0',
        right: '0',
        bottom: '0',
        containLabel: true
    },
 	
    tooltip : {
        trigger: 'item'
    },
 /*    legend: {
        orient: 'vertical',
        y: 'bottom',
        x:'right',
        data:['pm2.5'],
        textStyle: {
            color: '#fff'
        }
    },*/
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: '#4c60ff',
                borderColor: '#000f4c',
            },
            emphasis: {
                areaColor: '#293fff'
            }
        }
    },

    series : [
    {
            name: 'pm2.5',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData(data2),
            symbolSize: function (val) {
                return val[2] / 20;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#ecf500'
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: function (val) {
                return val[2] / 10;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
 /*            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true,
                    color:'#333'
                },
                emphasis:{
                	color:'#333'
                }
            },*/
            itemStyle: {
                normal: {
                    color: '#f75749',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
 	
    };
 $(document).ready(function(){
 	　　map_1.resize();  
 	
 })
 window.addEventListener("resize", function () {
 　　map_1.resize();  
 });
 	
--- a/src/js/china.js
+++ b/src/js/china.js
--- a/src/js/echarts.min.js
+++ b/src/js/echarts.min.js
--- a/src/js/jquery.countup.min.js
+++ b/src/js/jquery.countup.min.js
@@ -0,0 +1 @@
 !function(t){"use strict";t.fn.countUp=function(e){var a=t.extend({time:2e3,delay:10},e);return this.each(function(){var e=t(this),n=a,u=function(){e.data("counterupTo")||e.data("counterupTo",e.text());var t=parseInt(e.data("counter-time"))>0?parseInt(e.data("counter-time")):n.time,a=parseInt(e.data("counter-delay"))>0?parseInt(e.data("counter-delay")):n.delay,u=t/a,r=e.data("counterupTo"),o=[r],c=/[0-9]+,[0-9]+/.test(r);r=r.replace(/,/g,"");for(var d=(/^[0-9]+$/.test(r),/^[0-9]+\.[0-9]+$/.test(r)),s=d?(r.split(".")[1]||[]).length:0,i=u;i>=1;i--){var p=parseInt(Math.round(r/u*i));if(d&&(p=parseFloat(r/u*i).toFixed(s)),c)for(;/(\d+)(\d{3})/.test(p.toString());)p=p.toString().replace(/(\d+)(\d{3})/,"$1,$2");o.unshift(p)}e.data("counterup-nums",o),e.text("0");var f=function(){e.text(e.data("counterup-nums").shift()),e.data("counterup-nums").length?setTimeout(e.data("counterup-func"),a):(delete e.data("counterup-nums"),e.data("counterup-nums",null),e.data("counterup-func",null))};e.data("counterup-func",f),setTimeout(e.data("counterup-func"),a)};e.waypoint(u,{offset:"100%",triggerOnce:!0})})}}(jQuery);
--- a/src/js/jquery.js
+++ b/src/js/jquery.js
--- a/src/js/jquery.waypoints.min.js
+++ b/src/js/jquery.waypoints.min.js
--- a/src/js/js.js
+++ b/src/js/js.js
@@ -0,0 +1,13 @@
 $(window).load(function(){  
             $(".loading").fadeOut()
            })  
 			
 /****/
 $(document).ready(function(){
 	var whei=$(window).width()
 	$("html").css({fontSize:whei/20})
 	$(window).resize(function(){
 		var whei=$(window).width()
 	 $("html").css({fontSize:whei/20})
 });
 	});
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,8 @@
 import Vue from 'vue'
 import App from './App.vue'

 Vue.config.productionTip = false

 new Vue({
  render: h => h(App),
 }).$mount('#app')
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -0,0 +1,34 @@
 export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last)
    } else {
      timeout = null
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args)
        if (!timeout) context = args = null
      }
    }
  }

  return function(...args) {
    context = this
    timestamp = +new Date()
    const callNow = immediate && !timeout
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait)
    if (callNow) {
      result = func.apply(context, args)
      context = args = null
    }

    return result
  }
 }
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,4 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
  transpileDependencies: true
 })