panhui пре 3 година
родитељ
комит
fe1d69737f

BIN
src/assets/TUTORIAL.png


BIN
src/assets/blfBg.png


BIN
src/assets/blfimg1.png


BIN
src/assets/blfimg2.png


BIN
src/assets/blfimg3.png


BIN
src/assets/home_icon_redian.png


BIN
src/assets/png-kuang.png


+ 13 - 0
src/assets/svgs/icon_inter.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="首页+滚屏" transform="translate(-335.000000, -675.000000)">
+            <g id="编组-21" transform="translate(20.000000, 675.000000)">
+                <g id="inter" transform="translate(315.000000, 0.000000)">
+                    <path d="M11.9497475,13.0784271 L15.3085047,9.71966991 C15.6013979,9.4267767 16.0762716,9.4267767 16.3691649,9.71966991 C16.6620581,10.0125631 16.6620581,10.4874369 16.3691649,10.7803301 L12.4800776,14.6694174 C12.1871843,14.9623106 11.7123106,14.9623106 11.4194174,14.6694174 L7.53033009,10.7803301 C7.23743687,10.4874369 7.23743687,10.0125631 7.53033009,9.71966991 C7.8232233,9.4267767 8.29809704,9.4267767 8.59099026,9.71966991 L11.9497475,13.0784271 Z" id="Combined-Shape" transform="translate(11.949747, 12.194544) rotate(-90.000000) translate(-11.949747, -12.194544) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

BIN
src/assets/tabbar_icon_blf.png


BIN
src/assets/tabbar_icon_blf_pre.png


BIN
src/assets/tabbar_icon_home.png


BIN
src/assets/tabbar_icon_home_pre.png


BIN
src/assets/tabbar_icon_mine.png


BIN
src/assets/tabbar_icon_mine_pre.png


BIN
src/assets/tabbar_icon_profit.png


BIN
src/assets/tabbar_icon_profit_pre.png


BIN
src/assets/tabbar_icon_rank.png


BIN
src/assets/title-bg.png


+ 215 - 207
src/locales/en.json

