123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 |
- <template>
- <view class="container">
- <view class="content">
- <view class="item" :class="active == 1?'active':''" @click="navTo(1,'/pages/index/index')">
- <i class="iconfont" :class="active == 1?'iconxuanzhongshouye':'iconxuanzhongshouye-2'"></i>
- <text class="title">首页</text>
- </view>
- <view class="item" :class="active == 2?'active':''" @click="navTo(2,'/pages/jiaocheng/jiaocheng')">
- <i class="iconfont" :class="active == 2?'iconzixunxuanzhong':'iconzixunweixuanzhong'"></i>
- <text class="title">教程</text>
- </view>
- <view class="item" :class="active == 3?'active':''" @click="navTo(3,'/pages/my/my')">
- <i class="iconfont" :class="active == 3?'iconwodeweixuanzhong-2':'iconwodeweixuanzhong'"></i>
- <text class="title">我的</text>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- active: {
- type: Number,
- default: 1
- }
- },
- data() {
- return {
- };
- },
- methods: {
- navTo(index, url) {
- if (index != this.active) {
- uni.reLaunch({
- url: url
- })
- }
- }
- }
- }
- </script>
- <style scoped>
- @import url("/static/css/iconfont.css");
- .container {
- width: 100%;
- height: 100rpx;
- /*兼容 IOS<11.2*/
- padding-bottom: constant(safe-area-inset-bottom);
- /*兼容 IOS>11.2*/
- padding-bottom: env(safe-area-inset-bottom);
- }
- .content {
- background-color: #fff;
- width: 100vw;
- height: 100rpx;
- /*兼容 IOS<11.2*/
- padding-bottom: constant(safe-area-inset-bottom);
- /*兼容 IOS>11.2*/
- padding-bottom: env(safe-area-inset-bottom);
- display: flex;
- flex-flow: row nowrap;
- justify-content: space-around;
- align-items: center;
- box-shadow: 0 20rpx 20rpx #f6f6f6 inset;
- position: fixed;
- left: 0;
- bottom: 0;
- z-index: 900;
- }
- .content .item {
- flex: auto;
- display: flex;
- flex-flow: column nowrap;
- justify-content: center;
- align-items: center;
- }
- .content .iconfont {
- display: block;
- font-size: 48rpx;
- color: #8a8a8a;
- }
- .content .active .iconfont {
- color: #3387FF;
- }
- .content .title {
- font-size: 24rpx;
- height: 28rpx;
- line-height: 28rpx;
- text-align: center;
- color: #8a8a8a;
- }
- .content .active .title {
- color: #3387FF;
- }
- </style>
|