<template>
  <div class="aboutus">
    <div class="tabs">
      <div @click="tabchange(1)">
        <div :class="tabindex==1?'active':''">服务条款</div>
        <div :class="tabindex==1?'lineactive':''"></div>
      </div>
      <div @click="tabchange(2)">
         <div :class="tabindex==2?'active':''">隐私政策</div>
         <div :class="tabindex==2?'lineactive':''"></div>
      </div>
      <div @click="tabchange(3)">
        <div :class="tabindex==3?'active':''">意见反馈</div>
         <div :class="tabindex==3?'lineactive':''"></div>

      </div>
     
      
    </div>
    <div class="line"></div>
    <div class="content" v-if="tabindex==1|| tabindex==2">
      <div class="title">关于Beelink</div>
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div>
      <div class="title">关于Beelink</div>
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div>
      <div class="title">关于Beelink</div>
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div>
      <div class="title">关于Beelink</div>
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div>
    </div>
    <div v-else>
      
      <div class="fankui">
        <div class="label">意见反馈</div>
        <div>
            <a-textarea placeholder="textarea with clear icon" allow-clear @change="onChange" class="fankuicontent"/>
        </div>
      </div>

      <div class="sub">提交反馈</div>
    </div>
    <NavBottom class="navbottom"></NavBottom>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
export default defineComponent({
  name: "Aboutus",
  components: {
    NavBottom,
  },
  setup() {
    const tabindex=ref(1)
     const tabchange: (e: number) => void = (e: number) => {
      console.log(e);
      tabindex.value=e
    };
    return {
      tabchange,
      tabindex
    };
  },
});
</script>
<style lang="scss" scoped>
.aboutus {
  width: 1150px;
  margin: 0 auto;
  background: white;
  border-radius: 17px;
  color: #111111;
  font-size: 13px;
  .tabs {
    padding-top: 40px;
    padding-left: 43px;
    width: 265px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    div {
      cursor: pointer;
    }
    .active {
      color: #08ae98;
    }
    .lineactive{
      width: 57px;
      height: 1px;
      background: #08AE98;
      position: relative;
      top:11px;
    }
  }
  .line {
    width: 1070px;
    height: 1px;
    background: #eeeeee;
    margin-top: 11px;
  }
  .content {
    width: 1069px;
    margin: 0 auto;
    margin-top: 27px;
  }
  .title {
    margin-top: 40px;
  }
  .fankui{
    width: 1070px;
    margin:0 auto;
    margin-top: 35px;
    display:flex;
      .label{
    color: #808080;
    font-size:11px;
    margin-right: 28px;
  }

  }
  .fankuicontent{
    width: 359px;
    height:171px
  }
  .sub{
    width:63px;
    height: 23px;
    background:#08AE98;
    border-radius: 3px;
    color: white;
    font-size: 10px;
    line-height: 23px;
    text-align: center;
    margin-left:40px;
    margin-bottom: 110px;
  }
  .navbottom {
    padding-top: 68px;
    padding-bottom: 28px;
  }
}
</style>