82 lines
1.6 KiB
Vue
82 lines
1.6 KiB
Vue
<template>
|
||
<div class="handpick">
|
||
<div class="list">
|
||
<div class="top">
|
||
<div class="left">百年征和波澜壮阔，百年初心历争议弥坚。7月1日上午，庆祝中国共产党成立100周年…</div>
|
||
<div class="right">
|
||
<img src="https://cdn.cunwuyun.cn/wxmp/fengdu/zan-active.png" alt="">
|
||
<!-- https://cdn.cunwuyun.cn/wxmp/fengdu/zan.png -->
|
||
<span>99+</span>
|
||
</div>
|
||
</div>
|
||
<div class="bottom">
|
||
<img src="https://cdn.cunwuyun.cn/fengdu/img-jifenlist.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "handpick",
|
||
appName: "精选动态",
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
getList() {
|
||
}
|
||
},
|
||
onShow() {},
|
||
onReachBottom() {
|
||
this.current++
|
||
this.getList()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.handpick {
|
||
padding: 24px 32px;
|
||
box-sizing: border-box;
|
||
.list {
|
||
padding: 32px 24px;
|
||
box-sizing: border-box;
|
||
background: #FFF;
|
||
border-radius: 12px;
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left {
|
||
width: 562px;
|
||
overflow:hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
.right {
|
||
width: 52px;
|
||
text-align: center;
|
||
img {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
span {
|
||
font-size: 28px;
|
||
font-weight: 400;
|
||
color: #687DA6;
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
img {
|
||
width: 100%;
|
||
height: 202px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |