From e6187bc09436afc087a86398b3162a6fe698f82e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Fri, 3 Sep 2021 18:04:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BC=98=E5=8C=96tabbar?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/styles/iconfont.css              |  72 ++++++-
 components/lf-tabbar/animate.scss       | 149 --------------
 components/lf-tabbar/lf-tabbar-box.vue  | 182 -----------------
 components/lf-tabbar/lf-tabbar-item.vue | 259 ------------------------
 components/lf-tabbar/lf-tabbar.vue      | 128 ++++++++----
 components/lf-tabbar/style.scss         | 121 -----------
 components/lf-tabbar/utils.js           |  10 -
 pages.json                              |  16 +-
 pages/discover/discover.vue             |   5 +
 pages/index/index/index.vue             |   5 +-
 pages/store/cart/cart.vue               |   5 +-
 pages/user/my/center.vue                |   8 +-
 pages/user/my/my.vue                    |   1 +
 pages/user/personal/personal.vue        |   5 +-
 store/index.js                          |  16 +-
 15 files changed, 197 insertions(+), 785 deletions(-)
 delete mode 100644 components/lf-tabbar/animate.scss
 delete mode 100644 components/lf-tabbar/lf-tabbar-box.vue
 delete mode 100644 components/lf-tabbar/lf-tabbar-item.vue
 delete mode 100644 components/lf-tabbar/style.scss
 delete mode 100644 components/lf-tabbar/utils.js

diff --git a/common/styles/iconfont.css b/common/styles/iconfont.css
index 089002b..aa00b0e 100644
--- a/common/styles/iconfont.css
+++ b/common/styles/iconfont.css
@@ -1,11 +1,11 @@
 @font-face {
   font-family: "lf-iconfont"; /* Project id 2779107 */
-  src: url('//at.alicdn.com/t/font_2779107_i410qmxy80m.woff2?t=1630489955128') format('woff2'),
-       url('//at.alicdn.com/t/font_2779107_i410qmxy80m.woff?t=1630489955128') format('woff'),
-       url('//at.alicdn.com/t/font_2779107_i410qmxy80m.ttf?t=1630489955128') format('truetype');
+  src: url('//at.alicdn.com/t/font_2779107_qs77qtmfs2o.woff2?t=1630663119031') format('woff2'),
+       url('//at.alicdn.com/t/font_2779107_qs77qtmfs2o.woff?t=1630663119031') format('woff'),
+       url('//at.alicdn.com/t/font_2779107_qs77qtmfs2o.ttf?t=1630663119031') format('truetype');
 }
 
