首页静态设计完毕

pages/index/index.vue

@@ -16,32 +16,25 @@
       <view class="announcement-box">
         <text class="announcement-text">暂无更多公告! 暂无更多公告! 暂无更多公告!</text>
       </view>
-
     </view>
 
     <!-- 轮播图 -->
     <view class="banner-section">
-      <view class="banner-container">
+      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
-        <view 
+              :duration="duration">
-          class="banner-card" 
+        <swiper-item>
-          v-for="(banner, index) in bannerList" 
+          <image :src="commonEnum.TEMP1"></image>
-          :key="banner.id" 
+        </swiper-item>
-          :class="{ active: currentBannerIndex === index }"
+        <swiper-item>
-          @click="onBannerClick(index)"
+          <image :src="commonEnum.TEMP1"></image>
-        >
+        </swiper-item>
-        <image class="product-image" :src="commonEnum.TEMP1" mode="aspectFit"></image>
+        <swiper-item>
-        </view>
+          <image :src="commonEnum.TEMP1"></image>
-      </view>
+        </swiper-item>
-      <!-- 轮播指示器 -->
+        <swiper-item>
-      <view class="banner-dots">
+         <image :src="commonEnum.TEMP1"></image>
-        <view 
+        </swiper-item>
-          v-for="(banner, index) in bannerList" 
+      </swiper>
-          :key="index"
-          class="dot" 
-          :class="{ active: currentBannerIndex === index }"
-          @click="onDotClick(index)"
-        ></view>
-      </view>
     </view>
 
     <!-- 设备列表 -->
@@ -61,8 +54,14 @@
               <text class="status-badge" :class="equipment.status">{{equipment.status === 'normal' ? '正常' : '异常'}}</text>
             </view>
             <view class="equipment-details">
-              <text class="detail-item">租赁时间: {{equipment.startTime}}</text>
+              <view class="detail-item-row">
-              <text class="detail-item">到期时间: {{equipment.endTime}}</text>
+                <text class="detail-item-time">租赁时间:</text>
+                <text class="detail-item">{{equipment.startTime}}</text>
+              </view>
+              <view class="detail-item-row">
+                <text class="detail-item-time">到期时间:</text>
+                <text class="detail-item">{{equipment.endTime}}</text>
+              </view>
             </view>
             <button class="renew-btn" @click.stop="onRenew(equipment)">去续费</button>
           </view>
@@ -79,7 +78,11 @@
         :class="{ active: index === 0 }"
         @click="onNavClick(index)"
       >
-        <text class="nav-icon">{{index === 0 ? '🏠' : index === 1 ? '➕' : '😊'}}</text>
+        <image 
+          class="nav-icon" 
+          :src="getNavIcon(index)"
+          mode="aspectFit"
+        ></image>
         <text class="nav-text">{{nav}}</text>
       </view>
     </view>
@@ -91,6 +94,11 @@ import commonEnum from "../../enum/commonEnum";
 export default {
   data() {
     return {
+      background: ['color1', 'color2', 'color3'],
+      indicatorDots: true,
+      autoplay: true,
+      interval: 2000,
+      duration: 500,
       commonEnum : commonEnum,
       title: '设备租赁',
       currentBannerIndex: 0,
@@ -138,7 +146,7 @@ export default {
           status: 'normal',
           startTime: '2025-07-25 13:23:59',
           endTime: '2026-07-25 13:23:59',
-          image: '/static/stove.svg'
+          image: commonEnum.TEMP2
         },
         {
           id: 2,
@@ -146,7 +154,7 @@ export default {
           status: 'normal',
           startTime: '2025-07-25 13:23:59',
           endTime: '2026-07-25 13:23:59',
-          image: '/static/burner.svg'
+          image: commonEnum.TEMP3
         }
       ]
     }
@@ -196,6 +204,21 @@ export default {
         title: `切换到${navItems[index]}`,
         icon: 'none'
       });
+    },
+    
+    // 获取导航图标
+    getNavIcon(index) {
+      const isActive = index === 0; // 当前首页是激活状态
+      switch(index) {
+        case 0: // 首页
+          return isActive ? this.commonEnum.HOME_ACTIVE : this.commonEnum.HOME;
+        case 1: // 申请租赁
+          return isActive ? this.commonEnum.RENT_ACTIVE : this.commonEnum.RENT;
+        case 2: // 个人中心
+          return isActive ? this.commonEnum.PERSONAL_CENTER_ACTIVE : this.commonEnum.PERSONAL_CENTER;
+        default:
+          return this.commonEnum.HOME;
+      }
     }
   }
 }
