为什么我的效果就是不一样呢?

来源: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

同学你好,我看你的代码是没问题的,你可以上传一下代码,我在本地帮你看一下

0
4
慕村8337265
回复
扬_灵
好了,多谢啦。
2020-05-13
共4条回复

零基础入门 实战mpvue2.0多端小程序框架

mpvue,一套代码搞定多个平台小程序,前端更易上手

819 学习 · 647 问题

查看课程