/* 全部一行两个 */ <template> <div class="tab_content abroad"> <div class="padding_box"> <template v-for="(item,index) in list"> <div class="uni_item_mini" :key="index" @click="handleBaseDetail(item)"> <div class="img_box" :style="{backgroundImage:'url('+item.coverUrl+')'}"> <div class="bottom"> <span class="level" v-if="item.level"> {{item.level}}基营地 </span> <span class="count"> {{item.read_count}}人已预览 </span> <!-- <span class="score">0.0</span> --> </div> </div> <div class="content"> <p class="title">{{item.baseName}}</p> <div class="tag_box"> <template v-for="(tag,index2) in item.baseLabel"> <span class="tag" v-if="tag" :key="index2">{{tag}}</span> </template> </div> </div> </div> </template> <van-empty v-if="list.length==0" :image="require('@/assets/empty.png')" description="暂无基地" /> </div> </div> </template> <script> export default { props: { list: { type: Array, default: [] } }, data () { return { active: 0, defaultImg: require('@/assets/service/defCoure.jpg'), } }, methods: { handleBaseDetail (item) { this.$router.push({ name: 'ServiceBaseDetail', query: { baseId: item.id} }) }, } } </script> <style lang="scss" scoped> .tab_content { box-sizing: border-box; overflow: auto; } .tab_btn_box { .tab_btn { width: 178px; height: 52px; border-radius: 16px; border: none; background: rgba(255, 255, 255, 0.36); color: #666666; padding: 0; margin-right: 16px; &.active { background: #ffffff; color: #4092ff; } } } .abroad { padding: 18px 0; .padding_box { padding: 0 28px; padding-bottom: 16px; } .uni_item_mini { position: relative; margin-top: 16px; display: inline-block; width: 336px; vertical-align: top; &:nth-of-type(2n-1) { margin-right: 22px; clear: both; } .img_box { position: relative; border-radius: 16px; overflow: hidden; width: 336px; height: 420px; background-size: cover; background-position: center; .time { position: absolute; top: 0; left: 0; width: 100%; line-height: 52px; font-size: 21px; font-weight: bold; background: rgba(0, 0, 0, 0.27); border-radius: 16px; color: #fff; text-align: center; white-space: nowrap; } .bottom { position: absolute; bottom: 0; left: 0; width: 100%; box-sizing: border-box; padding: 0 20px; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); color: #fff; .level { display: block; font-size: 26px; } .count { display:inline-block; font-size: 20px; padding: 2px 10px; background: rgba(0, 0, 0, 0.3); border-radius: 10px; margin-top: 8px; margin-bottom: 14px; } .score{ font-size: 42px; line-height: 58px; position: absolute; right: 18px; bottom: 22px; color: #FFE930; } } } .content { margin-top: 6px; .title { display: -webkit-box; font-size: 28px; line-height: 40px; -webkit-line-clamp: 2; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient: vertical; margin-top:20px; } .address { font-size: 24px; margin-top: 8px; } .tag_box { padding-top: 6px; .tag { display: inline-block; margin-bottom: 10px; margin-right: 10px; color: #4092ff; font-size: 20px; border-radius: 4px; border: 2px solid #4092ff; padding: 0px 6px; } } } } .line { width: 100%; height: 16px; background: #f5f6fa; } } </style>