效果图

此处只说明滚动条设置，横线布局参考https://blog.csdn.net/cy1502/article/details/121543818?spm=1001.2014.3001.5501
主要属性：hover,overflow:hidden及滚动条属性

完整代码

<template>
  <div>
    <div class="page-cards">
        <div class="page-card" v-for="item in cards">
              <div class="card-title">{{item.name}}</div>
              <div class="card-number">{{item.number}}</div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
   data(){
       return {
          card:[
             {name:'卡片一',number:'1'},
             {name:'卡片二',number:'2'},
             {name:'卡片三',number:'3'},
             {name:'卡片四',number:'4'},
             {name:'卡片五',number:'5'},
             {name:'卡片六',number:'6'},
             {name:'卡片七',number:'7'},
             {name:'卡片八',number:'8'},
             {name:'卡片九',number:'9'}
       }
   }
}
</script>
<style lang="scss" scoped>
.page-cards{
    height:220px;
    width:100%;
    overflow:hidden;/*重要*/
    wihte-space:nowrap;
    .page-card{
        background-color:#fff;
        width:170px;
        margin-right:15px;
        display:line-block;
    }
}
.page-cards:hover{
    overflow-x:scroll;
    overflow-y:hidden;
}
::-webkit-scrollbar{
width:4px;
height:9px;
}/* 滚动条整体宽度 */
::-webkit-scrollbar-track{
background-color:#eee;
}/*滚动条背景色*/
::-webkit-scrollbar-thumb{
background-color:#999;
border-radius:8px;
}
</style>