添加字体文件、更新框架

src/App.vue

 <template>
     <div id="app">
-        <div class="page-bg" id="pageBg"></div>
         <router-view></router-view>
     </div>
 </template>
 
 <script>
 import { refreshScale } from './public/utils/refreshSize'
+
 export default {
     name: 'app',
 
@@ -14,25 +14,26 @@ export default {
         return {}
     },
 
-    created () {},
-
     mounted () {
         refreshScale()
+
         window.addEventListener('resize', refreshScale)
     },
 
+    beforeDestroy () {
+        window.removeEventListener('resize')
+    },
+
     methods: {}
 }
 </script>
 
 <style lang="scss">
 body {
-    overflow: hidden;
     background-color: #011428;
 }
 
 #app {
-    position: fixed;
     top: 0;
     left: 50%;
     right: 0;
@@ -41,20 +42,8 @@ body {
     height: 1080px;
     overflow: hidden;
     user-select: none;
-    // background: url('../static/images/index/index-bg-bottom.jpg') no-repeat left top;
     background-size: 1920px 1080px;
     background-position: center bottom;
     background-size: cover;
 }
-
-.page-bg {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 1920px;
-    height: 1080px;
-    overflow: hidden;
-}
 </style>

src/assets/fonts/fonts.less

+/* 数字字体包 */
+@font-face {
+    font-family: "CenturyGothic";
+    src: url('./CenturyGothic.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* UI文字字体包 */
+@font-face {
+    font-family: "Alibaba PuHuiTi35";
+    src: url('./AlibabaPuHuiTi-2-35-Thin.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Alibaba PuHuiTi45";
+    src: url('./AlibabaPuHuiTi-2-45-Light.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Alibaba PuHuiTi55";
+    src: url('./AlibabaPuHuiTi-2-55-Regular.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Alibaba PuHuiTi65";
+    src: url('./AlibabaPuHuiTi-2-65-Medium.ttf');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: "Alibaba PuHuiTi75";
+    src: url('./AlibabaPuHuiTi-2-75-SemiBold.ttf');
+    font-weight: normal;
+    font-style: normal;
+}

static/styles/less/common.less → src/assets/styles/less/common.less

 /**
  * common.less 通用less
  */
+@import "../reset.css";
 @import './Less-mixins.less';
-@import "./layout.less"; // 基础三栏布局
+@import '../../fonts/fonts.less';
 
 @headerHeight: 67px;
 

src/components/Header/index.vue

 <template>
-    <header id="header"></header>
+    <header id="header">{{ title }}</header>
 </template>
 
 <script>
@@ -8,6 +8,8 @@ export default {
         return {}
     },
 
+    props: ['title'],
+
     created () {
         window.vm = this
     }

src/components/Layout.vue

 <template>
     <div class="main-container">
-        <Header :title="title" />
+        <!-- 头部 -->
+        <Header v-bind="$attrs" />
 
-        <slot></slot>
+        <!-- 主内容 -->
+        <div id="layoutMain" class="layout-main">
+            <div
+                class="left"
+                :style="{
+                    width: layoutSize.leftWidth,
+                    minWidth: layoutSize.leftWidth
+                }"
+                ref="layoutLeft"
+            >
+                <slot name="left"></slot>
+            </div>
+            <div
+                class="center"
+                ref="layoutCenter"
+            >
+                <div class="content">
+                    <slot name="center"></slot>
+                </div>
+            </div>
+            <div
+                class="right"
+                :style="{
+                    width: layoutSize.rightWidth,
+                    minWidth: layoutSize.rightWidth
+                }"
+                ref="layoutRight"
+            >
+                <slot name="right"></slot>
+            </div>
+        </div>
     </div>
 </template>
 
 <script>
-import Header from '@/components/Header'
+import { merge } from 'lodash'
+import Header from 'components/Header'
 
 export default {
     name: 'Layout',
 
     data () {
         return {
-            headerTabList: [],
-            currSelectedIndex: null // 当前tab选中的index
+            // 布局尺寸
+            layoutSize: {
+                leftWidth: '2168px',
+                rightWidth: '2168px',
+                centerWidth: '100%'
+            }
         }
     },
 
@@ -25,8 +61,7 @@ export default {
             default () {
                 return {}
             }
-        },
-        title: ''
+        }
     },
 
     components: {
@@ -37,14 +72,71 @@ export default {
         window.vm = this
     },
 
-    methods: {}
+    methods: {
+        setPageSize () {
+            // 默认页面主体内容配置(不含Header)
+            this.layoutSize = merge({}, this.layoutSize, this.layoutConf)
+        }
+    }
 }
 </script>
-<style lang="less" scoped>
+<style lang="less">
+@import "../assets/styles/less/common.less";
+
 .main-container {
     position: relative;
     width: 100%;
     height: 100%;
+    color: #fff;
+    font-size: 14px;
     overflow: hidden;
 }
+
+// 主体内容
+.layout-main {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+
+    .center {
+        flex: 1;
+        position: relative;
+        box-sizing: border-box;
+    }
+
+    .left, .right {
+        position: relative;
+        overflow: hidden;
+        box-sizing: border-box;
+
+        &:after {
+            content: "";
+            position: absolute;
+            top: 160px;
+            background-position: left top;
+            background-repeat: no-repeat;
+        }
+    }
+
+    .left {
+        padding-left: 30px;
+        padding-right: 118px;
+        // background: url('../../static/images/index/lineLeft.png') no-repeat right 160px;
+
+        &:after {
+            right: 0;
+        }
+    }
+
+    .right {
+        padding-left: 118px;
+        padding-right: 30px;
+        // background: url('../../static/images/index/lineRight.png') no-repeat left 160px;
+
+        &:after {
+            left: 0;
+        }
+    }
+}
 </style>

src/components/echarts/index.vue

@@ -55,12 +55,13 @@ export default {
             deep: true // 深度监听
         },
 
-        // 监听窗口缩放重置echacrts
+        // 监听窗口缩放重置echarts
         innerWH: {
             handler () {
                 console.log('window resize')
                 this.chartResize()
-            }
+            },
+            deep: true
         }
     },
 

