样式优化

web/apps/web-antd/src/views/match/components/solution_item.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { Tooltip } from 'ant-design-vue';
 import { ref, computed } from 'vue';
 import dayjs from 'dayjs';
 
@@ -244,8 +245,12 @@ const im = computed(() => {
     <div class="score" v-if="currentRelation.stage">[{{ currentRelation.score }}]</div>
     <div class="league-name">{{ currentRelation.leagueName }}</div>
     <div class="date-time">{{ currentRelation.dateTime }}</div>
-    <div class="switch-btns" v-if="solutions.length > 1">
-      <a href="javascript:;" v-for="(solution, index) in solutions" :key="index" :class="{ 'selected': index === currentIndex }" @click="switchSolution(index)">{{ solution.sol.win_average_rate }}</a>
+    <div class="switch-btns" v-if="solutions.length">
+      <Tooltip v-for="({sol}, index) in solutions" :key="index"
+      class="switch-btn-item"
+      :class="{ 'selected': index === currentIndex }"
+      :title="`${sol.win_profit_rate}% (${sol.cross_type})`"
+      @click="switchSolution(index)">{{ sol.win_average_rate }}</Tooltip>
     </div>
   </div>
   <div class="solution-content">
@@ -265,11 +270,11 @@ const im = computed(() => {
       :teamAwayName="im.teamAwayName" :dateTime="im.dateTime" :events="im.events ?? []"
       :selected="im.selected ?? []" />
 
-    <div class="solution-profit" @click="toggleSolution()">
+    <!-- <div class="solution-profit" @click="toggleSolution()">
       <p>{{ currentSolution.sol.win_average_rate }}%</p>
       <p>{{ currentSolution.sol.win_profit_rate }}%</p>
       <p>{{ currentSolution.sol.cross_type }}</p>
-    </div>
+    </div> -->
   </div>
 </div>
 </template>
@@ -330,12 +335,16 @@ const im = computed(() => {
   align-items: center;
   justify-content: flex-end;
   flex: 1;
-  a {
+  :deep(.switch-btn-item) {
     display: block;
     height: 20px;
     line-height: 20px;
     padding: 0 5px;
     border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+      color: hsl(var(--primary));
+    }
     &.selected {
       color: hsl(var(--primary-foreground));
       background-color: hsl(var(--primary));
@@ -351,10 +360,13 @@ const im = computed(() => {
   display: flex;
   .match-card {
     flex: 1;
+  }
+  .match-card:not(:last-child) {
     border-right: 1px solid hsl(var(--border));
   }
 }
 
+/*
 .solution-profit {
   display: flex;
   flex-direction: column;
@@ -362,5 +374,6 @@ const im = computed(() => {
   align-items: center;
   justify-content: center;
 }
+  */
 
 </style>

web/apps/web-antd/src/views/match/solutions/index.vue

@@ -263,7 +263,7 @@ onUnmounted(() => {
         <span>HG</span>
         <span>OB</span>
         <span>IM</span>
-        <em>利润</em>
+        <!-- <em>利润</em> -->
       </div>
     </div>
 
@@ -355,10 +355,10 @@ onUnmounted(() => {
     flex: 1;
   }
 
-  em {
-    width: 80px;
-    font-style: normal;
-  }
+  // em {
+  //   width: 80px;
+  //   font-style: normal;
+  // }
 }
 
 .solution-container {