pengkai/moblie-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 提交

Browse Source
This commit is contained in:
owen 2025-02-19 22:40:00 +08:00
parent 378d4a757d
commit 85432c5e41
9 changed files with 65 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>三优云试剂管家</title>
</head>
<script src="https://plugin-code.salesmartly.com/js/project_247985_254678_1739892585.js"></script>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>

BIN
src/assets/software01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/software02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.6 KiB

BIN
src/assets/software03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
src/assets/software04.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/assets/software05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
src/assets/software06.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

5
src/components/Contact.vue
View File

@ -1,7 +1,7 @@
<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">
<div class="flex flex-col items-center justify-center gap-[4px] cursor-pointer" @click="openChat">
<img src="../assets/Group 84.png" class="w-[24px] select-none" alt="" />
<span class="text-white text-[12px] select-none">在线咨询</span>
</div>
@ -47,6 +47,9 @@ const scrollToTop = () => {
behavior: 'smooth',
});
};
const openChat = () => {
ssq.push('chatOpen');
};
onMounted(() => {
const mybutton = document.getElementById("scrollToTop");

87
src/views/Home.vue
View File

@ -54,12 +54,8 @@
<div class="text-center text-[36px] font-bold mb-[40px] text-white">全流程覆盖，提升您的样本管理效率</div>
<div class="flex w-full text-white mb-[130px]">
<div class="join join-vertical bg-group-btn">
<button
@click="handleClick(index)"
v-for="(item, index) in btnList"
:key="item.name"
:class="['p-[10px] join-item h-[60px] w-[120px]', item.active ? 'btn-active-custom text-white' : '']"
>
<button @click="handleClick(index)" v-for="(item, index) in btnList" :key="item.name"
:class="[ 'p-[10px] join-item h-[60px] w-[120px]', item.active ? 'btn-active-custom text-white' : '' ]">
{{ item.name }}
</button>
</div>
@ -72,27 +68,31 @@
<div class="flex gap-[20px] justify-between">
<div class="flex flex-col w-[208px]">
<div class="h-[208px] w-[208px] rounded-full rounded-full-color flex justify-center items-center">
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
alt="Tailwind CSS Carousel component" />
</div>
<div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
</div>
<div class="flex flex-col gap-[10px] w-[208px]">
<div class="h-[208px] w-[208px] rounded-full rounded-full-color flex justify-center items-center">
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
alt="Tailwind CSS Carousel component" />
</div>
<div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
</div>
<div class="flex flex-col gap-[10px] w-[208px]">
<div class="h-[208px] w-[208px] rounded-full rounded-full-color flex justify-center items-center">
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
alt="Tailwind CSS Carousel component" />
</div>
<div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
</div>
<div class="flex flex-col gap-[10px] w-[208px]">
<div class="h-[208px] w-[208px] rounded-full rounded-full-color flex justify-center items-center">
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto" alt="Tailwind CSS Carousel component" />
<img src="../assets/image 19.png" class="w-[122px] h-[122px] mx-auto"
alt="Tailwind CSS Carousel component" />
</div>
<div class="text-[14px] leading-[28px] text-center">符合药企特点，以批次为单位登记，无需逐份登记</div>
</div>
@ -212,7 +212,7 @@
</div>
</div>
<div class="flex flex-wrap mt-[47px] gap-x-[140px] gap-y-[48px]">
<div v-for="item in hardwareList" class="custom-boder-wrap">
<div v-for="item in showAllList" class="custom-boder-wrap">
<img class="w-full" :src="item" alt="" />
</div>
</div>
@ -378,7 +378,7 @@
</div>
<div class="text-price-desc">适合样品量较多、有明确的业务规范的用户，我们提供定制开发服务，让 系统更适合用户的个性化管理场景</div>
<div class="btn-box-price absolute bottom-[16px] left-[7px] right-[7px]">
<button class="h-[56px] w-full btn btn-info btn-wide">立即咨询</button>
<button class="h-[56px] w-full btn btn-info btn-wide" @click="openChat">立即咨询</button>
</div>
</div>
</div>
@ -403,7 +403,7 @@
专为中小型企业设计，提供核心的样品管理功能，旨在简化操作流程，提 升管理效率，同时保持成本效益， 适合预算有限的企业。
</div>
<div class="btn-box-price absolute bottom-[16px] left-[7px] right-[7px]">
<button class="h-[56px] w-full btn btn-info btn-wide">立即咨询</button>
<button class="h-[56px] w-full btn btn-info btn-wide" @click="openChat">立即咨询</button>
</div>
</div>
</div>
@ -428,7 +428,7 @@
标准版是样品管理系统的基础版本，它提供了样品管理的基本功能，旨在满足各高校实验室、科研院所等企业对样品管理的基本需求。
</div>
<div class="btn-box-price absolute bottom-[16px] left-[7px] right-[7px]">
<button class="h-[56px] w-full btn btn-info btn-wide">立即咨询</button>
<button class="h-[56px] w-full btn btn-info btn-wide" @click="openChat">立即咨询</button>
</div>
</div>
</div>
@ -460,6 +460,13 @@ import Image122 from "../assets/image 122.png";
import Image123 from "../assets/image 123.png";
import Image124 from "../assets/image 124.png";
import Image125 from "../assets/image 125.png";
import Software1 from "../assets/software01.png";
import Software2 from "../assets/software02.png";
import Software3 from "../assets/software03.png";
import Software4 from "../assets/software04.png";
import Software5 from "../assets/software05.png";
import Software6 from "../assets/software06.png";
const handleClick = (index) => {
btnList.value.forEach((item) => {
@ -468,6 +475,10 @@ const handleClick = (index) => {
btnList.value[index].active = true;
};
const openChat = () => {
ssq.push('chatOpen');
};
const tabActive = ref("tab1");
const showAllList = computed(() => {
@ -476,7 +487,7 @@ const showAllList = computed(() => {
const hardwareList = ref([Image101, Image48, Frame50, Image122, Image123, Image124, Image125]);
const softwareList = ref([]);
const softwareList = ref([Software1, Software2, Software3, Software4, Software5, Software6]);
const btnList = ref([
{
@ -535,18 +546,26 @@ onMounted(() => {
.custom-bgc-introduce {
/* height: 568px; */
background-image: url("../assets/Rectangle 83.png");
background-size: calc(100% - 40px) auto; /* 宽度是100%，去掉左右各20px */
background-position: 20px center; /* 背景图片左右各20px，垂直居中 */
background-repeat: no-repeat; /* 防止图片重复 */
margin: 0; /* 去除默认的边距 */
background-size: calc(100% - 40px) auto;
/* 宽度是100%，去掉左右各20px */
background-position: 20px center;
/* 背景图片左右各20px，垂直居中 */
background-repeat: no-repeat;
/* 防止图片重复 */
margin: 0;
/* 去除默认的边距 */
}
.custom-bgc-cooperation {
background-image: url("../assets/Mask group (2).png");
background-size: calc(100% - 40px) auto; /* 宽度是100%，去掉左右各20px */
background-position: 20px center; /* 背景图片左右各20px，垂直居中 */
background-repeat: no-repeat; /* 防止图片重复 */
margin: 0; /* 去除默认的边距 */
background-size: calc(100% - 40px) auto;
/* 宽度是100%，去掉左右各20px */
background-position: 20px center;
/* 背景图片左右各20px，垂直居中 */
background-repeat: no-repeat;
/* 防止图片重复 */
margin: 0;
/* 去除默认的边距 */
}
.custom-btn-bg {
@ -662,30 +681,39 @@ onMounted(() => {
font-weight: 700;
color: rgba(255, 132, 0, 1);
}
.price-content-origin {
font-weight: 700;
font-size: 32px;
color: rgba(102, 102, 102, 1);
text-decoration: line-through;
}
.price-unit {
font-size: 22px;
}
.price-unit-origin {
font-size: 22px;
color: rgba(102, 102, 102, 1);
}
.home-banner {
/* padding-top: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; /* 去除默认的边距 */
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 {
border: 1px solid #00e5ff !important;
color: #00e5ff !important;
@ -694,18 +722,23 @@ onMounted(() => {
.custom-btn:hover {
color: #fff !important;
}
.text-content-spec {
color: rgba(255, 255, 255, 0.9);
}
.introduce-content {
height: 568px;
}
.cooperation-content {
height: 675px;
}
.text-icon-spec {
color: rgba(255, 255, 255, 0.7);
}
.text-price-desc {
font-weight: 400;
font-size: 20px;