<template> <div class="index_body"> <!-- <a-tabs type="card" :tabBarGutter="10" @change="changeActiveKey"> <a-tab-pane key="1" tab="在库管理"> <in-stock-manage v-if="activeKey == '1'"></in-stock-manage> </a-tab-pane> <a-tab-pane key="2" tab="叶酸发放登记"> <folvite-distribution v-if="activeKey == '2'"></folvite-distribution> </a-tab-pane> <a-tab-pane key="3" tab="分配入库(0)"> <distribution-warehousing v-if="activeKey == '3'"></distribution-warehousing> </a-tab-pane> <a-tab-pane key="4" tab="叶酸申请管理(0)"> Content of Tab Pane 4 </a-tab-pane> <a-tab-pane key="5" tab="知情同意书管理"> Content of Tab Pane 5 </a-tab-pane> </a-tabs>--> </div> </template> <script> import InStockManage from "./indexComponent/inStockManage/inStockManage"; import FolviteDistribution from "./indexComponent/folviteDistribution/folviteDistribution"; import DistributionWarehousing from "./indexComponent/distributionWarehousing/distributionWarehousing"; export default { components: {DistributionWarehousing, FolviteDistribution, InStockManage}, data() { return { activeKey: '1' } }, created() { let netWorkInfo = JSON.parse(window.sessionStorage.getItem('networkInfo')) }, methods: { changeActiveKey(key) { this.activeKey = key }, } } </script> <style lang="less"> .index_body { .ant-tabs-nav-scroll { margin-left: 0px!important; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-nav-container { height: 35px!important; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab { height: 35px!important; color: #F8F8FF!important; line-height: 35px!important; background: rgba(255,77,128, .5); border-bottom: 0px solid #FF4D80; border-top-left-radius: 10px; border-top-right-radius: 10px; } .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active { height: 35px!important; color: #fff; background: #FF4D80; border-color: #FF4D80; border-bottom: 0px solid #FF4D80; border-top-left-radius: 10px; border-top-right-radius: 10px; } } </style>