mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-08 18:36:43 +08:00
892 lines
24 KiB
Vue
892 lines
24 KiB
Vue
<template>
|
||
<div>
|
||
<div class="course-banner">
|
||
<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
|
||
}) center center no-repeat`,
|
||
}"></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
|
||
}) center center no-repeat`,
|
||
}"></div>
|
||
<!-- <img class="banner-img" style="margin: 0 auto;" :src="fileBaseUrl + item.image" alt="" /> -->
|
||
</swiper-slide>
|
||
<div class="swiper-pagination" slot="pagination"></div>
|
||
</swiper>
|
||
</div>
|
||
</div>
|
||
<!-- 图片 -->
|
||
<div class="xindex-content">
|
||
<div class="modules xcontent2">
|
||
<div class="xcontent2-main">
|
||
<div class="gratefulNav">
|
||
<div class="navImg">
|
||
<router-link to="/grateful/teacherOpinion">
|
||
<img src="../../assets/images/grateful/famousTeacher.png" alt="">
|
||
</router-link>
|
||
</div>
|
||
<div class="navNotice">
|
||
<div id="fixd-box" style="height: 100%;">
|
||
<div class="portal-ranking ranking-bg" style="height: 100%;display: flex;flex-direction: column;"
|
||
:class="showNoticeImg ? 'allPadding' : ''">
|
||
<div :class="showNoticeImg ? 'noticeBgc' : ''">
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<p class="ranking-title">通知</p>
|
||
<router-link v-if="courseList.noticeList.length >= 6" to="/grateful/gratefulNotice"
|
||
style="font-size: 14px;">查看更多</router-link>
|
||
</div>
|
||
<ul>
|
||
<li v-for="(item, index) in courseList.noticeList" :key="index"
|
||
style="cursor: pointer;line-height: 22px;" class="liList">
|
||
<router-link :to="'/grateful/noticeDetail?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="flex: 1;">{{ item.name }}</span>
|
||
<span>{{ item.createTime.split(' ')[0] }}</span>
|
||
</div>
|
||
</router-link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="navTool">
|
||
<div id="fixd-box" style="height: 100%;">
|
||
<div class="portal-ranking ranking-bg1" style="height: 100%;display: flex;flex-direction: column;"
|
||
:class="showToolImg ? 'allPadding' : ''">
|
||
<div :class="showToolImg ? 'toolBgc' : ''">
|
||
<div style="display: flex;justify-content: space-between;">
|
||
<p class="ranking-title">工具下载</p>
|
||
<router-link v-if="courseList.toolList.length >= 6" to="/grateful/toolDown"
|
||
style="font-size: 14px;">查看更多</router-link>
|
||
</div>
|
||
<ul>
|
||
<li v-for="(item, index) in courseList.toolList" :key="index"
|
||
style="cursor: pointer;line-height: 22px;" class="title-line-ellipsis liList"
|
||
@click="downTool(item)">
|
||
<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;">{{ item.name.split('.')[0] }}</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 教师赋能 -->
|
||
<div class="xindex-content">
|
||
<div class="modules xcontent2">
|
||
<div class="xcontent2-main">
|
||
<!--内容块-->
|
||
<div class="modules-title xindex-main">
|
||
<span class="modules-text">教师赋能</span>
|
||
<span class="more">
|
||
<router-link to="/grateful/teacherEmpowerment">查看更多</router-link>
|
||
</span>
|
||
</div>
|
||
<div class="modules-list list">
|
||
<!--内容列表内容-->
|
||
<div v-for="(course, ccidx) in courseList.list" :key="'cc' + ccidx" class="xindex-course"
|
||
style="position: relative;margin-right: 0;">
|
||
<a @click="toCourseDetail(course)">
|
||
<div class="xindex-course-image">
|
||
<course-image :course="course"></course-image>
|
||
<span v-if="course.type == 20 || course.type == 10" class="course-type">录播课</span>
|
||
<span v-if="course.type == 30" class="course-type">面授课</span>
|
||
<span v-if="course.type == 40" class="course-type">学习项目</span>
|
||
</div>
|
||
<div style="width: 80%" :title="course.name" class="course-title portal-title-tow two-line-ellipsis">
|
||
{{ course.name }}
|
||
</div>
|
||
<div class="course-author">
|
||
<div class="course-author-left">
|
||
{{ course.teacher }}
|
||
<span class="study-num">{{ formatNum(course.studies) }}人学习</span>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div v-if="course.score != '0'">
|
||
<span class="course-score-value" style="margin-left: 10px">{{ toScore(Number(course.score))
|
||
}}分</span>
|
||
</div>
|
||
<div v-else class="course-score-no">未评分</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="float-tools" @click="() => (gratefulVisible = !gratefulVisible)">
|
||
<div class="content">
|
||
<img src="../../assets/images/grateful/suggestion.png" alt="" />
|
||
<span>给点建议</span>
|
||
</div>
|
||
</div>
|
||
<!-- 意见 -->
|
||
<el-dialog :close-on-click-modal="false" width="629px" :visible.sync="gratefulVisible" :append-to-body="true"
|
||
@closed="closeDlg">
|
||
<div class="dialogContent">
|
||
<div class="dialogTop">
|
||
<div class="words">
|
||
<div>欢迎留下您的宝贵建议</div>
|
||
</div>
|
||
</div>
|
||
<el-form :model="form">
|
||
<el-form-item>
|
||
<el-input type="textarea" placeholder="请输入内容......" v-model="form.textarea" class="textarea"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<div style="display: flex; justify-content: center">
|
||
<el-button style="width: 100px;" @click="closeDlg">取消</el-button>
|
||
<el-button style="width: 100px;" @click="submitNotice" type="primary">确认</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import apiCourseStudy from "@/api/modules/courseStudy.js";
|
||
import courseImage from "@/components/Course/courseImage.vue";
|
||
import { toScore, formatUserNumber } from "@/utils/tools.js";
|
||
import { saveOpinion, noticeList, courselList, toolList, carouselList, toolDown } from '@/api/modules/grateful.js'
|
||
export default {
|
||
name: "Grateful",
|
||
components: {
|
||
courseImage,
|
||
},
|
||
data() {
|
||
return {
|
||
showNoticeImg: false,
|
||
showToolImg: false,
|
||
form: {
|
||
textarea: "",
|
||
},
|
||
gratefulVisible: false,
|
||
formatNum: formatUserNumber,
|
||
toScore,
|
||
// 列表
|
||
courseList: {
|
||
num: 12,
|
||
orderType: 2,
|
||
list: [],
|
||
noticeList: [],
|
||
toolList: []
|
||
},
|
||
resonimg: [],
|
||
fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
|
||
swiperOptiontwo: {
|
||
autoplay: false,
|
||
// noSwiping: true,
|
||
},
|
||
resonimg: [],
|
||
swiperOption: {
|
||
autoplay: {
|
||
delay: 2000,
|
||
disableOnInteraction: false, //解决滑动后不能轮播的问题
|
||
},
|
||
speed: 3000, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
|
||
loop: true, //循环切换
|
||
peed: 300, //循环速度
|
||
scrollbar: ".swiper-scrollbar",
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
// type : 'progressbar', //分页器形状
|
||
clickable: true, //点击分页器的指示点分页器会控制Swiper切换
|
||
},
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
}
|
||
};
|
||
},
|
||
mounted() {
|
||
this.couresreso();
|
||
this.getCourseData(1);
|
||
this.getNoticeData()
|
||
this.getToolData()
|
||
},
|
||
methods: {
|
||
downTool(toolInfo) {
|
||
console.log(toolInfo);
|
||
window.open(`/activityApi/xboe/m/boe/tools/url/download?urlStr=${process.env.VUE_APP_BOE_WEB_URL}/upload${toolInfo.filePath}&fileName=${toolInfo.name}`)
|
||
// toolDown({
|
||
// urlStr: `${process.env.VUE_APP_BOE_WEB_URL}/upload${toolInfo.filePath}`,
|
||
// fileName: toolInfo.name
|
||
// }).then((result) => {
|
||
// const link = document.createElement('a');// 创建a标签
|
||
// let blob = new Blob([result.data], { type: '' }); // 设置文件类型
|
||
// link.style.display = "none";
|
||
// link.href = URL.createObjectURL(blob); // 创建URL
|
||
// link.setAttribute("download", `${toolInfo.name}`);
|
||
// document.body.appendChild(link);
|
||
// link.click();
|
||
// URL.revokeObjectURL(link.href);
|
||
// document.body.removeChild(link);
|
||
// })
|
||
},
|
||
couresreso() {
|
||
carouselList().then((res) => {
|
||
console.log(res);
|
||
const list = res.data.records.map(item => {
|
||
return {
|
||
image: item.picPath,
|
||
name: item.displayPage,
|
||
JumpUrl: '',
|
||
bgcolor: '',
|
||
...item
|
||
}
|
||
});
|
||
this.resonimg = list;
|
||
})
|
||
},
|
||
submitNotice() {
|
||
if (!this.form.textarea) return this.$message({ message: '请输入内容', type: 'error' })
|
||
saveOpinion({ content: this.form.textarea }).then(() => {
|
||
this.$message({ message: '提交成功', type: 'success' })
|
||
this.closeDlg()
|
||
})
|
||
},
|
||
getPic(index) {
|
||
return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png";
|
||
},
|
||
closeDlg() {
|
||
this.form.textarea = ''
|
||
this.gratefulVisible = false
|
||
},
|
||
toCourseDetail(item) {
|
||
console.log(item);
|
||
if (item.type == 10) {
|
||
//console.log("直接进入学习页面");
|
||
this.$router.push("/course/studyindex?id=" + item.courseId);
|
||
} else if (item.type == 20) {
|
||
apiCourseStudy.hasSignup(item.courseId).then((rs) => {
|
||
if (rs.status == 200) {
|
||
this.$router.push("/course/studyindex?id=" + item.courseId);
|
||
} else {
|
||
this.$router.push("/course/detail?id=" + item.courseId);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
getCourseData(pageIndex) {
|
||
courselList({
|
||
pageNo: pageIndex,
|
||
pageSize: 8
|
||
}).then((res) => {
|
||
if (res.code == 200 && res.data.records.length > 0) {
|
||
console.log(res.data.records, '之前的');
|
||
// res.data.records.map((item) => {
|
||
// return {
|
||
// ...item,
|
||
// coverImg:item.coverImg
|
||
// }
|
||
// })
|
||
this.courseList.list = res.data.records;
|
||
} else {
|
||
console.log("加载课程信息失败:" + res.error);
|
||
}
|
||
});
|
||
},
|
||
getNoticeData() {
|
||
noticeList({
|
||
pageNo: 1,
|
||
pageSize: 6,
|
||
isTop: ''
|
||
}).then((res) => {
|
||
console.log(res, '通知');
|
||
if (res.data.records.length <= 3) {
|
||
this.showNoticeImg = true
|
||
}
|
||
this.courseList.noticeList = res.data.records || []
|
||
})
|
||
},
|
||
getToolData() {
|
||
toolList({
|
||
pageNo: 1,
|
||
pageSize: 6
|
||
}).then((result) => {
|
||
if (result.data.records.length <= 3) {
|
||
this.showToolImg = true
|
||
}
|
||
console.log(result.data.records, '哈哈哈哈');
|
||
this.courseList.toolList = result.data.records || []
|
||
})
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.allPadding {
|
||
padding: 0px;
|
||
}
|
||
|
||
.noticeBgc {
|
||
height: 100%;
|
||
width: 100%;
|
||
background: url('../../assets/images/grateful/noticeBgc.png') no-repeat;
|
||
background-size: 100%;
|
||
background-position: left bottom;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.toolBgc {
|
||
height: 100%;
|
||
width: 100%;
|
||
background: url('../../assets/images/grateful/toolBgc.png') no-repeat;
|
||
background-size: 100%;
|
||
background-position: left bottom;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
@media screen and (max-width: 1366px) {
|
||
.swiper-pagination {
|
||
top: 310px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1680px) and (min-width:1367px) {
|
||
.swiper-pagination {
|
||
top: 360px;
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 1920px) and (min-width: 1681px) {
|
||
.swiper-pagination {
|
||
top: 360px;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1921px) {
|
||
.swiper-pagination {
|
||
top: 360px;
|
||
}
|
||
}
|
||
|
||
.bannbox {
|
||
width: 100%;
|
||
height: 420px;
|
||
text-align: center;
|
||
// filter: blur(5px);
|
||
z-index: -1;
|
||
background-size: 100%;
|
||
}
|
||
|
||
::v-deep.swiper-slide .games .swiper-slide-active {
|
||
text-align: center !important;
|
||
}
|
||
|
||
#container {
|
||
position: absolute;
|
||
height: 420px;
|
||
top: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.banner-img {
|
||
height: 420px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
transform: (-50%, -50%);
|
||
}
|
||
|
||
.course-banner {
|
||
height: 420px;
|
||
position: relative;
|
||
|
||
&::before {
|
||
content: url(../../assets/images/grateful/logo.png);
|
||
position: absolute;
|
||
top: 20px;
|
||
left: 40px;
|
||
z-index: 100
|
||
}
|
||
|
||
.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-size: 12px 18px;
|
||
background-position: 16px 10px;
|
||
bottom: 66px;
|
||
border-radius: 19px 0 0 19px;
|
||
}
|
||
|
||
.swiper-button-next {
|
||
height: 38px;
|
||
bottom: 66px;
|
||
top: auto;
|
||
padding: 0 16px;
|
||
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 {
|
||
left: 60px;
|
||
bottom: 66px;
|
||
}
|
||
|
||
::v-deep .swiper-pagination {
|
||
line-height: 25px;
|
||
height: 32px;
|
||
border-radius: 19px;
|
||
width: auto;
|
||
left: 45%;
|
||
padding: 0 20px;
|
||
border-radius: 19px;
|
||
|
||
.swiper-pagination-bullet {
|
||
position: relative;
|
||
width: 25px;
|
||
height: 5px;
|
||
margin-top: 10px;
|
||
background: #fff;
|
||
opacity: 1 !important;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.swiper-pagination-bullet::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -20px;
|
||
bottom: -20px;
|
||
left: -2px;
|
||
right: -2px;
|
||
}
|
||
|
||
.swiper-pagination-bullet-active {
|
||
height: 5px;
|
||
opacity: 1 !important;
|
||
margin-top: 10px;
|
||
width: 25px;
|
||
background: #387df7;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-dialog__body {
|
||
background: linear-gradient(180deg, rgba(56, 125, 247, 0.2) 0%, rgba(166, 168, 255, 0) 100%) no-repeat;
|
||
background-size: 100% 136px;
|
||
}
|
||
|
||
::v-deep .el-dialog__header {
|
||
background: linear-gradient(180deg, rgba(56, 125, 247, 0.2) 0%, rgba(166, 168, 255, 0) 100%) no-repeat;
|
||
background-size: 100% 1000px;
|
||
}
|
||
|
||
.dialogContent {
|
||
|
||
.dialogTop {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 40px;
|
||
|
||
.words {
|
||
font-size: 26px;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
line-height: 37px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.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;
|
||
column-gap: 40px;
|
||
|
||
.navImg {
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.textarea {
|
||
width: 100%;
|
||
|
||
::v-deep .el-textarea__inner {
|
||
min-height: 300px !important;
|
||
}
|
||
}
|
||
|
||
.float-tools {
|
||
position: fixed;
|
||
right: 0;
|
||
bottom: 40%;
|
||
z-index: 999;
|
||
cursor: pointer;
|
||
|
||
.content {
|
||
width: 152px;
|
||
height: 55px;
|
||
display: flex;
|
||
align-items: center;
|
||
background: linear-gradient(86deg, #00c8ff 0%, #167cff 100%);
|
||
border-radius: 100px 0px 0px 100px;
|
||
padding: 20px;
|
||
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
|
||
span {
|
||
margin-left: 10px;
|
||
color: #fff;
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.xindex-course-image:hover {
|
||
transform: scale(1.2) translateY(-15px);
|
||
transition: all 0.6s;
|
||
}
|
||
|
||
|
||
.two-line-ellipsis {
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
// 内容部分
|
||
.modules {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
|
||
.modules-title {
|
||
padding: 0;
|
||
|
||
.modules-text {
|
||
height: 28px;
|
||
font-size: 20px;
|
||
font-family: PingFangSC-Semibold-, PingFangSC-Semibold;
|
||
font-weight: 700;
|
||
color: #333333;
|
||
}
|
||
|
||
.recommend {
|
||
vertical-align: text-bottom;
|
||
height: 26px;
|
||
}
|
||
|
||
.quyer-tag {
|
||
margin-left: 15px;
|
||
|
||
a {
|
||
color: #333333;
|
||
font-size: 14px;
|
||
margin: 0 15px;
|
||
display: inline-block;
|
||
text-decoration: none;
|
||
outline: none;
|
||
}
|
||
|
||
.current {
|
||
width: 44px;
|
||
height: 26px;
|
||
background: #387df7;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
line-height: 26px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.more {
|
||
float: right;
|
||
margin-top: 7px;
|
||
color: #333333;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
.modules-list {
|
||
margin-top: 30px;
|
||
|
||
.case-card {
|
||
margin-bottom: 15px;
|
||
|
||
.case-info-image-box {
|
||
position: relative;
|
||
|
||
.case-info {
|
||
width: 385px;
|
||
|
||
.case-info-title {
|
||
font-size: 18px;
|
||
color: #343434;
|
||
margin-bottom: 5px;
|
||
|
||
.case-info-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
float: right;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.case-info-summary {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
height: 82px;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 160px;
|
||
height: 105px;
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.case-info-box {
|
||
.case-info {
|
||
.case-info-title {
|
||
font-size: 18px;
|
||
color: #343434;
|
||
margin-bottom: 5px;
|
||
|
||
.case-info-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
float: right;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
|
||
.case-info-summary {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
height: 82px;
|
||
line-height: 18px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.case-other-info {
|
||
height: 40px;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.article-card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
|
||
.article-card-left {
|
||
.article-card-box {
|
||
.article-info-image-box {
|
||
border-radius: 4px;
|
||
|
||
.article-info {
|
||
height: 400px;
|
||
|
||
.article-info-title {
|
||
font-size: 16px;
|
||
color: #00253e;
|
||
font-weight: 500;
|
||
margin-bottom: 5px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.article-info-summary {
|
||
font-size: 14px;
|
||
color: #6e7b84;
|
||
height: 160px;
|
||
line-height: 22px;
|
||
}
|
||
}
|
||
|
||
img {
|
||
width: 470px;
|
||
height: 330px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-card-right {
|
||
flex: 1;
|
||
margin-left: 28px;
|
||
|
||
.article-card-box {
|
||
margin-bottom: 16px;
|
||
padding-bottom: 16px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0px;
|
||
padding-bottom: 0px;
|
||
}
|
||
|
||
.article-info-box {
|
||
.article-info {
|
||
display: flex;
|
||
|
||
.article-image {
|
||
width: 140px;
|
||
height: 105px;
|
||
margin-top: 10px;
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.article-body {
|
||
flex: 1;
|
||
|
||
.article-info-title {
|
||
font-size: 18px;
|
||
color: #343434;
|
||
margin-bottom: 5px;
|
||
|
||
.article-info-time {
|
||
font-size: 12px;
|
||
color: #999999;
|
||
float: right;
|
||
margin-top: 8px;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
.article-info-summary {
|
||
padding-top: 9px;
|
||
font-size: 14px;
|
||
color: #666666;
|
||
height: 43px;
|
||
line-height: 18px;
|
||
font-weight: 500;
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.article-card-box:not(:last-child) {
|
||
border-bottom: 1px solid #ededed;
|
||
}
|
||
}
|
||
|
||
.article-other-info {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.qa-card {
|
||
box-sizing: border-box;
|
||
box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.05);
|
||
border-radius: 8px;
|
||
background: #fff;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.qa-top {
|
||
& span:first-child {
|
||
height: 24px;
|
||
background: rgba($color: #387df7, $alpha: 0.05);
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
color: #387df7;
|
||
}
|
||
|
||
span {
|
||
color: #6e7b84;
|
||
}
|
||
}
|
||
|
||
.qa-center {
|
||
position: relative;
|
||
background: rgba($color: #04243c, $alpha: 0.04);
|
||
border-radius: 4px;
|
||
|
||
.qa-views {
|
||
position: absolute;
|
||
color: #6e7b84;
|
||
}
|
||
}
|
||
|
||
.qa-char {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list {
|
||
display: grid;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
</style>
|