Login dev

package.json

@@ -24,10 +24,12 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/tsconfig": "^0.7.0",
+    "material-design-icons-iconfont": "^6.7.0",
     "npm-run-all2": "^7.0.1",
     "typescript": "~5.6.3",
     "vite": "^6.0.1",
     "vite-plugin-vue-devtools": "^7.6.5",
-    "vue-tsc": "^2.1.10"
+    "vue-tsc": "^2.1.10",
+    "@mdi/font": "7.4.47"
   }
 }

src/components/market/MarketCard.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { MarketData } from '@/api/market/type.ts';
+import { type MarketData } from '@/type/market/Market.ts';
 
 // 使用 defineProps 来定义组件的 props
 const props = defineProps<{
@@ -17,8 +17,8 @@ const props = defineProps<{
       {{ props.marketData.description }}
     </div>
     <div class="bottom-btn">
-      <span>View Product   -></span>
-
+      <span>View Product   </span>
+      <v-icon icon="mdi-home-analytics" />
     </div>
   </div>
 </template>
@@ -27,34 +27,38 @@ const props = defineProps<{
 .market-card {
   width: 100%;
   height: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 15px;
+  overflow: hidden;
 }
 .top-picture {
   width: 100%;
-  height: 45%;
-  background-size: auto; /* 保持图片原始大小 */
+  height: 55%;
+  background-size: cover; /* 保持图片原始大小 */
   background-position: center; /* 图片居中显示 */
   background-repeat: no-repeat; /* 防止图片重复 */
 }
 
 .title {
   width: 100%;
-  height: 20%;
-  padding: 10px;
-  font-size: 24px;
+  height: 15%;
+  padding: 15px 10px 5px 15px;
+  font-size: 28px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .info {
   width: 100%;
-  height: 20%;
+  height: 15%;
   padding: 10px;
   font-size: 18px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 .bottom-btn{
   display: flex;
+  justify-content: space-between;
+  padding: 0 20px;
   align-items: center; /* 垂直居中（可选） */
   width: 100%;
   height: 15%;
-
 }
 </style>

src/main.ts

@@ -7,11 +7,19 @@ import router from './router'
 // Vuetify
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
-import {VSnackbar} from 'vuetify/components'
-import {} from 'vuetify/directives'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { aliases, md } from 'vuetify/iconsets/md'
 const vuetify = createVuetify({
-    components:{VSnackbar},
-    directives:{}
+   components,
+   directives,
+   icons: {
+        defaultSet: 'md',
+        aliases,
+        sets: {
+                md,
+        },
+   },
 })
 // Pinia
 import { createPinia } from 'pinia'
@@ -21,7 +29,7 @@ pinia.use(piniaPluginPersistedstate);
 
 const app = createApp(App)
 
-app.use(pinia)
+app.use(createPinia())
 app.use(router)
 app.use(vuetify)
 

src/type/market/Market.ts

@@ -0,0 +1,6 @@
+export interface MarketData {
+        title: string;
+        description: string;
+        price: number;
+        cover: string;
+}

src/views/login/index.vue

@@ -110,13 +110,13 @@ const loginEvent = function (){
 }
 
 .form-item input{
-  height: 22px ;
+  height: 32px ;
   width: 65%;
   border: none;
   outline: none;
   border-radius:  20px;
   background-color: #f0eae1;
-  color:  #094255;
+  color: #000000;
   margin-bottom: 0;
   padding: .5rem .75rem;
   font-size: 1rem;

src/views/market/index.vue

@@ -8,7 +8,7 @@ const searchParam = reactive({
 
 // 创建 15 条模拟数据
 const marketCards = reactive<MarketData[]>([
-  { title: 'Product 1', description: 'Description for product 1', price: 10, cover: '' },
+  { 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: '' },
@@ -48,8 +48,8 @@ const marketCards = reactive<MarketData[]>([
 
 <style scoped>
 .market-view{
-  width: 100vw;
-  height: 100vh;
+  min-width: 100vw;
+  min-height: 100vh;
   background-color: #f0eae1 ;
   overflow: hidden;
 }
@@ -65,7 +65,7 @@ const marketCards = reactive<MarketData[]>([
 
 .top-search-bar input{
   width: 50vw;
-  height: 35px;
+  height: 45px;
   margin:0 auto;
   border-radius: 15px;
   font-size: 20px;
@@ -84,9 +84,10 @@ const marketCards = reactive<MarketData[]>([
   display: grid;
   margin: 0 auto;
   grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-  max-width: calc(4 * 400px + 3 * 20px + 10vw); /* 控制最大宽度以限制列数 */
+  max-width: calc(4 * 350px + 3 * 20px + 10vw); /* 控制最大宽度以限制列数 */
   gap: 20px; /* 元素之间的间隔 */
   padding: 0 5vw; /* 左右 padding 为 5vw */
+  grid-auto-rows: 650px;
 }
 
 </style>