1.产品与服务已完成

This commit is contained in:
王创世 2025-05-14 14:40:42 +08:00
parent 214ed9029e
commit 4725513ff2

View File

@ -1,5 +1,5 @@
<template>
<div style="width: 100%;">
<div style="width: 100%;overflow: hidden;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
@ -27,48 +27,48 @@
<div class="group_2 flex-col"
style="background-color: #ffffff;overflow: unset;position: relative;height: 735px;">
<img src="public/img/service_01.png" style="width: 100%;position: absolute;top: -30px;z-index: 10;">
<div
style="font-size: 24px;padding-top: 30px;z-index: 30;;display: flex;flex-direction: row;justify-content: space-around;width: 100%;">
<div class="service_top1">
<div style="cursor: pointer;">内容创作与运营</div>
<div style="cursor: pointer;">
<div style="color: #0256FF;margin-bottom: 20px;">专业技术服务</div>
<div style="background-color: #0256FF;width:40%;height: 8px;margin: 0 auto;"></div>
</div>
</div>
<div style="text-align: center;padding-top: 30px;z-index: 30;">
<div class="service-01" style="text-align: center;padding-top: 30px;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">AI应用定制化开发</div>
<div style="color: #768597;font-size: 16px;margin-top: 30px;">精准赋能行业创新深度定制AI解决方案驱动企业智能升级</div>
</div>
<div style="padding-top: 30px;z-index: 30;">
<div style="display: flex;flex-direction: row;justify-content: center;width: 100%;gap: 30px;">
<div style="width: 30%;">
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service_top1_width">
<div class="reveal-left" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_012.png" style="width:22px;height: 22px;">
</div>
<div style="font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
</div>
<div style="margin-top: 30px;font-size: 14px;font-weight: 400;color: #768597;">
<div class="reveal-left"
style="margin-top: 30px;font-size: 14px;font-weight: 400;color: #768597;">
我们紧跟人工智能发展浪潮专注于AI技术的应用与落地无论是将先进的AI模(DeepSeek进行本地化部署以满足特定场景需求还是根据您的独特业务挑战开发定制化的AI应用程序我们都能提供从模型选型数据处理算法优化到应用集成与部署的全栈服务针对金融医疗教育等行业定制预训练微调模型与专用知识库模板提供开箱即用的解决方案
</div>
<div
style="margin-top: 30px;background: linear-gradient( 138deg, #F7F7F7 0%, #FFFFFF 100%);border-radius: 4px;padding: 20px;">
<div style="display: flex;flex-direction: row;justify-content: space-between;">
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_013.png" style="width:32px;height: 32px;">
</div>
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
多模态输入与智能处理</div>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_014.png" style="width:32px;height: 32px;">
</div>
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
联网搜索增强与分层服务</div>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_015.png" style="width:32px;height: 32px;">
</div>
@ -78,21 +78,21 @@
</div>
<div
style="margin-top: 40px;display: flex;flex-direction: row;justify-content: space-between;">
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_016.png" style="width:32px;height: 32px;">
</div>
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
高并发与稳定性优化</div>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_017.png" style="width:32px;height: 32px;">
</div>
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
全链路安全与商业化支持</div>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_018.png" style="width:32px;height: 32px;">
</div>
@ -102,21 +102,21 @@
</div>
<div
style="margin-top: 40px;display: flex;flex-direction: row;justify-content: space-between;">
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_019.png" style="width:32px;height: 32px;">
</div>
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
知识库智能化升级</div>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_020.png" style="width:32px;height: 32px;">
</div>
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
边缘计算协同部署轻量化模型</div>
</div>
<div style="display: flex;flex-direction: row;align-items: center;">
<div class="service-1" style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_021.png" style="width:32px;height: 32px;">
</div>
@ -126,32 +126,32 @@
</div>
</div>
</div>
<div style="width: 30%;text-align: center;">
<div class="service_top1_width" style="text-align: center;">
<img src="public/img/service_022.png" style="width:100%;height: 100%;">
</div>
</div>
</div>
</div>
<div class="service_023" style="padding-top: 80px;z-index: 30;">
<div style="text-align: center;padding-top: 30px;z-index: 30;">
<div class="service_023">
<div class="service-01" style="text-align: center;padding-top: 30px;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">定制软件开发</div>
<div style="color: #768597;font-size: 16px;margin-top: 15px;">全方位的定制化软件开发服务</div>
</div>
<div
style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
<div style="width: 30%;">
<div class="service_center_01" style="width: 30%;">
<img src="public/img/service_024.png" style="width:100%;height: 100%;">
</div>
<div style="width: 30%;">
<div class="service_center_02">
<div style="display: flex;flex-direction: row;align-items: center;">
<div>
<img src="public/img/service_012.png" style="width:22px;height: 22px;">
</div>
<div style="font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
<div style="color: #222222;font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
</div>
<div style="margin-top: 30px;font-size: 14px;font-weight: 400;color: #768597;">
我们专注于提供全方位的定制化软件开发服务满足您多样化的业务需求无论是面向特定群体的活动平台多样青春项目功能完善的电子商务系统商城项目互动性强的活动应用健身打卡活动项目还是便捷高效的组织管理工具协会小程序项目我们的团队都能运用主流技术栈和敏捷开发模式为您打造用户体验出色性能稳定可靠的Web应用移动App及小程序驱动业务创新
我们专注于提供全方位的定制化软件开发服务满足您多样化的业务需求无论是面向特定群体的活动平台"多样青春项目"功能完善的电子商务系统"商城项目"互动性强的活动应用"健身打卡活动项目"还是便捷高效的组织管理工具"协会小程序项目"我们的团队都能运用主流技术栈和敏捷开发模式为您打造用户体验出色性能稳定可靠的Web应用移动App及小程序驱动业务创新
</div>
<div
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;margin-top: 30px;">
@ -178,7 +178,7 @@
</div>
<div
style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
<div style="position: relative;">
<div class="service-yw" style="position: relative;">
<img src="public/img/service_029.png" style="width:275px;">
<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全防护</div>
@ -186,7 +186,7 @@
帮助决策者制定针对性防护策略降低网络攻击数据泄露和业务中断等风险</div>
</div>
</div>
<div style="position: relative;">
<div class="service-yw" style="position: relative;">
<img src="public/img/service_030.png" style="width:275px;">
<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">漏洞修复</div>
@ -194,7 +194,7 @@
专业团队快速检测定位并处置安全威胁最大限度减少损失保障业务连续性</div>
</div>
</div>
<div style="position: relative;">
<div class="service-yw" style="position: relative;">
<img src="public/img/service_031.png" style="width:275px;">
<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全加固</div>
@ -202,7 +202,7 @@
防篡改 防窃取 防逆向抵御各类网络攻击和数据泄露风险</div>
</div>
</div>
<div style="position: relative;">
<div class="service-yw" style="position: relative;">
<img src="public/img/service_032.png" style="width:275px;">
<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">实时监控</div>
@ -217,8 +217,8 @@
<div style="font-size: 34px;font-weight: 700;">网络与信息安全</div>
<div style="color: #768597;font-size: 16px;margin-top: 15px;">专业守护数据防御威胁护航企业数字安全</div>
</div>
<div style="display: flex;justify-content: center;gap: 30px;margin-top: 30px;">
<div style="position: relative;width: 380px;height: 236px;">
<div class="service-wl-a" style="display: flex;justify-content: center;gap: 30px;margin-top: 30px;">
<div class="service-wl">
<div style="position: absolute;">
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
</div>
@ -232,7 +232,7 @@
<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
对安卓应用进行深度加密加壳保护的安全产品且在系统层实时进行威胁环境检测保护应用远离恶意破解反编译二次打包动态调试内存抓取等威胁</div>
</div>
<div style="position: relative;width: 380px;height: 236px;">
<div class="service-wl">
<div style="position: absolute;">
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
</div>
@ -247,7 +247,7 @@
iOS应用加固是旨在为广大的i0S软件开发者以及厂商源代码提供加密保护通过代码加密指令混淆等技术手段在编译阶段对源代码进行常量加密逻辑混淆结构混排等保护增加反编译改和注入的难度提高核心代码及数据的安全性
</div>
</div>
<div style="position: relative;width: 380px;height: 236px;">
<div class="service-wl">
<div style="position: absolute;">
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
</div>
@ -262,8 +262,8 @@
多重加密技术对应用运行时的进程空间进行防护采用动态加解密技术阻止各种调试器进行内存调试注入和dump</div>
</div>
</div>
<div style="display: flex;justify-content: center;gap: 30px;margin-top: 30px;">
<div style="position: relative;width: 380px;height: 236px;">
<div class="service-wl-b" style="display: flex;justify-content: center;gap: 30px;margin-top: 30px;">
<div class="service-wl">
<div style="position: absolute;">
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
</div>
@ -277,7 +277,7 @@
<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
在程序运行时对文件指纹及完整性进行校验如发现任一文件被篡改或与原始签名不一致应用则停止运行从而保证了应用运行的安全</div>
</div>
<div style="position: relative;width: 380px;height: 236px;">
<div class="service-wl">
<div style="position: absolute;">
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
</div>
@ -291,7 +291,7 @@
<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
动态监控程序中的内存分布文件可以随时监控到内存读取等操作从而保护内存截取攻击安全键盘和通信协议加密分别对输入和网络通信增加了安全保障</div>
</div>
<div style="position: relative;width: 380px;height: 236px;">
<div class="service-wl">
<div style="position: absolute;">
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
</div>
@ -313,7 +313,7 @@
<div style="color: #768597;font-size: 16px;margin-top: 15px;">利用物联网大数据人工智能等前沿技术为不同场景提供一体化的智慧化解决方案
</div>
</div>
<div style="margin: 0 auto;width: 62%;position: relative;margin-top: 30px">
<div class="service_bottom_01">
<div class="box1" @mouseenter="mous(1, $event)"
:class="mousindex == 1 ? 'service_bottom' : 'service_bottom_no'"
:style="{ left: `${left1}px`, top: `${top1}px` }"
@ -564,14 +564,14 @@
</div>
<div class="service_051" style="z-index: 30;">
<div style="width: 80%;">
<div style="text-align: center;padding-top: 30px;z-index: 30;color: #ffffff;">
<div class="service-02">
<div style="font-size: 34px;font-weight: 700;">硬件基础设施建设</div>
<div style="font-size: 16px;margin-top: 30px;">提供从需求分析方案设计设备选型综合布线到安装调试环境监控的全流程服务</div>
</div>
<div class="service-container" style="margin: 80px 0px 0px 250px;">
<div v-for="(item,index) in 11" class="service-item">
<img :src="`/img/service_000${index+1}.png`" style="width: 28px;height: 28px;">
<div style="margin-left: 10px;font-size: 16px;font-weight: 400;">需求分析与规划</div>
<div class="service-container">
<div v-for="(item, index) in serviceList" class="service-item">
<img :src="`/img/service_000${index + 1}.png`" style="width: 28px;height: 28px;">
<div style="margin-left: 10px;font-size: 16px;font-weight: 400;">{{ item.name }}</div>
</div>
</div>
</div>
@ -602,7 +602,19 @@ import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
const serviceList = ref([
{ name: '需求分析与规划' },
{ name: '选址与场地设计' },
{ name: '供配电系统' },
{ name: '制冷系统' },
{ name: '机柜布局' },
{ name: '防静电设施' },
{ name: '网络架构' },
{ name: '安全防护' },
{ name: '监控系统' },
{ name: '应急预案' },
{ name: '运维流程' },
])
const mousindex = ref(1);
@ -1046,11 +1058,85 @@ onMounted(() => {
})
})
const animate = () => {
const sr = ScrollReveal();
sr.reveal('.service-1', {
origin: "bottom",
distance: "50px",
duration: 800,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
useDelay: 30,
mobile: true,
})
sr.reveal('.service-01', {
origin: "right",
distance: "550px",
duration: 800,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
useDelay: 130,
mobile: true,
})
sr.reveal('.reveal-left', {
origin: "left",
distance: "50px",
duration: 800,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
useDelay: 500,
mobile: true,
})
sr.reveal('.service-yw', {
origin: "left",
distance: "50px",
duration: 800,
easing: 'cubic-bezier(0.5, 0, 0, 1)', //
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
useDelay: 500,
mobile: true,
})
sr.reveal('.service-wl-a', {
origin: "left",
distance: "50px",
duration: 800,
delay: 200,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.service-wl-b', {
origin: "left",
distance: "50px",
duration: 800,
delay: 300,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
//service-item
sr.reveal('.service-item', {
duration: 800,
delay: 300,
opacity: 0,
scale: 0.5,
reset: true,
mobile: true,
})
}
</script>
<style lang="scss">
<style scoped lang="scss">
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.css";
@ -1068,6 +1154,8 @@ const animate = () => {
height: 100%;
background-size: 100%;
height: 645px;
padding-top: 80px;
z-index: 30;
}
.service_033 {
@ -1102,17 +1190,135 @@ const animate = () => {
/* 强制固定 3 列 */
gap: 20px;
max-width: 715px;
margin: 80px 0px 0px 250px;
}
.service-item {
display: flex;
align-items: center;
width: 225px;
padding:20px;
padding: 20px;
border: 1px solid #FFFFFF;
box-sizing: border-box;
/* 确保宽度计算包含边框 */
justify-self: start;
cursor: pointer;
/* 强制每个单元格左对齐 */
}
.service-item:hover {
background-color: #4A4C5F;
}
.service-wl {
position: relative;
width: 380px;
height: 236px;
transition: all 0.3s ease;
overflow: hidden;
cursor: pointer;
}
.service-wl:hover {
transform: scale(1.1);
}
.service-yw {
position: relative;
transition: all 0.3s ease;
cursor: pointer;
border-radius: 12px;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
border-radius: 12px;
background: linear-gradient(45deg, #4D8FFF, #87CEFA) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
transform: scale(0.95);
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
}
&:hover {
transform: translateY(-5px);
&::before {
transform: scale(1);
opacity: 1;
}
}
}
.service_top1 {
font-size: 24px;
padding-top: 30px;
z-index: 30;
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
}
.service_top1_width {
width: 30%;
}
.service_bottom_01 {
margin: 0 auto;
width: 62%;
position: relative;
margin-top: 30px
}
.service-02 {
text-align: center;
padding-top: 30px;
z-index: 30;
color: #ffffff;
}
.service_center_02{
width: 30%;
}
@media (max-width: 1440px) {
.service_center_02{
width: 40%;
}
.service_top1 {
padding-top: 16px;
}
.service_top1_width {
width: 40%;
}
.service_023 {
height: 485px;
padding-top: 0px;
}
.service_bottom_01 {
width: 84%;
}
.service_051 {
height: 480px;
}
.service-container {
margin: 30px 0px 0px 140px;
}
.service-item{
padding: 14px;
}
}
</style>