From 0d16d456850bdfe06f1599e85890eb1379c01b8d Mon Sep 17 00:00:00 2001 From: nisen Date: Tue, 29 Aug 2023 13:51:11 +0800 Subject: [PATCH] =?UTF-8?q?=E6=95=99=E5=B8=88=E8=8A=82=E4=B8=BB=E9=A1=B5?= =?UTF-8?q?=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/grateful/GratefulHomePage.vue | 570 +----------- src/views/grateful/TeacherOpinion.vue | 7 +- src/views/grateful/index.vue | 1105 +---------------------- 3 files changed, 22 insertions(+), 1660 deletions(-) diff --git a/src/views/grateful/GratefulHomePage.vue b/src/views/grateful/GratefulHomePage.vue index ad28523f..28633d8a 100644 --- a/src/views/grateful/GratefulHomePage.vue +++ b/src/views/grateful/GratefulHomePage.vue @@ -128,17 +128,11 @@ -
+ title="感谢您百忙之中给我们提交您宝贵的意见~"> +
- - - - - - - + +
@@ -157,17 +151,10 @@ import { mapGetters } from "vuex"; import apiCourseStudy from "@/api/modules/courseStudy.js"; import portalFloatTools from "@/components/PortalFloatTools.vue"; import apiCourse from "@/api/modules/coursePortal.js"; -import apiCase from "@/api/modules/cases.js"; -import apiQa from "@/api/modules/qa.js"; -import apiGuide from "@/api/phase2/guide.js"; -import apiUser from "@/api/system/user.js"; import interactBar from "@/components/Portal/interactBar.vue"; import courseImage from "@/components/Course/courseImage.vue"; -import { toScore, formatUserNumber, cutOrgNamePath } from "@/utils/tools.js"; -import apiPlace from "@/api/phase2/place.js"; -import apiStat from "@/api/phase2/stat.js"; +import { toScore, formatUserNumber } from "@/utils/tools.js"; import apiIndex from "@/api/phase2/index.js"; -import apiUserhobby from "@/api/phase2/userhobby.js"; export default { name: "Grateful", components: { @@ -175,168 +162,25 @@ export default { interactBar, courseImage, }, - created() { - this.$store.dispatch("refrashStudyTaskCount"); - let $this = this; - //判断是否弹出登录勋章，设置截止日期 - var nowDate = new Date(); - var endDate = new Date("2022-11-18"); //先设置时间是11月18日 - if (nowDate < endDate) { - apiStat.getUserLoginMedal().then((rs) => { - if (rs.status == 200) { - if (rs.result.show) { - //设置是否需要显示纪念勋章 - $this.needLoginMedal = true; - } - } - }); - } - //提取需要提示勋章 - // apiStat.getUserMedalTips().then(res=>{ - // if(res.status==200){ - // $this.medalTips=res.result; - // } - // }) - }, data() { return { - roleList: ["功能", "界面设计", "其他"], form: { - type: [], - desc: "", + textarea: "", }, - dlgHeight: "400px", - dlgWidth: "688px", gratefulVisible: false, - showUClass: false, - showLoginMedal: false, //是否显示登录勋章 - needLoginMedal: false, //是否需要显示纪念勋章 - medalTips: [ - { medalId: 1, medalLevel: 5, isShow: false }, - { medalId: 3, medalLevel: 4, isShow: false }, - ], - lastStudy: {}, - overlayShow: false, - userData: { level: 1, uvalue: 0, totalStudyHour: 0 }, - userHobby: { - needShow: false, - localKeyPre: "user-hobby-", //本地存储的key - }, - needHobbyShow: false, //是否显示兴趣爱好 formatNum: formatUserNumber, - cutOrgNamePath: cutOrgNamePath, - // userInfo: {}, - ankingList: [], - answersList: [], - Popularity: [], - scorelist: [], - resonimg: [], - swiperOptiontwo: { - autoplay: false, - // noSwiping: true, - }, - 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", - }, - }, - - couname: "", isNext: true, - pageIndex: 1, - fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL, toScore, + // 列表 courseList: { num: 12, orderType: 2, list: [], - }, - caseList: { - num: 3, - orderType: 2, - list: [], - }, - articleList: { - num: 4, - orderType: 2, - first: { - id: "", - authorInfo: {}, - }, - list: [], - }, - qaList: { - num: 4, - orderType: "views", - list: [], - }, + } }; }, mounted() { this.getCourseData(1); - this.getCaseData(); - this.getArticleData(); - this.getQaData(); - this.couresreso(); - this.getScoreList(); - this.getPopularity(); - this.getAnkingData(); - this.getLevel(); - this.getQaAnswers(); - this.getLastStudy(); - - //检查兴趣爱好是否已填报, - //先检查本地session和 local 15天, 这两个值是在组件中设置的 - let sessionHobby = sessionStorage.getItem( - "user-hobby-" + this.userInfo.aid - ); - let localHobbyTime = localStorage.getItem("notYet" + this.userInfo.aid); - if (!sessionHobby) { - //只有session中不存在，才会验证 - //本地15天验证,localHobby,后续完善 - let flag = true; //请求检查 - if (localHobbyTime) { - let day = - (new Date() - new Date(localHobbyTime)) / (1000 * 60 * 60 * 24); - if (day < 15) { - flag = false; - } - } - if (flag) { - apiUserhobby.has().then((res) => { - if (res.status == 200) { - if (!res.result) { - //设置需要显示兴趣爱好收集窗口 - this.userHobby.needShow = true; - } - } else { - console.log("兴趣爱好检查失败" + res.message); - } - //检查引导页 - this.checkAndShowGuide(); - }); - } else { - this.checkAndShowGuide(); - } - } else { - //检查引导页 - this.checkAndShowGuide(); - } - //this.$refs.userCollection.show(); }, computed: { ...mapGetters(["userInfo", "studyTaskCount"]), @@ -348,180 +192,9 @@ export default { getPic(index) { return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png"; }, - handleChecked(list) { - if (list.length > 1) { - let one = list.splice(1); - this.form.type = one; - } - }, closeDlg() { this.gratefulVisible = false }, - tylClick() { - window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130"); - }, - cylClick() { - window.open("https://u.boe.com/pc/course?keyword=创新力专区"); - }, - showClass(flag) { - if (flag) { - this.showUClass = flag; - } - }, - uOnClick() { - this.showUClass = true; - }, - setCurIdentity(iden) { - this.$store.dispatch("SetCurIdentity", iden); - }, - closeJinian() { - this.showLoginMedal = false; - }, - banJump(item) { - if (item.JumpUrl) { - window.open(item.JumpUrl); - } - }, - //上次学习记录 - getLastStudy() { - apiCourseStudy.lastStudy().then((res) => { - if (res.status === 200) { - this.lastStudy = res.result; - if (res.result != "" && res.result.courseId) { - this.overlayShow = true; - } - } else { - this.$message.error(res.message); - } - }); - }, - //检查并弹出引导页 - checkAndShowGuide() { - //引导页弹框是否显示 - //检查本地,减少服务器请求的次数 - let localGuide = localStorage.getItem("user-guide-" + this.userInfo.aid); - if (!localGuide) { - apiGuide.hasUser().then((res) => { - if (res.status == 200) { - if (!res.result) { - this.$refs.guide.show(); - } else { - if (this.userHobby.needShow) { - this.$refs.userCollection.show(); - } else { - if (this.needLoginMedal) { - this.showLoginMedal = true; - } - } - } - localStorage.setItem("user-guide-" + this.userInfo.aid, 1); - } else { - console.log("获取引导页检查失败" + res.message); - //this.$message.error('') - if (this.userHobby.needShow) { - this.$refs.userCollection.show(); - } - } - }); - } else { - if (this.userHobby.needShow) { - this.$refs.userCollection.show(); - } else { - if (this.needLoginMedal) { - this.showLoginMedal = true; - } - } - } - - //测试情况下 - // this.$refs.guide.show(); - }, - closeGuide() { - //关闭引导页 - if (this.userHobby.needShow) { - //需要弹出兴趣收集页，弹出兴趣收集页 - this.$refs.userCollection.show(); - } - }, - closeCollection() { - if (this.needLoginMedal) { - this.showLoginMedal = true; - } - }, - jumstudy() { - this.$router.push({ path: "../views/study/TaskList.vue" }); - }, - jumcasedet(item) { - this.$router.push({ path: "/case/detail", query: { id: item.id } }); - }, - getPic(index) { - return this.webBaseUrl + "/images/listblue0" + (index + 1) + ".png"; - }, - getLevel() { - //获取经验值和等级 - apiStat.getUserStatTotalInfo(this.userInfo.aid).then((res) => { - if (res.status == 200) { - this.userData = res.result; - //console.log(this.userData,'this.userData') - } - }); - }, - getQaAnswers() { - apiIndex.qaAnswers(10).then((res) => { - if (res.status == 200) { - this.answersList = res.result; - } - }); - }, - getAnkingData() { - // 文章排行榜 - apiIndex.articleViews(10).then((res) => { - if (res.status == 200) { - this.ankingList = res.result; - } - }); - }, - getPopularity() { - //案例排行榜 - apiCase.queryPraises(10).then((res) => { - if (res.status == 200) { - this.Popularity = res.result; - // console.log(this.Popularity) - } - }); - }, - getScoreList() { - //课程排行榜 - apiCourse.scorelist(10, 1).then((res) => { - if (res.status == 200) { - res.result.forEach((item) => { - if (item.publishTime != "") { - item.coverImg = item.images; - let time = item.publishTime.split("-"); - item.publishTime = `${time[0]}年${time[1]}月${time[2]}日`; - } - }); - this.scorelist = res.result; - //console.log(this.scorelist,'this.scorelist'); - } - }); - }, - // bgfun(){ - // console.log(this.$refs.bannimg[0]); - // this.$nextTick(() => { - // console.log(this.$refs.bannimg[0]) - // }) - // }, - couresreso() { - let key = "index"; - apiPlace.detail(key).then((res) => { - let lmj = JSON.parse(res.result.content); - this.resonimg = lmj; - }); - }, - jumUX() { - window.open("https://m.qingxuetang.com/x/?appId=qxtcorp306130", "_blank"); - }, toCourseDetail(item) { //二期调整，直接改成一个地址 //return this.webBaseUrl + '/course/detail?id=' + item.id; @@ -543,17 +216,6 @@ export default { //return $this.webBaseUrl + "/course/detail?id=" + item.id; } }, - orderTypeFilter(val) { - this.courseList.orderType = val; - this.pageIndex = 1; - this.getCourseData(); - }, - nextPage() { - this.pageIndex += 1; - if (this.isNext) { - this.getCourseData(this.pageIndex); - } - }, getCourseData(pageIndex) { this.isNext = false; let { orderType, num } = this.courseList; @@ -582,169 +244,12 @@ export default { }); this.loadCouserTeacher(res.result, courseIds); this.courseList.list = res.result; - //this.couname = res.result.list.name; - // if (res.result.count - pageIndex * num < 8) { - // this.pageIndex = 0; - // } - // this.isNext = true; - - // } } else { console.log("加载课程信息失败:" + res.error); } }); - - // apiCourse.list({orderType,num,device:1}).then(res => { - // if(res.status==200){ - // if(res.result.length>0){ - // let courseIds=[]; - // res.result.forEach(item=>{ - // item.authorInfo={aid:'',name:'',orgInfo:'',avatar:'',code:''}; - // courseIds.push(item.id); - // }) - // this.loadCouserTeacher(res.result,courseIds); - // this.courseList.list=res.result; - // } - // }else{ - // console.log('加载课程信息失败:'+res.error); - // } - // }) - }, - // 去掉案例的推荐课程 - // changeCaseOrder(val) { - // this.caseList.orderType = val; - // this.getCaseData(); - // }, - - //案例的参数等着需要改 - getCaseData() { - apiIndex.newCases().then((res) => { - if (res.status == 200) { - if (res.result.length > 0) { - let userIds = []; - res.result.forEach((item) => { - item.authorInfo = { - aid: "", - name: "", - orgInfo: "", - avatar: "", - code: "", - sex: null, - }; - - if (item.authorId && item.authorId != "") { - userIds.push(item.authorId); - } - }); - this.caseList.list = res.result; - this.loadCaseAuthorInfo(res.result, userIds); - } - // this.caseList.list = res.result; - } else { - console.log("加载案例错误：" + res.error); - } - }); - }, - loadCaseAuthorInfo(list, ids) { - //加载作者信息，头像，机构信息 - if (ids.length == 0) { - return; - } - const noReapetIds = [...new Set(ids)]; - apiUser.getByIds(ids).then((res) => { - if (res.status == 200) { - list.forEach((item, index) => { - res.result.some((author) => { - if (author.aid == item.authorId) { - author.orgInfo = cutOrgNamePath(author.orgInfo, 1); - item.authorInfo = author; - - return true; - } else { - return false; - } - }); - }); - } else { - console.log("加载用户信息失败:" + res.error); - //this.$message.error(res.message); - } - }); - }, - getArticleData() { - let $this = this; - this.articleList.list = []; - apiIndex.articlelist(this.articleList.orderType).then((res) => { - if (res.status == 200) { - if (res.result.length > 0) { - let userIds = []; - res.result.forEach((item, idx) => { - item.authorInfo = { - aid: "", - name: "", - orgInfo: "", - avatar: "", - code: "", - sex: null, - }; - userIds.push(item.sysCreateAid); - if (idx == 0) { - $this.articleList.first = item; - } else { - $this.articleList.list.push(item); - } - }); - // console.log(res.result, 'res.result'); - this.loadAuthorInfo(res.result, userIds); - } - } else { - console.log("加载文章错误：" + res.error); - } - }); - }, - changeArticleOrder(val) { - this.articleList.orderType = val; - this.getArticleData(); - }, - getQaData() { - let params = { - pageSize: this.qaList.num, - orderAsc: false, - orderField: this.qaList.orderType, - }; - // if (this.qaList.orderType == 2) { - // params.orderField = 'praises'; - // } - apiQa.indexList(params).then((res) => { - if (res.status == 200) { - if (res.result.length > 0) { - let userIds = []; - res.result.forEach((item) => { - item.authorInfo = { - aid: "", - name: "", - orgInfo: "", - avatar: "", - code: "", - sex: null, - }; - userIds.push(item.sysCreateAid); - }); - this.qaList.list = res.result; - this.loadAuthorInfo(res.result, userIds); - } - } else { - console.log("加载问答错误：" + res.error); - } - //console.log(res) - }); - }, - changeQaOrder(val) { - this.qaList.orderType = val; - this.getQaData(); }, loadCouserTeacher(list, ids) { - let that = this; // 先查课程关联教师iD apiCourse.getTeacherByCourseIDs(ids).then((cres) => { if (cres.status == 200) { @@ -769,62 +274,7 @@ export default { //that.loadCourseAuthorInfo(list, userIds); } }); - }, - loadCourseAuthorInfo(list, ids) { - //加载作者信息，头像，机构信息 - if (ids.length == 0) { - return; - } - const noReapetIds = [...new Set(ids)]; - apiUser.getByIds(ids).then((res) => { - if (res.status == 200) { - list.forEach((item, index) => { - res.result.some((author) => { - if (author.aid == item.authorInfo.aid) { - item.authorInfo = author; - - return true; - } else { - return false; - } - }); - }); - } else { - console.log("加载用户信息失败:" + res.error); - } - }); - }, - loadAuthorInfo(list, ids) { - //加载作者信息，头像，机构信息 - if (ids.length == 0) { - return; - } - const noReapetIds = [...new Set(ids)]; - apiUser.getByIds(ids).then((res) => { - if (res.status == 200) { - list.forEach((item, index) => { - res.result.some((author) => { - if (author.aid == item.sysCreateAid) { - item.authorInfo = author; - return true; - } else { - return false; - } - }); - }); - } else { - console.log("加载用户信息失败:" + res.error); - } - }); - }, - jumpRouter(item) { - this.$router.push({ - path: "/qa/answer", - query: { - id: item.id, - }, - }); - }, + } }, }; @@ -854,7 +304,7 @@ export default { } .textarea { - width: 600px; + width: 100%; ::v-deep .el-textarea__inner { min-height: 300px !important; diff --git a/src/views/grateful/TeacherOpinion.vue b/src/views/grateful/TeacherOpinion.vue index 9c926f15..0ada9cde 100644 --- a/src/views/grateful/TeacherOpinion.vue +++ b/src/views/grateful/TeacherOpinion.vue @@ -8,13 +8,13 @@
师资大全
-
+
@@ -30,7 +30,7 @@
+ @change-size="changePageSize" @change-page="loadData" :autoScroll="false">
@@ -189,6 +189,7 @@ export default { 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; diff --git a/src/views/grateful/index.vue b/src/views/grateful/index.vue index 4b28913b..ffa5f6d1 100644 --- a/src/views/grateful/index.vue +++ b/src/views/grateful/index.vue @@ -1,6 +1,6 @@ @@ -700,60 +91,18 @@ export default { .grateful { width: 100%; + img { + width: 100%; + } +} + +.header { &::before { content: url('../../assets/images/grateful/logo.png'); position: absolute; top: 30px; left: 40px; } - - img { - width: 100%; - } -} - -.team { - display: grid; - - // grid-template-columns: 1.5fr 1fr 1fr; - .teamImg { - width: 749px; - height: 478px; - } - -} - -.float-tools { - position: fixed; - right: 0; - bottom: 50%; - z-index: 999; - - .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.3) translateY(-15px); - transition: all 0.6s; } .bannbox { @@ -800,7 +149,6 @@ export default { .swiper-button-next { height: 38px; - // right: 52.65%; bottom: 66px; top: auto; padding: 0 16px; @@ -811,7 +159,6 @@ export default { } .swiper-pagination-bullets { - // background: #000; left: 60px; bottom: 66px; } @@ -820,7 +167,6 @@ export default { line-height: 25px; height: 32px; border-radius: 19px; - // background: rgba($color: #000000, $alpha: 0.1); width: auto; left: 45%; padding: 0 20px; @@ -833,7 +179,6 @@ export default { margin-top: 10px; background: #fff; opacity: 1 !important; - // background: rgba($color: #fff, $alpha: 0.5); border-radius: 2px; } @@ -852,442 +197,8 @@ export default { margin-top: 10px; width: 25px; background: #387df7; - // background: rgba($color: #fff, $alpha: 0.8); border-radius: 2px; } - - .swiper-container { - // background-color: rgba($color: #000000, $alpha: 0.2); - } - } -} - -.three-line-ellipsis { - overflow: hidden; - text-overflow: ellipsis; - box-sizing: border-box; - -webkit-line-clamp: 3; - word-break: break-all; - display: -webkit-box; - -webkit-box-orient: vertical; -} - -.two-line-ellipsis { - display: -webkit-box; - overflow: hidden; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - box-sizing: border-box; -} - -.course-card { - padding-bottom: 22px; - box-sizing: border-box; - position: relative; - background-color: #ffffff; - - .course-image-box { - position: relative; - - .course-type { - position: absolute; - top: 0px; - right: 0px; - width: 60px; - height: 24px; - line-height: 24px; - text-align: center; - background-color: #f99000; - border-radius: 2px 4px 2px 14px; - font-size: 12px; - color: #ffffff; - -moz-user-select: none; - /*火狐*/ - -webkit-user-select: none; - /*webkit浏览器*/ - -ms-user-select: none; - /*IE10*/ - -khtml-user-select: none; - /*早期浏览器*/ - user-select: none; - } - - .course-type-title { - position: absolute; - top: 5px; - right: 0px; - width: 90px; - height: 30px; - line-height: 30px; - text-align: center; - color: #ffffff; - -moz-user-select: none; - /*火狐*/ - -webkit-user-select: none; - /*webkit浏览器*/ - -ms-user-select: none; - /*IE10*/ - -khtml-user-select: none; - /*早期浏览器*/ - user-select: none; - } - - .course-flag { - height: 26px; - position: absolute; - top: 15px; - right: 0; - } - - .course-tip { - width: 100%; - height: 26px; - position: absolute; - bottom: 0; - padding: 0 10px; - color: #fff; - font-size: 14px; - - .course-study-count { - float: left; - } - - .course-time { - float: right; - } - } - } - - .course-title { - margin: 16px 0 16px 0; - height: 44px; - -moz-user-select: none; - /*火狐*/ - -webkit-user-select: none; - /*webkit浏览器*/ - -ms-user-select: none; - /*IE10*/ - -khtml-user-select: none; - /*早期浏览器*/ - user-select: none; - } - - .course-title-box { - display: flex; - } - - .course-author { - display: flex; - justify-content: space-between; - - .course-author-left { - font-size: 14px; - color: #6e7b84; - -moz-user-select: none; - /*火狐*/ - -webkit-user-select: none; - /*webkit浏览器*/ - -ms-user-select: none; - /*IE10*/ - -khtml-user-select: none; - /*早期浏览器*/ - user-select: none; - } - } - - .study-num { - font-size: 14px; - color: #6e7b84; - // margin-left: 12px; - -moz-user-select: none; - /*火狐*/ - -webkit-user-select: none; - /*webkit浏览器*/ - -ms-user-select: none; - /*IE10*/ - -khtml-user-select: none; - /*早期浏览器*/ - user-select: none; - } - - .course-score { - padding: 10px 15px; - height: 40px; - display: flex; - justify-content: space-between; - align-items: center; - - .course-score-star { - flex: 1; - } - } -} - -// 内容部分 -.modules { - margin-top: 20px; - display: flex; - - .modules-title { - .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; - margin-right: 30px; - 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; - } - } } }