From 86b37c4de072b0072f76ccfe4e944dc6ba562c9e Mon Sep 17 00:00:00 2001
From: dct <2382056614@qq.com>
Date: Tue, 10 Dec 2024 00:23:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B8=82=E5=9C=BA=E9=A1=B5=E9=9D=A2=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/market/MarketCard.vue     |  25 ++++--
 src/router/index.ts                      |   2 +-
 src/type/market/Market.ts                |   2 +-
 src/views/home/index.vue                 |   2 +-
 src/views/market/{index.vue => list.vue} |  38 +++++----
 src/views/market/project.vue             | 100 +++++++++++++++++++++++
 6 files changed, 146 insertions(+), 23 deletions(-)
 rename src/views/market/{index.vue => list.vue} (81%)
 create mode 100644 src/views/market/project.vue

diff --git a/src/components/market/MarketCard.vue b/src/components/market/MarketCard.vue
index ace55dc..90ce923 100644
--- a/src/components/market/MarketCard.vue
+++ b/src/components/market/MarketCard.vue
@@ -1,15 +1,19 @@
 <script lang="ts" setup>
-import { type MarketData } from '@/type/market/Market.ts';
+import { type projectData } from '@/type/market/Market.ts';
 
 // 使用 defineProps 来定义组件的 props
 const props = defineProps<{
-  marketData: MarketData;
+  marketData: projectData;
 }>();
+const clickProjectEmits = defineEmits(['clickProject']);
+const clickProject = function (){
+  clickProjectEmits('clickProject', props.marketData);
+}
 </script>
 
 <template>
   <div class="market-card">
-    <div class="top-picture" :style="{ backgroundImage: `url(${props.marketData.cover})` }"></div>
+    <div class="top-picture" :style="{ backgroundImage: `url(${props.marketData.cover})` }" @click="clickProject"></div>
     <div class="title">
       <div class="project_type">
         {{props.marketData.codeLanguage}}
