vue横向滚动条的实现

最新推荐文章于 2024-08-21 10:31:01 发布

developinggirl

最新推荐文章于 2024-08-21 10:31:01 发布

阅读量2.7k

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/developinggirl/article/details/121703622

版权

<template>
  <div id="" class="wrapper">
    <div class="nav">
      <div style="width: 10px; height: 18px" @click="goBack">
        <img class="arrowBack" src="@/assets/detail/al.png" />
      </div>
      <div class="nav_title">进货订单</div>
    </div>
    <div class="container">
        <ul class="content">
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
           <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
          <li class="content_item
          ">111111</li>
        </ul>
    </div>
    <div class="main-body" style="margin-top: 60px"></div>
  </div>
</template>
<script>
import GLOBAL from "@/api/global_variable";
export default {
  name: "set",
  components: {},
  data() {
    return {
      nav: ["待发货", "待付款", "全部"],
      platform: GLOBAL.platform,
    };
  },

  methods: {
    goBack() {
      this.$router.back();
    },
  },
};
</script>
<style scoped>
body {
  width: 100%;
  height: 100%;
}
.nav {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 500;
  background: #fff;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* text-align: center; */
}
.nav_title {
  height: 60px;
  font-size: 17px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #323233;
  line-height: 60px;
}
.arrowBack {
  width: 10px;
  height: 18px;
  left: 18px;
  position: absolute;
  z-index: 99;
}
.container {
  width: 100%;
  height: 22px;
  margin-top: 60px;
  overflow: auto;
}
.content {
  /* width: 100%; */
  height: 22px;
  display: flex;
}
.content_item{
  float: left;

}
</style>