代码
<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>
效果
标签:vue,盒子,zwpy,横向,relative,position,滑动,null,给父 From: https://www.cnblogs.com/xbinbin/p/17171311.html