vue横向滚动条的实现
<template><div id="" class="wrapper"><div class="nav"><div style="width: 10px; height: 18px" @click="goBack"><img class="arrowBack" src="@/assets/detail/al.png" /></di
·
<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>
更多推荐
已为社区贡献4条内容
所有评论(0)