commit.vue

<template>
  <div class="home">
    <Header title="观影互动" />
    <div class="commit-container">
      <van-tabs type="card" v-model="activeTab">
        <van-tab title="观影互动">
          <div class="commit-page">
            <commit-tab />
          </div>
        </van-tab>
        <van-tab title="互动历史">
          <div class="commit-page">
            <history-tab />
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <my-tabbar active="0"></my-tabbar>
  </div>
</template>

<script>
import Header from "@/components/Header/index.vue";
import commitTab from "./components/commitTab.vue";
import historyTab from "./components/historyTab.vue";
export default {
  components: {
    Header,
    commitTab,
    historyTab,
  },
  data() {
    return {
      activeTab: 1,
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  padding: 60px 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .commit-container {
    height: 100%;
    ::v-deep .van-tabs--card > .van-tabs__wrap {
      height: 40px;
      .van-tabs__nav {
        background: rgba(164, 21, 29, 0.1);
      }
      .van-tabs__nav--card {
        margin: 0;
        height: 40px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border: 1px solid #a4151d;
        .van-tab {
          color: #a4151d;
          border-right: 1px solid #a4151d;
          &.van-tab--active {
            color: #fff;
            background-color: #a4151d;
          }
          &:last-child {
            border-top-right-radius: 8px;
          }
          &:first-child {
            border-top-left-radius: 8px;
          }
        }
      }
    }
    .commit-page {
      width: 100%;
      height: 100vh;
    }
  }
}
</style>