131 lines
2.4 KiB
Vue
131 lines
2.4 KiB
Vue
<template>
|
|
<view class="footbox">
|
|
<view class="footlist">
|
|
<view class="list" v-for="(it,ind) in list" :key="ind" @click="handleDetail(it.id)">
|
|
<view class="topimg">
|
|
<image :src="it.cover" class="img" mode="aspectFill"></image>
|
|
</view>
|
|
<view class="item">
|
|
<view class="title">{{it.title}}</view>
|
|
<view class="name">
|
|
<image :src="it.create_user_head_pic"></image>
|
|
<text class="overflow">{{it.create_user_nickname}}</text>
|
|
</view>
|
|
<view class="zan">
|
|
<icon class="iconfont" :class="[it.is_me_like_it=='yes'?'icon-icon3':'icon-icon_collect']">
|
|
</icon>
|
|
<text>{{it.likes_num}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="!list.length" class="nolist">
|
|
<icon class="iconfont icon-wancan"></icon>
|
|
<text>还没有记录哦</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "list",
|
|
data() {
|
|
return {};
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
list: {
|
|
type: Array,
|
|
default: []
|
|
}
|
|
},
|
|
mounted() {
|
|
let that = this
|
|
},
|
|
methods: {
|
|
// 商品详情
|
|
handleDetail(id) {
|
|
if (!uni.getStorageSync('token')) {
|
|
this.$tools.msg("登录后查看等多！")
|
|
return
|
|
}
|
|
uni.navigateTo({
|
|
url: "/pageTwo/me/menudetail?id=" + id
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.footlist {
|
|
margin: 30rpx 0;
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: hidden;
|
|
column-gap: 20rpx;
|
|
column-count: 2;
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
// justify-content: space-between;
|
|
|
|
.list {
|
|
margin-bottom: 20rpx;
|
|
// height: auto;
|
|
overflow: auto;
|
|
break-inside: avoid;
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
-webkit-column-break-inside: avoid;
|
|
|
|
.item {
|
|
color: #666;
|
|
width: calc(100% - 20rpx);
|
|
position: initial;
|
|
background: #fff;
|
|
border-radius: 0 0 5px 5px;
|
|
font-size: 14px;
|
|
height: auto;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.topimg {
|
|
width: 335rpx;
|
|
height: 370rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
border-radius: 5px 5px 0 0;
|
|
}
|
|
|
|
|
|
|
|
.zan {
|
|
.iconfont {
|
|
font-size: 16px;
|
|
position: inherit !important;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.list:nth-of-type(2n) {
|
|
.topimg {
|
|
height: 300rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style> |