155 lines
5.3 KiB
Vue
155 lines
5.3 KiB
Vue
<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> |