老师 关于slot的问题

组件页

<template>

<div>

<div class="courseList">

<ul>

<li v-for="item in courseList">

<img :src="item.img">

<div class="content">

<span class="title">{{item.title}}</span>

<span class="desc">

<slot name="descTxt" class="descTxt">{{item.descTxt}}</slot>

{{item.desc}}

</span>

</div>

</li>

</ul>

</div>

</div>

</template>

<script>

export default {

props: {

courseList: Array

}

};

</script>

<style>

.courseList {

width: 100%;

display: flex;

flex-direction: column;

align-items: center;

}

.courseList li {

margin: 24px 20px;

width: 335px;

display: flex;

flex-direction: row;

}

.courseList li img {

width: 108px;

height: 72px;

border-radius: 3px;

}

.courseList li .content {

margin-left: 16px;

display: flex;

flex-direction: column;

}

.courseList li .content .title {

margin-top: 3px;

font-family: PingFangSC-Regular;

font-size: 15px;

color: #2b333b;

letter-spacing: 0;

line-height: 17px;

}

.courseList li .content .desc {

margin-top: 8px;

font-family: PingFangSC-Light;

font-size: 12px;

color: #71777d;

line-height: 14px;

}

.courseList li .content .descTxt {

font-family: PingFangSC-Light;

font-size: 12px;

color: #20cc85;

line-height: 14px;

}

</style>

调用页

<template>

<div>

<v-head></v-head>

<div class="courseTitle">

<ul>

<li v-for="item in arrList">

<img :src="item.imgUrl">

<span>{{item.txt}}</span>

</li>

</ul>

</div>

<v-course :courseList="courseList">

<div>

<span slot="descTxt"></span>

</div>

</v-course>

</div>

</template>

<script>

import homeHead from "@/components/head";

import courseTemp from "@/components/courseList";

import web from "@/assets/web.png";

import webService from "@/assets/webService.png";

import mobile from "@/assets/mobile.png";

import database from "@/assets/database.png";

import cloudData from "@/assets/cloudData.png";

import courseUrl1 from "@/assets/course/course1.jpg";

import courseUrl2 from "@/assets/course/course2.jpg";

import courseUrl3 from "@/assets/course/course3.jpg";

import courseUrl4 from "@/assets/course/course4.jpg";

import courseUrl5 from "@/assets/course/course5.jpg";

export default {

data() {

return {

arrList: [],

courseList: []

};

},

mounted() {

this.arrList = [

{

imgUrl: web,

txt: "前端开发"

},

{

imgUrl: webService,

txt: "后端开发"

},

{

imgUrl: mobile,

txt: "移动开发"

},

{

imgUrl: database,

txt: "数据库"

},

{

imgUrl: cloudData,

txt: "云计算"

}

];

this.courseList = [

{

img: courseUrl1,

title: "实例妙解Sed和Awk的秘密",

desc: "中级 · 330人在学 "

},

{

img: courseUrl2,

title: "Java定时任务调度工具详解之Quartz篇",

desc: "中级 · 330人在学 ",

descTxt: "已学98%"

},

{

img: courseUrl3,

title: "星级评分原理与实战",

desc: "中级 · 330人在学 "

},

{

img: courseUrl4,

title: "实例妙解Sed和Awk的秘密",

desc: "中级 · 330人在学 "

},

{

img: courseUrl5,

title: "PHP消息队列实践",

desc: "中级 · 330人在学 "

},

{

img: courseUrl1,

title: "Java定时任务调度工具详解之Quartz篇",

desc: "中级 · 330人在学 "

}

];

},

components: {

"v-head": homeHead,

"v-course": courseTemp

}

};

</script>

<style>

.courseTitle {

margin-top: 44px;

background: #f3f5f7;

padding: 20px 0;

overflow-x: scroll;

}

.courseTitle ul {

display: flex;

flex-direction: row;

}

.courseTitle ul li {

display: flex;

flex-direction: column;

align-items: center;

}

.courseTitle ul li img {

height: 32px;

width: 32px;

}

.courseTitle ul li span {

width: 85px;

text-align: center;

font-size: 14px;

color: #2b333b;

margin-top: 12px;

}

</style>

这里不能调整slot的css  怎么解决呢老师？这里应该用slot吗? slot会在页面中增加节点吗老师？