mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-07 18:06:44 +08:00
首页响应式
This commit is contained in:
zhaofang
@@ -20,6 +20,26 @@
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
.index-one-line-ellipsis{
|
||||
display: -webkit-box;
|
||||
// white-space:pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break:break-all;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp:1;
|
||||
}
|
||||
.index-tive-line-ellipsis{
|
||||
display: -webkit-box;
|
||||
// white-space:pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break:break-all;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp:8;
|
||||
}
|
||||
p{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -217,3 +217,896 @@
|
||||
background-color: #fff;
|
||||
box-shadow: 0px 8px 20px 0px rgba(0,35,114,0.1);
|
||||
}
|
||||
// boe-index
|
||||
@media screen and (max-width: 1366px){
|
||||
.xcontent{
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
margin: 0px 5%;
|
||||
}
|
||||
.portal-content {
|
||||
margin: 26px 87px 0px 87px;
|
||||
// width: 100%;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.portal-right-box{
|
||||
width: 344px;
|
||||
// height: 544px;
|
||||
// overflow-y: auto;
|
||||
.course-index-list{
|
||||
height: 410px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.case-index-list{
|
||||
height: 114px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.anking-index-list{
|
||||
height: 320px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.qa-index-qa{
|
||||
height: 64px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.boe-index{
|
||||
width: 235px;
|
||||
padding: 20px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
.course-image-box{
|
||||
width: 200px;
|
||||
height: 114px;
|
||||
::v-deep .course-image{
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
// .course-image-box :hover .el-image{
|
||||
// z-index: 999;
|
||||
// position: absolute;
|
||||
// top: 0px;
|
||||
// left: 0px;
|
||||
// width: 195px !important;
|
||||
// height: 92px !important;
|
||||
// }
|
||||
}
|
||||
.case-inter{
|
||||
left: 20px;
|
||||
bottom:20px;
|
||||
.interact-bar-index{
|
||||
display: none !important;
|
||||
}
|
||||
::v-deep .el-avatar--small{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
.modules-list{
|
||||
margin-right: 20px;
|
||||
}
|
||||
.boe-case-index{
|
||||
width: 235px;
|
||||
height: 246px;
|
||||
margin-right: 20px;
|
||||
.case-top{
|
||||
height: 69px;
|
||||
}
|
||||
.case-conent{
|
||||
width: 200px;
|
||||
height: 169px;
|
||||
top:20px;
|
||||
left:20px;
|
||||
padding: 17px;
|
||||
.time-one{
|
||||
padding:3px 3px;
|
||||
}
|
||||
.cast-time{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.case-title{
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.case-text{
|
||||
height: 42px;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.boe-qa-index{
|
||||
width: 171px;
|
||||
height: 194px;
|
||||
margin-right: 20px;
|
||||
padding: 17px 12px 16px 12px;
|
||||
.qa-center{
|
||||
height: 88px;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
.boe-qa-sum{
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
.qa-views{
|
||||
left: 10px;
|
||||
bottom: 6px;
|
||||
}
|
||||
}
|
||||
.qa-char{
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
::v-deep img{
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
::v-deep .item-author div{
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
.el-avatar{
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
}
|
||||
.info-name{
|
||||
font-size: 12px;
|
||||
color: #6E7B84;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.qa-top{
|
||||
& span:first-child{
|
||||
// height: 24px;
|
||||
background: rgba($color: #387DF7, $alpha: 0.05);
|
||||
padding: 3px 3px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #387DF7;
|
||||
// margin-right: 46px;
|
||||
}
|
||||
span{
|
||||
font-size: 10px;
|
||||
color: #6E7B84;
|
||||
}
|
||||
}
|
||||
}
|
||||
.boe-article-index{
|
||||
padding: 17px;
|
||||
.article-card-left{
|
||||
width: 200px;
|
||||
.article-info-index-summary{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84;
|
||||
line-height: 14px;
|
||||
}
|
||||
.article-info-image-box{
|
||||
width: 200px;
|
||||
height: 112px;
|
||||
|
||||
}
|
||||
.el-avatar{
|
||||
width: 26px !important;
|
||||
height: 26px !important;
|
||||
}
|
||||
}
|
||||
.article-card-right{
|
||||
.article-li{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.article-img{
|
||||
width: 144px;
|
||||
height: 81px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
img{
|
||||
width: 144px;
|
||||
height: 81px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.article-right{
|
||||
width: 100%;
|
||||
.article-info-title{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #00253E;
|
||||
// margin-bottom: 9px;
|
||||
// width: 50%;
|
||||
}
|
||||
.article-info-summary{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84;
|
||||
// margin-bottom: 15px;
|
||||
}
|
||||
.article-bottom{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
::v-deep .uavatar{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.el-avatar{
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
.article-info-time{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1680px) and (min-width:1367px){
|
||||
.xcontent{
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
margin: 0px 5%;
|
||||
}
|
||||
.portal-content {
|
||||
// margin: 26px 87px 0px 87px;
|
||||
// width: 100%;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.portal-right-box{
|
||||
width: 344px;
|
||||
.course-index-list{
|
||||
height: 548px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.case-index-list{
|
||||
height: 230px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.anking-index-list{
|
||||
height: 448px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.qa-index-qa{
|
||||
height: 145px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.boe-index{
|
||||
width: 350px;
|
||||
padding: 25px;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 20px;
|
||||
.course-image-box{
|
||||
width: 300px;
|
||||
height: 170px;
|
||||
::v-deep .course-image{
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.case-inter{
|
||||
left: 20px;
|
||||
bottom:20px;
|
||||
// .interact-bar-index{
|
||||
// display: none !important;
|
||||
// }
|
||||
::v-deep .el-avatar--small{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
.modules-list{
|
||||
margin-right: 30px;
|
||||
}
|
||||
.boe-case-index{
|
||||
width: 350px;
|
||||
height: 361px;
|
||||
margin-right: 36px;
|
||||
.case-top{
|
||||
height: 69px;
|
||||
}
|
||||
.case-conent{
|
||||
width: 290px;
|
||||
height: 250px;
|
||||
top:30px;
|
||||
left:30px;
|
||||
padding: 20px;
|
||||
.time-one{
|
||||
padding:3px 10px;
|
||||
}
|
||||
.cast-time{
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.case-title{
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
line-height: 24px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.case-text{
|
||||
height: 60px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.boe-qa-index{
|
||||
width: 254px;
|
||||
height: 276px;
|
||||
margin-right: 36px;
|
||||
padding: 30px;
|
||||
.qa-center{
|
||||
height: 130px;
|
||||
margin-top: 10px;
|
||||
padding: 20px 18px;
|
||||
.boe-qa-sum{
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.qa-views{
|
||||
left: 18px;
|
||||
bottom: 18px;
|
||||
}
|
||||
}
|
||||
.qa-char{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
::v-deep img{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
.info-name{
|
||||
font-size: 12px;
|
||||
color: #6E7B84;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.qa-top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
& span:first-child{
|
||||
background: rgba($color: #387DF7, $alpha: 0.05);
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #387DF7;
|
||||
}
|
||||
span{
|
||||
font-size: 14px;
|
||||
color: #6E7B84;
|
||||
}
|
||||
}
|
||||
}
|
||||
.boe-article-index{
|
||||
padding: 30px;
|
||||
.article-card-left{
|
||||
width: 250px;
|
||||
.article-info-index-summary{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84;
|
||||
line-height: 20px;
|
||||
}
|
||||
.article-info-image-box{
|
||||
width: 250px;
|
||||
height: 162px;
|
||||
|
||||
}
|
||||
// .el-avatar{
|
||||
// width: 26px !important;
|
||||
// height: 26px !important;
|
||||
// }
|
||||
}
|
||||
.article-card-right{
|
||||
.article-li{
|
||||
// height: 160px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.article-img{
|
||||
width: 252px;
|
||||
height: 142px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
img{
|
||||
width: 144px;
|
||||
height: 81px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.article-right{
|
||||
width: 100%;
|
||||
.article-info-title{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #00253E;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 10px;
|
||||
// width: 50%;
|
||||
}
|
||||
.article-info-summary{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84;
|
||||
// margin-bottom: 15px;
|
||||
}
|
||||
.article-bottom{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
::v-deep .uavatar{
|
||||
width:34px;
|
||||
height: 34px;
|
||||
}
|
||||
.el-avatar{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1920px) and (min-width: 1681px){
|
||||
.xcontent{
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
// margin: 0px 5%;
|
||||
}
|
||||
.portal-content {
|
||||
margin: 26px 87px 0px 87px;
|
||||
// width: 100%;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.portal-right-box{
|
||||
width: 410px;
|
||||
.course-index-list{
|
||||
height: 548px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.case-index-list{
|
||||
height: 262px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.anking-index-list{
|
||||
height: 425px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.qa-index-qa{
|
||||
height: 188px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.boe-index{
|
||||
width: 410px;
|
||||
padding: 30px;
|
||||
margin-right: 36px;
|
||||
margin-bottom: 36px;
|
||||
border-radius: 8px;
|
||||
.course-image-box{
|
||||
width: 350px;
|
||||
height: 196x;
|
||||
::v-deep .course-image{
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.case-inter{
|
||||
left: 20px;
|
||||
bottom:20px;
|
||||
// .interact-bar-index{
|
||||
// display: none !important;
|
||||
// }
|
||||
::v-deep .el-avatar--small{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
.modules-list{
|
||||
margin-right: 36px;
|
||||
}
|
||||
.boe-case-index{
|
||||
width: 410px;
|
||||
height: 396px;
|
||||
margin-right: 36px;
|
||||
.case-top{
|
||||
height: 120px;
|
||||
}
|
||||
.case-conent{
|
||||
width: 350px;
|
||||
height: 274px;
|
||||
top:30px;
|
||||
left:30px;
|
||||
padding: 30px;
|
||||
.time-one{
|
||||
padding:3px 10px;
|
||||
}
|
||||
.cast-time{
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.case-title{
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
line-height: 24px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.case-text{
|
||||
height: 60px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.boe-qa-index{
|
||||
width: 298px;
|
||||
height: 320px;
|
||||
margin-right: 36px;
|
||||
padding: 30px;
|
||||
.qa-center{
|
||||
height: 152px;
|
||||
margin-top: 10px;
|
||||
padding: 20px;
|
||||
.portal-index-title{
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.boe-qa-sum{
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.qa-views{
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
.qa-char{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
::v-deep img{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
.info-name{
|
||||
font-size: 12px;
|
||||
color: #6E7B84;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.qa-top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
& span:first-child{
|
||||
background: rgba($color: #387DF7, $alpha: 0.05);
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #387DF7;
|
||||
}
|
||||
span{
|
||||
font-size: 14px;
|
||||
color: #6E7B84;
|
||||
}
|
||||
}
|
||||
}
|
||||
.boe-article-index{
|
||||
padding: 30px;
|
||||
.article-card-left{
|
||||
width: 352px;
|
||||
.article-info-index-summary{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84;
|
||||
line-height: 20px;
|
||||
}
|
||||
.article-info-image-box{
|
||||
width: 352px;
|
||||
height: 196px;
|
||||
|
||||
}
|
||||
.el-avatar{
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
}
|
||||
.article-card-right{
|
||||
.article-li{
|
||||
// height: 160px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.article-img{
|
||||
flex: 43%;
|
||||
width: 252px;
|
||||
height: 144px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
img{
|
||||
width: 252px;
|
||||
height: 144px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.article-right{
|
||||
flex: 100%;
|
||||
.article-info-title{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #00253E;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 10px;
|
||||
// width: 50%;
|
||||
}
|
||||
.article-info-summary{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84;
|
||||
// margin-bottom: 15px;
|
||||
}
|
||||
.article-bottom{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
::v-deep .uavatar{
|
||||
width:34px;
|
||||
height: 34px;
|
||||
}
|
||||
.el-avatar{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1921px){
|
||||
.xcontent{
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
margin: 0px 8%;
|
||||
}
|
||||
|
||||
.portal-content {
|
||||
// margin: 26px 87px 0px 87px;
|
||||
width: 1746px;
|
||||
margin: 0 auto;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
.portal-right-box{
|
||||
width: 410px;
|
||||
.course-index-list{
|
||||
height: 548px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.case-index-list{
|
||||
height: 262px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.anking-index-list{
|
||||
height: 425px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.qa-index-qa{
|
||||
height: 188px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.boe-index{
|
||||
width: 410px;
|
||||
padding: 30px;
|
||||
margin-right: 36px;
|
||||
margin-bottom: 36px;
|
||||
border-radius: 8px;
|
||||
.course-image-box{
|
||||
width: 350px;
|
||||
height: 196x;
|
||||
::v-deep .course-image{
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.case-inter{
|
||||
left: 20px;
|
||||
bottom:20px;
|
||||
// .interact-bar-index{
|
||||
// display: none !important;
|
||||
// }
|
||||
::v-deep .el-avatar--small{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
.modules-list{
|
||||
margin-right: 36px;
|
||||
}
|
||||
.boe-case-index{
|
||||
width: 410px;
|
||||
height: 396px;
|
||||
margin-right: 36px;
|
||||
.case-top{
|
||||
height: 120px;
|
||||
}
|
||||
.case-conent{
|
||||
width: 350px;
|
||||
height: 274px;
|
||||
top:30px;
|
||||
left:30px;
|
||||
padding: 30px;
|
||||
.time-one{
|
||||
padding:3px 10px;
|
||||
}
|
||||
.cast-time{
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.case-title{
|
||||
font-size: 16px;
|
||||
height: 48px;
|
||||
line-height: 24px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.case-text{
|
||||
height: 60px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.boe-qa-index{
|
||||
width: 298px;
|
||||
height: 320px;
|
||||
margin-right: 36px;
|
||||
padding: 30px;
|
||||
.qa-center{
|
||||
height: 152px;
|
||||
margin-top: 10px;
|
||||
padding: 20px;
|
||||
.portal-index-title{
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.boe-qa-sum{
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.qa-views{
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
}
|
||||
}
|
||||
.qa-char{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
::v-deep img{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
.info-name{
|
||||
font-size: 12px;
|
||||
color: #6E7B84;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.qa-top{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
& span:first-child{
|
||||
background: rgba($color: #387DF7, $alpha: 0.05);
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #387DF7;
|
||||
}
|
||||
span{
|
||||
font-size: 14px;
|
||||
color: #6E7B84;
|
||||
}
|
||||
}
|
||||
}
|
||||
.boe-article-index{
|
||||
padding: 30px;
|
||||
.article-card-left{
|
||||
width: 352px;
|
||||
.article-info-index-summary{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84;
|
||||
line-height: 20px;
|
||||
}
|
||||
.article-info-image-box{
|
||||
width: 352px;
|
||||
height: 196px;
|
||||
|
||||
}
|
||||
.el-avatar{
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
}
|
||||
.article-card-right{
|
||||
.article-li{
|
||||
// height: 160px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.article-img{
|
||||
flex: 43%;
|
||||
width: 252px;
|
||||
height: 144px;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
img{
|
||||
width: 252px;
|
||||
height: 144px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.article-right{
|
||||
flex: 100%;
|
||||
.article-info-title{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #00253E;
|
||||
margin-bottom: 12px;
|
||||
margin-top: 10px;
|
||||
// width: 50%;
|
||||
}
|
||||
.article-info-summary{
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84;
|
||||
// margin-bottom: 15px;
|
||||
}
|
||||
.article-bottom{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
::v-deep .uavatar{
|
||||
width:34px;
|
||||
height: 34px;
|
||||
}
|
||||
.el-avatar{
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@ body {
|
||||
.xcontent{
|
||||
// width: 1000px;
|
||||
// margin: 0px auto;
|
||||
margin: 0px 5%;
|
||||
// margin: 0px 5%;
|
||||
}
|
||||
.index-course{
|
||||
// width: 25%;
|
||||
@@ -122,13 +122,3 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.portal-content {
|
||||
margin: 26px 87px 0px 87px;
|
||||
// width: 100%;
|
||||
.breadcrumb-nav {
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,11 +57,11 @@
|
||||
</div>
|
||||
<div class="modules-list xrow" style="margin-right:0px">
|
||||
<!--一个固定内容-->
|
||||
<div class="xrow-course index-course">
|
||||
<div class="course-card">
|
||||
<div class="xrow-course course-index">
|
||||
<div class="course-card boe-index">
|
||||
<a href="course/boeframe?id=517CA622-238E-06BA-0AED-B1200D705800&type=online-course">
|
||||
<div class="course-image-box">
|
||||
<el-image class="course-image" style="height: 200px;" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
|
||||
<el-image class="course-image" :src="this.webBaseUrl+'/ad/index_course.png'" fit="fit"></el-image>
|
||||
<span class="course-type">录播课</span>
|
||||
</div>
|
||||
<div title="高效谈判系列课" class="course-title portal-title-tow two-line-ellipsis">高效谈判系列课</div>
|
||||
@@ -80,11 +80,11 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--内容列表内容-->
|
||||
<div v-for="course in courseList.list" :key="course.id" class="xrow-course index-course">
|
||||
<div class="course-card">
|
||||
<div v-for="course in courseList.list" :key="course.id" class="xrow-course course-index">
|
||||
<div class="course-card boe-index">
|
||||
<a :href="toCourseDetail(course)">
|
||||
<div class="course-image-box">
|
||||
<course-image height="200px" :course="course"></course-image>
|
||||
<course-image :course="course"></course-image>
|
||||
<span v-if="course.type == 20 || 10" class="course-type">录播课</span>
|
||||
</div>
|
||||
<div :title="course.name" class="course-title portal-title-tow two-line-ellipsis" >{{ course.name }}</div>
|
||||
@@ -109,7 +109,7 @@
|
||||
<div style="margin-top:60px">
|
||||
<div class="ranking-card portal-right-box course-ran-bg">
|
||||
<p class="portal-title-one" style="padding-bottom:12px">课程排行榜</p>
|
||||
<ul>
|
||||
<ul class="course-index-list">
|
||||
<li class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
|
||||
<span class="portal-right-text blue-one">
|
||||
<img :src="getPic(index)" alt="">
|
||||
@@ -154,20 +154,23 @@
|
||||
</div>
|
||||
<div class="modules-list">
|
||||
<ul class="case-box">
|
||||
<li class="case-index" v-for="(ca,ind) in caseList.list" :key="ca.id">
|
||||
<li class="case-index boe-case-index" v-for="(ca,ind) in caseList.list" :key="ca.id">
|
||||
<div class="case-top"></div>
|
||||
<div class="case-conent">
|
||||
<p class="cast-time">
|
||||
<span class="time-one" v-if="caseList.orderType==2"><svg-icon style="margin-right: 0;font-size:16px;" icon-class="crown"></svg-icon>人气榜NO.{{ind+1}}</span>
|
||||
<span style="float: right;">{{ca.sysCreateTime.substring(0, 10)}}</span>
|
||||
</p>
|
||||
<p :title="ca.title" class="two-line-ellipsis case-title">{{ca.title}}</p>
|
||||
<p :title="ca.title" class="two-line-ellipsis case-title">
|
||||
{{ca.title}}
|
||||
</p>
|
||||
<p class="case-text three-line-ellipsis">{{ca.summary}}</p>
|
||||
<p class="case-info"><interactBar :type="3" :readonly="true" :data="ca" :shares="false" :views="false"></interactBar></p>
|
||||
</div>
|
||||
<div class="case-inter">
|
||||
<div style="margin-right:66px"><authorInfo :avatar="ca.authorInfo.avatar" :info="ca.authorInfo.orgInfo" :name="ca.authorInfo.name" :sex="ca.authorInfo.sex"></authorInfo></div>
|
||||
<div style="font-size: 12px;color: #6E7B84;display: flex;line-height: 30px;"><interactBar :type="3" :readonly="true" :comments="false" :praises="false" :favorites="false" :data="ca" :shares="false" :views="true"></interactBar>人观看</div>
|
||||
<div><authorInfo :avatar="ca.authorInfo.avatar" :info="ca.authorInfo.orgInfo" :name="ca.authorInfo.name" :sex="ca.authorInfo.sex"></authorInfo></div>
|
||||
<div class="interact-bar-index" style="font-size: 12px;color: #6E7B84;display: flex;line-height: 30px;"><interactBar :type="3" :readonly="true" :comments="false" :praises="false" :favorites="false" :data="ca" :shares="false" :views="true"></interactBar>人观看</div>
|
||||
<!-- -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -176,7 +179,7 @@
|
||||
<div>
|
||||
<div style="margin-top:60px" class="ranking-card portal-right-box list-bg">
|
||||
<p class="portal-title-one" style="padding-bottom:12px">案例排行榜</p>
|
||||
<ul>
|
||||
<ul class="case-index-list">
|
||||
<li v-for="(item, index) in Popularity" :key="index" class="title-line-ellipsis" style="cursor: pointer;margin-top:30px;line-height: 22px;">
|
||||
<span class="portal-right-text orange-one">
|
||||
<img :src="getPic(index)" alt="">
|
||||
@@ -194,29 +197,31 @@
|
||||
<span class="modules-text">推荐文章</span>
|
||||
<span class="quyer-tag">
|
||||
<a :class="articleList.orderType == 2 ? 'current' : ''" @click="changeArticleOrder(2)">最热</a>
|
||||
<a :class="articleList.orderType == 1 ? 'current' : ''" @click="changeArticleOrder(1)">最新</a>
|
||||
|
||||
<a :class="articleList.orderType == 1 ? 'current' : ''" @click="changeArticleOrder(1)">最新</a>
|
||||
</span>
|
||||
<span class="more"><router-link to="/article">查看更多</router-link></span>
|
||||
</div>
|
||||
<div class="modules-list">
|
||||
<div class="article-card" style="display: flex;">
|
||||
<div class="article-card boe-article-index" style="display: flex;">
|
||||
<!-- 首张 -->
|
||||
<div style="width: 350px;" class="article-card-left" v-if="articleList && articleList.first && articleList.first.id">
|
||||
<div class="article-card-left" v-if="articleList && articleList.first && articleList.first.id">
|
||||
<div class="article-card-box">
|
||||
<a :href="`${webBaseUrl}/article/detail?id=${articleList.first.id}`" style="font-weight: 700;font-size: 20px;">
|
||||
<div class="article-info-image-box">
|
||||
<article-image height="196px" width="350px" :article="articleList.first"></article-image>
|
||||
<article-image height="100%" width="100%" :article="articleList.first"></article-image>
|
||||
</div>
|
||||
<div class="article-info">
|
||||
<div class="article-info-title " style="margin-top:10px">
|
||||
<div class="one-line-ellipsis">
|
||||
<span style="font-weight: 600;font-size: 16px;word-break:break-all;color: #00253E;">{{ articleList.first.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="article-info-summary two-line-ellipsis" style="font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
|
||||
<div class="article-info-index-summary index-tive-line-ellipsis" style="font-weight: 400;margin-top:14px;word-break:break-all;">{{ articleList.first.summary }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div class="article-info-time" style="font-size: 14px;color: #6E7B84;display:flex;justify-content: space-between;margin-top:16px">
|
||||
<span >{{ articleList.first && articleList.first.sysCreateTime && articleList.first.sysCreateTime.substring(0, 10) }}</span>
|
||||
<span>查看详情</span>
|
||||
@@ -240,7 +245,7 @@
|
||||
</div>
|
||||
<div class="article-right">
|
||||
<a :href="`${webBaseUrl}/article/detail?id=${article.id}`" style="font-weight: 700;font-size: 20px;">
|
||||
<p class="article-info-title one-line-ellipsis">{{ article.title }}</p>
|
||||
<p class="article-info-title index-one-line-ellipsis">{{ article.title }}</p>
|
||||
<p class="article-info-summary two-line-ellipsis">{{ article.summary }}</p>
|
||||
</a>
|
||||
<div class="article-bottom">
|
||||
@@ -291,7 +296,7 @@
|
||||
<!-- 排行榜位置 -->
|
||||
<div class="portal-right-box art-bgimg" style="background-color:#fff;" >
|
||||
<p class="portal-title-one" style="padding-bottom:12px" >文章排行榜</p>
|
||||
<ul>
|
||||
<ul class="anking-index-list">
|
||||
<li v-for="(item, index) in ankingList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
|
||||
<span class="portal-right-text orange-one">
|
||||
<img :src="getPic(index)" alt="">
|
||||
@@ -318,18 +323,18 @@
|
||||
<el-row class="modules-list">
|
||||
<!--内容列表内容-->
|
||||
<ul class="qa-box">
|
||||
<li class="qa-card" v-for="qa in qaList.list" :key="qa.id">
|
||||
<li class="qa-card boe-qa-index" v-for="qa in qaList.list" :key="qa.id">
|
||||
<p class="qa-top"><span>{{qa.views}}正在关注</span><span>{{ qa.sysCreateTime.substring(0, 10) }}</span></p>
|
||||
<div class="qa-center">
|
||||
<p class="one-line-ellipsis portal-index-title" style="color:#181818;">{{ qa.title }}</p>
|
||||
<p class="portal-summary-text two-line-ellipsis" style="color:#6E7B84;margin-top: 12px;">{{ qa.content }}</p>
|
||||
<p class="boe-qa-sum two-line-ellipsis" style="color:#6E7B84;">{{ qa.content }}</p>
|
||||
<p class="qa-views" @click="jumpRouter(qa)">查看详情</p>
|
||||
</div>
|
||||
<div class="qa-char">
|
||||
<author-img :avatar="qa.authorInfo.avatar" :aid="qa.authorInfo.aid" :sex="qa.authorInfo.sex"></author-img>
|
||||
<div>
|
||||
<p class="info-name">{{qa.authorInfo.name}}</p>
|
||||
<p style="margin-left:2px"><interactBar :type="4" :readonly="true" :data="qa" :comments="false" :answers="true" :shares="false" :praises="false" :views="false"></interactBar></p>
|
||||
<p class="info-bar"><interactBar :type="4" :readonly="true" :data="qa" :comments="false" :answers="true" :shares="false" :praises="false" :views="false"></interactBar></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
@@ -340,13 +345,13 @@
|
||||
<!-- 排行榜 -->
|
||||
<div class="portal-right-box list-bg">
|
||||
<p class="portal-title-one" style="padding-bottom:12px">问答排行榜</p>
|
||||
<ul>
|
||||
<ul class="qa-index-qa">
|
||||
<li v-for="(item, index) in answersList" :key="index" style="margin-top:30px;line-height: 22px;cursor: pointer;">
|
||||
<span class="portal-right-text orange-one">
|
||||
<img :src="getPic(index)" alt="">
|
||||
</span>
|
||||
<span class="portal-index-summary">{{ item.title }}</span>
|
||||
</li>
|
||||
<span class="portal-right-text orange-one">
|
||||
<img :src="getPic(index)" alt="">
|
||||
</span>
|
||||
<span class="portal-index-summary">{{ item.title }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@@ -484,7 +489,7 @@ export default {
|
||||
});
|
||||
},
|
||||
getQaAnswers() {
|
||||
apiIndex.qaAnswers(3).then(res=>{
|
||||
apiIndex.qaAnswers(10).then(res=>{
|
||||
if (res.status == 200) {
|
||||
this.answersList = res.result;
|
||||
}
|
||||
@@ -499,7 +504,7 @@ export default {
|
||||
});
|
||||
},
|
||||
getPopularity() {//案例排行榜
|
||||
apiCase.queryPraises(4).then(res => {
|
||||
apiCase.queryPraises(10).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.Popularity = res.result;
|
||||
// console.log(this.Popularity)
|
||||
@@ -659,7 +664,7 @@ export default {
|
||||
getArticleData() {
|
||||
let $this = this;
|
||||
this.articleList.list = [];
|
||||
apiArticle.portalList(this.articleList.num, this.articleList.orderType).then(res => {
|
||||
apiIndex.articlelist(this.articleList.orderType).then(res => {
|
||||
if (res.status == 200) {
|
||||
if (res.result.length > 0) {
|
||||
let userIds = [];
|
||||
@@ -672,7 +677,7 @@ export default {
|
||||
$this.articleList.list.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
console.log(res.result,'res.result');
|
||||
this.loadAuthorInfo(res.result, userIds);
|
||||
}
|
||||
} else {
|
||||
@@ -801,27 +806,27 @@ export default {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
.article-img{
|
||||
// flex: 1;
|
||||
width: 252px;
|
||||
height: 142px;
|
||||
// width: 252px;
|
||||
// height: 142px;
|
||||
border-radius: 4px;
|
||||
margin-right: 20px;
|
||||
// margin-right: 20px;
|
||||
img{
|
||||
width: 252px;
|
||||
height: 142px;
|
||||
// width: 252px;
|
||||
// height: 142px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.article-right{
|
||||
// width: 100%;
|
||||
width: 100%;
|
||||
.article-info-title{
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #00253E;
|
||||
margin-bottom: 9px;
|
||||
// width: 50%;
|
||||
}
|
||||
.article-info-summary{
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #6E7B84;
|
||||
margin-bottom: 15px;
|
||||
@@ -830,8 +835,8 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
::v-deep .uavatar{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
}
|
||||
}
|
||||
.article-info-time{
|
||||
@@ -843,16 +848,16 @@ export default {
|
||||
|
||||
}
|
||||
|
||||
::v-deep .course-image-box :hover .el-image{
|
||||
// transition: all 0.5s;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: -35px;
|
||||
width: 420px !important;
|
||||
height: 236px !important;
|
||||
// ::v-deep .course-image-box :hover .el-image{
|
||||
// // transition: all 0.5s;
|
||||
// z-index: 999;
|
||||
// position: absolute;
|
||||
// top: -50px;
|
||||
// left: -35px;
|
||||
// width: 420px !important;
|
||||
// height: 236px !important;
|
||||
|
||||
}
|
||||
// }
|
||||
.course-ran-bg{
|
||||
background: linear-gradient(180deg, #d7eaff 1%, #FAFAFA 24%);
|
||||
}
|
||||
@@ -1058,12 +1063,12 @@ export default {
|
||||
|
||||
.case-index{
|
||||
position: relative;
|
||||
width: 408px;
|
||||
height: 396px;
|
||||
// width: 408px;
|
||||
// height: 396px;
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFA 100%);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
margin-right: 36px;
|
||||
// margin-right: 36px;
|
||||
&:nth-child(2){
|
||||
.case-top{
|
||||
background: linear-gradient(333deg, #D2DEF3 0%, #B4C4E0 100%);
|
||||
@@ -1078,57 +1083,57 @@ export default {
|
||||
}
|
||||
.case-inter{
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
bottom: 30px;
|
||||
// left: 30px;
|
||||
// bottom: 30px;
|
||||
display: flex;
|
||||
::v-deep .el-avatar--small{
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
// ::v-deep .el-avatar--small{
|
||||
// width: 32px;
|
||||
// height: 32px;
|
||||
// }
|
||||
}
|
||||
.case-top{
|
||||
height: 120px;
|
||||
// height: 120px;
|
||||
background: linear-gradient(153deg, #82A8D1 0%, #A4C5E8 100%);
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
}
|
||||
.case-conent{
|
||||
position: absolute;
|
||||
top:40px;
|
||||
left:30px;
|
||||
width: 350px;
|
||||
height: 274px;
|
||||
// top:40px;
|
||||
// left:30px;
|
||||
// width: 350px;
|
||||
// height: 274px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 1px 10px 0px rgba(4,36,60,0.05);
|
||||
border-radius: 4px;
|
||||
padding: 30px;
|
||||
// padding: 30px;
|
||||
.cast-time{
|
||||
font-size: 14px;
|
||||
color: #6E7B84;
|
||||
// display: flex;
|
||||
// justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
// margin-bottom: 20px;
|
||||
.time-one{
|
||||
height: 24px;
|
||||
background: rgba($color: #387DF7, $alpha: 0.1);
|
||||
border-radius: 4px;
|
||||
padding: 3px 10px;
|
||||
// padding: 3px 10px;
|
||||
color: #387DF7;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.case-title{
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
// height: 48px;
|
||||
// font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #00253E;
|
||||
line-height: 24px;
|
||||
// line-height: 24px;
|
||||
}
|
||||
.case-text{
|
||||
height: 60px;
|
||||
font-size: 14px;
|
||||
// height: 60px;
|
||||
// font-size: 14px;
|
||||
color: #6E7B84;
|
||||
line-height: 20px;
|
||||
margin-bottom: 30px;
|
||||
// line-height: 20px;
|
||||
// margin-bottom: 30px;
|
||||
}
|
||||
::v-deep .case-info{
|
||||
.interact-bar-btns{
|
||||
@@ -1212,12 +1217,13 @@ export default {
|
||||
-webkit-line-clamp: 2;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.course-card {
|
||||
padding: 30px;
|
||||
// padding: 30px;
|
||||
padding-bottom: 22px;
|
||||
width: 410px;
|
||||
margin-bottom: 30px;
|
||||
margin-right: 36px;
|
||||
// width: 410px;
|
||||
// margin-bottom: 30px;
|
||||
// margin-right: 36px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
@@ -1251,15 +1257,9 @@ export default {
|
||||
}
|
||||
.course-image-box {
|
||||
position: relative;
|
||||
width: 350px;
|
||||
height: 200px;
|
||||
// width: 350px;
|
||||
// height: 200px;
|
||||
// width: 100%;
|
||||
.course-image {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// width: 288px;
|
||||
// height: 165px;
|
||||
}
|
||||
.course-type {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
@@ -1476,7 +1476,7 @@ export default {
|
||||
.modules-list {
|
||||
margin-top: 30px;
|
||||
// margin-bottom: 15px;
|
||||
margin-right: 36px;
|
||||
// margin-right: 36px;
|
||||
.case-card {
|
||||
// width: 593px;
|
||||
margin-bottom: 15px;
|
||||
@@ -1540,16 +1540,18 @@ export default {
|
||||
}
|
||||
|
||||
.article-card {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
// padding: 30px;
|
||||
border-radius: 8px;
|
||||
|
||||
.article-card-left {
|
||||
float: left;
|
||||
// float: left;
|
||||
.article-card-box {
|
||||
|
||||
.article-info-image-box {
|
||||
.article-info {
|
||||
height: 400px;
|
||||
.article-info-title {
|
||||
font-size: 16px;
|
||||
color: #00253E;
|
||||
@@ -1641,13 +1643,13 @@ export default {
|
||||
.qa-box{
|
||||
display: flex;
|
||||
.qa-card{
|
||||
width: 298px;
|
||||
height: 320px;
|
||||
padding: 30px;
|
||||
// width: 298px;
|
||||
// height: 320px;
|
||||
// padding: 30px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.05);
|
||||
border-radius: 8px;
|
||||
margin-right: 36px;
|
||||
// margin-right: 36px;
|
||||
background: #fff;
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
@@ -1656,46 +1658,36 @@ export default {
|
||||
& span:first-child{
|
||||
height: 24px;
|
||||
background: rgba($color: #387DF7, $alpha: 0.05);
|
||||
padding: 3px 10px;
|
||||
// padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #387DF7;
|
||||
margin-right: 46px;
|
||||
// margin-right: 46px;
|
||||
}
|
||||
span{
|
||||
font-size: 14px;
|
||||
// font-size: 14px;
|
||||
color: #6E7B84;
|
||||
}
|
||||
}
|
||||
.qa-center{
|
||||
position: relative;
|
||||
margin-top: 20px;
|
||||
width: 238px;
|
||||
height: 152px;
|
||||
// margin-top: 20px;
|
||||
// width: 238px;
|
||||
// height: 152px;
|
||||
background: rgba($color: #04243C, $alpha: 0.04);
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
// padding: 20px;
|
||||
.qa-views{
|
||||
position: absolute;
|
||||
color: #6E7B84;
|
||||
font-size: 14px;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
// left: 20px;
|
||||
// bottom: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
.qa-char{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
::v-deep img{
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.info-name{
|
||||
font-size: 14px;
|
||||
color: #6E7B84;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user