-.iconfont {
+.lf-iconfont {
   font-family: "lf-iconfont" !important;
   font-size: 16px;
   font-style: normal;
@@ -13,6 +13,70 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-huiyuan:before {
+  content: "\e65d";
+}
+
+.icon-Group-:before {
+  content: "\e6ae";
+}
+
+.icon-Member:before {
+  content: "\e613";
+}
+
+.icon-daishouhuo:before {
+  content: "\e651";
+}
+
+.icon-shoucang1:before {
+  content: "\f49a";
+}
+
+.icon-daifukuan:before {
+  content: "\e682";
+}
+
+.icon-tihuo:before {
+  content: "\e62e";
+}
+
+.icon-huiyuan1:before {
+  content: "\f81e";
+}
+
+.icon-icon:before {
+  content: "\e658";
+}
+
+.icon-cuo:before {
+  content: "\e63f";
+}
+
+.icon-cuo1:before {
+  content: "\e635";
+}
+
+.icon-xuanzhong:before {
+  content: "\e600";
+}
+
+.icon-bianji:before {
+  content: "\f021";
+}
+
+.icon-erweima:before {
+  content: "\e634";
+}
+
+.icon-shanchu:before {
+  content: "\f36d";
+}
+
+.icon-tupian:before {
+  content: "\f46e";
+}
+
 .icon-xiangyou:before {
   content: "\e6af";
 }
diff --git a/components/lf-tabbar/animate.scss b/components/lf-tabbar/animate.scss
deleted file mode 100644
index b07e0db..0000000
--- a/components/lf-tabbar/animate.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-.animate__animated {
-  animation-duration: 0.5s;
-  animation-fill-mode: both;
-}
-
-@keyframes zoomIn {
-  from {
-    opacity: 0;
-    -webkit-transform: scale3d(0.3, 0.3, 0.3);
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  50% {
-    opacity: 1;
-  }
-}
-
-.animate__zoomIn {
-  animation-name: zoomIn;
-}
-
-@keyframes bounce {
-
-  from,
-  20%,
-  53%,
-  to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  40%,
-  43% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -30px, 0) scaleY(1.1);
-  }
-
-  70% {
-    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-    transform: translate3d(0, -15px, 0) scaleY(1.05);
-  }
-
-  80% {
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    transform: translate3d(0, 0, 0) scaleY(0.95);
-  }
-
-  90% {
-    transform: translate3d(0, -4px, 0) scaleY(1.02);
-  }
-}
-
-.animate__bounce {
-  animation-name: bounce;
-  transform-origin: center bottom;
-}
-
-@keyframes rubberBand {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-
-  30% {
-    transform: scale3d(1.25, 0.75, 1);
-  }
-
-  40% {
-    transform: scale3d(0.75, 1.25, 1);
-  }
-
-  50% {
-    transform: scale3d(1.15, 0.85, 1);
-  }
-
-  65% {
-    transform: scale3d(0.95, 1.05, 1);
-  }
-
-  75% {
-    transform: scale3d(1.05, 0.95, 1);
-  }
-
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.animate__rubberBand {
-  animation-name: rubberBand;
-}
-
-@keyframes bounceIn {
-
-  from,
-  20%,
-  40%,
-  60%,
-  80%,
-  to {
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-
-  0% {
-    opacity: 0;
-    transform: scale3d(0.3, 0.3, 0.3);
-  }
-
-  20% {
-    transform: scale3d(1.1, 1.1, 1.1);
-  }
-
-  40% {
-    transform: scale3d(0.9, 0.9, 0.9);
-  }
-
-  60% {
-    opacity: 1;
-    transform: scale3d(1.03, 1.03, 1.03);
-  }
-
-  80% {
-    transform: scale3d(0.97, 0.97, 0.97);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-.animate__bounceIn {
-  animation-name: bounceIn;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-.animate__fadeIn {
-  animation-name: fadeIn;
-}
\ No newline at end of file
diff --git a/components/lf-tabbar/lf-tabbar-box.vue b/components/lf-tabbar/lf-tabbar-box.vue
deleted file mode 100644
index 90f88b3..0000000
--- a/components/lf-tabbar/lf-tabbar-box.vue
+++ /dev/null
@@ -1,182 +0,0 @@
-<template>
-  <view class="lb-tabbar">
-    <view :class="[
-        'lb-tabbar-content',
-        fixed ? 'lb-tabbar--fixed' : ''
-      ]"
-      :style="{
-        backgroundColor: bgColor,
-        paddingBottom: `${safeAreaHeight}px`
-      }">
-      <view v-if="border"
-        class="lb-tabbar-border"
-        :style="{
-          backgroundColor: borderColor,
-          top: raisedeHeight + 'px'
-        }">
-      </view>
-      <slot></slot>
-    </view>
-    <view v-if="placeholder"
-      class="lb-tabbar-placeholder"
-      :style="{
-        height: `${tabbarHeight}px`
-      }">
-    </view>
-  </view>
-</template>
-
-<script>
-// git https://github.com/liub1934/uni-lb-tabbar/tree/master/pages/demos
-// demo https://github.liubing.me/uni-lb-tabbar/#/
-// fileDes https://ext.dcloud.net.cn/plugin?id=4124
-
-const SAFE_AREA_INSET_BOTTOM = 34
-import { getPx } from './utils'
-export default {
-  props: {
-    value: [String, Number],
-    height: {
-      type: String,
-      default: '50px'
-    },
-    iconSize: {
-      type: String,
-      default: '22px'
-    },
-    textSize: {
-      type: String,
-      default: '12px'
-    },
-    textTop: {
-      type: String,
-      default: '5px'
-    },
-    dotColor: {
-      type: String,
-      default: '#F56C6C'
-    },
-    fixed: {
-      type: Boolean,
-      default: true
-    },
-    placeholder: {
-      type: Boolean,
-      default: true
-    },
-    animate: {
-		type: String,
-		default: 'rubberBand'
-	},
-    closeAnimateOnRaisede: {
-      type: Boolean,
-      default: true
-    },
-    border: {
-      type: Boolean,
-      default: true
-    },
-    borderColor: {
-      type: String,
-      default: '#DCDFE6'
-    },
-    bgColor: {
-      type: String,
-      default: '#FFF'
-    },
-    inactiveColor: {
-      type: String,
-      default: '#909399'
-    },
-    activeColor: {
-      type: String,
-      default: '#186c6b'
-    },
-    inactiveTextColor: String,
-    activeTextColor: String,
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: true
-    },
-    hideTabbar: {
-      type: Boolean,
-      default: true
-    },
-    raisedeScale: {
-      type: Number,
-      default: 2
-    }
-  },
-  data () {
-    return {
-      active: this.value,
-      activeItem: {},
-      tabbarItems: [],
-      hasRaisede: false,
-      isIphoneX: false
-    }
-  },
-  computed: {
-    tabbarItemsLength () {
-      return this.tabbarItems.length
-    },
-    safeAreaHeight () {
-      return this.isIphoneX && this.safeAreaInsetBottom ? SAFE_AREA_INSET_BOTTOM : 0 // 苹果X等机型安全区高度
-    },
-    iconHeight () {
-      return getPx(this.iconSize)
-    },
-    raisedeHeight () {
-      return this.hasRaisede ? this.iconHeight * this.raisedeScale / 2 : 0 // 凸起高度
-    },
-    tabbarHeight () {
-      const height = getPx(this.height) // 默认高度
-      const raisedeHeight = this.hasRaisede ? this.iconHeight * this.raisedeScale / 2 : 0 // 凸起高度
-      const tabbarHeight = height + this.safeAreaHeight + raisedeHeight // 整体高度
-      return tabbarHeight
-    }
-  },
-  provide () {
-    return {
-      tabbar: this
-    }
-  },
-  created () {
-    if (this.hideTabbar) {
-      uni.hideTabBar()
-    }
-    const res = uni.getSystemInfoSync()
-    const { model, statusBarHeight } = res
-    if (
-      (model.indexOf('iPhone') > -1 && statusBarHeight > 20) ||
-      model.indexOf('iPhone X') > -1 ||
-      model.indexOf('iPhone 1') > -1
-    ) {
-      this.isIphoneX = true
-    }
-    this.getTabbarHeight()
-  },
-  methods: {
-    getTabbarHeight () {
-      return this.tabbarHeight
-    }
-  },
-  watch: {
-    value (newVal) {
-      this.active = newVal
-    },
-    active (newVal) {
-      this.activeItem = this.tabbarItems.find(item => item.name === newVal)
-      this.$emit('input', newVal)
-      this.$emit('change', this.activeItem)
-    },
-    tabbarItemsLength () {
-      this.hasRaisede = !!this.tabbarItems.find(item => item.raisede)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./style.scss";
-</style>
diff --git a/components/lf-tabbar/lf-tabbar-item.vue b/components/lf-tabbar/lf-tabbar-item.vue
deleted file mode 100644
index a2380d8..0000000
--- a/components/lf-tabbar/lf-tabbar-item.vue
+++ /dev/null
@@ -1,259 +0,0 @@
-<template>
-  <view ref="item"
-    :class="[
-      'lb-tabbar-item',
-      'animate__animated',
-      isActive ? 'lb-tabbar-item--active' : ''
-    ]"
-    :style="{
-      paddingTop: paddingBT + raisedeHeight + 'px',
-      paddingBottom: paddingBT + 'px',
-	  width: '100%'
-    }"
-    @tap="handleTap">
-    <view :class="[
-        'lb-tabbar-item__icon',
-        `lb-tabbar-item__icon--${raisede ? 'raisede' : 'default'}`,
-        isAnimate ? `animate__animated animate__${tabbarInfo.animate}` : '',
-		isActive ? 'lb-my-active' : ''
-      ]"
-      :style="{
-        height: tabbarInfo.iconSize,
-        lineHeight: tabbarInfo.iconSize,
-        transform: raisede ? `translateY(-${ty}px) scale(${tabbarInfo.raisedeScale})` : ''
-      }">
-      <!-- 图片图标 -->
-      <image v-if="isImage"
-        class="lb-tabbar-item__image"
-        :src="icon"
-        :style="{
-          width: tabbarInfo.iconSize,
-          height: tabbarInfo.iconSize
-        }">
-      </image>
-
-      <!-- icon图标 -->
-      <text v-else
-        :class="[
-          'lf-iconfont',
-          iconPrefix,
-          `${iconPrefix}-${icon}`,
-          isActive ? 'lb-tabbar-item__icon--active' : ''
-        ]"
-        :style="{
-          width: tabbarInfo.iconSize,
-          height: tabbarInfo.iconSize,
-          lineHeight: tabbarInfo.iconSize,
-          fontSize: tabbarInfo.iconSize,
-          color: isActive ? tabbarInfo.activeColor : tabbarInfo.inactiveColor
-        }">{{ iconCode }}</text>
-
-      <!-- 非nvue dot info显示 -->
-      <!-- #ifndef APP-NVUE -->
-      <text v-if="dot || hasInfo"
-        :class="[
-          dot && !hasInfo ? 'lb-tabbar-item__dot' : '',
-          hasInfo ? 'lb-tabbar-item__dot--info' : '',
-          'lb-tabbar-item__dot--style'
-        ]"
-        :style="{
-          backgroundColor: tabbarInfo.dotColor
-        }">{{ hasInfo ? info : '' }}</text>
-      <!-- #endif -->
-    </view>
-
-    <!-- nvue dot info 显示 -->
-    <!-- #ifdef APP-NVUE -->
-    <text v-if="dot || hasInfo"
-      :class="[
-        'lb-tabbar-item__dot--nvue',
-        'lb-tabbar-item__dot--style',
-        dot && !hasInfo ? 'lb-tabbar-item__dot' : '',
-        hasInfo ? 'lb-tabbar-item__dot--info' : '',
-        hasInfo ? 'lb-tabbar-item__dot--info' : '',
-        nvueDotShow ? 'lb-tabbar-item__dot--show' : ''
-      ]"
-      :style="{
-        backgroundColor: tabbarInfo.dotColor,
-        top: paddingBT + raisedeHeight + 'px',
-        right: dotLeft + 'px'
-      }">{{ hasInfo ? info : '' }}</text>
-    <!-- #endif -->
-
-    <!-- 非nvue图标文字 -->
-    <!-- #ifndef APP-NVUE -->
-    <view :class="[
-        'lb-tabbar-item__text',
-        isActive ? 'lb-tabbar-item__text--active' : ''
-      ]"
-      :style="{
-        fontSize: tabbarInfo.textSize,
-        lineHeight: tabbarInfo.textSize,
-        maxHeight: tabbarInfo.textSize,
-        marginTop: tabbarInfo.textTop,
-        color: isActive
-          ? tabbarInfo.activeTextColor || tabbarInfo.activeColor
-          : tabbarInfo.inactiveTextColor || tabbarInfo.inactiveColor
-      }">
-      <slot></slot>
-      <view v-if="raisede"
-        class="lb-tabbar-item__text--block"
-        :style="{
-          height: tabbarInfo.textSize
-        }">
-      </view>
-    </view>
-    <!-- #endif -->
-
-    <!-- nvue图标文字 -->
-    <!-- #ifdef APP-NVUE -->
-    <text v-if="text || raisede"
-      :class="[
-        'lb-tabbar-item__text',
-        isActive ? 'lb-tabbar-item__text--active' : ''
-      ]"
-      :style="{
-        fontSize: tabbarInfo.textSize,
-        height: tabbarInfo.textSize,
-        lineHeight: tabbarInfo.textSize,
-        marginTop: tabbarInfo.textTop,
-        color: isActive
-          ? tabbarInfo.activeTextColor || tabbarInfo.activeColor
-          : tabbarInfo.inactiveTextColor || tabbarInfo.inactiveColor
-      }">{{ text || '' }}</text>
-    <!-- #endif -->
-  </view>
-</template>
-
-<script>
-// #ifdef APP-NVUE
-const dom = uni.requireNativePlugin('dom')
-// #endif
-import { getPx } from './utils'
-export default {
-  props: {
-    name: [String, Number],
-    text: [String, Number],
-    icon: String,
-    iconPrefix: String,
-    dot: Boolean,
-    info: [String, Number],
-    raisede: Boolean,
-	path: String
-  },
-  inject: ['tabbar'],
-  data () {
-    return {
-      tabbarInfo: {},
-      itemWidth: 0,
-      dotLeft: 0,
-      nvueDotShow: false
-    }
-  },
-  computed: {
-    isImage () {
-      return this.icon && this.icon.indexOf('/') > -1
-    },
-    isActive () {
-      return this.tabbarInfo.value === this.name
-    },
-    isAnimate () {
-      return (
-        this.isActive &&
-        this.tabbarInfo.animate &&
-        !(this.raisede && this.tabbarInfo.closeAnimateOnRaisede)
-      )
-    },
-    height () {
-      return getPx(this.tabbarInfo.height)
-    },
-    iconHeight () {
-      return getPx(this.tabbarInfo.iconSize)
-    },
-    textSize () {
-      return getPx(this.tabbarInfo.textSize)
-    },
-    textTop () {
-      return getPx(this.tabbarInfo.textTop)
-    },
-    ty () {
-      return this.height / 2 - (this.textSize + this.textTop) / 2
-    },
-    iconCode () {
-      let code = ''
-      // #ifdef APP-NVUE
-      code = this.icon
-      // #endif
-      return code
-    },
-    hasInfo () {
-      return this.info || this.info === 0
-    },
-    paddingBT () {
-      return (this.height - this.iconHeight - this.textSize - this.textTop) / 2
-    },
-    hasRaisede () {
-      return this.tabbar.hasRaisede
-    },
-    raisedeHeight () {
-      return this.hasRaisede ? this.iconHeight * this.tabbarInfo.raisedeScale / 2 : 0 // 凸起高度
-    },
-		infoLength () {
-			return this.hasInfo ? (this.info + '').length : 0
-		}
-  },
-  created () {
-    this.tabbarInfo = this.tabbar._props
-    this.tabbar.tabbarItems.push(this._props)
-  },
-  mounted() {
-		// #ifdef APP-NVUE
-    this.setNvueDot()
-		// #endif
-  },
-  methods: {
-    handleTap () {
-      this.tabbar.active = this.name
-      this.$emit('click', this._props)
-    },
-		// #ifdef APP-NVUE
-    setNvueDot () {
-			if (this.dot || this.hasInfo) {
-				this.$nextTick(() => {
-					const $el = this.$refs.item
-					dom.getComponentRect($el, res => {
-						this.itemWidth = res.size.width
-            const halfWidth = this.itemWidth / 2
-            if (this.dot) {
-              this.dotLeft = halfWidth - 8
-            }
-            if (this.hasInfo) {
-              const length = this.infoLength > 1 ? this.infoLength -1 : this.infoLength
-              this.dotLeft = halfWidth - 8 * length
-            }
-						this.nvueDotShow = true
-					})
-				})
-			}
-    }
-		// #endif
-  },
-	// #ifdef APP-NVUE
-  watch: {
-    dot () {
-      this.setNvueDot()
-    },
-    info () {
-      this.setNvueDot()
-    }
-  }
-	// #endif
-}
-</script>
-
-<style lang="scss" scoped>
-@import "./style.scss";
-/* #ifndef APP-NVUE */
-@import "./animate.scss";
-/* #endif */
-</style>
diff --git a/components/lf-tabbar/lf-tabbar.vue b/components/lf-tabbar/lf-tabbar.vue
index 6f65a60..53a248d 100644
--- a/components/lf-tabbar/lf-tabbar.vue
+++ b/components/lf-tabbar/lf-tabbar.vue
@@ -1,42 +1,37 @@
 <template>
 	<view>
