diff --git a/src/assets/css/global.less b/src/assets/css/global.less
new file mode 100644
index 0000000000000000000000000000000000000000..d5c82cf2eea8fc76e2ce57275a8cff4474eddd58
--- /dev/null
+++ b/src/assets/css/global.less
@@ -0,0 +1,55 @@
+@base-color:#0a328e;
+
+.wrap{
+  width: 1200px;
+  margin: 0 auto;
+}
+
+input{
+  outline: none;
+  padding: 0;
+}
+
+// 原子类
+.mb20{
+  margin-bottom: 20px;
+}
+
+@font-face {
+  font-family: "iconfont"; /* Project id 2730880 */
+  src: url('//at.alicdn.com/t/font_2730880_ylrio3ahhx.woff2?t=1628774839169') format('woff2'),
+       url('//at.alicdn.com/t/font_2730880_ylrio3ahhx.woff?t=1628774839169') format('woff'),
+       url('//at.alicdn.com/t/font_2730880_ylrio3ahhx.ttf?t=1628774839169') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-yduifuxuankuangxuanzhong:before {
+  content: "\e685";
+}
+
+.icon-yduifuxuankuang:before {
+  content: "\e686";
+}
+
+.icon-loading:before {
+  content: "\e722";
+}
+
+.icon-toast-shibai_huaban:before {
+  content: "\e635";
+}
+
+.icon-toast-jinggao:before {
+  content: "\e621";
+}
+
+.icon-toast_chenggong:before {
+  content: "\ea0a";
+}
diff --git a/src/components/Crumb.vue b/src/components/Crumb.vue
new file mode 100644
index 0000000000000000000000000000000000000000..c94a1a5e18fadd2ec13829e2dc9f96d53ae60aa9
--- /dev/null
+++ b/src/components/Crumb.vue
@@ -0,0 +1,11 @@
+<template>
+ <div>123</div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/home/List.vue b/src/components/home/List.vue
index a14a034646c612bf7eb028338439e0a80d24d996..c8607496400273cd8b5f3751b062ec869222640d 100644
--- a/src/components/home/List.vue
+++ b/src/components/home/List.vue
@@ -1,8 +1,8 @@
 <template>
   <ul class="list">
-    <li v-for="item in arr" :key="item.id">
+    <li v-for="item in arr" :key="item.id" @click="toDetailPage(item.id)">
       <section>
-        <img :src="'http://sc.wolfcode.cn' + item.coverImg" alt="" width="285"/>
+        <img :src="img + item.coverImg" alt="" width="285"/>
         <div class="bottom-box">
           <h3>{{item.title}}</h3>
           <p>{{ item.coin }}</p>
@@ -19,12 +19,21 @@
 </template>
 
 <script setup>
+import {useRouter} from "vue-router"
 defineProps({
   arr:{
     type:Array
   }
 })
-
+const router=useRouter();
+function toDetailPage(id){
+ router.push({
+  path:"/detail",
+  query: {
+id: id  
+},
+ })
+}
 </script>
  
 <style lang = "less" scoped>
diff --git a/src/main.js b/src/main.js
index cdf456ee2ecebed02ce8f4962abc91735e9aa34d..ca48c76a1b2d5686ad6079d49058b25cd847d2f6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,4 +6,5 @@ import router from "./router";
 const app = createApp(App);
 //第三步：在app中使用rouer
 app.use(router);
+app.config.globalProperties.img = 'https://sc.wolfcode.cn'
 app.mount('#app')
diff --git a/src/request/api.js b/src/request/api.js
index 446ae800b103cd48fd5825356d011b8967e24494..77943e3261eef651ecb587098cf2f84337e7b755 100644
--- a/src/request/api.js
+++ b/src/request/api.js
@@ -5,3 +5,4 @@ import request from "./request"
 // 首页精品的地址
 export const JingpinAPI = () =>request.get("/products/recommend")
 export const HotAPI = () =>request.get("/products/hot")
+export const DetailAPI = (id) =>request.get(`products/${id}`)
diff --git a/src/router/index.js b/src/router/index.js
index e642733001de6f259fcdbb1590593b533a0df916..4f9adbd26bfefcac7a954d3822beefbffc9dcec8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,6 +24,10 @@ component:()=>import("../views/Order.vue")
 {
 path:"/free",
 component:()=>import("../views/Free.vue")
+},
+{
+    path:"/detail",
+    component:()=>import("../views/Detail.vue")
 }
 ]
 // 创建router对象
