为什么我的效果就是不一样呢?
来源:8-6 图书卡片组件开发(上)
慕村8337265
2020-05-13
为什么我的效果就是不一样呢?请老师帮看一下。
正常应当是三张图片并在一起的效果。
<template>
<div class="home-card">
<div class="home-card-inner">
<div class="user-info">
<div class="image-wrapper">
<image-view
src="https://www.youbaobao.xyz/mpvue-res/logo.jpg"
round
>
</image-view>
</div>
<div class="nickname">{{'米老鼠'}}</div>
<div class="shift-text">书架共有{{'5'}}本好书</div>
<div class="round-item"></div>
<div class="shift-text">特别精选</div>
</div>
<div class="book-info">
<div class="book-wrapper">
<image-view src="https://www.youbaobao.xyz/book/res/img//EarthSciences/978-981-10-3713-9_CoverFigure.jpg"></image-view>
<image-view src="https://www.youbaobao.xyz/book/res/img//EarthSciences/978-981-10-3713-9_CoverFigure.jpg"></image-view>
<image-view src="https://www.youbaobao.xyz/book/res/img//EarthSciences/978-981-10-3713-9_CoverFigure.jpg"></image-view>
</div>
<div class="shift-wrapper">
<div>书架</div>
<van-icon class="arrow" name="arrow"></van-icon>
</div>
</div>
<div class="feedback-wrapper"></div>
</div>
</div>
</template>
<script>
//
import ImageView from '../base/imageView'
export default {
components: {ImageView},
props: {
src: {
type: String,
default: ''
}
},
data() {
return {
isLoading: true
}
}
}
</script>
<style lang="scss">
.home-card{
background-image: linear-gradient(-90deg, #54575F 0%, #595B60 100%);
border-radius: 15px;
margin:22px 20px 0px;
.home-card-inner{
padding:23px 17px 20px 20px;
box-sizing: border-box;
.user-info{
display:flex;
align-items:center;
.image-wrapper{
width:20px;
height: 20px;
}
.nickname,.shift-text{
font-size:12px;
color:white;
margin:0px 8px;
}
.shift-text{
opacity: 0.7;
}
.round-item{
width: 5px;
height: 5px;
border-radius:50%;
background-color: #a2a2a2;
margin:0px 8px;
}
}
.book-info{
display:flex;
.book-wrapper{
flex:1;
display:flex;
}
.shift-wrapper{
display:flex;
align-items: center;
}
}
.feedback-wrapper{}
}
}
</style>
写回答
1回答
-
扬_灵
2020-05-13
同学你好,我看你的代码是没问题的,你可以上传一下代码,我在本地帮你看一下
042020-05-13
相似问题