page-btm-bar.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <template>
  2. <view class="container">
  3. <view class="content">
  4. <view class="item" :class="active == 1?'active':''" @click="navTo(1,'/pages/index/index')">
  5. <i class="iconfont" :class="active == 1?'iconxuanzhongshouye':'iconxuanzhongshouye-2'"></i>
  6. <text class="title">首页</text>
  7. </view>
  8. <view class="item" :class="active == 2?'active':''" @click="navTo(2,'/pages/jiaocheng/jiaocheng')">
  9. <i class="iconfont" :class="active == 2?'iconzixunxuanzhong':'iconzixunweixuanzhong'"></i>
  10. <text class="title">教程</text>
  11. </view>
  12. <view class="item" :class="active == 3?'active':''" @click="navTo(3,'/pages/my/my')">
  13. <i class="iconfont" :class="active == 3?'iconwodeweixuanzhong-2':'iconwodeweixuanzhong'"></i>
  14. <text class="title">我的</text>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. props: {
  22. active: {
  23. type: Number,
  24. default: 1
  25. }
  26. },
  27. data() {
  28. return {
  29. };
  30. },
  31. methods: {
  32. navTo(index, url) {
  33. if (index != this.active) {
  34. uni.reLaunch({
  35. url: url
  36. })
  37. }
  38. }
  39. }
  40. }
  41. </script>
  42. <style scoped>
  43. @import url("/static/css/iconfont.css");
  44. .container {
  45. width: 100%;
  46. height: 100rpx;
  47. /*兼容 IOS<11.2*/
  48. padding-bottom: constant(safe-area-inset-bottom);
  49. /*兼容 IOS>11.2*/
  50. padding-bottom: env(safe-area-inset-bottom);
  51. }
  52. .content {
  53. background-color: #fff;
  54. width: 100vw;
  55. height: 100rpx;
  56. /*兼容 IOS<11.2*/
  57. padding-bottom: constant(safe-area-inset-bottom);
  58. /*兼容 IOS>11.2*/
  59. padding-bottom: env(safe-area-inset-bottom);
  60. display: flex;
  61. flex-flow: row nowrap;
  62. justify-content: space-around;
  63. align-items: center;
  64. box-shadow: 0 20rpx 20rpx #f6f6f6 inset;
  65. position: fixed;
  66. left: 0;
  67. bottom: 0;
  68. z-index: 900;
  69. }
  70. .content .item {
  71. flex: auto;
  72. display: flex;
  73. flex-flow: column nowrap;
  74. justify-content: center;
  75. align-items: center;
  76. }
  77. .content .iconfont {
  78. display: block;
  79. font-size: 48rpx;
  80. color: #8a8a8a;
  81. }
  82. .content .active .iconfont {
  83. color: #3387FF;
  84. }
  85. .content .title {
  86. font-size: 24rpx;
  87. height: 28rpx;
  88. line-height: 28rpx;
  89. text-align: center;
  90. color: #8a8a8a;
  91. }
  92. .content .active .title {
  93. color: #3387FF;
  94. }
  95. </style>