feature: 调整底部bottom的UI

app.js

@@ -19,6 +19,7 @@ App({
     userInfo: null,
     classifyProducts: "",
     statusBarHeight: 0,
+    safeBottomHeight: 0,
     navBarHeight: 0,
     MenuButtonheight: 0,
     MenuButtonTop: 0,
@@ -70,6 +71,13 @@ App({
       that.globalData.host = androidHost;
     }
 
+    const safeArea = res.safeArea;
+    var height = safeArea.height || 0;
+    var bottom = safeArea.bottom || 0;
+    var reduce = bottom - height;
+    var safeBottomHeight = reduce > 0 ? reduce : -reduce;
+    that.globalData.safeBottomHeight = safeBottomHeight;
+
     let custom = wx.getMenuButtonBoundingClientRect();
     that.globalData.navBarHeight = res.statusBarHeight + custom.height + (custom.top - res.statusBarHeight) * 2;
     that.globalData.MenuButtonheight = custom.height;

pages/index/index.js

@@ -26,6 +26,7 @@ import {
 Page({
   data: {
     navBarHeight: app.globalData.navBarHeight,
+    safeBottomHeight: app.globalData.safeBottomHeight,
     nvabarData: {
       showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
       title: 'OhPlay', //导航栏 中间的标题

pages/index/index.wxml

@@ -2,209 +2,207 @@
 <view class="container" style="flex-direction: column; display: flex;">
   <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'></nav-bar>
 
-  <view style="flex: 1; flex-direction: column; display: flex;">
-    <view style="flex: 1;">
-
-      <view wx:if="{{indexPage==0}}" class="mair" style="flex-direction: column; display: flex; height: calc(100vh - 98rpx - 22rpx - {{navBarHeight}}px);">
-        <view style="font-size: 32rpx; color: #333333; margin-top: 14rpx;">{{greeting}}</view>
-
-        <!-- banner -->
-        <view wx:if="{{bannerList.length>0}}" class="banner_container">
-
-          <swiper class="swiper" indicator-dots="{{bannerList.length>1}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="#FFFFFF" indicator-color="#999999">
-            <block wx:for="{{bannerList}}" wx:key="index">
-              <swiper-item>
-                <image mode="widthFix" class="swiper_image" src="{{item.pic}}" data-item="{{item}}" bind:tap="onTapBanner" />
-              </swiper-item>
-            </block>
-          </swiper>
-        </view>
+  <view style="height: calc(100vh - 22rpx - {{navBarHeight}}px);">
 
-        <view class="add_device_public" bind:tap="jumpToAddDevice">
-          <image mode="heightFix" src="./../../img/add_device.png" style="width: 48rpx;height: 48rpx;"></image>
-          <view style="color: white; margin-left: 8rpx; font-size: 32rpx;">添加设备</view>
-        </view>
+    <view wx:if="{{indexPage==0}}" class="mair" style="flex-direction: column; display: flex; height: calc(100vh - 105rpx - {{safeBottomHeight}}rpx - 22rpx - {{navBarHeight}}px);">
+      <view style="font-size: 32rpx; color: #333333; margin-top: 14rpx;">{{greeting}}</view>
 
-        <scroll-view scroll-y="true" style="height: calc(100vh - 152rpx - 296rpx - 46rpx - 98rpx - 5rpx - {{navBarHeight}}px); padding-top: 10rpx; padding-bottom: 10rpx;">
-          <block wx:key="key" wx:for-item="item" wx:for-index="index" wx:for="{{deviceList}}">
+      <!-- banner -->
+      <view wx:if="{{bannerList.length>0}}" class="banner_container">
 
-            <view class="item_public" style="border: {{item.state && item.state === 'online'&&deviceListSelect === index  ? '6rpx solid #6546A3' : item.state && item.state === 'online'?'2rpx solid #6546A3':'2rpx solid #F2F5F7'}};  flex-direction: row; display: flex;" data-item="{{item}}" data-index="{{index}}" bind:tap="onTapItem">
+        <swiper class="swiper" indicator-dots="{{bannerList.length>1}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" indicator-active-color="#FFFFFF" indicator-color="#999999">
+          <block wx:for="{{bannerList}}" wx:key="index">
+            <swiper-item>
+              <image mode="widthFix" class="swiper_image" src="{{item.pic}}" data-item="{{item}}" bind:tap="onTapBanner" />
+            </swiper-item>
+          </block>
+        </swiper>
+      </view>
 
-              <view style="width: 264rpx; height: 200rpx;">
-                <image class="item_public_image" src="{{item.imageUrl}}" style="opacity: {{item.state && item.state === 'online' ? '1' : '0.5'}};" mode="aspectFit" lazy-load="true" webp="true"></image>
-              </view>
+      <view class="add_device_public" bind:tap="jumpToAddDevice">
+        <image mode="heightFix" src="./../../img/add_device.png" style="width: 48rpx;height: 48rpx;"></image>
+        <view style="color: white; margin-left: 8rpx; font-size: 32rpx;">添加设备</view>
+      </view>
+
+      <scroll-view scroll-y="true" style="height: calc(100vh - 152rpx - 296rpx - 46rpx - 105rpx - {{safeBottomHeight}}rpx - 5rpx - {{navBarHeight}}px); padding-top: 10rpx; padding-bottom: 10rpx;">
+        <block wx:key="key" wx:for-item="item" wx:for-index="index" wx:for="{{deviceList}}">
 
-              <view class="item_public_right" style="flex: 1; margin-right: 25rpx; opacity: {{item.state && item.state === 'online' ? '1' : '0.5'}};">
-                <view style="height: 190rpx; margin-top: 37rpx; margin-left: 32rpx; flex-direction: column; display: flex;">
+          <view class="item_public" style="border: {{item.state && item.state === 'online'&&deviceListSelect === index  ? '6rpx solid #6546A3' : item.state && item.state === 'online'?'2rpx solid #6546A3':'2rpx solid #F2F5F7'}};  flex-direction: row; display: flex;" data-item="{{item}}" data-index="{{index}}" bind:tap="onTapItem">
 
-                  <view style="flex: 1;flex-direction: column; display: flex;">
-                    <view style="display: flex; width: calc(100vw - 64rpx - 268rpx);">
+            <view style="width: 264rpx; height: 200rpx;">
+              <image class="item_public_image" src="{{item.imageUrl}}" style="opacity: {{item.state && item.state === 'online' ? '1' : '0.5'}};" mode="aspectFit" lazy-load="true" webp="true"></image>
+            </view>
 
-                      <view style="width: calc(100vw - 64rpx - 268rpx - 53rpx - 30rpx); color: #333333; font-size: 28rpx;padding-right: 5rpx; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;">
-                        <text>{{item.devName}}</text>
-                      </view>
+            <view class="item_public_right" style="flex: 1; margin-right: 25rpx; opacity: {{item.state && item.state === 'online' ? '1' : '0.5'}};">
+              <view style="height: 190rpx; margin-top: 37rpx; margin-left: 32rpx; flex-direction: column; display: flex;">
 
-                      <view style="width: 48rpx; height: 48rpx;">
-                        <image mode="aspectFit" src="./../../img/add_device_arrow.png" style="width: 48rpx; height: 48rpx; opacity: {{item.state && item.state === 'online'&&deviceListSelect === index ? '1' : '0'}}; "></image>
-                      </view>
+                <view style="flex: 1;flex-direction: column; display: flex;">
+                  <view style="display: flex; width: calc(100vw - 64rpx - 268rpx);">
 
+                    <view style="width: calc(100vw - 64rpx - 268rpx - 53rpx - 30rpx); color: #333333; font-size: 28rpx;padding-right: 5rpx; white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;">
+                      <text>{{item.devName}}</text>
                     </view>
 
-                    <view style="color: #666666; font-size: 24rpx;display: flex; flex-direction: row; align-items: center;">
-                      <image mode="heightFix" src="{{item.connectType==3?'./../../images/device/wifi_black.png':'./../../images/device/blue_black.png'}}" style="width: 28rpx;height: 28rpx; padding-right: 10rpx; opacity: {{item.state && item.state === 'online' ? '1' : '0.7'}};"></image>
-                      <view style="white-space: nowrap;"> {{item.state && item.state === "online" ? (item.connectType==3?"Wifi在线":"蓝牙在线") : "离线"}} </view>
+                    <view style="width: 48rpx; height: 48rpx;">
+                      <image mode="aspectFit" src="./../../img/add_device_arrow.png" style="width: 48rpx; height: 48rpx; opacity: {{item.state && item.state === 'online'&&deviceListSelect === index ? '1' : '0'}}; "></image>
                     </view>
 
                   </view>
-                  <view style="align-items: center; justify-content: center; vertical-align: middle;width: 280rpx;height: 64rpx;background-color: #F2F5F7;  border-radius: 52rpx; text-align: center; justify-content: center;  display: flex;" data-index="{{index}}" catchtap="deleteDevice">
-                    <view style="color: #666666; font-size: 28rpx; ">删除</view>
+
+                  <view style="color: #666666; font-size: 24rpx;display: flex; flex-direction: row; align-items: center;">
+                    <image mode="heightFix" src="{{item.connectType==3?'./../../images/device/wifi_black.png':'./../../images/device/blue_black.png'}}" style="width: 28rpx;height: 28rpx; padding-right: 10rpx; opacity: {{item.state && item.state === 'online' ? '1' : '0.7'}};"></image>
+                    <view style="white-space: nowrap;"> {{item.state && item.state === "online" ? (item.connectType==3?"Wifi在线":"蓝牙在线") : "离线"}} </view>
                   </view>
+
+                </view>
+                <view style="align-items: center; justify-content: center; vertical-align: middle;width: 280rpx;height: 64rpx;background-color: #F2F5F7;  border-radius: 52rpx; text-align: center; justify-content: center;  display: flex;" data-index="{{index}}" catchtap="deleteDevice">
+                  <view style="color: #666666; font-size: 28rpx; ">删除</view>
                 </view>
               </view>
             </view>
+          </view>
 
-          </block>
-        </scroll-view>
-      </view>
-
-      <view wx:else>
+        </block>
+      </scroll-view>
+    </view>
 
-        <!-- 频道 -->
-        <view wx:if="{{indexPage==1&&deviceListSelect!=null&&deviceList.length>deviceListSelect&&deviceList[deviceListSelect].connectType===3}}" class="mair" style="height: calc(100vh - 98rpx - 22rpx - {{navBarHeight}}px);">
-          <view class="play-info">
-            <view class="info">
-              <image src="./../../img/blak.png" class="black" mode="scaleToFill"></image>
-              <image src="./../../img/mm.png" class="mode" mode="scaleToFill"></image>
-              <image class="logo" mode="heightFix" src="./../../img/logo.png"></image>
-              <view wx:if="{{actionIndex !== null}}" style="opacity: 0.8; text-shadow:0px 0px 4px #6D00FF;" class="fm">
-                FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}} </view>
-                  <view wx:if="{{actionIndex !== null}}" style="opacity: 1;" class="fm">
-                    FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}} <image class="gochnnalList" mode="heightFix" src="./../../img/a6.png">
-                      </image>
-                  </view>
-                  <view class="fmMod" bindtap="onTapToChannel"></view>
-                  <view wx:if="{{actionIndex !== null}}" class="thisMusic">
-                    <text>当前播放：</text>
-                    <view class="scroll-box">
-                      <view class="scroll-wrap">
-                        <view class="scroll-item">{{channelData[actionIndex].channelName}}</view>
-                      </view>
+    <view wx:else>
+
+      <!-- 频道 -->
+      <view wx:if="{{indexPage==1&&deviceListSelect!=null&&deviceList.length>deviceListSelect&&deviceList[deviceListSelect].connectType===3}}" class="mair" style="height: calc(100vh - 105rpx - {{safeBottomHeight}}rpx - 22rpx - {{navBarHeight}}px);">
+        <view class="play-info">
+          <view class="info">
+            <image src="./../../img/blak.png" class="black" mode="scaleToFill"></image>
+            <image src="./../../img/mm.png" class="mode" mode="scaleToFill"></image>
+            <image class="logo" mode="heightFix" src="./../../img/logo.png"></image>
+            <view wx:if="{{actionIndex !== null}}" style="opacity: 0.8; text-shadow:0px 0px 4px #6D00FF;" class="fm">
+              FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}} </view>
+                <view wx:if="{{actionIndex !== null}}" style="opacity: 1;" class="fm">
+                  FM.{{actionIndex !== null ? (actionIndex + 1 < 10 ? "0" + (actionIndex + 1) : actionIndex + 1) : 00}} <image class="gochnnalList" mode="heightFix" src="./../../img/a6.png">
+                    </image>
+                </view>
+                <view class="fmMod" bindtap="onTapToChannel"></view>
+                <view wx:if="{{actionIndex !== null}}" class="thisMusic">
+                  <text>当前播放：</text>
+                  <view class="scroll-box">
+                    <view class="scroll-wrap">
+                      <view class="scroll-item">{{channelData[actionIndex].channelName}}</view>
                     </view>
                   </view>
-                  <image src="{{'./../../img/dl' + battery + '.png'}}" class="battery" mode="scaleToFill"></image>
-              </view>
-              <view class="wakeMode" bindtap="goWake">
-                <image src="./../../img/woak.png" class="mode" mode="scaleToFill"></image>
-                <image class="wake" mode="heightFix" src="{{isSetWake ? './../../img/n24.png' : './../../img/n23.png' }}"></image>
-                <text>定时</text>
-              </view>
+                </view>
+                <image src="{{'./../../img/dl' + battery + '.png'}}" class="battery" mode="scaleToFill"></image>
             </view>
-            <scroll-view class="pd" scroll-y="true">
-              <view class="conm" wx:if="{{channelData && channelData.length > 0}}">
-                <image mode="scaleToFill" class="cz" src="./../../img/cz.png"></image>
-                <view class="musicList">
-                  <view wx:for="{{channelData}}" class="li {{index === actionIndex ? 'action' : ' '}}">
-                    <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="zz" src="./../../img/zz.png"></image>
-                    <text class="lm">{{luoma[index]}}</text>
-                    <view class="musicInfo" data-index="{{index}}" bindtap="onTapChannelIndex">
-                      <image mode="scaleToFill" class="pic" src="{{item.channelPic ? item.channelPic : './../../img/head_pic.png'}}"></image>
-                      <text>{{item.channelName}}</text>
-                      <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="svg" src="./../../svg/audio.svg"></image>
-                    </view>
+            <view class="wakeMode" bindtap="goWake">
+              <image src="./../../img/woak.png" class="mode" mode="scaleToFill"></image>
+              <image class="wake" mode="heightFix" src="{{isSetWake ? './../../img/n24.png' : './../../img/n23.png' }}"></image>
+              <text>定时</text>
+            </view>
+          </view>
+          <scroll-view class="pd" scroll-y="true">
+            <view class="conm" wx:if="{{channelData && channelData.length > 0}}">
+              <image mode="scaleToFill" class="cz" src="./../../img/cz.png"></image>
+              <view class="musicList">
+                <view wx:for="{{channelData}}" class="li {{index === actionIndex ? 'action' : ' '}}">
+                  <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="zz" src="./../../img/zz.png"></image>
+                  <text class="lm">{{luoma[index]}}</text>
+                  <view class="musicInfo" data-index="{{index}}" bindtap="onTapChannelIndex">
+                    <image mode="scaleToFill" class="pic" src="{{item.channelPic ? item.channelPic : './../../img/head_pic.png'}}"></image>
+                    <text>{{item.channelName}}</text>
+                    <image mode="scaleToFill" wx:if="{{index === actionIndex}}" class="svg" src="./../../svg/audio.svg"></image>
                   </view>
                 </view>
-                <!-- <image src="./../../svg/audio.svg"></image> -->
               </view>
-            </scroll-view>
-            <!-- 登录启用以下版本 -->
-            <view class="gologin" wx:if="{{showLogin}}">
-              <view class="model">
-                <view bindtap="goLogin" style="position: none; height: auto;" class="loginPic">
-                  <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_long.png"></image>
-                </view>
-                <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
-                  <view>
-                    <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
-                  </view>
+              <!-- <image src="./../../svg/audio.svg"></image> -->
+            </view>
+          </scroll-view>
+          <!-- 登录启用以下版本 -->
+          <view class="gologin" wx:if="{{showLogin}}">
+            <view class="model">
+              <view bindtap="goLogin" style="position: none; height: auto;" class="loginPic">
+                <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_long.png"></image>
+              </view>
+              <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
+                <view>
+                  <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
                 </view>
               </view>
             </view>
-            <view class="gologin goruter" wx:if="{{!showLogin && deviceList && deviceList.length === 0}}">
-              <view class="model">
-                <view bindtap="goDeviceConnect" style="position: none; height: auto;" class="loginPic">
-                  <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_LJ.png"></image>
-                </view>
-                <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
-                  <view>
-                    <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
-                  </view>
+          </view>
+          <view class="gologin goruter" wx:if="{{!showLogin && deviceList && deviceList.length === 0}}">
+            <view class="model">
+              <view bindtap="goDeviceConnect" style="position: none; height: auto;" class="loginPic">
+                <image style="margin: 20rpx 0 20rpx 0; width: 100vw;" mode="widthFix" src="./../../img/BG_LJ.png"></image>
+              </view>
+              <view style="position: none; height: calc(100% - 224rpx); overflow: auto;" class="BG_PD">
+                <view>
+                  <image style="margin: 0; width: 100vw;" mode="widthFix" src="./../../img/BG_PD.png"></image>
                 </view>
               </view>
             </view>
           </view>
+        </view>
 
-          <!-- 我的 -->
-          <view wx:elif="{{indexPage==2}}" class="me" style="height: calc(100vh - 98rpx - 22rpx - {{navBarHeight}}px);">
-            <view class="head-logo">
-              <image mode="scaleToFill" src="{{userPic}}"></image>
-              <text class="nick_name" wx:if="{{nickName}}">{{nickName}}</text>
-            </view>
-            <view class="br"></view>
-            <view class="list">
-              <view class="li">
-                <view class="icon">
-                  <image mode="widthFix" src="./../../img/o.png"></image>
-                </view>
-                <view class="button">
-                  <button open-type="feedback">建议与反馈</button>
-                  <image class="j" mode="heightFix" src="./../../img/b.png"></image>
-                </view>
+        <!-- 我的 -->
+        <view wx:elif="{{indexPage==2}}" class="me" style="height: calc(100vh - 105rpx - {{safeBottomHeight}}rpx - 22rpx - {{navBarHeight}}px);">
+          <view class="head-logo">
+            <image mode="scaleToFill" src="{{userPic}}"></image>
+            <text class="nick_name" wx:if="{{nickName}}">{{nickName}}</text>
+          </view>
+          <view class="br"></view>
+          <view class="list">
+            <view class="li">
+              <view class="icon">
+                <image mode="widthFix" src="./../../img/o.png"></image>
               </view>
-              <view class="li">
-                <view class="icon">
-                  <image mode="widthFix" src="./../../img/q.png"></image>
-                </view>
-                <view class="button" bindtap="jumpToAboutUs">
-                  <text>关于我们</text>
-                  <image class="j" mode="heightFix" src="./../../img/b.png"></image>
-                </view>
+              <view class="button">
+                <button open-type="feedback">建议与反馈</button>
+                <image class="j" mode="heightFix" src="./../../img/b.png"></image>
               </view>
             </view>
-            <view wx:if="{{isLogin}}" class="login">
-              <view bindtap="onTapLogin" class="{{!isLogin ? 'action' : ''}}">
-                {{isLogin ? '退出登录' : "登录"}}
+            <view class="li">
+              <view class="icon">
+                <image mode="widthFix" src="./../../img/q.png"></image>
               </view>
+              <view class="button" bindtap="jumpToAboutUs">
+                <text>关于我们</text>
+                <image class="j" mode="heightFix" src="./../../img/b.png"></image>
+              </view>
+            </view>
+          </view>
+          <view wx:if="{{isLogin}}" class="login">
+            <view bindtap="onTapLogin" class="{{!isLogin ? 'action' : ''}}">
+              {{isLogin ? '退出登录' : "登录"}}
             </view>
           </view>
         </view>
-
       </view>
 
-      <view style="height: 98rpx; flex-direction: column; display: flex;background-color: white;">
-        <view class="line"></view>
-        <view style="flex: 1; text-align: center; display: flex;align-items: center;">
-          <!-- 首页 -->
-          <view class="bottom_view" data-index="0" bind:tap="onTapIndex">
-            <image class="bottom_image" mode="widthFix" src="{{indexPage==0?'./../../img/index_action.png':'./../../img/index_unaction.png'}}"></image>
-            <view style="font-size: 20rpx;color: {{indexPage==0?'#A4D099':'black'}}; padding-top: 0rpx;margin-top: 0rpx;">
-              首页
-            </view>
-          </view>
+    </view>
 
-          <!-- 频道 -->
-          <view wx:if="{{deviceListSelect!=null&&deviceList.length>deviceListSelect&&deviceList[deviceListSelect].connectType===3}}" class="bottom_view" data-index="1" bind:tap="onTapIndex">
-            <image class="bottom_image" mode="widthFix" src="{{indexPage==1?'./../../img/channel_action.png':'./../../img/channel_unaction.png'}}"></image>
-            <view style="font-size: 20rpx;color: {{indexPage==1?'#A4D099':'black'}};">频道</view>
+    <view style="height: calc(105rpx + {{safeBottomHeight}}rpx); flex-direction: column; display: flex;background-color: white;">
+      <view class="line"></view>
+      <view style="flex: 1; text-align: center; display: flex;align-items: center;">
+        <!-- 首页 -->
+        <view class="bottom_view" data-index="0" bind:tap="onTapIndex">
+          <image class="bottom_image" mode="widthFix" src="{{indexPage==0?'./../../img/index_action.png':'./../../img/index_unaction.png'}}"></image>
+          <view style="font-size: 20rpx;color: {{indexPage==0?'#A4D099':'black'}}; padding-top: 0rpx;margin-top: 0rpx;">
+            首页
           </view>
+        </view>
 
-          <!-- 我的 -->
-          <view class="bottom_view" data-index="2" bind:tap="onTapIndex">
-            <image class="bottom_image" mode="widthFix" src="{{indexPage==2?'./../../img/me_action.png':'./../../img/me_unaction.png'}}"></image>
-            <view style="font-size: 20rpx;color: {{indexPage==2?'#A4D099':'black'}};">我的</view>
-          </view>
+        <!-- 频道 -->
+        <view wx:if="{{deviceListSelect!=null&&deviceList.length>deviceListSelect&&deviceList[deviceListSelect].connectType===3}}" class="bottom_view" data-index="1" bind:tap="onTapIndex">
+          <image class="bottom_image" mode="widthFix" src="{{indexPage==1?'./../../img/channel_action.png':'./../../img/channel_unaction.png'}}"></image>
+          <view style="font-size: 20rpx;color: {{indexPage==1?'#A4D099':'black'}};">频道</view>
         </view>
 
+        <!-- 我的 -->
+        <view class="bottom_view" data-index="2" bind:tap="onTapIndex">
+          <image class="bottom_image" mode="widthFix" src="{{indexPage==2?'./../../img/me_action.png':'./../../img/me_unaction.png'}}"></image>
+          <view style="font-size: 20rpx;color: {{indexPage==2?'#A4D099':'black'}};">我的</view>
+        </view>
       </view>
-
+      <view style="height: {{safeBottomHeight}}rpx;"></view>
     </view>
+
   </view>

pages/index/index.wxss

@@ -725,7 +725,7 @@
 
 .bottom_image {
   width: 44rpx;
-  height: 42rpx;
+  height: 44rpx;
 }
 
 /************************ banner ************************/