1

src/components/PageContainer/index.vue

@@ -362,9 +362,6 @@ const props = defineProps({
 });
 
 const userInfo = ref({})
-if(uni.getStorageSync('user_info')) {
-  userInfo.value = uni.getStorageSync('user_info');
-}
 
 function setUserInfo(info) {
   userInfo.value = info;
@@ -891,6 +888,10 @@ onShow(() => {
   if (token.value) {
     getData();
   }
+  if(uni.getStorageSync('user_info')) {
+    userInfo.value = uni.getStorageSync('user_info');
+  }
+
 })
 
 defineExpose({

src/pages/Tabbar/Home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <PageContainer>
+  <PageContainer style="background: linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)), url('/static/images/enter-bg.png') no-repeat; background-size: cover;">
     <z-paging
         ref="pagingRef"
         @query="onQuery"
@@ -36,8 +36,8 @@
           </view>
         </scroll-view>
 
-        <view style="display: flex">
-          <u-notice-bar style="margin-top: 10px" mode="horizontal" :list="[
+        <view style="display: flex;align-items: center;margin-top: 10px">
+          <u-notice-bar mode="horizontal" :list="[
             'F1bet国际官宣：请认准官网F1bet.cc 永久网址：F1bet.cc',
         ]"></u-notice-bar>
           <view class="url-right-badge">
@@ -109,7 +109,7 @@
 
                   <view class="match-teams-container">
                     <view class="team-block">
-                      <u-image :src="item.home_team_logo" width="36px" height="36px" shape="circle"></u-image>
+                      <u-image :src="item.home_team_logo" width="32px" height="32px" shape="circle"></u-image>
                       <view class="team-name-group">
                         <text class="team-name">{{ locale === 'zh' ? item.home_team : item.home_team_en }}</text>
                         <text class="tag-home">{{ t('主') }}</text>
@@ -122,7 +122,7 @@
                     </view>
 
                     <view class="team-block">
-                      <u-image :src="item.guest_team_logo" width="36px" height="36px" shape="circle"></u-image>
+                      <u-image :src="item.guest_team_logo" width="32px" height="32px" shape="circle"></u-image>
                       <view class="team-name-group">
                         <text class="team-name">{{ locale === 'zh' ? item.guest_team : item.guest_team_en }}</text>
                         <text class="tag-away">{{ t('客') }}</text>
@@ -169,13 +169,22 @@
           <view class="roll-ball-header">
             <view class="header-left">
               <u-image src="/static/images/Home/cp1.png" width="20px" height="20px"></u-image>
-              <text class="roll-ball-title">{{ t('彩票开奖') }}</text>
+              <text class="roll-ball-title">{{ t('彩票') }}</text>
             </view>
             <view class="more-roll-btn" @click="toLottery">
               <text class="more-text">{{ t('更多') }} >></text>
             </view>
           </view>
 
+          <scroll-view scroll-x class="lottery-games-scroll" :show-scrollbar="false">
+            <view class="lottery-games-flex">
+              <view class="lottery-game-item" v-for="(item, index) in lotteryGames" :key="index" @click="handleLotteryGameClick(item)">
+                <u-image :src="item.icon" width="56px" height="56px" mode="aspectFit"></u-image>
+                <text class="lottery-game-name">{{ item.name }}</text>
+              </view>
+            </view>
+          </scroll-view>
+
           <scroll-view scroll-x class="lottery-scroll" :show-scrollbar="false">
             <view class="lottery-flex">
               <template v-if="skeletonLoading">
@@ -341,7 +350,7 @@
 import { ref, watch, onMounted, computed, onUnmounted } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import { useI18n } from "vue-i18n";
-import { getActivity, getBanner, getSportSchedule, getUserInfo, GetLastLottery } from "@/request/api.js";
+import { getActivity, getBanner, getSportSchedule, getUserInfo, GetLastLottery, indexSportCount } from "@/request/api.js";
 import { useOrderStore } from "@/store/bettingSheet.js";
 import { useWebsocketDataStore } from "@/store/websocketData";
 import { formatRange } from "@/utils";
@@ -354,7 +363,6 @@ const orderStore = useOrderStore();
 const WebsocketData = useWebsocketDataStore();
 const pagingRef = ref(null);
 
-// 域名后缀切换效果
 const baseDomain = 'F1bet';
 const suffixList = ['.cc', '.vip', '.com', '.net'];
 const currentSuffixIndex = ref(0);
@@ -364,7 +372,7 @@ let suffixTimer = null;
 onMounted(() => {
   suffixTimer = setInterval(() => {
     currentSuffixIndex.value = (currentSuffixIndex.value + 1) % suffixList.length;
-  }, 2500); // 2.5秒切换一次后缀
+  }, 2500);
 });
 
 onUnmounted(() => {
@@ -381,6 +389,23 @@ const skeletonLoading = ref(true);
 
 const lotteryHistory = ref([]);
 
+// 新增的彩票分类数据
+const lotteryGames = ref([
+  { name: '极速赛车', icon: '/static/images/Home/JSSC.png',  route: { name: 'Lottery', query: { type: 1, title: '极速赛车', game_type: 7 } } },
+  { name: '极速快3', icon: '/static/images/Home/JSK3.png',route: { name: 'Lottery', query: { type: 7, title: 'SG快3', game_type: 13 } } },
+  { name: '极速六合彩', icon: '/static/images/Home/JSLHC.png',  route: { name: 'SpeedDigital' } },
+  { name: '澳门六合彩', icon: '/static/images/Home/AMLHC.png', route: { name: 'Digital' }  },
+  { name: '香港六合彩', icon: '/static/images/Home/XGLHC.png', route: { name: 'HKDigital' } }
+]);
+
+// 彩票分类点击事件
+const handleLotteryGameClick = (item) => {
+  if (item.route) {
+
+    router.push(item.route);
+  }
+};
+
 const otherGamesList = ref([
   {
     title: '视讯',
@@ -452,8 +477,8 @@ const handleCategoryClick = (item) => {
 };
 
 const sportsBalls = ref([
-  { id: 1, name: '乒乓球', icon: '/static/images/Home/10006.avif', count: 11, path: '/pages/Tabbar/Sports/index' },
   { id: 2, name: '足球', icon: '/static/images/Home/10001.avif', count: 11, path: '/pages/Tabbar/SportsBetting/index' },
+  { id: 1, name: '乒乓球', icon: '/static/images/Home/10006.avif', count: 11, path: '/pages/Tabbar/Sports/index' },
   { id: 3, name: '篮球', icon: '/static/images/Home/10002.avif', count: 11, path: '/pages/Tabbar/Sports/index' },
   { id: 4, name: '排球', icon: '/static/images/Home/10003.avif', count: 8, path: '/pages/Tabbar/Sports/index' },
   { id: 5, name: '板球', icon: '/static/images/Home/10004.avif', count: 21, path: '/pages/Tabbar/Sports/index' },
@@ -551,8 +576,8 @@ const getDiceDots = (num) => {
 };
 
 const toLottery = () => {
-  uni.switchTab({
-    url: '/pages/WorkModule/LotteryDraw/index'
+  uni.navigateTo({
+    url: '/pages/Tabbar/Entertainment/index'
   })
 };
 
@@ -682,7 +707,6 @@ const goDetail = (item) => {
   router.push({ name: 'sportDetail', query: { data_id: item.data_id } });
 };
 const toMoreRollBall = (name) => {
-  // router.push({ name })
   uni.navigateTo({
     url: '/pages/Tabbar/SportsBetting/index'
   })
@@ -765,6 +789,13 @@ const fetchGamblingDataWithFallback = async () => {
 async function onQuery() {
   try {
     skeletonLoading.value = true;
+    indexSportCount().then(res => {
+      sportsBalls.value.forEach((sports) => {
+        if(sports.id === 2) {
+          sports.count = res.data.count
+        }
+      })
+    })
     const [resB1, resB2, resGambling, resLottery] = await Promise.all([
       getActivity({ type: 2 }),
       getBanner({ type: 'app' }),
@@ -866,11 +897,12 @@ onQuery();
   display: flex;
   align-items: center;
   gap: 6px;
+  min-width: 110px;
   background: linear-gradient(180deg, #ffffff 0%, #f0f4f8 100%);
-  border-radius: 20px;
-  padding: 6px 12px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 1);
-  border: 1px solid #e2e8f0;
+  border-radius: 30px;
+  padding: 0 12px;
+  height: 30px;
+  border: 1px solid #eee;
   box-sizing: border-box;
   margin-left: 10px;
 }
@@ -1001,12 +1033,12 @@ onQuery();
 .roll-ball-scroll { width: 100%; white-space: nowrap; }
 .roll-ball-flex { display: flex; flex-direction: row; gap: 12px; padding-bottom: 4px; }
 .match-card {
-  width: 85vw;
+  width: 78vw;
   flex-shrink: 0;
   display: inline-block;
   background: #fff;
   border-radius: 10px;
-  padding: 12px;
+  padding: 10px;
   box-sizing: border-box;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
@@ -1027,10 +1059,9 @@ onQuery();
 .league-name {
   font-size: 12px;
   color: #333;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100px;
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.3;
 }
 .match-time {
   font-size: 11px;
@@ -1069,12 +1100,12 @@ onQuery();
   gap: 4px;
 }
 .team-name {
-  font-size: 12px;
+  font-size: 11px;
   color: #333;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 70px;
+  max-width: 65px;
 }
 .tag-home {
   font-size: 9px;
@@ -1129,7 +1160,7 @@ onQuery();
 
   .locked-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(220, 224, 230, 0.75); z-index: 10; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(1px); }
   .selection-name { font-size: 11px; color: #666; margin-bottom: 2px; }
-  .odds-val { font-size: 13px; font-weight: bold; color: #f8b932; }
+  .odds-val { font-size: 12px; font-weight: bold; color: #f8b932; }
 
   &:active { background-color: #f1f5f9; }
   &.is-active { background-color: #f8b932; border-color: #f8b932; box-shadow: 0 4px 10px rgba(248, 185, 50, 0.3); .selection-name, .odds-val { color: #ffffff; } }
@@ -1138,17 +1169,41 @@ onQuery();
   &.odds-down .odds-val { color: #f56c6c !important; transition: color 0.3s; }
 }
 
+/* 彩票开奖新增分类横向滚动 */
+.lottery-games-scroll {
+  width: 100%;
+  white-space: nowrap;
+  margin-bottom: 12px;
+}
+.lottery-games-flex {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  padding: 4px 0;
+}
+.lottery-game-item {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 6px;
+}
+.lottery-game-name {
+  font-size: 12px;
+  color: #333;
+}
+
 /* 彩票开奖卡片样式 */
 .lottery-scroll { width: 100%; white-space: nowrap; }
 .lottery-flex { display: flex; flex-direction: row; gap: 12px; padding-bottom: 4px; }
 .lottery-card {
-  width: 85vw;
+  width: 78vw;
   flex-shrink: 0;
   display: inline-block;
   white-space: normal;
   background: #fff;
   border-radius: 10px;
-  padding: 16px;
+  padding: 12px;
   box-sizing: border-box;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
@@ -1164,11 +1219,11 @@ onQuery();
   align-items: center;
   gap: 8px;
 }
-.lottery-name { font-size: 15px; font-weight: bold; color: #333; }
-.lottery-issue { font-size: 12px; color: #e54d42; font-weight: 500; }
-.header-right-col .lottery-time { font-size: 12px; color: #999; }
+.lottery-name { font-size: 14px; font-weight: bold; color: #333; }
+.lottery-issue { font-size: 11px; color: #e54d42; font-weight: 500; }
+.header-right-col .lottery-time { font-size: 11px; color: #999; }
 
-/* 玩法区块样式 */
+/* 玩法区块样式缩放 */
 .play-container { margin-top: 10px; }
 
 /* PC28样式 */
@@ -1178,28 +1233,28 @@ onQuery();
   margin-bottom: 12px;
 }
 .grey-ball {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   background-color: #f5f5f5;
   color: #333;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: bold;
   border: 1px solid #eee;
 }
 .red-sum-ball {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
   background-color: #f75b5b;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: bold;
   box-shadow: 0 2px 4px rgba(247, 91, 91, 0.3);
 }
@@ -1208,72 +1263,72 @@ onQuery();
 .lhc-row { display: flex; align-items: center; gap: 6px; }
 .lhc-col { display: flex; flex-direction: column; align-items: center; gap: 4px; }
 .lhc-ball {
-  width: 30px;
-  height: 30px;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
   background-color: #fff;
   color: #333;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: bold;
-  border: 3px solid transparent;
+  border: 2px solid transparent;
   box-sizing: border-box;
 }
 .color-red { border-color: #f75b5b; }
 .color-blue { border-color: #49b3ff; }
 .color-green { border-color: #40b17b; }
-.lhc-zodiac { font-size: 11px; color: #666; }
+.lhc-zodiac { font-size: 10px; color: #666; }
 
 /* 赛车/飞艇 方块样式 */
-.blocks-row { display: flex; flex-wrap: wrap; gap: 5px; }
+.blocks-row { display: flex; flex-wrap: wrap; gap: 4px; }
 .square-block {
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
   border-radius: 4px;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 13px;
+  font-size: 12px;
   font-weight: bold;
 }
 
 /* 常规球样式 (时时彩等) */
-.balls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.balls-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
 .ball {
-  width: 28px;
-  height: 28px;
+  width: 26px;
+  height: 26px;
   border-radius: 50%;
   background-color: #e54d42;
   color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 /* 骰子样式 */
-.dice-row { display: flex; flex-wrap: wrap; gap: 10px; }
+.dice-row { display: flex; flex-wrap: wrap; gap: 8px; }
 .dice {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   background-color: #fff;
   border: 1px solid #e0e0e0;
   border-radius: 6px;
-  padding: 4px;
+  padding: 2px;
   box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05);
   box-sizing: border-box;
 }
 .dot {
-  width: 6px;
-  height: 6px;
+  width: 5px;
+  height: 5px;
   border-radius: 50%;
   background-color: transparent;
   place-self: center;
@@ -1284,7 +1339,7 @@ onQuery();
 /* 符号 */
 .operator {
   color: #999;
-  font-size: 16px;
+  font-size: 14px;
   margin: 0 2px;
   font-weight: 500;
   align-self: flex-start;
@@ -1295,9 +1350,9 @@ onQuery();
 .tags-row { display: flex; flex-wrap: wrap; gap: 6px; }
 .mt-tags { margin-top: 8px; }
 .combo-tag {
-  padding: 2px 8px;
+  padding: 2px 6px;
   border-radius: 4px;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: bold;
   color: #fff;
 }

src/request/api.js

@@ -668,3 +668,7 @@ export const gameConfig = (params) => {
 export const lhcOrderRefund = (params) => {
     return request.get('/lhcOrder/refund', { params });
 };
+
+export const indexSportCount = (params) => {
+    return request.get('/index/sportCount', { params });
+};