@@ -20,9 +24,16 @@ const props = defineProps<{
 
     </div>
     <div class="info">
-      {{ props.marketData.introduce }}
+      <span style="font-weight: lighter; margin-right: 10px">by</span>
+      <span style="font-size: 24px">{{ props.marketData.nickname }}</span>
+
+      <span style="padding-bottom: 10px; font-size:12px; margin-left: auto ">
+        from
+      </span>
+
+      <span style=" font-size: 24px; margin-left: 10px"> {{ props.marketData.price }} RMB </span>
     </div>
-    <div class="bottom-btn">
+    <div class="bottom-btn" @click="clickProject">
       <span>View Product</span>
       <svg class="icon" aria-hidden="true" style="font-size: 25px;">
         <use xlink:href="#icon-direction-right"></use>
@@ -67,11 +78,13 @@ const props = defineProps<{
 }
 
 .info {
+  display: flex;
+  align-items: center;
   width: 100%;
   height: 14%;
-  padding: 10px;
   font-size: 18px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding:  0 20px;
 }
 .bottom-btn{
   display: flex;
diff --git a/src/router/index.ts b/src/router/index.ts
index 303ea2d..6ebc036 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '../views/home/index.vue'
 import LoginView from '../views/login/index.vue'
-import MarketView from '../views/market/index.vue'
+import MarketView from '../views/market/list.vue'
 import PersonalView from '../views/personal/index.vue'
 import ProfileView from "../views/profile/index.vue";
 import WorkbenchView from '../views/workbench/workbench.vue'
diff --git a/src/type/market/Market.ts b/src/type/market/Market.ts
index 99a6025..2aed90f 100644
--- a/src/type/market/Market.ts
+++ b/src/type/market/Market.ts
@@ -1,4 +1,4 @@
-export interface MarketData {
+export interface projectData {
         // 项目id
         id: string;
         // 项目名称
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index c406c67..9f4f5bd 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import {ref} from "vue";
-import MarketView from '@/views/market/index.vue'
+import MarketView from '@/views/market/list.vue'
 import WorkbenchView from '@/views/workbench/workbench.vue'
 import Text from "@/components/normal/Text.vue";
 import router from "@/router";
diff --git a/src/views/market/index.vue b/src/views/market/list.vue
similarity index 81%
rename from src/views/market/index.vue
rename to src/views/market/list.vue
index 0d98d59..9b236c1 100644
--- a/src/views/market/index.vue
+++ b/src/views/market/list.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import marketCard from '@/components/market/MarketCard.vue'
-import type {MarketData} from "@/type/market/Market.ts";
+import type {projectData} from "@/type/market/Market.ts";
 import {reactive, ref, computed, watch} from "vue";
+import project from "./project.vue";
+import {tr} from "vuetify/locale";
 
 const searchParam = reactive({
   searchWord: null,
@@ -57,15 +59,25 @@ const selectLanguage = (language: string) => { console.log(`选择了语言: ${l
   activeLanguage.value = null
 }
 
-// 创建 15 条模拟数据
-const marketCards = reactive<MarketData[]>([
-  {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"},
-  {id:'1', name: 'Product 2', 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"},
-  {id:'2', name: 'Product 3', 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"},
-  {id:'3', name: 'Product 3', 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"},
-  {id:'4', name: 'Product 3', 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"},
-  {id:'5', name: 'Product 3', 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"},
+// 处理项目卡片点击事件
+const projectPopDialog = ref(false)
+const handleCardEvent = function (project: projectData){
+  projectPopDialog.value = true;
+}
+
+// 处理项目弹出关闭事件
+const handleCardClose = function (){
+  projectPopDialog.value = false;
+}
 
+// 创建 15 条模拟数据
+const marketCards = reactive<projectData[]>([
+  {id:'0', name: 'Product 1', introduce: 'introduce for product 1', price: 10, cover: '/src/assets/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
+  {id:'1', name: 'Product 2', introduce: 'introduce for product 1', price: 10, cover: '/src/assets/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
+  {id:'2', name: 'Product 3', introduce: 'introduce for product 1', price: 10, cover: '/src/assets/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
+  {id:'3', name: 'Product 3', introduce: 'introduce for product 1', price: 10, cover: '/src/assets/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
+  {id:'4', name: 'Product 3', introduce: 'introduce for product 1', price: 10, cover: '/src/assets/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
+  {id:'5', name: 'Product 3', introduce: 'introduce for product 1', price: 10, cover: '/src/assets/img/projectCover.jpg', codeLanguage: "java1",viewNums: 10, downloadNums: 0, nickname:"dct"},
 ]);
 </script>
 
@@ -145,12 +157,11 @@ const marketCards = reactive<MarketData[]>([
 
       <div class="card-list">
         <div v-for="(marketCard, index) in marketCards">
-          <marketCard :market-data="marketCard"></marketCard>
+          <marketCard :market-data="marketCard" @clickProject="handleCardEvent"></marketCard>
         </div>
       </div>
-
-
   </div>
+  <project v-if="projectPopDialog" @closePop="handleCardClose"></project>
 </template>
 
 <style scoped>
@@ -201,8 +212,7 @@ const marketCards = reactive<MarketData[]>([
 .center-text{
   text-align: center;
   width: 400px;
-  margin: 0 auto;
-  margin-top: 5vh;
+  margin: 3vh auto;
 }
 
 .card-list {
diff --git a/src/views/market/project.vue b/src/views/market/project.vue
new file mode 100644
index 0000000..a483246
--- /dev/null
+++ b/src/views/market/project.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="mask-top" @click="closePopEvent" :style="maskStyle"/>
+  <div class="project-pop" :class="{ 'hide': !isVisible }">
+    <div style="width: 50%">
+      <p>
+        {{props.marketData.codeLanguage}}
+      </p>
+
+    </div>
+
+    <div style="width: 50%">
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import { defineProps, defineEmits } from 'vue'
+import type { projectData } from '@/type/market/Market.ts'
+
+const props = defineProps<{
+  marketData: projectData;
+}>()
+const closePopEmits = defineEmits(['closePop']);
+
+const isVisible = ref(true) // 控制弹窗显示状态
+const maskStyle = reactive({
+  display: 'block'
+}) // 控制 mask 的显示状态
+
+const closePopEvent = function () {
+  isVisible.value = false // 设置为不可见，触发隐藏动画
+  maskStyle.display = 'none' // 立即隐藏 mask
+  setTimeout(() => {
+    closePopEmits('closePop');
+  }, 1000) // 动画完成后触发关闭事件
+}
+</script>
+
+<style scoped>
+.project-pop {
+  display: flex;
+  width: 99vw;
+  height: 90vh;
+  padding: 5vh 3vw 0 3vw;
+  background-color: #FFFBDD;
+  border-radius: 20px;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 2024;
+  transform: translateY(0);
+  transition: transform 1s cubic-bezier(0.42, 0, 1, 1);
+  animation: pop 0.5s forwards;
+}
+
+.project-pop.hide {
+  animation: hide 1s forwards;
+}
+
+.mask-top {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 12vh;
+  background-color: rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  animation: show 0.5s forwards;
+  animation-delay: 0.3s;
+}
+
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes pop {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes hide {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+</style>