修改首页广告横幅内容及布局

src/App.vue

@@ -1,10 +1,13 @@
 <!--页面居中对齐margin auto 0,宽度1200-->
 <template>
-  <div>
-    <router-view></router-view>
-  </div>
+  <NavigationBar/>
+  <router-view></router-view>
+  <BottomBar/>
 </template>
 <script setup lang="ts">
+import BottomBar from "./views/BottomBar.vue";
+import NavigationBar from "./views/NavigationBar.vue";
+
 </script>
 <style scoped>
 </style>

src/assets/svg/right.svg

@@ -0,0 +1,5 @@
+<svg t="1712644066722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4236"
+     width="200" height="200">
+    <path d="M731.7 475.1L370.6 80.8c-19.7-21.5-53-22.9-74.4-3.3-21.5 19.7-22.9 53-3.3 74.4l328.6 358.8-328.3 359.8c-19.6 21.5-18.1 54.8 3.4 74.4 21.5 19.6 54.8 18.1 74.4-3.4l360.5-394.9c0.7-0.8 1.5-1.7 2.1-2.5 16.4-19.9 16.1-49.4-1.9-69z"
+          p-id="4237" fill="#808080"></path>
+</svg>

src/components/AdverisingRight.vue

@@ -0,0 +1,76 @@
+<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>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {AdverRightData} from '../entity/AdverRightData.ts'
+import {defineProps} from 'vue'
+
+const props = defineProps({
+  data: {
+    type: AdverRightData,
+    default: () => []
+  }
+})
+
+
+</script>
+
+<style scoped lang="scss">
+* {
+  display: block;
+}
+
+.right-row {
+  display: flex;
+
+  justify-content: space-between;
+  height: 450px;
+
+  .right-item {
+    display: flex;
+    justify-content: space-between;
+    width: 300px;
+    height: 450px;
+
+    img {
+      margin: 0;
+      width: 300px;
+    }
+
+    .item-btn {
+      position: absolute;
+      margin: 350px auto 28px auto;
+      background: white;
+      width: 168px;
+      height: 38px;
+      line-height: 38px;
+      border-radius: 15px;
+    }
+
+    &:hover {
+      &::after {
+        display: block;
+      }
+    }
+
+    &::after {
+      content: '';
+      display: none;
+      position: absolute;
+      width: 300px;
+      height: 450px;
+      background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+
+    }
+
+  }
+}
+</style>

src/components/AdvertisingLeftButton.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="adver">
+    <div class="adver-name">
+      <span>{{ adver.name }}</span>
+    </div>
+    <div class="adver-icon">
+      <img src="../assets/svg/right.svg" width="24" height="24">
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {AdverLeft} from "../entity/AdverLeft.ts";
+
+const props = defineProps({
+  adver: {
+    type: AdverLeft,
+    required: true
+  }
+})
+
+
+</script>
+
+<style scoped lang="scss">
+.adver {
+  margin: 0;
+  padding: 0;
+  width: 268px;
+  display: flex;
+  justify-content: space-between;
+
+  height: 40px;
+  cursor: pointer;
+
+  &:hover .adver-name span {
+    text-decoration: underline;
+  }
+
+  .adver-name {
+    margin-left: 19px;
+    display: inline-block;
+    width: 228px;
+    height: 40px;
+    align-items: start;
+    justify-content: space-between;
+    vertical-align: top;
+    text-align: left;
+
+    span {
+      line-height: 40px;
+      text-decoration: none;
+      color: #333333;
+    }
+  }
+
+  .adver-icon {
+    display: inline-block;
+    align-items: end;
+    justify-content: space-between;
+    width: 40px;
+    height: 40px;
+
+    img {
+      height: 12px;
+      margin-top: 14px;
+      align-items: center;
+      vertical-align: middle;
+      line-height: 40px;
+    }
+
+  }
+
+  border-bottom: 1px solid #e5e5e5;
+}
+</style>

src/entity/AdverLeft.ts

@@ -0,0 +1,9 @@
+export class AdverLeft {
+    name: string
+    goodsId: string
+
+    constructor(name: string, goodsId: string) {
+        this.name = name;
+        this.goodsId = goodsId;
+    }
+}

src/entity/AdverRightData.ts

@@ -0,0 +1,11 @@
+export class AdverRightData {
+    len: number;
+    image: string[];
+    goodsId: string[];
+
+    constructor(len: number, image: string[], goodsId: string[]) {
+        this.len = len;
+        this.image = image;
+        this.goodsId = goodsId;
+    }
+}

src/page/index.vue → src/page/Home.vue

@@ -1,25 +1,24 @@
 <template>
   <div class="home">
     <AdvertisementBar v-show="false"/>
-    <NavigationBar/>
+
     <!--    内容体-->
     <HomeConnect/>
     <GiftPackDiscounts/>
     <template v-for="item in goodsListArray">
       <GoodsTypeComponent :goods-type="item"/>
     </template>
-    <BottomBar/>
+    <router-view />
   </div>
 </template>
 <script setup lang="ts">
