|
|
|
|
@ -13,12 +13,15 @@ import { userNewLikeService } from '@/api/user/user' |
|
|
|
|
import useUserStore from '@/store/modules/user' |
|
|
|
|
import fe from '@/assets/images/fe.jpg' |
|
|
|
|
import { ref, onMounted } from 'vue' |
|
|
|
|
import { useRouter } from 'vue-router' |
|
|
|
|
const router = useRouter() |
|
|
|
|
const userStore = useUserStore() |
|
|
|
|
const username = ref() |
|
|
|
|
const data = ref({}) |
|
|
|
|
const infoData = ref() |
|
|
|
|
const flag = ref(false) |
|
|
|
|
const role = ref(null) |
|
|
|
|
const loading = ref(false) |
|
|
|
|
const rightVisible = ref(false) |
|
|
|
|
userStore.getUserInfo().catch((error) => { |
|
|
|
|
console.log(error) |
|
|
|
|
@ -34,8 +37,10 @@ const getAvater = (avater) => { |
|
|
|
|
userStore.data.icon = avater |
|
|
|
|
// console.log(data.value.icon, 'icon') |
|
|
|
|
} |
|
|
|
|
const courselist = ref([]) |
|
|
|
|
const img = ref() |
|
|
|
|
const courseName = ref() |
|
|
|
|
const courseTea = ref() |
|
|
|
|
onMounted(() => { |
|
|
|
|
// getData() |
|
|
|
|
sum = parseInt(sum) + 1 |
|
|
|
|
@ -60,19 +65,13 @@ onMounted(() => { |
|
|
|
|
// // console.log(res, '课程列表') |
|
|
|
|
// }) |
|
|
|
|
//最新收藏的课程 |
|
|
|
|
// const courselist = ref({ img: '', name: '' }) |
|
|
|
|
// const img = ref() |
|
|
|
|
// const courseName = ref() |
|
|
|
|
|
|
|
|
|
userNewLikeService(userStore.data.id).then((res) => { |
|
|
|
|
console.log(res.data, '最新收藏的课程') |
|
|
|
|
// courselist.value = res.data |
|
|
|
|
// courselist.value.img = res.data.img |
|
|
|
|
// courselist.value.name = res.data.name |
|
|
|
|
const res = userNewLikeService(userStore.data.id).then((res) => { |
|
|
|
|
console.log(res.data.id, '最新收藏的课程') |
|
|
|
|
courselist.value = res.data |
|
|
|
|
// console.log(courselist.value.id, 'course') |
|
|
|
|
img.value = res.data.img |
|
|
|
|
courseName.value = res.data.name |
|
|
|
|
console.log(img.value, 'img') |
|
|
|
|
console.log(courseName.value, 'courseName') |
|
|
|
|
courseTea.value = res.data.teacher |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
@ -112,11 +111,23 @@ onMounted(() => { |
|
|
|
|
<div class="lesson"> |
|
|
|
|
<a |
|
|
|
|
href="#" |
|
|
|
|
style="width: 90%; font-size: 14px; display: flex; margin: 0 auto" |
|
|
|
|
style=" |
|
|
|
|
font-size: 14px; |
|
|
|
|
display: flex; |
|
|
|
|
margin: 0px auto; |
|
|
|
|
margin: 0px 30px; |
|
|
|
|
" |
|
|
|
|
> |
|
|
|
|
<conheader :title="`最多收藏知识点`"></conheader> |
|
|
|
|
<conheader |
|
|
|
|
:title="`学习最多知识点`" |
|
|
|
|
:urouter="'/curriculumCenter/knowledgePoints'" |
|
|
|
|
></conheader> |
|
|
|
|
</a> |
|
|
|
|
<p class="button" round v-for="item in 10" :key="item">Ro</p> |
|
|
|
|
<div class="con"> |
|
|
|
|
<p class="button" round v-for="item in 30" :key="item"> |
|
|
|
|
Spring clould |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
@ -127,7 +138,9 @@ onMounted(() => { |
|
|
|
|
> |
|
|
|
|
<conheader :title="`推荐知识点`"></conheader> |
|
|
|
|
</a> |
|
|
|
|
<p class="button" round v-for="item in 20" :key="item">Round</p> |
|
|
|
|
<div class="con"> |
|
|
|
|
<p class="button" round v-for="item in 30" :key="item">Roshabei</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
@ -138,36 +151,37 @@ onMounted(() => { |
|
|
|
|
> |
|
|
|
|
<conheader :title="`推荐课程`"></conheader> |
|
|
|
|
</a> |
|
|
|
|
|
|
|
|
|
<div class="lessonlist-content"> |
|
|
|
|
<div class="lessonlist-item"> |
|
|
|
|
<div class="lessonlist-item-img"> |
|
|
|
|
<img :src="fe" alt="" style="width: 100%; height: 140px" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="lessonlist-item-info"> |
|
|
|
|
<h3>课程名称</h3> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="con"> |
|
|
|
|
<ul> |
|
|
|
|
<li class="lessonlist-item" v-for="item in 4" :key="item"> |
|
|
|
|
<img :src="img" class="lessonlist-item-img" /> |
|
|
|
|
<div class="lessonlist-item-info"> |
|
|
|
|
<h5>{{ courseName }}</h5> |
|
|
|
|
<p>{{ courseTea }}</p> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
<el-col :span="6"> |
|
|
|
|
<div class="lesson"> |
|
|
|
|
<div class="lesson" v-loading="loading"> |
|
|
|
|
<a |
|
|
|
|
href="#" |
|
|
|
|
style="width: 90%; font-size: 14px; display: flex; margin: 0 auto" |
|
|
|
|
style="width: 90%; font-size: 12px; display: flex; margin: 0 auto" |
|
|
|
|
> |
|
|
|
|
<conheader :title="`最新收藏课程`"></conheader> |
|
|
|
|
</a> |
|
|
|
|
<div class="lessonlist-content"> |
|
|
|
|
<div class="lessonlist-item"> |
|
|
|
|
<div class="lessonlist-item-img"> |
|
|
|
|
<img :src="img" alt="" style="width: 100%; height: 140px" /> |
|
|
|
|
</div> |
|
|
|
|
<div class="lessonlist-item-info"> |
|
|
|
|
<h3>{{ courseName }}</h3> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="con"> |
|
|
|
|
<ul> |
|
|
|
|
<li class="lessonlist-item" v-for="item in courselist" :key="item"> |
|
|
|
|
<img :src="img" class="lessonlist-item-img" /> |
|
|
|
|
<div class="lessonlist-item-info"> |
|
|
|
|
<h5>{{ courseName }}</h5> |
|
|
|
|
<p>{{ courseTea }}</p> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
@ -184,42 +198,11 @@ onMounted(() => { |
|
|
|
|
</div> |
|
|
|
|
</el-col> |
|
|
|
|
</el-row> |
|
|
|
|
<!-- <div class="left"> |
|
|
|
|
<div class="nav"> |
|
|
|
|
<welcome |
|
|
|
|
:data="infoData" |
|
|
|
|
:userData="data" |
|
|
|
|
:name="name" |
|
|
|
|
v-if="flag" |
|
|
|
|
></welcome> |
|
|
|
|
</div> |
|
|
|
|
<div class="info" style="width: 100%; height: 368px"> |
|
|
|
|
<Info :data="infoData" v-if="flag"></Info> |
|
|
|
|
</div> |
|
|
|
|
<div class="echarts" style="width: 100%; height: 444px"> |
|
|
|
|
<echarts :sum="sum"></echarts> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="rightVisible" class="right"> |
|
|
|
|
<status :data="data" @get-message="getMessage" v-if="flag"></status> |
|
|
|
|
<div class="class" style="width: 100%; height: 388px"> |
|
|
|
|
<Class1></Class1> |
|
|
|
|
</div> |
|
|
|
|
<div class="stu" style="width: 100%; height: 236px"> |
|
|
|
|
<Student1></Student1> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-else class="right"> |
|
|
|
|
<status :data="data" v-if="flag"></status> |
|
|
|
|
<div class="class" style="width: 100%; height: 388px"> |
|
|
|
|
<Class2></Class2> |
|
|
|
|
</div> |
|
|
|
|
<div class="stu" style="width: 100%; height: 236px"> |
|
|
|
|
<Student2></Student2> |
|
|
|
|
</div> |
|
|
|
|
</div> --> |
|
|
|
|
</template> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
* { |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
.nav { |
|
|
|
|
height: 92px; |
|
|
|
|
background: #ffffff; |
|
|
|
|
@ -233,11 +216,13 @@ onMounted(() => { |
|
|
|
|
} |
|
|
|
|
.classList, |
|
|
|
|
.info { |
|
|
|
|
// background-color: yellow; |
|
|
|
|
height: 270px; |
|
|
|
|
background: #ffffff; |
|
|
|
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
|
|
|
|
border-radius: 6px 6px 6px 6px; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 16px; |
|
|
|
|
} |
|
|
|
|
.classList { |
|
|
|
|
@ -245,106 +230,155 @@ onMounted(() => { |
|
|
|
|
justify-content: space-between; |
|
|
|
|
} |
|
|
|
|
.lesson { |
|
|
|
|
// background-color: pink; |
|
|
|
|
padding-top: 5px; |
|
|
|
|
margin-bottom: 16px; |
|
|
|
|
height: 280px; |
|
|
|
|
height: 290px; |
|
|
|
|
background: #ffffff; |
|
|
|
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
|
|
|
|
border-radius: 6px 6px 6px 6px; |
|
|
|
|
overflow: hidden; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
// flex-direction: column; |
|
|
|
|
} |
|
|
|
|
.con { |
|
|
|
|
display: flex; |
|
|
|
|
// justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
// justify-content: space-between; |
|
|
|
|
// height: 100%; |
|
|
|
|
// align-items: center; |
|
|
|
|
// margin: 0 auto; |
|
|
|
|
// background-color: yellow; |
|
|
|
|
padding: 5px; |
|
|
|
|
margin-top: 5px; |
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
// flex-direction: column; |
|
|
|
|
.button { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
height: 30px; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
color: #0080ff; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 30px; |
|
|
|
|
margin: 0 10px; |
|
|
|
|
border: 2px solid #ccc; |
|
|
|
|
} |
|
|
|
|
a { |
|
|
|
|
text-decoration: none; |
|
|
|
|
} |
|
|
|
|
justify-content: space-evenly; |
|
|
|
|
padding-bottom: 30px; |
|
|
|
|
} |
|
|
|
|
.button { |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
height: 30px; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
// color: #0080ff; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 30px; |
|
|
|
|
margin: 5px 10px; |
|
|
|
|
border: 2px solid #ccc; |
|
|
|
|
} |
|
|
|
|
a { |
|
|
|
|
text-decoration: none; |
|
|
|
|
} |
|
|
|
|
.some, |
|
|
|
|
.stu { |
|
|
|
|
height: 384px; |
|
|
|
|
padding-top: 5px; |
|
|
|
|
height: 380px; |
|
|
|
|
// background: #9f7b7b; |
|
|
|
|
background: #ffffff; |
|
|
|
|
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1); |
|
|
|
|
border-radius: 6px 6px 6px 6px; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
} |
|
|
|
|
.lessonlist-content { |
|
|
|
|
// .lessonlist-content { |
|
|
|
|
// display: flex; |
|
|
|
|
// justify-content: center; |
|
|
|
|
// align-items: center; |
|
|
|
|
// margin: 0 auto; |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// } |
|
|
|
|
ul { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
flex-direction: column; |
|
|
|
|
// justify-content: center; |
|
|
|
|
// align-items: center; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lessonlist-item { |
|
|
|
|
width: 270px; |
|
|
|
|
height: 180px; |
|
|
|
|
height: 50px; |
|
|
|
|
// margin: 0 auto; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); |
|
|
|
|
// background-color: #0080ff; |
|
|
|
|
box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); |
|
|
|
|
display: flex; |
|
|
|
|
padding: 5px; |
|
|
|
|
margin: 5px; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
// align-items: center; |
|
|
|
|
} |
|
|
|
|
.lessonlist-item-img { |
|
|
|
|
width: 100%; |
|
|
|
|
height: 140px; |
|
|
|
|
// justify-content: center; |
|
|
|
|
width: 17%; |
|
|
|
|
height: 40px; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lessonlist-item-info { |
|
|
|
|
padding: 10px; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lesson_container { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
width: 80%; |
|
|
|
|
height: 40px; |
|
|
|
|
background-color: #ffffff; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
padding: 5px 0; |
|
|
|
|
justify-content: space-evenly; |
|
|
|
|
h3 { |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
p { |
|
|
|
|
// display: flex; |
|
|
|
|
// justify-content: end; |
|
|
|
|
font-size: small; |
|
|
|
|
color: #a0a5ab; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lessonlist-item-info { |
|
|
|
|
padding: 10px; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
} |
|
|
|
|
.lessonlist-item-info h3 { |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
} |
|
|
|
|
.lessonlist-item-info .p { |
|
|
|
|
width: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: end; |
|
|
|
|
} |
|
|
|
|
.lessonlist-item-info p { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #a7c4f7; |
|
|
|
|
line-height: 1.5; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
border: 2px solid #a7c4f7; |
|
|
|
|
border-radius: 10px; |
|
|
|
|
margin-bottom: 5px; |
|
|
|
|
width: 50px; |
|
|
|
|
margin: 5px; |
|
|
|
|
text-align: center; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
// .lesson_container { |
|
|
|
|
// display: flex; |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// justify-content: space-between; |
|
|
|
|
// margin: 0 auto; |
|
|
|
|
// padding: 5px 0; |
|
|
|
|
// |
|
|
|
|
|
|
|
|
|
// .lesson_container { |
|
|
|
|
// display: flex; |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// justify-content: space-between; |
|
|
|
|
// margin: 0 auto; |
|
|
|
|
// padding: 5px 0; |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// .lessonlist-item-info { |
|
|
|
|
// padding: 10px; |
|
|
|
|
// display: flex; |
|
|
|
|
// flex-direction: column; |
|
|
|
|
// justify-content: space-between; |
|
|
|
|
// } |
|
|
|
|
// .lessonlist-item-info h3 { |
|
|
|
|
// font-size: 16px; |
|
|
|
|
// font-weight: bold; |
|
|
|
|
// margin-bottom: 5px; |
|
|
|
|
// } |
|
|
|
|
// .lessonlist-item-info .p { |
|
|
|
|
// width: 100%; |
|
|
|
|
// display: flex; |
|
|
|
|
// justify-content: end; |
|
|
|
|
// } |
|
|
|
|
// .lessonlist-item-info p { |
|
|
|
|
// font-size: 12px; |
|
|
|
|
// color: #a7c4f7; |
|
|
|
|
// line-height: 1.5; |
|
|
|
|
// box-sizing: border-box; |
|
|
|
|
// border: 2px solid #a7c4f7; |
|
|
|
|
// border-radius: 10px; |
|
|
|
|
// margin-bottom: 5px; |
|
|
|
|
// width: 50px; |
|
|
|
|
// margin: 5px; |
|
|
|
|
// text-align: center; |
|
|
|
|
// cursor: pointer; |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// .container { |
|
|
|
|
// display: flex; |
|
|
|
|
|
ww
4 months ago