@@ -203,6 +226,16 @@ export default {
 
 <style lang="scss" scoped >
 
+.swiper {
+  height: 300rpx;
+  .swiper-item {
+    display: block;
+    height: 300rpx;
+    line-height: 300rpx;
+    text-align: center;
+  }
+}
+
 
 .home-container {
   background: linear-gradient(
@@ -221,10 +254,13 @@ export default {
 
 /* 头部信息 */
 .header {
+
   padding: 106rpx 30rpx 20rpx 30rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  background: #FFDDCA;
+  z-index: 999;
   .location-info {
     display: flex;
     align-items: center;
@@ -258,7 +294,7 @@ export default {
   overflow: hidden;
   height: 34rpx;
   border-radius: 100rpx;
-  border: #4cd964 solid 1px;
+  //border: #4cd964 solid 1px;
   .announcementIcon {
     height: 32rpx;
     width: 32rpx;
@@ -274,7 +310,7 @@ export default {
       color: black;
       white-space: nowrap;
       animation: scroll-text 10s linear infinite;
-      border: #4cd964 solid 1px;
+      //border: #4cd964 solid 1px;
       display: inline-block;
       padding-left: 100%;
     }
@@ -394,12 +430,15 @@ export default {
 }
 
 .section-title {
-  font-size: 32rpx;
+  width: 180rpx;
-  font-weight: bold;
+  height: 33rpx;
-  color: #333;
+  background: #FFFFFF;
+  font-size: 14px;
+  font-weight: 400;
+  color: #3D3D3D;
   margin-bottom: 20rpx;
-  padding: 20rpx 0;
+  padding: 14rpx 20rpx;
-  border-bottom: 1rpx solid #eee;
+  border-radius: 4px;
 }
 
 .equipment-list {
@@ -416,6 +455,15 @@ export default {
   gap: 30rpx;
   box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
+  justify-content: center;
+  align-items: center;
+  .equipment-image {
+    width: 160rpx;
+    height: 106rpx;
+    border-radius: 10rpx;
+    background-color: #f8f9fa;
+    flex-shrink: 0;
+  }
 }
 
 .equipment-item:active {
@@ -423,19 +471,13 @@ export default {
   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
 }
 
-.equipment-image {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 10rpx;
-  background-color: #f8f9fa;
-  flex-shrink: 0;
-}
 
 .equipment-info {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+
 }
 
 .equipment-header {
@@ -446,20 +488,20 @@ export default {
 }
 
 .equipment-name {
-  font-size: 28rpx;
+  font-size: 16px;
-  font-weight: bold;
+  font-weight: 500;
-  color: #333;
+  color: #3D3D3D;
 }
 
 .status-badge {
-  padding: 4rpx 12rpx;
+  padding: 4rpx 26rpx;
-  border-radius: 20rpx;
+  border-radius: 5rpx;
-  font-size: 20rpx;
+  font-size: 24rpx;
-  color: #fff;
+  color: #40C186;
 }
 
 .status-badge.normal {
-  background-color: #52c41a;
+  background-color: #EBFFF6;
 }
 
 .status-badge.warning {
@@ -475,22 +517,33 @@ export default {
   flex-direction: column;
   gap: 8rpx;
   margin-bottom: 15rpx;
-}
 
+}
+.detail-item-row{
+  display: flex;
+  justify-content: space-between;
+  .detail-item-time{
+    color: #817F7F;
+    font-size: 26rpx;
+  }
   .detail-item {
     font-size: 24rpx;
     color: #666;
   }
+}
+
+
 
 .renew-btn {
-  align-self: flex-end;
+  margin-right: 0;
   background: #F15A04;
   color: #fff;
-  border: none;
+  border-radius: 5px;
-  border-radius: 25rpx;
+  padding: 0 57rpx;
-  padding: 15rpx 30rpx;
+  font-size: 32rpx;
-  font-size: 24rpx;
   font-weight: 500;
+  margin-top: 10rpx;
+
 }
 
 /* 底部导航 */
@@ -522,8 +575,8 @@ export default {
 }
 
 .nav-icon {
-  font-size: 40rpx;
+  width: 48rpx;
-  color: #999;
+  height: 48rpx;
 }
 
 .nav-text {
@@ -531,7 +584,6 @@ export default {
   color: #999;
 }
 
-.nav-item.active .nav-icon,
 .nav-item.active .nav-text {
   color: #ff9a9e;
 }

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -6938,9 +6938,9 @@ function isConsoleWritable() {
   return isWritable;
 }
 function initRuntimeSocketService() {
-  const hosts = "172.21.144.1,192.168.2.30,127.0.0.1";
+  const hosts = "172.30.208.1,192.168.2.30,127.0.0.1";
   const port = "8090";
-  const id = "mp-weixin_PmNvfx";
+  const id = "mp-weixin_KIxU6O";
   const lazy = typeof swan !== "undefined";
   let restoreError = lazy ? () => {
   } : initOnError();

unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -4,6 +4,11 @@ const enum_commonEnum = require("../../enum/commonEnum.js");
 const _sfc_main = {
   data() {
     return {
+      background: ["color1", "color2", "color3"],
+      indicatorDots: true,
+      autoplay: true,
+      interval: 2e3,
+      duration: 500,
       commonEnum: enum_commonEnum.commonEnum,
       title: "设备租赁",
       currentBannerIndex: 0,
@@ -51,7 +56,7 @@ const _sfc_main = {
           status: "normal",
           startTime: "2025-07-25 13:23:59",
           endTime: "2026-07-25 13:23:59",
-          image: "/static/stove.svg"
+          image: enum_commonEnum.commonEnum.TEMP2
         },
         {
           id: 2,
@@ -59,7 +64,7 @@ const _sfc_main = {
           status: "normal",
           startTime: "2025-07-25 13:23:59",
           endTime: "2026-07-25 13:23:59",
-          image: "/static/burner.svg"
+          image: enum_commonEnum.commonEnum.TEMP3
         }
       ]
     };
@@ -103,6 +108,20 @@ const _sfc_main = {
         title: `切换到${navItems[index]}`,
         icon: "none"
       });
+    },
+    // 获取导航图标
+    getNavIcon(index) {
+      const isActive = index === 0;
+      switch (index) {
+        case 0:
+          return isActive ? this.commonEnum.HOME_ACTIVE : this.commonEnum.HOME;
+        case 1:
+          return isActive ? this.commonEnum.RENT_ACTIVE : this.commonEnum.RENT;
+        case 2:
+          return isActive ? this.commonEnum.PERSONAL_CENTER_ACTIVE : this.commonEnum.PERSONAL_CENTER;
+        default:
+          return this.commonEnum.HOME;
+      }
     }
   }
 };
@@ -110,22 +129,15 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return {
     a: $data.commonEnum.LOCATION,
     b: $data.commonEnum.ANNOUNCEMENT_ICON,
-    c: common_vendor.f($data.bannerList, (banner, index, i0) => {
+    c: $data.commonEnum.TEMP1,
-      return {
-        a: banner.id,
-        b: $data.currentBannerIndex === index ? 1 : "",
-        c: common_vendor.o(($event) => $options.onBannerClick(index), banner.id)
-      };
-    }),
     d: $data.commonEnum.TEMP1,
-    e: common_vendor.f($data.bannerList, (banner, index, i0) => {
+    e: $data.commonEnum.TEMP1,
-      return {
+    f: $data.commonEnum.TEMP1,
-        a: index,
+    g: $data.indicatorDots,
-        b: $data.currentBannerIndex === index ? 1 : "",
+    h: $data.autoplay,
-        c: common_vendor.o(($event) => $options.onDotClick(index), index)
+    i: $data.interval,
-      };
+    j: $data.duration,
-    }),
+    k: common_vendor.f($data.equipmentList, (equipment, k0, i0) => {
-    f: common_vendor.f($data.equipmentList, (equipment, k0, i0) => {
       return {
         a: equipment.image,
         b: common_vendor.t(equipment.name),
@@ -138,9 +150,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         i: common_vendor.o(($event) => $options.onEquipmentClick(equipment), equipment.id)
       };
     }),
-    g: common_vendor.f(["首页", "申请租赁", "个人中心"], (nav, index, i0) => {
+    l: common_vendor.f(["首页", "申请租赁", "个人中心"], (nav, index, i0) => {
       return {
-        a: common_vendor.t(index === 0 ? "🏠" : index === 1 ? "➕" : "😊"),
+        a: $options.getNavIcon(index),
         b: common_vendor.t(nav),
         c: index,
         d: index === 0 ? 1 : "",

unpackage/dist/dev/mp-weixin/pages/index/index.wxml

@@ -1 +1 @@
-<view class="home-container data-v-1cf27b2a"><view class="header data-v-1cf27b2a"><view class="location-info data-v-1cf27b2a"><image class="location data-v-1cf27b2a" src="{{a}}"></image><text class="company-name data-v-1cf27b2a">福鼎创特物联科技有限公司</text><text class="arrow data-v-1cf27b2a">></text></view></view><view class="announcement-bar data-v-1cf27b2a"><image class="announcementIcon data-v-1cf27b2a" src="{{b}}"></image><view class="announcement-box data-v-1cf27b2a"><text class="announcement-text data-v-1cf27b2a">暂无更多公告! 暂无更多公告! 暂无更多公告!</text></view></view><view class="banner-section data-v-1cf27b2a"><view class="banner-container data-v-1cf27b2a"><view wx:for="{{c}}" wx:for-item="banner" wx:key="a" class="{{['banner-card', 'data-v-1cf27b2a', banner.b && 'active']}}" bindtap="{{banner.c}}"><image class="product-image data-v-1cf27b2a" src="{{d}}" mode="aspectFit"></image></view></view><view class="banner-dots data-v-1cf27b2a"><view wx:for="{{e}}" wx:for-item="banner" wx:key="a" class="{{['dot', 'data-v-1cf27b2a', banner.b && 'active']}}" bindtap="{{banner.c}}"></view></view></view><view class="equipment-section data-v-1cf27b2a"><view class="section-title data-v-1cf27b2a">我的租赁设备</view><view class="equipment-list data-v-1cf27b2a"><view wx:for="{{f}}" wx:for-item="equipment" wx:key="h" class="equipment-item data-v-1cf27b2a" bindtap="{{equipment.i}}"><image class="equipment-image data-v-1cf27b2a" src="{{equipment.a}}" mode="aspectFit"></image><view class="equipment-info data-v-1cf27b2a"><view class="equipment-header data-v-1cf27b2a"><text class="equipment-name data-v-1cf27b2a">{{equipment.b}}</text><text class="{{['status-badge', 'data-v-1cf27b2a', equipment.d]}}">{{equipment.c}}</text></view><view class="equipment-details data-v-1cf27b2a"><text class="detail-item data-v-1cf27b2a">租赁时间: {{equipment.e}}</text><text class="detail-item data-v-1cf27b2a">到期时间: {{equipment.f}}</text></view><button class="renew-btn data-v-1cf27b2a" catchtap="{{equipment.g}}">去续费</button></view></view></view></view><view class="bottom-nav data-v-1cf27b2a"><view wx:for="{{g}}" wx:for-item="nav" wx:key="c" class="{{['nav-item', 'data-v-1cf27b2a', nav.d && 'active']}}" bindtap="{{nav.e}}"><text class="nav-icon data-v-1cf27b2a">{{nav.a}}</text><text class="nav-text data-v-1cf27b2a">{{nav.b}}</text></view></view></view>
+<view class="home-container data-v-1cf27b2a"><view class="header data-v-1cf27b2a"><view class="location-info data-v-1cf27b2a"><image class="location data-v-1cf27b2a" src="{{a}}"></image><text class="company-name data-v-1cf27b2a">福鼎创特物联科技有限公司</text><text class="arrow data-v-1cf27b2a">></text></view></view><view class="announcement-bar data-v-1cf27b2a"><image class="announcementIcon data-v-1cf27b2a" src="{{b}}"></image><view class="announcement-box data-v-1cf27b2a"><text class="announcement-text data-v-1cf27b2a">暂无更多公告! 暂无更多公告! 暂无更多公告!</text></view></view><view class="banner-section data-v-1cf27b2a"><swiper class="swiper data-v-1cf27b2a" circular indicator-dots="{{g}}" autoplay="{{h}}" interval="{{i}}" duration="{{j}}"><swiper-item class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{c}}"></image></swiper-item><swiper-item class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{d}}"></image></swiper-item><swiper-item class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{e}}"></image></swiper-item><swiper-item class="data-v-1cf27b2a"><image class="data-v-1cf27b2a" src="{{f}}"></image></swiper-item></swiper></view><view class="equipment-section data-v-1cf27b2a"><view class="section-title data-v-1cf27b2a">我的租赁设备</view><view class="equipment-list data-v-1cf27b2a"><view wx:for="{{k}}" wx:for-item="equipment" wx:key="h" class="equipment-item data-v-1cf27b2a" bindtap="{{equipment.i}}"><image class="equipment-image data-v-1cf27b2a" src="{{equipment.a}}" mode="aspectFit"></image><view class="equipment-info data-v-1cf27b2a"><view class="equipment-header data-v-1cf27b2a"><text class="equipment-name data-v-1cf27b2a">{{equipment.b}}</text><text class="{{['status-badge', 'data-v-1cf27b2a', equipment.d]}}">{{equipment.c}}</text></view><view class="equipment-details data-v-1cf27b2a"><view class="detail-item-row data-v-1cf27b2a"><text class="detail-item-time data-v-1cf27b2a">租赁时间:</text><text class="detail-item data-v-1cf27b2a">{{equipment.e}}</text></view><view class="detail-item-row data-v-1cf27b2a"><text class="detail-item-time data-v-1cf27b2a">到期时间:</text><text class="detail-item data-v-1cf27b2a">{{equipment.f}}</text></view></view><button class="renew-btn data-v-1cf27b2a" catchtap="{{equipment.g}}">去续费</button></view></view></view></view><view class="bottom-nav data-v-1cf27b2a"><view wx:for="{{l}}" wx:for-item="nav" wx:key="c" class="{{['nav-item', 'data-v-1cf27b2a', nav.d && 'active']}}" bindtap="{{nav.e}}"><image class="nav-icon data-v-1cf27b2a" src="{{nav.a}}" mode="aspectFit"></image><text class="nav-text data-v-1cf27b2a">{{nav.b}}</text></view></view></view>

unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -23,6 +23,15 @@
 /* 垂直间距 */
 /* 透明度 */
 /* 文章场景相关 */
+.swiper.data-v-1cf27b2a {
+  height: 300rpx;
+}
+.swiper .swiper-item.data-v-1cf27b2a {
+  display: block;
+  height: 300rpx;
+  line-height: 300rpx;
+  text-align: center;
+}
 .home-container.data-v-1cf27b2a {
   background: linear-gradient(to bottom, #FFDDCA 0px, #FFDDCA 450rpx, #f5f5f5 450rpx, #f5f5f5 100%);
   min-height: 100vh;
@@ -39,6 +48,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  background: #FFDDCA;
+  z-index: 999;
 }
 .header .location-info.data-v-1cf27b2a {
   display: flex;
@@ -72,7 +83,6 @@
   overflow: hidden;
   height: 34rpx;
   border-radius: 100rpx;
-  border: #4cd964 solid 1px;
 }
 .announcement-bar .announcementIcon.data-v-1cf27b2a {
   height: 32rpx;
@@ -90,7 +100,6 @@
   color: black;
   white-space: nowrap;
   animation: scroll-text-1cf27b2a 10s linear infinite;
-  border: #4cd964 solid 1px;
   display: inline-block;
   padding-left: 100%;
 }
@@ -196,12 +205,15 @@
   padding: 0 30rpx;
 }
 .section-title.data-v-1cf27b2a {
-  font-size: 32rpx;
+  width: 180rpx;
-  font-weight: bold;
+  height: 33rpx;
-  color: #333;
+  background: #FFFFFF;
+  font-size: 14px;
+  font-weight: 400;
+  color: #3D3D3D;
   margin-bottom: 20rpx;
-  padding: 20rpx 0;
+  padding: 14rpx 20rpx;
-  border-bottom: 1rpx solid #eee;
+  border-radius: 4px;
 }
 .equipment-list.data-v-1cf27b2a {
   display: flex;
@@ -216,18 +228,20 @@
   gap: 30rpx;
   box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
+  justify-content: center;
+  align-items: center;
+}
+.equipment-item .equipment-image.data-v-1cf27b2a {
+  width: 160rpx;
+  height: 106rpx;
+  border-radius: 10rpx;
+  background-color: #f8f9fa;
+  flex-shrink: 0;
 }
 .equipment-item.data-v-1cf27b2a:active {
   transform: scale(0.98);
   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.15);
 }
-.equipment-image.data-v-1cf27b2a {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 10rpx;
-  background-color: #f8f9fa;
-  flex-shrink: 0;
-}
 .equipment-info.data-v-1cf27b2a {
   flex: 1;
   display: flex;
@@ -241,18 +255,18 @@
   margin-bottom: 15rpx;
 }
 .equipment-name.data-v-1cf27b2a {
-  font-size: 28rpx;
+  font-size: 16px;
-  font-weight: bold;
+  font-weight: 500;
-  color: #333;
+  color: #3D3D3D;
 }
 .status-badge.data-v-1cf27b2a {
-  padding: 4rpx 12rpx;
+  padding: 4rpx 26rpx;
-  border-radius: 20rpx;
+  border-radius: 5rpx;
-  font-size: 20rpx;
+  font-size: 24rpx;
-  color: #fff;
+  color: #40C186;
 }
 .status-badge.normal.data-v-1cf27b2a {
-  background-color: #52c41a;
+  background-color: #EBFFF6;
 }
 .status-badge.warning.data-v-1cf27b2a {
   background-color: #faad14;
@@ -266,19 +280,27 @@
   gap: 8rpx;
   margin-bottom: 15rpx;
 }
-.detail-item.data-v-1cf27b2a {
+.detail-item-row.data-v-1cf27b2a {
+  display: flex;
+  justify-content: space-between;
+}
+.detail-item-row .detail-item-time.data-v-1cf27b2a {
+  color: #817F7F;
+  font-size: 26rpx;
+}
+.detail-item-row .detail-item.data-v-1cf27b2a {
   font-size: 24rpx;
   color: #666;
 }
 .renew-btn.data-v-1cf27b2a {
-  align-self: flex-end;
+  margin-right: 0;
   background: #F15A04;
   color: #fff;
-  border: none;
+  border-radius: 5px;
-  border-radius: 25rpx;
+  padding: 0 57rpx;
-  padding: 15rpx 30rpx;
+  font-size: 32rpx;
-  font-size: 24rpx;
   font-weight: 500;
+  margin-top: 10rpx;
 }
 
 /* 底部导航 */
@@ -307,14 +329,13 @@
   transform: scale(0.95);
 }
 .nav-icon.data-v-1cf27b2a {
-  font-size: 40rpx;
+  width: 48rpx;
-  color: #999;
+  height: 48rpx;
 }
 .nav-text.data-v-1cf27b2a {
   font-size: 20rpx;
   color: #999;
 }
-.nav-item.active .nav-icon.data-v-1cf27b2a,
 .nav-item.active .nav-text.data-v-1cf27b2a {
   color: #ff9a9e;
 }