feat: 提交
This commit is contained in:
parent
1990129117
commit
378d4a757d
@ -7,7 +7,6 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>三优云试剂管家</title>
|
<title>三优云试剂管家</title>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
<template>
|
<template>
|
||||||
<router-view />
|
<router-view />
|
||||||
</template>
|
</template>
|
||||||
BIN
src/assets/Frame.png
Normal file
BIN
src/assets/Frame.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 553 B |
BIN
src/assets/Group 84.png
Normal file
BIN
src/assets/Group 84.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 584 B |
BIN
src/assets/Group112.png
Normal file
BIN
src/assets/Group112.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 309 B |
71
src/components/Contact.vue
Normal file
71
src/components/Contact.vue
Normal file
@ -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>
|
||||||
@ -1,10 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="navbar header-bg-color">
|
<div class="navbar header-bg-color">
|
||||||
<div class="navbar-start"></div>
|
<div class="navbar-start"></div>
|
||||||
<div class="navbar-center">
|
<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 href="https://www.sanyoubio.com.cn" class="btn btn-ghost btn-hover"
|
||||||
>关于三优</a
|
: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 === 'home' ? '#00E5FF' : 'white' }">三优云试剂管家</a>
|
||||||
<a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }">联系我们</a>
|
<a class="btn btn-ghost btn-hover" :style="{ color: activeTag === 'contact' ? '#00E5FF' : 'white' }">联系我们</a>
|
||||||
</div>
|
</div>
|
||||||
@ -29,10 +28,22 @@ const props = defineProps({
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
height: 77px;
|
height: 77px;
|
||||||
z-index: 111;
|
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 {
|
.btn-hover:hover {
|
||||||
color: #00e5ff !important;
|
color: #00e5ff !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-hover {
|
||||||
|
font-size: 18px !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* 你可以在这里添加一些自定义的样式 */
|
/* 你可以在这里添加一些自定义的样式 */
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -2,9 +2,9 @@
|
|||||||
<div class="relative">
|
<div class="relative">
|
||||||
<Header />
|
<Header />
|
||||||
<div class="carousel w-full relative home-banner">
|
<div class="carousel w-full relative home-banner">
|
||||||
<div class="w-full">
|
<!-- <div class="w-full">
|
||||||
<img src="../assets/bgc001.png" class="w-full" />
|
<img src="../assets/bgc001.png" class="w-full" />
|
||||||
</div>
|
</div> -->
|
||||||
<div class="w-full logo-image absolute top-[48px]">
|
<div class="w-full logo-image absolute top-[48px]">
|
||||||
<div class="max-w-screen-xl mx-auto flex items-center reveal-box">
|
<div class="max-w-screen-xl mx-auto flex items-center reveal-box">
|
||||||
<img class="w-[76px] mr-[10px]" src="../assets/image 111.png" />
|
<img class="w-[76px] mr-[10px]" src="../assets/image 111.png" />
|
||||||
@ -442,13 +442,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
<Contact />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { computed, ref, onMounted } from "vue";
|
import { computed, ref, onMounted } from "vue";
|
||||||
import ScrollReveal from "scrollreveal";
|
import ScrollReveal from "scrollreveal";
|
||||||
|
import Contact from "../components/Contact.vue";
|
||||||
import Header from "../components/Header.vue";
|
import Header from "../components/Header.vue";
|
||||||
import Footer from "../components/Footer.vue";
|
import Footer from "../components/Footer.vue";
|
||||||
|
|
||||||
@ -675,10 +676,14 @@ onMounted(() => {
|
|||||||
color: rgba(102, 102, 102, 1);
|
color: rgba(102, 102, 102, 1);
|
||||||
}
|
}
|
||||||
.home-banner {
|
.home-banner {
|
||||||
padding: 26px;
|
|
||||||
/* padding-top:77px ; */
|
/* padding-top:77px ; */
|
||||||
background-color: #00203b;
|
height: 950px;
|
||||||
transform: translateY(-77px);
|
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; */
|
/* height: 100vh; */
|
||||||
}
|
}
|
||||||
.custom-btn {
|
.custom-btn {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user