第一个版本提交

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.env

@@ -0,0 +1,6 @@
+
+ENV = 'development'
+
+VUE_APP_BASE_NAME='大数据分析系统'
+
+VUE_APP_BASE_API = '/mock'

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint"
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+  },
+  overrides: [
+    {
+      files: [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)"
+      ],
+      env: {
+        jest: true
+      }
+    }
+  ]
+};

UI/components/index.js

@@ -0,0 +1,2 @@
+export {default as ZRow}from './layout/row/index'
+export {default as ZCol}from './layout/col/index'

UI/components/layout/col/index.js

@@ -0,0 +1,68 @@
+import {
+    h,
+    computed,
+    inject
+} from "vue"
+
+
+export default {
+    name: 'ZCol',
+
+    props: {
+        span: {
+            type: Number,
+            default: 24
+        },
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        xs: Number,
+        sm: Number,
+        md: Number,
+        lg: Number,
+        xl: Number,
+    },
+
+
+    setup(props, context) {
+        const {
+            span,
+            tag,
+        } = props
+
+        const gutter = inject('ZRow')
+
+
+        const style = computed(() => {
+            if (gutter) {
+                return {
+                    paddingLeft: gutter / 2 + 'px',
+                    paddingRight: gutter / 2 + 'px'
+                }
+            }
+        })
+
+
+        let classList = [];
+
+
+        ['xs', 'sm', 'md', 'lg', 'xl'].forEach(item => {
+            if (props[item]) {
+                classList.push(`z-col-${item}-${props[item]}`)
+            }
+        })
+
+        return () => [
+            h(tag, {
+                class: [
+                    'z-col',
+                    `z-col-${span}`,
+                    classList
+                ],
+                style:style.value
+            }, context.slots)
+        ]
+
+    }
+}

UI/components/layout/row/index.js

@@ -0,0 +1,53 @@
+import {
+  h,provide
+} from "vue"
+
+export default {
+  name: 'ZRow',
+  functional: true,
+  props: {
+    gutter: {
+      type: Number,
+      default: 0
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+    type: String,
+    justify: String,
+    align: String,
+
+  },
+
+
+  setup(props, context) {
+    const {
+      gutter,
+      type,
+      justify,
+      align,
+      tag,
+      className
+    } = props
+
+    provide('ZRow', gutter)
+
+    return () => [
+      h(tag, {
+        class: [
+          'z-row',
+          className,
+          type == 'flex' ? '.z-row--flex' : '',
+          justify ? `z-justify--${justify}` : '',
+          align ? `z-algin--${align}` : ''
+        ],
+      }, context.slots)
+    ]
+  }
+
+}

UI/styles/mixins.scss

@@ -0,0 +1,40 @@
+$total:24;
+
+@function column-width($col) {  
+    @return percentage($col/$total);  
+}
+
+@for $i from 1 through $total {  
+    .z-col-#{$i}{ width: column-width($i) };  
+}
+
+//响应式布局媒体查询
+@media only screen and (max-width: 768px){
+    @for $i from 1 through $total {  
+        .z-col-xs-#{$i}{ width: column-width($i) };  
+    }
+}
+
+@media only screen and (min-width: 768px){
+    @for $i from 1 through $total {  
+        .z-col-sm-#{$i}{ width: column-width($i) };  
+    }
+}
+
+@media only screen and (min-width: 992px){
+    @for $i from 1 through $total {  
+        .z-col-md-#{$i}{ width: column-width($i) };  
+    }
+}
+
+@media only screen and (min-width: 1200px){
+    @for $i from 1 through $total {  
+        .z-col-lg-#{$i}{ width: column-width($i) };  
+    }
+}
+
+@media only screen and (min-width: 1920x){
+    @for $i from 1 through $total {  
+        .z-col-xl-#{$i}{ width: column-width($i) };  
+    }
+}

UI/styles/ui.scss

@@ -0,0 +1,52 @@
+
+@import "./mixins.scss";
+
+// row  组件
+.z-row {
+    position: relative;
+    box-sizing: border-box;
+    height: 100%;
+    .z-col {
+        position: relative;
+        box-sizing: border-box;
+        height: 100%;
+        float: left;
+    }
+}
+
+.z-row-flex {
+    display: flex;
+
+    &+.z-justify-start {
+        justify-content: start;
+    }
+
+    &+.z-justify-center {
+        justify-content: center;
+    }
+
+    &+.z-justify-end {
+        justify-content: end;
+    }
+
+    &+.z-justify-space-around {
+        justify-content: space-around;
+    }
+
+    &+.z-justify-space-between {
+        justify-content: space-between;
+    }
+
+    &+.z-align-top {
+        align-items: flex-start;
+    }
+
+    &+.z-align-center {
+        align-items: center;
+    }
+
+    &+.z-align-end {
+        align-items: flex-end;
+    }
+}
+

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};

dist/index.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/favicon.ico><title>大数据分析系统</title><script src="https://webapi.amap.com/maps?v=1.3&key=73cddabc2173e0166a622f4483d3592a&plugin=AMap.DistrictSearch"></script><script src=https://webapi.amap.com/ui/1.0/main.js></script><link href=/css/chunk-f62222c8.07f5c727.css rel=prefetch><link href=/js/chunk-69469d6c.c95cad1b.js rel=prefetch><link href=/js/chunk-f62222c8.08f0bba9.js rel=prefetch><link href=/css/app.a2a7e883.css rel=preload as=style><link href=/js/app.b2775228.js rel=preload as=script><link href=/js/chunk-libs.6ac10f35.js rel=preload as=script><link href=/js/runtime.16e5704e.js rel=preload as=script><link href=/css/app.a2a7e883.css rel=stylesheet></head><body><div id=app></div><script src=/js/runtime.16e5704e.js></script><script src=/js/chunk-libs.6ac10f35.js></script><script src=/js/app.b2775228.js></script></body></html>