feat: 优化首页UI

mini/components/Episode/index.vue

@@ -94,13 +94,14 @@ export default {
     .episode {
       width: calc((#{750rpx} - #{80rpx}) / 3);
       margin-bottom: 30rpx;
+      overflow: hidden;
       .cover-image{
         position: relative;
-        overflow: hidden;
         height: 330rpx;
         image{
           width: 100%;
           height: inherit;
+          border-radius: 20rpx;
         }
         .special{
           background: rgba(48, 98, 97, 0.65);

mini/components/NavBar/index.vue

@@ -8,6 +8,7 @@
     >
       <view
         class="icon"
+        :class="item.class"
         :style="{
           backgroundImage: `url(${item.icon})`
         }"
@@ -28,18 +29,18 @@ export default {
   data() {
     return {
       types: {
-        1: { href: '/pages/index/rank' },
-        2: { href: '/pages/index/news' },
-        3: { href: '/pages/member/index' },
-        4: { href: '/pages/sign/index' },
-        5: { type: 'recharge' }
+        1: { href: '/pages/index/rank', class: 'rank' },
+        2: { href: '/pages/index/news', class: 'news' },
+        3: { href: '/pages/member/index', class: 'member' },
+        4: { href: '/pages/sign/index', class: 'sign' },
+        5: { type: 'recharge', class: 'recharge' }
       },
       navItem: [
-        { icon: '', name: '排行榜', href: '/pages/index/rank' },
-        { icon: '', name: '最新', href: '/pages/index/news' },
-        { icon: '', name: '会员', href: '/pages/member/index' },
-        { icon: '', name: '签到', href: '/pages/sign/index' },
-        { icon: '', name: '充值', type: 'recharge' }
+        { icon: '', name: '排行榜', href: '/pages/index/rank', class: 'rank' },
+        { icon: '', name: '最新', href: '/pages/index/news', class: 'news' },
+        { icon: '', name: '会员', href: '/pages/member/index', class: 'member' },
+        { icon: '', name: '签到', href: '/pages/sign/index', class: 'sign' },
+        { icon: '', name: '充值', type: 'recharge', class: 'recharge' }
       ],
       recharge: { show: false }
     }
@@ -78,11 +79,22 @@ export default {
       flex: 1;
       font-size: 32rpx;
       .icon{
-        width: 100rpx;
-        height: 100rpx;
+        width: 90rpx;
+        height: 90rpx;
         background-repeat: no-repeat;
         background-size: 100%;
         background-position: center;
+        &.rank{}
+        &.news{
+          width: 80rpx;
+        }
+        &.member{
+          width: 82rpx;
+        }
+        &.sign{}
+        &.recharge{
+          width: 70rpx;
+        }
       }
       text{
         color: #fff;