添加登录，添加部分底部bar

src/assets/close.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1712557614160" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5349" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M566.4 512l318.4-318.4c16-16 16-38.4 0-54.4s-38.4-16-54.4 0L512 457.6 192 140.8c-14.4-16-38.4-16-52.8 0s-16 38.4 0 54.4L457.6 512 139.2 830.4c-16 16-16 38.4 0 54.4 8 6.4 16 11.2 27.2 11.2s19.2-3.2 27.2-11.2l320-318.4 320 316.8c8 6.4 19.2 11.2 27.2 11.2s19.2-3.2 27.2-11.2c16-16 16-38.4 0-54.4L566.4 512z" p-id="5350"></path></svg>

src/assets/email.svg

@@ -0,0 +1,5 @@
+<svg t="1712559418951" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7326"
+     width="200" height="200">
+    <path d="M874.666667 181.333333H149.333333c-40.533333 0-74.666667 34.133333-74.666666 74.666667v512c0 40.533333 34.133333 74.666667 74.666666 74.666667h725.333334c40.533333 0 74.666667-34.133333 74.666666-74.666667V256c0-40.533333-34.133333-74.666667-74.666666-74.666667z m-725.333334 64h725.333334c6.4 0 10.666667 4.266667 10.666666 10.666667v25.6L512 516.266667l-373.333333-234.666667V256c0-6.4 4.266667-10.666667 10.666666-10.666667z m725.333334 533.333334H149.333333c-6.4 0-10.666667-4.266667-10.666666-10.666667V356.266667l356.266666 224c4.266667 4.266667 10.666667 4.266667 17.066667 4.266666s12.8-2.133333 17.066667-4.266666l356.266666-224V768c0 6.4-4.266667 10.666667-10.666666 10.666667z"
+          fill="#666666" p-id="7327"></path>
+</svg>

src/assets/password.svg

@@ -0,0 +1,5 @@
+<svg t="1712559459066" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2594"
+     width="200" height="200">
+    <path d="M768 426.666667V341.333333A256 256 0 0 0 256 341.333333v85.333334a85.333333 85.333333 0 0 0-85.333333 85.333333v341.333333a85.333333 85.333333 0 0 0 85.333333 85.333334h512a85.333333 85.333333 0 0 0 85.333333-85.333334v-341.333333a85.333333 85.333333 0 0 0-85.333333-85.333333zM341.333333 341.333333a170.666667 170.666667 0 0 1 341.333334 0v85.333334H341.333333z m298.666667 320a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z m-170.666667 0a21.333333 21.333333 0 0 1 21.333334-21.333333h42.666666a21.333333 21.333333 0 0 1 21.333334 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333334 21.333333h-42.666666a21.333333 21.333333 0 0 1-21.333334-21.333333z m-170.666666 42.666667v-42.666667a21.333333 21.333333 0 0 1 21.333333-21.333333h42.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v42.666667a21.333333 21.333333 0 0 1-21.333333 21.333333h-42.666667a21.333333 21.333333 0 0 1-21.333333-21.333333z"
+          fill="#666666"  p-id="2595"></path>
+</svg>

src/assets/phone.svg

