效果：

实现代码：

<template><div class="index_div"><div class="container"><div class="flexBox"><div class="flex_item" v-for="item in topMenu" :key="item.id"><img src="@/assets/image/action/autoRule.png" alt=""><div>{{ item.name }}</div></div></div><div class="flexBox"><div class="flex_item" v-for="item in bottomMenu" :key="item.id"><img src="@/assets/image/action/minMax.png" alt=""><div>{{ item.name }}</div></div></div></div></div>
</template><script>
export default {name: 'H5Test',data() {return {topMenu: [{ id: '1-1',name: '广州'}, { id: '1-2',name: '深圳'}, { id: '1-3',name: '北京'}, { id: '1-4',name: '上海'}, { id: '1-5',name: '东莞'}, { id: '1-6',name: '珠海'}, { id: '1-7',name: '肇庆'}],bottomMenu: [{ id: '2-1',name: '美食'}, { id: '2-2',name: '行街'}, { id: '2-3',name: '演出'}, { id: '2-4',name: '展览'}, { id: '2-5',name: '打卡'}],};},mounted() {},methods: {},
};
</script><style lang="less" scoped>
.index_div{padding: 10px;
}
.container{padding: 20px;overflow: hidden;overflow-x: scroll;border-radius: 20px;background: #ecbf94;
}
.flexBox{display: inline-flex;align-items: center;margin-bottom: 20px;&:nth-last-child(1){margin-bottom: unset}.flex_item{width: 55px;height: 55px;text-align: center;padding: 5px;margin-right: 15px;border-radius: 10px;background: #ffe7cd;flex: 0 0 auto; // 等同于 flex: none，默认元素有剩余空间也不放大，空间不足时也不能缩小&:nth-last-child(1){margin-right: unset;}img{width: 25px;}}
}
</style>