Skip to content

Market dev #7

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 3 commits into from
Dec 6, 2024
Merged

Market dev #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6ccafdb
市场页面开发
scarecrowQoQ Dec 6, 2024
ad4d9ca
市场页面开发
scarecrowQoQ Dec 6, 2024
27a818e
Merge branch 'main' into market_dev
scarecrowQoQ Dec 6, 2024
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
3 changes: 2 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
<title>OTOW</title>
</head>
<body>
<div id="app"></div>
<script src="//at.alicdn.com/t/c/font_4773260_zpj4jsw12uc.js"></script>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
6 changes: 0 additions & 6 deletions src/api/market/type.ts
View file
Open in desktop

This file was deleted.

7 changes: 7 additions & 0 deletions src/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,13 @@ button{
border-radius: 10px;
}

.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}

/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
font-family: "default";
Expand Down
11 changes: 7 additions & 4 deletions src/components/market/MarketCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,16 @@ const props = defineProps<{
<div class="market-card">
<div class="top-picture" :style="{ backgroundImage: `url(${props.marketData.cover})` }"></div>
<div class="title">
{{ props.marketData.title }}
{{ props.marketData.name }}
</div>
<div class="info">
{{ props.marketData.description }}
{{ props.marketData.introduce }}
</div>
<div class="bottom-btn">
<span>View Product </span>
<v-icon icon="mdi-home-analytics" />
<span>View Product</span>
<svg class="icon" aria-hidden="true" style="font-size: 25px;">
<use xlink:href="#icon-direction-right"></use>
</svg>
</div>
</div>
</template>
Expand Down Expand Up @@ -60,5 +62,6 @@ const props = defineProps<{
align-items: center; /* 垂直居中（可选） */
width: 100%;
height: 15%;
cursor: pointer
}
</style>
17 changes: 9 additions & 8 deletions src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,17 @@ import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { aliases, md } from 'vuetify/iconsets/md'

const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'md',
aliases,
sets: {
md,
components,
directives,
icons: {
defaultSet: 'md',
aliases,
sets: {
md,
},
},
},
})
// Pinia
import { createPinia } from 'pinia'
Expand Down
20 changes: 18 additions & 2 deletions src/type/market/Market.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,22 @@
export interface MarketData {
title: string;
description: string;
// 项目id
id: string;
// 项目名称
name: string;
// 介绍
introduce: string;
// 价格
price: number;
// 封面
cover: string;
// 项目语言
codeLanguage: string;
// 浏览数量
viewNums: number;
// 下载数量
downloadNums: number;
// 作者
nickname: string;


}
19 changes: 3 additions & 16 deletions src/views/market/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,15 @@
<script setup lang="ts">
import marketCard from '@/components/market/MarketCard.vue'
import type { MarketData } from '@/api/market/type.ts';
import type {MarketData} from "@/type/market/Market.ts";
import {reactive} from "vue";
const searchParam = reactive({
searchWord: null
})

// 创建 15 条模拟数据
const marketCards = reactive<MarketData[]>([
{ title: 'Product 1', description: 'Description for product 1', price: 10, cover: 'https://www.clearstreet.io/imgs/home/header/webp/ct_header_end76.webp' },
{ 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: '' }
{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"},

]);
</script>

Expand Down
Loading