新增：首页列表

src/components/MarketCard.vue

@@ -1,58 +1,55 @@
 <template>
   <v-card class="market-card" elevation="0" :rounded="'lg'">
-    <!-- Market Image -->
+    <div class="market-card-content">
-    <v-avatar class="market-image" :size="40" :color="'#f0f0f0'" :rounded="'sm'">
+      <!-- Top Section -->
-      <!-- Placeholder for market image -->
+      <div class="top-section">
-    </v-avatar>
+        <!-- Market Image and Title -->
+        <div class="image-title-container">
+          <v-avatar class="market-image" :size="40" :color="'#f0f0f0'" :rounded="'sm'">
+            <!-- Placeholder for market image -->
+          </v-avatar>
+          <v-card-title class="market-title" :text="true" :shrink="true">
+            {{ marketTitle }}
+          </v-card-title>
+        </div>
 
-    <!-- Market Title -->
+        <!-- Chance Container -->
-    <v-card-title class="market-title" :text="true" :shrink="true">
+        <div class="chance-container">
-      {{ marketTitle }}
+          <v-progress-circular
-    </v-card-title>
+            class="progress-bar"
+            :size="60"
+            :width="4"
+            :value="chanceValue"
+            :color="progressColor"
+            :background="'#e0e0e0'"
+          >
+            <template v-slot:default>
+              <span class="chance-value">{{ chanceValue }}%</span>
+            </template>
+          </v-progress-circular>
+          <span class="chance-label">chance</span>
+        </div>
+      </div>
 
-    <!-- Chance Container -->
+      <!-- Options Section -->
-    <div class="chance-container">
+      <div class="options-section">
-      <v-progress-circular
+        <v-btn class="option-yes" :color="'#e6f9e6'" :rounded="'sm'" :text="true">
-        class="progress-bar"
+          <span class="option-text-yes">Yes</span>
-        :size="60"
+        </v-btn>
-        :width="4"
+        <v-btn class="option-no" :color="'#ffe6e6'" :rounded="'sm'" :text="true">
-        :value="chanceValue"
+          <span class="option-text-no">No</span>
-        :color="progressColor"
+        </v-btn>
-        :background="'#e0e0e0'"
+      </div>
-      >
+
-        <template v-slot:default>
+      <!-- Bottom Section -->
-          <span class="chance-value">{{ chanceValue }}%</span>
+      <div class="bottom-section">
-        </template>
+        <span class="market-info">{{ marketInfo }}</span>
-      </v-progress-circular>
+        <div class="icons-container">
-      <span class="chance-label">chance</span>
+          <v-icon class="gift-icon" size="16">mdi-gift</v-icon>
+          <v-icon class="bookmark-icon" size="16">mdi-bookmark</v-icon>
+        </div>
+      </div>
     </div>
-
-    <!-- Options -->
-    <v-btn
-      class="option-yes"
-      :width="140"
-      :height="40"
-      :color="'#e6f9e6'"
-      :rounded="'sm'"
-      :text="true"
-    >
-      <span class="option-text-yes">Yes</span>
-    </v-btn>
-    <v-btn
-      class="option-no"
-      :width="140"
-      :height="40"
-      :color="'#ffe6e6'"
-      :rounded="'sm'"
-      :text="true"
-    >
-      <span class="option-text-no">No</span>
-    </v-btn>
-
-    <!-- Market Info -->
-    <span class="market-info">{{ marketInfo }}</span>
-    <v-icon class="gift-icon" size="16">mdi-gift</v-icon>
-    <v-icon class="bookmark-icon" size="16">mdi-bookmark</v-icon>
   </v-card>
 </template>
 
