添加动态路由，添加商品详情页的头部，数量，价格，以及相关推荐

src/components/AdverisingRight.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="right-row">
     <template v-for="index in data.len">
-      <div class="right-item" @click="" style="background-image: url('../assets/adver.jpg')">
-<!--        <img src="../assets/adver.jpg" alt=""/>-->
-        <div class="item-btn">点击购买</div>
+      <div class="right-item" @click="jump()"
+           style="background-image: url('https://files.kardz.cn/demon/img_v3_025g_430b8ed0-cb39-4904-9f75-9191a1ce914g-4d66d8c530814e8eac431720676a989d.png?x-oss-process=image/resize,m_fill,h_450,w_300/format,jpg')">
+        <!--        <img src="../assets/adver.jpg" alt=""/>-->
+        <div class="item-btn"
+        >点击购买
+        </div>
       </div>
     </template>
   </div>
@@ -12,6 +15,7 @@
 <script setup lang="ts">
 import {AdverRightData} from '../entity/AdverRightData.ts'
 import {defineProps} from 'vue'
+import router from "../router";
 
 const props = defineProps({
   data: {
@@ -20,6 +24,9 @@ const props = defineProps({
   }
 })
 
+function jump() {
+  router.push({name: "detail", params: {id: props.data.goodsId[0]}});
+}
 
 </script>
 
@@ -39,6 +46,7 @@ const props = defineProps({
     justify-content: space-between;
     width: 300px;
     height: 450px;
+    cursor: pointer;
 
     img {
       margin: 0;
@@ -46,29 +54,64 @@ const props = defineProps({
     }
 
     .item-btn {
-      position: absolute;
-      margin: 350px auto 28px auto;
+      color: #000;
       background: white;
+      //position: absolute;
+      margin: 400px 66px 28px auto;
       width: 168px;
       height: 38px;
       line-height: 38px;
       border-radius: 15px;
+      z-index: 2;
     }
 
     &:hover {
       &::after {
+
         display: block;
       }
     }
 
     &::after {
+      opacity: 1;
       content: '';
       display: none;
       position: absolute;
       width: 300px;
       height: 450px;
-      background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+      z-index: 1;
+      background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
+      animation: myfirst 0.2s ease;
+    }
 
+    @keyframes myfirst {
+      0% {
+        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.0) 100%);
+      }
+      13% {
+        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
+      }
+      25% {
+        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
+      }
+      37% {
+        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%);
+      }
+      50% {
+        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
+      }
+      62% {
+        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
+      }
+      75% {
+        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
+      }
+      87% {
+        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
+      }
+      100% {
+        background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
+      }
     }
 
   }

src/components/AdvertisingLeftButton.vue

@@ -67,9 +67,6 @@ const props = defineProps({
       vertical-align: middle;
       line-height: 40px;
     }
-
   }
-
-  border-bottom: 1px solid #e5e5e5;
 }
 </style>

src/page/DetailPage.vue

@@ -0,0 +1,416 @@
+<template>
+  <div class="detail">
+    <div class="detail-router">
+      <template v-for="(item, index) in 5">
+        <router-link :to="'/'">官网首页</router-link>
+        <span>></span>
+      </template>
+    </div>
+    <div class="goods-show">
+      <div class="goods-show-info">
+        <div class="goods-show-body">
+          <div class="goods-show-img">
+            <img src="../assets/goods-img.jpg" alt=""/>
+          </div>
+          <div class="goods-show-text">
+            <div class="goods-show-title">
+              Steam 全区账号
+            </div>
+            <div class="goods-show-advantages">
+              官方渠道
+              极速发货
+              错误包换
+            </div>
+            <div class="goods-show-des">
+              CRMEB源码遵循 GPL-3.0 开源协议，系统采用 TP5.0 框架；
+              后台采用 form-builder 组件和后台多任务操作框架，方便快速开发增删改、封装 layui.table 可快速开发数据列表页面、PHPExcel
+              数据导出、数据库在线词典、日志小工具、系统参数配置、系统强大完善的权限控制、系统菜单配置、组合数据模型等这些都是为了方便二次开发而准备的；
+              前台 vue 封装了常用小工具，以及所有数据接口；
+              首页
+              CRMEB源码遵循 GPL-3.0 开源协议，系统采用 TP5.0 框架；
+              后台采用 form-builder 组件和后台多任务操作框架，方便快速开发增删改、封装 layui.table 可快速开发数据列表页面、PHPExcel
+              数据导出、数据库在线词典、日志小工具、系统参数配置、系统强大完善的权限控制、系统菜单配置、组合数据模型等这些都是为了方便二次开发而准备的；
+              前台 vue 封装了常用小工具，以及所有数据接口；
+              首页
+            </div>
+          </div>
+        </div>
+
+        <div class="goods-show-count">
+          <div class="goods-show-price-text">
+            <span>近30天销量：</span>
+            <span>99999999</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="goods-info">
+      <div class="info-left"></div>
+      <div class="info-right">
+        <div class="info-right-price-calc">
+          <div class="info-right-purchase-count">
+            <!--  购买数量 -->
+            <div class="irpc-font">购买数量</div>
+            <!--          数量按钮-->
+            <div class="irpc-count-button">
+              <div class="irpc-count-button-minus" @click="purchaseQuantityMinus()">-</div>
+              <div class="irpc-count-button-input">
+                <input v-model="purchaseQuantity"/>
+              </div>
+              <div class="irpc-count-button-add" @click="purchaseQuantityAdd()">+</div>
+            </div>
+          </div>
+          <div class="info-right-total-purchase-price">
+
+            <div class="price">
+              <div class="price-name">总价</div>
+              <div class="price-number">
+                <div class="price-original">249</div>
+                <div class="price-value">299</div>
+              </div>
+            </div>
+            <div class="purchase-button">
+              <div class="purchase-button-btn">
+                立即购买
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="info-recommend">
+          <div class="info-recommend-title">
+            相关推荐
+          </div>
+          <div class="info-recommend-items">
+            <template v-for="index in 10">
+              <div class="info-recommend-item">
+                <div class="recommend-item-img">
+                  <img src="../assets/goods-img.jpg" alt="测试图片"/>
+                </div>
+                <div class="recommend-item-name">
+                  rot
+                </div>
+              </div>
+            </template>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from "vue";
+
+let purchaseQuantity = ref(0)
+
+function purchaseQuantityAdd() {
+  if (purchaseQuantity.value >= 999) {
+    purchaseQuantity.value = 999
+    return
+  }
+  purchaseQuantity.value++;
+}
+
+function purchaseQuantityMinus() {
+  if (purchaseQuantity.value <= 0) {
+    purchaseQuantity.value = 0
+    return
+  }
+  purchaseQuantity.value--;
+}
+
+</script>
+<style scoped lang="scss">
+.detail {
+  width: 100%;
+  background: #f8f8f8;
+
+  .detail-router {
+    line-height: 50px;
+    text-align: left;
+    margin: 0 auto;
+    color: #333;
+    width: 1180px;
+    height: 50px;
+    background: white;
+  }
+
+  .goods-show {
+    background: #cfddd6;
+    height: 300px;
+    padding-top: 35px;
+
+    .goods-show-info {
+      width: 1180px;
+      margin: 0 auto;
+      display: flex;
+
+      justify-content: space-between;
+
+      .goods-show-body {
+        display: flex;
+
+        .goods-show-img {
+          perspective: 300px;
+
+          img {
+            transform-origin: left center;
+            transform: rotateY(10deg) rotateX(5deg);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+            border-radius: 20px;
+          }
+        }
+
+        .goods-show-text {
+          padding-top: 20px;
+          padding-left: 30px;
+          margin-left: 50px;
+          width: 600px;
+          text-align: left;
+
+          .goods-show-title {
+            line-height: 35px;
+            font-size: 30px;
+            font-weight: bold;
+            color: #777;
+          }
+
+          .goods-show-advantages {
+            margin-top: 15px;
+            color: #888;
+          }
+
+          .goods-show-des {
+            margin-top: 30px;
+            color: #aaa;
+            height: 140px;
+            /*首行缩进*/
+            text-indent: 2em;
+            /*文本隐藏*/
+            text-overflow: ellipsis;
+            /*文本溢出显示省略号*/
+            overflow: hidden;
+          }
+        }
+      }
+
+      .goods-show-count {
+        display: flex;
+        width: 150px;
+
+        .goods-show-price-text {
+          font-size: 12px;
+          width: 150px;
+          line-height: 34px;
+          text-align: center;
+          border-radius: 15px;
+          height: 34px;
+          background: rgba(255, 255, 255, 0.3);
+
+          span:nth-child(1) {
+            color: #999;
+          }
+        }
+      }
+    }
+  }
+
+  .goods-info {
+    width: 1180px;
+    display: flex;
+    justify-content: space-between;
+    margin: 20px auto 0 auto;
+
+    .info-left {
+      width: 760px;
+      background: #535bf2;
+    }
+
+    .info-right {
+      width: 380px;
+
+      .info-right-price-calc {
+        .info-right-purchase-count {
+          display: flex;
+          justify-content: space-between;
+          padding: 20px 30px;
+          border-radius: 5px 5px 0 0;
+          background: white;
+          border: solid #dddddd;
+          border-width: 1px 1px 0 1px;
+
+          .irpc-font {
+            font-size: 14px;
+            line-height: 36px;
+            text-align: left;
+          }
+
+          .irpc-count-button {
+            width: 120px;
+            border-radius: 15px;
+            background: #f0f0f0;
+            height: 36px;
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+
+            .irpc-count-button-minus, .irpc-count-button-add {
+              text-align: center;
+              line-height: 36px;
+              font-weight: bold;
+              color: #666666;
+              font-size: 18px;
+              width: 40px;
+              cursor: pointer;
+              user-select: none;
+              border-radius: 0 15px 15px 0;
+
+              &:nth-child(1) {
+                border-radius: 15px 0 0 15px;
+              }
+
+              &:hover {
+                background: #eaeaea;
+              }
+            }
+
+            .irpc-count-button-input {
+              text-align: center;
+              line-height: 36px;
+              width: 40px;
+
+              input {
+                color: #666666;
+                font-size: 14px;
+                text-align: center;
+                width: 40px;
+                outline: none;
+                background: transparent;
+                border: transparent;
+              }
+            }
+          }
+
+        }
+
+        .info-right-total-purchase-price {
+          border: solid #dddddd;
+          border-width: 0 1px 1px 1px;
+          border-radius: 0 0 5px 5px;
+          height: 160px;
+          width: 318px;
+          padding: 10px 30px 10px 30px;
+
+
+          .price-name {
+            justify-content: left;
+            text-align: left;
+            font-size: 26px;
+            font-weight: bold;
+            display: inline-block;
+          }
+
+          .price {
+            display: flex;
+            /*文本置底*/
+            vertical-align: bottom;
+            justify-content: space-between;
+            margin: 10px 5px 0px 5px;
+
+            .price-number {
+              display: flex;
+              justify-content: right;
+
+              .price-original {
+                padding-top: 13px;
+                display: block;
+                position: relative;
+                bottom: 0;
+                width: auto;
+                color: #8b8b8b;
+                text-decoration: line-through;
+                font-size: 14px;
+                text-align: right;
+
+                &:before {
+                  content: "￥";
+                }
+              }
+
+              .price-value {
+                font-weight: bold;
+                font-size: 26px;
+                color: #ff4d4f;
+                text-align: right;
+
+                &:before {
+                  content: "￥";
+                }
+              }
+            }
+
+          }
+
+          .purchase-button {
+            border-top: 1px solid #dddddd;
+            width: 320px;
+            height: 45px;
+            margin: 20px auto 0 auto;
+
+            .purchase-button-btn {
+              margin-top: 20px;
+              background: #207cfb;
+              border-radius: 5px;
+              line-height: 45px;
+              user-select: none;
+              cursor: pointer;
+
+            }
+          }
+        }
+      }
+
+      .info-recommend {
+        margin-top: 40px;
+        width: 380px;
+
+        .info-recommend-title {
+          font-size: 24px;
+          font-weight: bold;
+          text-align: left;
+        }
+
+        .info-recommend-items {
+          width: 320px;
+          padding: 10px 30px;
+          min-height: 30px;
+          justify-content: space-between;
+          flex-wrap: wrap;
+          display: flex;
+
+          .info-recommend-item {
+            margin-right: 10px;
+            margin-bottom: 20px;
+
+            .recommend-item-img {
+              width: 104px;
+              height: 143px;
+
+              img {
+                border-radius: 15px;
+                width: 108px;
+                height: 143px;
+              }
+            }
+
+            .recommend-item-name {
+              font-size: 14px;
+              text-align: left;
+            }
+          }
+
+        }
+      }
+    }
+  }
+}
+</style>

src/page/HomeAdvertisement.vue

@@ -1,18 +1,24 @@
 <template>
+
   <div class="home-connect">
-    <div class="home-connect-row">
-      <!--    头部类型-->
-      <div class="home-connect-top-row">
+    <!--    头部类型-->
+    <div class="home-connect-top-row">
+      <div class="home-top-body">
         <div class="top-row-item row-first">精品推荐</div>
         <!--        设置自定义宽度-->
-        <div class="top-row-item" v-for="item in topRow" :key="item.name" @click="clickTopRow(item.url)"
-             :style="topRowStyle">
+        <div class="top-row-item" v-for="item in topRow" :key="item.name" :style="topRowStyle">
           <span>{{ item.name }}</span>
         </div>
       </div>
+    </div>
+
+    <div class="home-connect-row">
       <div class="row-bottom">
         <!--    侧边类型-->
         <div class="row-left">
+          <div class="row-left-down">
+
+          </div>
           <div v-for="index in 9">
             <AdvertisingLeftButton :adver="new AdverLeft('测试', '1')"></AdvertisingLeftButton>
           </div>
@@ -73,34 +79,52 @@ function clickTopRow(url: string) {
 
 <style scoped lang="scss">
 
-.home-connect {
-  width: 1170px;
-  margin: 0 auto 50px auto;
 
-  .home-connect-row {
-    display: inline-block;
+.home-connect {
+  .home-connect-top-row {
+    width: 100%;
+    background: black;
 
-    .home-connect-top-row {
-      padding: 0 1px;
+    .home-top-body {
+      width: 1170px;
+      margin: 0 auto;
       display: flex;
 
       .row-first {
         width: 268px;
+        background: #111;
       }
 
       .top-row-item {
         line-height: 40px;
         height: 40px;
         margin-left: 5px;
-        background: #8a65d9;
         flex-grow: 1;
+        color: white;
+        cursor: pointer;
+        min-width: 80px;
+
+        &:hover {
+          background: #333;
+        }
 
         &:first-child {
           margin-left: 0;
         }
 
+        &:first-child:hover {
+          background: #111;
+        }
       }
     }
+  }
+
+
+  .home-connect-row {
+    display: inline-block;
+    //background: black;
+    width: 1170px;
+    margin: 0 auto 50px auto;
 
     .row-bottom {
       border: #dcdcdc solid;
@@ -114,6 +138,14 @@ function clickTopRow(url: string) {
         width: 268px;
         height: 100%;
         background: white;
+
+        .row-left-down {
+          height: 10px;
+          width: 21px;
+          background: #111;
+          margin: 0 auto;
+          clip-path: polygon(0 0, 21px 0px, 10px 10px);
+        }
       }
 
       .row-right {

src/router/index.ts

@@ -8,6 +8,18 @@ var routes: Array<RouteRecordRaw> = [
         component: () => import("../page/Home.vue"),
         children: []
     },
+    {
+        name: "detail",
+        path: "/detail",
+        component: () => import("../page/DetailPage.vue"),
+        children: [
+            {
+                name: "detail",
+                path: "/detail/:path(.*)",
+                component: () => import("../page/DetailPage.vue")
+            }
+        ]
+    },
     {
         name: "info",
         path: "/info",

src/views/BottomBar.vue

@@ -55,8 +55,8 @@
 <style scoped lang="scss">
 .bottom-bar {
   background: white;
-  margin: 25px 0 0 0 ;
-  padding: 60px 0 0 0;
+  margin: 0;
+  padding: 85px 0 0 0;
 
   .partners-line {
     margin: auto;