129 lines
2.5 KiB
Vue
129 lines
2.5 KiB
Vue
<template lang="pug">
|
|
.recommend2
|
|
.recommend(v-if="vertical")
|
|
.recommend-title
|
|
span 相关推荐
|
|
ul
|
|
li(v-for='(item) in relevant')
|
|
.recommend-text
|
|
span {{item.title}}
|
|
p {{item.create_time}}
|
|
.recommend-img
|
|
img(:src='item.icon')
|
|
.recommend1(v-else)
|
|
.recommend-title1
|
|
span 相关推荐
|
|
ul
|
|
li(v-for='(val) in relevant')
|
|
.recommend-img1
|
|
img(:src='val.icon')
|
|
span {{val.title}}
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Recommend',
|
|
props: {
|
|
relevant: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
NewsList: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
vertical: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
methods: {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.recommend2{
|
|
padding-right: 25rpx;
|
|
.recommend1 {
|
|
padding-left: 24rpx;
|
|
border-top: 1rpx solid #f3f3f3;
|
|
.recommend-title1{
|
|
height: 100rpx;
|
|
overflow: hidden;
|
|
span {
|
|
display: block;
|
|
margin-top: 32rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
ul {
|
|
display: flex;
|
|
overflow-x: scroll;
|
|
border-bottom: 1px solid #f3f3f3;
|
|
padding: 0!important;
|
|
li {
|
|
list-style: none;
|
|
margin-left: 24rpx;
|
|
span{
|
|
display: block;
|
|
margin-top: 0;
|
|
margin-bottom: 40rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.recommend-img1 img{
|
|
width: 274rpx;
|
|
height: 156rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.recommend {
|
|
padding-left: 24rpx;
|
|
border-top: 16rpx solid #f3f3f3;
|
|
border-bottom: 29rpx solid #f3f3f3;
|
|
.recommend-title{
|
|
height: 101rpx;
|
|
overflow: hidden;
|
|
span {
|
|
display: block;
|
|
margin-top: 36rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
ul {
|
|
padding-right: 23rpx;
|
|
padding-left: 23rpx;
|
|
li {
|
|
height: 258rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #f3f3f3;
|
|
.recommend-text {
|
|
display: flex;
|
|
flex-flow: column;
|
|
span{
|
|
width: 312rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
p {
|
|
margin-top: 40rpx;
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
.recommend-img img{
|
|
width: 226rpx;
|
|
height: 170rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|