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-15 09:39:20 +08:00
parent b291d85d7c
commit 8e055b9940
10 changed files with 197 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/fonts/9RNKTxomYL9P.woff2 Normal file
View File

Binary file not shown.

BIN
src/assets/image 57.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/assets/image 59.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/assets/image 61.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB

BIN
src/assets/image 66.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
src/assets/image 67.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/assets/image 68.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

4
src/components/Footer.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="w-full footer-bg">
<footer class="max-w-screen-xl mx-auto w-full footer text-white p-10">
<div class="w-full footer-bg py-[80px]">
<footer class="max-w-screen-xl mx-auto w-full footer text-white">
<nav>
<h6 class="footer-title">Services</h6>
<a class="link link-hover">Branding</a>

7
src/style.css
View File

@ -5,3 +5,10 @@
#app {
background-color: #b8f0ff63;
}
@font-face {
font-family: 'MySubsetFont';
src: url('assets/fonts/9RNKTxomYL9P.woff2') format('woff2');
/* 选择最优格式 */
font-display: swap;
}

194
src/views/Home.vue
View File

@ -269,12 +269,12 @@
</div>
</div>
<div class="w-full">
<div class="max-w-screen-xl mx-auto py-[100px]">
<div class="max-w-screen-xl mx-auto py-[74px]">
<div class="text-center text-[32px] font-bold mb-[117px]">
功能简述
</div>
<div class="flex justify-between">
<div class="flex-custom-item relative flex justify-center flex-col">
<div class="flex justify-between flex-wrap">
<div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
<img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
src="../assets/image 53.png" alt="">
<div class="text-center text-[24px] font-bold mt-[32px]">
@ -285,7 +285,7 @@
</div>
</div>
<div class="flex-custom-item relative flex justify-center flex-col">
<div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
<img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
src="../assets/image 53.png" alt="">
<div class="text-center text-[24px] font-bold mt-[32px]">
@ -296,7 +296,7 @@
</div>
</div>
<div class="flex-custom-item relative flex justify-center flex-col">
<div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
<img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
src="../assets/image 53.png" alt="">
<div class="text-center text-[24px] font-bold mt-[32px]">
@ -307,6 +307,112 @@
</div>
</div>
<div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
<img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
src="../assets/image 66.png" alt="">
<div class="text-center text-[24px] font-bold mt-[32px]">
检索追踪
</div>
<div class="text-center text-custom-content flex-1 flex items-center">
通过样品编号、名称、类型等多种方式快速定 位样品信息，实时记录样品的流通和 使用情况综合查询
</div>
</div>
<div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
<img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
src="../assets/image 57.png" alt="">
<div class="text-center text-[24px] font-bold mt-[32px]">
库存库位
</div>
<div class="text-center text-custom-content flex-1 flex items-center">
分类编码、库位规划布局以及智能化推荐库位，通 过标识迅速追踪定位，支持可视化自定义创建库 位，实现了通过库位查样品或通过样品查库位
</div>
</div>
<div class="flex-custom-item relative flex justify-center flex-col mb-[80px]">
<img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
src="../assets/image 67.png" alt="">
<div class="text-center text-[24px] font-bold mt-[32px]">
系统管理
</div>
<div class="text-center text-custom-content flex-1 flex items-center">
菜单、按钮、公告、附件、基础数据、消息通知 配置、全局字典等系统配置
</div>
</div>
<div class="flex-custom-item relative flex justify-center flex-col">
<img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
src="../assets/image 59.png" alt="">
<div class="text-center text-[24px] font-bold mt-[32px]">
库存预警
</div>
<div class="text-center text-custom-content flex-1 flex items-center">
动态监控样品库存状态，库存量查询与统计。 根据阈值实时检测库存量，低于阈值企微、 邮件、短信等渠道即刻发出预警通知
</div>
</div>
<div class="flex-custom-item relative flex justify-center flex-col">
<img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
src="../assets/image 68.png" alt="">
<div class="text-center text-[24px] font-bold mt-[32px]">
可视化页面
</div>
<div class="text-center text-custom-content flex-1 flex items-center">
直观展示设备使用情况和库存库位信息，具备实时 更新、交互查询、全局可观等功能，支持快速了 解使用率、预警情况及库位布局
</div>
</div>
<div class="flex-custom-item relative flex justify-center flex-col">
<img class="w-[86px] absolute left-[50%] translate-x-[-50%] top-[0px] translate-y-[-70%]"
src="../assets/image 61.png" alt="">
<div class="text-center text-[24px] font-bold mt-[32px]">
自由扩展
</div>
<div class="text-center text-custom-content flex-1 flex items-center">
支持接入智能化监控设备，如温感、烟感、温湿 器等设备，提供REST API接口衔接各种 LIMS系统
</div>
</div>
</div>
</div>
</div>
<div class="w-full service-custom-bg py-[60px]">
<div class="max-w-screen-xl mx-auto">
<div class="text-center text-[32px] font-bold mb-[40px]">
服务与价格
</div>
<div class="flex gap-[28px]">
<div class="base-wrap flex-1">
<div class="base-price base-one">
<div class="base-icon base-icon-one">
旗舰版
</div>
<div class="flex items-center mt-[124px] justify-center">
<span class="price-title mr-[16px]">早鸟价</span>
<div>
<span class="price-content">49,999</span>
<span class="price-unit"> 元/年</span>
</div>
</div>
</div>
</div>
<div class="base-wrap flex-1">
<div class="base-price base-two">
<div class="base-icon base-icon-two">
豪华版
</div>
</div>
</div>
<div class="base-wrap flex-1">
<div class="base-price base-three">
<div class="base-icon base-icon-three">
标准版
</div>
</div>
</div>
</div>
</div>
@ -421,6 +527,82 @@ const btnList = ref([
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #666666;
padding: 0px 31px;
padding: 0px 16px;
}
.service-custom-bg {
background: linear-gradient(98.33deg, rgba(0, 62, 160, 0.05) 0%, rgba(10, 169, 248, 0.05) 100.12%);
}
.base-wrap {
border-radius: 14px;
background-color: #fff;
}
.base-price {
height: 507px;
border-radius: 14px;
position: relative;
margin: 3px;
box-sizing: border-box;
overflow: hidden;
/* padding: 2px; */
}
.base-icon {
width: 188px;
height: 64px;
top: 0;
right: 0;
position: absolute;
/* background: linear-gradient(96.87deg, #FFFEF9 0%, #ADA293 96.38%); */
border-radius: 0 0 0 14px;
font-family: 'MySubsetFont';
font-size: 32px;
text-align: center;
line-height: 64px;
}
.base-icon-one {
background: linear-gradient(96.87deg, #FFFEF9 0%, #ADA293 96.38%);
color: #493B3B;
}
.base-icon-two {
background: linear-gradient(96.87deg, #FFE079 0%, #BE8945 96.38%);
color: #FFFFFF;
}
.base-icon-three {
background: #FFFDF5;
color: #333333;
}
.base-one {
background: linear-gradient(180deg, #E3EAFA 0%, #FFFFFF 100%);
}
.base-two {
background: linear-gradient(180deg, #FFF7E4 0%, rgba(247, 243, 233, 0.1) 100%);
}
.base-three {
background: linear-gradient(180deg, #C9E7FF 0%, #FFFFFF 100%);
}
.price-title {
font-family: PingFang SC;
font-size: 20px;
font-weight: 600;
}
.price-content {
font-family: 'D-DIN';
font-size: 40px;
font-weight: 700;
}
.price-unit {
font-size: 22px;
}
</style>