tab vue 竖排_vue中tab选项卡的那些套路

tab

html,

body {

height: 100%;

margin: 0;

padding: 0;

background-color: #58596b;

}

.active {

color: #fff;

background: #e74c3c;

}

#app {

width: 800px;

height: 400px;

margin: 100px auto;

background-color: #fff;

box-shadow: 0 1px 3px rgba(0, 0, 0, .1);

}

.menuList {

width: 800px;

height: 60px;

background-color: #33344a;

}

ul {

width: 100%;

display: flex;

list-style: none;

padding: 0;

margin: 0;

color: #717181;

font-size: 16px;

line-height: 60px;

}

ul li {

flex: 1;

text-align: center;

cursor: pointer;

}

.tabCon {

width: 700px;

margin: 0 auto;