src/index.js

@@ -7,9 +7,7 @@ import createRouter from './router/router'
 import axiosServer from './request'
 import UsePlugin from './public/plugins'
 import utils from 'utils'
-// 引入css
-import '../static/styles/reset.css'
-import './public/utils/refreshSize'
+
 Vue.use(Vuex)
 Vue.use(VueRouter)
 Vue.use(axiosServer)

src/pages/index.vue

+<template>
+    <div class="index-page">
+        <layout title="测试title">
+            <!-- left -->
+            <div class="index-left" slot="left"></div>
+            <!-- center -->
+            <div class="index-center" slot="center"></div>
+            <!-- right -->
+            <div class="index-left" slot="right"></div>
+        </layout>
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="less">
+
+</style>

src/public/utils/deepMerge.js

-import { merge } from 'lodash'
-
-function deepMerge (targetConf = {}, newConf = {}) {
-    return merge({}, targetConf, newConf)
-}
-
-export {
-    deepMerge
-}

src/public/utils/refreshSize.js

 
-// 设置页面缩放比
-export function refreshScale () {
+/**
+ * @method refreshScale 设置页面缩放比
+ * @param {Int|Number} designWidth 设计稿宽度, 默认: 1920
+ * @param {Int|Number} designHeight 设计稿高度, 默认: 1080
+ */
+export function refreshScale (designWidth = 1920, designHeight = 1080) {
     let baseWidth = document.documentElement.clientWidth
     let baseHeight = document.documentElement.clientHeight
     let appStyle = document.getElementById('app').style
-    // let pageBgStyle = document.getElementById('pageBg').style
+    let bodyStyle = document.body.style
     let realRatio = baseWidth / baseHeight
-    let designRatio = 16 / 9
-    let scaleRate = baseWidth / 1920
+    let designRatio = 16 / 9 // 默认宽高比
+    let scaleRate = baseWidth / designWidth
     if (realRatio > designRatio) {
-        scaleRate = baseHeight / 1080
+        scaleRate = baseHeight / designHeight
     }
+    bodyStyle.overflow = 'hidden'
+    appStyle.position = 'fixed'
     appStyle.transformOrigin = 'left top'
     appStyle.transform = `scale(${scaleRate}) translateX(-50%)`
     appStyle.width = `${baseWidth / scaleRate}px`
-
-    // pageBgStyle.transformOrigin = 'left top'
-    // pageBgStyle.transform = `scale(${scaleRate}) translateX(-50%)`
-    // pageBgStyle.width = `${baseWidth / scaleRate}px`
 }

src/router/routes.js

 // 导入页面名称
+import Index from '@/pages/index.vue'
 
 export default [
     {
         path: '/',
         redirect: '/index'
+    },
+    {
+        path: '/index',
+        component: Index
     }
 ]