-		<lf-tabbar-box :value="currentTabBar" 
-		  v-if="isShowTabBar" 
-		  :close-animate-on-raisede="false">
-		  <lf-tabbar-item v-for="item in tabbars"
-			  :key="item.name"
-			  :name="item.name"
-			  :icon="item.icon"
-			  :dot="item.dot"
-			  :info="item.info"
-			  :path="item.path"
-			  :raisede="item.raisede"
-			  :style="{'width': 100 / tabbars.length +'%'}"
-			  @click="handleClick"
-			  icon-prefix="icon">
-			  {{ item.text }}
-			</lf-tabbar-item>
-		</lf-tabbar-box>
+		<view class="occupy-position"></view>
+		<view class="content">
+			<view class="tabbar-box">
+				<view class="tab-item" 
+					:class="{'tab-active': currentTabBar == index}"
+					:style="{'width': 100 / tabbars.length +'%'}" 
+					@click="clickTab(item, index)"
+					v-for="(item, index) in tabbars" :key="index">
+					<view class="tab-icon">
+						<text class="lf-font-40 lf-iconfont" :class="item.icon"></text>
+					</view>
+					<view class="tab-name">{{ item.text }}</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import lfTabbarBox from "./lf-tabbar-box.vue"
-	import lfTabbarItem from "./lf-tabbar-item.vue"
 	import { mapGetters } from "vuex";