@@ -1,214 +1,222 @@
 {
-    "balance": {
-        "availableWidthdrawAmount": "Amount that can be withdrawn",
-        "balance": "Account Balance",
-        "chooseAmount": "select amount",
-        "confirmWithdraw": "Confirm withdrawal",
-        "inputCustomAmount": "Please enter a custom amount",
-        "realReceipt": "Actual account",
-        "recharge": "recharge",
-        "record": {
-            "commission": "commission",
-            "pay": "to pay",
-            "receipt": "collect money",
-            "recharge": "recharge",
-            "withdraw": "withdraw"
-        },
-        "symbol": "$",
-        "totalWithdraw": "Cumulative withdrawal",
-        "unit": "Yuan",
-        "withdraw": "withdraw",
-        "withdrawAmount": "Withdrawal Amount",
-        "withdrawAmountError": "Please enter the correct withdrawal amount",
-        "withdrawFee": "Withdrawal fee",
-        "withdrawFeeTip0": "Note: 1/3 of the total transaction fee for the purchase is",
-        "withdrawFeeTip1": ", the excess handling fee",
-        "withdrawInputTip": "Please enter the withdrawal amount",
-        "withdrawModalTitle": "Apply for withdrawal",
-        "withdrawSuccess": "Successful withdrawal",
-        "withdrawing": "Withdrawing",
-        "rechargeMax": "The maximum recharge amount is {value}",
-        "rechargeMin": "The minimum recharge amount is {value}"
+  "balance": {
+    "availableWidthdrawAmount": "Amount that can be withdrawn",
+    "balance": "Account Balance",
+    "chooseAmount": "select amount",
+    "confirmWithdraw": "Confirm withdrawal",
+    "inputCustomAmount": "Please enter a custom amount",
+    "realReceipt": "Actual account",
+    "recharge": "recharge",
+    "record": {
+      "commission": "commission",
+      "pay": "to pay",
+      "receipt": "collect money",
+      "recharge": "recharge",
+      "withdraw": "withdraw"
     },
+    "symbol": "$",
+    "totalWithdraw": "Cumulative withdrawal",
+    "unit": "Yuan",
+    "withdraw": "withdraw",
+    "withdrawAmount": "Withdrawal Amount",
+    "withdrawAmountError": "Please enter the correct withdrawal amount",
+    "withdrawFee": "Withdrawal fee",
+    "withdrawFeeTip0": "Note: 1/3 of the total transaction fee for the purchase is",
+    "withdrawFeeTip1": ", the excess handling fee",
+    "withdrawInputTip": "Please enter the withdrawal amount",
+    "withdrawModalTitle": "Apply for withdrawal",
+    "withdrawSuccess": "Successful withdrawal",
+    "withdrawing": "Withdrawing",
+    "rechargeMax": "The maximum recharge amount is {value}",
+    "rechargeMin": "The minimum recharge amount is {value}"
+  },
+  "cancel": "Cancel",
+  "common": {
+    "alert": "hint",
     "cancel": "Cancel",
-    "common": {
-        "alert": "hint",
-        "cancel": "Cancel",
-        "confirm": "Sure",
-        "eula": "Platform",
-        "guide": "Tutorial",
-        "home": "Home",
-        "loadFinish": "download finished",
-        "loading": "Loading",
-        "mine": "Mine",
-        "more": "More",
-        "news": "News",
-        "pullRefresh": "Pull down to refresh",
-        "rank": "leaderboard",
-        "register": "register",
-        "updateSuccess": "update completed",
-        "profit": "Commission"
+    "confirm": "Sure",
+    "eula": "Platform",
+    "guide": "Tutorial",
+    "home": "Home",
+    "loadFinish": "download finished",
+    "loading": "Loading",
+    "mine": "Mine",
+    "more": "More",
+    "news": "News",
+    "pullRefresh": "Pull down to refresh",
+    "rank": "leaderboard",
+    "register": "register",
+    "updateSuccess": "update completed",
+    "profit": "Commission",
+    "noRecords": "No records"
+  },
+  "delegate": {
+    "tip": "The consignment sale has not started yet, it will start today at ${time}",
+    "title": "Consignment",
+    "increase": "mark up",
+    "originalPrice": "original price",
+    "payServiceCharge": "pay processing fees",
+    "sellPrice": "selling price",
+    "tip1": "Note: entrusting the platform to sell services, the maximum price of the product can be increased by {riseRatePercent}% each time, and the platform will charge {serviceCharge}% of the custody service fee"
+  },
+  "distribution": {
+    "commission": "commission",
+    "joinTeamAt": "time to join the team",
+    "myInvitor": "my recommender",
+    "myProfit": "Income",
+    "orderNum": "number of order",
+    "profitDetails": "Revenue Details",
+    "qrCode": "my promo code",
+    "teamNum": "Team size",
+    "totalProfit": "Total revenue",
+    "viewDetail": "view details",
+    "viewTeam": "view team",
+    "saveImg": "save Picture",
+    "empty": "no yet"
+  },
+  "home": {
+    "all": "All"
+  },
+  "login": "Log in",
+  "loginPage": {
+    "agreement": "User Agreement",
+    "codePla": "please enter verification code",
+    "goRegister": "Sign up now",
+    "invitorPla": "Invitation code (optional)",
+    "isRead": "have read and agreed",
+    "loginByCode": "Verification code login",
+    "loginNow": "Already have an account, log in now",
+    "loginPwd": "password login",
+    "loginSuceess": "login successful",
+    "noAcount": "No account yet?",
+    "noAgree": "Please read and agree to the registration agreement",
+    "phone": "phone number",
+    "phoneError": "Wrong format of phone number",
+    "phonePla": "Please enter phone number",
+    "psd": "password",
+    "psdAgainError": "The two passwords entered are inconsistent",
+    "psdAgainPla": "please enter password again",
+    "psdPla": "please enter password",
+    "register": "Register an account",
+    "registerSuccess": "registration success",
+    "sendCode": "Send code",
+    "sended": "Sented"
+  },
+  "mine": {
+    "address": "Address",
+    "avatar": "Avatar",
+    "bankCard": "Bank Card",
+    "bindPhone": "Bind Phone",
+    "female": "Female",
+    "logout": "sign out",
+    "male": "male",
+    "newProfit": "new income",
+    "nickname": "Nick Name",
+    "noBind": "unbound",
+    "noLogin": "not logged in",
+    "noSetting": "not set",
+    "setting": "Setting",
+    "sex": "Gender",
+    "user": "User",
+    "common": "Common Functions",
+    "nickPlac": "Please enter a nickname",
+    "sure": "Confirm the changes"
+  },
+  "news": {
+    "newsNull": "There is no news~"
+  },
+  "order": {
+    "buyNow": "Buy Now",
+    "createSuccess": "Order successfully created",
+    "createdAt": "order time",
+    "detail": "order details",
+    "id": "order number",
+    "my": "My Order",
+    "payInfo": "Payment Information",
+    "payMethod": "payment method",
+    "payMethodName": {
+      "balance": "balance payment"
     },
-    "delegate": {
-        "tip": "The consignment sale has not started yet, it will start today at ${time}",
-        "title": "Consignment",
-        "increase": "mark up",
-        "originalPrice": "original price",
-        "payServiceCharge": "pay processing fees",
-        "sellPrice": "selling price",
-        "tip1": "Note: entrusting the platform to sell services, the maximum price of the product can be increased by {riseRatePercent}% each time, and the platform will charge {serviceCharge}% of the custody service fee"
+    "payNow": "pay immediately",
+    "processing": "Processing",
+    "status": {
+      "ALL": "all",
+      "CANCELED": "Cancelled",
+      "CONFIRMED": "For Sale",
+      "NOT_CONFIRMED": "Waiting for the seller to confirm receipt",
+      "NOT_PAID": "Pending",
+      "NOT_SHIPPED": "to be delivered",
+      "RECEIVED": "received",
+      "SELLING": "Selling",
+      "SHIPPED": "Shipped",
+      "SOLD": "Sold",
+      "SOLD_NOT_CONFIRMED": "To be confirmed receipt",
+      "SOLD_NOT_PAID": "pending buyer payment"
     },
-    "distribution": {
-        "commission": "commission",
-        "joinTeamAt": "time to join the team",
-        "myInvitor": "my recommender",
-        "myProfit": "Income",
-        "orderNum": "number of order",
-        "profitDetails": "Revenue Details",
-        "qrCode": "my promo code",
-        "teamNum": "Team size",
-        "totalProfit": "Total revenue",
-        "viewDetail": "view details",
-        "viewTeam": "view team",
-        "saveImg": "save Picture"
+    "statusDesc": {
+      "CANCELED": "The order has been cancelled, if you have any questions, please contact customer service",
+      "CONFIRMED": "To be entrusted, it will be put on the shelves within 24 hours after entrusting",
+      "NOT_CONFIRMED": "Waiting for the seller to confirm receipt",
+      "NOT_PAID": "Please pay as soon as possible, overtime unpaid orders will be automatically canceled",
+      "NOT_SHIPPED": "to be delivered",
+      "RECEIVED": "received",
+      "SELLING": "In entrustment, if you have any questions, please contact customer service",
+      "SHIPPED": "Shipped",
+      "SOLD": "Sold, please contact customer service if you have any questions",
+      "SOLD_NOT_CONFIRMED": "To be confirmed receipt",
+      "SOLD_NOT_PAID": "pending buyer payment"
     },
-    "home": {
-        "all": "All"
-    },
-    "login": "Log in",
-    "loginPage": {
-        "agreement": "User Agreement",
-        "codePla": "please enter verification code",
-        "goRegister": "Sign up now",
-        "invitorPla": "Invitation code (optional)",
-        "isRead": "have read and agreed",
-        "loginByCode": "Verification code login",
-        "loginNow": "Already have an account, log in now",
-        "loginPwd": "password login",
-        "loginSuceess": "login successful",
-        "noAcount": "No account yet?",
-        "noAgree": "Please read and agree to the registration agreement",
-        "phone": "phone number",
-        "phoneError": "Wrong format of phone number",
-        "phonePla": "Please enter phone number",
-        "psd": "password",
-        "psdAgainError": "The two passwords entered are inconsistent",
-        "psdAgainPla": "please enter password again",
-        "psdPla": "please enter password",
-        "register": "Register an account",
-        "registerSuccess": "registration success",
-        "sendCode": "Send code",
-        "sended": "Sented"
-    },
-    "mine": {
-        "address": "Address",
-        "avatar": "Avatar",
-        "bankCard": "Bank Card",
-        "bindPhone": "Bind Phone",
-        "female": "Female",
-        "logout": "sign out",
-        "male": "male",
-        "newProfit": "new income",
-        "nickname": "Nick Name",
-        "noBind": "unbound",
-        "noLogin": "not logged in",
-        "noSetting": "not set",
-        "setting": "Setting",
-        "sex": "Gender",
-        "user": "User",
-        "common": "Common Functions",
-        "nickPlac": "Please enter a nickname",
-        "sure": "Confirm the changes"
-    },
-    "news": {
-        "newsNull": "There is no news~"
-    },
-    "order": {
-        "buyNow": "Buy Now",
-        "createSuccess": "Order successfully created",
-        "createdAt": "order time",
-        "detail": "order details",
-        "id": "order number",
-        "my": "My Order",
-        "payInfo": "Payment Information",
-        "payMethod": "payment method",
-        "payMethodName": {
-            "balance": "balance payment"
-        },
-        "payNow": "pay immediately",
-        "processing": "Processing",
-        "status": {
-            "ALL": "all",
-            "CANCELED": "Cancelled",
-            "CONFIRMED": "For Sale",
-            "NOT_CONFIRMED": "Waiting for the seller to confirm receipt",
-            "NOT_PAID": "Pending",
-            "NOT_SHIPPED": "to be delivered",
-            "RECEIVED": "received",
-            "SELLING": "Selling",
-            "SHIPPED": "Shipped",
-            "SOLD": "Sold",
-            "SOLD_NOT_CONFIRMED": "To be confirmed receipt",
-            "SOLD_NOT_PAID": "pending buyer payment"
-        },
-        "statusDesc": {
-            "CANCELED": "The order has been cancelled, if you have any questions, please contact customer service",
-            "CONFIRMED": "To be entrusted, it will be put on the shelves within 24 hours after entrusting",
-            "NOT_CONFIRMED": "Waiting for the seller to confirm receipt",
-            "NOT_PAID": "Please pay as soon as possible, overtime unpaid orders will be automatically canceled",
-            "NOT_SHIPPED": "to be delivered",
-            "RECEIVED": "received",
-            "SELLING": "In entrustment, if you have any questions, please contact customer service",
-            "SHIPPED": "Shipped",
-            "SOLD": "Sold, please contact customer service if you have any questions",
-            "SOLD_NOT_CONFIRMED": "To be confirmed receipt",
-            "SOLD_NOT_PAID": "pending buyer payment"
-        },
-        "total": "total",
-        "totalPayment": "actual payment",
-        "walletPay": "wallet payment",
-        "applyShip": "Apply for delivery",
-        "confirmReceipt": "confirm the receipt of goods",
-        "countDown": "Automatically cancel the order when the payment countdown expires",
-        "hasProblem": "Encounter problems?",
-        "payAt": "Payment time",
-        "viewOrder": "check order"
-    },
-    "product": {
-        "dailyEarning": "Daily Income",
-        "detail": "Product Details",
-        "hot": "Hot snapping up…",
-        "nowPrice": "Current",
-        "owner": "Product Holder",
-        "search": "search",
-        "searchNo": "No products were found~",
-        "searchPla": "Enter search keywords",
-        "start": "back grab",
-        "tomorrowBuy": "Available",
-        "priceNow": "Current",
-        "riseDesc": "Daily Income",
-        "tag": "Digital Artwork"
-    },
-    "rank": {
-        "inviteNum": "New recruits",
-        "profitInfo": "Earnings information",
-        "rank": "Ranking",
-        "rankByInvite": "Invite Ranking",
-        "rankByProfit": "Revenue Ranking",
-        "userInfo": "User Info",
-        "withdrawRechargeRate": "Recharge revenue ratio"
-    },
-    "settings": {
-        "darkMode": "Dark Mode"
-    },
-    "title": {
-        "balanceRecord": "Transaction details",
-        "distribution": "revenue center",
-        "myTeam": "my team"
-    },
-    "user": {
-        "notLogin": "User is not logged in, do you want to log in now?",
-        "profile": "Edit Information",
-        "wallet": "My purse"
-    }
+    "total": "total",
+    "totalPayment": "actual payment",
+    "walletPay": "wallet payment",
+    "applyShip": "Apply for delivery",
+    "confirmReceipt": "confirm the receipt of goods",
+    "countDown": "Automatically cancel the order when the payment countdown expires",
+    "hasProblem": "Encounter problems?",
+    "payAt": "Payment time",
+    "viewOrder": "check order"
+  },
+  "product": {
+    "dailyEarning": "Daily Income",
+    "detail": "Product Details",
+    "hot": "Hot snapping up…",
+    "nowPrice": "Current",
+    "owner": "Product Holder",
+    "search": "search",
+    "searchNo": "No products were found~",
+    "searchPla": "Enter search keywords",
+    "start": "back grab",
+    "tomorrowBuy": "Available",
+    "priceNow": "Current",
+    "riseDesc": "Daily Income",
+    "tag": "Digital Artwork"
+  },
+  "rank": {
+    "inviteNum": "New recruits",
+    "profitInfo": "Earnings information",
+    "rank": "Ranking",
+    "rankByInvite": "Invite Ranking",
+    "rankByProfit": "Revenue Ranking",
+    "userInfo": "User Info",
+    "withdrawRechargeRate": "Recharge revenue ratio"
+  },
+  "settings": {
+    "darkMode": "Dark Mode"
+  },
+  "title": {
+    "balanceRecord": "Transaction details",
+    "distribution": "revenue center",
+    "myTeam": "my team"
+  },
+  "user": {
+    "notLogin": "User is not logged in, do you want to log in now?",
+    "profile": "Edit Information",
+    "wallet": "My purse"
+  },
+  "blf": {
+    "has": "Remaining places",
+    "pic": "illustrate",
+    "tips": "Pledge your balance, and enjoy today's dividends through the platform's overall pledge balance ratio, and the highest daily chemical income can get 1%",
+    "buy": "snap up now"
+  }
 }

+ 6 - 0
src/locales/zh.json

@@ -212,5 +212,11 @@
         "common": "常用功能",
         "nickPlac": "请输入昵称",
         "sure": "确认修改"
+    },
+    "blf": {
+        "pic": "图片说明",
+        "tips": "质押您的余额,通过平台整体质押余额比例,享受今日分红,最高日化收益可得1%",
+        "has": "剩余名额",
+        "buy": "立即抢购"
     }
 }

+ 11 - 3
src/router/index.js

@@ -37,9 +37,9 @@ const router = createRouter({
                     }
                 },
                 {
-                    path: 'news',
-                    name: 'news',
-                    component: () => import('@/views/NewsPage.vue'),
+                    path: 'BLF',
+                    name: 'BLF',
+                    component: () => import('@/views/BLFPage.vue'),
                     meta: {
                         allowGuest: true
                     }
@@ -72,6 +72,14 @@ const router = createRouter({
                 }
             ]
         },
+        {
+            path: '/news',
+            name: 'news',
+            component: () => import('@/views/NewsPage.vue'),
+            meta: {
+                allowGuest: true
+            }
+        },
         {
             path: '/login',
             name: 'login',

+ 171 - 0
src/views/BLFPage.vue

@@ -0,0 +1,171 @@
+<template>
+    <ion-page>
+        <ion-content>
+            <img class="top-img" src="@/assets/blfBg.png" alt="" />
+
+            <div class="box">
+                <div class="box-content">
+                    <div class="box-img">
+                        <img src="@/assets/blfimg2.png" alt="" class="img2" />
+                        <!-- <img src="@/assets/blfimg3.png" alt="" class="img3" /> -->
+                        <img src="@/assets/blfimg3.png" alt="" class="img3" />
+                    </div>
+                    <div class="text1">{{ $t('blf.pic') }}</div>
+                    <div class="text2">{{ $t('blf.tips') }}</div>
+                    <div style="flex-grow: 1; min-height: 30px"></div>
+                    <div class="num">
+                        <div class="num-title">{{ $t('blf.has') }}</div>
+                        <div class="progress">
+                            <van-progress :percentage="progress" />
+                        </div>
+                        <div class="progress-val">{{ now }}/{{ total }}</div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="buy">
+                <van-button class="animate__animated animate__headShake animate__infinite" type="primary" block>{{
+                    $t('blf.buy')
+                }}</van-button>
+            </div>
+        </ion-content>
+    </ion-page>
+</template>
+<script setup>
+import { ref, computed } from 'vue'
+import '@/styles/animate.css'
+
+const total = ref(100)
+const now = ref(20)
+
+const progress = computed(() => {
+    return (now.value * 100) / total.value
+})
+</script>
+
+<style lang="less" scoped>
+.top-img {
+    width: 100%;
+    display: block;
+}
+
+.box {
+    margin: 15px 20px;
+    position: relative;
+    padding: 1px;
+    background: linear-gradient(#dfffcd 0%, #91fac5 48%, #39f3bb 100%);
+    border-radius: 8px;
+    .img1 {
+        display: block;
+        width: 100%;
+    }
+
+    .box-content {
+        min-height: 395px;
+        .f-col();
+        align-items: center;
+        background: #2c302f;
+        border-radius: 8px;
+
+        .box-img {
+            position: relative;
+            padding: 34px 0 16px;
+            width: 71.7vw;
+            .f-col();
+            align-items: center;
+        }
+        .img2 {
+            position: absolute;
+            width: 71.7vw;
+            height: 150px;
+            z-index: 1;
+            bottom: 0;
+            left: 0;
+            // border-radius: 16px;
+            // background: linear-gradient(180deg, #56f5bd 0%, #ffffff 100%);
+            // &::after {
+            //     content: '';
+            //     position: absolute;
+            //     left: 0.5px;
+            //     right: 0.5px;
+            //     top: 0.5px;
+            //     bottom: 0.5px;
+            //     border-radius: 16px;
+            //     background-color: #3d403f;
+            // }
+        }
+        .img3 {
+            position: relative;
+            width: 251px;
+            height: 185px;
+            z-index: 2;
+            display: block;
+        }
+
+        .text1 {
+            font-size: 14px;
+            font-weight: bold;
+            line-height: 20px;
+            padding: 9px 0 6px;
+            color: #42f4bc;
+        }
+        .text2 {
+            width: 281px;
+            font-size: 14px;
+            line-height: 20px;
+            text-align: center;
+            color: #9fbfb1;
+        }
+    }
+}
+
+.num {
+    width: 100%;
+    background-color: #fff;
+    height: 68px;
+    border-radius: 0px 0px 8px 8px;
+    .f-col();
+    align-items: center;
+    padding: 15px 0;
+    box-sizing: border-box;
+    position: relative;
+
+    .num-title {
+        font-size: 14px;
+        font-weight: bold;
+        color: #000;
+        line-height: 20px;
+    }
+    .progress {
+        padding-top: 5px;
+        width: calc(100% - 40px);
+        --van-progress-height: 9px;
+        --van-progress-color: #4ef5bd;
+        --van-progress-background-color: #f0f0f0;
+        :deep(.van-progress) {
+            .van-progress__pivot {
+                display: none;
+            }
+        }
+    }
+    .progress-val {
+        color: #000;
+        font-size: 12px;
+        line-height: 20px;
+        position: absolute;
+        right: 20px;
+        top: 15px;
+    }
+}
+
+.buy {
+    padding: 25px 20px;
+    .van-button {
+        background: linear-gradient(90deg, #dfffcd 0%, #91fac5 48%, #39f3bb 100%);
+        color: #000;
+        font-size: 18px;
+        font-weight: bold;
+        height: 49px;
+    }
+}
+</style>

+ 201 - 85
src/views/HomePage.vue

@@ -45,42 +45,64 @@
                 </swiper> -->
             </div>
 
+            <img
+                src="@/assets/TUTORIAL.png"
+                class="tutorial-btn animate__animated animate__heartBeat animate__infinite"
+                alt=""
+                srcset=""
+            />
+
             <!-- 通知 -->
-            <van-notice-bar
-                v-if="notice"
-                ref="noticeBarRef"
-                left-icon="volume-o"
-                background="var(--ion-color-step-50)"
-                :text="notice"
-            >
-                <template #left-icon>
-                    <img class="bar-icon" src="../assets/home_icon_redian.png" alt="" />
-                    <div class="driver"></div>
-                </template>
-            </van-notice-bar>
+            <div class="notice-box" v-if="news.length > 0">
+                <van-notice-bar ref="noticeBarRef" left-icon="volume-o">
+                    <template #left-icon>
+                        <img class="bar-icon" src="../assets/home_icon_redian.png" alt="" />
+                        <div class="driver"></div>
+                    </template>
+                    <van-swipe
+                        vertical
+                        class="notice-swipe"
+                        :autoplay="3000"
+                        :touchable="false"
+                        :show-indicators="false"
+                    >
+                        <van-swipe-item v-for="(item, index) in news" :key="index" @click="goNews">
+                            <div class="notic-news">
+                                <span class="van-ellipsis">{{ item.title }}</span>
+                                <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
+                            </div>
+                        </van-swipe-item>
+                    </van-swipe>
+                </van-notice-bar>
+            </div>
 
             <div class="rank-content">
                 <img class="rank-bg" src="../assets/png-kuang.png" alt="" />
                 <div class="rank-box" @click="goRank">
                     <div class="rank-list">
                         <div class="rank-info" v-for="(item, index) in profitList" :key="index">
-                            <div class="name">{{ item.nickname }}</div>
-                            <!-- <div class="text">
+                            <div class="rank-info-left">
+                                <div class="name">{{ item.nickname }}</div>
+                                <!-- <div class="text">
                                 {{ $t('balance.withdraw') }}{{ item.withdrawAccumulation }}&nbsp;
                                 {{ $t('rank.withdrawRechargeRate') }}{{ parseInt(item.roi * 100) }}%
                             </div> -->
-                            <div class="text">{{ $t('rank.inviteNum') }}&nbsp;{{ item.juniorCount }}</div>
-                            <div class="more">{{ $t('common.more') }}</div>
+                                <div class="text">{{ $t('rank.inviteNum') }}&nbsp;{{ item.juniorCount }}</div>
+                            </div>
+
+                            <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
                         </div>
                         <div class="rank-info" v-for="(item, index) in profitList" :key="index">
-                            <div class="name">{{ item.nickname }}</div>
-                            <!-- <div class="text">
-                                {{ $t('balance.withdraw') }}{{ item.withdrawAccumulation }} &nbsp;{{
-                                    $t('rank.withdrawRechargeRate')
-                                }}{{ parseInt(item.roi * 100) }}%
+                            <div class="rank-info-left">
+                                <div class="name">{{ item.nickname }}</div>
+                                <!-- <div class="text">
+                                {{ $t('balance.withdraw') }}{{ item.withdrawAccumulation }}&nbsp;
+                                {{ $t('rank.withdrawRechargeRate') }}{{ parseInt(item.roi * 100) }}%
                             </div> -->
-                            <div class="text">{{ $t('rank.inviteNum') }}&nbsp;{{ item.juniorCount }}</div>
-                            <div class="more">{{ $t('common.more') }}</div>
+                                <div class="text">{{ $t('rank.inviteNum') }}&nbsp;{{ item.juniorCount }}</div>
+                            </div>
+
+                            <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
                         </div>
                     </div>
                 </div>
@@ -95,20 +117,24 @@
                             <div class="cell-title" :class="[`level_` + index]">
                                 <span>
                                     <span>{{ item.name }}</span>
+                                    <img class="title-bg" src="@/assets/title-bg.png" alt="" />
                                 </span>
                             </div>
                         </template>
                         <template #right-icon>
-                            <img src="../assets/icon_inter.png" alt="" class="right-icon" />
+                            <ion-icon class="right-icon" :icon="intoIcon"></ion-icon>
                         </template>
                     </van-cell>
 
                     <div class="second">
                         <van-image @click="goList(item)" :src="item.cover" fit="scale-down" />
 
-                        <img class="second-btn" v-if="index === 0" src="../assets/TUTORIAL.png" alt="" />
+                        <!-- <img class="second-btn" v-if="index === 0" src="../assets/TUTORIAL.png" alt="" /> -->
 
-                        <div class="status hot" v-if="getStatus(item) === '抢购中'">
+                        <div
+                            class="status hot animate__animated animate__tada animate__infinite"
+                            v-if="getStatus(item) === '抢购中'"
+                        >
                             <img src="../assets/info_icon_qianggouzhong.png" alt="" />
                             <span>{{ $t('product.hot') }}</span>
                         </div>
@@ -144,6 +170,7 @@
 </template>
 
 <script setup>
+import '@/styles/animate.css'
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/swiper.min.css'
 import 'swiper/swiper-bundle.min.css'
@@ -151,10 +178,7 @@ import SwiperCore, { Pagination, Autoplay, Parallax, Controller } from 'swiper'
 import { useRouter, useRoute } from 'vue-router'
 import { ref, getCurrentInstance, onMounted, watch } from 'vue'
 
-import swiperImg from '../assets/bg.png'
-import firstImg from '../assets/p1.png'
-import secondImg from '../assets/bg2.png'
-import thirdImg from '../assets/bg3.png'
+import intoIcon from '@/assets/svgs/icon_inter.svg'
 
 import productInfo from '../components/ProductInfo.vue'
 import { isAfter, isBefore, parse, getYear, getMonth, getDate, addDays, getTime } from 'date-fns'
@@ -234,6 +258,12 @@ const goList = info => {
     }
 }
 
+function goNews() {
+    router.push({
+        name: 'news'
+    })
+}
+
 onMounted(() => {
     // toast.loading({
     //     message: '加载中...',
@@ -246,10 +276,21 @@ onMounted(() => {
     getNotice()
 })
 
-const notice = ref('')
+const news = ref([])
 function getNotice() {
-    http.get('/sysConfig/get/notice').then(res => {
-        notice.value = res.value
+    http.post(
+        '/article/all',
+        {
+            query: {
+                del: false
+            },
+            sort: 'id,desc',
+            size: 5,
+            page: 0
+        },
+        { body: 'json' }
+    ).then(res => {
+        news.value = res.content
     })
 }
 
@@ -309,21 +350,70 @@ function goRank() {
     }
 }
 
-.van-notice-bar {
-    margin: 16px 20px 14px;
-    --van-notice-bar-font-size: 13px;
-    border-radius: 4px;
-    --van-notice-bar-text-color: rgba(var(--ion-color-light-contrast-rgb), 0.4);
-    .bar-icon {
-        width: 77px;
-        height: 16px;
+.tutorial-btn {
+    position: absolute;
+    top: 50.2vw;
+    width: 90px;
+    display: block;
+    z-index: 20;
+    left: 50%;
+    margin-left: -45px;
+}
+.notice-box {
+    position: absolute;
+    top: calc(56.2vw + 12px);
+    left: 20px;
+    right: 20px;
+    z-index: 20;
+    background: linear-gradient(#dfffcd 0%, #91fac5 48%, #39f3bb 100%);
+    border-radius: 8px;
+    padding: 1px;
+    .van-notice-bar {
+        --van-notice-bar-font-size: 13px;
+        border-radius: 4px;
+        border-radius: 8px;
+        --van-notice-bar-text-color: rgba(var(--ion-color-light-contrast-rgb), 0.4);
+        --van-notice-bar-height: 42px;
+        --van-notice-bar-background: #111111;
+        .bar-icon {
+            height: 16px;
+            display: block;
+        }
+
+        .driver {
+            width: 1px;
+            height: 10px;
+            background: rgba(var(--ion-color-light-contrast-rgb), 0.2);
+            margin: 0 8px 0 9px;
+        }
+    }
+
+    :deep(.van-notice-bar__content) {
+        width: 100%;
     }
+    .notice-swipe {
+        height: 42px;
+        color: #9fbfb1;
+        width: 100%;
+        :deep(.van-swipe-item) {
+            .f();
+        }
+        .notic-news {
+            background-color: #37363619;
+            flex-grow: 1;
+            overflow: hidden;
+            .f();
+            justify-content: space-between;
+            padding-left: 8px;
+            .right-icon {
+                width: 24px;
+                height: 24px;
+            }
 
-    .driver {
-        width: 1px;
-        height: 10px;
-        background: rgba(var(--ion-color-light-contrast-rgb), 0.2);
-        margin: 0 8px 0 9px;
+            .van-ellipsis {
+                width: calc(100% - 36px);
+            }
+        }
     }
 }
 
@@ -331,48 +421,48 @@ function goRank() {
     --van-cell-background: var(--ion-background-color);
     --van-cell-horizontal-padding: 20px;
     --van-cell-text-color: var(--ion-color-step-800);
-    --van-cell-value-color: #60616d;
+    --van-cell-value-color: #9fbfb1;
     --van-cell-text-color: var(--ion-text-color) .f();
     .van-cell__title {
         font-size: 16px;
         font-family: TsangerYuMo;
         flex-shrink: 0;
         white-space: nowrap;
-
         .cell-title > span {
             position: relative;
             span {
                 position: relative;
                 z-index: 1;
+                color: transparent;
+                background: linear-gradient(90deg, #dfffcd 0%, #90f9c4 48%, #39f3bb 100%);
+                -webkit-background-clip: text;
+                text-align: left;
             }
-            &::after {
-                content: '';
+            .title-bg {
+                width: 100%;
+                height: 10px;
                 position: absolute;
-                height: 6px;
-                background: #45ab18;
-                bottom: 0;
                 left: 0;
-                right: 0;
+                bottom: 0;
                 z-index: 0;
             }
-        }
-
-        .level_1 > span {
-            &::after {
-                background: #00b5b5;
-            }
-        }
-
-        .level_2 > span {
-            &::after {
-                background: #d50f7a;
-            }
+            // &::after {
+            //     content: '';
+            //     position: absolute;
+            //     height: 6px;
+            //     background: #45ab18;
+            //     bottom: 0;
+            //     left: 0;
+            //     right: 0;
+            //     z-index: 0;
+            // }
         }
     }
 
     .right-icon {
         width: 24px;
         height: 24px;
+        color: #9fbfb1;
     }
 }
 .first {
@@ -392,8 +482,8 @@ function goRank() {
 .status {
     .f();
     padding: 2px 6px;
-    background: #5c4cff;
-    border-radius: 2px 0px 2px 0px;
+    background: #5d7368;
+    border-radius: 8px 0px 8px 0px;
     position: absolute;
     top: 0;
     left: 0;
@@ -418,13 +508,13 @@ function goRank() {
     }
 
     &.hot {
-        background: var(--red);
+        background: linear-gradient(90deg, #f9d423 0%, #ff4e50 100%);
     }
 }
 
 .second {
     margin: 4px 20px 14px;
-    border-radius: 4px;
+    border-radius: 8px;
     overflow: hidden;
     position: relative;
     .van-image {
@@ -478,21 +568,20 @@ function goRank() {
 }
 
 .rank-content {
-    background: linear-gradient(85deg, #0741c3 0%, #8a03d3 100%);
-    border-radius: 2px;
-    height: 81px;
+    height: 76px;
     margin: 2px 20px 10px;
     position: relative;
     .f();
     justify-content: center;
+    margin-top: 33px;
 
     .rank-bg {
         height: 75px;
-        width: calc(100% - 8px);
         display: block;
         position: absolute;
-        top: 3px;
-        left: 4px;
+        width: 100%;
+        top: 0px;
+        left: 0px;
         z-index: 0;
     }
 
@@ -505,27 +594,54 @@ function goRank() {
     }
 }
 .rank-list {
-    padding: 6px 18px;
+    padding: 9px 12px;
     animation: goDown linear 20s infinite;
+    .rank-info + .rank-info {
+        margin-top: 6px;
+    }
 }
 .rank-info {
     .f();
-    padding: 6px 0;
+
+    .rank-info-left {
+        .f();
+        flex-grow: 1;
+        padding: 4px 12px 3px;
+        background-color: #1c1c1c19;
+    }
+
+    .right-icon {
+        width: 24px;
+        height: 24px;
+        color: #1c1c1c;
+        margin-left: 10px;
+    }
     .name {
         font-size: 13px;
-        color: var(--ion-text-color);
-        line-height: 18px;
+        color: #1c1c1c;
+        line-height: 20px;
         width: 50px;
         flex-shrink: 0;
-        margin-right: 12px;
+        // margin-right: 12px;
+        font-weight: bold;
     }
     .text {
         font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #f0ff00;
-        line-height: 18px;
+        color: #1c1c1c;
+        line-height: 20px;
         flex-grow: 1;
+        font-weight: bold;
+        position: relative;
+        padding-left: 14px;
+        &::before {
+            content: '';
+            position: absolute;
+            width: 1px;
+            height: 10px;
+            left: 0;
+            top: 5px;
+            background: #1c1c1c;
+        }
     }
 
     .more {

+ 8 - 4
src/views/NewsPage.vue

@@ -1,7 +1,14 @@
 <template>
     <ion-page>
+        <ion-header>
+            <ion-toolbar>
+                <ion-buttons slot="start">
+                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
+                </ion-buttons>
+                <ion-title>{{ $t('common.news') }}</ion-title>
+            </ion-toolbar>
+        </ion-header>
         <ion-content>
-            <div style="height: var(--ion-safe-area-top)"></div>
             <van-list
                 class="list"
                 v-model:loading="loading"
@@ -53,9 +60,6 @@ function detail(item) {
 </script>
 
 <style lang="less" scoped>
-.list {
-    padding-top: var(--ion-safe-area-top, 0);
-}
 .news-info {
     .f();
     align-items: stretch;

+ 35 - 27
src/views/TabsPage.vue

@@ -4,23 +4,23 @@
             <ion-router-outlet></ion-router-outlet>
             <ion-tab-bar slot="bottom">
                 <ion-tab-button tab="home" href="/home">
-                    <ion-icon :icon="activeTab === 'home' ? tabIconHomePre : tabIconHome" />
+                    <img class="tab-icon1" :src="activeTab === 'home' ? tabIconHomePre : tabIconHome" />
                     <ion-label>{{ $t('common.home') }}</ion-label>
                 </ion-tab-button>
 
-                <ion-tab-button tab="news" href="/news">
-                    <ion-icon :icon="activeTab === 'news' ? tabIconNewsPre : tabIconNews" />
-                    <ion-label>{{ $t('common.news') }}</ion-label>
+                <ion-tab-button tab="BLF" href="/BLF">
+                    <img class="tab-icon1" :src="activeTab === 'BLF' ? tabIconBlfPre : tabIconBlf" />
+                    <ion-label>BLF</ion-label>
                 </ion-tab-button>
-                <ion-tab-button tab="rank" href="/rank">
+                <ion-tab-button class="bigTab" tab="rank" href="/rank">
                     <img :src="tabIconRank" class="tab-icon" alt="" />
                 </ion-tab-button>
                 <ion-tab-button tab="distribution" href="/distribution1">
-                    <ion-icon :icon="activeTab === 'distribution' ? tabIconProfitPre : tabIconProfit" />
+                    <img class="tab-icon1" :src="activeTab === 'distribution' ? tabIconProfitPre : tabIconProfit" />
                     <ion-label>{{ $t('common.profit') }}</ion-label>
                 </ion-tab-button>
                 <ion-tab-button tab="mine" href="/mine">
-                    <ion-icon :icon="activeTab === 'mine' ? tabIconMinePre : tabIconMine" />
+                    <img class="tab-icon1" :src="activeTab === 'mine' ? tabIconMinePre : tabIconMine" />
                     <ion-label>{{ $t('common.mine') }}</ion-label>
                 </ion-tab-button>
             </ion-tab-bar>
@@ -30,22 +30,22 @@
 <script setup>
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
-import tabIconHome from '@/assets/tabbar_icon_home.svg'
-import tabIconHomePre from '@/assets/tabbar_icon_home_pre.svg'
-import tabIconNews from '@/assets/tabbar_icon_news.svg'
-import tabIconNewsPre from '@/assets/tabbar_icon_news_pre.svg'
+import tabIconHome from '@/assets/tabbar_icon_home.png'
+import tabIconHomePre from '@/assets/tabbar_icon_home_pre.png'
+import tabIconBlf from '@/assets/tabbar_icon_blf.png'
+import tabIconBlfPre from '@/assets/tabbar_icon_blf_pre.png'
 import tabIconRank from '../assets/tabbar_icon_rank.png'
-import tabIconProfit from '@/assets/tabbar_icon_profit.svg'
-import tabIconProfitPre from '@/assets/tabbar_icon_profit_pre.svg'
-import tabIconMine from '@/assets/tabbar_icon_mine.svg'
-import tabIconMinePre from '@/assets/tabbar_icon_mine_pre.svg'
+import tabIconProfit from '@/assets/tabbar_icon_profit.png'
+import tabIconProfitPre from '@/assets/tabbar_icon_profit_pre.png'
+import tabIconMine from '@/assets/tabbar_icon_mine.png'
+import tabIconMinePre from '@/assets/tabbar_icon_mine_pre.png'
 
 const route = useRoute()
 const activeTab = ref(null)
 if (route.path === '/home') {
     activeTab.value = 'home'
-} else if (route.path == '/news') {
-    activeTab.value = 'news'
+} else if (route.path == '/BLF') {
+    activeTab.value = 'BLF'
 } else if (route.path == '/rank') {
     activeTab.value = 'rank'
 } else if (route.path == '/distribution1') {
@@ -57,8 +57,8 @@ const tabChange = tabInfo => {
     if (tabInfo.tab === 'home') {
         activeTab.value = 'home'
     }
-    if (tabInfo.tab === 'news') {
-        activeTab.value = 'news'
+    if (tabInfo.tab === 'BLF') {
+        activeTab.value = 'BLF'
     }
     if (tabInfo.tab === 'rank') {
         activeTab.value = 'rank'
@@ -80,8 +80,12 @@ ion-tab-bar {
 }
 ion-tab-button {
     --color: var(--ion-color-step-400);
-    --color-selected: var(--ion-text-color);
+    --color-selected: #42f4bc;
 }
+// .bigTab {
+//     height: 60px;
+//     transform: translateY(-5px);
+// }
 ion-icon {
     width: 28px;
     height: 28px;
@@ -90,12 +94,16 @@ ion-icon {
     width: 56px;
     height: 49px;
 }
-:deep(.tab-selected) {
-    ion-label {
-        color: var(--color-selected);
-        background: linear-gradient(140deg, #fb35ff 0%, #ffcc3d 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-    }
+.tab-icon1 {
+    width: 28px;
+    height: 28px;
 }
+// :deep(.tab-selected) {
+//     ion-label {
+//         color: var(--color-selected);
+//         background: linear-gradient(140deg, #fb35ff 0%, #ffcc3d 100%);
+//         -webkit-background-clip: text;
+//         -webkit-text-fill-color: transparent;
+//     }
+// }
 </style>