<template>
|
<div class="contentBox">
|
<div class="aboutUs">
|
<div class="title">作者与读者服务</div>
|
<div
|
v-for="(item, index) in tabSelect"
|
:key="index"
|
:class="tabsSelected == index ? 'selected' : ''"
|
@click="
|
() => {
|
tabsSelected = index;
|
}
|
"
|
>
|
{{ item.name }}
|
<i class="el-icon-arrow-right" style="float: right"></i>
|
</div>
|
</div>
|
<div class="detailArea">
|
<div v-if="tabsSelected != 2 && tabsSelected != 3" class="title">
|
{{
|
tabSelect[tabsSelected].title
|
? tabSelect[tabsSelected].title
|
: tabSelect[tabsSelected].name
|
}}
|
<span>{{ tabSelect[tabsSelected].englishName }}</span>
|
</div>
|
<BasicInformation v-if="tabsSelected == 0"></BasicInformation>
|
<TeacherRegister v-if="tabsSelected == 1"></TeacherRegister>
|
<MyCollection v-if="tabsSelected == 2"></MyCollection>
|
<OrderList v-if="tabsSelected == 3"></OrderList>
|
<SampleApplication v-if="tabsSelected == 4"></SampleApplication>
|
<ElectronicSampleBook v-if="tabsSelected == 5"></ElectronicSampleBook>
|
<PaperSampleBook v-if="tabsSelected == 6"></PaperSampleBook>
|
<AddressManagement v-if="tabsSelected == 7"></AddressManagement>
|
<DownloadApplication v-if="tabsSelected == 8"></DownloadApplication>
|
<AuthorContribution v-if="tabsSelected == 9"></AuthorContribution>
|
</div>
|
</div>
|
</template>
|
<script>
|
import BasicInformation from "./components/basicInformation.vue";
|
import MyCollection from "./components/myCollection.vue";
|
import OrderList from "./components/orderList.vue";
|
import SampleApplication from "./components/sampleApplication.vue";
|
import ElectronicSampleBook from "./components/electronicSampleBook.vue";
|
import PaperSampleBook from "./components/paperSampleBook.vue";
|
import TeacherRegister from "./components/teacherRegister";
|
import AddressManagement from "./components/addressManagement.vue";
|
import DownloadApplication from "./components/downloadApplication.vue";
|
import AuthorContribution from "./components/authorContribution.vue";
|
export default {
|
name: "home",
|
components: {
|
BasicInformation,
|
MyCollection,
|
OrderList,
|
SampleApplication,
|
ElectronicSampleBook,
|
PaperSampleBook,
|
TeacherRegister,
|
AddressManagement,
|
DownloadApplication,
|
AuthorContribution
|
},
|
data() {
|
return {
|
tabsSelected: 0,
|
tabSelect: [
|
{
|
name: "基础信息",
|
englishName: "BASIC INFORMATION"
|
},
|
{
|
name: "教师认证",
|
title: "认证信息",
|
englishName: "AUTHENTICATION INFORMATION"
|
},
|
{
|
name: "我的收藏",
|
englishName: "MY COLLECTION"
|
},
|
{
|
name: "订单列表",
|
englishName: "MY COLLECTION"
|
},
|
{
|
name: "样书申请",
|
englishName: "SAMPLE APPLICATION"
|
},
|
{
|
name: "电子样书",
|
englishName: "ELECTRONIC BOOKS"
|
},
|
{
|
name: "纸质样书",
|
englishName: "PAPER COPIES"
|
},
|
{
|
name: "地址管理",
|
englishName: "ADDRESS MANAGEMENT"
|
},
|
{
|
name: "下载申请",
|
englishName: "DOWNLOAD THE APPLICATION"
|
},
|
{
|
name: "作者投稿",
|
englishName: "THE AUTHOR CONTRIBUTIONS"
|
}
|
]
|
};
|
},
|
created() {
|
if (this.$route.query.tabsSelected) {
|
this.tabsSelected = this.$route.query.tabsSelected;
|
}
|
// 获取订单
|
if (localStorage.getItem("selectedTab")) {
|
this.tabsSelected = JSON.parse(localStorage.getItem("selectedTab"));
|
localStorage.removeItem("selectedTab");
|
}
|
},
|
methods: {
|
changeSelected(index) {
|
this.tabsSelected = index;
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.contentBox {
|
display: flex;
|
justify-content: space-between;
|
padding-bottom: 100px;
|
margin-top: 50px;
|
.aboutUs {
|
width: 377px;
|
height: 833px;
|
font-size: 16px;
|
background-color: #fff;
|
.selected {
|
color: #00873c;
|
i {
|
color: #00873c;
|
}
|
}
|
.title {
|
font-size: 18px;
|
margin: 0;
|
padding: 0;
|
border-top: 2px solid #00873c;
|
font-weight: 700;
|
text-align: center;
|
background: #d8f7e6;
|
color: #00873c;
|
line-height: 60px;
|
border-bottom: 0;
|
cursor: auto;
|
}
|
div {
|
padding: 30px 0;
|
margin: 0 30px;
|
// border-bottom: 1px solid #ededed;
|
cursor: pointer;
|
}
|
:last-child {
|
border-bottom: 0;
|
}
|
}
|
.detailArea {
|
width: 813px;
|
background-color: #fff;
|
.title {
|
font-size: 18px;
|
font-weight: 700;
|
letter-spacing: 1.8px;
|
border-top: 2px solid #008e3f;
|
line-height: 36px;
|
padding-left: 40px;
|
background: #d8f7e6;
|
line-height: 60px;
|
color: #00873c;
|
.splitline {
|
width: 1px;
|
height: 24px;
|
background-color: #008e3f;
|
}
|
span {
|
font-size: 16px;
|
font-weight: 500;
|
}
|
}
|
}
|
}
|
</style>
|
