105 lines
1.9 KiB
Vue
105 lines
1.9 KiB
Vue
<template>
|
|
<view class="view_dingbu">
|
|
<view class="top_box">
|
|
|
|
<view :class="thisTop==1?'top_box_active':'top_box_item'" @click="checkTop(1)">首页<view class="line"
|
|
v-if="thisTop==1"></view>
|
|
</view>
|
|
<view :class="thisTop==2?'top_box_active':'top_box_item'" @click="checkTop(2)">学生<view class="line"
|
|
v-if="thisTop==2"></view>
|
|
</view>
|
|
<view :class="thisTop==3?'top_box_active':'top_box_item'" @click="checkTop(3)">我的<view class="line"
|
|
v-if="thisTop==3"></view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<home v-if="thisTop==1"></home>
|
|
<my v-if="thisTop==2"></my>
|
|
<min v-if="thisTop==3"></min>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import home from '../compoents/pages_home.vue'
|
|
import min from '../compoents/pages_mine.vue'
|
|
import my from '../compoents/pages_my.vue'
|
|
export default {
|
|
components: {
|
|
home,
|
|
min,
|
|
my,
|
|
},
|
|
data() {
|
|
return {
|
|
thisTop: 1,
|
|
partId: 350,
|
|
infolist: '',
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
|
|
checkTop(i) {
|
|
this.thisTop = i
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
|
|
.top_box {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
line-height: 84rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.top_box_item {
|
|
position: relative;
|
|
color: #3B5878;
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
|
|
.line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
background: #3996FD;
|
|
border-radius: 2rpx 2rpx 2rpx 2rpx;
|
|
}
|
|
}
|
|
|
|
.top_box_active {
|
|
position: relative;
|
|
color: #3996FD;
|
|
font-weight: 800;
|
|
font-size: 28rpx;
|
|
|
|
.line {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 40rpx;
|
|
height: 4rpx;
|
|
background: #3996FD;
|
|
border-radius: 2rpx 2rpx 2rpx 2rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
}
|
|
</style> |