横向滚动（语言通用）

最新推荐文章于 2025-06-13 08:24:12 发布

黑白两客

最新推荐文章于 2025-06-13 08:24:12 发布

阅读量236

点赞数 1

文章标签： javascript css 前端

本文链接：https://blog.youkuaiyun.com/weixin_44694682/article/details/142981764

版权

<template>
  <div class="linebox">
    <div class="linebox_it" v-for="(it, id) in 10" :key="id" @click="getlookfile(it)">
      <div class="linebox_it_img">
        <img :src="img" alt="">
      </div>
      <div class="linebox_it_name">我是新功能</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      img: require('../assets/img/loginlogo_giant.png'),
    }
  },
  mounted() {

  },
  computed: {

  },
  methods: {
    getlookfile(file) {
      this.$emit('lookfile', file)
    }
  },
}
</script>
<style lang='less' scoped>
.linebox {
  width: 100%;
  // max-width: 640px;
  // margin: 0 auto;
  padding: 5px 0px;
  background-color: #fff;
  color: #25345A;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;

  .linebox_it {
    text-align: center;
    display: inline-block;
    width: 100px;
    cursor: pointer;
    vertical-align: middle;

    .linebox_it_img {
      width: 50px;
      height: 50px;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        max-width: 100%;
        max-height: 100%;
      }
    }
  }
}
</style>