122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
<template>
|
|
<view class="container">
|
|
<unitv-page
|
|
id="indexPage"
|
|
ref="indexPage"
|
|
class="indexPage"
|
|
:show="true"
|
|
@back="pageBack"
|
|
>
|
|
<app-header />
|
|
<unitv-zone
|
|
id="tabs_zone"
|
|
class="tabs_zone"
|
|
:auto-fous="true"
|
|
up="header_zone"
|
|
:down="tabsZoneDown"
|
|
:item="0"
|
|
:values="tabs"
|
|
:column="tabs.length"
|
|
>
|
|
<unitv-item
|
|
v-for="(item, index) in tabs"
|
|
:key="index"
|
|
:item="index"
|
|
class="item"
|
|
@hover="fnHoverTabs"
|
|
>
|
|
<view>{{ item.name }}</view>
|
|
</unitv-item>
|
|
</unitv-zone>
|
|
<home v-if="currentTab === 0" />
|
|
<premium-recommendation v-if="currentTab === 1" />
|
|
<course-classification v-if="currentTab === 2" />
|
|
</unitv-page>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Home from "./home.vue";
|
|
import PremiumRecommendation from "./premium_recommendation.vue";
|
|
import CourseClassification from "./course_classification.vue";
|
|
|
|
export default {
|
|
components: {
|
|
Home,
|
|
PremiumRecommendation,
|
|
CourseClassification,
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [{ name: "首页" }, { name: "精品推荐" }, { name: "课程分类" }],
|
|
currentTab: 0,
|
|
};
|
|
},
|
|
onShow() {
|
|
if (this.$refs.indexPage) {
|
|
this.$refs.indexPage.showPage();
|
|
}
|
|
},
|
|
computed: {
|
|
tabsZoneDown() {
|
|
if (this.currentTab === 0) return "home_first_zone";
|
|
if (this.currentTab === 1) return "premium_recommendation_first_zone";
|
|
if (this.currentTab === 2) return "course_classification_first_zone";
|
|
return "";
|
|
},
|
|
},
|
|
methods: {
|
|
pageBack() {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "是否退出",
|
|
success: function (res) {
|
|
if (res.confirm) {
|
|
plus.runtime.quit();
|
|
}
|
|
},
|
|
});
|
|
return false;
|
|
},
|
|
fnHoverTabs(item) {
|
|
this.currentTab = item;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
.indexPage {
|
|
.tabs_zone {
|
|
font-size: 14rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 20rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 99;
|
|
|
|
.item {
|
|
background-color: transparent;
|
|
border-radius: 34rpx;
|
|
padding: 6rpx 18rpx;
|
|
margin-left: 20rpx;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.hover {
|
|
background-color: #254eff;
|
|
}
|
|
|
|
&.active {
|
|
background-color: rgba(37, 78, 255, 0.39);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|