|
@@ -21,6 +21,41 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
+ <el-tabs class="tabs" :value="activeName" @tab-click="handleClick">
|
|
|
|
+ <el-tab-pane name="1">
|
|
|
|
+ <div class="label" slot="label">
|
|
|
|
+ <img src="@/assets/study-center.png" alt="" />
|
|
|
|
+ 学习中心
|
|
|
|
+ </div>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ <el-tab-pane name="2">
|
|
|
|
+ <div class="label" slot="label">
|
|
|
|
+ <img src="@/assets/person-center.png" alt="" />
|
|
|
|
+ 个人中心
|
|
|
|
+ </div>
|
|
|
|
+ </el-tab-pane>
|
|
|
|
+ </el-tabs>
|
|
|
|
+
|
|
|
|
+ <div class="swiper">
|
|
|
|
+ <swiper
|
|
|
|
+ v-if="businessList.length > 0"
|
|
|
|
+ ref="mySwiper"
|
|
|
|
+ v-bind:options="swiperOptions"
|
|
|
|
+ >
|
|
|
|
+ <swiper-slide
|
|
|
|
+ class="swiper-item"
|
|
|
|
+ v-for="(item, index) in businessList"
|
|
|
|
+ v-bind:key="index"
|
|
|
|
+ :class="{ active: item == businessItem }"
|
|
|
|
+ @click.native="swiperClick(item)"
|
|
|
|
+ >
|
|
|
|
+ {{ item.educationName }} - {{ item.aliasName }}
|
|
|
|
+ </swiper-slide>
|
|
|
|
+ </swiper>
|
|
|
|
+ <div class="swiper-button-next"></div>
|
|
|
|
+ <div class="swiper-button-prev"></div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
<div class="section__body clearfix">
|
|
<div class="section__body clearfix">
|
|
<div class="nav">
|
|
<div class="nav">
|
|
<div class="nav__section">
|
|
<div class="nav__section">
|
|
@@ -108,25 +143,57 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
+import { swiper, swiperSlide } from "vue-awesome-swiper";
|
|
import Footer from "@/components/footer/index";
|
|
import Footer from "@/components/footer/index";
|
|
import Header from "@/components/header/index";
|
|
import Header from "@/components/header/index";
|
|
import ToolBar from "@/components/toolbar/index";
|
|
import ToolBar from "@/components/toolbar/index";
|
|
-import { mapGetters } from "vuex";
|
|
|
|
|
|
+import "swiper/swiper-bundle.css";
|
|
|
|
+import { mapGetters, mapMutations } from "vuex";
|
|
export default {
|
|
export default {
|
|
name: "PersonCenter",
|
|
name: "PersonCenter",
|
|
components: {
|
|
components: {
|
|
|
|
+ swiper,
|
|
|
|
+ swiperSlide,
|
|
Footer,
|
|
Footer,
|
|
Header,
|
|
Header,
|
|
ToolBar,
|
|
ToolBar,
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
- return {};
|
|
|
|
|
|
+ return {
|
|
|
|
+ activeName: "1",
|
|
|
|
+ swiperOptions: {
|
|
|
|
+ freeMode: false,
|
|
|
|
+ observer: true,
|
|
|
|
+ slidesPerView: "auto",
|
|
|
|
+ observeParents: true,
|
|
|
|
+ speed: 300,
|
|
|
|
+ autoplayDisableOnInteraction: false,
|
|
|
|
+ autoplayStopOnLast: false,
|
|
|
|
+ // 设置点击箭头
|
|
|
|
+ navigation: {
|
|
|
|
+ nextEl: ".swiper-button-next",
|
|
|
|
+ prevEl: ".swiper-button-prev",
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ };
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- ...mapGetters(["userInfo"]),
|
|
|
|
|
|
+ ...mapGetters(["userInfo", "businessList", "businessItem"]),
|
|
},
|
|
},
|
|
mounted() {},
|
|
mounted() {},
|
|
- methods: {},
|
|
|
|
|
|
+ methods: {
|
|
|
|
+ ...mapMutations(["setBusinessItem"]),
|
|
|
|
+ handleClick(e) {
|
|
|
|
+ if (this.activeName == e.name) {
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ this.activeName = e.name;
|
|
|
|
+ },
|
|
|
|
+ swiperClick(item) {
|
|
|
|
+ this.setBusinessItem(item);
|
|
|
|
+ },
|
|
|
|
+ },
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -167,8 +234,55 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+ .tabs {
|
|
|
|
+ /deep/ .el-tabs__item {
|
|
|
|
+ height: 64px;
|
|
|
|
+ line-height: 64px;
|
|
|
|
+ }
|
|
|
|
+ .label {
|
|
|
|
+ width: 138px;
|
|
|
|
+ text-align: center;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ img {
|
|
|
|
+ margin-right: 10px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .swiper {
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 0 40px;
|
|
|
|
+ .swiper-slide {
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ width: auto !important;
|
|
|
|
+ height: 40px;
|
|
|
|
+ line-height: 40px;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ padding: 0 24px;
|
|
|
|
+ background: #eeeeee;
|
|
|
|
+ color: #333333;
|
|
|
|
+ margin-right: 24px;
|
|
|
|
+ font-size: 16px;
|
|
|
|
+
|
|
|
|
+ &.active {
|
|
|
|
+ color: #fff;
|
|
|
|
+ background: #3f8dfd;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .swiper-button-prev,
|
|
|
|
+ .swiper-button-next {
|
|
|
|
+ &::after {
|
|
|
|
+ font-size: 30px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
&__body {
|
|
&__body {
|
|
- margin-bottom: 20px;
|
|
|
|
|
|
+ margin: 20px 0;
|
|
.nav {
|
|
.nav {
|
|
float: left;
|
|
float: left;
|
|
width: 138px;
|
|
width: 138px;
|