<template>

  <div>

 <!-- 左侧的滑动模块 -->

         <div

          class="scroll-box"

          :style="{width: 1106*screenWidth/1920+'px', height:336.52*screeHeight/1080+'px',top:130*screeHeight/1080+'px'}"

        >

          <div class="item" v-for="(item,index) of book" :key="index">

            <div

              class="boximg1"

              :style="{width: 285.51*screenWidth/1920+'px', height:315.52*screeHeight/1080+'px',top:10*screeHeight/1080+'px',marginLeft:50*screenWidth/1920+'px'}"

            >

                <div

                  class="boximg3"

                  :style="{width: 166.92*screenWidth/1920+'px', height:223.15*screeHeight/1080+'px',top:12*screeHeight/1080+'px'}"

                >

                  <img

                    :src="item.bookImg"

                    :width="166.92*screenWidth/1920+'px'"

                    :height="223.15*screeHeight/1080+'px'"

                  >

                </div>

              <div class="text" :style="{top:25*screeHeight/1080+'px'}">{{item.bookName}}</div>

            </div>

          </div>

        </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

      screenWidth: 1000, //宽屏幕尺寸

      screeHeight: 1000,

      book: [

        {

          id: 1,

          zm: "A",

          dc: "A",

          dcfy: "ə",

          zwfy: "a字母",

          zwpy: "a",

          dctp: "图片",

          dcyp: "音频",

          fiex01: null,

          fiex02: null

        },

        {

          id: 2,

          zm: "A",

          dc: "Alligator",

          dcfy: "ˈælɪɡeɪtər",

          zwfy: "鳄鱼",

          zwpy: "è yú",

          dctp: null,

          dcyp: null,

          fiex01: null,

          fiex02: null

        },

        {

          id: 3,

          zm: "A",

          dc: "Ant",

          dcfy: "ænt",

          zwfy: "蚂蚁",

          zwpy: "mǎ yǐ",

          dctp: null,

          dcyp: null,

          fiex01: null,

          fiex02: null

        },

        {

          id: 4,

          zm: "A",

          dc: "Apple",

          dcfy: "ˈæpl",

          zwfy: "苹果",

          zwpy: "píng guǒ",

          dctp: null,

          dcyp: null,

          fiex01: null,

          fiex02: null

        }

      ]

    };

  },

  mounted() {

    //获取屏幕长宽

    (this.screenWidth = document.documentElement.clientWidth),

      (this.screeHeight = document.documentElement.clientHeight),

      (window.onresize = () => {

        //屏幕尺寸变化就重新赋值

        return (() => {

          this.screenWidth = document.documentElement.clientWidth;

          this.screeHeight = document.documentElement.clientHeight;

        })();

      });

  }

};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.scroll-box {

  /* 给父盒子设置相对定位 */

  position: relative;

  /* position: relative; */

  box-shadow: 0 0 5px 2px #25c985;

  text-align: center;

  white-space: nowrap;

  overflow-y: scroll;

  overflow-x: hidden;

  /* 让父盒子水平居中

  margin: 0 auto; */

}

/* 隐藏滚动条 */

   ::-webkit-scrollbar {

     width: 0 !important;

   }

   ::-webkit-scrollbar {

     width: 0 !important;height: 0;

   }

/* 横线滑动 */

.item {

  white-space: nowrap;

  display: inline-block;

}

.boximg1 {

  /* 给父盒子设置相对定位 */

  position: relative;

  box-shadow: 0 0 0 1px #0f0b00;

  /* background: #f7aa05; */

  /* margin:0 20px */

  /* 边框圆角 */

  border-top-right-radius: 10px;

  border-top-left-radius: 10px;

  border-bottom-right-radius: 10px;

  border-bottom-left-radius: 10px;

}

.boximg3 {

  /* 给父盒子设置相对定位 */

  position: relative;

  display: flex;

  /* 给父盒子设置相对定位 */

  box-shadow: 0 0 0 2px #a09e9ee3;

  background: hsl(60, 9%, 98%);

  margin: 0 auto;

  /* margin:0 20px */

}

.text {

  /* 给父盒子设置相对定位 */

  position: relative;

  color: hsl(60, 9%, 98%);

  font-size: 20px;

  -webkit-text-stroke: 0.2px rgb(15, 15, 15);

}

</style>