HM21St_Page_User/src/components/common/BookListModule.vue

<template>
  <div class="BookListModule">
    <div class="module">
      <div class="title">
        <div class="title-left">
            <svg-icon :icon-class="name" className="icon-img"></svg-icon>
            <span>
                {{typeList[name].name}}
            </span>
        </div>
        <div class="title-right">
            <!-- <div class="title-button">
                <img
                    src="../../assets/common/Left-one.png"
                    alt=""
                >
                <img
                    src="../../assets/common/Right-one.png"
                    alt=""
                >
            </div> -->
            <a class="lookmore" @click="lookmore"><span>查看全部</span><i class="el-icon-arrow-right"></i></a>
        </div>
      </div>
      <div class="list">
        <template v-if="name==='baozhi'">
            <a class="img-box">
                <img src="../../assets/baozhi-ding.png" class="baozhi-ding" />
            </a>
        </template>
        <div class="item-box">
            <BookCard
                :item="item"
                :headerBg="headerBg"
                :headerBorder="headerBorder"
                :userBg="userBg"
                :LoginNavIndex="LoginNavIndex"
                :previousPage="previousPage"
                class="item"
                v-for="(item,index) in list"
                :key="index+'todayNew'"
                :style="{
                    marginLeft:index==0?'0':'24px',
                }"
            />
        </div>
        
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》from ‘《组件路径》';
import BookCard from "./BookCard.vue"
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    BookCard,
  },
  props: ["list", "name", "value","LoginNavIndex","userBg","headerBorder","headerBg","previousPage"],
  data() {
    //这里存放数据
    return {
        typeList: {
            huakan: {
                name: '画刊',
            },
            baozhi: {
                name: '报纸',
            },
            xiti: {
                name: '练习册',
            },
            kecheng: {
                name: '课程',
            },
            jingdu: {
                name: '精读课堂'
            }
        }
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法集合
  methods: {
    // 查看全部
    lookmore(){
        this.$router.push({
          path: "/bookStore/all",
          query: {
            name: encodeURIComponent(this.typeList[this.name].name),
            type: this.name
          }
        })
    },
  },
  //生命周期 - 创建完成（可以访问当前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;
        .icon-img{
            width: 24px;
            height: 24px;
            margin: 3px 8px 0 0;
            color: rgba(0, 0, 0, 0.88);
        }
        span{
            font-weight: 400;
            font-size: 24px;
            line-height: 32px;
            color: #1F2C5C;
            display: block;
        }
    }
    &-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;
        color: #000;
        .el-icon-arrow-right{
            margin-left: 4px;
            color: rgba(0, 0, 0, 0.88);
            height: 22px;
            line-height: 24px;
        }
        &:hover{
            color: #165DFF;
            .el-icon-arrow-right{
                color: #165DFF;
            }
        }
    }
  }
  .list{
    display: flex;
    padding: 24px 0 0 0;
  }
  .item-box {
    display: flex;
    flex: 1;
    overflow: auto;
    padding-bottom: 40px;
    &::-webkit-scrollbar {
        display: none;
    }
    .item {
      width: 200px;
      flex-shrink: 0;
      border-radius: 8px;
      overflow: hidden;
      background: #ffffff;
      &:hover{
        box-shadow:  0px 0px 30px rgba(0,0,0,0.1);
      }
    }
  }
  .img-box{
    margin-right: 24px;
    font-size: 0;
  }
  .baozhi-ding{
    width: 450px;
    height: 384px;
  }
}
</style>