详情页数据分析与布局

演示效果

思路

1 正常情况是在created下拿到后台发过来的数据，为了便捷学习我们自己模拟后来发送过来的数据。

2 拿到模拟后台数据然后进行布局

代码

1 模拟后台数据

CourseDetail.vue

...
<script>
    export default {
        name: "CourseDetail",
        // ---模拟后台数据开始---。
        data(){
            return{
                course_ctx:''
            }
        },
        created(){
            let detail_List = [
                {
                id:1,
                bgColor: 'red',
                title: 'python基础',
                ctx :'python基础as两地分居拉速度快机房拉速度快放假'
            },
            {
                id:2,
                bgColor: 'yellow',
                title: 'django入土',
                ctx :'django入土as两地分居拉速度快机房拉速度快放假'
            },
            {
                id:3,
                bgColor: 'green',
                title: 'mysql衫裤',
                ctx :'mysql衫裤as两地分居拉速度快机房拉速度快放假'
            }
            ];
            let id =2;
            for (let dic of detail_List){
                if (dic.id == id){
                    this.course_ctx = dic;
                    break;
                }
            }
            console.log(this.course_ctx)
        // -----模拟后台数据结束------ 。

        }

    }
</script>
...

2 开始布局

<template>
    <div class="course-detail">
        <h1>课程详情页面</h1>
        <hr>
        <div class="course-detail">
            <div class="header" :style="{background:course_ctx.bgColor}"></div>
            <div class="detail-body">
                <div class="left">{{ course_ctx.title}}</div>
                <div class="right">{{ course_ctx.ctx}}</div>
            </div>
        </div>
    </div>
</template>

<script>
...代码同上，模拟后台数据...
</script>


<style scoped>
    h1{
        font-size: 50px;
        text-align: center;
    }
    .course-detail{
        width:80%;
        margin: 20px auto;
    }
    .header{
        height:150px;
    }
    .left,.right{
        float: left;
        width:50%;
        height: 500px;
                        /*行高*/
        font: bold 50px/150px 'Arial';
    }
    .left {background-color:aqua}
    .right {background-color:aquamarine}



</style>