@@ -90,20 +87,38 @@ const progressColor = computed(() => {
   background-color: #ffffff;
   border-radius: 8px;
   border: 1px solid #e7e7e7;
+  padding: 12px;
+}
+
+.market-card-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 12px;
+}
+
+/* Top Section */
+.top-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.image-title-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
 }
 
 .market-image {
-  position: absolute;
+  flex-shrink: 0;
-  left: 12px;
-  top: 12px;
 }
 
 .market-title {
-  position: absolute;
+  flex: 1;
-  left: 60px;
+  min-width: 0;
-  top: 12px;
-  width: 180px;
-  max-height: 32px;
   font-family: 'Inter', sans-serif;
   font-size: 14px;
   font-weight: 500;
@@ -116,14 +131,12 @@ const progressColor = computed(() => {
 }
 
 .chance-container {
-  position: absolute;
-  left: 248px;
-  top: 10px;
-  width: 60px;
-  height: 60px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  flex-shrink: 0;
+  width: 60px;
+  height: 60px;
 }
 
 .progress-bar {
@@ -145,11 +158,16 @@ const progressColor = computed(() => {
   margin-top: 4px;
 }
 
+/* Options Section */
+.options-section {
+  display: flex;
+  gap: 12px;
+}
+
 .option-yes {
-  position: absolute;
+  flex: 1;
-  left: 12px;
-  top: 72px;
   background-color: #e6f9e6;
+  height: 40px;
 }
 
 .option-text-yes {
@@ -160,10 +178,9 @@ const progressColor = computed(() => {
 }
 
 .option-no {
-  position: absolute;
+  flex: 1;
-  left: 158px;
-  top: 72px;
   background-color: #ffe6e6;
+  height: 40px;
 }
 
 .option-text-no {
@@ -173,27 +190,31 @@ const progressColor = computed(() => {
   color: #ff0000;
 }
 
+/* Bottom Section */
+.bottom-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: auto;
+}
+
 .market-info {
-  position: absolute;
-  left: 12px;
-  top: 124px;
   font-family: 'Inter', sans-serif;
   font-size: 12px;
   font-weight: normal;
   color: #808080;
 }
 
+.icons-container {
+  display: flex;
+  gap: 16px;
+}
+
 .gift-icon {
-  position: absolute;
-  left: 240px;
-  top: 124px;
   color: #808080;
 }
 
 .bookmark-icon {
-  position: absolute;
-  left: 270px;
-  top: 124px;
   color: #808080;
 }
 </style>

src/views/Home.vue

@@ -1,47 +1,27 @@
 <template>
   <v-container class="home-container">
-    <v-row justify="center" align="center" class="home-header">
+    <v-row justify="center" align="center" class="home-tabs">
-      <h1 class="home-title">PolyMarket</h1>
+      <v-tabs v-model="activeTab" class="home-tab-bar">
-    </v-row>
+        <v-tab value="overview">Market Overview</v-tab>
-    
+        <v-tab value="trending">Trending</v-tab>
-    <v-row justify="center" align="center" class="home-subtitle">
+        <v-tab value="portfolio">Portfolio</v-tab>
-      <p>Welcome to PolyMarket - Your Gateway to Decentralized Trading</p>
+      </v-tabs>
-    </v-row>
-    
-    <v-row justify="center" align="center" class="home-content">
-      <v-col cols="12" md="8" lg="6">
-        <v-card class="home-card">
-          <v-card-title>Market Overview</v-card-title>
-          <v-card-text>
-            <p>Explore the latest market data and trading opportunities.</p>
-            <v-btn
-              class="home-btn"
-              color="primary"
-              @click="navigateToTrade"
-            >
-              Go to Trading
-            </v-btn>
-          </v-card-text>
-        </v-card>
-      </v-col>
     </v-row>
+    <div class="home-list">
+      <MarketCard v-for="value in 30" :key="value"></MarketCard>
+    </div>
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+import { ref } from 'vue'
+import MarketCard from '../components/MarketCard.vue'
 
-const router = useRouter()
+const activeTab = ref('overview')
-
-const navigateToTrade = () => {
-  // Navigate to trade page (we'll add this route later)
-  console.log('Navigate to trade page')
-}
 </script>
 
 <style scoped>
 .home-container {
-  padding: 40px 20px;
   min-height: 100vh;
 }
 
@@ -56,6 +36,20 @@ const navigateToTrade = () => {
   margin: 0;
 }
 
+.home-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+/* When only one column fits */
+@media (max-width: 600px) {
+  .home-list > div {
+    flex: 1 1 100%;
+  }
+}
+
 .home-subtitle {
   margin-bottom: 40px;
 }
@@ -66,10 +60,22 @@ const navigateToTrade = () => {
   margin: 0;
 }
 
-.home-content {
+.home-tabs {
   margin-top: 40px;
 }
 
+.home-tab-bar {
+  position: fixed;
+  top: 64px; /* Adjust based on app bar height */
+  left: 0;
+  transform: none;
+  width: 100%;
+  z-index: 10;
+  background-color: white;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
 .home-card {
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
@@ -77,12 +83,6 @@ const navigateToTrade = () => {
   text-align: center;
 }
 
-.home-card-title {
-  font-size: 1.5rem;
-  font-weight: 500;
-  margin-bottom: 16px;
-}
-
 .home-card-text {
   margin-bottom: 24px;
 }
@@ -90,4 +90,20 @@ const navigateToTrade = () => {
 .home-btn {
   margin-top: 16px;
 }
+
+.market-card-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 20px;
+  padding: 20px 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+/* Mobile view */
+@media (max-width: 600px) {
+  .market-card-container {
+    grid-template-columns: 1fr;
+  }
+}
 </style>