diff --git a/index.html b/index.html
index 9af714d..b416bf1 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>三优云试剂管家</title>
 </head>
-
 <body>
   <div id="app"></div>
   <script type="module" src="/src/main.js"></script>
diff --git a/src/App.vue b/src/App.vue
index 98240ae..87ed26e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,3 +1,3 @@
 <template>
   <router-view />
-</template>
+</template>
\ No newline at end of file
diff --git a/src/assets/Frame.png b/src/assets/Frame.png
new file mode 100644
index 0000000..b964066
Binary files /dev/null and b/src/assets/Frame.png differ
diff --git a/src/assets/Group 84.png b/src/assets/Group 84.png
new file mode 100644
index 0000000..039ab0c
Binary files /dev/null and b/src/assets/Group 84.png differ
diff --git a/src/assets/Group112.png b/src/assets/Group112.png
new file mode 100644
index 0000000..e5915e6
Binary files /dev/null and b/src/assets/Group112.png differ
diff --git a/src/components/Contact.vue b/src/components/Contact.vue
new file mode 100644
index 0000000..7fa1148
--- /dev/null
+++ b/src/components/Contact.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="fixed right-0 bottom-[100px] w-[64px] flex flex-col gap-[16px]">
+    <div class="w-[64px] h-[136px] bg-white bg-custom-blue flex flex-col items-center justify-center gap-[16px]">
+      <div class="flex flex-col items-center justify-center gap-[4px] cursor-pointer">
+        <img src="../assets/Group 84.png" class="w-[24px] select-none" alt="" />
+        <span class="text-white text-[12px] select-none">在线咨询</span>
+      </div>
+      <div class="flex flex-col items-center justify-center gap-[4px] cursor-pointer" @click="openModal">
+        <img src="../assets/Frame.png" class="w-[24px] select-none" alt="" />
+        <span class="text-white text-[12px] select-none">电话咨询</span>
+      </div>
+    </div>
+    <div id="scrollToTop"
+      class="hidden w-[64px] h-[72px] bg-white bg-custom-blue flex items-center justify-center cursor-pointer">
+      <div class="h-[100%] flex flex-col items-center justify-center gap-[4px]" @click="scrollToTop">
+        <img src="../assets/Group112.png" class="w-[24px] select-none" alt="" />
+        <span class="text-white text-[12px] select-none">回顶部</span>
+      </div>
+    </div>
+
+    <dialog id="my_modal_1" class="modal">
+      <div class="modal-box">
+        <h3 class="text-lg font-bold mb-[16px]">欢迎咨询</h3>
+        <p class="mb-[16px]">固话：400-821-0776</p>
+        <p class="mb-[16px]">手机：186-1868-6666</p>
+        <div class="modal-action">
+          <form method="dialog">
+            <!-- if there is a button in form, it will close the modal -->
+            <button class="btn btn-sm">关闭</button>
+          </form>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+
+const openModal = () => {
+  const modal = document.getElementById('my_modal_1');
+  modal.showModal();
+};
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth',
+  });
+};
+
+onMounted(() => {
+  const mybutton = document.getElementById("scrollToTop");
+  console.log(mybutton, 'mybutton');
+  // 当用户滚动页面时，显示按钮
+  window.onscroll = function () {
+    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+      mybutton.style.display = "block";
+    } else {
+      mybutton.style.display = "none";
+    }
+  };
+});
+</script>
+
+<style scoped>
+.bg-custom-blue {
+  background: rgba(123, 169, 255, 0.2);
+}
+
+/* 你可以在这里添加一些自定义的样式 */
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 3a91b80..9440f7d 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,10 +1,9 @@
 <template>
   <div class="navbar header-bg-color">
     <div class="navbar-start"></div>
-    <div class="navbar-center">
-      <a href="https://www.sanyoubio.com.cn" class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'about' ? '#00E5FF' : 'white' }"
-        >关于三优</a
-      >
+    <div class="navbar-center flex gap-[80px]">
+      <a href="https://www.sanyoubio.com.cn" class="btn btn-ghost btn-hover"
+        :style="{ color: activeTag === 'about' ? '#00E5FF' : 'white' }">关于三优</a>
       <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'home' ? '#00E5FF' : 'white' }">三优云试剂管家</a>
       <a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }">联系我们</a>
     </div>
@@ -29,10 +28,22 @@ const props = defineProps({
   font-size: 16px;
   height: 77px;
   z-index: 111;
-  position: relative;
+  position: fixed;
+  background-image: url('../assets/Rectangle 85.png');
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  left: 0;
+  right: 0;
+  top: 0;
 }
+
 .btn-hover:hover {
   color: #00e5ff !important;
 }
+
+.btn-hover {
+  font-size: 18px !important;
+}
+
 /* 你可以在这里添加一些自定义的样式 */
 </style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4966432..acf5e02 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,9 +2,9 @@
   <div class="relative">
     <Header />
     <div class="carousel w-full relative home-banner">
-      <div class="w-full">
+      <!-- <div class="w-full">
         <img src="../assets/bgc001.png" class="w-full" />
-      </div>
+      </div> -->
       <div class="w-full logo-image absolute top-[48px]">
         <div class="max-w-screen-xl mx-auto flex items-center reveal-box">
           <img class="w-[76px] mr-[10px]" src="../assets/image 111.png" />
@@ -442,13 +442,14 @@
       </div>
     </div>
     <Footer />
+    <Contact />
   </div>
 </template>
 
 <script setup>
 import { computed, ref, onMounted } from "vue";
 import ScrollReveal from "scrollreveal";
-
+import Contact from "../components/Contact.vue";
 import Header from "../components/Header.vue";
 import Footer from "../components/Footer.vue";
 
@@ -675,10 +676,14 @@ onMounted(() => {
   color: rgba(102, 102, 102, 1);
 }
 .home-banner {
-  padding: 26px;
   /* padding-top:77px ; */
-  background-color: #00203b;
-  transform: translateY(-77px);
+  height: 950px;
+  background-image: url("../assets/bgc001.png");
+  background-size: calc(100% - 40px) auto; /* 宽度是100%，去掉左右各20px */
+  background-position: 20px center; /* 背景图片左右各20px，垂直居中 */
+  background-repeat: no-repeat; /* 防止图片重复 */
+  margin: 0; /* 去除默认的边距 */
+  /* transform: translateY(-77px); */
   /* height: 100vh; */
 }
 .custom-btn {
