Skip to content

市场页面初步开发 #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
scarecrowQoQ merged 1 commit into from
Dec 4, 2024
Merged

市场页面初步开发 #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@ import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
<header>
<div class="wrapper">
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/login">Login</RouterLink>
<RouterLink to="/market">Market</RouterLink>
<RouterLink to="/personal">personal</RouterLink>
</nav>
</div>
</header>
<!-- <header>-->
<!-- <div class="wrapper">-->
<!-- <nav>-->
<!-- <RouterLink to="/">Home</RouterLink>-->
<!-- <RouterLink to="/login">Login</RouterLink>-->
<!-- <RouterLink to="/market">Market</RouterLink>-->
<!-- <RouterLink to="/personal">personal</RouterLink>-->
<!-- </nav>-->
<!-- </div>-->
<!-- </header>-->

<RouterView />
</template>
Expand Down
7 changes: 5 additions & 2 deletions src/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@
box-sizing: border-box;
}

p, span{
*{
margin: 0 ;
padding: 0;
}

input{
border: none;
outline: none;
}

a,
.green {
Expand Down
60 changes: 60 additions & 0 deletions src/components/market/MarketCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<script lang="ts" setup>
import { MarketData } from '@/type/market/Market.ts';

Check failure on line 2 in src/components/market/MarketCard.vue

View workflow job for this annotation

GitHub Actions / build 

'MarketData' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.

// 使用 defineProps 来定义组件的 props
const props = defineProps<{
marketData: MarketData;
}>();
</script>

<template>
<div class="market-card">
<div class="top-picture" :style="{ backgroundImage: `url(${props.marketData.cover})` }"></div>
<div class="title">
{{ props.marketData.title }}
</div>
<div class="info">
{{ props.marketData.info }}

Check failure on line 17 in src/components/market/MarketCard.vue

View workflow job for this annotation

GitHub Actions / build 

Property 'info' does not exist on type 'MarketData'.
</div>
<div class="bottom-btn">
<span>View Product -></span>

</div>
</div>
</template>

<style scoped>
.market-card {
width: 100%;
height: 100%;
}
.top-picture {
width: 100%;
height: 45%;
background-size: auto; /* 保持图片原始大小 */
background-position: center; /* 图片居中显示 */
background-repeat: no-repeat; /* 防止图片重复 */
}

.title {
width: 100%;
height: 20%;
padding: 10px;
font-size: 24px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.info {
width: 100%;
height: 20%;
padding: 10px;
font-size: 18px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.bottom-btn{
display: flex;
align-items: center; /* 垂直居中（可选） */
width: 100%;
height: 15%;

}
</style>
6 changes: 6 additions & 0 deletions src/type/market/Market.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export interface MarketData {
title: string;
description: string;
price: number;
cover: string;
}
80 changes: 80 additions & 0 deletions src/views/market/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,91 @@
<script setup lang="ts">
import marketCard from '@/components/market/MarketCard.vue'
import {reactive} from "vue";
const searchParam = reactive({
searchWord: null
})

// 创建 15 条模拟数据
const marketCards = reactive<MarketData[]>([

Check failure on line 9 in src/views/market/index.vue

View workflow job for this annotation

GitHub Actions / build 

Cannot find name 'MarketData'.
{ title: 'Product 1', description: 'Description for product 1', price: 10, cover: '' },
{ title: 'Product 2', description: 'Description for product 2', price: 20, cover: '' },
{ title: 'Product 3', description: 'Description for product 3', price: 30, cover: '' },
{ title: 'Product 4', description: 'Description for product 4', price: 40, cover: '' },
{ title: 'Product 5', description: 'Description for product 5', price: 50, cover: '' },
{ title: 'Product 6', description: 'Description for product 6', price: 60, cover: '' },
{ title: 'Product 7', description: 'Description for product 7', price: 70, cover: '' },
{ title: 'Product 8', description: 'Description for product 8', price: 80, cover: '' },
{ title: 'Product 9', description: 'Description for product 9', price: 90, cover: '' },
{ title: 'Product 10', description: 'Description for product 10', price: 100, cover: '' },
{ title: 'Product 11', description: 'Description for product 11', price: 110, cover: '' },
{ title: 'Product 12', description: 'Description for product 12', price: 120, cover: '' },
{ title: 'Product 13', description: 'Description for product 13', price: 130, cover: '' },
{ title: 'Product 14', description: 'Description for product 14', price: 140, cover: '' },
{ title: 'Product 15', description: 'Description for product 15', price: 150, cover: '' }
]);
</script>

<template>
<div class="market-view">
<div class="top-search-bar">
<input v-model="searchParam.searchWord">
</div>
<div class="center-text">
<p style="font-size: 80px; font-weight: bolder">Market</p>
<p style="margin: 10px; font-size: 25px">Curated products selected for digital design professionals like you.</p>
</div>

<div class="card-list">
<div v-for="(marketCard, index) in marketCards">
<marketCard :market-data="marketCard"></marketCard>
</div>
</div>


</div>
</template>

<style scoped>
.market-view{
width: 100vw;
height: 100vh;
background-color: #f0eae1 ;
overflow: hidden;
}

.top-search-bar{
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中（可选） */
width: 100%;
height: 80px;
}


.top-search-bar input{
width: 50vw;
height: 35px;
margin:0 auto;
border-radius: 15px;
font-size: 20px;
padding: 5px;
background-color: rgba(0,0,0,0.1);
}

.center-text{
text-align: center;
width: 400px;
margin: 0 auto;
margin-top: 5vh;
}

.card-list {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
max-width: calc(4 * 400px + 3 * 20px + 10vw); /* 控制最大宽度以限制列数 */
gap: 20px; /* 元素之间的间隔 */
padding: 0 5vw; /* 左右 padding 为 5vw */
}

</style>
Loading