<template> <el-dialog title="气瓶追溯查看" :visible.sync="detailOpen" width="900px" append-to-body> <el-tabs v-model="activeName"> <el-tab-pane label="气瓶信息" name="first"> <BottleInfo :bottleId = "this.bottleId"/> </el-tab-pane> <el-tab-pane label="流转过程" name="second"> <Processes :bottleId = "this.bottleId"/> </el-tab-pane> </el-tabs> </el-dialog> </template> <script> import BottleInfo from "./BottleInfo"; import Processes from "./Processes"; export default { name: "view-bottle-track-info", components:{ BottleInfo, Processes }, data(){ return{ detailOpen: false, activeName: "first", bottleId: null } }, methods: { handleClick(tab, event) { console.log(tab, event); this.activeName = tab; } } } </script> <style scoped lang="scss"> .el-tab-pane{ margin-top: 20px; height: 350px; overflow-y: auto; &::-webkit-scrollbar { /* 设置滚动条宽度 */ width: 4px; /* 设置滚动条背景色 */ //background: black; } //滚动条轨道 &::-webkit-scrollbar-track { background-color:transparent; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } //滚动条滑块 &::-webkit-scrollbar-thumb { background-color: rgb(147,147,153,0.5); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius:2em; } } </style>