|
|
@@ -1,70 +1,77 @@
|
|
|
<template>
|
|
|
- <view class="footer d-flex p-y-xs2 bg-tab-nav fn-center"
|
|
|
- ><!-- p-y-xs -->
|
|
|
- <view
|
|
|
- class="item line-height-1 flex-fill"
|
|
|
- :class="{ 'router-link-active': tab == item.tel }"
|
|
|
- v-for="item in navList"
|
|
|
- :key="item.tel"
|
|
|
- @click="tabChange(item.tel)"
|
|
|
- >
|
|
|
- <view class="icon">
|
|
|
- <img
|
|
|
- class="h-15"
|
|
|
- v-if="tab == item.tel"
|
|
|
- :src="item.activeIcon"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <img class="h-15" v-else :src="item.icon" alt="" />
|
|
|
- </view>
|
|
|
- <view class="fn-12" style="margin-top: 4px">{{ $t(item.label) }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <view class="footer flex p-y-xs2 bg-tab-nav">
|
|
|
+ <view class="flex-fill" :class="{ 'router-link-active': tab == item.tel }"
|
|
|
+ v-for="item in navList" :key="item.tel" @click="tabChange(item.tel)">
|
|
|
+ <view class="icon">
|
|
|
+ <img class="h-15" v-if="tab == item.tel" :src="item.activeIcon" alt="" />
|
|
|
+ <img class="h-15" v-else :src="item.icon" alt="" />
|
|
|
+ </view>
|
|
|
+ <view class="fn-12">{{ $t(item.label) }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
<script>
|
|
|
-import { navList } from "./list.js";
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- tab: {
|
|
|
- type: String,
|
|
|
- default: "home",
|
|
|
- },
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- navList: navList(this),
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- tabChange(v) {
|
|
|
- uni.switchTab({
|
|
|
- url: "/pages/base/" + v,
|
|
|
- });
|
|
|
- // console.log(v);
|
|
|
- // console.log(this.$router);
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
+ import {
|
|
|
+ navList
|
|
|
+ } from "./list.js";
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ tab: {
|
|
|
+ type: String,
|
|
|
+ default: "index",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ navList: navList(this),
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // console.log(navList,'navList');
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ tabChange(v) {
|
|
|
+ uni.switchTab({
|
|
|
+ url: "/pages/index/" + v,
|
|
|
+ });
|
|
|
+ // console.log(v);
|
|
|
+ // console.log(this.$router);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
-.p-y-xs2 {
|
|
|
- padding-top: 25rpx !important;
|
|
|
- padding-bottom: 30rpx !important;
|
|
|
-}
|
|
|
-.footer {
|
|
|
- box-shadow: $tab-nav-shadow;
|
|
|
- position: fixed;
|
|
|
- bottom: 0;
|
|
|
- width: 100%;
|
|
|
- z-index: 999 !important;
|
|
|
- height: 65rpx;
|
|
|
- // color: rgba(#fff, 0.3);
|
|
|
-}
|
|
|
-.router-link-active {
|
|
|
- color: $theme-1;
|
|
|
- // color: var(--tab-nav-active);
|
|
|
-}
|
|
|
-.bg-tab-nav{
|
|
|
- // background-color: #31313f;
|
|
|
-}
|
|
|
-</style>
|
|
|
+ .flex-fill{
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .p-y-xs2 {
|
|
|
+ padding: 5px 10px;
|
|
|
+ }
|
|
|
+ .h-15{
|
|
|
+ height: 20px;
|
|
|
+ width: 20px;
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ box-shadow: 0px -7px 20px 0px rgba(37, 37, 48, 0.83);
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 999 !important;
|
|
|
+ // height: 102rpx;
|
|
|
+ color: rgba(#fff, 0.3);
|
|
|
+ justify-content: space-around !important;
|
|
|
+ }
|
|
|
+ .fn-12{
|
|
|
+ margin-top: 4px;
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ .router-link-active {
|
|
|
+ // color: $theme-1;
|
|
|
+ color:#FEB041;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-tab-nav {
|
|
|
+ background-color: #000000;
|
|
|
+ }
|
|
|
+</style>
|