@@ -0,0 +1,7 @@
+<svg t="1712559330707" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6336"
+     width="200" height="200">
+    <path d="M756.081 1012.218H291.154c-68.473 0-123.982-55.975-123.982-125.054V136.836c0-69.078 55.512-125.054 123.982-125.054h464.928c68.474 0 123.984 55.975 123.984 125.054v750.328c0 69.078-55.511 125.054-123.985 125.054z m61.981-875.382c0-34.516-27.751-62.526-61.98-62.526H291.154c-34.228 0-61.991 28.01-61.991 62.526v31.268h588.899v-31.268z m0 93.794H229.163v499.242h588.899V230.63z m0 561.768H229.163v94.766c0 34.54 27.765 62.526 61.991 62.526h464.928c34.229 0 61.98-27.986 61.98-62.526v-94.766zM523.623 918.429c-25.668 0-46.482-20.993-46.482-46.896 0-25.903 20.816-46.895 46.482-46.895 25.664 0 46.477 20.993 46.477 46.895s-20.813 46.896-46.477 46.896z"
+          fill="#666666" p-id="6337"></path>
+    <path d="M756.081 1017.218H291.154c-71.121 0-128.982-58.342-128.982-130.054V136.836c0-71.712 57.861-130.054 128.982-130.054h464.928c71.122 0 128.984 58.342 128.984 130.054v750.328c0 71.712-57.862 130.054-128.985 130.054zM291.154 16.783c-65.607 0-118.982 53.856-118.982 120.054v750.328c0 66.198 53.375 120.054 118.982 120.054h464.927c65.608 0 118.985-53.855 118.985-120.054V136.836c0-66.198-53.376-120.054-118.984-120.054H291.154zM756.082 954.69H291.154c-36.939 0-66.991-30.292-66.991-67.526v-99.766h598.899l0.001 99.766c0 37.234-30.047 67.526-66.981 67.526zM234.163 797.398v89.766c0 31.72 25.566 57.526 56.991 57.526h464.928c31.419 0 56.98-25.807 56.98-57.526v-89.766H234.163z m289.46 126.031c-28.387 0-51.482-23.28-51.482-51.896s23.096-51.895 51.482-51.895c28.385 0 51.477 23.279 51.477 51.895s-23.092 51.896-51.477 51.896z m0-93.79c-22.873 0-41.482 18.794-41.482 41.895 0 23.102 18.609 41.896 41.482 41.896 22.871 0 41.477-18.794 41.477-41.896 0-23.101-18.606-41.895-41.477-41.895z m299.439-94.767H224.163V225.63h598.899v509.242z m-588.899-10h578.899V235.63H234.163v489.242z m588.899-551.768H224.163v-36.268c0-37.234 30.052-67.526 66.991-67.526h464.927c36.934 0 66.98 30.292 66.98 67.526v36.268z m-588.899-10h578.899v-26.268c0-31.72-25.562-57.526-56.98-57.526H291.154c-31.425 0-56.991 25.806-56.991 57.526v26.268z"
+          fill="#666666" p-id="6338"></path>
+</svg>

src/components/AdvertisementBar.vue

