新增：首页列表
This commit is contained in:
ivan
parent
7ceb5c4e38
commit
bfe52f4db4
@ -1,58 +1,55 @@
|
||||
<template>
|
||||
<v-card class="market-card" elevation="0" :rounded="'lg'">
|
||||
<!-- Market Image -->
|
||||
<v-avatar class="market-image" :size="40" :color="'#f0f0f0'" :rounded="'sm'">
|
||||
<!-- Placeholder for market image -->
|
||||
</v-avatar>
|
||||
<div class="market-card-content">
|
||||
<!-- Top Section -->
|
||||
<div class="top-section">
|
||||
<!-- 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 -->
|
||||
<v-card-title class="market-title" :text="true" :shrink="true">
|
||||
{{ marketTitle }}
|
||||
</v-card-title>
|
||||
<!-- Chance Container -->
|
||||
<div class="chance-container">
|
||||
<v-progress-circular
|
||||
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 -->
|
||||
<div class="chance-container">
|
||||
<v-progress-circular
|
||||
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>
|
||||
<!-- Options Section -->
|
||||
<div class="options-section">
|
||||
<v-btn class="option-yes" :color="'#e6f9e6'" :rounded="'sm'" :text="true">
|
||||
<span class="option-text-yes">Yes</span>
|
||||
</v-btn>
|
||||
<v-btn class="option-no" :color="'#ffe6e6'" :rounded="'sm'" :text="true">
|
||||
<span class="option-text-no">No</span>
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Section -->
|
||||
<div class="bottom-section">
|
||||
<span class="market-info">{{ marketInfo }}</span>
|
||||
<div class="icons-container">
|
||||
<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;
|
||||
left: 12px;
|
||||
top: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.market-title {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 12px;
|
||||
width: 180px;
|
||||
max-height: 32px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
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;
|
||||
left: 12px;
|
||||
top: 72px;
|
||||
flex: 1;
|
||||
background-color: #e6f9e6;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.option-text-yes {
|
||||
@ -160,10 +178,9 @@ const progressColor = computed(() => {
|
||||
}
|
||||
|
||||
.option-no {
|
||||
position: absolute;
|
||||
left: 158px;
|
||||
top: 72px;
|
||||
flex: 1;
|
||||
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>
|
||||
|
||||
@ -1,47 +1,27 @@
|
||||
<template>
|
||||
<v-container class="home-container">
|
||||
<v-row justify="center" align="center" class="home-header">
|
||||
<h1 class="home-title">PolyMarket</h1>
|
||||
</v-row>
|
||||
|
||||
<v-row justify="center" align="center" class="home-subtitle">
|
||||
<p>Welcome to PolyMarket - Your Gateway to Decentralized Trading</p>
|
||||
</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 justify="center" align="center" class="home-tabs">
|
||||
<v-tabs v-model="activeTab" class="home-tab-bar">
|
||||
<v-tab value="overview">Market Overview</v-tab>
|
||||
<v-tab value="trending">Trending</v-tab>
|
||||
<v-tab value="portfolio">Portfolio</v-tab>
|
||||
</v-tabs>
|
||||
</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 navigateToTrade = () => {
|
||||
// Navigate to trade page (we'll add this route later)
|
||||
console.log('Navigate to trade page')
|
||||
}
|
||||
const activeTab = ref('overview')
|
||||
</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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user