页面开发

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/pages/index/Center.vue

 <template>
-    <div class="managePlatform-center"></div>
+    <div class="managePlatform-center">
+        <div class="survey-content">
+            <div class="item" v-for="(g, l) in survey" :key="l">
+                <count-to :endVal="g.value" />
+                <p>{{g.name}}</p>
+            </div>
+        </div>
+        <div class="footer">
+            <div class="item course">
+                <title-line :con="'发展历程'"></title-line>
+                <div class="courseModal">
+                    2021年学校成立
+                    ***********************
+                </div>
+            </div>
+            <div class="item framework">
+                <title-line :con="'组织架构'"></title-line>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+import TitleLine from '@/components/TitleLine'
+
 export default {
     name: 'Center',
+    components: {
+        TitleLine
+    },
 
     data () {
-        return {}
+        return {
+            survey: [
+                { name: '学员数', value: 31721 },
+                { name: '班级数', value: 105 },
+                { name: '二级协会数', value: 15 }
+            ]
+        }
     },
 
     mounted () {},
@@ -18,5 +48,72 @@ export default {
 
 <style lang="less" scoped>
     .managePlatform-center {
+        width: 100%;
+        position: relative;
+        .survey-content {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            margin-top: 20px;
+            .item {
+                width: 220px;
+                height: 72px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: space-between;
+                span {
+                    font-size: 42px;
+                    color: #FFFFFF;
+                    font-weight: 400;
+                } 
+                p {
+                    font-size: 18px;
+                    font-weight: 400;
+                    color: #FFFFFF;
+                }
+            }
+            .item:nth-child(2) {
+                border-left: 1px solid rgba(89, 183, 249, 0.8);
+                border-right: 1px solid rgba(89, 183, 249, 0.8);
+            }
+        }
+        .footer {
+            width: calc(100% - 30px);
+            height: 270px;
+            position: absolute;
+            left: 15px;
+            top: 740px;
+            background: rgba(0, 7, 17, 0.18);
+            padding: 10px 15px;
+            display: flex;
+            justify-content: space-between;
+            .item {
+                width: 50%;
+                height: 100%;
+                box-sizing: border-box;
+            }
+            .course {
+                background: url('../../../static/images/index/courseBG.png') left top 113px no-repeat;
+            }
+            .courseModal {
+                width: 214px;
+                height: 75px;
+                background: rgba(0, 190, 255, 0.1);
+                border: 1px solid;
+                border-image: linear-gradient(176deg, rgba(61, 162, 242, 0), #3DA2F2, rgba(10, 79, 135, 0)) 1 1;
+                box-sizing: border-box;
+                padding: 8px 12px;
+                font-size: 14px;
+                font-weight: 300;
+                color: #FFFFFF;
+                line-height: 20px;
+                margin-top: 10px;
+            }
+            .framework{
+                padding-left: 42px;
+                background: url('../../../static/images/index/frameworkBG.png') right top 43px no-repeat;
+            }
+        }
     }
 </style>
\ No newline at end of file

src/pages/index/index.vue

@@ -40,5 +40,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
+.index-page {
+    width: 1920px;
+    margin: 0 auto;
+}
 </style>

src/public/plugins/index.js

@@ -4,6 +4,8 @@ import mixins from '../mixins'
 import ContentContainer from 'components/ContentContainer'
 // 页面头
 import Header from 'components/Header'
+// 插件
+import CountTo from 'components/CountTo.vue'
 
 const UsePlugin = {}
 
@@ -18,6 +20,8 @@ UsePlugin.install = function (Vue, options = {}) {
     // 内容容器
     Vue.component('content-container', ContentContainer)
     Vue.component('page-head', Header)
+    // 数组滚动
+    Vue.component('count-to', CountTo)
 }
 
 export default UsePlugin