Skip to content

Commit f11e8f6

Browse files
scarecrowQoQscarecrowQoQ
authored
Merge pull request #7 from Time-Machine-Lab/market_dev
Market dev
2 parents ffd7318 + 27a818e commit f11e8f6

File tree

7 files changed

+46
-37
lines changed

7 files changed

+46
-37
lines changed

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
<title>OTOW</title>
88
</head>
99
<body>
10-
<div id="app"></div>
10+
<script src="//at.alicdn.com/t/c/font_4773260_zpj4jsw12uc.js"></script>
11+
<div id="app"></div>
1112
<script type="module" src="/src/main.ts"></script>
1213
</body>
1314
</html>

‎src/api/market/type.ts‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/assets/main.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,13 @@ button{
2929
border-radius: 10px;
3030
}
3131

32+
.icon {
33+
width: 1em; height: 1em;
34+
vertical-align: -0.15em;
35+
fill: currentColor;
36+
overflow: hidden;
37+
}
38+
3239
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
3340
@font-face {
3441
font-family: "default";

‎src/components/market/MarketCard.vue‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,16 @@ const props = defineProps<{
1111
<div class="market-card">
1212
<div class="top-picture" :style="{ backgroundImage: `url(${props.marketData.cover})` }"></div>
1313
<div class="title">
14-
{{ props.marketData.title }}
14+
{{ props.marketData.name }}
1515
</div>
1616
<div class="info">
17-
{{ props.marketData.description }}
17+
{{ props.marketData.introduce }}
1818
</div>
1919
<div class="bottom-btn">
20-
<span>View Product </span>
21-
<v-icon icon="mdi-home-analytics" />
20+
<span>View Product</span>
21+
<svg class="icon" aria-hidden="true" style="font-size: 25px;">
22+
<use xlink:href="#icon-direction-right"></use>
23+
</svg>
2224
</div>
2325
</div>
2426
</template>
@@ -60,5 +62,6 @@ const props = defineProps<{
6062
align-items: center; /* 垂直居中（可选） */
6163
width: 100%;
6264
height: 15%;
65+
cursor: pointer
6366
}
6467
</style>

‎src/main.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,17 @@ import { createVuetify } from 'vuetify'
1010
import * as components from 'vuetify/components'
1111
import * as directives from 'vuetify/directives'
1212
import { aliases, md } from 'vuetify/iconsets/md'
13+
1314
const vuetify = createVuetify({
14-
components,
15-
directives,
16-
icons: {
17-
defaultSet: 'md',
18-
aliases,
19-
sets: {
20-
md,
15+
components,
16+
directives,
17+
icons: {
18+
defaultSet: 'md',
19+
aliases,
20+
sets: {
21+
md,
22+
},
2123
},
22-
},
2324
})
2425
// Pinia
2526
import { createPinia } from 'pinia'

‎src/type/market/Market.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
11
export interface MarketData {
2-
title: string;
3-
description: string;
2+
// 项目id
3+
id: string;
4+
// 项目名称
5+
name: string;
6+
// 介绍
7+
introduce: string;
8+
// 价格
49
price: number;
10+
// 封面
511
cover: string;
12+
// 项目语言
13+
codeLanguage: string;
14+
// 浏览数量
15+
viewNums: number;
16+
// 下载数量
17+
downloadNums: number;
18+
// 作者
19+
nickname: string;
20+
21+
622
}

‎src/views/market/index.vue‎

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,15 @@
11
<script setup lang="ts">
22
import marketCard from '@/components/market/MarketCard.vue'
3-
import type { MarketData } from '@/api/market/type.ts';
3+
import type {MarketData} from "@/type/market/Market.ts";
44
import {reactive} from "vue";
55
const searchParam = reactive({
66
searchWord: null
77
})
88
99
// 创建 15 条模拟数据
1010
const marketCards = reactive<MarketData[]>([
11-
{ title: 'Product 1', description: 'Description for product 1', price: 10, cover: 'https://www.clearstreet.io/imgs/home/header/webp/ct_header_end76.webp' },
12-
{ title: 'Product 2', description: 'Description for product 2', price: 20, cover: '' },
13-
{ title: 'Product 3', description: 'Description for product 3', price: 30, cover: '' },
14-
{ title: 'Product 4', description: 'Description for product 4', price: 40, cover: '' },
15-
{ title: 'Product 5', description: 'Description for product 5', price: 50, cover: '' },
16-
{ title: 'Product 6', description: 'Description for product 6', price: 60, cover: '' },
17-
{ title: 'Product 7', description: 'Description for product 7', price: 70, cover: '' },
18-
{ title: 'Product 8', description: 'Description for product 8', price: 80, cover: '' },
19-
{ title: 'Product 9', description: 'Description for product 9', price: 90, cover: '' },
20-
{ title: 'Product 10', description: 'Description for product 10', price: 100, cover: '' },
21-
{ title: 'Product 11', description: 'Description for product 11', price: 110, cover: '' },
22-
{ title: 'Product 12', description: 'Description for product 12', price: 120, cover: '' },
23-
{ title: 'Product 13', description: 'Description for product 13', price: 130, cover: '' },
24-
{ title: 'Product 14', description: 'Description for product 14', price: 140, cover: '' },
25-
{ title: 'Product 15', description: 'Description for product 15', price: 150, cover: '' }
11+
{id:'0', name: 'Product 1', introduce: 'introduce for product 1', price: 10, cover: 'https://www.clearstreet.io/imgs/home/header/webp/ct_header_end76.webp', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
12+
2613
]);
2714
</script>
2815

0 commit comments

Comments
 (0)