vue横向滑动

代码

<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>

效果