修复: 更新phone_proServices_con.vue页面的链接和样式
- 将链接从`/proServices/`更改为`/phone_proServices/`以确保正确导航。 - 调整多个元素的样式，包括高度、宽度和内边距，以提升页面的响应式设计和用户体验。 - 优化了内容布局，使其在不同设备上显示更加一致。
This commit is contained in:
parent
22e1e503b6
commit
bf32ef86e2
744
pages/phone_proServices.vue
Normal file
744
pages/phone_proServices.vue
Normal file
@ -0,0 +1,744 @@
|
||||
<template>
|
||||
<div style="width: 100%;overflow: hidden;">
|
||||
<!-- Swiper 容器 -->
|
||||
<div class="group_666" style="position: relative;height: 250px;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img :src="`${cdnUrl}/img/service.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img :src="`${cdnUrl}/img/service.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="group_2 flex-col"
|
||||
style="background-color: #ffffff;overflow: unset;position: relative;height: 100%;">
|
||||
<img :src="`${cdnUrl}/img/service_01.png`" style="width: 100%;position: absolute;top: -26px;z-index: 10;">
|
||||
<div class="service_top1">
|
||||
<NuxtLink to="/phone_proServices_con/" style="cursor: pointer;width: 50%;text-align: center;">
|
||||
<div>
|
||||
内容创作与运营
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<div style="cursor: pointer;width: 50%;text-align: center;">
|
||||
<div style="color: #0256FF;margin-bottom: 20px;">专业技术服务</div>
|
||||
<div style="background-color: #0256FF;width:20%;height: 8px;margin: 0 auto;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-01" style="text-align: center;padding: 30px 20px 20px 20px;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: 30px 20px 20px 20px;z-index: 30;">
|
||||
<div style="display: flex;flex-direction: column;justify-content: center;width: 100%;gap: 30px;">
|
||||
<div class="service_top1_width">
|
||||
<div class="reveal-left" style="display: flex;flex-direction: row;align-items: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_012.png`" style="width:22px;height: 22px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
|
||||
</div>
|
||||
<div class="reveal-left"
|
||||
style="line-height: 24px;margin-top: 20px;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: 10px;">
|
||||
<div style="display: flex;flex-direction: row;justify-content: space-between;">
|
||||
<div class="service-1"
|
||||
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_013.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 90px;font-size: 14px;font-weight: 400;margin-top: 10px;">
|
||||
多模态输入与智能处理</div>
|
||||
</div>
|
||||
<div class="service-1"
|
||||
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_014.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 90px;font-size: 14px;font-weight: 400;margin-top: 10px;">
|
||||
联网搜索增强与分层服务</div>
|
||||
</div>
|
||||
<div class="service-1"
|
||||
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_015.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 90px;font-size: 14px;font-weight: 400;margin-top: 10px;">
|
||||
私有化知识库与RAG技术</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="margin-top: 40px;display: flex;flex-direction: row;justify-content: space-between;">
|
||||
<div class="service-1"
|
||||
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_016.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 90px;font-size: 14px;font-weight: 400;margin-top: 10px;">
|
||||
高并发与稳定性优化</div>
|
||||
</div>
|
||||
<div class="service-1"
|
||||
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_017.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 90px;font-size: 14px;font-weight: 400;margin-top: 10px;">
|
||||
全链路安全与商业化支持</div>
|
||||
</div>
|
||||
<div class="service-1"
|
||||
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_018.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 90px;font-size: 14px;font-weight: 400;margin-top: 10px;">
|
||||
模型生态扩展接入更多模型</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="margin-top: 40px;display: flex;flex-direction: row;justify-content: space-between;">
|
||||
<div class="service-1"
|
||||
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_019.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 90px;font-size: 14px;font-weight: 400;margin-top: 10px;">
|
||||
知识库智能化升级</div>
|
||||
</div>
|
||||
<div class="service-1"
|
||||
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_020.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 90px;font-size: 14px;font-weight: 400;margin-top: 10px;">
|
||||
边缘计算协同部署轻量化模型</div>
|
||||
</div>
|
||||
<div class="service-1"
|
||||
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_021.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 90px;font-size: 14px;font-weight: 400;margin-top: 10px;">
|
||||
垂直领域深度适配多行业应用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_top1_width" style="text-align: center;">
|
||||
<img :src="`${cdnUrl}/img/service_022.png`" style="width:100%;height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<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: column;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
|
||||
<div class="service_center_01" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/service_024.png`" style="width:100%;height: 100%;">
|
||||
</div>
|
||||
<div class="service_center_02">
|
||||
<div style="display: flex;flex-direction: row;align-items: center;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_012.png`" style="width:22px;height: 22px;">
|
||||
</div>
|
||||
<div style="color: #222222;font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
|
||||
</div>
|
||||
<div style="line-height: 24px;margin-top: 20px;font-size: 14px;font-weight: 400;color: #768597;">
|
||||
我们专注于提供全方位的定制化软件开发服务，满足您多样化的业务需求。无论是面向特定群体的活动平台（如"多样青春项目"），功能完善的电子商务系统（如"商城项目"），互动性强的活动应用（如"健身打卡活动项目"），还是便捷高效的组织管理工具（如"协会小程序项目"），我们的团队都能运用主流技术栈和敏捷开发模式，为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序，驱动业务创新
|
||||
</div>
|
||||
<div
|
||||
style="gap: 20px;;flex-wrap: wrap; display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;margin-top: 30px;">
|
||||
<div class="dz_img">
|
||||
<img :src="`${cdnUrl}/img/service_025.png`" style="width:160px;">
|
||||
</div>
|
||||
<div class="dz_img">
|
||||
<img :src="`${cdnUrl}/img/service_026.png`" style="width:160px;">
|
||||
</div>
|
||||
<div class="dz_img">
|
||||
<img :src="`${cdnUrl}/img/service_027.png`" style="width:160px;">
|
||||
</div>
|
||||
<div class="dz_img">
|
||||
<img :src="`${cdnUrl}/img/service_028.png`" style="width:160px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 40px 0px 100px 0px;z-index: 30;background-color: #ffffff;">
|
||||
<div style="text-align: center;z-index: 30;">
|
||||
<div style="font-size: 34px;font-weight: 700;">IT运维服务</div>
|
||||
<div style="color: #768597;font-size: 16px;margin-top: 15px;">承接客户网站及应用系统的全面安全防护项目</div>
|
||||
</div>
|
||||
<div
|
||||
style="flex-wrap: wrap; display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 10px;margin-top: 40px;">
|
||||
<div class="service-yw" style="position: relative;">
|
||||
<img :src="`${cdnUrl}/img/service_029.png`" style="width:165px;">
|
||||
<div
|
||||
style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 20px 10px 0px 20px;">
|
||||
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全防护</div>
|
||||
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
|
||||
帮助决策者制定针对性防护策略降低网络攻击、数据泄露和业务中断等风险</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-yw" style="position: relative;">
|
||||
<img :src="`${cdnUrl}/img/service_030.png`" style="width:165px;">
|
||||
<div
|
||||
style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 20px 10px 0px 20px;">
|
||||
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">漏洞修复</div>
|
||||
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
|
||||
专业团队，快速检测、定位并处置安全威胁，最大限度减少损失，保障业务连续性</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-yw" style="position: relative;">
|
||||
<img :src="`${cdnUrl}/img/service_031.png`" style="width:165px;">
|
||||
<div
|
||||
style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 20px 10px 0px 20px;">
|
||||
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全加固</div>
|
||||
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">ios和Android应用防调试
|
||||
防篡改 防窃取 防逆向抵御各类网络攻击和数据泄露风险</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-yw" style="position: relative;">
|
||||
<img :src="`${cdnUrl}/img/service_032.png`" style="width:165px;">
|
||||
<div
|
||||
style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 20px 10px 0px 20px;">
|
||||
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">实时监控</div>
|
||||
<div style="font-weight: 400;color: #666666;font-size: 14px;margin-top: 10px;">
|
||||
网络安全实时监控服务提供24小时威胁检测与主动防御，实时识别漏洞，保障数据安全</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_033" style="padding-top: 30px;z-index: 30;">
|
||||
<div style="text-align: center;padding-top: 10px;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 class="service-wl-b" style="flex-wrap: wrap;display: flex;justify-content: center;margin-top: 40px;">
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
|
||||
<div style="z-index: 10;">
|
||||
<img :src="`${cdnUrl}/img/service_035.png`" style="width:36px;height: 36px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
|
||||
Android应用加固</div>
|
||||
</div>
|
||||
<div style="padding: 0px 20px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
对安卓应用进行深度加密、加壳保护的安全产品，且在系统层实时进行威胁环境检测，保护应用远离恶意破解、反编译、二次打包，动态调试、内存抓取等威胁</div>
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
|
||||
<div style="z-index: 10;">
|
||||
<img :src="`${cdnUrl}/img/service_036.png`" style="width:36px;height: 36px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
|
||||
IOS应用加固</div>
|
||||
</div>
|
||||
<div style="padding: 0px 20px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
iOS应用加固是旨在为广大的i0S软件开发者以及厂商源代码提供加密保护，通过代码加密、指令混淆等技术手段在编译阶段对源代码进行常量加密、逻辑混淆、结构混排等保护，增加反编译、改和注入的难度，提高核心代码及数据的安全性
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
|
||||
<div style="z-index: 10;">
|
||||
<img :src="`${cdnUrl}/img/service_037.png`" style="width:36px;height: 36px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
|
||||
防调试</div>
|
||||
</div>
|
||||
<div style="padding: 0px 20px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
多重加密技术对应用运行时的进程空间进行防护，采用动态加解密技术，阻止各种调试器进行内存调试、注入和dump</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-wl-b" style="flex-wrap: wrap;display: flex;justify-content: center;gap: 0px;">
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
|
||||
<div style="z-index: 10;">
|
||||
<img :src="`${cdnUrl}/img/service_038.png`" style="width:36px;height: 36px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
|
||||
防篡改</div>
|
||||
</div>
|
||||
<div style="padding: 0px 20px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
在程序运行时对文件指纹及完整性进行校验，如发现任一文件被篡改或与原始签名不一致，应用则停止运行，从而保证了应用运行的安全</div>
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
|
||||
<div style="z-index: 10;">
|
||||
<img :src="`${cdnUrl}/img/service_039.png`" style="width:36px;height: 36px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
|
||||
防窃取</div>
|
||||
</div>
|
||||
<div style="padding: 0px 20px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
动态监控程序中的内存分布文件，可以随时监控到内存读取等操作，从而保护内存截取攻击，安全键盘和通信协议加密分别对输入和网络通信增加了安全保障，</div>
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
|
||||
<div style="z-index: 10;">
|
||||
<img :src="`${cdnUrl}/img/service_040.png`" style="width:36px;height: 36px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
|
||||
防逆向</div>
|
||||
</div>
|
||||
<div style="padding: 0px 20px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
对classes.dex文件采用高压缩及加密变形处理，并对关键核心逻辑代码进行双重VMP保护;对SO文件代码进行LLVM混淆及加密保护，Native层代码安全性得到有效的保证</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="z-index: 30;background-color: #ffffff;padding:30px 20px;">
|
||||
<div style="text-align: center;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-wrap: wrap;gap: 20px;margin-top: 20px;">
|
||||
<div class="service_bottom_01">
|
||||
<div class="box1 service_bottom_no"
|
||||
style="border-radius: 8px;width: 100%;height: 196px;padding: 30px;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_041.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
监控系统
|
||||
</div>
|
||||
<div :style="{ fontSize: '14px', color: '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
基于AI与物联网的智能监控系统实时分析精准预警安全高效运行
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_bottom_01">
|
||||
<div class="box1 service_bottom_no"
|
||||
style="border-radius: 8px;width: 100%;height: 196px;padding: 30px;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_042.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
门禁系统
|
||||
</div>
|
||||
<div :style="{ fontSize: '14px', color: '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
互联网智慧门禁：安全便捷，智能管理，远程控制
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_bottom_01">
|
||||
<div class="box1 service_bottom_no"
|
||||
style="border-radius: 8px;width: 100%;height: 196px;padding: 30px;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_043.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
充电系统
|
||||
</div>
|
||||
<div :style="{ fontSize: '14px', color: '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
智慧物联"突出互联网+智能化核心物联网技术、云端管理、能效优化
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_bottom_01">
|
||||
<div class="box1 service_bottom_no"
|
||||
style="border-radius: 8px;width: 100%;height: 196px;padding: 30px;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_044.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
水电收费系统
|
||||
</div>
|
||||
<div :style="{ fontSize: '14px', color: '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
智慧水电云管家，实时计费自动缴费，高效管理无忧。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_bottom_01">
|
||||
<div class="box1 service_bottom_no"
|
||||
style="border-radius: 8px;width: 100%;height: 196px;padding: 30px;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_045.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
养老系统
|
||||
</div>
|
||||
<div :style="{ fontSize: '14px', color: '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
智慧养老系统:AI监护+健康管理打造安全便捷银发生活。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_bottom_01">
|
||||
<div class="box1 service_bottom_no"
|
||||
style="border-radius: 8px;width: 100%;height: 196px;padding: 30px;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_046.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
租房系统
|
||||
</div>
|
||||
<div :style="{ fontSize: '14px', color: '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
智慧租房系统，实现线上托管自动化流程，或者提升用户体验
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_bottom_01">
|
||||
<div class="box1 service_bottom_no"
|
||||
style="border-radius: 8px;width: 100%;height: 196px;padding: 30px;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/service_047.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
更多方案联系我们
|
||||
</div>
|
||||
<div :style="{ fontSize: '14px', color: '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
创新科技驱动的互联网智慧化解决方案，赋能企业数字化转型
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_051" style="z-index: 30;">
|
||||
<div style="width: 100%;">
|
||||
<div class="service-02" style="padding:30px 20px 0px 20px;">
|
||||
<div style="font-size: 34px;font-weight: 700;">硬件基础设施建设</div>
|
||||
<div style="font-size: 16px;margin-top: 30px;">提供从需求分析、方案设计、设备选型、综合布线到安装调试、环境监控的全流程服务</div>
|
||||
</div>
|
||||
<div class="service-container" style="padding: 20px;">
|
||||
<div v-for="(item, index) in serviceList" class="service-item">
|
||||
<img :src="`${cdnUrl}/img/service_000${index + 1}.png`" style="width: 25px;height: 25px;">
|
||||
<div style="margin-left: 10px;font-size: 14px;font-weight: 400;">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import { nextTick, ref } from 'vue'
|
||||
import 'swiper/css'
|
||||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
|
||||
import ScrollReveal from 'scrollreveal';
|
||||
import { NNumberAnimation } from 'naive-ui'
|
||||
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
|
||||
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import 'swiper/css/effect-coverflow';
|
||||
import 'swiper/css/mousewheel'
|
||||
import 'swiper/css/grid'
|
||||
import 'swiper/css/effect-fade'
|
||||
import 'swiper/css/autoplay'
|
||||
import * as swiperAni from '@/assets/animate/animate.js'
|
||||
import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
const { locale } = useI18n()
|
||||
const cdnUrl = useCdn()
|
||||
|
||||
const serviceList = ref([
|
||||
{ name: '需求分析与规划' },
|
||||
{ name: '选址与场地设计' },
|
||||
{ name: '供配电系统' },
|
||||
{ name: '制冷系统' },
|
||||
{ name: '机柜布局' },
|
||||
{ name: '防静电设施' },
|
||||
{ name: '网络架构' },
|
||||
{ name: '安全防护' },
|
||||
{ name: '监控系统' },
|
||||
{ name: '应急预案' },
|
||||
{ name: '运维流程' },
|
||||
])
|
||||
|
||||
|
||||
|
||||
|
||||
let newsSwiper: any = null
|
||||
const onSwiperNews = (swiper: any) => {
|
||||
newsSwiper = swiper
|
||||
}
|
||||
const swiperOptionsNews = {
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
direction: 'horizontal',
|
||||
slidesPerView: 1,
|
||||
speed: 500,
|
||||
effect: 'fade',
|
||||
loop: true,
|
||||
modules: [EffectFade, Autoplay, Navigation],
|
||||
navigation: {
|
||||
nextEl: '#swipen_prev',
|
||||
prevEl: '#swipen_next',
|
||||
},
|
||||
}
|
||||
|
||||
// 新闻数据
|
||||
onMounted(() => {
|
||||
animate();
|
||||
})
|
||||
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_bottom_01', {
|
||||
origin: "left",
|
||||
distance: "550px",
|
||||
duration: 800,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
useDelay: 130,
|
||||
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', {
|
||||
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: false,
|
||||
// mobile: true,
|
||||
// })
|
||||
//service-item
|
||||
sr.reveal('.service-container', {
|
||||
origin: 'bottom',
|
||||
delay: 300,
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
reset: false,
|
||||
mobile: true,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
:deep(.dswper .swiper-slide-next) {
|
||||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||||
}
|
||||
|
||||
:deep(.dswper .swiper-slide-prev) {
|
||||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||||
}
|
||||
|
||||
.service_023 {
|
||||
background: var(--service_023) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-top: 30px;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
.service_033 {
|
||||
background: var(--service_033) no-repeat;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.service_bottom {
|
||||
background: var(--service_048) no-repeat center center;
|
||||
background-size: 100%;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.service_bottom_no {
|
||||
background-color: #F8F8F8;
|
||||
|
||||
}
|
||||
|
||||
.service_051 {
|
||||
background: var(--service_051) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.service-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
/* 强制固定 3 列 */
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
margin: 10px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.service-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 160px;
|
||||
padding:10px;
|
||||
border: 1px solid #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
/* 确保宽度计算包含边框 */
|
||||
justify-self: center;
|
||||
cursor: pointer;
|
||||
/* 强制每个单元格左对齐 */
|
||||
}
|
||||
|
||||
.service-item:hover {
|
||||
background-color: #4A4C5F;
|
||||
}
|
||||
|
||||
.service-wl {
|
||||
position: relative;
|
||||
width: 340px;
|
||||
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: 18px;
|
||||
padding-top: 10px;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.service_top1_width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.service_bottom_01 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.service-02 {
|
||||
text-align: center;
|
||||
padding-top: 70px;
|
||||
z-index: 30;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.service_center_02 {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
</style>
|
||||
@ -32,7 +32,7 @@
|
||||
<div style="color: #FC7428;margin-bottom: 10px;">内容创作与运营</div>
|
||||
<div style="background-color: #FC7428;width:20%;height: 8px;margin: 0 auto;"></div>
|
||||
</div>
|
||||
<NuxtLink to="/proServices/" style="cursor: pointer;width: 50%;text-align: center;">
|
||||
<NuxtLink to="/phone_proServices/" style="cursor: pointer;width: 50%;text-align: center;">
|
||||
<div>
|
||||
专业技术服务
|
||||
</div>
|
||||
@ -169,7 +169,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center align-center bottom-3s"
|
||||
style="padding-top: 50px;z-index: 30;background-color: #f8f8f8;height: 559px;flex-wrap: wrap;">
|
||||
style="padding-top: 50px;z-index: 30;background-color: #f8f8f8;height: 100%;flex-wrap: wrap;">
|
||||
<div>
|
||||
<img :src="`${cdnUrl}/img/media/leftpeo.png`" alt="">
|
||||
</div>
|
||||
@ -196,14 +196,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center align-center bottom-3s"
|
||||
style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 559px;">
|
||||
style="flex-direction: column;padding-top: 50px;z-index: 30;background-color: #ffffff;">
|
||||
|
||||
<div class="flex-col">
|
||||
<div class="flex-col">
|
||||
<span class="mediat1">互联网新闻发布</span>
|
||||
<span class="mediat2">多维度矩阵覆盖，赋能品牌增长新势能</span>
|
||||
</div>
|
||||
<div style="width: 568px;height: 1px;background: #EEEEEE;margin-top: 40px;"></div>
|
||||
<div style="height: 1px;background: #EEEEEE;margin-top: 40px;"></div>
|
||||
<div>
|
||||
<div class="flex justify-center mediat3">
|
||||
<img :src="`${cdnUrl}/img/media/right1.png`" alt="">
|
||||
@ -215,7 +215,7 @@
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div class="group_28 flex-row justify-between numberTopBox"
|
||||
style="width: 390px;text-align: center;margin-left: 0;">
|
||||
style="text-align: center;margin-left: 0;padding: 0 20px;margin-top: 20px;">
|
||||
<div class="text-group_9 flex-col justify-between" style="width: auto;height: 80px;">
|
||||
<span class="text_55" style="font-size: 32px;text-align: center;width: auto;">
|
||||
<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false"
|
||||
@ -251,18 +251,18 @@
|
||||
<img :src="`${cdnUrl}/img/media/rightpeo.png`" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex" style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 592px;width: 100%;">
|
||||
<div style="background: url(/img/media/botleft.png) 100% 100% no-repeat;width: 50%;">
|
||||
<div style="display: flex;align-items: center;justify-content: right;height: 592px;color: #FFFFFF;">
|
||||
<div style="padding-right:200px;">
|
||||
<div class="flex" style="flex-direction: column;padding-top: 50px;z-index: 30;background-color: #ffffff;width: 100%;">
|
||||
<div style="background: url(/img/media/botleft.png) 100% 100% no-repeat;width: 100%;">
|
||||
<div style="display: flex;align-items: center;justify-content: center;height: 330px;color: #FFFFFF;">
|
||||
<div >
|
||||
<div style="font-size: 34px;font-weight: 700;">IP孵化与达人合作</div>
|
||||
<div style="font-size: 16px;font-weight: 400;margin-top: 30px;">多维度矩阵覆盖，赋能品牌增长新势能</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: url(/img/media/botright.png)100% 100% no-repeat;width: 50%;">
|
||||
<div style="background: url(/img/media/botright.png)100% 100% no-repeat;width: 100%;">
|
||||
<div
|
||||
style="flex-direction:column;display: flex;justify-content: center;;height: 542px;color: #FFFFFF;padding-left: 70px;">
|
||||
style="flex-direction:column;display: flex;justify-content: center;color: rgb(255, 255, 255);padding: 20px;height: 535px;color: #FFFFFF;">
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
|
||||
@ -272,7 +272,7 @@
|
||||
<div style="font-size: 14px;font-weight: 400;">联动本地头部达人精准引爆同城流量，合作ROI高达1:8</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: rgba(216, 216, 216, 0.5);width: 60%;height: 1px;margin: 50px 0px;">
|
||||
<div style="background-color: rgba(216, 216, 216, 0.5);width: 100%;height: 1px;margin: 50px 0px;">
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
@ -283,7 +283,7 @@
|
||||
<div style="font-size: 14px;font-weight: 400;">从人设定位到变现全链路服务</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="background-color: rgba(216, 216, 216, 0.5);width: 60%;height: 1px;margin: 50px 0px;">
|
||||
<div style="background-color: rgba(216, 216, 216, 0.5);width: 100%;height: 1px;margin: 50px 0px;">
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
@ -416,7 +416,7 @@ const animate = () => {
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
reset: false,
|
||||
mobile: true,
|
||||
beforeReveal: function (el: any) {
|
||||
numberAnimationInstRef.value.play()
|
||||
@ -684,10 +684,9 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.mediat3 {
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
line-height: 24px;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user