Merge remote-tracking branch 'origin/20210819' into yuanfeng

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/PopupFrame.vue

@@ -94,8 +94,8 @@ export default {
         .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;

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',