-引入CDN配置并优化图片资源加载
- 新增`useCdn` composable，用于全局CDN URL管理 - 在`nuxt.config.ts`中配置CDN域名 - 更新图片资源路径，使用CDN URL加载 - 优化页面样式，统一使用SCSS文件 - 删除冗余组件`CdnImageExample.vue` -头部动效增加 -增加返回顶部按钮
This commit is contained in:
parent
2b3ecd7164
commit
2052b40fbc
@ -1,6 +1,7 @@
|
||||
# Nuxt 3 Minimal Starter
|
||||
# 项目CDN配置
|
||||
1.修改nuxt.config.ts中的 cdnDomain
|
||||
|
||||
Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
|
||||
2.修改assets/css/common.scss中的定义数据
|
||||
|
||||
## Setup
|
||||
|
||||
|
||||
13
app.vue
13
app.vue
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<n-config-provider :locale="zhCN">
|
||||
<AppHeader />
|
||||
<NuxtPage />
|
||||
<AppFooter/>
|
||||
<n-config-provider :locale="zhCN">
|
||||
<AppHeader />
|
||||
<NuxtPage />
|
||||
<AppFooter />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
import { zhCN, dateZhCN } from 'naive-ui'
|
||||
import { NConfigProvider } from 'naive-ui'
|
||||
import { zhCN, dateZhCN } from 'naive-ui'
|
||||
import $api from '@/service/webRequest'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
@ -28,7 +28,6 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
#__nuxt {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@ -1,3 +1,32 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--bg-t2: url('https://cdn.web.0rui.cn/img/t2.png');
|
||||
--bg-c: url('https://cdn.web.0rui.cn/img/bg-c.png');
|
||||
--m1: url('https://cdn.web.0rui.cn/img/m1.png');
|
||||
--bg-b: url('https://cdn.web.0rui.cn/img/bg-b.png');
|
||||
--bg-4: url('https://cdn.web.0rui.cn/img/bg-4.png');
|
||||
--bg-5: url('https://cdn.web.0rui.cn/img/bg-5.png');
|
||||
--qall: url('https://cdn.web.0rui.cn/img/qall.png');
|
||||
--close: url('https://cdn.web.0rui.cn/img/close.png');
|
||||
--t1a: url('https://cdn.web.0rui.cn/img/about/t1a.png');
|
||||
--t1b: url('https://cdn.web.0rui.cn/img/about/t1b.png');
|
||||
--ruanzhu: url('https://cdn.web.0rui.cn/img/about/ruanzhu.png');
|
||||
--allpeople: url('https://cdn.web.0rui.cn/img/allpeople.png');
|
||||
--lianxiyp: url('https://cdn.web.0rui.cn/img/lianxiyp.png');
|
||||
--bg-s: url('https://cdn.web.0rui.cn/img/customer/bg-s.png');
|
||||
--service_023: url('https://cdn.web.0rui.cn/img/service_023.png');
|
||||
--service_033: url('https://cdn.web.0rui.cn/img/service_033.png');
|
||||
--service_048: url('https://cdn.web.0rui.cn/img/service_048.png');
|
||||
--service_033: url('https://cdn.web.0rui.cn/img/service_033.png');
|
||||
--service_051: url('https://cdn.web.0rui.cn/img/service_051.png');
|
||||
--content_top: url('https://cdn.web.0rui.cn/img/content_top.png');
|
||||
--video: url('https://cdn.web.0rui.cn/img/video.png');
|
||||
--wechat1: url('https://cdn.web.0rui.cn/img/wechat1.png');
|
||||
--newstop: url('https://cdn.web.0rui.cn/img/societyduty/newstop.png');
|
||||
}
|
||||
// const cdnUrl = useCdn()
|
||||
|
||||
// ${cdnUrl}
|
||||
@ -13,8 +13,7 @@
|
||||
|
||||
.box_1 {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
margin: 32px 0 0 0px;
|
||||
height: 90px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@ -24,87 +23,45 @@
|
||||
}
|
||||
|
||||
.text_1 {
|
||||
width: 64px;
|
||||
height: 16px;
|
||||
overflow-wrap: break-word;
|
||||
height: 90px;
|
||||
line-height: 90px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
margin: 5px 0 0 381px;
|
||||
}
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0px 20px;
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
|
||||
&:before {
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.text_2 {
|
||||
width: 83px;
|
||||
height: 16px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
margin: 5px 0 0 41px;
|
||||
}
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
background: #FC7428;
|
||||
transition: all 0.5s ease-in-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.text_3 {
|
||||
width: 83px;
|
||||
height: 16px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
margin: 5px 0 0 32px;
|
||||
}
|
||||
|
||||
.text_4 {
|
||||
width: 78px;
|
||||
height: 16px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
margin: 5px 0 0 35px;
|
||||
}
|
||||
|
||||
.text_5 {
|
||||
width: 78px;
|
||||
height: 16px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
margin: 5px 0 0 37px;
|
||||
}
|
||||
|
||||
.text_6 {
|
||||
width: 64px;
|
||||
height: 16px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
line-height: 16px;
|
||||
margin: 5px 0 0 44px;
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper_1 {
|
||||
@ -144,7 +101,7 @@
|
||||
.group_3 {
|
||||
width: 100%;
|
||||
height: 681px;
|
||||
background: url(public/img/bg-c.png) 100% no-repeat;
|
||||
background: var(--bg-c) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
gap: 150px;
|
||||
}
|
||||
@ -155,8 +112,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.group_4 {}
|
||||
|
||||
.text-group_1 {
|
||||
width: 256px;
|
||||
height: 65px;
|
||||
@ -203,6 +158,7 @@
|
||||
padding-right: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.text_11 {
|
||||
color: rgba(34, 34, 34, 1);
|
||||
font-size: 22px;
|
||||
@ -260,8 +216,8 @@
|
||||
|
||||
.section_1 {
|
||||
height: 508px;
|
||||
background: url(public/img/t2.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background: var(--bg-t2) no-repeat;
|
||||
background-size: 100%;
|
||||
width: 549px;
|
||||
z-index: 10;
|
||||
}
|
||||
@ -282,8 +238,9 @@
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.image_5s{
|
||||
background:url(public/img/m1.png);
|
||||
|
||||
.image_5s {
|
||||
background: var(--m1);
|
||||
width: 549px;
|
||||
height: 508px;
|
||||
z-index: 1;
|
||||
@ -296,7 +253,7 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 991px;
|
||||
background: url(public/img/bg-b.png) 100% no-repeat;
|
||||
background: var(--bg-b) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
@ -307,7 +264,7 @@
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin:70px 0px 10px 0px;
|
||||
margin: 70px 0px 10px 0px;
|
||||
}
|
||||
|
||||
.text_15 {
|
||||
@ -323,23 +280,26 @@
|
||||
}
|
||||
|
||||
.section_2s {
|
||||
background-image: linear-gradient( 180deg, rgba(108, 169, 255, 0.2) 0%, rgba(255,255,255,0.2) 49%);
|
||||
background-image: linear-gradient(180deg, rgba(108, 169, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 49%);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
height: 745px;
|
||||
background-color:#ffffff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.section_2sa{
|
||||
background-image: linear-gradient( 180deg, rgba(252, 116, 40, 0.2) 0%, rgba(255,255,255,0.2) 49%);
|
||||
|
||||
.section_2sa {
|
||||
background-image: linear-gradient(180deg, rgba(252, 116, 40, 0.2) 0%, rgba(255, 255, 255, 0.2) 49%);
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
height: 745px;
|
||||
background-color:#ffffff;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.group_6 {
|
||||
height: 154px;
|
||||
width: 615px;
|
||||
position: relative;
|
||||
color: #0256FF;
|
||||
}
|
||||
|
||||
.group_6s {
|
||||
color: #FC7428;
|
||||
height: 154px;
|
||||
@ -377,6 +337,7 @@
|
||||
margin-top: 10px;
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.image-wrapper_3s {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
@ -386,7 +347,8 @@
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.label_1s{
|
||||
|
||||
.label_1s {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
@ -435,13 +397,6 @@
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.group_8 {
|
||||
height: 40px;
|
||||
background: url(./img/MasterDDSSlicePNG1a5e6e684737749502d58f77fa993ad5.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 40px;
|
||||
margin: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.group_9 {
|
||||
width: 18px;
|
||||
@ -454,11 +409,13 @@
|
||||
height: 63px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-group_3:hover .text_18{
|
||||
color: #0256FF!important;
|
||||
|
||||
.text-group_3:hover .text_18 {
|
||||
color: #0256FF !important;
|
||||
}
|
||||
.text-group_3:hover .text_19{
|
||||
color: #0256FF!important;
|
||||
|
||||
.text-group_3:hover .text_19 {
|
||||
color: #0256FF !important;
|
||||
}
|
||||
|
||||
.text-group_3_3 {
|
||||
@ -466,11 +423,13 @@
|
||||
height: 63px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.text-group_3_3:hover .text_18{
|
||||
color: #FC7428!important;
|
||||
|
||||
.text-group_3_3:hover .text_18 {
|
||||
color: #FC7428 !important;
|
||||
}
|
||||
.text-group_3_3:hover .text_19{
|
||||
color: #FC7428!important;
|
||||
|
||||
.text-group_3_3:hover .text_19 {
|
||||
color: #FC7428 !important;
|
||||
}
|
||||
|
||||
.text_18 {
|
||||
@ -503,15 +462,16 @@
|
||||
background-color: #EEEEEE;
|
||||
width: 524px;
|
||||
height: 1px;
|
||||
margin-left:30px;
|
||||
margin-top:30px;
|
||||
margin-left: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.group_10s {
|
||||
background-color: #77A5FF;
|
||||
width: 524px;
|
||||
height: 1px;
|
||||
opacity: 0.2;
|
||||
margin:0 30px;
|
||||
margin: 0 30px;
|
||||
}
|
||||
|
||||
.group_11 {
|
||||
@ -651,7 +611,7 @@
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
margin:70px 0px 10px 0px;
|
||||
margin: 70px 0px 10px 0px;
|
||||
}
|
||||
|
||||
.group_14 {
|
||||
@ -672,25 +632,29 @@
|
||||
margin-top: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.dswper {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.dswper_left{
|
||||
|
||||
.dswper_left {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 10%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 100;
|
||||
}
|
||||
.dswper_right{
|
||||
|
||||
.dswper_right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 7.5%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.text_25 {
|
||||
overflow-wrap: break-word;
|
||||
color: #222222;
|
||||
@ -999,7 +963,7 @@
|
||||
}
|
||||
|
||||
.text-wrapper_11 {
|
||||
margin-top:10px;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -1310,16 +1274,6 @@
|
||||
margin: 10px 0 0 22px;
|
||||
}
|
||||
|
||||
.image-wrapper_6 {
|
||||
height: 800px;
|
||||
background: url(./img/MasterDDSSlicePNG48f5ba5dc080bccf7accff651d995da0.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 1200px;
|
||||
position: absolute;
|
||||
left: -1545px;
|
||||
top: 1765px;
|
||||
}
|
||||
|
||||
.image_10 {
|
||||
width: 100px;
|
||||
height: 4px;
|
||||
@ -1329,14 +1283,15 @@
|
||||
.box_17 {
|
||||
width: 100%;
|
||||
height: 490px;
|
||||
background: url(public/img/bg-4.png) 100% no-repeat;
|
||||
background: var(--bg-4) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
|
||||
.box_18 {
|
||||
width: 100%;
|
||||
height: 465px;
|
||||
background: url(public/img/bg-5.png) 100% no-repeat;
|
||||
background: var(--bg-5) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
@ -1570,11 +1525,13 @@
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
@media screen and (max-width: 1440px){
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.group_29 {
|
||||
width: 87%;
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper_7 {
|
||||
box-shadow: 0px 4px 10px 0px rgba(228, 228, 228, 1);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
@ -1815,9 +1772,10 @@
|
||||
background-color: rgba(216, 216, 216, 0.2);
|
||||
width: 63%;
|
||||
height: 1px;
|
||||
margin: 0 auto;
|
||||
margin: 0 auto;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1440px) {
|
||||
.group_31 {
|
||||
width: 94%;
|
||||
@ -1828,7 +1786,7 @@
|
||||
width: 100%;
|
||||
height: 125px;
|
||||
margin: 29px 0 44px 0px;
|
||||
justify-content:center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.text-wrapper_14 {
|
||||
@ -1987,45 +1945,48 @@ button:active {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.three-line-ellipsis {
|
||||
display: -webkit-box;
|
||||
/* 使用弹性盒模型 */
|
||||
-webkit-box-orient: vertical;
|
||||
/* 内容垂直排列 */
|
||||
-webkit-line-clamp: 3;
|
||||
/* 限制显示的行数 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出部分 */
|
||||
text-overflow: ellipsis;
|
||||
/* 超出部分显示省略号 */
|
||||
word-break: break-all;
|
||||
/* 允许单词内换行（可选） */
|
||||
}
|
||||
.one-line-ellipsis {
|
||||
display: -webkit-box;
|
||||
/* 使用弹性盒模型 */
|
||||
-webkit-box-orient: vertical;
|
||||
/* 内容垂直排列 */
|
||||
-webkit-line-clamp: 1;
|
||||
/* 限制显示的行数 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出部分 */
|
||||
text-overflow: ellipsis;
|
||||
/* 超出部分显示省略号 */
|
||||
word-break: break-all;
|
||||
/* 允许单词内换行（可选） */
|
||||
}
|
||||
.two-line-ellipsis{
|
||||
display: -webkit-box;
|
||||
/* 使用弹性盒模型 */
|
||||
-webkit-box-orient: vertical;
|
||||
/* 内容垂直排列 */
|
||||
/* 使用弹性盒模型 */
|
||||
-webkit-box-orient: vertical;
|
||||
/* 内容垂直排列 */
|
||||
-webkit-line-clamp: 3;
|
||||
/* 限制显示的行数 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出部分 */
|
||||
text-overflow: ellipsis;
|
||||
/* 超出部分显示省略号 */
|
||||
word-break: break-all;
|
||||
/* 允许单词内换行（可选） */
|
||||
}
|
||||
|
||||
.one-line-ellipsis {
|
||||
display: -webkit-box;
|
||||
/* 使用弹性盒模型 */
|
||||
-webkit-box-orient: vertical;
|
||||
/* 内容垂直排列 */
|
||||
-webkit-line-clamp: 1;
|
||||
/* 限制显示的行数 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出部分 */
|
||||
text-overflow: ellipsis;
|
||||
/* 超出部分显示省略号 */
|
||||
word-break: break-all;
|
||||
/* 允许单词内换行（可选） */
|
||||
}
|
||||
|
||||
.two-line-ellipsis {
|
||||
display: -webkit-box;
|
||||
/* 使用弹性盒模型 */
|
||||
-webkit-box-orient: vertical;
|
||||
/* 内容垂直排列 */
|
||||
-webkit-line-clamp: 2;
|
||||
/* 限制显示的行数 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出部分 */
|
||||
text-overflow: ellipsis;
|
||||
/* 超出部分显示省略号 */
|
||||
word-break: break-all;
|
||||
/* 允许单词内换行（可选） */
|
||||
/* 限制显示的行数 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出部分 */
|
||||
text-overflow: ellipsis;
|
||||
/* 超出部分显示省略号 */
|
||||
word-break: break-all;
|
||||
/* 允许单词内换行（可选） */
|
||||
}
|
||||
@ -2,19 +2,31 @@
|
||||
<!-- PC端布局 -->
|
||||
<div class="group_30 flex-col pc-footer">
|
||||
<div class="text-wrapper_13 flex-row">
|
||||
<span class="text_67">企业首页</span>
|
||||
<span class="text_68">产品&服务</span>
|
||||
<span class="text_69">灵睿&我们</span>
|
||||
<span class="text_70">客户&评价</span>
|
||||
<span class="text_71">社会&责任</span>
|
||||
<span class="text_72">联系我们</span>
|
||||
<NuxtLink to="/">
|
||||
<span class="text_67">企业首页</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/proServices/">
|
||||
<span class="text_68">产品&服务</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/aboutUs/">
|
||||
<span class="text_69">灵睿&我们</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/customerReviews/">
|
||||
<span class="text_70">客户&评价</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/societyDuty/">
|
||||
<span class="text_71">社会&责任</span>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/concatUs/">
|
||||
<span class="text_72">加入我们</span>
|
||||
</NuxtLink>
|
||||
<span class="text_73">联系电话：400-080-0379</span>
|
||||
</div>
|
||||
<div class="group_31 flex-col"></div>
|
||||
<div class="group_32 flex-row">
|
||||
<div class="text-wrapper_14 flex-col">
|
||||
<span class="text_74">
|
||||
洛阳灵睿网络技术有限公司|洛阳网络公司|洛阳网络推广|洛阳易站通总代理|洛阳微客红包|洛阳微信营销
|
||||
洛阳灵睿网络技术有限公司|洛阳网络公司|洛阳网络推广|洛阳易站通总代理|洛阳本地自媒体|洛阳短视频
|
||||
</span>
|
||||
<span class="text_75">法律顾问：河南森合律师事务机构</span>
|
||||
<span class="text_76">
|
||||
@ -60,7 +72,7 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/index.css';
|
||||
@import '@/assets/index.scss';
|
||||
|
||||
/* PC端默认样式保持不变 */
|
||||
.mobile-footer {
|
||||
|
||||
@ -1,43 +1,52 @@
|
||||
<template>
|
||||
<div class="page flex-col">
|
||||
<div class="group_1 flex-col">
|
||||
<div class="flex-row" :class="route.name=='info-id'?'box_1 box_1_info':'box_1'">
|
||||
<img v-if="route.name!='info-id'" class="image_1" referrerpolicy="no-referrer" src="public/img/logo.png" />
|
||||
<img v-if="route.name=='info-id'" class="image_1" referrerpolicy="no-referrer" src="public/img/logo1.png" />
|
||||
<div class="group_1 flex-col" :class="[(isScrolled || isHovered) && route.name != 'info-id' ? 'topfix' : '']"
|
||||
@mouseenter="isScrolled = true;" @mouseleave="checkBoxHeight()">
|
||||
<div class="flex-row" :class="route.name == 'info-id' ? 'box_1 box_1_info' : 'box_1'">
|
||||
<img v-if="route.name != 'info-id' && !isScrolled" class="image_1" referrerpolicy="no-referrer"
|
||||
:src="`${cdnUrl}/img/logo.png`" />
|
||||
<img v-if="route.name != 'info-id' && isScrolled" class="image_1" referrerpolicy="no-referrer"
|
||||
:src="`${cdnUrl}/img/logo1.png`" />
|
||||
<img v-if="route.name == 'info-id'" class="image_1" referrerpolicy="no-referrer"
|
||||
:src="`${cdnUrl}/img/logo1.png`" />
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="desktop-nav">
|
||||
<span :class="route.name=='info-id'?'text_black text_1':'text_1'">
|
||||
<NuxtLink to="/" :class="{ 'active': route.path === '/' }">
|
||||
<div data-title="企业首页"
|
||||
:class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
|
||||
<NuxtLink to="/" :class="[route.path === '/' ? 'active' : '']">
|
||||
企业首页
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span :class="route.name=='info-id'?'text_black text_2':'text_2'">
|
||||
<NuxtLink to="/proServices/" :class="{ 'active': route.path === '/proServices/' || route.path === '/proServices_con/' || route.path === '/proServices_con' || route.path === '/proServices' }">
|
||||
产品&服务
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span :class="route.name=='info-id'?'text_black text_3':'text_3'">
|
||||
<NuxtLink to="/aboutUs/" :class="{ 'active': route.path === '/aboutUs/' || route.path === '/aboutUs' }">
|
||||
灵睿&我们
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span :class="route.name=='info-id'?'text_black text_4':'text_4'">
|
||||
<NuxtLink to="/customerReviews/" :class="{ 'active': route.path === '/customerReviews/' || route.path === '/customerReviews' }">
|
||||
客户&评价
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span :class="route.name=='info-id'?'text_5_info':'text_5'">
|
||||
<NuxtLink to="/societyDuty/" :class="{ 'active': route.path === '/societyDuty/' || route.path === '/societyDuty' || route.path === '/societyDutyNew/' || route.path === '/societyDutyNew' }">
|
||||
</div>
|
||||
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
|
||||
<NuxtLink to="/proServices_con/"
|
||||
:class="[route.path === '/proServices/' || route.path === '/proServices_con/' || route.path === '/proServices_con' || route.path === '/proServices' ? 'active' : '']">
|
||||
产品&服务
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
|
||||
<NuxtLink to="/aboutUs/" :class="[route.path === '/aboutUs/' || route.path === '/aboutUs' ? 'active' : '']">
|
||||
灵睿&我们
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
|
||||
<NuxtLink to="/customerReviews/"
|
||||
:class="[route.path === '/customerReviews/' || route.path === '/customerReviews' ? 'active' : '']">
|
||||
客户&评价
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
|
||||
<NuxtLink to="/societyDutyNew/"
|
||||
:class="[route.path === '/societyDuty/' || route.path === '/societyDuty' || route.path === '/societyDutyNew/' || route.path === '/societyDutyNew' ? 'active' : '']">
|
||||
社会&责任
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span :class="route.name=='info-id'?'text_black text_6':'text_6'">
|
||||
<NuxtLink to="/concatUs/" :class="{ 'active': route.path === '/concatUs/' || route.path === '/concatUs'}">
|
||||
加入我们
|
||||
</NuxtLink>
|
||||
</span>
|
||||
</div>
|
||||
<div :class="[route.name == 'info-id' ? 'text_black text_1' : 'text_1', { 'text_black': isScrolled }]">
|
||||
<NuxtLink to="/concatUs/"
|
||||
:class="[route.path === '/concatUs/' || route.path === '/concatUs' ? 'active' : '']">
|
||||
加入我们
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Hamburger Button -->
|
||||
<div class="mobile-menu-btn" @click="toggleMobileMenu">
|
||||
<div class="hamburger" :class="{ 'is-active': isMobileMenuOpen }">
|
||||
@ -47,7 +56,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div class="mobile-nav" v-if="isMobileMenuOpen">
|
||||
<span class="mobile-nav-item">企业首页</span>
|
||||
@ -58,49 +66,108 @@
|
||||
<span class="mobile-nav-item">联系我们</span>
|
||||
</div>
|
||||
</div>
|
||||
<transition name="fade-scale">
|
||||
<div v-if="scrollTop > 1000" class="back-to-top">
|
||||
<img @click="openTop()" :src="`${cdnUrl}/img/get_top.png`" alt="返回顶部" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
|
||||
const cdnUrl = useCdn()
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const { locale } = useI18n()
|
||||
const isMobileMenuOpen = ref(false)
|
||||
const isScrolled = ref(false)
|
||||
const isHovered = ref(false)
|
||||
const scrollTop = ref(0);
|
||||
const handleScroll = () => {
|
||||
isScrolled.value = window.scrollY > 0;
|
||||
scrollTop.value = window.scrollY;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
// 初始化时检查一次滚动位置
|
||||
handleScroll()
|
||||
})
|
||||
|
||||
const checkBoxHeight = () => {
|
||||
if (window.scrollY == 0) {
|
||||
isScrolled.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
})
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
isMobileMenuOpen.value = !isMobileMenuOpen.value
|
||||
}
|
||||
const openTop = () => {
|
||||
//返回顶部
|
||||
window.scrollTo(0, 0);
|
||||
}
|
||||
|
||||
console.log(route)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/index.css';
|
||||
@import '@/assets/index.scss';
|
||||
|
||||
.group_1 {
|
||||
transition: all 0.3s ease-in-out;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.box_1 {
|
||||
justify-content: center;
|
||||
padding: 0 20px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.topfix {
|
||||
background: rgba(255, 255, 255, 1);
|
||||
-webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
-o-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease-in-out;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.group_1:not(.topfix) {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.desktop-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding-left: 150px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.desktop-nav_top{
|
||||
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
@ -188,36 +255,68 @@ console.log(route)
|
||||
}
|
||||
}
|
||||
|
||||
.text_black {
|
||||
color: #000000;
|
||||
transition: color 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.desktop-nav {
|
||||
span:hover {
|
||||
.text_black_w {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
transition: color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.text_5_info {
|
||||
background-color: #FC7428;
|
||||
height: 90px !important;
|
||||
line-height: 90px !important;
|
||||
padding: 0 20px;
|
||||
color: #ffffff !important;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.box_1_info {
|
||||
height: 90px !important;
|
||||
margin: 0px !important;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.image_1 {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 20%;
|
||||
right: 20px;
|
||||
z-index: 1000;
|
||||
|
||||
img {
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
a{
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
color: #fff;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.text_black{
|
||||
color: #000000!important;
|
||||
|
||||
.fade-scale-enter-active,
|
||||
.fade-scale-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.text_5_info{
|
||||
background-color: #FC7428;
|
||||
height: 70px !important;
|
||||
width: 120px !important;
|
||||
line-height: 70px !important;
|
||||
padding: 0px 20px !important;
|
||||
margin-left: 30px;
|
||||
color: #ffffff!important;
|
||||
text-align: center;
|
||||
|
||||
.fade-scale-enter-from,
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
.box_1_info {
|
||||
height: 50px !important;
|
||||
margin: 0px !important;
|
||||
padding-top: 20px !important;
|
||||
|
||||
.fade-scale-enter-to,
|
||||
.fade-scale-leave-from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
</style>
|
||||
|
||||
4
composables/useCdn.ts
Normal file
4
composables/useCdn.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export const useCdn = () => {
|
||||
const nuxtApp = useNuxtApp()
|
||||
return nuxtApp.$cdnUrl
|
||||
}
|
||||
@ -2,6 +2,11 @@
|
||||
import { defineNuxtConfig } from 'nuxt/config'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
cdnDomain: 'https://cdn.web.0rui.cn'
|
||||
}
|
||||
},
|
||||
app: {
|
||||
baseURL:'/web/',
|
||||
},
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
<div class="group_666" style="position: relative;height: 550px;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/abus.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/abus.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/abus.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="">
|
||||
<img :src="`${cdnUrl}/img/left.png" alt="">
|
||||
</div>
|
||||
<div style="margin: 0px 20px;">
|
||||
<img src="public/img/morse.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/morse.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/right.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/right.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
@ -35,7 +35,8 @@
|
||||
<div class="text-group_1 flex-col justify-between" style="width: 100%;">
|
||||
<span class="text_7" style="width: 432px;position: relative;">
|
||||
洛阳灵睿网络技术有限公司
|
||||
<img src="public/img/about/xing.png" alt="" style="position: absolute;top: -10px; right: 0;"/>
|
||||
<img :src="`${cdnUrl}/img/about/xing.png`" alt=""
|
||||
style="position: absolute;top: -10px; right: 0;" />
|
||||
</span>
|
||||
<span class="text_8" style="width: 100%;color: #3D3D3D;">
|
||||
智慧信息化与数字内容服务领航者
|
||||
@ -48,49 +49,58 @@
|
||||
<span class="textss13">
|
||||
专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
|
||||
</span>
|
||||
<div class="group_28 flex-row justify-between numberTopBox" style="width: 592px;text-align: center;">
|
||||
<div class="group_28 flex-row justify-between numberTopBox"
|
||||
style="width: 592px;text-align: center;">
|
||||
<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"
|
||||
<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>
|
||||
<span class="">技术沉淀</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"
|
||||
<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="100"></n-number-animation>+</span>
|
||||
<span class="">覆盖行业</span>
|
||||
<span class="">覆盖行业</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="text-group_12 flex-col justify-between" style="width: auto;height: 80px;">
|
||||
<span class="text_64" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
|
||||
ref="numberAnimationInstRefHY" :active="false" :from="0"
|
||||
<span class="text_64"
|
||||
style="font-size: 32px;text-align: center;width: auto;"><n-number-animation
|
||||
:duration="5000" ref="numberAnimationInstRefHY" :active="false" :from="0"
|
||||
:to="30"></n-number-animation>+</span>
|
||||
<span class="">技术团队</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex rongyu1s bottomBox">
|
||||
<div class="flex" style="width: 13%;align-items: center;">
|
||||
<img style="margin-left: 20px;" src="/public/img/about/jiangbei.png" alt="">
|
||||
<div class="flex" style="width: 14%;align-items: center;">
|
||||
<img style="margin-left: 20px;" :src="`${cdnUrl}/img/about/jiangbei.png`" alt="">
|
||||
<span class="spanst">荣誉标签：</span>
|
||||
</div>
|
||||
<div class="flex" style="width: 87%;justify-content: space-between;">
|
||||
<span class="spans">中国电子商务协会工业电商委员会河南分会单位</span>
|
||||
<span class="spans">新华网、人民网、今日头条新闻联络中心</span>
|
||||
<span class="spans" style="margin-right:20px;">灵睿与郑州、洛阳等地的网信以及网监系统保持长期合作获。</span>
|
||||
<div class="flex" style="width: 85%;overflow: hidden;">
|
||||
<n-marquee>
|
||||
<div class="spans" style="margin-right: 50px;display: inline-block;">中国电子商务协会工业电商委员会河南分会单位
|
||||
</div>
|
||||
<div class="spans" style="display: inline-block;margin-right: 50px;">新华网、人民网、今日头条新闻联络中心
|
||||
</div>
|
||||
<div class="spans" style="display: inline-block;margin-right: 50px;">
|
||||
灵睿与郑州、洛阳等地的网信以及网监系统保持长期合作获</div>
|
||||
</n-marquee>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -103,15 +113,16 @@
|
||||
<div class="text-group_1 flex-col justify-between" style="width: 100%;">
|
||||
<span class="text_7" style="width: 242px;position: relative;">
|
||||
睿创团队介绍
|
||||
<img src="public/img/about/xing.png" alt="" style="position: absolute;top: -10px; right: 0;"/>
|
||||
<img :src="`${cdnUrl}/img/about/xing.png`" alt=""
|
||||
style="position: absolute;top: -10px; right: 0;" />
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span class="text_12" style="height: auto;font-size: 14px;">
|
||||
灵睿基因一直是一群年轻的青年人组成，我们致力打造专业的团队化运营模式，集合程序猿、设计狗、运营喵的创作者联盟。年轻不是资本，敢重新定义年轻才是，在互联网领域，我们致力做一支专业，积极，上进的年轻团队；80后主导，90后主力，00后紧随。以“为客户创造价值 用互联网思维打造品牌”为使命。以“正直诚信、实干勇敢、协作共赢、创业精神”为价值观。努力发展，破茧成蝶。
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="group_5 flex-col justify-center align-center rightBox">
|
||||
@ -120,23 +131,21 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_7 flex-col" style="background: url(public/img/about/ruanzhu.png) 100% no-repeat;;">
|
||||
<div class="box_7 flex-col">
|
||||
<span class="text_24 topBox">著作权和荣誉证书</span>
|
||||
<span class="text_15 topBox">Company environment</span>
|
||||
|
||||
|
||||
<div class="dswper" style="margin-top: 30px;">
|
||||
<swiper ref="swiper_exp" :slidesPerView="5" loop :loopedSlides="3" :autoplay="true" centeredSlides
|
||||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" >
|
||||
<swiper-slide v-for="(item,index) in 21" :key="index" style="padding: 0 10px;">
|
||||
<swiper ref="swiper_exp" :slidesPerView="5" loop :loopedSlides="3" :autoplay="{ delay: 2000 }"
|
||||
centeredSlides :modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp">
|
||||
<swiper-slide v-for="(item, index) in 21" :key="index" style="padding: 0 10px;">
|
||||
<img :src="`/img/about/${item}.jpg`" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<!-- <div class="dswper_left">
|
||||
<img src="public/img/opl.png">
|
||||
<img :src="`${cdnUrl}/img/opl.png">
|
||||
</div>
|
||||
<div class="dswper_right">
|
||||
<img src="public/img/opr.png">
|
||||
<img :src="`${cdnUrl}/img/opr.png">
|
||||
</div> -->
|
||||
<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: 25px; height: 5px;"
|
||||
@ -152,7 +161,7 @@
|
||||
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <div v-for="item in 18" class="">
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/q1.png" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
@ -165,7 +174,7 @@ 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'
|
||||
import { NNumberAnimation, NMarquee } from 'naive-ui'
|
||||
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
|
||||
|
||||
import "swiper/css";
|
||||
@ -181,6 +190,7 @@ import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
const { locale } = useI18n()
|
||||
const cdnUrl = useCdn()
|
||||
|
||||
let newsSwiper: any = null
|
||||
const onSwiperNews = (swiper: any) => {
|
||||
@ -202,7 +212,7 @@ const swiperOptionsNews = {
|
||||
prevEl: '#swipen_next',
|
||||
},
|
||||
}
|
||||
const activeSlideIndex=ref(0);
|
||||
const activeSlideIndex = ref(0);
|
||||
let vesSwiper: any = null
|
||||
const onSwiperExp = (swiper: any) => {
|
||||
vesSwiper = swiper
|
||||
@ -216,7 +226,7 @@ const swiper_exp = ref();
|
||||
|
||||
// 新闻数据
|
||||
onMounted(() => {
|
||||
animate()
|
||||
animate()
|
||||
})
|
||||
const numberAnimationInstRef = ref()
|
||||
const numberAnimationInstRefKH = ref()
|
||||
@ -296,9 +306,9 @@ const animate = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
:deep(.dswper .swiper-slide-next) {
|
||||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||||
@ -323,7 +333,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.bottom_imgs {
|
||||
background: url(/public/img/qall.png);
|
||||
background: var(--qall);
|
||||
width: 1230px;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
@ -333,27 +343,29 @@ const animate = () => {
|
||||
|
||||
.section_1sa {
|
||||
height: 410px;
|
||||
background: url(/public/img/about/t1a.png) 100% no-repeat;
|
||||
background: var(--t1a) 100% no-repeat;
|
||||
width: 576px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.section_1sb {
|
||||
height: 410px;
|
||||
background: url(/public/img/about/t1b.png) 100% no-repeat;
|
||||
background: var(--t1b) 100% no-repeat;
|
||||
width: 576px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
|
||||
.textss13{
|
||||
.textss13 {
|
||||
width: 584px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #768597;
|
||||
line-height: 22px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #768597;
|
||||
line-height: 22px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
}
|
||||
.rongyu1s{
|
||||
|
||||
.rongyu1s {
|
||||
width: 63%;
|
||||
height: 68px;
|
||||
background: #F8F8F8;
|
||||
@ -361,7 +373,8 @@ const animate = () => {
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 70px;
|
||||
.spanst{
|
||||
|
||||
.spanst {
|
||||
width: 90px;
|
||||
height: 32px;
|
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
||||
@ -374,7 +387,8 @@ const animate = () => {
|
||||
text-transform: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.spans{
|
||||
|
||||
.spans {
|
||||
// width: px;
|
||||
height: 21px;
|
||||
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
||||
@ -387,4 +401,12 @@ const animate = () => {
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.n-marquee {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box_7 {
|
||||
background: var(--ruanzhu) 100% no-repeat;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
<div class="group_666" style="position: relative;height: 550px;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/joinus.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/joinus.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/joinus.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="">
|
||||
<img :src="`${cdnUrl}/img/left.png" alt="">
|
||||
</div>
|
||||
<div style="margin: 0px 20px;">
|
||||
<img src="public/img/morse.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/morse.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/right.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/right.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
@ -42,12 +42,12 @@
|
||||
</span>
|
||||
<div class="flex" style="margin-top: 40px;">
|
||||
<span class="text_13s">
|
||||
<img src="public/img/telphone.png" alt="" class="imgs">
|
||||
联系电话：15503791530
|
||||
<img :src="`${cdnUrl}/img/telphone.png`" alt="" class="imgs">
|
||||
联系电话：17603796680
|
||||
</span>
|
||||
<span class="text_13s">
|
||||
<img src="public/img/wechat.png" alt="" class="imgs">
|
||||
微信：15503791530
|
||||
<img :src="`${cdnUrl}/img/wechat.png`" alt="" class="imgs">
|
||||
微信：17603796680
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -105,7 +105,7 @@ import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
const { locale } = useI18n()
|
||||
|
||||
const cdnUrl = useCdn()
|
||||
let newsSwiper: any = null
|
||||
const onSwiperNews = (swiper: any) => {
|
||||
newsSwiper = swiper
|
||||
@ -238,9 +238,9 @@ const animate = () => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
:deep(.dswper .swiper-slide-next) {
|
||||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||||
@ -263,29 +263,9 @@ const animate = () => {
|
||||
transition: 6s linear;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
|
||||
.bottom_imgs {
|
||||
background: url(/public/img/qall.png);
|
||||
width: 1230px;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
background: url(/public/img/m1.png);
|
||||
;
|
||||
width: 561px;
|
||||
height: 521px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
bottom: -13px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.section_1s {
|
||||
height: 360px;
|
||||
background: url(public/img/allpeople.png) 100% no-repeat;
|
||||
background: var(--allpeople) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 585px;
|
||||
z-index: 10;
|
||||
@ -356,7 +336,7 @@ const animate = () => {
|
||||
.box_18s {
|
||||
width: 387px;
|
||||
height: 149px;
|
||||
background: url(public/img/lianxiyp.png) 100% no-repeat;
|
||||
background: var(--lianxiyp) 100% no-repeat;
|
||||
z-index: 10;
|
||||
justify-content: center;
|
||||
// align-items: center;
|
||||
|
||||
@ -4,25 +4,12 @@
|
||||
<div class="group_666" style="position: relative;height: 600px;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/customer/topnav.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/customer/topnav.png`" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/customer/topnav.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/customer/topnav.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" style="margin-top: 70px;">
|
||||
@ -36,7 +23,7 @@
|
||||
|
||||
<div class="box_con flex-col" v-for="(item, index) in lists" :key="index">
|
||||
<div class="align-center" style="justify-content: center;margin-top: 10px;">
|
||||
<img width="257px" height="169px" :src="`/img/customer/${index}.png`" alt="">
|
||||
<img width="257px" height="169px" :src="`${cdnUrl}/img/customer/${index}.png`" alt="">
|
||||
</div>
|
||||
<div class="flex-col"
|
||||
style="justify-content: center;margin-top: 10px;border-top: 1px solid #EEEEEE;">
|
||||
@ -75,7 +62,7 @@ import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
const { locale } = useI18n()
|
||||
|
||||
const cdnUrl = useCdn()
|
||||
let newsSwiper: any = null
|
||||
const onSwiperNews = (swiper: any) => {
|
||||
newsSwiper = swiper
|
||||
@ -198,7 +185,7 @@ const animate = () => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
|
||||
|
||||
@ -217,7 +204,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.bottom_imgss {
|
||||
background: url(/public/img/customer/bg-s.png);
|
||||
background: var(--bg-s);
|
||||
height: 837px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
@ -4,26 +4,26 @@
|
||||
<div class="group_666" style="position: relative;height: 100vh;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/banner.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/banner.png`" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/banner2.png" style="width: 100%;">
|
||||
<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="public/img/1212.mp4"></video>
|
||||
: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="public/img/left.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/left.png`" alt="">
|
||||
</div>
|
||||
<div style="margin: 0px 20px;">
|
||||
<img src="public/img/morse.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/morse.png`" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/right.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/right.png`" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -78,7 +78,7 @@
|
||||
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="public/img/bf.png" />
|
||||
<img class="image_5" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/bf.png`" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="content_box"></div>
|
||||
@ -95,7 +95,7 @@
|
||||
<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 justify-between">
|
||||
<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;">
|
||||
专业技术服务
|
||||
@ -105,7 +105,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="image-wrapper_3s flex-col align-center">
|
||||
<img class="label_1s" referrerpolicy="no-referrer" src="public/img/u1s.png" />
|
||||
<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1s.png`" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -113,7 +113,7 @@
|
||||
<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="public/img/aiyingyong.png" />
|
||||
<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>
|
||||
@ -125,7 +125,7 @@
|
||||
<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="public/img/kaifapeizhi.png" />
|
||||
<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>
|
||||
@ -138,7 +138,7 @@
|
||||
<div class="group_7 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer"
|
||||
src="public/img/a-yunweishuju1x.png" />
|
||||
:src="`${cdnUrl}/img/a-yunweishuju1x.png`" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">IT运维服务</span>
|
||||
@ -151,7 +151,7 @@
|
||||
<div class="group_7 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer"
|
||||
src="public/img/wangluoanquanshebei.png" />
|
||||
:src="`${cdnUrl}/img/wangluoanquanshebei.png`" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">网络与信息安全</span>
|
||||
@ -164,7 +164,7 @@
|
||||
<div class="group_7 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer"
|
||||
src="public/img/yekuogongdianfangan.png" />
|
||||
:src="`${cdnUrl}/img/yekuogongdianfangan.png`" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">智慧化解决方案</span>
|
||||
@ -177,7 +177,7 @@
|
||||
|
||||
<div class="rightBox section_2sa flex-col">
|
||||
<div class="group_6s flex-col">
|
||||
<div class="box_6 flex-row align-center justify-between">
|
||||
<div class="box_6 flex-row align-center" style="width: 100%;">
|
||||
<div class="text-group_2 flex-col justify-between">
|
||||
<span class="text_17">
|
||||
内容创作与运营
|
||||
@ -187,7 +187,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="image-wrapper_3s flex-col align-center">
|
||||
<img class="label_1s" referrerpolicy="no-referrer" src="public/img/u1.png" />
|
||||
<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1.png`" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -195,7 +195,7 @@
|
||||
<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="public/img/quanmeiti.png" />
|
||||
<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>
|
||||
@ -207,7 +207,7 @@
|
||||
<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="public/img/pingpai.png" />
|
||||
<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>
|
||||
@ -219,7 +219,7 @@
|
||||
<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="public/img/xianshang.png" />
|
||||
<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>
|
||||
@ -231,7 +231,7 @@
|
||||
<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="public/img/news.png" />
|
||||
<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>
|
||||
@ -243,7 +243,7 @@
|
||||
<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="public/img/daren.png" />
|
||||
<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>
|
||||
@ -265,15 +265,9 @@
|
||||
<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="`/img/home_al/op${item}.png`" style="width: 585px;height: 300px; margin: 0 auto;">
|
||||
<img :src="`${$cdnUrl}/img/home_al/op${item}.png`" style="width: 585px;height: 300px; margin: 0 auto;">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<!-- <div class="dswper_left">
|
||||
<img src="public/img/opl.png">
|
||||
</div>
|
||||
<div class="dswper_right">
|
||||
<img src="public/img/opr.png">
|
||||
</div> -->
|
||||
<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' }">
|
||||
@ -396,7 +390,7 @@
|
||||
<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="public/img/222.mp4"
|
||||
x5-video-orientation="portraint" controls="" autoplay :src="`${cdnUrl}/img/222.mp4`"
|
||||
draggable="true"></video>
|
||||
</div>
|
||||
</div>
|
||||
@ -424,6 +418,8 @@ 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);
|
||||
@ -626,9 +622,9 @@ const openUrl = (id) => {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
:deep(.dswper .swiper-slide-next) {
|
||||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||||
@ -653,12 +649,14 @@ const openUrl = (id) => {
|
||||
}
|
||||
|
||||
.bottom_imgs {
|
||||
background: url(/public/img/qall.png);
|
||||
background: var(--qall);
|
||||
width: 1230px;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.content_box {
|
||||
background: url(/public/img/m1.png);
|
||||
background: var(--m1);
|
||||
width: 561px;
|
||||
height: 521px;
|
||||
z-index: 1;
|
||||
@ -773,7 +771,7 @@ const openUrl = (id) => {
|
||||
right: -75px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: url('/public/img/close.png') no-repeat 0 0;
|
||||
background: var(--close) no-repeat 0 0;
|
||||
background-size: 100% auto;
|
||||
border: 6px solid #979797;
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div style="width: 100%;">
|
||||
<div style="height:71px;background-color: #ffffff;"></div>
|
||||
<div style="height:90px;background-color: #ffffff;"></div>
|
||||
<div style="background-color: #F8F8F8;padding: 30px;">
|
||||
<div style="width: 60%;min-height: 500px;margin: 0 auto;background-color: #ffffff;padding: 30px;">
|
||||
<div style="font-size: 32px;font-weight: 700;color: #323232;">{{ info.title }}</div>
|
||||
@ -58,7 +58,7 @@ const delWeb = () => {
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
.info_content img {
|
||||
width: 80% !important;
|
||||
|
||||
@ -472,7 +472,7 @@ const animate = () => {
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
/* 移动端通用样式 */
|
||||
body.is-mobile {
|
||||
|
||||
@ -4,38 +4,25 @@
|
||||
<div class="group_666" style="position: relative;height: 600px;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/service.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/service.png`" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/service.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/service.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="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;">
|
||||
<img :src="`${cdnUrl}/img/service_01.png`" style="width: 100%;position: absolute;top: -30px;z-index: 10;">
|
||||
<div class="service_top1">
|
||||
<div style="cursor: pointer;">
|
||||
<NuxtLink to="/proServices_con/">
|
||||
内容创作与运营
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div style="cursor: pointer;">
|
||||
<NuxtLink to="/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:40%;height: 8px;margin: 0 auto;"></div>
|
||||
<div style="background-color: #0256FF;width:10%;height: 8px;margin: 0 auto;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-01" style="text-align: center;padding-top: 70px;z-index: 30;">
|
||||
@ -47,7 +34,7 @@
|
||||
<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;">
|
||||
<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>
|
||||
@ -60,21 +47,21 @@
|
||||
<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;">
|
||||
<img :src="`${cdnUrl}/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;">
|
||||
<img :src="`${cdnUrl}/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;">
|
||||
<img :src="`${cdnUrl}/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>
|
||||
@ -84,21 +71,21 @@
|
||||
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;">
|
||||
<img :src="`${cdnUrl}/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;">
|
||||
<img :src="`${cdnUrl}/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;">
|
||||
<img :src="`${cdnUrl}/img/service_018.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
|
||||
模型生态扩展接入更多模型</div>
|
||||
@ -108,21 +95,21 @@
|
||||
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;">
|
||||
<img :src="`${cdnUrl}/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;">
|
||||
<img :src="`${cdnUrl}/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;">
|
||||
<img :src="`${cdnUrl}/img/service_021.png`" style="width:32px;height: 32px;">
|
||||
</div>
|
||||
<div style="width: 105px;font-size: 14px;font-weight: 400;margin-left: 15px;">
|
||||
垂直领域深度适配多行业应用</div>
|
||||
@ -131,7 +118,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="service_top1_width" style="text-align: center;">
|
||||
<img src="public/img/service_022.png" style="width:100%;height: 100%;">
|
||||
<img :src="`${cdnUrl}/img/service_022.png`" style="width:100%;height: 100%;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -145,12 +132,12 @@
|
||||
<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%;">
|
||||
<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="public/img/service_012.png" style="width:22px;height: 22px;">
|
||||
<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>
|
||||
@ -159,17 +146,17 @@
|
||||
</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 class="dz_img">
|
||||
<img :src="`${cdnUrl}/img/service_025.png`" style="width:135px;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/service_026.png" style="width:135px;">
|
||||
<div class="dz_img">
|
||||
<img :src="`${cdnUrl}/img/service_026.png`" style="width:135px;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/service_027.png" style="width:135px;">
|
||||
<div class="dz_img">
|
||||
<img :src="`${cdnUrl}/img/service_027.png`" style="width:135px;">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/service_028.png" style="width:135px;">
|
||||
<div class="dz_img">
|
||||
<img :src="`${cdnUrl}/img/service_028.png`" style="width:135px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -183,7 +170,7 @@
|
||||
<div
|
||||
style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 40px;">
|
||||
<div class="service-yw" style="position: relative;">
|
||||
<img src="public/img/service_029.png" style="width:275px;">
|
||||
<img :src="`${cdnUrl}/img/service_029.png`" style="width:275px;">
|
||||
<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
|
||||
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全防护</div>
|
||||
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
|
||||
@ -191,7 +178,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-yw" style="position: relative;">
|
||||
<img src="public/img/service_030.png" style="width:275px;">
|
||||
<img :src="`${cdnUrl}/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;">
|
||||
@ -199,7 +186,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-yw" style="position: relative;">
|
||||
<img src="public/img/service_031.png" style="width:275px;">
|
||||
<img :src="`${cdnUrl}/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应用防调试
|
||||
@ -207,7 +194,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="service-yw" style="position: relative;">
|
||||
<img src="public/img/service_032.png" style="width:275px;">
|
||||
<img :src="`${cdnUrl}/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;">
|
||||
@ -224,11 +211,11 @@
|
||||
<div class="service-wl-a" style="display: flex;justify-content: center;gap: 30px;margin-top: 40px;">
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
|
||||
<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="public/img/service_035.png" style="width:36px;height: 36px;">
|
||||
<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>
|
||||
@ -238,11 +225,11 @@
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
|
||||
<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="public/img/service_036.png" style="width:36px;height: 36px;">
|
||||
<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>
|
||||
@ -253,11 +240,11 @@
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
|
||||
<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="public/img/service_037.png" style="width:36px;height: 36px;">
|
||||
<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>
|
||||
@ -269,11 +256,11 @@
|
||||
<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%;">
|
||||
<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="public/img/service_038.png" style="width:36px;height: 36px;">
|
||||
<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>
|
||||
@ -283,11 +270,11 @@
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
|
||||
<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="public/img/service_039.png" style="width:36px;height: 36px;">
|
||||
<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>
|
||||
@ -297,11 +284,11 @@
|
||||
</div>
|
||||
<div class="service-wl">
|
||||
<div style="position: absolute;">
|
||||
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
|
||||
<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="public/img/service_040.png" style="width:36px;height: 36px;">
|
||||
<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>
|
||||
@ -323,7 +310,7 @@
|
||||
: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;">
|
||||
<img :src="`${cdnUrl}/img/service_041.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
监控系统
|
||||
@ -335,7 +322,7 @@
|
||||
<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;">
|
||||
<img :src="`${cdnUrl}/img/service_049.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
监控回溯
|
||||
@ -343,7 +330,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_050.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_050.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
人员轨迹
|
||||
@ -356,7 +343,7 @@
|
||||
: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;">
|
||||
<img :src="`${cdnUrl}/img/service_042.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
门禁系统
|
||||
@ -368,7 +355,7 @@
|
||||
<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;">
|
||||
<img :src="`${cdnUrl}/img/service_052.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
人脸识别
|
||||
@ -376,7 +363,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_053.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_053.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
id卡
|
||||
@ -384,7 +371,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_054.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_054.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
蓝牙检测
|
||||
@ -392,7 +379,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_055.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_055.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
停车管理系统
|
||||
@ -405,7 +392,7 @@
|
||||
: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;">
|
||||
<img :src="`${cdnUrl}/img/service_043.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
充电系统
|
||||
@ -417,7 +404,7 @@
|
||||
<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;">
|
||||
<img :src="`${cdnUrl}/img/service_056.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
充电桩
|
||||
@ -425,7 +412,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_057.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_057.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
安全警告
|
||||
@ -438,7 +425,7 @@
|
||||
: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;">
|
||||
<img :src="`${cdnUrl}/img/service_044.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
水电收费系统
|
||||
@ -450,7 +437,7 @@
|
||||
<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;">
|
||||
<img :src="`${cdnUrl}/img/service_058.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
物业缴费
|
||||
@ -458,7 +445,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_059.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_059.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
报修
|
||||
@ -466,7 +453,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_060.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_060.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
投诉处理
|
||||
@ -479,7 +466,7 @@
|
||||
: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;">
|
||||
<img :src="`${cdnUrl}/img/service_045.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
养老系统
|
||||
@ -491,7 +478,7 @@
|
||||
<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;">
|
||||
<img :src="`${cdnUrl}/img/service_061.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
烟感警报
|
||||
@ -499,7 +486,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_062.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_062.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
摄像头人物摔倒提示
|
||||
@ -507,7 +494,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_063.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_063.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
防丢手环
|
||||
@ -515,7 +502,7 @@
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;margin-top: 30px;">
|
||||
<div>
|
||||
<img src="public/img/service_064.png" style="width: 32px;height: 32px;">
|
||||
<img :src="`${cdnUrl}/img/service_064.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
护理请求传感器
|
||||
@ -528,7 +515,7 @@
|
||||
: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;">
|
||||
<img :src="`${cdnUrl}/img/service_046.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
租房系统
|
||||
@ -540,7 +527,7 @@
|
||||
<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;">
|
||||
<img :src="`${cdnUrl}/img/service_065.png`" style="width: 32px;height: 32px;">
|
||||
</div>
|
||||
<div style="font-size: 14px;font-weight: 400;margin-left: 20px;">
|
||||
托管出租
|
||||
@ -553,7 +540,7 @@
|
||||
: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;">
|
||||
<img :src="`${cdnUrl}/img/service_047.png`" style="width: 38px;height: 38px;">
|
||||
</div>
|
||||
<div style="font-size: 18px;font-weight: 700;margin-top: 20px;">
|
||||
更多方案联系我们
|
||||
@ -574,7 +561,7 @@
|
||||
</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;">
|
||||
<img :src="`${cdnUrl}/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>
|
||||
@ -605,6 +592,7 @@ import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
const { locale } = useI18n()
|
||||
const cdnUrl = useCdn()
|
||||
|
||||
const serviceList = ref([
|
||||
{ name: '需求分析与规划' },
|
||||
@ -1057,7 +1045,7 @@ const swiperOptionsNews = {
|
||||
|
||||
// 新闻数据
|
||||
onMounted(() => {
|
||||
animate()
|
||||
animate()
|
||||
})
|
||||
const animate = () => {
|
||||
const sr = ScrollReveal();
|
||||
@ -1139,7 +1127,7 @@ const animate = () => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
:deep(.dswper .swiper-slide-next) {
|
||||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||||
@ -1150,7 +1138,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.service_023 {
|
||||
background: url(/public/img/service_023.png) no-repeat center center;
|
||||
background: var(--service_023) no-repeat center center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100%;
|
||||
@ -1160,7 +1148,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.service_033 {
|
||||
background: url(/public/img/service_033.png) no-repeat center center;
|
||||
background: var(--service_033) no-repeat center center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100%;
|
||||
@ -1168,7 +1156,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.service_bottom {
|
||||
background: url('public/img/service_048.png') no-repeat center center;
|
||||
background: var(--service_048) no-repeat center center;
|
||||
background-size: 100%;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
@ -1179,7 +1167,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.service_051 {
|
||||
background: url('public/img/service_051.png') no-repeat center center;
|
||||
background: var(--service_051) no-repeat center center;
|
||||
background-size: 100%;
|
||||
color: #ffffff !important;
|
||||
height: 640px;
|
||||
@ -1287,13 +1275,16 @@ const animate = () => {
|
||||
z-index: 30;
|
||||
color: #ffffff;
|
||||
}
|
||||
.service_center_02{
|
||||
|
||||
.service_center_02 {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
@media (max-width: 1440px) {
|
||||
.service_center_02{
|
||||
.service_center_02 {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.service_top1 {
|
||||
padding-top: 16px;
|
||||
}
|
||||
@ -1318,8 +1309,18 @@ const animate = () => {
|
||||
.service-container {
|
||||
margin: 30px 0px 0px 140px;
|
||||
}
|
||||
.service-item{
|
||||
|
||||
.service-item {
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
.service-1:hover{
|
||||
color: rgb(2, 86, 255);
|
||||
cursor: pointer;
|
||||
}
|
||||
.dz_img:hover{
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transform: scale(1.05)
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,39 +4,39 @@
|
||||
<div class="group_666" style="position: relative;height: 600px;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/services1.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/services1.png`" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/services1.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/services1.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="">
|
||||
<img :src="`${cdnUrl}/img/left.png" alt="">
|
||||
</div>
|
||||
<div style="margin: 0px 20px;">
|
||||
<img src="public/img/morse.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/morse.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/right.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/right.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="group_2 flex-col"
|
||||
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;">
|
||||
<img :src="`${cdnUrl}/img/service_01s.png`" style="width: 100%;position: absolute;top: -30px;z-index: 10;">
|
||||
<div class="service_top1">
|
||||
<div style="cursor: pointer;">
|
||||
<div style="cursor: pointer;width: 50%;text-align: center;">
|
||||
<div style="color: #FC7428;margin-bottom: 20px;">内容创作与运营</div>
|
||||
<div style="background-color: #FC7428;width:40%;height: 8px;margin: 0 auto;"></div>
|
||||
<div style="background-color: #FC7428;width:10%;height: 8px;margin: 0 auto;"></div>
|
||||
</div>
|
||||
<div style="cursor: pointer;">
|
||||
<NuxtLink to="/proServices/">
|
||||
<NuxtLink to="/proServices/" style="cursor: pointer;width: 50%;text-align: center;">
|
||||
<div >
|
||||
专业技术服务
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div class="service-01" style="text-align: center;padding-top: 70px;z-index: 30;">
|
||||
<div style="font-size: 34px;font-weight: 700;">全媒体推广解决方案</div>
|
||||
@ -46,7 +46,7 @@
|
||||
<div style="display: flex;flex-direction: row;justify-content: center;width: 100%;gap: 30px;">
|
||||
<div class="service_center_01s">
|
||||
<span class="service_center_01s_title">
|
||||
<img src="public/img/content_ds.png" alt="" style="margin-right: 10px;">
|
||||
<img :src="`${cdnUrl}/img/content_ds.png`" alt="" style="margin-right: 10px;">
|
||||
覆盖各大主流平台
|
||||
</span>
|
||||
<span class="service_center_01s_text">定制【流量矩阵+内容策略+效果追踪】一体化方案</span>
|
||||
@ -54,7 +54,7 @@
|
||||
</div>
|
||||
<div class="service_center_01s">
|
||||
<span class="service_center_01s_title">
|
||||
<img src="public/img/content_xx.png" alt="" style="margin-right: 10px;">
|
||||
<img :src="`${cdnUrl}/img/content_xx.png`" alt="" style="margin-right: 10px;">
|
||||
平台搭建
|
||||
</span>
|
||||
<span class="service_center_01s_text">抖音、视频号、快手、B站、微信公众号、小红书等一站式布局</span>
|
||||
@ -62,7 +62,7 @@
|
||||
</div>
|
||||
<div class="service_center_01s">
|
||||
<span class="service_center_01s_title">
|
||||
<img src="public/img/content_yy.png" alt="" style="margin-right: 10px;">
|
||||
<img :src="`${cdnUrl}/img/content_yy.png`" alt="" style="margin-right: 10px;">
|
||||
精准运营
|
||||
</span>
|
||||
<span class="service_center_01s_text">行业大数据分析+账号定位+内容持续输出+流量裂变模型+账号运营变现</span>
|
||||
@ -72,7 +72,7 @@
|
||||
<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=""
|
||||
<img :src="`${cdnUrl}/img/moreright.png`" alt=""
|
||||
style="margin-left: 15px;width: 10px;cursor: pointer;">
|
||||
</span>
|
||||
</div>
|
||||
@ -86,16 +86,16 @@
|
||||
<div style="font-size: 34px;font-weight: 700;">品牌账号代运营</div>
|
||||
<div class="flex-row justify-center align-center" style="margin-top: 30px;">
|
||||
<div @click="openType(1)" :class="typeIndex == 1 ? 'video_wechat' : 'video_platform'">
|
||||
<img v-if="typeIndex == 1" src="public/img/con_1.png" alt=""
|
||||
<img v-if="typeIndex == 1" :src="`${cdnUrl}/img/con_1.png`" alt=""
|
||||
style="margin-right: 10px;height: 24px;width: 24px;">
|
||||
<img v-else src="public/img/mp4_video.png" alt=""
|
||||
<img v-else :src="`${cdnUrl}/img/mp4_video.png`" alt=""
|
||||
style="margin-right: 10px;height: 24px;width: 24px;">
|
||||
视频平台
|
||||
</div>
|
||||
<div @click="openType(2)" :class="typeIndex == 2 ? 'video_wechat' : 'video_platform'">
|
||||
<img v-if="typeIndex == 1" src="public/img/con_2.png"
|
||||
<img v-if="typeIndex == 1" :src="`${cdnUrl}/img/con_2.png`"
|
||||
style="margin-right: 10px;height: 24px;width: 24px;">
|
||||
<img v-else src="public/img/video_wechat.png"
|
||||
<img v-else :src="`${cdnUrl}/img/video_wechat.png`"
|
||||
style="margin-right: 10px;height: 24px;width: 24px;">
|
||||
微信账号
|
||||
</div>
|
||||
@ -107,7 +107,7 @@
|
||||
<div v-if="typeIndex == 2" @mouseenter="bgSet(index)" class="service-yw" style="position: relative;"
|
||||
v-for="(item, index) in wchatList" :key="index">
|
||||
<img :src="`/img/media/${index + 1}.png`" style="width:216px;">
|
||||
<img v-if="!item.isShow" src="public/img/media/buttom.png"
|
||||
<img v-if="!item.isShow" :src="`${cdnUrl}/img/media/buttom.png`"
|
||||
style="width: 216px;position: absolute;bottom: 0px;">
|
||||
<div v-if="!item.isShow" style="position: absolute;bottom: 0;color: #FFFFFF;padding: 15px;">
|
||||
<div style="font-size: 17px;font-weight: 600;">{{ item.name }}</div>
|
||||
@ -120,7 +120,7 @@
|
||||
style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
||||
<div style="width: 100%;text-align: center;padding: 15px;color: #ffffff;">
|
||||
<div>
|
||||
<img :src="`/img/media/a${index + 1}.png`"
|
||||
<img :src="`${cdnUrl}/img/media/a${index + 1}.png`"
|
||||
style="width:90px;height: 90px;margin: 0 auto;">
|
||||
</div>
|
||||
<div style="font-size: 16px;font-weight: 600;margin-top: 10px;">{{ item.title }}
|
||||
@ -135,7 +135,7 @@
|
||||
<div v-if="typeIndex == 1" @mouseenter="bgSetVideo(index)" class="service-yw"
|
||||
style="position: relative;" v-for="(item, index) in videoList" :key="index">
|
||||
<img :src="`/img/media/b${index + 1}.png`" style="width:255px;">
|
||||
<img v-if="!item.isShow" src="public/img/media/buttom2.png"
|
||||
<img v-if="!item.isShow" :src="`${cdnUrl}/img/media/buttom2.png`"
|
||||
style="width: 255px;position: absolute;bottom: 0px;">
|
||||
<div v-if="!item.isShow" style="position: absolute;bottom: 0;color: #FFFFFF;padding: 15px;">
|
||||
<div style="font-size: 17px;font-weight: 600;">{{ item.name }}</div>
|
||||
@ -148,7 +148,7 @@
|
||||
style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
||||
<div style="width: 100%;text-align: center;padding:0px 15px;color: #ffffff;">
|
||||
<div>
|
||||
<img :src="`/img/media/v${index + 1}.png`"
|
||||
<img :src="`${cdnUrl}/img/media/v${index + 1}.png`"
|
||||
style="width:80px;height: 80px;margin: 0 auto;">
|
||||
</div>
|
||||
<div style="font-size: 16px;font-weight: 600;margin-top: 10px;">{{ item.title }}
|
||||
@ -168,7 +168,7 @@
|
||||
<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="">
|
||||
<img :src="`${cdnUrl}/img/media/leftpeo.png`" alt="">
|
||||
</div>
|
||||
<div class="flex-col">
|
||||
<div class="flex-col">
|
||||
@ -178,15 +178,15 @@
|
||||
<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="">
|
||||
<img :src="`${cdnUrl}/img/media/left1.png`" alt="">
|
||||
创意驱动，精准执行，从构思到落地，打通线上线下资源，一站式策划沉浸式活动，引爆品牌传播声量。
|
||||
</div>
|
||||
<div class="flex justify-center mediat3">
|
||||
<img src="public/img/media/left2.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/media/left2.png`" alt="">
|
||||
线上活动：聚焦行业热点打造爆款话题 （话题营销+直播连麦+裂变传播）助力品牌实现社交裂变传播，激活私域流量池。
|
||||
</div>
|
||||
<div class="flex justify-center mediat3">
|
||||
<img src="public/img/media/left3.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/media/left3.png`" alt="">
|
||||
线下活动：全案服务涵盖发布会、快闪店、行业峰会等多元形式，提供从创意策划、资源整合、现场执行到效果追踪的全流程专业落地解决方案。
|
||||
</div>
|
||||
</div>
|
||||
@ -203,11 +203,11 @@
|
||||
<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="">
|
||||
<img :src="`${cdnUrl}/img/media/right1.png`" alt="">
|
||||
整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略，以专业视角与高效执行，让您的新闻迅速抢占舆论高地，第一时间触达目标受众。
|
||||
</div>
|
||||
<div class="flex justify-center mediat3">
|
||||
<img src="public/img/media/right2.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/media/right2.png`" alt="">
|
||||
权威媒体资源覆盖人民网、新浪、网易等、科技等垂直领域媒体，形成多渠道传播矩阵，深度触达目标受众，强化品牌公信力与行业影响力。
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
@ -245,7 +245,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/media/rightpeo.png" alt="">
|
||||
<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%;">
|
||||
@ -258,30 +258,33 @@
|
||||
</div>
|
||||
</div>
|
||||
<div style="background: url(/img/media/botright.png)100% 100% no-repeat;width: 50%;">
|
||||
<div style="flex-direction:column;display: flex;justify-content: center;;height: 542px;color: #FFFFFF;padding-left: 70px;">
|
||||
<div
|
||||
style="flex-direction:column;display: flex;justify-content: center;;height: 542px;color: #FFFFFF;padding-left: 70px;">
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="public/img/media/left.png" style="width: 32px;">
|
||||
<img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
|
||||
<div style="font-size: 18px;font-weight: 700;padding-left: 25px;">从0到1打造现象级IP</div>
|
||||
</div>
|
||||
<div style="color: #FFFFFF;padding:10px 0px 0px 57px;">
|
||||
<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>
|
||||
<div style="background-color: rgba(216, 216, 216, 0.5);width: 60%;height: 1px;margin: 50px 0px;">
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="public/img/media/left.png" style="width: 32px;">
|
||||
<img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
|
||||
<div style="font-size: 18px;font-weight: 700;padding-left: 25px;">IP打造</div>
|
||||
</div>
|
||||
<div style="color: #FFFFFF;padding:10px 0px 0px 57px;">
|
||||
<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>
|
||||
<div style="background-color: rgba(216, 216, 216, 0.5);width: 60%;height: 1px;margin: 50px 0px;">
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex;align-items: center;">
|
||||
<img src="public/img/media/left.png" style="width: 32px;">
|
||||
<img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
|
||||
<div style="font-size: 18px;font-weight: 700;padding-left: 25px;">达人资源</div>
|
||||
</div>
|
||||
<div style="color: #FFFFFF;padding:10px 0px 0px 57px;">
|
||||
@ -316,7 +319,7 @@ import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
const { locale } = useI18n()
|
||||
|
||||
const cdnUrl = useCdn()
|
||||
const wchatList = ref([
|
||||
{ name: '微信底部菜单搭建', desc: '让底部菜单成为品牌的亮眼名片', title: '汝南县妇幼保健院', content: '将deep seek AI问诊功能搭建在医院底部菜单，提高医院就诊效率50%。', isShow: false },
|
||||
{ name: '内容采编', desc: '专业采编团队深挖品牌亮点', title: '河南科技大学第一附属医院', content: '《女博士养成记》原创文章平均每篇阅读量破5万+，整个系列阅读量破30万+。', isShow: false },
|
||||
@ -424,7 +427,7 @@ const animate = () => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
:deep(.dswper .swiper-slide-next) {
|
||||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||||
@ -435,7 +438,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.service_023 {
|
||||
background: url(/public/img/service_023.png) no-repeat center center;
|
||||
background: var(--service_023) no-repeat center center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100%;
|
||||
@ -445,7 +448,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.service_033 {
|
||||
background: url(/public/img/service_033.png) no-repeat center center;
|
||||
background: var(--service_033) no-repeat center center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: 100%;
|
||||
@ -453,7 +456,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.service_bottom {
|
||||
background: url('public/img/service_048.png') no-repeat center center;
|
||||
background: var(--service_048) no-repeat center center;
|
||||
background-size: 100%;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
@ -464,7 +467,7 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.service_051 {
|
||||
background: url('public/img/service_051.png') no-repeat center center;
|
||||
background: var(--service_051) no-repeat center center;
|
||||
background-size: 100%;
|
||||
color: #ffffff !important;
|
||||
height: 640px;
|
||||
@ -573,14 +576,18 @@ const animate = () => {
|
||||
}
|
||||
|
||||
.service_center_01s {
|
||||
background: url('/public/img/content_top.png') 100% no-repeat;
|
||||
background: var(--content_top) 100% no-repeat;
|
||||
width: 380px;
|
||||
height: 196px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
padding-left: 30px;
|
||||
|
||||
transition: all 0.3s ease;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
.service_center_01s_title {
|
||||
margin-top: 30px;
|
||||
width: 180px;
|
||||
@ -643,7 +650,7 @@ const animate = () => {
|
||||
.video_platform {
|
||||
width: 179px;
|
||||
height: 48px;
|
||||
background: url(public/img/video.png) 100% no-repeat;
|
||||
background: var(--video) 100% no-repeat;
|
||||
line-height: 44px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 700;
|
||||
@ -660,7 +667,7 @@ const animate = () => {
|
||||
.video_wechat {
|
||||
width: 185px;
|
||||
height: 52px;
|
||||
background: url(public/img/wechat1.png) 100% no-repeat;
|
||||
background: var(--wechat1) 100% no-repeat;
|
||||
line-height: 46px;
|
||||
font-family: Source Han Sans, Source Han Sans;
|
||||
font-weight: 700;
|
||||
@ -717,6 +724,10 @@ const animate = () => {
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
align-items: center;
|
||||
&:hover{
|
||||
color: #FC7428;
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
@ -4,25 +4,12 @@
|
||||
<div class="group_666" style="position: relative;height: 600px;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/societyduty/shehui.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/societyduty/shehui.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/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">
|
||||
@ -43,19 +30,11 @@
|
||||
<div class="text_25">
|
||||
<span style="color: rgb(252, 116, 40);">活动影集（部分）</span>
|
||||
<div
|
||||
style=" left: 20px;width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
|
||||
style="left: 20px;width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@ -63,7 +42,7 @@
|
||||
|
||||
<div class="box_con flex-col" 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="">
|
||||
<img width="277px" height="189px" :src="`${cdnUrl}/img/societyduty/s${index+1}.png`" alt="">
|
||||
</div>
|
||||
<div class="flex-col" style="justify-content: center;margin-top: 5px;">
|
||||
<span class="text_tt">
|
||||
@ -103,7 +82,7 @@ import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
const { locale } = useI18n()
|
||||
|
||||
const cdnUrl = useCdn()
|
||||
let newsSwiper: any = null
|
||||
const onSwiperNews = (swiper: any) => {
|
||||
newsSwiper = swiper
|
||||
@ -135,13 +114,13 @@ const lists = ref([
|
||||
{title: '21年西工硅巷青创加速营活动进行中'},
|
||||
{title: '香港青英会15 周年、第16 届执委会暨第7屆理事会就职仪式'},
|
||||
{title: '青年企业家助力河南高质量发展暨河南青年创新创业论坛'},
|
||||
{title: '洛阳市青年联合会第九届委员会常务委员第一次会议'},
|
||||
{title: '河南青年科技创新论坛'},
|
||||
{title: '团省委省青联2023年新春送温暖慰问活动'},
|
||||
{title: '郑州市儿童福利院慰问活动'},
|
||||
{title: '河南青年科技创新论坛'},
|
||||
{title: '洛阳市青年联合会第九届委员会常务委员第一次会议'},
|
||||
{title: '团省委省青联2023年新春送温暖慰问活动'},
|
||||
{title: '荥阳市乔楼镇付河村“扶贫助困 情系家乡”志愿活动'},
|
||||
{title: '东方医院活动'},
|
||||
{title: '中国青年梦想季活动-中国 '},
|
||||
{title: '中国青年梦想季活动-中国'},
|
||||
{title: '河南省青年企业家协会第十一届常务理事选举'}
|
||||
|
||||
]);
|
||||
@ -231,7 +210,7 @@ const animate = () => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
|
||||
|
||||
|
||||
@ -4,33 +4,14 @@
|
||||
<div class="group_666" style="position: relative;height: 600px;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/img/societyduty/shehui.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/societyduty/shehui.png" style="width: 100%;">
|
||||
<img :src="`${cdnUrl}/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;padding-top: 30px;">
|
||||
<div class="flex-row">
|
||||
<div class="text_25">
|
||||
@ -46,22 +27,14 @@
|
||||
</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" style="display: flex;align-items: center;justify-content: center;">
|
||||
<div style="position: relative;cursor: pointer;" @click="videoShow = true">
|
||||
<img src="public/img/societyduty/det.png" style="width: 500px;height: 325px;">
|
||||
<img src="public/img/societyduty/bf.png"
|
||||
<img :src="`${cdnUrl}/img/societyduty/det.png`" style="width: 500px;height: 325px;">
|
||||
<img :src="`${cdnUrl}/img/societyduty/bf.png`"
|
||||
style="width: 50px;height: 50px;position: absolute;top: 45%;left: 0;right: 0;margin: 0 auto;">
|
||||
</div>
|
||||
<div style="width: 53%;padding-left: 30px;">
|
||||
@ -100,7 +73,7 @@
|
||||
<div style="font-size: 14px;color: #FC7428;display: flex;align-items: center;">
|
||||
<div>查看详情</div>
|
||||
<div style="margin-left: 10px;">
|
||||
<img src="public/img/societyduty/r.png" alt="">
|
||||
<img :src="`${cdnUrl}/img/societyduty/r.png`" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -117,14 +90,14 @@
|
||||
<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="public/img/yue.mp4"
|
||||
x5-video-orientation="portraint" controls="" autoplay :src="`${cdnUrl}/img/yue.mp4`"
|
||||
draggable="true"></video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
<script lang="ts" setup >
|
||||
import { NPagination } from 'naive-ui'
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import { nextTick, ref } from 'vue'
|
||||
@ -150,7 +123,7 @@ import { useStore } from '~/store'
|
||||
const { locale } = useI18n()
|
||||
|
||||
const videoShow = ref(false);
|
||||
|
||||
const cdnUrl = useCdn()
|
||||
let newsSwiper: any = null
|
||||
const onSwiperNews = (swiper: any) => {
|
||||
newsSwiper = swiper
|
||||
@ -284,7 +257,7 @@ const animate = () => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
@import "@/assets/index.scss";
|
||||
|
||||
::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
|
||||
color: #ffffff;
|
||||
@ -331,7 +304,7 @@ const animate = () => {
|
||||
margin-top: 30px;
|
||||
|
||||
.boxgs_top {
|
||||
background: url(/img/societyduty/newstop.png) 100% 100% no-repeat;
|
||||
background: var(--newstop) 100% 100% no-repeat;
|
||||
width: 100%;
|
||||
height: 385px;
|
||||
border: 1px solid #FC7428;
|
||||
@ -374,4 +347,45 @@ const animate = () => {
|
||||
}
|
||||
|
||||
|
||||
.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%;
|
||||
}
|
||||
</style>
|
||||
|
||||
34
plugins/cdn.ts
Normal file
34
plugins/cdn.ts
Normal file
@ -0,0 +1,34 @@
|
||||
import { defineNuxtPlugin } from '#app'
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
// 定义全局变量
|
||||
const cdnUrl = config.public.cdnDomain
|
||||
console.log(cdnUrl);
|
||||
|
||||
// 在客户端注入 CSS 变量
|
||||
if (process.client) {
|
||||
document.documentElement.style.setProperty('--cdn-domain', cdnUrl)
|
||||
}
|
||||
|
||||
// 只使用一种注入方式
|
||||
return {
|
||||
provide: {
|
||||
cdnUrl
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 为了 TypeScript 支持
|
||||
declare module '#app' {
|
||||
interface NuxtApp {
|
||||
$cdnUrl: string
|
||||
}
|
||||
}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
interface ComponentCustomProperties {
|
||||
$cdnUrl: string
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 MiB After Width: | Height: | Size: 1.5 MiB |
BIN
public/img/get_top.png
Normal file
BIN
public/img/get_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Loading…
x
Reference in New Issue
Block a user