榆钱落尽槿花稀
2052b40fbc
- 新增`useCdn` composable，用于全局CDN URL管理 - 在`nuxt.config.ts`中配置CDN域名 - 更新图片资源路径，使用CDN URL加载 - 优化页面样式，统一使用SCSS文件 - 删除冗余组件`CdnImageExample.vue` -头部动效增加 -增加返回顶部按钮
793 lines
26 KiB
Vue
793 lines
26 KiB
Vue
<template>
|
||
<div style="width: 100%;">
|
||
<!-- Swiper 容器 -->
|
||
<div class="group_666" style="position: relative;height: 100vh;">
|
||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||
<swiper-slide>
|
||
<img :src="`${cdnUrl}/img/banner.png`" style="width: 100%;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img :src="`${cdnUrl}/img/banner2.png`" style="width: 100%;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<video class="video_1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"
|
||
:src="`${cdnUrl}/img/1212.mp4`"></video>
|
||
</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="`${cdnUrl}/img/left.png`" alt="">
|
||
</div>
|
||
<div style="margin: 0px 20px;">
|
||
<img :src="`${cdnUrl}/img/morse.png`" alt="">
|
||
</div>
|
||
<div>
|
||
<img :src="`${cdnUrl}/img/right.png`" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_2 flex-col">
|
||
<div class="box_2 flex-col">
|
||
<div class="group_3 flex-row justify-center align-center">
|
||
<div class="group_4 flex-col leftBox">
|
||
<div class="text-group_1 flex-col justify-between">
|
||
<span class="text_7">灵睿的互联网之道</span>
|
||
<span class="text_8">
|
||
The Way of the Internet
|
||
</span>
|
||
</div>
|
||
<div style="display: flex;justify-content: start;margin-top: 50px;">
|
||
<div @click="openType(1)" :class="typeId == 1 ? 'text_9' : 'text_11'">公司简介</div>
|
||
<div @click="openType(2)" :class="typeId == 2 ? 'text_9' : 'text_11'">运营方法论</div>
|
||
<div @click="openType(3)" :class="typeId == 3 ? 'text_9' : 'text_11'">互联网营销</div>
|
||
</div>
|
||
<div class="box_3 flex-col" style="justify-content: start;">
|
||
<div v-if="typeId ==1" class="box_4 flex-col"></div>
|
||
<div v-if="typeId ==2" class="box_4 flex-col" style="margin-left: 135px;"></div>
|
||
<div v-if="typeId ==3" class="box_4 flex-col" style="margin-left: 287px;"></div>
|
||
</div>
|
||
<div class="text_12" v-if="typeId == 1">
|
||
洛阳灵睿网络技术有限公司
|
||
<br>
|
||
——智慧信息化与数字内容服务领航者
|
||
<br>
|
||
洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
|
||
<br>
|
||
专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
|
||
</div>
|
||
<div class="text_12" v-if="typeId == 2">
|
||
|
||
在灵睿，我们的运营方法论是基于深入的<strong>市场洞察、用户需求分析</strong>和科学的<strong>数据驱动</strong>，通过系统化的策略为品牌赋能。我们从运营的<strong>江湖地位</strong>出发，帮助品牌在竞争激烈的市场中确立<strong>独特的定位和竞争力；</strong>通过精确的运营基本逻辑，确保每一项策略与品牌核心价值相匹配，推动<strong>可持续发展。</strong>
|
||
我们将运营分为三大核心手段：<strong>内容运营、活动运营和用户运营</strong>。内容运营注重通过高质量、有共鸣的内容与受众建立深度联系；活动运营则通过创意和精准策划，提升品牌曝光和用户参与度；用户运营关注从触达到转化的全过程，通过个性化服务增强用户粘性与忠诚度。
|
||
灵睿深知，运营不仅依赖直觉与经验，更依<strong>赖数据支持。</strong>我们通过精细化的<strong>数据统计与分析</strong>数据统计与分析，实时监测运营效果并做出策略调整，确保每个决策都有<strong>数据背书</strong>。通过这一整套运营体系，我们不仅能为客户提供行之有效的解决方案，更能帮助他们在数字化浪潮中领先一步，实现<strong>持续增长与价值创造。</strong>
|
||
</div>
|
||
<div class="text_12" v-if="typeId == 3">
|
||
在灵睿，我们通过深度的<strong>数据分析</strong>和精确的<strong>用户洞察</strong>，帮助企业实现<strong>品牌的精准传播和长期增长。</strong>我们相信，成功的互联网营销不仅仅是提高曝光率，更是通过<strong>内容创作、活动策划和用户互动</strong>等手段，打造与受众的深层次连接，从而促进<strong>品牌的认知度和忠诚度。</strong>
|
||
我们帮助客户制定个性化的互联网营销策略，覆盖<strong>社交媒体、搜索引擎、视频内容</strong>等多个渠道，确保每个接触点都能精准传达品牌价值。在实际操作中，我们依托<strong>技术优势</strong>，结合行业<strong>最佳实践</strong>，为客户提供<strong>定制化的营销方案</strong>，推动<strong>线上线下的无缝连接。</strong>
|
||
灵睿的互联网营销不仅是单一的推广行为，更是一个以用户为中心的全方位战略，帮助企业在快速变化的市场中保持<strong>竞争力</strong>，实现<strong>持续增长。</strong>
|
||
</div>
|
||
<div class="text-wrapper_2 flex-col">
|
||
<nuxt-link to="/aboutUs/" class="text_13">
|
||
<span>查看全部</span>
|
||
</nuxt-link>
|
||
</div>
|
||
</div>
|
||
<div @click="videoShow = true"
|
||
class="group_5 flex-col justify-center align-center rightBox cursor-pointer">
|
||
<div class="section_1 flex-col">
|
||
<div class="image-wrapper_2 flex-col">
|
||
<img class="image_5" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/bf.png`" />
|
||
</div>
|
||
</div>
|
||
<div class="content_box"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_2 flex-col">
|
||
<div class="box_5 flex-col">
|
||
<span class="text_14 topBox">我们的业务</span>
|
||
<span class="text_15 topBox">
|
||
Our BusinessWay
|
||
</span>
|
||
<div class="flex-row justify-center align-center" style="margin-top: 30px;">
|
||
<div class="leftBox section_2s flex-col" style="margin-right: 30px;">
|
||
<div class="group_6 flex-col">
|
||
<div class="box_6 flex-row align-center" style="width: 100%;">
|
||
<div class="text-group_2 flex-col justify-between">
|
||
<span class="text_17" style="color: #0256FF;">
|
||
专业技术服务
|
||
</span>
|
||
<span class="text_16" style="color: #0256FF;">
|
||
专业提供互联网技术支持，助力企业高效发展
|
||
</span>
|
||
</div>
|
||
<div class="image-wrapper_3s flex-col align-center">
|
||
<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1s.png`" />
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="group_10s flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/aiyingyong.png`" />
|
||
</div>
|
||
<div class="text-group_3 flex-col justify-between">
|
||
<span class="text_18">AI应用与落地</span>
|
||
<span class="text_19">
|
||
从模型选型、数据处理、算法优化到应用集成与部署的全栈服务
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_10 flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/kaifapeizhi.png`" />
|
||
</div>
|
||
<div class="text-group_3 flex-col justify-between">
|
||
<span class="text_18">定制软件开发</span>
|
||
<span class="text_19">
|
||
为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_10 flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer"
|
||
:src="`${cdnUrl}/img/a-yunweishuju1x.png`" />
|
||
</div>
|
||
<div class="text-group_3 flex-col justify-between">
|
||
<span class="text_18">IT运维服务</span>
|
||
<span class="text_19">
|
||
专业守护数据，防御威胁，护航企业数字安全
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_10 flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer"
|
||
:src="`${cdnUrl}/img/wangluoanquanshebei.png`" />
|
||
</div>
|
||
<div class="text-group_3 flex-col justify-between">
|
||
<span class="text_18">网络与信息安全</span>
|
||
<span class="text_19">
|
||
专业提供网络信息安全防护、实时监测与风险处置服务
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_10 flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer"
|
||
:src="`${cdnUrl}/img/yekuogongdianfangan.png`" />
|
||
</div>
|
||
<div class="text-group_3 flex-col justify-between">
|
||
<span class="text_18">智慧化解决方案</span>
|
||
<span class="text_19">
|
||
利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rightBox section_2sa flex-col">
|
||
<div class="group_6s flex-col">
|
||
<div class="box_6 flex-row align-center" style="width: 100%;">
|
||
<div class="text-group_2 flex-col justify-between">
|
||
<span class="text_17">
|
||
内容创作与运营
|
||
</span>
|
||
<span class="text_16" style="color: #FC7428;">
|
||
构建全域影响力，赋能品牌长效增长
|
||
</span>
|
||
</div>
|
||
<div class="image-wrapper_3s flex-col align-center">
|
||
<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1.png`" />
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="group_10s flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/quanmeiti.png`" />
|
||
</div>
|
||
<div class="text-group_3_3 flex-col justify-between">
|
||
<span class="text_18">全媒体推广解决方案</span>
|
||
<span class="text_19">
|
||
覆盖各大主流平台定制【流量矩阵+内容策略+效果追踪】一体化方案
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_10 flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/pingpai.png`" />
|
||
</div>
|
||
<div class="text-group_3_3 flex-col justify-between">
|
||
<span class="text_18">品牌账号代运营</span>
|
||
<span class="text_19">
|
||
全链路赋能品牌增长，内容+策略+数据 · 打造品效合一的社交资产
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_10 flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/xianshang.png`" />
|
||
</div>
|
||
<div class="text-group_3_3 flex-col justify-between">
|
||
<span class="text_18">线上线下活动策划</span>
|
||
<span class="text_19">
|
||
专业守护数据，防御威胁，护航企业数字安全
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_10 flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/news.png`" />
|
||
</div>
|
||
<div class="text-group_3_3 flex-col justify-between">
|
||
<span class="text_18">互联网新闻发布</span>
|
||
<span class="text_19">
|
||
整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_10 flex-col"></div>
|
||
<div class="group_7 flex-row justify-between">
|
||
<div class="image-wrapper_5 flex-col">
|
||
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/daren.png`" />
|
||
</div>
|
||
<div class="text-group_3_3 flex-col justify-between">
|
||
<span class="text_18">IP孵化与达人合作</span>
|
||
<span class="text_19">
|
||
深度孵化+精准匹配，内容资产×流量裂变 · 打造IP与达人的共生生态
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background-color: #ffffff;">
|
||
<div class="box_7 flex-col">
|
||
<span class="text_24 topBox">行业案例</span>
|
||
<span class="text_15 topBox">Industry Cases</span>
|
||
<div class="dswper">
|
||
<swiper ref="swiper_exp" :slidesPerView="2" loop :autoplay="false"
|
||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp">
|
||
<swiper-slide v-for="(item, index) in 14" :key="index">
|
||
<img :src="`${$cdnUrl}/img/home_al/op${item}.png`" style="width: 585px;height: 300px; margin: 0 auto;">
|
||
</swiper-slide>
|
||
</swiper>
|
||
<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;">
|
||
<div v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;"
|
||
:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_11 flex-col">
|
||
<div class="text-wrapper_10">
|
||
<span class="text_41">新闻动态</span>
|
||
</div>
|
||
<div class="text-wrapper_11">
|
||
<span class="text_42">news information</span>
|
||
</div>
|
||
<div class="box_12 flex-row justify-center" v-if="newsList.length > 0">
|
||
<img @click="openUrl(newsList[0].id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
|
||
:src="newsList[0].image" style="cursor: pointer;;object-fit: cover;" />
|
||
<div class="box_13 flex-col topBox" @click="openUrl(newsList[1].id)" style="cursor: pointer;">
|
||
<div class="text-group_6">
|
||
<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
|
||
{{ newsList[1].title }}
|
||
</div>
|
||
<div class="two-line-ellipsis"
|
||
style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
|
||
{{ newsList[1].subtitle }}
|
||
</div>
|
||
</div>
|
||
<div class="group_22 flex-row">
|
||
<div class="section_6 flex-col"></div>
|
||
<span class="text_44">{{ newsList[1].cate.name }}</span>
|
||
<span class="text_45">{{ retTime(newsList[1].release_time_text) }}</span>
|
||
</div>
|
||
</div>
|
||
<img @click="openUrl(newsList[2].id)" class="image_8 rightBox" referrerpolicy="no-referrer"
|
||
:src="newsList[2].image" style="cursor: pointer;;object-fit: cover;" />
|
||
</div>
|
||
<div class="box_14 flex-row justify-center" v-if="newsList.length > 0">
|
||
<div class="group_23 flex-col leftBoxTop" @click="openUrl(newsList[0].id)" style="cursor: pointer;">
|
||
<div class="text-group_7">
|
||
<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
|
||
{{ newsList[0].title }}
|
||
</div>
|
||
<div class="two-line-ellipsis"
|
||
style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
|
||
{{ newsList[0].subtitle }}
|
||
</div>
|
||
</div>
|
||
<div class="group_24 flex-row">
|
||
<div class="group_25 flex-col"></div>
|
||
<span class="text_47">{{ newsList[0].cate.name }}</span>
|
||
<span class="text_48">{{ retTime(newsList[0].release_time_text) }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<img @click="openUrl(newsList[1].id)" class="image_9 bottomBox" referrerpolicy="no-referrer"
|
||
:src="newsList[1].image" style="cursor: pointer;;object-fit: cover;" />
|
||
<div class="group_26 flex-col rightBox" @click="openUrl(newsList[2].id)" style="cursor: pointer;">
|
||
<div class="text-group_8">
|
||
<div class="text-group_7" style="margin: 0;">
|
||
<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
|
||
{{ newsList[2].title }}
|
||
</div>
|
||
<div class="two-line-ellipsis"
|
||
style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
|
||
{{ newsList[2].subtitle }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_15 flex-row">
|
||
<div class="group_27 flex-col"></div>
|
||
<span class="text_50">{{ newsList[2].cate.name }}</span>
|
||
<span class="text_51">{{ retTime(newsList[2].release_time_text) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_16 flex-row">
|
||
<div class="text-wrapper_12 flex-col">
|
||
<nuxt-link to="/societyDutyNew/" class="text_52">
|
||
<span>查看更多</span>
|
||
</nuxt-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_17 flex-col" style="overflow: hidden;">
|
||
<span class="text_53">合作伙伴</span>
|
||
<span class="text_54">Our Business </span>
|
||
|
||
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||
<div class="bottom_imgs topSj"></div>
|
||
</div>
|
||
</div>
|
||
<div class="box_18 flex-col" style="overflow: hidden;">
|
||
<span class="text_53" style="color: #fff;">联系我们</span>
|
||
<span class="text_54" style="color: #fff;">cooperative partner </span>
|
||
|
||
<div class="numberTopBox" style="margin:0 auto;">
|
||
<form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
|
||
<div class="inputform">
|
||
<input v-model="formData.name" class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
|
||
type="text" placeholder="输入您的姓名" />
|
||
<input v-model="formData.mobile"
|
||
class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
|
||
placeholder="请输入您的联系电话" />
|
||
<input v-model="formData.emil"
|
||
class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
|
||
placeholder="请输入您的邮箱" />
|
||
</div>
|
||
<div class="relative mt-4 md:mt-8 w-full md:w-[1200px]">
|
||
<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息" rows="5"
|
||
maxlength="100" class="w-full md:w-[1200px]"></textarea>
|
||
<button type="submit" class="contactBut">
|
||
{{ '提交' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div v-if="videoShow" class="pop" style="display: block;">
|
||
<div class="abs popCont pop_video_cont">
|
||
<a @click="videoShow = false" class="abs pop_video_close closePop"></a>
|
||
<video x5-playsinline="" playsinline="" webkit-playsinline="" preload=""
|
||
x5-video-orientation="portraint" controls="" autoplay :src="`${cdnUrl}/img/222.mp4`"
|
||
draggable="true"></video>
|
||
</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 cdnUrl = useCdn()
|
||
|
||
const { locale } = useI18n()
|
||
|
||
const typeId = ref(1);
|
||
|
||
const openType = (type) => {
|
||
console.log(type);
|
||
typeId.value = type;
|
||
}
|
||
|
||
const videoShow = ref(false)
|
||
|
||
let newsSwiper: any = null
|
||
const onSwiperNews = (swiper: any) => {
|
||
newsSwiper = swiper
|
||
}
|
||
const swiperOptionsNews = {
|
||
autoplay: {
|
||
delay: 4000,
|
||
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
|
||
// 监听幻灯片变化事件
|
||
swiper.on('slideChange', () => {
|
||
// 更新当前活动幻灯片索引
|
||
activeSlideIndex.value = swiper.realIndex % 3
|
||
})
|
||
}
|
||
const swiper_exp = ref();
|
||
const activeSlideIndex = ref(0);
|
||
// 表单数据
|
||
const formData = reactive({
|
||
name: '',
|
||
mobile: '',
|
||
emil: '',
|
||
message: ''
|
||
})
|
||
// 新闻数据
|
||
onMounted(() => {
|
||
getIndexNews();
|
||
nextTick(() => {
|
||
// 初始化 ScrollReveal
|
||
setTimeout(() => {
|
||
animate()
|
||
}, 500)
|
||
})
|
||
})
|
||
// const numberAnimationInstRef = ref()
|
||
// const numberAnimationInstRefKH = ref()
|
||
// const numberAnimationInstRefJS = ref()
|
||
// const numberAnimationInstRefHY = ref()
|
||
const animate = () => {
|
||
|
||
const sr = ScrollReveal();
|
||
sr.reveal('.leftBoxTop', {
|
||
origin: "left",
|
||
distance: "1000px",
|
||
duration: 1300,
|
||
delay: 100,
|
||
opacity: 0,
|
||
scale: 0.9,
|
||
reset: true,
|
||
mobile: true,
|
||
})
|
||
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('.group_29 ', {
|
||
origin: "bottom",
|
||
distance: "500px",
|
||
opacity: 0,
|
||
scale: 0.9,
|
||
reset: false,
|
||
mobile: true,
|
||
})
|
||
}
|
||
// 表单提交方法
|
||
const submitForm = () => {
|
||
console.log(formData);
|
||
|
||
// 这里可以添加表单验证逻辑
|
||
if (!formData.name) {
|
||
alert('请输入您的姓名')
|
||
return
|
||
}
|
||
|
||
if (!formData.mobile) {
|
||
alert('请输入您的手机号码')
|
||
return
|
||
}
|
||
|
||
if (!formData.message) {
|
||
alert('请输入您的留言内容')
|
||
return
|
||
}
|
||
$api.post("/api/home.leave_word/add", formData)
|
||
.then((res: any) => {
|
||
console.log(res)
|
||
if (res.status == 200) {
|
||
alert('留言成功')
|
||
} else {
|
||
alert('失败')
|
||
}
|
||
formData.name = '';
|
||
formData.mobile = '';
|
||
formData.emil = '';
|
||
formData.message = '';
|
||
})
|
||
.catch((err) => {
|
||
console.dir(err)
|
||
})
|
||
// 重置表单
|
||
// formData.name = ''
|
||
// formData.mobile = ''
|
||
// formData.content = ''
|
||
}
|
||
const newsList = ref([])
|
||
const getIndexNews = () => {
|
||
$api.get("/api/home.news/index?page=1&limit=3")
|
||
.then((res: any) => {
|
||
console.log(res)
|
||
newsList.value = res.data.data.list
|
||
})
|
||
.catch((err) => {
|
||
console.dir(err)
|
||
})
|
||
}
|
||
|
||
const retTime = (dateTimeStr) => {
|
||
return dateTimeStr.split(' ')[0]; // 分割后取日期部分
|
||
}
|
||
const openUrl = (id) => {
|
||
window.open(`/info/${id}`)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@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;
|
||
}
|
||
|
||
.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_imgs {
|
||
background: var(--qall);
|
||
width: 1230px;
|
||
height: 272px;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.content_box {
|
||
background: var(--m1);
|
||
width: 561px;
|
||
height: 521px;
|
||
z-index: 1;
|
||
position: absolute;
|
||
right: -12px;
|
||
bottom: -13px;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.contactForm {
|
||
width: 100%;
|
||
|
||
.inputform {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 1200px;
|
||
}
|
||
|
||
}
|
||
|
||
.contactInput {
|
||
width: 380px;
|
||
height: 50px;
|
||
background: #FFFFFF;
|
||
border-radius: 6px 6px 6px 6px;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.contactInput::placeholder {
|
||
color: #768597;
|
||
}
|
||
|
||
.contactInput:focus {
|
||
outline: none;
|
||
}
|
||
|
||
#myTextarea {
|
||
width: 1200px;
|
||
height: 167px;
|
||
background: #FFFFFF;
|
||
border-radius: 6px 6px 6px 6px;
|
||
opacity: 0.8;
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
resize: none;
|
||
}
|
||
|
||
#myTextarea::placeholder {
|
||
color: #768597;
|
||
}
|
||
|
||
#myTextarea:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.char-count {
|
||
position: absolute;
|
||
bottom: 5px;
|
||
/* 根据需要调整距离底部的位置 */
|
||
right: 10px;
|
||
/* 根据需要调整距离右侧的位置 */
|
||
font-size: 12px;
|
||
/* 根据需要调整字体大小 */
|
||
color: #A8CBFF;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.contactInput {
|
||
font-size: 18px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
.contactBut {
|
||
width: 108px;
|
||
border-radius: 4px 4px 4px 4px;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 30px;
|
||
height: 36px;
|
||
background-color: #222222;
|
||
border: none;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
line-height: 28px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.pop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, .8);
|
||
z-index: 200;
|
||
display: none;
|
||
}
|
||
|
||
.popCont {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.pop_video_close {
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 0;
|
||
right: -75px;
|
||
width: 50px;
|
||
height: 50px;
|
||
background: var(--close) no-repeat 0 0;
|
||
background-size: 100% auto;
|
||
border: 6px solid #979797;
|
||
}
|
||
|
||
.pop_video_cont {
|
||
width: 600px;
|
||
border: 6px solid #979797;
|
||
background: #000;
|
||
}
|
||
|
||
.pop_video_cont video {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
strong{
|
||
}
|
||
</style>
|