<template>
|
<div class="scollBox">
|
<div class="leftArrow" @click="scollFun('left')">
|
<i class="el-icon-arrow-left"></i>
|
</div>
|
<div id="scollBox" class="bookList">
|
<!-- <div class="bookItem" v-for="item in 4" :key="item"> -->
|
<div class="bookItem" >
|
<div class="left">
|
<div class="bookImg">
|
<img
|
class="autoImg"
|
src="@/assets/images/yinpian/home/book_1@2x.png"
|
alt=""
|
/>
|
</div>
|
<div class="nameBox">藏药饮片机器视觉识别手册</div>
|
</div>
|
<!-- <div class="right">
|
<div class="bookImg">
|
<img
|
class="autoImg"
|
src="@/assets/images/yinpian/home/book_2@2x.png"
|
alt=""
|
/>
|
</div>
|
<div class="nameBox">中医学基础</div>
|
</div> -->
|
</div>
|
</div>
|
<div class="rightArrow" @click="scollFun('right')">
|
<i class="el-icon-arrow-right"></i>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "popover",
|
methods: {
|
scollFun(type) {
|
let scollBox = document.getElementById("scollBox");
|
if (type == "left") {
|
scollBox.scrollBy({
|
left: 50,
|
behavior: "smooth",
|
});
|
} else {
|
scollBox.scrollBy({
|
right: 50,
|
behavior: "smooth",
|
});
|
}
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.bookItem {
|
display: flex;
|
justify-content: space-between;
|
padding: 10px 10px;
|
width: 250px;
|
}
|
.bookImg {
|
width: 110px;
|
height: 180px;
|
position: relative;
|
}
|
.scollBox {
|
display: flex;
|
align-items: center;
|
|
background-color: #f7f7eb;
|
padding: 0 10px;
|
position: relative;
|
}
|
.bookList {
|
display: flex;
|
justify-content: space-between;
|
width: 800px;
|
overflow-x: scroll;
|
overflow-y: hidden;
|
scrollbar-width: none; /* Firefox */
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
}
|
.left {
|
text-align: center;
|
}
|
.right {
|
text-align: center;
|
}
|
.nameBox {
|
max-width: 110px;
|
}
|
.leftArrow {
|
margin-right: 10px;
|
padding: 15px 5px;
|
background-color: #fff;
|
position: sticky;
|
left: 0;
|
}
|
.rightArrow {
|
margin-left: 10px;
|
padding: 15px 5px;
|
background-color: #fff;
|
position: sticky;
|
right: 0;
|
}
|
.scollBox::-webkit-scrollbar {
|
display: none; /* Chrome Safari */
|
}
|
</style>
|
|
<style>
|
.el-popover {
|
padding: 0 !important;
|
}
|
</style>
|