@@ -0,0 +1,52 @@
+<template>
+  <!--      悬浮层  -->
+  <div class="home-suspension">
+    <div class="right-handler"></div>
+    <div class="bottom-advertisement">
+      <div class="advertisement-content">
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+<style scoped lang="scss">
+.home-suspension {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  z-index: 998;
+
+  .bottom-advertisement {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 130px;
+    background: #8a65d9;
+
+    .advertisement-content {
+      width: 1180px;
+      height: 130px;
+      margin: auto auto;
+      //左右渐变
+      background: linear-gradient(to right, #8a65d9, #6ac5a9, #6ac5a9, #8a65d9);
+    }
+  }
+
+  .right-handler {
+    position: fixed;
+    bottom: 50px;
+    right: 0;
+    width: 100px;
+    height: 300px;
+    background-image: linear-gradient(#4466FF, #a028d3);
+    z-index: 1;
+  }
+
+
+}
+</style>

src/components/GoodsInfoComponent.vue

@@ -38,6 +38,7 @@ function getImage(url: string) {
 
   &:hover {
     cursor: pointer;
+    background: rgba(224, 224, 224, 0.4);
   }
 
   .goods-img {

src/components/Header.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-
-</script>
-
-<template>
-  <div>
-    <div class="card">
-      <div class="card-body">
-        <h1 class="card-title">
-          <router-link to="/">
-            <img src="./assets/logo.svg" alt="logo" width="100" height="100" />
-          </router-link>
-        </h1>
-        <div class="card-text">
-          <router-link to="/">Home</router-link>
-          <router-link to="/about">About</router-link>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>

src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/Login.vue

@@ -0,0 +1,314 @@
+<template>
+  <div class="home-shield " v-show="showLogin">
+    <div class="login-form">
+      <!-- 关闭登录界面 -->
+      <div class="login-form-close" @click="func()">
+        <img src="../assets/close.svg" width="16" height="16"/>
+      </div>
+      <div class="login-form-body">
+        <!-- 选择登录方式 -->
+        <div class="login-form-select">
+          <ul>
+            <li v-for="(item,index) in loginType" @click="selectLoginTypeFunc(index)">
+              <span :class="(selectLoginType === index?'login-type':'' )+' login-type-base'">{{ item.name }}登录</span>
+            </li>
+          </ul>
+        </div>
+        <form>
+          <div class="form-body">
+            <div class="input-username" id="input-username"
+                 :class="calibrationUsername?'input-box-focus':'input-box-focus-error'">
+              <img src="../assets/phone.svg" width="22" height="22">
+              <input :placeholder="'请输入'+(loginType[selectLoginType].name)" name="username"
+                     @blur="checkUsername(false)" @focus="checkUsername(true)"
+                     v-model="username">
+            </div>
+            <div class="input-username-tip">
+              <span>&nbsp;{{ showUsernameTip }}</span>
+            </div>
+            <div class="input-pass" id="input-pass" :class="calibrationPass?'input-box-focus':'input-box-focus-error'">
+              <img src="../assets/password.svg" width="22" height="22">
+              <input :placeholder="'请输入'+(loginType[selectLoginType].type==='phone'?'验证码':'密码')"
+                     :style="loginType[selectLoginType].type==='email'?{width: '100%'}:{}"
+                     :type="loginType[selectLoginType].type==='email'?'password':'input'"
+                     @blur="checkPass(false)" @focus="checkPass(true)"
+                     name="password" v-model="password">
+              <div class="input-pass-btn" v-show="loginType[selectLoginType].type==='phone'">
+                获取验证码
+              </div>
+            </div>
+            <div class="input-pass-tip">
+              <span>&nbsp;{{ showPassTip }}</span>
+            </div>
+            <div class="input-btn" @click="login()">
+              <span>立即登录</span>
+            </div>
+          </div>
+          {{ username }}
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref, watch} from "vue";
+import {LoginType} from '../entity/LoginData.ts';
+import {validateHeaderName} from "node:http";
+//获取父组件获取的值，并可以进行修改
+const props = defineProps({
+  showLogin: {
+    type: Boolean,
+  },
+  func: {
+    type: Function
+  }
+})
+
+let loginType = ref([new LoginType('phone', '手机'), new LoginType('email', '邮箱')])
+
+let selectLoginType = ref(0)
+
+
+let selectType = ref("phone")
+let username = ref("")
+let showUsernameTip = ref("")
+let calibrationUsername = ref(true)
+
+let password = ref("")
+let showPassTip = ref("")
+let calibrationPass = ref(true)
+
+function selectLoginTypeFunc(index) {
+  username.value = ""
+  password.value = ""
+  selectLoginType.value = index
+  selectType.value = loginType.value[index].type
+}
+
+function checkUsername(isFocus) {
+  console.log(isFocus)
+  if (selectType.value === "phone") {
+    //校验手机号
+    const reg = /^1[3-9]\d{9}$/
+    if (reg.test(username.value)) {
+      calibrationUsername.value = false
+      showPassTip.value = "手机号格式错误"
+    } else {
+      calibrationUsername.value = true
+      showPassTip.value = ""
+    }
+  } else {
+    //校验邮箱
+    const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
+    if (reg.test(username.value)) {
+      calibrationUsername.value = false
+      showPassTip.value = "邮箱格式错误"
+    } else {
+      calibrationUsername.value = true
+      showPassTip.value = ""
+    }
+  }
+}
+
+function checkPass(isFocus) {
+  console.log(isFocus)
+  if (selectType.value === "phone") {
+    if (password.value.length !== 6) {
+      calibrationPass.value = true
+      showPassTip.value = "验证码错误"
+    } else {
+      calibrationPass.value = false
+      showPassTip.value = ""
+    }
+  } else {
+    if (password.value.length < 6) {
+      calibrationPass.value = true
+      showPassTip.value = "密码过短"
+    } else {
+      calibrationPass.value = false
+      showPassTip.value = ""
+    }
+  }
+}
+
+watch(username, (newValue, oldValue) => {
+  console.log(newValue, oldValue)
+})
+
+function login() {
+  console.log(selectType.value + " | " + username.value + " | " + password.value)
+}
+
+</script>
+<style>
+.home-shield {
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: fixed;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+
+  .login-form {
+
+    width: 400px;
+    height: 0;
+    margin: auto;
+    position: fixed;
+    top: 25%;
+    left: calc(50% - 200px);
+    color: black;
+
+    .login-form-body {
+      align-items: center;
+      display: inline-block;
+      background: white;
+      width: 300px;
+      height: 325px;
+      padding: 50px;
+
+      .login-form-select {
+        margin-bottom: 40px;
+
+        ul {
+          margin: 0;
+          padding: 0;
+          list-style: none;
+          text-align: left;
+          height: 36px;
+          font-size: 18px;
+
+          li {
+            cursor: pointer;
+            display: inline-block;
+
+            &:nth-child(n+2) {
+              margin-left: 15px;
+            }
+          }
+        }
+      }
+
+      .login-type {
+        font-size: 24px;
+        font-weight: bold;
+      }
+
+      .login-type-base {
+        transition: font-size 0.3s;
+      }
+    }
+
+    .login-form-close {
+      width: 54px;
+      height: 54px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      right: 0;
+      transition: background-color 0.3s ease;
+
+      &:hover {
+        cursor: pointer;
+        background: rgba(204, 204, 204, 0.3);
+      }
+    }
+  }
+
+  .form-body {
+    .input-username {
+      border: 1px #bbbbbb solid;
+      padding: 10px;
+      border-radius: 10px;
+      width: 278px;
+      display: flex;
+
+
+      img {
+        justify-content: center;
+        align-items: center;
+      }
+
+      input {
+        margin-left: 10px;
+        font-size: 14px;
+        outline: none;
+        border: none;
+        width: 258px;
+      }
+    }
+
+    .input-pass {
+      width: 278px;
+      border: 1px #bbbbbb solid;
+      padding: 10px;
+      border-radius: 10px;
+      display: flex;
+      font-size: 14px;
+
+      img {
+        justify-content: center;
+        align-items: center;
+      }
+
+      input {
+        margin-left: 10px;
+        outline: none;
+        border: none;
+      }
+
+      .input-pass-btn {
+        /*文本禁止选取*/
+        user-select: none;
+        color: #1475fa;
+        cursor: pointer;
+      }
+    }
+
+    .input-box-focus {
+      &:hover {
+        border: 1px #1475fa solid;
+      }
+
+      &:focus {
+        box-shadow: #1475fa 1px 1px 10px;
+      }
+    }
+
+    .input-box-focus-error {
+      &:hover {
+        border: 1px #ff4d4f solid;
+      }
+
+      &:focus {
+        box-shadow: #ff4d4f 1px 1px 10px;
+      }
+    }
+
+    .input-username-tip, .input-pass-tip {
+      user-select: none;
+      text-align: left;
+      color: #ff4d4f;
+    }
+
+    .input-btn {
+      flex: auto;
+      height: 42px;
+      background: #207cfb;
+      border-radius: 10px;
+      color: white;
+      text-align: center;
+      vertical-align: middle;
+      justify-content: center;
+      line-height: 42px;
+      /*文本禁止选取*/
+      user-select: none;
+      cursor: pointer;
+    }
+  }
+
+}
+</style>

src/entity/LoginData.ts

@@ -0,0 +1,47 @@
+export class Login {
+    private _type: string;
+    private _username: string;
+    private _password: string;
+
+    constructor(type: string, username: string, password: string) {
+        this._type = type;
+        this._username = username;
+        this._password = password;
+    }
+
+    get type(): string {
+        return this._type;
+    }
+
+    set type(value: string) {
+        this._type = value;
+    }
+
+    get username(): string {
+        return this._username;
+    }
+
+    set username(value: string) {
+        this._username = value;
+    }
+
+    get password(): string {
+        return this._password;
+    }
+
+    set password(value: string) {
+        this._password = value;
+    }
+}
+
+export class LoginType {
+    type: string
+    name: string
+
+    constructor(type: string, name: string) {
+        this.type = type;
+        this.name = name;
+    }
+
+    //临时的数据信息
+}

src/page/BottomBar.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="bottom-bar">
+    <!--    合作伙伴-->
+    <div class="partners">
+      <div class="partners-line">
+        <ul>
+          <li>
+            <img style="transform: rotate(180deg);"
+                 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
+          </li>
+          <li v-for="index in 9">
+            <div class="" :key="index">
+              <img src="../assets/steam-partners.png" alt="">
+            </div>
+          </li>
+          <li>
+            <img
+                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAeCAYAAADzXER0AAAAAXNSR0IArs4c6QAAAhdJREFUSEulVU1rE1EUPdfEgBAIg27UjT+jS13pTpeKriMxRQxJ3hukBnc2ZUwiLUFGxRbbKqZ/Rve+2bswkSB13jDvygtJSZPJl5nlzJz7zr33nPNISlmL4/it53k/seJDQoh3RMRKqc1Op6NXwZOU8j6ABoATrfXLZrP5a9kCVC6Xr6TT6a8ANpj5Y6/Xe+b7frRMAbI/SSkLANoALG1Pa/16GQYDcLFYvJzNZr8DuAbgFMBxGIaVVqvVm8dgAM7n8xcdx3kDwDIAM4dE1FZKufOGOADbp1Kp3EylUkfD0+0rzczvoyh6MauFM3ChUHByudwxM98ZFWRm28JeEARbSQzOwMPBPQLwaaLP0Bizz8y1SSGdA5dKpUuZTOYHgKsTBf4C+KKUejzO4BzYAlzX3WXmJwAuTBQYrLHb7e74vv/bfpsCCyE2iOgzgBsJazq1QjLGCM/z/iSd7Bhjdono4Ywd2xYa/X7/1RTYAoQQ94hoH0BuVgFjzEkiWEp5F8DBPLA10jzaDxKGZonMpr3EwD4YY9zEgUkp94YaT1qV9f12vV6fXtVaIpFSJsnT6vswjuOtmfJ0XddhZiuO22PrsaJoB0HwfK4xhBC3iOhwZUuuFQbDGPoG4PoohrTWYlGOjQKwaE0/DMBGGIb1Rfk1cNVa0SuEsO7ZAXAURdH2IqrjRhldN7FS6unK1021Wq0x839ddP8AAxJAzJtS4CsAAAAASUVORK5CYII="/>
+          </li>
+        </ul>
+      </div>
+      <!--      服务支持-->
+      <div class="partners-service-guarantee">
+        <template v-for="index in 4">
+          <div class="service-guarantee">
+            <div class="sg-icon">
+              <img src="../assets/vue.svg" width="32" height="32">
+            </div>
+            <div class="sg-info">
+              <div>自动发货</div>
+              <div>提供最快发货</div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <!--    其他信息-->
+    <div class="other-info">
+      <div class="other-info-row1"></div>
+      <div class="other-info-row2"></div>
+    </div>
+    <!--    备案-->
+    <div class="filing">
+      <div class="filing-body">xxx省xxx市xxx区666号xxx公司</div>
+    </div>
+
+  </div>
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+.bottom-bar {
+  background: white;
+  margin: 25px 0 0 0 ;
+  padding: 60px 0 0 0;
+
+  .partners-line {
+    margin: auto;
+    width: 1170px;
+    height: 100px;
+
+    ul {
+      padding: 25px 0 0 0;
+      list-style: none;
+      display: flex;
+      justify-content: space-between;
+      li {
+        height: 46px;
+        display: flex;
+        margin: 0 10px;
+        justify-content: space-between;
+        align-items: center;
+
+      }
+    }
+  }
+
+  .partners-service-guarantee {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 1180px;
+    margin: 60px auto;
+    border-bottom: 1px solid #e5e5e5;
+
+    .service-guarantee {
+      display: flex;
+      text-align: left;
+      margin-bottom: 20px;
+      .sg-icon {
+        height: 60px;
+        width: 60px;
+        border-radius: 50%;
+        background: #8a65d9;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .sg-info {
+        justify-content: center;
+        align-items: center;
+        height: 38px;
+        margin-top: 8px;
+        margin-left: 16px;
+
+
+        div:nth-child(1) {
+
+          color: #333333;
+          display: block;
+          box-sizing: border-box;
+          line-height: 16px;
+          width: 100%;
+          font-size: 16px;
+          font-weight: bold;
+        }
+
+        div:nth-child(2) {
+          color: #8b8b8b;
+          display: block;
+          margin-top: 8px;
+          box-sizing: border-box;
+          line-height: 14px;
+          width: 100%;
+          font-size: 14px;
+        }
+
+      }
+    }
+  }
+
+  .filing-body {
+    text-align: center;
+    color: #8b8b8b;
+    padding-bottom: 15px;
+  }
+
+}
+</style>

src/page/NavigationBar.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="navigation-bar">
+    <div class="nav-body">
+      <router-link to="/" class="nav-logo">
+        <img src="../assets/logo.png" alt="logo"/>
+      </router-link>
+      <div class="nav-search">
+        <div class="nav-search-div">
+          <input class="search-input" type="text" placeholder="搜索商品名称"/>
+        </div>
+        <!--          点击-->
+        <button class="search-btn">
+          <img src="../assets/nav_search-logo.svg" alt="搜索">
+        </button>
+      </div>
+      <div class="nav-user">
+        <div class="nav-user-icon" @click="showLogin = true">
+          <div class="nav-user-icon-bg">
+            <img src="../assets/nav_user_icon.svg" alt="登录">
+          </div>
+          <span>登录</span>
+        </div>
+        <div class="nav-user-menu">
+          <div class="nav-user-icon-bg">
+            <img src="../assets/nav_user_menu.svg" alt="菜单">
+          </div>
+        </div>
+      </div>
+    </div>
+    <Login :show-login="showLogin" :func="func"/>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from "vue";
+import Login from "../components/Login.vue";
+
+let showLogin = ref(false)
+
+let func = function () {
+  showLogin.value = !showLogin.value
+  return showLogin.value
+}
+
+</script>
+<style scoped lang="scss">
+
+.navigation-bar {
+  display: flex;
+  place-items: center;
+  height: 80px;
+
+  background: #000000;
+
+  .nav-body {
+    height: 100%;
+    width: 1170px;
+    margin: auto auto;
+    display: grid;
+    grid-template-columns: 135px 1fr 150px;
+
+    .nav-logo {
+      grid-area: 1 / 1 / 2 / 2;
+      margin: auto auto;
+    }
+
+    .nav-search {
+      width: 450px;
+      height: 40px;
+      margin: auto auto;
+      display: flex;
+      border: none;
+
+      .nav-search-div {
+
+        .search-input {
+          width: 370px;
+          height: 40px;
+          //padding-left: 15px;
+          padding: 0 0 0 15px;
+          font-size: 14px;
+          border: none;
+          outline: none;
+          border-radius: 5px 0 0 5px;
+        }
+      }
+
+      .search-btn {
+        width: 70px;
+        height: 40px;
+        outline: none;
+        margin: 0;
+        border: none;
+        background: #1475fa;
+        border-radius: 0 5px 5px 0;
+
+        &:hover {
+          border: none;
+          cursor: pointer;
+        }
+
+        &:active {
+          border: none;
+          background: #1470da;
+          cursor: pointer;
+        }
+
+      }
+    }
+
+    .nav-user {
+      display: grid;
+      grid-template-columns: 70px 48px;
+      margin: auto auto;
+      width: 150px;
+      height: 70px;
+      color: white;
+
+      .nav-user-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 72px;
+        cursor: pointer;
+      }
+
+      .nav-user-menu {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 48px;
+        margin-left: 30px;
+
+      }
+
+      .nav-user-icon-bg {
+        width: 35px;
+        height: 35px;
+        border-radius: 50%;
+        background: #1d1d1d;
+        margin-right: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+          cursor: pointer;
+          margin: 0;
+        }
+      }
+    }
+  }
+}
+
+
+</style>

src/page/index.vue

@@ -1,122 +1,26 @@
 <template>
   <div class="home">
-    <div class="navigation-bar">
-      <div class="nav-body">
-        <router-link to="/" class="nav-logo">
-          <img src="../assets/logo.png"/>
-        </router-link>
-        <div class="nav-search">
-          <div class="nav-search-div">
-            <input class="search-input" type="text" placeholder="搜索商品名称"/>
-          </div>
-          <!--          点击-->
-          <button class="search-btn">
-            <img src="../assets/nav_search-logo.svg" alt="搜索">
-          </button>
-        </div>
-        <div class="nav-user">
-          <div class="nav-user-icon" @click="login()">
-            <div class="nav-user-icon-bg">
-              <img src="../assets/nav_user_icon.svg" alt="登录">
-            </div>
-            <span>登录</span>
-          </div>
-          <div class="nav-user-menu">
-            <div class="nav-user-icon-bg">
-              <img src="../assets/nav_user_menu.svg" alt="菜单">
-            </div>
-          </div>
-        </div>
-      </div>
-
-    </div>
+    <AdvertisementBar v-show="false"/>
+    <NavigationBar/>
     <!--    内容体-->
-    <div class="main-content">
-      <!--      首页广告内容-->
-      <HomeConnect/>
-      <!--      首页优惠礼包信息-->
-      <GiftPackDiscounts/>
-      <!--      <hr width="1170" style="margin-bottom: 40px;">-->
-      <template v-for="item in goodsListArray">
-        <GoodsTypeComponent :goods-type="item"/>
-        <GoodsTypeComponent :goods-type="item"/>
-      </template>
-
-    </div>
-    <!--    底部内容-->
-    <div class="bottom-bar">
-    </div>
-    <!--    遮罩层-->
-    <div class="home-shield " v-show="showLogin">
-      <div class="login-form">
-        <div class="login-form-body">
-          <!-- 关闭登录界面 -->
-          <div class="login-form-body-close" @click="login">
-            X
-          </div>
-          <!-- 选择登录方式 -->
-          <div class="login-form-select">
-            <ul>
-              <li v-for="(item,index) in loginType" @click="selectLoginType = index">
-                {{ item.name }}登录
-              </li>
-            </ul>
-          </div>
-          <!--          登录内容体-->
-          <div class="login-form-table-phone" v-show="selectLoginType === 0">
-            <form>
-              {{ loginType[selectLoginType].name }}
-            </form>
-          </div>
-          <div class="login-form-table-email" v-show="selectLoginType === 1">
-            <form>
-              {{ loginType[selectLoginType].name }}
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!--      悬浮层  -->
-    <!--    <div class="home-suspension">-->
-    <!--      <div class="right-handler"></div>-->
-    <!--      <div class="bottom-advertisement">-->
-    <!--        <div class="advertisement-content">-->
-
-    <!--        </div>-->
-    <!--      </div>-->
-    <!--    </div>-->
+    <HomeConnect/>
+    <GiftPackDiscounts/>
+    <template v-for="item in goodsListArray">
+      <GoodsTypeComponent :goods-type="item"/>
+    </template>
+    <BottomBar/>
   </div>
 </template>
 <script setup lang="ts">
 import HomeConnect from "./HomeConnent.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";
 
-let showLogin = ref(false)
-
-class LoginType {
-  type: string
-  name: string
-
-  constructor(type: string, name: string) {
-    this.type = type;
-    this.name = name;
-  }
-
-  //临时的数据信息
-}
-
-let loginType = ref([new LoginType('Phone', '手机号'), new LoginType('Email', '邮箱')])
-let selectLoginType = ref(0)
-
-function login() {
-  console.log('login')
-  showLogin.value = !showLogin.value;
-}
 
 let goodsListArray = ref([
       new GoodsType(0, "标题内容", "/router", "买了吃亏，买了上当", [
@@ -142,194 +46,5 @@ let goodsListArray = ref([
 </script>
 
 <style scoped lang="scss">
-.home-suspension {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  z-index: 998;
-
-  .bottom-advertisement {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 130px;
-    background: #8a65d9;
-
-    .advertisement-content {
-      width: 1180px;
-      height: 130px;
-      margin: auto auto;
-      //左右渐变
-      background: linear-gradient(to right, #8a65d9, #6ac5a9, #6ac5a9, #8a65d9);
-    }
-  }
-
-  .right-handler {
-    position: fixed;
-    bottom: 50px;
-    right: 0;
-    width: 100px;
-    height: 300px;
-    background-image: linear-gradient(#4466FF, #a028d3);
-    z-index: 1;
-  }
-
-
-}
-
-
-.home-shield {
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  position: absolute;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-
-  .login-form {
-    width: 400px;
-    height: 0;
-    margin: auto;
-    position: fixed;
-    top: 25%;
-    left: calc(50% - 200px);
-    color: black;
-
-    .login-form-body {
-      align-items: center;
-      display: inline-block;
-      margin: auto;
-      background: white;
-      width: 400px;
-      height: 450px;
-
-      .login-form-body-close {
-
-      }
-    }
-  }
-
-
-}
-
-.navigation-bar {
-  display: flex;
-  place-items: center;
-  height: 80px;
-
-  background: #000000;
-
-  .nav-body {
-    height: 100%;
-    width: 1170px;
-    margin: auto auto;
-    display: grid;
-    grid-template-columns: 135px 1fr 150px;
-
-    .nav-logo {
-      grid-area: 1 / 1 / 2 / 2;
-      margin: auto auto;
-    }
-
-    .nav-search {
-      width: 450px;
-      height: 40px;
-      margin: auto auto;
-      display: flex;
-      border: none;
-
-      .nav-search-div {
-
-        .search-input {
-          width: 370px;
-          height: 40px;
-          //padding-left: 15px;
-          padding: 0 0 0 15px;
-          font-size: 14px;
-          border: none;
-          outline: none;
-          border-radius: 5px 0 0 5px;
-        }
-      }
-
-      .search-btn {
-        width: 70px;
-        height: 40px;
-        outline: none;
-        margin: 0;
-        border: none;
-        background: #1475fa;
-        border-radius: 0 5px 5px 0;
-
-        &:hover {
-          border: none;
-          cursor: pointer;
-        }
-
-        &:active {
-          border: none;
-          background: #1470da;
-          cursor: pointer;
-        }
-
-      }
-    }
-
-    .nav-user {
-      display: grid;
-      grid-template-columns: 70px 48px;
-      margin: auto auto;
-      width: 150px;
-      height: 70px;
-      color: white;
-
-      .nav-user-icon {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 72px;
-        cursor: pointer;
-      }
-
-      .nav-user-menu {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 48px;
-        margin-left: 30px;
-
-      }
-
-      .nav-user-icon-bg {
-        width: 35px;
-        height: 35px;
-        border-radius: 50%;
-        background: #1d1d1d;
-        margin-right: 5px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        img {
-          cursor: pointer;
-          margin: 0;
-        }
-      }
-
-
-      //div {
-      //  margin: auto auto;
-      //}
-
-    }
-
-
-  }
-}
-
 
 </style>

src/router/index.ts

@@ -7,10 +7,6 @@ const routes: Array<RouteRecordRaw> = [
         path: "/", component: () => import("../page/index.vue"),
         children: []
     },
-    {
-        path: "/helloworld",
-        component: () => import("../components/HelloWorld.vue"),
-    },
 ];
 // 1.返回一个 router 实列，为函数，里面有配置项（对象） history
 const router = createRouter({

src/style.css

@@ -25,10 +25,8 @@ a:hover {
 
 body {
   margin: 0;
-  /*display: flex;*/
-  /*place-items: center;*/
-  /*min-width: 320px;*/
-  /*min-height: 100vh;*/
+  padding: 0;
+  background: #f0f0f0;
 }
 
 h1 {