164 lines
5.5 KiB
Vue
164 lines
5.5 KiB
Vue
<template>
|
||
<div class="aboutus">
|
||
<div class="tabs">
|
||
<div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">服务条款</div>
|
||
<div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">隐私政策</div>
|
||
<div :class="tabindex == 3 ? 'on' : ''" @click="tabchange(3)">意见反馈</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 v-model:value="value" placeholder="请输入您的意见反馈" :rows="10" />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sub" @click="sub">提交反馈</div>
|
||
</div>
|
||
<NavBottom class="navbottom"></NavBottom>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, ref } from "vue";
|
||
import NavBottom from "@/components/NavBottom.vue";
|
||
import { feedback } from '@/api';
|
||
export default defineComponent({
|
||
name: "Aboutus",
|
||
components: {
|
||
NavBottom,
|
||
},
|
||
setup() {
|
||
const tabindex=ref(1)
|
||
const value = ref("")
|
||
const tabchange: (e: number) => void = (e: number) => {
|
||
console.log(e);
|
||
tabindex.value=e
|
||
};
|
||
function sub(){
|
||
feedback(value.value)
|
||
}
|
||
return {
|
||
tabchange,
|
||
tabindex,
|
||
sub,
|
||
value
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.aboutus {
|
||
width: 1150px;
|
||
margin: 0 auto;
|
||
background: white;
|
||
border-radius: 17px;
|
||
color: #111111;
|
||
font-size: 13px;
|
||
::v-deep(.ant-input){
|
||
font-size: 11px;
|
||
width: 350px;
|
||
}
|
||
.tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
color: #111;
|
||
padding: 11px 0;
|
||
position: relative;
|
||
top: 10px;
|
||
left:36px;
|
||
> div {
|
||
margin-right: 58px;
|
||
cursor: pointer;
|
||
text-align: center;
|
||
width: 54px;
|
||
}
|
||
.on {
|
||
color: #08ae98;
|
||
position: relative;
|
||
&::before {
|
||
content: "";
|
||
display: block;
|
||
position: absolute;
|
||
bottom: -12px;
|
||
width: 57px;
|
||
height: 1px;
|
||
background-color: #08ae98;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
margin-top: 80px;
|
||
}
|
||
.navbottom {
|
||
padding-top: 68px;
|
||
padding-bottom: 28px;
|
||
}
|
||
}
|
||
</style> |