内容修改

whychdw

2020-08-19 f63f9437da6d1f2af5886193a6a500f683f2614b

内容修改

 src/App.vue

@@ -5,7 +5,6 @@
</template>

<script>

export default {
    name: 'App',
}

 src/components/ContentBox.vue

@@ -1,13 +1,20 @@
<template>
    <div class="content-box" :class="{'no-border': noborder}">
        <div class="content-box-title" :class="getTitlePos" v-if="!noHeader">
            <slot name="title">{{title}}</slot>
    <div class="content-box-container" :class="{'content-box-hide': hide}">
        <div class="toggle-flag"
        v-if="toggle"
        @click="toggleChange">
            <i class="el-icon-arrow-left"></i>
        </div>
        <div class="content-box-content">
            <slot></slot>
        </div>
        <div class="content-box-footer">
            <slot name="footer"></slot>
        <div class="content-box" :class="{'no-border': noborder}" v-show="!hide">
            <div class="content-box-title" :class="getTitlePos" v-if="!noHeader">
                <slot name="title">{{title}}</slot>
            </div>
            <div class="content-box-content">
                <slot></slot>
            </div>
            <div class="content-box-footer">
                <slot name="footer"></slot>
            </div>
        </div>
    </div>
</template>
@@ -31,6 +38,21 @@
        noHeader: {
            type: Boolean,
            default: false
        },
        toggle: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            hide: false
        }
    },
    methods: {
        toggleChange() {
            console.log(this.hide);
            this.hide = this.hide?false:true;
        }
    },
    computed: {
@@ -45,6 +67,11 @@
</script>

<style scoped>
.content-box-container {
    position: relative;
    box-sizing: border-box;
    height: 100%;
}
.content-box {
    display: flex;
    flex-direction: column;
@@ -73,6 +100,7 @@
    text-align: left;
}
.content-box-content {
    position: relative;
    flex: 1;
    margin-top: 4px;
    margin-left: 4px;
@@ -92,6 +120,39 @@
    line-height: 32px;
    font-weight: bold;
}
.toggle-flag {
    position: absolute;
    font-size: 20px;
    width: 20px;
    line-height: 40px;
    right: 1px;
    top: 50%;
    margin-top: -20px;
    z-index: 9999;
    background-color: #000000;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.toggle-flag:hover {
    cursor: pointer;
    background-color: #252424;
}
.content-box-container .toggle-flag {
    transition: 0.5s ease;
}
.content-box-hide .toggle-flag {
    right: -21px;
    transform: rotate(180deg);
    transition: 0.5s ease;
}

.content-box-container {
    transition: 0.5s ease;
}
.content-box-container.content-box-hide {
    width: 0 !important;
    transition: 0.5s ease;
}
</style>



 src/components/chart/PieChart.vue

@@ -45,9 +45,6 @@
                },
                legend: {
                    show: false,
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {

 src/pages/home.vue

@@ -125,7 +125,7 @@
    user-select: none;
}
.show-drawer {
    transform: translateX(360px)
    transform: translateX(360px);
}
</style>


 src/pages/index.vue

@@ -1,7 +1,9 @@
<template>
    <flex-layout direction="row" class="page-index">
        <content-box title="站点列表" 
        slot="header" style="width:320px">
        slot="header"
        toggle 
        style="width:320px">
            <my-el-tree
            :data="data"
            @node-click="nodeClick"></my-el-tree>