diff --git a/src/views/Detail.vue b/src/views/Detail.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7ca27a71f138717ce6afb11c7145cfc231a6283a
--- /dev/null
+++ b/src/views/Detail.vue
@@ -0,0 +1,428 @@
+<template>
+    <div class="details wrap">
+    <Crumb></Crumb>
+    <main>
+      <div class="content">
+        <div class="l">
+          <div class="bigImg">
+            <img
+              :src="img + productInfo.coverImg"
+              alt=""
+            />
+          </div>
+          <ul>
+            <li v-for="item,index in productInfo.imgAltas" :key="index" @mouseenter="changImg(item.src)">
+              <img
+                :src="img + item.src"
+                width="100"
+                height="100"
+                alt=""
+              />
+            </li>
+          </ul>
+        </div>
+        <div class="r">
+          <div class="top">
+            <h2>{{productInfo.seriesTitle}}</h2>
+            <p>{{productInfo.seriesSubTitle}}</p>
+            <div class="score">{{productInfo.coin}}积分</div>
+          </div>
+          <div class="down">
+            <section v-for="item,index in productInfo.parameterJson" :key="index">
+              <strong>{{item.title}}</strong>
+              <ul>
+                <li v-for="it,i in item.parameters" :key="i" :class="it.currentActivate ? 'active' : ''"
+@click="toDetailPage(it.id)">
+                  {{it.title}}
+                </li>
+              </ul>
+            </section>
+            <div style="margin:10px 0;">
+                <strong
+              >数量 <span>*礼品库存99件</span></strong
+            >
+            <div class="step">
+              <div class="reduce">-</div>
+              <!-- <input type="text" disabled v-model="stepNum" /> -->
+              <input type="text" />
+              <div class="add">+</div>
+            </div>
+            </div>
+            <div class="btns">
+              <div class="addToCart">加入购物车</div>
+              <div class="buyNow">立即购买</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <aside>
+        <h3>你还可以兑换</h3>
+        <ul>
+          <li v-for="item,index in themYouCanBuy" :key="index" @click="toDetailPage(item.id)">
+            <div class="l">
+              <img :src="img+item.img" alt="">
+            </div>
+            <div class="r">
+              <div class="title">{{item.name}}</div>
+              <div class="score">
+                <span>{{item.coin}}</span>
+                积分
+              </div>
+            </div>
+          </li>
+        </ul>
+      </aside>
+    </main>
+    <ul class="tabs">
+        <li class="active">
+            礼品详情
+        </li>
+        <li>
+            常见问题
+        </li>
+    </ul>
+    <div>
+        <!-- 商品详情的内容盒子 -->
+    </div>
+    <div class="issue">
+        <!-- 常见问题的内容盒子 -->
+      <h4>兑换后运费如何收取？</h4>
+      <p>
+        商城内大部分实物产品均可包邮，也支持上门自提。虚拟产品则无需运费，可在兑换后直接使用。
+      </p>
+      <p class="mb20">
+        （注：新疆，西藏，内蒙古，青海，海南，宁夏暂不支持包邮，在此地区兑换商品需提前与客服确认运费。）
+      </p>
+      <h4>如何申请退换货？</h4>
+        <p>所有产品均为鸡腿兑换礼品，无质量问题不支持退换货；</p>
+        <p>如因喜好不同，或到货后后悔等原因，不支持退货；</p>
+        <p>因客户原因如联系方式有误、电话停机、不接电话、无理由拒收等造成快件无法正常签收的情况，叩丁狼均不进行补发或赔付；</p>
+        <p>如因质量问题需要退货，将由客服人员与客户联系，确认邮寄地址与流程。退回物品不得有人为损坏或使用痕迹，否则拒绝退换；</p>
+        <p class="mb20">如顾客选择自行寄回商品，请先垫付运费，到货验证商品后，叩丁狼将以鸡腿发放形式为用户报销运费，不接受单方面到付件。</p>
+        <h4>如何开具发票？</h4>
+        <p>叩丁狼积分商城产品均为定制礼品，使用积分兑换的产品均不支持开票。</p>
+        <h4>关于鸡腿价格问题</h4>
+        <p class="mb20">因可能存在系统缓存、页面更新延迟等不确定性情况，导致价格显示异常，商品具体售价请以订单结算页价格为准。如您发现异常情况出现，请立即联系我们补正，以便您能顺兑换。</p>
+        <h4>联系我们</h4>
+        <p>www.wolfcode.cn</p>
+        <p class="mb20">微信公众号搜索“叩丁狼”</p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import Crumb from '../components/Crumb.vue'
+import { useRoute,useRouter } from "vue-router";
+// 创建useRoute对象
+const route = useRoute();
+console.log(route);
+import {  ref,watch } from "vue";
+import {DetailAPI} from "../request/api"
+// 获取商品详情数据
+
+// “面包屑”模块数据
+let nav = ref([]);
+// “你还可以兑换”模块数据
+let themYouCanBuy = ref([]);
+// “商品详情”模块数据
+let productInfo = ref([]);
+
+async function getDetailData(id){
+const res = await DetailAPI(id);
+nav.value = res.data.nav;
+themYouCanBuy.value = res.data.themYouCanBuy;
+productInfo.value = res.data.productInfo;
+console.log(nav,themYouCanBuy,productInfo);
+}
+getDetailData(route.query.id)
+
+document.documentElement.scrollTop = 0;
+
+const router=useRouter();
+function toDetailPage(id){
+  router.push({
+  path:"/detail",
+  query: {
+id: id  
+},
+ });
+ getDetailData(id)
+}
+
+// watch(
+// () => route.query.id,
+// (newVal, oldVal) => {
+//  console.log(newVal, oldVal);
+// // 刷新页面
+// router.go(0)
+// }
+// );
+
+function changImg(src){
+productInfo.value.coverImg = src
+}
+
+</script>
+ 
+<style lang = "less" scoped>
+@import "../assets/css/global.less";
+
+.details {
+  main {
+    margin-bottom: 52px;
+    display: flex;
+    .content {
+      width: 884px;
+      display: flex;
+      justify-content: space-between;
+      .l {
+        .bigImg {
+          width: 459px;
+          height: 440px;
+          background-color: #fcf;
+          margin-bottom: 21px;
+          img{
+            width:100%;
+            height: 100%;
+          }
+        }
+        ul {
+          width: 459px;
+          display: flex;
+          justify-content: space-between;
+          li {
+            width: 100px;
+            height: 100px;
+            background-color: #cff;
+            cursor: pointer;
+            img {
+              filter: brightness(50%);
+            }
+            &:hover {
+              img {
+                filter: brightness(100%);
+              }
+            }
+          }
+        }
+      }
+      .r {
+        padding: 7px 49px 0 31px;
+        .top {
+          padding-bottom: 23px;
+          border-bottom: 1px solid #ececec;
+          h2 {
+            font-size: 28px;
+            color: #000000;
+          }
+          p {
+            margin-top: 15px;
+            font-size: 14px;
+            font-weight: 300;
+            color: #999999;
+          }
+          .score {
+            font-size: 28px;
+            font-weight: bold;
+            color: #fd604d;
+            margin-top: 26px;
+          }
+        }
+        .down {
+          padding-top: 19px;
+          strong {
+            font-weight: 300;
+            color: #000000;
+            margin-bottom: 14px;
+            display: block;
+            span {
+              color: #666;
+              font-size: 14px;
+            }
+          }
+          ul {
+            width: 100%;
+            overflow: hidden;
+            li {
+              padding: 0px 10px;
+              cursor: pointer;
+              height: 32px;
+              float: left;
+              text-align: center;
+              line-height: 32px;
+              color: #666666;
+              border: 1px solid #d1d1d1;
+              margin-right: 20px;
+              margin-bottom: 11px;
+              &.active {
+                border-color: @base-color;
+                color: @base-color;
+              }
+            }
+          }
+          .step {
+            background: #fff;
+            width: 106px;
+            margin-bottom: 24px;
+            height: 32px;
+            display: flex;
+            justify-content: space-between;
+            .reduce,
+            .add {
+              width: 30px;
+              text-align: center;
+              line-height: 32px;
+              height: 32px;
+              cursor: pointer;
+              box-sizing: border-box;
+              border: 1px solid #ccc;
+              user-select: none;
+            }
+            input {
+              width: 46px;
+              height: 32px;
+              user-select: none;
+              border: 0;
+              box-sizing: border-box;
+              border-top: 1px solid #ccc;
+              padding: 0;
+              text-indent: 1.5em;
+              outline: none;
+              border-bottom: 1px solid #ccc;
+            }
+          }
+          .btns {
+            display: flex;
+            margin-bottom: 25px;
+            div {
+              width: 150px;
+              height: 46px;
+              line-height: 46px;
+              text-align: center;
+              margin-right: 19px;
+              cursor: pointer;
+              color: #fff;
+              &.addToCart {
+                background: #3dc36b;
+              }
+              &.buyNow {
+                background: #fd604d;
+              }
+            }
+          }
+          .love_share {
+            display: flex;
+            .love {
+              display: flex;
+              align-items: center;
+              padding-right: 16px;
+              border-right: 1px solid #666;
+              img {
+                margin-right: 12px;
+              }
+              span {
+                color: #666666;
+              }
+            }
+            .share {
+              padding-left: 18px;
+            }
+          }
+        }
+      }
+    }
+    aside {
+      padding-left: 19px;
+      box-sizing: border-box;
+      width: 230px;
+      border-left: 1px solid #ddd;
+      h3 {
+        font-size: 18px;
+        color: #333333;
+        margin-bottom: 20px;
+      }
+      ul {
+        li {
+          margin-bottom: 30px;
+          display: flex;
+          cursor: pointer;
+          justify-content: space-between;
+          .l {
+            width: 80px;
+            height:80px;
+            margin-right: 10px;
+            background-color: #ffc;
+            img {
+              width: 100%;
+              display: block;
+              border: 1px solid transparent;
+            }
+          }
+          .r{
+            width: 140px;
+            display: flex;
+            justify-content: space-around;
+            flex-direction: column;
+            .title {
+              /* 超出一行变省略号 */
+              text-overflow: ellipsis;
+              width: 100%;
+              font-weight: bold;
+              overflow: hidden;
+              white-space: nowrap;
+              font-size: 14px;
+              color: #666666;
+            }
+            .score {
+              color: #666666;
+              span {
+                font-weight: bold;
+                font-size: 18px;
+                color: #ff5e0f;
+              }
+            }
+          }
+          &:hover {
+            img {
+              border: 1px solid @base-color;;
+            }
+            .title {
+              color: @base-color;;
+            }
+          }
+        }
+      }
+    }
+  }
+  .tabs {
+      border-top: 1px solid #ececec;
+    display: flex;
+    width: 100%;
+    margin-bottom: 27px;
+    li {
+      width: 120px;
+      height: 50px;
+      cursor: pointer;
+      background: #fff;
+      text-align: center;
+      line-height: 50px;
+      &.active {
+        background: #ececec;
+        font-weight: bold;
+      }
+    }
+  }
+  .issue {
+      padding-bottom: 40px;
+    h4 {
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      margin-top: 20px;
+    }
+    p{
+        line-height: 1.4em;
+    }
+  }
+}  
+</style>
\ No newline at end of file