feat: 提交

2025-02-18 23:36:50 +08:00 · 2025-02-18 23:36:50 +08:00 · 378d4a757d
commit 378d4a757d
parent 1990129117
8 changed files with 99 additions and 13 deletions
--- 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>
--- a/src/App.vue
+++ b/src/App.vue
@ -1,3 +1,3 @@
 <template>
  <router-view />
-</template>
+</template>
--- a/src/assets/Frame.png
+++ b/src/assets/Frame.png
--- a/src/assets/Group
+++ b/src/assets/Group
--- a/src/assets/Group112.png
+++ b/src/assets/Group112.png
--- a/src/components/Contact.vue
+++ 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>
--- 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>
--- 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 {