You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
140 lines
3.4 KiB
140 lines
3.4 KiB
<template>
|
|
<view class="themes-note">
|
|
<view class="note-til flex flex-colum al-item-center">
|
|
<text class="tex1">热门笔记</text>
|
|
<view class="flex flex-colum al-item-center">
|
|
<text class="tex2">POPULAR NOTES</text>
|
|
<text class="tex-bg"></text>
|
|
</view>
|
|
</view>
|
|
<view class="themes-note__list">
|
|
<block v-for="(item, idx) in shopNote" :key="idx">
|
|
<view
|
|
class="themes-note__item"
|
|
@click="goto"
|
|
:data-url="'/activity/luntan/detail?id=' + item.videoId"
|
|
>
|
|
<image
|
|
class="themes-note__item-img"
|
|
:src="item.pic+'?x-oss-process=image/resize,m_fill,w_167,h_245'"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="themes-note__item-txt">{{ item.title }}</view>
|
|
<view class="note-c-b flex al-item-center j-between">
|
|
<view class="note-c-b-l flex al-item-center">
|
|
<image
|
|
class="note-u-img border-rius-r"
|
|
:src="item.headimg"
|
|
mode="aspectFill"
|
|
></image>
|
|
<text class="text-overflow-tx flex1">{{ item.nickname }}</text>
|
|
</view>
|
|
<view class="note-c-b-r flex al-item-center">
|
|
<text class="iconfont icon-aixin"></text>
|
|
<!-- <text class="iconfont icon-aixin_shixin" :style="{'color':t('color1')}"></text> -->
|
|
<text class="z-tx">{{ item.zan }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
shopNote: {
|
|
type: Array,
|
|
default: function() {
|
|
return [];
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.themes-note {
|
|
margin-top: 30rpx;
|
|
.note-til {
|
|
padding-bottom: 30rpx;
|
|
letter-spacing: 4rpx;
|
|
.tex1 {
|
|
font-size: 48rpx;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
.tex2 {
|
|
z-index: 6;
|
|
color: #efbd6f;
|
|
}
|
|
.tex-bg {
|
|
height: 12rpx;
|
|
width: 92%;
|
|
margin-top: -12rpx;
|
|
z-index: 2;
|
|
background: rgba(239, 189, 111, 0.3);
|
|
}
|
|
}
|
|
&__list {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin-bottom: -28rpx;
|
|
}
|
|
&__item {
|
|
width: 334rpx;
|
|
height: 490rpx;
|
|
padding-bottom: 18rpx;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 0 4rpx 1rpx rgba(0, 0, 0, 0.1);
|
|
border-radius: 6rpx 6rpx 6rpx 6rpx;
|
|
margin-bottom: 28rpx;
|
|
&-img {
|
|
width: 100%;
|
|
height: 320rpx;
|
|
}
|
|
&-txt {
|
|
padding: 16rpx 16rpx 0rpx;
|
|
min-height: 92rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/* autoprefixer: ignore next */
|
|
-webkit-box-orient: vertical;
|
|
text-align: justify;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
}
|
|
.note-c-b {
|
|
margin-top: 10rpx;
|
|
font-size: 20rpx;
|
|
color: #999;
|
|
padding: 0 16rpx;
|
|
.note-c-b-l {
|
|
width: 60%;
|
|
.note-u-img {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
.note-c-b-r {
|
|
.icon-aixin {
|
|
font-size: 24rpx;
|
|
}
|
|
.icon-aixin_shixin {
|
|
font-size: 24rpx;
|
|
}
|
|
.z-tx {
|
|
padding-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|