hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-23 17:55:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

教师节

Browse Source
This commit is contained in:
nisen
2023-08-29 10:36:17 +08:00
parent db2936f051
commit 274896ec1f
4 changed files with 157 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/views/grateful/GratefulHomePage.vue
View File

@@ -1,5 +1,78 @@
<template>
<div>
<!-- 教师赋能 -->
<div class="xindex-content">
<div class="modules xcontent2">
<div class="xcontent2-main">
<div class="gratefulNav">
<div class="navImg">
<img src="../../assets/images/grateful/famousTeacher.png" alt="">
</div>
<div class="navNotice">
<div id="fixd-box">
<div class="portal-ranking ranking-bg">
<div style="display: flex;justify-content: space-between;">
<p class="ranking-title">通知</p>
<router-link to="/grateful/gratefulNotice" style="font-size: 14px;">查看更多</router-link>
</div>
<ul class="ranking-data">
<li v-for="(item, index) in 6" :key="index"
style="cursor: pointer;margin-top:10px;line-height: 22px;">
<router-link :to="'/case/detail?id=' + item.id" style="display: flex;align-items: center;">
<span class="portal-right-text blue-one">
<img :src="getPic(index)" alt="">
</span>
<div class="portal-title-desc"
style="flex: 1;font-size: 14px;display: flex;justify-content: space-between;">
<span class="title-line-ellipsis " style="width: 130px;">哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
<span>2023-09-09</span>
</div>
</router-link>
</li>
</ul>
</div>
</div>
</div>
<div class="navTool">
<div id="fixd-box">
<div class="portal-ranking ranking-bg1">
<div style="display: flex;justify-content: space-between;">
<p class="ranking-title">工具下载</p>
<router-link to="/grateful/toolDown" style="font-size: 14px;">查看更多</router-link>
</div>
<ul class="ranking-data">
<li v-for="(item, index) in 6" :key="index" style="cursor: pointer;margin-top:10px;line-height: 22px;"
class="title-line-ellipsis">
<router-link :to="'/case/detail?id=' + item.id">
<span class="portal-right-text orange-one" v-if="index == 0">
<img :src="`${webBaseUrl}/images/list-01.png`" alt="">
</span>
<span class="portal-right-text orange-tow" v-if="index == 1">
<img :src="`${webBaseUrl}/images/list02.png`" alt="">
</span>
<span class="portal-right-text orange-three" v-if="index == 2">
<img :src="`${webBaseUrl}/images/list03.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 3">
<img :src="`${webBaseUrl}/images/list04.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 4">
<img :src="`${webBaseUrl}/images/list05.png`" alt="">
</span>
<span class="portal-right-text" v-if="index == 5">
<img :src="`${webBaseUrl}/images/listblue06.png`" alt="">
</span>
<span class="portal-title-desc" style="font-size: 14px;">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</span>
</router-link>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 教师赋能 -->
<div class="xindex-content">
<div class="modules xcontent2">
@@ -8,7 +81,7 @@
<div class="modules-title xindex-main">
<span class="modules-text">教师赋能</span>
<span class="more">
<router-link to="/grateful/teacherEmpowerment">查看更多>></router-link>
<router-link to="/grateful/teacherEmpowerment">查看更多</router-link>
</span>
</div>
<div class="modules-list">
@@ -272,6 +345,9 @@ export default {
},
},
methods: {
getPic(index) {
return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
},
handleChecked(list) {
if (list.length > 1) {
let one = list.splice(1);
@@ -754,6 +830,29 @@ export default {
</script>
<style scoped lang="scss">
.title-line-ellipsis {
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
box-sizing: border-box;
word-break: break-all;
overflow: hidden;
}
.gratefulNav {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
grid-gap: 60px;
.navImg {
img {
width: 100%;
height: 100%;
}
}
}
.textarea {
width: 600px;
@@ -764,6 +863,7 @@ export default {
.team {
display: grid;
.teamImg {
width: 749px;
height: 478px;
@@ -927,6 +1027,14 @@ export default {
box-sizing: border-box;
}
.one-line-ellipsis {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
box-sizing: border-box;
}
.course-card {
padding-bottom: 22px;
box-sizing: border-box;

101
src/views/grateful/index.vue
View File

@@ -7,55 +7,25 @@
<div id="container" style="z-index: 99" v-if="resonimg.length == 1">
<!-- 当轮播图等于一张时 -->
<swiper :options="swiperOptiontwo">
<swiper-slide
style="margin: 0 auto"
v-for="(item, idx) in resonimg"
:key="'a' + idx"
class="swiper-slide games pointer"
>
<div
class="bannbox"
:style="{
background: `url(${
fileBaseUrl + item.image
<swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'a' + idx"
class="swiper-slide games pointer">
<div class="bannbox" :style="{
background: `url(${fileBaseUrl + item.image
}) no-repeat 100% / 100%`,
}"
></div>
<img
class="banner-img"
style="margin: 0 auto"
:src="fileBaseUrl + item.image"
alt=""
/>
}"></div>
<img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
</swiper-slide>
</swiper>
</div>
<div id="container" style="z-index: 99" v-else>
<swiper
:options="swiperOption"
ref="mySwiper"
v-if="resonimg.length > 1"
>
<swiper-slide
style="margin: 0 auto"
v-for="(item, idx) in resonimg"
:key="'b' + idx"
class="swiper-slide games pointer"
>
<div
class="bannbox"
:style="{
background: `url(${
fileBaseUrl + item.image
<swiper :options="swiperOption" ref="mySwiper" v-if="resonimg.length > 1">
<swiper-slide style="margin: 0 auto" v-for="(item, idx) in resonimg" :key="'b' + idx"
class="swiper-slide games pointer">
<div class="bannbox" :style="{
background: `url(${fileBaseUrl + item.image
}) no-repeat 100% / 100%`,
}"
></div>
<img
class="banner-img"
style="margin: 0 auto"
:src="fileBaseUrl + item.image"
alt=""
/>
}"></div>
<img class="banner-img" style="margin: 0 auto" :src="fileBaseUrl + item.image" alt="" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
@@ -727,26 +697,38 @@ export default {
</script>
<style scoped lang="scss">
.grateful{
.grateful {
width: 100%;
img{
&::before {
content: url('../../assets/images/grateful/logo.png');
position: absolute;
top: 30px;
left: 40px;
}
img {
width: 100%;
}
}
.team{
.team {
display: grid;
// grid-template-columns: 1.5fr 1fr 1fr;
.teamImg{
.teamImg {
width: 749px;
height: 478px;
}
}
.float-tools {
position: fixed;
right: 0;
bottom: 50%;
z-index: 999;
.content {
width: 152px;
height: 55px;
@@ -755,11 +737,13 @@ export default {
background: linear-gradient(86deg, #00C8FF 0%, #167CFF 100%);
border-radius: 100px 0px 0px 100px;
padding: 20px;
img {
width: 20px;
height: 20px;
}
span{
span {
margin-left: 10px;
color: #fff;
font-size: 20px;
@@ -803,33 +787,35 @@ export default {
.course-banner {
height: 520px;
.swiper-button-prev {
height: 38px;
padding: 0 16px;
background: rgba($color: #000000, $alpha: 0.8)
url("../../assets/images/icon/ban-left.png") no-repeat;
background: rgba($color: #000000, $alpha: 0.8) url("../../assets/images/icon/ban-left.png") no-repeat;
background-size: 12px 18px;
background-position: 16px 10px;
bottom: 66px;
border-radius: 19px 0 0 19px;
}
.swiper-button-next {
height: 38px;
// right: 52.65%;
bottom: 66px;
top: auto;
padding: 0 16px;
background: rgba($color: #000000, $alpha: 0.1)
url("../../assets/images/icon/ban-right.png") no-repeat;
background: rgba($color: #000000, $alpha: 0.1) url("../../assets/images/icon/ban-right.png") no-repeat;
background-size: 12px 18px;
background-position: 6px 10px;
border-radius: 0 19px 19px 0;
}
.swiper-pagination-bullets {
// background: #000;
left: 60px;
bottom: 66px;
}
::v-deep .swiper-pagination {
line-height: 25px;
height: 32px;
@@ -839,6 +825,7 @@ export default {
left: 45%;
padding: 0 20px;
border-radius: 19px;
.swiper-pagination-bullet {
position: relative;
width: 25px;
@@ -849,6 +836,7 @@ export default {
// background: rgba($color: #fff, $alpha: 0.5);
border-radius: 2px;
}
.swiper-pagination-bullet::before {
content: "";
position: absolute;
@@ -857,6 +845,7 @@ export default {
left: -2px;
right: -2px;
}
.swiper-pagination-bullet-active {
height: 5px;
opacity: 1 !important;
@@ -866,6 +855,7 @@ export default {
// background: rgba($color: #fff, $alpha: 0.8);
border-radius: 2px;
}
.swiper-container {
// background-color: rgba($color: #000000, $alpha: 0.2);
}
@@ -898,6 +888,7 @@ export default {
.course-image-box {
position: relative;
.course-type {
position: absolute;
top: 0px;
@@ -980,9 +971,11 @@ export default {
/*早期浏览器*/
user-select: none;
}
.course-title-box {
display: flex;
}
.course-author {
display: flex;
justify-content: space-between;
@@ -1083,6 +1076,7 @@ export default {
.modules-list {
margin-top: 30px;
.case-card {
margin-bottom: 15px;
@@ -1162,6 +1156,7 @@ export default {
.article-card-box {
.article-info-image-box {
border-radius: 4px;
.article-info {
height: 400px;
@@ -1282,6 +1277,7 @@ export default {
position: relative;
background: rgba($color: #04243c, $alpha: 0.04);
border-radius: 4px;
.qa-views {
position: absolute;
color: #6e7b84;
@@ -1294,5 +1290,4 @@ export default {
}
}
}
</style>