opt.vue

<template>
  <div class="opt-container">
    <div class="opt-page">
      <van-tabs type="card" v-model="activeName">
        <van-tab title="机顶盒激活" name="1">
          <custom-form  actived="1"></custom-form>
        </van-tab>
        <van-tab title="故障上报" name="2">
          <custom-form actived="2"></custom-form>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import CustomForm from "./components/form";
export default {
  components: {
    CustomForm,
  },
  data() {
    return {
      activeName: "1",
    };
  },
};
</script>
<style lang="scss">
.opt-container {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 16px;
  right: 16px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  .opt-page {
    width: 100%;
    height: 100%;
  }

  .van-tabs__nav--card {
    margin: 0;
  }
  .van-tabs {
    width: 100%;
    height: 100%;
  }
  .van-tabs--card > .van-tabs__wrap {
    height: 40px;
  }
  .van-tabs__nav--card .van-tab {
    color: #333;
    font-size: 16px;
    border-right: none;
  }
  .van-tabs__nav--card {
    height: 40px;
    background: #eeeeee;
    border-radius: 8px 8px 0 0;
    border: none;
  }
  .van-tabs__nav--card .van-tab.van-tab--active {
    color: #fff;
    background-color: #a4151d;
  }
  .van-tabs__nav--card .van-tab.van-tab--active:last-child {
    border-top-right-radius: 8px;
  }
  .van-tabs__nav--card .van-tab.van-tab--active:first-child {
    border-top-left-radius: 8px;
  }
}
</style>