修改 官网 数据 页面
@ -1921,12 +1921,15 @@
|
||||
width: 124px;
|
||||
height: 124px;
|
||||
margin: 1px 0 0 406px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.image_30 {
|
||||
width: 124px;
|
||||
height: 124px;
|
||||
margin-top: 1px;
|
||||
margin-left: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
body * {
|
||||
|
@ -27,7 +27,7 @@
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span class="text_5">
|
||||
<NuxtLink to="/societyDuty/" :class="{ 'active': route.path === '/societyDuty/' || route.path === '/societyDuty' }">
|
||||
<NuxtLink to="/societyDuty/" :class="{ 'active': route.path === '/societyDuty/' || route.path === '/societyDuty' || route.path === '/societyDutyNew/' || route.path === '/societyDutyNew' }">
|
||||
社会&责任
|
||||
</NuxtLink>
|
||||
</span>
|
||||
|
@ -61,7 +61,7 @@
|
||||
<div class="text-group_10 flex-col justify-between" style="width: auto;height: 80px;">
|
||||
<span class="text_58" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
|
||||
ref="numberAnimationInstRefKH" :active="false" :from="0"
|
||||
:to="19"></n-number-animation>+</span>
|
||||
:to="19"></n-number-animation>年</span>
|
||||
<span class="">技术沉淀</span>
|
||||
</div>
|
||||
|
||||
|
@ -498,6 +498,7 @@ const onSwiperExp = (swiper: any) => {
|
||||
})
|
||||
}
|
||||
const swiper_exp = ref();
|
||||
const activeSlideIndex = ref(0);
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
|
@ -4,10 +4,10 @@
|
||||
<div class="group_666" style="position: relative;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/service.png" style="width: 100%;">
|
||||
<img src="public/img/services1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/service.png" style="width: 100%;">
|
||||
<img src="public/img/services1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
|
||||
@ -25,556 +25,171 @@
|
||||
</div> -->
|
||||
</div>
|
||||
<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;">
|
||||
style="background-color: #ffffff;overflow: unset;position: relative;height: 629px;">
|
||||
<img src="public/img/service_01s.png" style="width: 100%;position: absolute;top: -30px;z-index: 10;">
|
||||
<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 style="color: #FC7428;margin-bottom: 20px;">内容创作与运营</div>
|
||||
<div style="background-color: #FC7428;width:40%;height: 8px;margin: 0 auto;"></div>
|
||||
</div>
|
||||
<div style="cursor: pointer;">
|
||||
<NuxtLink to="/proServices/">
|
||||
专业技术服务
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<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 style="font-size: 34px;font-weight: 700;">全媒体推广解决方案</div>
|
||||
<div style="color: #768597;font-size: 16px;margin-top: 30px;">多维度矩阵覆盖,赋能品牌增长新势能</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 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 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 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 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 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>
|
||||
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
|
||||
私有化知识库与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: 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 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 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>
|
||||
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
|
||||
模型生态扩展接入更多模型</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: 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 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 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>
|
||||
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
|
||||
垂直领域深度适配多行业应用</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_center_01s">
|
||||
<span class="service_center_01s_title">
|
||||
<img src="public/img/content_ds.png" alt="" style="margin-right: 10px;">
|
||||
覆盖各大主流平台
|
||||
</span>
|
||||
<span class="service_center_01s_text">定制【流量矩阵+内容策略+效果追踪】一体化方案</span>
|
||||
<div class="btn_lx">联系我们</div>
|
||||
</div>
|
||||
<div class="service_top1_width" style="text-align: center;">
|
||||
<img src="public/img/service_022.png" style="width:100%;height: 100%;">
|
||||
<div class="service_center_01s">
|
||||
<span class="service_center_01s_title">
|
||||
<img src="public/img/content_xx.png" alt="" style="margin-right: 10px;">
|
||||
平台搭建
|
||||
</span>
|
||||
<span class="service_center_01s_text">抖音、视频号、快手、B站、微信公众号、小红书等一站式布局</span>
|
||||
<div class="btn_lx">联系我们</div>
|
||||
</div>
|
||||
<div class="service_center_01s">
|
||||
<span class="service_center_01s_title">
|
||||
<img src="public/img/content_yy.png" alt="" style="margin-right: 10px;">
|
||||
精准运营
|
||||
</span>
|
||||
<span class="service_center_01s_text">行业大数据分析+账号定位+内容持续输出+流量裂变模型+账号运营变现</span>
|
||||
<div class="btn_lx">联系我们</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 30px;text-align: center;width: 100%;">
|
||||
<span class="more_bot">
|
||||
<span style="cursor: pointer;">了解更多解决方案</span>
|
||||
<img src="public/img/moreright.png" alt="" style="margin-left: 15px;width: 10px;cursor: pointer;">
|
||||
</span>
|
||||
</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: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
|
||||
<div class="service_center_01" style="width: 30%;">
|
||||
<img src="public/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="public/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="margin-top: 30px;font-size: 14px;font-weight: 400;color: #768597;">
|
||||
我们专注于提供全方位的定制化软件开发服务,满足您多样化的业务需求。无论是面向特定群体的活动平台(如"多样青春项目"),功能完善的电子商务系统(如"商城项目"),互动性强的活动应用(如"健身打卡活动项目"),还是便捷高效的组织管理工具(如"协会小程序项目"),我们的团队都能运用主流技术栈和敏捷开发模式,为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序,驱动业务创新
|
||||
</div>
|
||||
<div
|
||||
style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;width: 100%;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_025.png" style="width:135px;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/service_026.png" style="width:135px;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/service_027.png" style="width:135px;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/service_028.png" style="width:135px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 40px 0px 100px 0px;z-index: 30;background-color: #ffffff;">
|
||||
|
||||
<div style="padding: 40px 0px 100px 0px;z-index: 30;background: url(/img/content_con.png) 100% no-repeat;height: 634px;">
|
||||
<div style="text-align: center;padding-top: 30px;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 style="font-size: 34px;font-weight: 700;">品牌账号代运营</div>
|
||||
<div class="flex-row justify-center align-center" style="margin-top: 30px;">
|
||||
<div class="video_platform ">
|
||||
<img src="public/img/mp4_video.png" alt="" style="margin-right: 10px;">
|
||||
视频平台
|
||||
</div>
|
||||
<div class="video_wechat">
|
||||
<img src="public/img/video_wechat.png" alt="" style="margin-right: 10px;">
|
||||
微信账号
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
|
||||
<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 class="service-yw" style="position: relative;" v-for="(i,index) in 5" :key="index">
|
||||
<img :src="`/img/media/${i}.png`" style="width:216px;">
|
||||
<!-- <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>
|
||||
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
|
||||
帮助决策者制定针对性防护策略降低网络攻击、数据泄露和业务中断等风险</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<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>
|
||||
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
|
||||
专业团队,快速检测、定位并处置安全威胁,最大限度减少损失,保障业务连续性</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div style="width: 100%;color: #FC7428;font-size: 18px;text-align: center;margin-top: 20px;">全流程支持:脚本策划→专业拍摄→后期特效→精准投放→效果复盘</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center align-center bottom-3s" style="padding-top: 50px;z-index: 30;background-color: #f8f8f8;height: 559px;">
|
||||
<div>
|
||||
<img src="public/img/media/leftpeo.png" alt="">
|
||||
</div>
|
||||
<div class="flex-col">
|
||||
<div class="flex-col">
|
||||
<span class="mediat1">线上线下活动策划</span>
|
||||
<span class="mediat2">多维度矩阵覆盖,赋能品牌增长新势能</span>
|
||||
</div>
|
||||
<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>
|
||||
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">ios和Android应用防调试
|
||||
防篡改 防窃取 防逆向抵御各类网络攻击和数据泄露风险</div>
|
||||
<div style="width: 568px;height: 1px;background: #EEEEEE;margin-top: 40px;"></div>
|
||||
<div>
|
||||
<div class="flex justify-center mediat3">
|
||||
<img src="public/img/media/left1.png" alt="">
|
||||
创意驱动,精准执行,从构思到落地,打通线上线下资源,一站式策划沉浸式活动,引爆品牌传播声量。
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
|
||||
网络安全实时监控服务提供24小时威胁检测与主动防御,实时识别漏洞,保障数据安全</div>
|
||||
<div class="flex justify-center mediat3">
|
||||
<img src="public/img/media/left2.png" alt="">
|
||||
线上活动:聚焦行业热点打造爆款话题 (话题营销+直播连麦+裂变传播)助力品牌实现社交裂变传播,激活私域流量池。
|
||||
</div>
|
||||
<div class="flex justify-center mediat3">
|
||||
<img src="public/img/media/left3.png" alt="">
|
||||
线下活动:全案服务涵盖发布会、快闪店、行业峰会等多元形式,提供从创意策划、资源整合、现场执行到效果追踪的全流程专业落地解决方案。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_033" style="padding-top: 60px;z-index: 30;">
|
||||
<div 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 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>
|
||||
<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
|
||||
<div style="z-index: 10;">
|
||||
<img src="public/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 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
对安卓应用进行深度加密、加壳保护的安全产品,且在系统层实时进行威胁环境检测,保护应用远离恶意破解、反编译、二次打包,动态调试、内存抓取等威胁</div>
|
||||
<div class="flex justify-center align-center bottom-3s" style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 559px;">
|
||||
|
||||
<div class="flex-col">
|
||||
<div class="flex-col">
|
||||
<span class="mediat1">互联网新闻发布</span>
|
||||
<span class="mediat2">多维度矩阵覆盖,赋能品牌增长新势能</span>
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
|
||||
<div style="width: 568px;height: 1px;background: #EEEEEE;margin-top: 40px;"></div>
|
||||
<div>
|
||||
<div class="flex justify-center mediat3">
|
||||
<img src="public/img/media/right1.png" alt="">
|
||||
整合全网权威渠道,依托海量优质媒体资源,定制新闻发布策略,以专业视角与高效执行,让您的新闻迅速抢占舆论高地,第一时间触达目标受众。
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
|
||||
<div style="z-index: 10;">
|
||||
<img src="public/img/service_036.png" style="width:36px;height: 36px;">
|
||||
<div class="flex justify-center mediat3">
|
||||
<img src="public/img/media/right2.png" alt="">
|
||||
权威媒体资源覆盖人民网、新浪、网易等、科技等垂直领域媒体,形成多渠道传播矩阵,深度触达目标受众,强化品牌公信力与行业影响力。
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<div class="group_28 flex-row justify-between numberTopBox" style="width: 390px;text-align: center;margin-left: 0;">
|
||||
<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"
|
||||
:from="0" :to="1000"></n-number-animation>+</span>
|
||||
<span class="">权威媒体资源</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="text-group_10 flex-col justify-between" style="width: auto;height: 80px;">
|
||||
<span class="text_58" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
|
||||
ref="numberAnimationInstRefKH" :active="false" :from="0"
|
||||
:to="800"></n-number-animation>万</span>
|
||||
<span class="">单日曝光超</span>
|
||||
</div>
|
||||
|
||||
<div class="text-group_11 flex-col justify-between" style="width: auto;height: 80px;">
|
||||
<span class="text_61" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
|
||||
ref="numberAnimationInstRefJS" :active="false" :from="0"
|
||||
:to="50"></n-number-animation>+</span>
|
||||
<span class="">媒体矩阵报道</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div style="font-size: 18px;color: #3D3D3D;font-weight: 700;z-index: 10;margin-left: 20px;">
|
||||
IOS应用加固</div>
|
||||
</div>
|
||||
<div style="padding: 0px 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
iOS应用加固是旨在为广大的i0S软件开发者以及厂商源代码提供加密保护,通过代码加密、指令混淆等技术手段在编译阶段对源代码进行常量加密、逻辑混淆、结构混排等保护,增加反编译、改和注入的难度,提高核心代码及数据的安全性
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img src="public/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="public/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 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
多重加密技术对应用运行时的进程空间进行防护,采用动态加解密技术,阻止各种调试器进行内存调试、注入和dump</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<div style="display: flex;align-items: center;padding:30px 30px 20px 30px;">
|
||||
<div style="z-index: 10;">
|
||||
<img src="public/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 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
在程序运行时对文件指纹及完整性进行校验,如发现任一文件被篡改或与原始签名不一致,应用则停止运行,从而保证了应用运行的安全</div>
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img src="public/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="public/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 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
动态监控程序中的内存分布文件,可以随时监控到内存读取等操作,从而保护内存截取攻击,安全键盘和通信协议加密分别对输入和网络通信增加了安全保障,</div>
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img src="public/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="public/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 30px;position: relative;;color: #768597;font-size: 14px;font-weight: 400;">
|
||||
对classes.dex文件采用高压缩及加密变形处理,并对关键核心逻辑代码进行双重VMP保护;对SO文件代码进行LLVM混淆及加密保护,Native层代码安全性得到有效的保证</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/media/rightpeo.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 715px;">
|
||||
<div 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 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` }"
|
||||
style="position: absolute;border-radius: 8px;width: 277px;height: 428px;padding: 30px;">
|
||||
<div v-if="mousindex != 1">
|
||||
<img src="public/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: mousindex == 1 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
基于AI与物联网的智能监控系统实时分析精准预警安全高效运行
|
||||
</div>
|
||||
<div v-if="mousindex == 1" style="margin-top: 30px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<img src="public/img/service_049.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
监控回溯
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_050.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
人员轨迹
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box2" @mouseenter="mous(2, $event)"
|
||||
:class="mousindex == 2 ? 'service_bottom' : 'service_bottom_no'"
|
||||
:style="{ left: `${left2}px`, top: `${top2}px` }"
|
||||
style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
|
||||
<div v-if="mousindex != 2">
|
||||
<img src="public/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: mousindex == 2 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
互联网智慧门禁:安全便捷,智能管理,远程控制
|
||||
</div>
|
||||
<div v-if="mousindex == 2" style="margin-top: 30px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<img src="public/img/service_052.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
人脸识别
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_053.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
id卡
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_054.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
蓝牙检测
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_055.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
停车管理系统
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box3" @mouseenter="mous(3, $event)"
|
||||
:class="mousindex == 3 ? 'service_bottom' : 'service_bottom_no'"
|
||||
:style="{ left: `${left3}px`, top: `${top3}px` }"
|
||||
style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
|
||||
<div v-if="mousindex != 3">
|
||||
<img src="public/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: mousindex == 3 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
智慧物联"突出互联网+智能化核心物联网技术、云端管理、能效优化
|
||||
</div>
|
||||
<div v-if="mousindex == 3" style="margin-top: 30px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<img src="public/img/service_056.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
充电桩
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_057.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
安全警告
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box4" @mouseenter="mous(4, $event)"
|
||||
:class="mousindex == 4 ? 'service_bottom' : 'service_bottom_no'"
|
||||
:style="{ left: `${left4}px`, top: `${top4}px` }"
|
||||
style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
|
||||
<div v-if="mousindex != 4">
|
||||
<img src="public/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: mousindex == 4 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
智慧水电云管家,实时计费自动缴费,高效管理无忧。
|
||||
</div>
|
||||
<div v-if="mousindex == 4" style="margin-top: 30px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<img src="public/img/service_058.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
物业缴费
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_059.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
报修
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_060.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
投诉处理
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box5" @mouseenter="mous(5, $event)"
|
||||
:class="mousindex == 5 ? 'service_bottom' : 'service_bottom_no'"
|
||||
:style="{ left: `${left5}px`, top: `${top5}px` }"
|
||||
style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
|
||||
<div v-if="mousindex != 5">
|
||||
<img src="public/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: mousindex == 5 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
智慧养老系统:AI监护+健康管理打造安全便捷银发生活。
|
||||
</div>
|
||||
<div v-if="mousindex == 5" style="margin-top: 30px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<img src="public/img/service_061.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
烟感警报
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_062.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
摄像头人物摔倒提示
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_063.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
防丢手环
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_064.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
护理请求传感器
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box6" @mouseenter="mous(6, $event)"
|
||||
:class="mousindex == 6 ? 'service_bottom' : 'service_bottom_no'"
|
||||
:style="{ left: `${left6}px`, top: `${top6}px` }"
|
||||
style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
|
||||
<div v-if="mousindex != 6">
|
||||
<img src="public/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: mousindex == 6 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
智慧租房系统,实现线上托管自动化流程,或者提升用户体验
|
||||
</div>
|
||||
<div v-if="mousindex == 6" style="margin-top: 30px;">
|
||||
<div style="display: flex;align-items: center;">
|
||||
<div>
|
||||
<img src="public/img/service_065.png" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
托管出租
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box7" @mouseenter="mous(7, $event)"
|
||||
:class="mousindex == 7 ? 'service_bottom' : 'service_bottom_no'"
|
||||
:style="{ left: `${left7}px`, top: `${top7}px` }"
|
||||
style="position: absolute;border-radius: 8px;width: 277px;height: 196px;padding: 30px;">
|
||||
<div v-if="mousindex != 7">
|
||||
<img src="public/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: mousindex == 7 ? '#ffffff' : '#768597', fontWeight: '400', marginTop: '10px' }">
|
||||
{{ mousindex != 7 ? '创新科技驱动的互联网智慧化解决方案,赋能企业数字化转型' :
|
||||
'创新科技驱动的互联网智慧化解决方案,赋能企业数字化转型。高效便捷、精准赋能,覆盖多场景需求。定制化服务,助力降本增效。欢迎垂询,获取专属升级方案' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_051" style="z-index: 30;">
|
||||
<div style="width: 80%;">
|
||||
<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">
|
||||
<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>
|
||||
<div class="flex" style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 535px;width: 100%;">
|
||||
<div style="background: url(/img/media/botleft.png) 100% 100% no-repeat;width: 50%;"></div>
|
||||
<div style="background: url(/img/media/botright.png)100% 100% no-repeat;width: 50%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -616,6 +231,9 @@ const serviceList = ref([
|
||||
{ name: '运维流程' },
|
||||
])
|
||||
|
||||
const numberAnimationInstRef = ref()
|
||||
const numberAnimationInstRefKH = ref()
|
||||
const numberAnimationInstRefJS = ref()
|
||||
|
||||
const mousindex = ref(1);
|
||||
|
||||
@ -1133,6 +751,22 @@ const animate = () => {
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.numberTopBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
beforeReveal: function (el: any) {
|
||||
numberAnimationInstRef.value.play()
|
||||
numberAnimationInstRefKH.value.play()
|
||||
numberAnimationInstRefJS.value.play()
|
||||
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1321,4 +955,140 @@ const animate = () => {
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
.service_center_01s{
|
||||
background: url('/public/img/content_top.png') 100% no-repeat;
|
||||
width: 380px;
|
||||
height: 196px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
padding-left: 30px;
|
||||
.service_center_01s_title{
|
||||
margin-top: 30px;
|
||||
width: 180px;
|
||||
height: 18px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #FC7428;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.service_center_01s_text{
|
||||
margin-top: 20px;
|
||||
width: 325px;
|
||||
height: 20px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #768597;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.btn_lx{
|
||||
margin-top: 40px;
|
||||
width: 90px;
|
||||
height: 32px;
|
||||
background: linear-gradient( 270deg, #FC7428 0%, #FFA06B 100%);
|
||||
border-radius: 116px 116px 116px 116px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.more_bot{
|
||||
height: 16px;
|
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #FC772D;
|
||||
line-height: 16px;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.video_platform{
|
||||
width: 179px;
|
||||
height: 48px;
|
||||
background: url(public/img/video.png) 100% no-repeat;
|
||||
line-height: 44px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #FC7428;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.video_wechat{
|
||||
width: 185px;
|
||||
height: 52px;
|
||||
background: url(public/img/wechat1.png) 100% no-repeat;
|
||||
line-height: 46px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.bottom-3s{
|
||||
width: 100%;
|
||||
.mediat1{
|
||||
width: 272px;
|
||||
height: 49px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 700;
|
||||
font-size: 34px;
|
||||
color: #222222;
|
||||
line-height: 49px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.mediat2{
|
||||
margin-top: 20px;
|
||||
width: 272px;
|
||||
height: 16px;
|
||||
font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #768597;
|
||||
line-height: 16px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
.mediat3{
|
||||
margin-top: 30px;
|
||||
width: 560px;
|
||||
height: 40px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #3D3D3D;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
img{
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -31,10 +31,14 @@
|
||||
<div class="text-wrapper_11">
|
||||
<span class="text_42">Company Honors </span>
|
||||
</div> -->
|
||||
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
|
||||
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 1200px;">
|
||||
<div class="flex-row">
|
||||
<div class="text_25">
|
||||
<span>公司动态</span>
|
||||
<span>
|
||||
<NuxtLink to="/societyDutyNew/">
|
||||
公司动态
|
||||
</NuxtLink>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text_25">
|
||||
<span style="color: rgb(252, 116, 40);">活动影集(部分)</span>
|
||||
|
291
pages/societyDutyNew.vue
Normal file
@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<!-- Swiper 容器 -->
|
||||
<div class="group_666" style="position: relative;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/societyduty/shehui.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/societyduty/shehui.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
|
||||
<div class="flex-row justify-center align-center">
|
||||
<div>
|
||||
<img src="public/img/left.png" alt="">
|
||||
</div>
|
||||
<div style="margin: 0px 20px;">
|
||||
<img src="public/img/morse.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/right.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="box_11 flex-col bottom_imgss">
|
||||
<!-- <div class="text-wrapper_10">
|
||||
<span class="text_41">公司荣誉</span>
|
||||
</div>
|
||||
<div class="text-wrapper_11">
|
||||
<span class="text_42">Company Honors </span>
|
||||
</div> -->
|
||||
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 1200px;">
|
||||
<div class="flex-row">
|
||||
<div class="text_25">
|
||||
<span style="color: rgb(252, 116, 40);">公司动态</span>
|
||||
<div
|
||||
style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="text_25">
|
||||
<span >活动影集(部分)</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- <div class="flex-row justify-center align-center">
|
||||
<div style="margin-right: 10px;">
|
||||
<span class="text_32">更多案例</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/anli.png" />
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="group_15" style="flex: 0 0 100%;"></div>
|
||||
</div>
|
||||
|
||||
<div class="boxgs flex-row flex-wrap">
|
||||
<div class="boxgs_top">
|
||||
<div></div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box_con flex-row" v-for="(item,index) in lists" :key="index">
|
||||
<div class="align-center" style="justify-content: center;">
|
||||
<img width="277px" height="189px" :src="`/img/societyduty/s${index+1}.png`" alt="">
|
||||
</div>
|
||||
<div class="flex-col" style="justify-content: center;margin-top: 5px;">
|
||||
<span class="text_tt">
|
||||
{{item.title}}
|
||||
</span>
|
||||
<span class="text_cc">
|
||||
{{item.title}}
|
||||
</span>
|
||||
</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()
|
||||
|
||||
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',
|
||||
},
|
||||
}
|
||||
|
||||
let vesSwiper: any = null
|
||||
const onSwiperExp = (swiper: any) => {
|
||||
vesSwiper = swiper
|
||||
}
|
||||
const swiper_exp = ref();
|
||||
const lists = ref([
|
||||
{title: '21年西工硅巷青创加速营仪式开营'},
|
||||
{title: '21年西工硅巷青创加速营活动进行中'},
|
||||
{title: '香港青英会15 周年、第16 届执委会暨第7屆理事会就职仪式'},
|
||||
{title: '青年企业家助力河南高质量发展暨河南青年创新创业论坛'},
|
||||
|
||||
]);
|
||||
// 新闻数据
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
animate()
|
||||
})
|
||||
})
|
||||
const numberAnimationInstRef = ref()
|
||||
const numberAnimationInstRefKH = ref()
|
||||
const numberAnimationInstRefJS = ref()
|
||||
const numberAnimationInstRefHY = ref()
|
||||
const animate = () => {
|
||||
|
||||
const sr = ScrollReveal();
|
||||
sr.reveal('.leftBox', {
|
||||
origin: "left",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.rightBox', {
|
||||
origin: "right",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.topBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.bottomBox', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.numberTopBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
beforeReveal: function (el: any) {
|
||||
numberAnimationInstRef.value.play()
|
||||
numberAnimationInstRefKH.value.play()
|
||||
numberAnimationInstRefJS.value.play()
|
||||
numberAnimationInstRefHY.value.play()
|
||||
},
|
||||
})
|
||||
sr.reveal('.topSj', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 5,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
useDelay: 'always',
|
||||
interval: 50,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
|
||||
|
||||
|
||||
.group_666 .swiper-slide img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
height: auto;
|
||||
transition: 1s linear 2s;
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
|
||||
.group_666 .swiper-slide-active img,
|
||||
.swiper-slide-duplicate-active img {
|
||||
transition: 6s linear;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
.bottom_imgss{
|
||||
// background: url(/public/img/customer/bg-s.png);
|
||||
background: #F8F8F8;
|
||||
width: 1920px;
|
||||
height: 1047px;
|
||||
// background-size: 100%;
|
||||
}
|
||||
.boxgs{
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
.boxgs_top{
|
||||
background: url(/img/societyduty/newstop.png) 100% 100% no-repeat;
|
||||
width: 100%;height: 385px;border: 1px solid #FC7428;border-radius: 24px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
.box_con{
|
||||
margin:20px;
|
||||
background-color: #ffffff;
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
border-radius:4px;
|
||||
.text_tt{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
color: #3D3D3D ;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
padding: 0 25px 20px 25px;
|
||||
}
|
||||
.text_cc{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
overflow-wrap: break-word;
|
||||
color: #999999 ;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
BIN
public/img/content_con.png
Normal file
After Width: | Height: | Size: 71 KiB |
BIN
public/img/content_ds.png
Normal file
After Width: | Height: | Size: 196 B |
BIN
public/img/content_top.png
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
public/img/content_xx.png
Normal file
After Width: | Height: | Size: 505 B |
BIN
public/img/content_yy.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
public/img/media/1.png
Normal file
After Width: | Height: | Size: 103 KiB |
BIN
public/img/media/2.png
Normal file
After Width: | Height: | Size: 74 KiB |
BIN
public/img/media/3.png
Normal file
After Width: | Height: | Size: 100 KiB |
BIN
public/img/media/4.png
Normal file
After Width: | Height: | Size: 87 KiB |
BIN
public/img/media/5.png
Normal file
After Width: | Height: | Size: 93 KiB |
BIN
public/img/media/botleft.png
Normal file
After Width: | Height: | Size: 510 KiB |
BIN
public/img/media/botright.png
Normal file
After Width: | Height: | Size: 671 KiB |
BIN
public/img/media/left1.png
Normal file
After Width: | Height: | Size: 1.4 KiB |
BIN
public/img/media/left2.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
public/img/media/left3.png
Normal file
After Width: | Height: | Size: 1.1 KiB |
BIN
public/img/media/leftpeo.png
Normal file
After Width: | Height: | Size: 68 KiB |
BIN
public/img/media/right1.png
Normal file
After Width: | Height: | Size: 1.2 KiB |
BIN
public/img/media/right2.png
Normal file
After Width: | Height: | Size: 1.5 KiB |
BIN
public/img/media/rightpeo.png
Normal file
After Width: | Height: | Size: 58 KiB |
BIN
public/img/moreright.png
Normal file
After Width: | Height: | Size: 722 B |
BIN
public/img/mp4_video.png
Normal file
After Width: | Height: | Size: 668 B |
BIN
public/img/service_01s.png
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
public/img/services1.png
Normal file
After Width: | Height: | Size: 1.3 MiB |
BIN
public/img/societyduty/newstop.png
Normal file
After Width: | Height: | Size: 12 KiB |
BIN
public/img/societyduty/组 4775.png
Normal file
After Width: | Height: | Size: 267 KiB |
BIN
public/img/video.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
BIN
public/img/video_wechat.png
Normal file
After Width: | Height: | Size: 664 B |
BIN
public/img/wechat1.png
Normal file
After Width: | Height: | Size: 2.0 KiB |