-	
 	export default {
-		name: 'lf-tabbar',
-		components: {
-			lfTabbarBox,
-			lfTabbarItem
-		},
 		props: {
 			type: {
 				type: String, // 默认跳转方式redirect，可选switch
 				default: 'redirect'
 			}
 		},
+		data(){
+			return {
+				
+			}
+		},
 		computed: {
 			...mapGetters(['currentTabBar', 'tabbars', 'isShowTabBar'])
 		},
@@ -44,24 +39,89 @@
 			// 组件被创建时检查当前在哪个页面，然后校验currentTabBar是否与之匹配
 			let pages = getCurrentPages();
 			let page = pages[pages.length - 1].route;
-			let tabbar_name = '';
-			this.tabbars.map(item => {
+			let tabbars = this.tabbars;
+			let tabbar_name = tabbars[this.currentTabBar].path;
+			let current = 0;
+			tabbars.map((item, index) => {
 				if(item.path == '/'+ page){
-					tabbar_name = item.name;
+					current = index;
 				}
 			})
-			if(tabbar_name != this.currentTabBar){
-				this.$store.commit('setCurrentTabBar', tabbar_name);
+			if(tabbar_name != '/'+ page){
+				this.$store.commit('setCurrentTabBar', current);
 			}
 		},
 		methods: {
-			handleClick (options) {
-			  this.$store.commit('setCurrentTabBar', options.name);
-			  this.$url(options.path, {type: this.type});
+			clickTab(item, index){
+				if(this.currentTabBar == index) return;
+				this.$store.commit('setCurrentTabBar', index);
+				this.$url(item.path, {type: this.type});
 			}
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped="scoped">
+	.lf-font-40{
+		font-size: 40rpx;
+	}
+	.occupy-position{
+		width: 750rpx;
+		height: 120rpx;
+		box-sizing: content-box;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	.content{
+		width: 750rpx;
+		height: 120rpx;
+		background-color: #FFFFFF;
+		border-radius: 60rpx 60rpx 0 0;
+		box-shadow: 0rpx -2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 99999;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+		display: flex;
+		align-items: center;
+		box-sizing: content-box;
+		.tabbar-box{
+			width: 100%;
+			height: 100rpx;
+			display: flex;
+			.tab-item{
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-direction: column;
+				.tab-name{
+					font-size: 24rpx;
+					color: #777777;
+				}
+				&.tab-active{
+					.tab-icon{
+						background-color: #15716E;
+						width: 60rpx;
+						height: 60rpx;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						transform: translateY(-20rpx) scale(1.4);
+						border-radius: 50%;
+						color: #FFFFFF;
+						overflow: hidden;
+						text{
+							transform: scale(0.6);
+						}
+					}
+					.tab-name{
+						color: #15716E;
+						font-weight: bold;
+					}
+				}
+			}
+		}
+	}
 </style>
diff --git a/components/lf-tabbar/style.scss b/components/lf-tabbar/style.scss
deleted file mode 100644
index 2123402..0000000
--- a/components/lf-tabbar/style.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-.lb-tabbar-content {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-.lb-tabbar--fixed {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.lb-tabbar-border {
-  height: 1px;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  transform: scaleY(0.5);
-}
-
-/* #ifndef APP-NVUE */
-lb-tabbar-item {
-  flex: 1;
-}
-
-/* #endif */
-
-.lb-tabbar-item {
-  flex: 1;
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  // justify-content: flex-end;
-}
-
-.lb-tabbar-item__text {
-  overflow: hidden;
-}
-
-.lb-tabbar-item__text--active {
-  transition-property: color;
-  transition-duration: 0.3s;
-}
-
-.lb-tabbar-item__icon {
-  position: relative;
-}
-
-.lb-tabbar-icon {
-  position: relative;
-  /* #ifndef APP-NVUE */
-  line-height: 1;
-  font-size: inherit;
-  text-rendering: auto;
-  -webkit-font-smoothing: antialiased;
-  /* #endif */
-}
-
-.lb-tabbar-item__icon--active {
-  transition-property: color;
-  transition-duration: 0.3s;
-}
-
-.lb-my-active{
-	transform: translateY(-16.5px) scale(2) !important;
-	color: yellow;
-}
-.lb-tabbar-item__icon--raisede {
-  background-color: #fff;
-  border-radius: 9999px;
-  position: relative;
-  /* #ifndef APP-NVUE */
-  z-index: 1;
-  /* #endif */
-}
-
-.lb-tabbar-item__dot--style {
-  border-radius: 9999px;
-  position: absolute;
-  top: 0;
-  right: 0;
-}
-
-.lb-tabbar-item__dot {
-  width: 8px;
-  height: 8px;
-}
-
-.lb-tabbar-item__dot--nvue {
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: 0.1s;
-}
-
-.lb-tabbar-item__dot--show {
-  opacity: 1;
-}
-
-.lb-tabbar-item__dot--info {
-  height: 14px;
-  line-height: 14px;
-  /* #ifdef APP-NVUE */
-  flex: 1;
-  /* #endif */
-  margin-top: 5px;
-  font-size: 12px;
-  padding-left: 4px;
-  padding-right: 4px;
-  text-align: center;
-  color: #fff;
-  transform: translate(50%, -50%);
-}
\ No newline at end of file
diff --git a/components/lf-tabbar/utils.js b/components/lf-tabbar/utils.js
deleted file mode 100644
index faf27b6..0000000
--- a/components/lf-tabbar/utils.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export function getPx (val) {
-  if (!val) return 0
-  if (val.indexOf('rpx') > -1) {
-    val = +val.replace('rpx', '')
-    val = uni.upx2px(val)
-  } else {
-    val = +val.replace('px', '')
-  }
-  return val
-}
diff --git a/pages.json b/pages.json
index 63f69b3..ae95b8e 100644
--- a/pages.json
+++ b/pages.json
@@ -3,6 +3,14 @@
 		"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
 	},
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+		{
+			"path": "pages/index/index/index",
+			"style": {
+				"navigationBarTitleText": "首页",
+				"enablePullDownRefresh":true,
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/user/my/setting",
 			"style": {
@@ -45,14 +53,6 @@
 				"navigationStyle": "custom"
 			}
 		},
-		{
-			"path": "pages/index/index/index",
-			"style": {
-				"navigationBarTitleText": "首页",
-				"enablePullDownRefresh":true,
-				"navigationStyle": "custom"
-			}
-		},
 		{
 			"path": "pages/index/microPages/microPages",
 			"style": {
diff --git a/pages/discover/discover.vue b/pages/discover/discover.vue
index ea00fec..f58939e 100644
--- a/pages/discover/discover.vue
+++ b/pages/discover/discover.vue
@@ -39,11 +39,16 @@
 			</view>
 			<self-line/>
 		</view>
+		<lf-tabbar></lf-tabbar>
 	</view>
 </template>
 
 <script>
+	import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
 	export default {
+		components: {
+			lfTabbar
+		},
 		data() {
 			return {
 				tab_list: [
diff --git a/pages/index/index/index.vue b/pages/index/index/index.vue
index ec5bd98..ba9bbf1 100644
--- a/pages/index/index/index.vue
+++ b/pages/index/index/index.vue
@@ -9,7 +9,7 @@
 				<text class="lf-iconfont icon-nv"></text>
 				<text class="lf-m-l-4">停车</text>
 			</view>
-			<view class="lf-nav-capsule lf-bg-gray">
+			<view class="lf-nav-capsule lf-bg-search">
 				<text class="lf-iconfont icon-nv"></text>
 				<text class="lf-m-l-4">搜索</text>
 			</view>
@@ -1115,6 +1115,9 @@
 
 <style rel="stylesheet/less" lang="less">
     /*@import "index.less";*/
+	.lf-bg-search{
+		background-color: rgba(0,0,0,0.5) !important;
+	}
 	.lf-nav-capsule{
 		width: 120rpx;
 		height: 50rpx;
diff --git a/pages/store/cart/cart.vue b/pages/store/cart/cart.vue
index cb731b4..84c9eb5 100644
--- a/pages/store/cart/cart.vue
+++ b/pages/store/cart/cart.vue
@@ -229,7 +229,6 @@
 
         </view>
     </view>
-	<lf-tabbar></lf-tabbar>
 </view>
 
 
@@ -237,7 +236,6 @@
 <script>
 import {pageLogin, getUrl,config} from '@/common/js/utils.js';
 import lfNav from '@/components/lf-nav/lf-nav.vue';
-import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
 
 export default {
   data() {
@@ -298,8 +296,7 @@ export default {
   },
 
   components: {
-	  lfNav,
-	  lfTabbar
+	  lfNav
   },
   props: {},
   methods: {
diff --git a/pages/user/my/center.vue b/pages/user/my/center.vue
index 93a627e..8c79353 100644
--- a/pages/user/my/center.vue
+++ b/pages/user/my/center.vue
@@ -82,11 +82,17 @@
 				</view>
 			</view>
 		</view>
-		
+		<lf-tabbar></lf-tabbar>
 	</view>
 </template>
 
 <script>
+	import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue'
+	export default {
+		components: {
+			lfTabbar
+		},
+	}
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/user/my/my.vue b/pages/user/my/my.vue
index 0849ac9..511502b 100644
--- a/pages/user/my/my.vue
+++ b/pages/user/my/my.vue
@@ -72,6 +72,7 @@
 </template>
 
 <script>
+	
 </script>
 
 <style>
diff --git a/pages/user/personal/personal.vue b/pages/user/personal/personal.vue
index f8648e3..2144044 100644
--- a/pages/user/personal/personal.vue
+++ b/pages/user/personal/personal.vue
@@ -489,7 +489,6 @@
 			<!-- 生日有礼 -->
 			<birthday :gift-data="giftData" @close="changeBirthday"></birthday>
 		</view>
-		<lf-tabbar></lf-tabbar>
 	</view>
 </template>
 <script>
@@ -503,7 +502,6 @@
 	} from '@/common/js/utils.js';
 	import  birthday  from '@/components/birthday/birthday.vue';
 	import lfNav from '@/components/lf-nav/lf-nav.vue';
-	import lfTabbar from '@/components/lf-tabbar/lf-tabbar.vue';
 	var app = getApp();
 
 	export default {
@@ -536,8 +534,7 @@
 		},
 		components:{
 			birthday,
-			lfNav,
-			lfTabbar
+			lfNav
 		},
 
 		onLoad(e) {
diff --git a/store/index.js b/store/index.js
index f955666..cab1970 100644
--- a/store/index.js
+++ b/store/index.js
@@ -3,31 +3,31 @@ import Vuex from 'vuex'
 Vue.use(Vuex)
 
 let state = {
-	currentTabBar: 'home',
+	currentTabBar: 0,
 	tabbars: [
 		{
 		  name: 'home',
 		  text: '首页',
-		  icon: 'dingzhi',
+		  icon: 'icon-Group-',
 		  path: '/pages/index/index/index'
 		},
 		{
 		  name: 'brand',
 		  text: '品牌',
-		  icon: 'weirenzheng',
+		  icon: 'icon-tihuo',
 		  path: '/pages/index/category/category'
 		},
 		{
 		  name: 'find',
 		  text: '发现',
-		  icon: 'nv',
-		  path: '/pages/store/cart/cart'
+		  icon: 'icon-fabu',
+		  path: '/pages/discover/discover'
 		},
 		{
 		  name: 'my',
-		  text: '我的',
-		  icon: 'contact-person',
-		  path: '/pages/user/personal/personal'
+		  text: '会员中心',
+		  icon: 'icon-icon',
+		  path: '/pages/user/my/center'
 		}
 	],
 	isShowTabBar: true