-import HomeConnect from "./HomeConnent.vue";
+import HomeConnect from "./HomeAdvertisement.vue";
 import GoodsTypeComponent from "../components/GoodsTypeComponent.vue";
 import {GoodsInfo, GoodsType} from "../entity/Entity.ts";
 import {ref} from 'vue'
 import GiftPackDiscounts from "./GiftPackDiscounts.vue";
-import NavigationBar from "./NavigationBar.vue";
-import BottomBar from "./BottomBar.vue";
-import AdvertisementBar from "../components/AdvertisementBar.vue";
+
+import AdvertisementBar from "../components/AdvertisingLeft.vue";
 
 
 let goodsListArray = ref([

src/page/HomeConnent.vue → src/page/HomeAdvertisement.vue

@@ -6,19 +6,23 @@
         <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"
-        >
+             :style="topRowStyle">
           <span>{{ item.name }}</span>
         </div>
       </div>
       <div class="row-bottom">
         <!--    侧边类型-->
         <div class="row-left">
-          内容
+          <div v-for="index in 9">
+            <AdvertisingLeftButton :adver="new AdverLeft('测试', '1')"></AdvertisingLeftButton>
+          </div>
         </div>
         <!--    广告图展示-->
         <div class="row-right">
-          广告
+          <AdverisingRight :data="new AdverRightData(
+              3,
+              ['../assets/adver.jpg','../assets/adver.jpg','../assets/adver.jpg'],['','','']
+          )"/>
         </div>
       </div>
     </div>
@@ -27,6 +31,10 @@
 </template>
 <script setup lang="ts">
 import {ref} from "vue";
+import AdvertisingLeftButton from "../components/AdvertisingLeftButton.vue";
+import {AdverLeft} from "../entity/AdverLeft.ts";
+import AdverisingRight from "../components/AdverisingRight.vue";
+import {AdverRightData} from "../entity/AdverRightData.ts";
 
 class TopRow {
   public name: string
@@ -49,7 +57,7 @@ let topRowStyle = ref(getTopRowWidth())
 
 function getTopRowWidth() {
   let topRowLen = topRow.value.length
-  let width = (1170 - 300 - (topRowLen) * 5) / topRow.value.length
+  let width = (1170 - 268 - (topRowLen) * 5) / topRow.value.length
   return {
     width: width + 'px'
   }
@@ -67,51 +75,52 @@ function clickTopRow(url: string) {
 
 .home-connect {
   width: 1170px;
-  color: black;
   margin: 0 auto 50px auto;
+
   .home-connect-row {
     display: inline-block;
 
     .home-connect-top-row {
+      padding: 0 1px;
       display: flex;
 
       .row-first {
-        width: 300px;
+        width: 268px;
       }
 
       .top-row-item {
         line-height: 40px;
         height: 40px;
         margin-left: 5px;
-        //border: #535bf2 1px solid;
         background: #8a65d9;
         flex-grow: 1;
 
         &:first-child {
           margin-left: 0;
         }
+
       }
     }
 
     .row-bottom {
-      div {
-        display: inline-block;
-      }
+      border: #dcdcdc solid;
+      border-width: 0px 1px 1px 1px;
+      display: flex;
 
       height: 450px;
 
       .row-left {
-        width: 300px;
+        display: inline-block;
+        width: 268px;
         height: 100%;
-        background: #6ac5a9;
-
+        background: white;
       }
 
       .row-right {
-        width: 865px;
+        display: inline-block;
+        //width: 865px;
         height: 100%;
         margin-left: 5px;
-        background: #1d1d1d;
       }
     }
   }

src/page/Info.vue

@@ -0,0 +1,16 @@
+<template>
+  <div style="height: 800px;width: 100%;background: #8a65d9">
+    你好，这里在进行测试
+   666 {{id}}
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from "vue";
+import {useRoute} from "vue-router";
+const route = useRoute();
+const id = ref(route.params.path)
+
+</script>
+<style scoped lang="scss">
+
+</style>

src/router/index.ts

@@ -1,12 +1,25 @@
 import {createRouter, createWebHistory, RouteRecordRaw} from "vue-router";
 
 // 2. 配置路由
-const routes: Array<RouteRecordRaw> = [
+var routes: Array<RouteRecordRaw> = [
     {
         name: "home",
-        path: "/", component: () => import("../page/index.vue"),
+        path: "/",
+        component: () => import("../page/Home.vue"),
         children: []
     },
+    {
+        name: "info",
+        path: "/info",
+        component: () => import("../page/Info.vue"),
+        children: [
+            {
+                name: "login",
+                path: "/info/:path(.*)",
+                component: () => import("../page/Info.vue")
+            }
+        ]
+    }
 ];
 // 1.返回一个 router 实列，为函数，里面有配置项（对象） history
 const router = createRouter({

src/page/BottomBar.vue → src/views/BottomBar.vue

@@ -36,7 +36,9 @@
     </div>
     <!--    其他信息-->
     <div class="other-info">
-      <div class="other-info-row1"></div>
+      <div class="other-info-row1">
+        <router-link to="/info/test">测试</router-link>
+      </div>
       <div class="other-info-row2"></div>
     </div>
     <!--    备案-->