add

src/components/CountRoll.vue

+<template>
+    <div class="chartNum">
+        <div :class="isMin ? 'box-item-min' : 'box-item'">
+            <li v-for="(item,index) in orderNum"
+                :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }" :key="index">
+                <span v-if="!isNaN(item)">
+                    <i ref="numberItem">0123456789</i>
+                </span>
+                <span class="comma" v-else>{{item}}</span>
+            </li>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        name: 'CountRoll',
+        props: {
+            count: Number,
+            isMin: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                orderNum: []
+            }
+        },
+        mounted () {
+            this.toOrderNum(this.count)
+            this.increaseNumber()
+        },
+        deactivated () {
+            clearInterval(this.timer)
+        },
+        methods: {
+        // TODO: 定时器
+            increaseNumber () {
+                this.timer = setInterval(() => {
+                    this.setNumberTransform()
+                }, 300)
+            },
+            // TODO：设置文字滚动
+            setNumberTransform () {
+                const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
+                const numberArr = this.orderNum.filter(item => !isNaN(item))
+                // 结合CSS 对数字字符进行滚动
+                for (let index = 0; index < numberItems.length; index++) {
+                    const elem = numberItems[index]
+                    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
+                }
+                clearInterval(this.timer)
+            },
+
+            // TODO: 处理数字
+            toOrderNum (num) {
+                num = this.utils.formatNumber(num, num.length)
+                this.orderNum = num // 将其便变成数据，渲染至滚动数组
+            }
+        }
+    }
+</script>
+<style scoped lang='less'>
+    .chartNum {
+        .box-item {
+            position: relative;
+            font-size: 36px;
+            line-height: 48px;
+            text-align: center;
+            list-style: none;
+            color: #FFFFFF;
+            writing-mode: vertical-lr;
+            text-orientation: upright;
+            /* 默认逗号设置 */
+             .mark-item {
+                width: 20px;
+                height: 48px;
+                border: 1px solid #2B79BC;
+                margin-right: 5px;
+                line-height: 10px;
+                font-size: 36px;
+                position: relative;
+                & > span {
+                    position: absolute;
+                    width: 100%;
+                    bottom: 4px;
+                    left: -2px;
+                    writing-mode: vertical-rl;
+                    text-orientation: upright;
+                }
+            }
+            /*滚动数字设置*/
+            .number-item {
+                width: 30px;
+                height: 48px;
+                display: flex;
+                list-style: none;
+                margin-right: 5px;
+                border-radius: 4px;
+                border: 1px solid #2B79BC;
+                color: #FFFFFF;
+                & > span {
+                    position: relative;
+                    display: inline-block;
+                    margin-right: 10px;
+                    width: 100%;
+                    height: 100%;
+                    writing-mode: vertical-rl;
+                    text-orientation: upright;
+                    overflow: hidden;
+                    & > i {
+                        font-style: normal;
+                        position: absolute;
+                        top: 6px;
+                        left: 50%;
+                        transform: translate(-50%, 0);
+                        transition: transform 1s ease-in-out;
+                        letter-spacing: 10px;
+                        color: #FFFFFF;
+                    }
+                }
+            }
+
+            .number-item:last-child {
+                margin-right: 0;
+            }
+            .comma {
+              bottom: 4px;
+            }
+        }
+        .box-item-min {
+            position: relative;
+            font-size: 28px;
+            line-height: 36px;
+            text-align: center;
+            list-style: none;
+            color: #FFFFFF;
+            writing-mode: vertical-lr;
+            text-orientation: upright;
+            /* 默认逗号设置 */
+             .mark-item {
+                width: 24px;
+                height: 36px;
+                border: 1px solid #2B79BC;
+                margin-right: 8px;
+                line-height: 10px;
+                font-size: 28px;
+                position: relative;
+                & > span {
+                    position: absolute;
+                    width: 100%;
+                    bottom: 4px;
+                    left: -2px;
+                    writing-mode: vertical-rl;
+                    text-orientation: upright;
+                }
+            }
+            /*滚动数字设置*/
+            .number-item {
+                width: 24px;
+                height: 36px;
+                display: flex;
+                list-style: none;
+                margin-right: 8px;
+                border-radius: 4px;
+                border: 1px solid #2B79BC;
+                color: #FFFFFF;
+                & > span {
+                    position: relative;
+                    display: inline-block;
+                    margin-right: 10px;
+                    width: 100%;
+                    height: 100%;
+                    writing-mode: vertical-rl;
+                    text-orientation: upright;
+                    overflow: hidden;
+                    & > i {
+                        font-style: normal;
+                        position: absolute;
+                        top: 2px;
+                        left: 50%;
+                        transform: translate(-50%, 0);
+                        transition: transform 1s ease-in-out;
+                        letter-spacing: 10px;
+                        color: #FFFFFF;
+                    }
+                }
+            }
+
+            .number-item:last-child {
+                margin-right: 0;
+            }
+            .comma {
+              bottom: 4px;
+            }
+        }
+    }
+</style>

