HM21St_Page_User/src/components/common/BookAllListModule.vue

<template>
  <div class="BookListModule" v-if="Bookinfo">
    <div class="module">
      <div class="title" v-if="!this.$route.query.from">
        <div class="title-left">
            <span>
                {{Bookinfo.name}}
            </span>
            <b>{{Bookinfo.numberstr}}</b>
        </div>
        <!-- <div class="title-right" v-if="showAll">
            <a class="lookmore" @click="lookmore"><span>查看全部</span><i class="el-icon-arrow-right"></i></a>
        </div> -->
      </div>
      <div class="peruselist" v-if="Bookinfo.bookType==='jingdu'">
        <div
          v-for="(item,index) in Bookinfo.BookList"
          :key="index+'todayNew'"
          :style="{
              marginLeft:index==0||index%4==0?'0':'24px',
            }"
        >
          <BookPeruseCard
            :item="item"
            :headerBg="headerBg"
            :headerBorder="headerBorder"
            :userBg="userBg"
            :LoginNavIndex="LoginNavIndex"
            :previousPage="Bookinfo.name"
          />
        </div>
      </div>
      <div class="listlive" v-else-if="Bookinfo.bookType==='ZB'">
        <div
          v-for="(item,index) in Bookinfo.BookList"
          :key="index+'todayNew'"
          :style="{
              marginLeft:index==0||index%4==0?'0':'24px',
            }"
        >
          <BookLiveCard
            :item="item"
            :headerBg="headerBg"
            :headerBorder="headerBorder"
            :userBg="userBg"
            :LoginNavIndex="LoginNavIndex"
            :previousPage="Bookinfo.name"
          />
        </div>
      </div>
      <div class="list" v-else>
        <div
          v-for="(item,index) in Bookinfo.BookList"
          :key="index+'todayNew'"
          :style="{
              marginLeft:index==0||index%5==0?'0':'50px',
            }"
        >
          <BookCard
            :item="item"
            :headerBg="headerBg"
            :headerBorder="headerBorder"
            :userBg="userBg"
            :LoginNavIndex="LoginNavIndex"
            :previousPage="Bookinfo.name"
          />
        </div>
      </div>
      <div class="nodata" v-if="Bookinfo.BookList.length===0">
        <img src="../../assets/nodata.png" />
        <p>找不到文件</p>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import BookCard from "./BookCard.vue"
import BookLiveCard from "./BookLiveCard.vue"
import BookPeruseCard from "./BookPeruseCard.vue"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    BookCard,
    BookLiveCard,
    BookPeruseCard
  },
  props: ["Bookinfo","showAll","showPage","LoginNavIndex","userBg","headerBorder","headerBg","previousPage"],
  data() {
    //这里存放数据
    return {
        typeList: {
            huakan: {
                name: '画刊',
            },
            baozhi: {
                name: '报纸',
            },
            xiti: {
                name: '练习册',
            },
            kecheng: {
                name: '课程',
            },
        },
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 查看全部
    lookmore(){
        this.$emit("changeStudy",this.Bookinfo.study)
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  //生命周期-创建之前
  beforeCreated() { },
  //生命周期-挂载之前
  beforeMount() { },
  //生命周期-更新之前
  beforUpdate() { },
  //生命周期-更新之后
  updated() { },
  //生命周期-销毁之前
  beforeDestory() { },
  //生命周期-销毁完成
  destoryed() { },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() { }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.module {
  margin-top: -12px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    &-left{
        display: flex;
        align-items: center;
        span{
            font-weight: 500;
            font-size: 24px;
            line-height: 32px;
            color: #1F2C5C;
        }
        b{
            font-weight: 400;
            font-size: 16px;
            line-height: 32px;
            color: #929CA8;
            margin-left: 16px;
        }
    }
    &-right{
        display: flex;
        align-items: center;
    }
    div.title-button {
      width: 48px;
      height: 24px;
      background: #d4e3fc;
      border-radius: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 16px;
        height: 16px;
        margin: 0 4px;
        cursor: pointer;
      }
    }
    .lookmore{
        display: flex;
        align-items: center;
        margin-left: 24px;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        .el-icon-arrow-right{
            margin-left: 4px;
            color: #C1C5CD;
            height: 24px;
            line-height: 24px;
        }
    }
  }
  .list,.listlive,.peruselist {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    > div {
      width: 200px;
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
      margin-bottom: 40px;
      &:hover{
        box-shadow:  0px 0px 30px rgba(0,0,0,0.1);
      }
    }
  }
  .listlive,.peruselist{
    >div{
        width: 282px;
    }
  }
}
</style>