EXEED_manage/src/views/HomePage/index.vue

<template>
    <div class="home-page-content">
       <div class="top-number">
           <div class="top-number-item">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_renwu_slices/ic_renwu.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 34px">总任务数</span>
                        </div>
                       <div class="top-number-content-tag">
                           <span class="average" style="padding: 10px">日均</span>
                           <span class="average-number" style="padding: 10px">15000</span>
                       </div>
                   </div>
                   <div class="top-number-total">126560</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item">

           </div>
           <div class="grey-line"></div>
           <div class="top-number-item">

           </div>
       </div>
       <div class="grey-line-cross"></div>
       <div class="top-number">
           <div class="top-number-item-small">
               <div class="top-number-content">
                   <div style="display: flex; justify-content: space-between">
                       <div class="top-number-content-title">
                           <img src="@/assets/ic_bofang_slices/ic_bofang.png" alt="" />
                           <span style="margin-left: 12px;width: 120px;line-height: 32px">总播放数</span>
                        </div>
                   </div>
                   <div class="top-number-total">126560</div>
               </div>
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">
               
           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">

           </div>
           <div class="top-number-item-small">

           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">

           </div>
           <div class="grey-line"></div>
           <div class="top-number-item-small">

           </div>
       </div>
       <div class="middle-charts" style="margin-top: 24px">
           <el-tabs v-model="playNumForm.type" @tab-change="statusChange">
                <el-tab-pane label="播放" :name="1"></el-tab-pane>
                <el-tab-pane label="点赞" :name="2"></el-tab-pane>
                <el-tab-pane label="收藏" :name="3"></el-tab-pane>
                <el-tab-pane label="评论" :name="4"></el-tab-pane>
                <el-tab-pane label="转发" :name="5"></el-tab-pane>
                <el-tab-pane label="推荐" :name="6"></el-tab-pane>
            </el-tabs>
            <div style="padding: 6px">
                <el-button size="default" text>今日</el-button>
                <el-button size="default" text>本周</el-button>
                <el-button size="default" text>本月</el-button>
                <el-button size="default" text>全年</el-button>
            </div>
        </div>
        <div class="bottom-table" style="margin-top: 24px">
            <el-tabs v-model="form.status" @tab-change="statusChange">
                <el-tab-pane label="经销商统计" :name="1"></el-tab-pane>
                <el-tab-pane label="员工统计" :name="2"></el-tab-pane>
            </el-tabs>
            <div style="padding: 6px">
                <el-button size="default" text>本周</el-button>
                <el-button size="default" text>本月</el-button>
                <el-button size="default" text>全年</el-button>
            </div>
        </div>
        <div class="table-content">
            test
        </div>
    </div>
</template>

<script>
import {defineComponent, reactive, getCurrentInstance} from 'vue'
export default defineComponent({
    name: 'v-home',
    setup() {
        const form = reactive({
            status: 1,
        });
        const playNumForm = reactive({
            type: 1,
        })
        return {
            form,playNumForm
        }
    },
    mounted() {

    },
    methods: {
        statusChange() {}
    }
})
</script>

<style lang="less" scoped>
@import './title.less';
</style>