|
|
@@ -1,115 +0,0 @@
|
|
|
-<template>
|
|
|
- <view class="bottom top-border">
|
|
|
- <view class="nav-box">
|
|
|
- <view class="nav-tab" @click="toIndex(0)">
|
|
|
- <view class="nav-icon">
|
|
|
- <image :src="businessHighlightUrl" v-if="index === 0" class="home-img image"></image>
|
|
|
- <image :src="business" v-else class="home-img image"></image>
|
|
|
- </view>
|
|
|
- <view class="nav-text" :class="{textColor:index === 0}">
|
|
|
- 首页
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="nav-tab" @click="toIndex(1)">
|
|
|
- <view class="nav-icon">
|
|
|
- <image :src="homeHighlightUrl" v-if="index === 1" class="home-img image"></image>
|
|
|
- <image :src="homeUrl" v-else class="home-img image"></image>
|
|
|
- </view>
|
|
|
- <view class="nav-text" :class="{textColor:index === 1}">
|
|
|
- 我的事务
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="nav-tab" @click="toIndex(2)">
|
|
|
- <view class="nav-icon">
|
|
|
- <image :src="newsHighlightUrl" v-if="index === 2" class="home-img image"></image>
|
|
|
- <image :src="newsUrl" v-else class="home-img image"></image>
|
|
|
- </view>
|
|
|
- <view class="nav-text" :class="{textColor:index === 2}">
|
|
|
- 福航动态
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="nav-tab" @click="toIndex(3)">
|
|
|
- <view class="nav-icon">
|
|
|
- <image :src="myHighlightUrl" v-if="index === 3" class="home-img image"></image>
|
|
|
- <image :src="myUrl" v-else class="home-img image"></image>
|
|
|
- </view>
|
|
|
- <view class="nav-text" :class="{textColor:index === 3}">
|
|
|
- 个人中心
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- index: {},
|
|
|
- },
|
|
|
- components: {},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // index: 0,
|
|
|
- business: require('@/static/tabBar/business.png'),
|
|
|
- businessHighlightUrl: require('@/static/tabBar/business-highlight.png'),
|
|
|
- myUrl: require('@/static/tabBar/my.png'),
|
|
|
- myHighlightUrl: require('@/static/tabBar/my-highlight.png'),
|
|
|
- homeUrl: require('@/static/tabBar/home.png'),
|
|
|
- homeHighlightUrl: require('@/static/tabBar/home-highlight.png'),
|
|
|
- newsUrl: require('@/static/tabBar/news.png'),
|
|
|
- newsHighlightUrl: require('@/static/tabBar/news-highlight.png'),
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- toIndex(index) {
|
|
|
- // this.index = index
|
|
|
- this.$emit('toIndex', index)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped lang="scss">
|
|
|
- .bottom {
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100vw;
|
|
|
- height: 49px;
|
|
|
- background: #fff;
|
|
|
- z-index: 999;
|
|
|
-
|
|
|
- .nav-box {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .nav-tab {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- width: 50px;
|
|
|
-
|
|
|
- .image {
|
|
|
- display: block;
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .nav-text {
|
|
|
- color: #999999;
|
|
|
- margin-top: 3px;
|
|
|
- font-size: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .textColor {
|
|
|
- color: #C79F6C;
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|