<template> <div> <div style="font-size: 0;"> <div class="img-box" v-for="(item,i) in list" :key="i"> <div class="img-bg-box"> <!-- 占位图 --> <img class="seize-seat-img" src="data:image/png;base64,/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAChARIDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwC2gIoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//Z"> <div class="cover-bg dis-flex-center"> <!-- 需要等比缩放显示的图 --> <img :src="item.pic" class="img-bg"> </div> <div class="duration-value">{{ item.durationValue }}</div> </div> <div> <div class="camera-name over_elips">{{item.name}}</div> <div class="people-num">查看:{{item.personCount}}<span class="agree-with">点赞:{{item.praiseCount}}</span></div> </div> </div> </div> </div> </template> <script> export default { data() { return { list: [] } } } </script> <style lang="scss" scoped> .img-box{ width: 25%; display: inline-block; padding: 0 10px; .img-bg-box{ cursor: pointer; font-size: 0; margin-top: 20px; text-align: center; position: relative; .seize-seat-img{ width: 100%; height: 100%; } .cover-bg{ position: absolute; top: 0; left: 0; z-index: 6; width: 100%; height: 100%; overflow: hidden; .img-bg{ max-height: 100%; max-width: 100%; border-radius: 4px; } } .duration-value{ position: absolute; right: 10px; bottom: 10px; z-index: 10; font-size: 16px; } } } </style>
原文:https://www.cnblogs.com/lijh03/p/12558191.html