src/components/CountTo.vue

-<template>
-  <CountTo
-    :startVal="startVal"
-    :endVal="endVal"
-    :duration="duration"
-    :decimals="decimals"
-    :separator="separator"
-    :suffix="suffix"
-    :prefix="prefix"
-  />
-</template>
-
-<script>
-import CountTo from 'vue-count-to'
-export default {
-    name: 'VueCountTo', // TODO: 数字变动组件
-    components: { CountTo },
-    props: {
-        autoplay: { type: Boolean, default: true }, // 自动播放 默认为 True
-        startVal: { type: Number, default: 0 }, // 起始值
-        endVal: { type: Number, default: 0 }, // 结束值
-        duration: { type: Number, default: 800 }, // 持续时间，以毫秒为单位
-        decimals: { type: Number, default: 0 }, // 要显示的小数位数
-        separator: { type: String, default: ',' }, // 分隔符
-        prefix: { type: String, default: '' }, // 前缀
-        suffix: { type: String, default: '' } // 后缀
-    }
-}
-</script>
-
-<style scoped>
-span {
-  font-family: "Century Gothic";
-}
-</style>

src/components/PopupFrame.vue

@@ -88,17 +88,13 @@ export default {
                 top: 7px;
             }
         }
-        .content {
-            margin-top: 15px;
-        }
         .close {
             width: 24px;
             height: 24px;
-            background: url('../../static/images/index/bulletFrame-close.png')
-                no-repeat left top;
+            background: url('../../static/images/index/bulletFrame-close.png') no-repeat left top;
             position: absolute;
-            top: 36px;
-            right: 19px;
+            top: 20px;
+            right: 20px;
             cursor: pointer;
         }
     }

src/components/echarts/BarChart.vue

@@ -116,7 +116,7 @@ export default {
                     show: false
                 },
                 grid: {
-                    left: -10,
+                    left: 0,
                     right: 35,
                     bottom: 0,
                     top: 0,

src/pages/index/index.vue

@@ -74,6 +74,10 @@ export default {
                 }
                 // 右侧数据
                 this.rightData = {
+                    staff: data.p12 || {}, // 师资力量
+                    coursedata: data.p13 || {}, // 教学课程
+                    line: data.p14 || {}, // 教学线上线下比例
+                    learn: data.p15 || {} // 学习内容
                 }
             } catch (err) {
                 console.log('managePlatform >', err)

src/public/apis/proxy.js

@@ -4,7 +4,7 @@
 
 module.exports = {
     host: '127.0.0.1',
-    port: '8082', // 自定义端口号
+    port: '8087', // 自定义端口号
     proxyTable: { // Vue开发环境跨域配置
         '/apis': {
             target: 'http://test-a.com',

src/public/plugins/index.js

@@ -5,7 +5,6 @@ import ContentContainer from 'components/ContentContainer'
 // 页面头
 import Header from 'components/Header'
 // 插件
-import CountTo from 'components/CountTo.vue'
 import PopupFrame from '@/components/PopupFrame'
 
 const UsePlugin = {}
@@ -21,8 +20,6 @@ UsePlugin.install = function (Vue, options = {}) {
     // 内容容器
     Vue.component('content-container', ContentContainer)
     Vue.component('page-head', Header)
-    // 数组滚动
-    Vue.component('count-to', CountTo)
     // 弹框组件
     Vue.component('popup-frame', PopupFrame)
 }