mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-16 22:36:43 +08:00
教师节
This commit is contained in:
@@ -4,36 +4,38 @@
|
||||
<div class="xindex-content" style="padding: 0">
|
||||
<div class="modules xcontent2">
|
||||
<div class="xcontent2-main">
|
||||
<div class="modules-list" style="margin-top: 0; padding: 48px">
|
||||
<!--内容列表内容-->
|
||||
<div
|
||||
v-for="(course, ccidx) in 5"
|
||||
:key="'cc' + ccidx"
|
||||
class="toolEvery"
|
||||
style="position: relative"
|
||||
>
|
||||
HHh
|
||||
<div class="modules-list" style="margin-top: 0;">
|
||||
<div class="bgc">
|
||||
<div class="title">工具下载</div>
|
||||
</div>
|
||||
<div style="padding: 0 20px;border-radius: 8px 8px 0 0;">
|
||||
<!--内容列表内容-->
|
||||
<div v-for="(course, ccidx) in 5" :key="'cc' + ccidx" class="toolEvery">
|
||||
<div class="contnet">
|
||||
MNT销量突破促经营哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
|
||||
</div>
|
||||
<div class="btn">
|
||||
<button>立即下载</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<pagination :size="courseList.pageSize" :total="courseList.count" :page="courseList.pageIndex"
|
||||
layout="total, prev, pager, next, jumper" @change-size="changePageSize" @change-page="loadData">
|
||||
</pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="xcontent2-minor" style="margin-left: 25px">
|
||||
<div class="portal-ranking ranking-bg">
|
||||
<p class="ranking-title">教师赋能排行榜</p>
|
||||
<ul class="xindex-ranking-course">
|
||||
<li
|
||||
class="xindex-ranking-li"
|
||||
v-for="(item, cindex) in 10"
|
||||
:key="'cc' + cindex"
|
||||
>
|
||||
<li class="xindex-ranking-li" v-for="(item, cindex) in 10" :key="'cc' + cindex">
|
||||
<a style="display: inherit">
|
||||
<span class="portal-right-text blue-one">
|
||||
<img :src="getPic(cindex)" alt="" />
|
||||
</span>
|
||||
<span
|
||||
class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
|
||||
style="font-size: 14px; color: #04243c"
|
||||
>哈哈哈哈</span
|
||||
>
|
||||
<span class="portal-title-desc index-one-line-ellipsis title-line-ellipsis"
|
||||
style="font-size: 14px; color: #04243c">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -46,25 +48,73 @@
|
||||
<script>
|
||||
export default {
|
||||
data: () => {
|
||||
return {};
|
||||
return {
|
||||
courseList: {
|
||||
list: [],
|
||||
count: 0,
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
getPic(index) {
|
||||
return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
|
||||
},
|
||||
changePageSize(pageSize) {
|
||||
this.courseList.pageSize = pageSize;
|
||||
},
|
||||
loadData(pindex) {
|
||||
console.log(pindex);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang='scss'>
|
||||
.modules-list {
|
||||
height: 555px;
|
||||
min-height: 555px;
|
||||
background: #ffffff;
|
||||
border-radius: 8px;
|
||||
|
||||
.bgc {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
height: 80px;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(56, 125, 247, 0.2) 0%,
|
||||
rgba(166, 168, 255, 0) 100%);
|
||||
border-radius: 8px 8px 0 0;
|
||||
|
||||
.title {
|
||||
padding: 20px 20px 0 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.toolEvery {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
opacity: 0.2;
|
||||
border-bottom: 1px solid #999999;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid rgba($color: #999, $alpha: 0.2);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.btn {
|
||||
button {
|
||||
width: 140px;
|
||||
height: 40px;
|
||||
background: #387df7;
|
||||
border: 0;
|
||||
box-shadow: 1px 2px 8px 1px rgba(56, 125, 247, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user