579 lines
13 KiB
Vue
579 lines
13 KiB
Vue
<!--
|
||
@MiniProgram.vue
|
||
小程序开发服务页面组件
|
||
功能：展示五大技术核心和七大保障服务
|
||
特点：完全响应式设计，支持PC、平板、移动端
|
||
作者：开发团队
|
||
更新时间：2024
|
||
-->
|
||
|
||
<script lang="ts" setup>
|
||
import {useHead} from "#app";
|
||
|
||
// 页面元数据配置 - 使用无导航布局
|
||
definePageMeta({
|
||
layout: 'no-new'
|
||
})
|
||
|
||
// 使用 Nuxt 3 的 useHead 来管理头部资源
|
||
// 引入必要的CSS样式文件和JavaScript脚本
|
||
useHead({
|
||
link: [
|
||
{rel: 'stylesheet', href: '/css/bootstrap.min.css'}, // Bootstrap框架样式
|
||
{rel: 'stylesheet', href: '/css/main2.css'}, // 主要样式文件
|
||
{rel: 'stylesheet', href: '/css/yuxi2019.css'}, // 宇熙2019主题样式
|
||
{rel: 'stylesheet', href: '/css/computer_public.css'}, // 电脑端公共样式
|
||
// {rel: 'stylesheet', href: '/css/headORfooter.css'} // 头部底部样式（已注释）
|
||
],
|
||
script: [
|
||
{src: '/js/index.js'}, // 主要JavaScript功能
|
||
{src: '/js/gopcOm.js'} // PC端优化脚本
|
||
]
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 小程序开发服务页面主容器 -->
|
||
<view class="full-width-container">
|
||
|
||
<!-- 顶部背景横幅区域 -->
|
||
<div class="developBack"/>
|
||
|
||
<!-- 五大技术核心展示区域 -->
|
||
<div class="developC1">
|
||
<div class="developC1_next">
|
||
<!-- 区域标题 -->
|
||
<div class="title">
|
||
<span>五大技术核心</span>
|
||
<li>Five core technology</li>
|
||
<li class="p1"/>
|
||
</div>
|
||
<!-- 技术核心列表 -->
|
||
<ul>
|
||
<li><img src="/img/devel_web.png">
|
||
<p>Web开发</p></li>
|
||
<li><img src="/img/devel_ios.png">
|
||
<p>ios APP</p></li>
|
||
<li><img src="/img/devel_android.png">
|
||
<p>android APP</p></li>
|
||
<li><img src="/img/devel_wx.png">
|
||
<p>微信开发</p></li>
|
||
<li><img src="/img/devel_html5.png">
|
||
<p>Html5开发</p></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 七大保障服务展示区域 -->
|
||
<div class="guarantee-section">
|
||
<div class="guarantee-container">
|
||
<!-- 区域标题 -->
|
||
<div class="section-title">
|
||
<span>七大保障</span>
|
||
<li>Seven guarantee</li>
|
||
<li class="p1"/>
|
||
</div>
|
||
|
||
<!-- 保障服务项目网格 -->
|
||
<div class="guarantee-grid">
|
||
<!-- 1. 平台系统保障 -->
|
||
<div class="guarantee-item guarantee-platform">
|
||
<div class="guarantee-content">
|
||
<p>
|
||
平台系统是管理系统的一部分，在系统设计时尽可能照顾各方面的需要，在实现这些功能的时候，考虑下一步发展规划</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2. 安全防护保障 -->
|
||
<div class="guarantee-item guarantee-security">
|
||
<div class="guarantee-content">
|
||
<p>有健全的安全防范措施，从硬件、软件以及行政管理等方面严格管理，保证产品源代码安全</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 3. 实用性保障 -->
|
||
<div class="guarantee-item guarantee-practical">
|
||
<div class="guarantee-content">
|
||
<p>打造高质量产品，对于各个场合都会有很强的实用性</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 4. 可靠性保障 -->
|
||
<div class="guarantee-item guarantee-reliability">
|
||
<div class="guarantee-content">
|
||
<p>在网络设计时关键部位有高可靠性设备，对于重要的网络节点采用先进的高可靠性技术</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5. 开放性保障 -->
|
||
<div class="guarantee-item guarantee-openness">
|
||
<div class="guarantee-content">
|
||
<p>网络系统开放性要好，支持多网络协议</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6. 标准化保障 -->
|
||
<div class="guarantee-item guarantee-standard">
|
||
<div class="guarantee-content">
|
||
<p>
|
||
在网络设备和系统平台选型时，符合国际网络标准及工业标准，使系统的硬件环境、通信环境、软件环境相互依赖减至最小，使其各自发挥自身优势</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7. 先进性保障 -->
|
||
<div class="guarantee-item guarantee-advanced">
|
||
<div class="guarantee-content">
|
||
<p>采用国际先进的互联网技术,采用国际先进的网络技术模式,采用国际先进的技术路线,采用国际先进的体系结构</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* ===========================================
|
||
@MiniProgram.vue 样式定义
|
||
小程序开发服务页面样式
|
||
特点：完全响应式设计，支持多设备适配
|
||
=========================================== */
|
||
|
||
/* 主容器样式 - 全宽度布局 */
|
||
.full-width-container {
|
||
width: 100%;
|
||
min-width: 1210px; /* PC端最小宽度 */
|
||
}
|
||
|
||
/* 主容器响应式设计 */
|
||
@media (max-width: 1199px) {
|
||
.full-width-container {
|
||
min-width: auto; /* 移除最小宽度限制 */
|
||
}
|
||
}
|
||
|
||
/* 顶部背景横幅区域 */
|
||
.developBack {
|
||
width: 100%;
|
||
height: 780px; /* PC端高度 */
|
||
background: url('/img/backimg5.jpg') no-repeat top center;
|
||
background-size: cover; /* 背景图片自适应 */
|
||
min-width: 1210px;
|
||
}
|
||
|
||
/* 背景图响应式设计 */
|
||
@media (max-width: 1199px) {
|
||
.developBack {
|
||
height: 600px; /* 中等屏幕高度 */
|
||
min-width: auto; /* 移除最小宽度限制 */
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.developBack {
|
||
height: 400px; /* 平板端高度 */
|
||
background-size: cover;
|
||
background-position: center center;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.developBack {
|
||
height: 300px; /* 手机端高度 */
|
||
background-size: cover;
|
||
background-position: center center;
|
||
}
|
||
}
|
||
|
||
/* 五大技术核心区域容器 */
|
||
.developC1 {
|
||
width: 100%;
|
||
height: 390px; /* PC端固定高度 */
|
||
background: #fff;
|
||
margin-top: 60px;
|
||
}
|
||
|
||
/* 技术核心内容区域 */
|
||
.developC1_next {
|
||
width: 1210px; /* PC端固定宽度 */
|
||
height: 390px;
|
||
margin: 0 auto; /* 水平居中 */
|
||
text-align: center;
|
||
border-bottom: 1px solid #dcdcdc; /* 底部边框 */
|
||
}
|
||
|
||
/* 技术核心列表样式 */
|
||
.developC1_next ul {
|
||
margin-top: 20px;
|
||
width: 100%;
|
||
height: 140px;
|
||
line-height: 50px;
|
||
font-size: 24px;
|
||
color: #444;
|
||
}
|
||
|
||
/* 技术核心列表项 - PC端5列布局 */
|
||
.developC1_next ul li {
|
||
width: 20%; /* 5列布局，每列20% */
|
||
float: left;
|
||
}
|
||
|
||
/* 技术核心图标样式 */
|
||
.developC1_next ul li img {
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* 技术核心文字样式 */
|
||
.developC1_next ul li p {
|
||
font-size: 16px;
|
||
margin: 0;
|
||
color: #444;
|
||
}
|
||
|
||
/* 五大核心区域响应式设计 */
|
||
@media (max-width: 1199px) {
|
||
.developC1 {
|
||
height: auto; /* 自适应高度 */
|
||
min-height: 300px;
|
||
}
|
||
|
||
.developC1_next {
|
||
width: 90%; /* 响应式宽度 */
|
||
max-width: 900px;
|
||
height: auto;
|
||
min-height: 300px;
|
||
padding: 40px 20px;
|
||
}
|
||
|
||
.developC1_next ul {
|
||
height: auto;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 20px;
|
||
}
|
||
|
||
.developC1_next ul li {
|
||
width: 18%; /* 5列布局，稍微紧凑 */
|
||
float: none;
|
||
flex: 0 0 18%;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.developC1 {
|
||
margin-top: 40px;
|
||
min-height: 250px;
|
||
}
|
||
|
||
.developC1_next {
|
||
width: 95%;
|
||
padding: 30px 15px;
|
||
min-height: 250px;
|
||
}
|
||
|
||
.developC1_next ul {
|
||
gap: 15px;
|
||
}
|
||
|
||
.developC1_next ul li {
|
||
width: 30%; /* 3列布局 */
|
||
flex: 0 0 30%;
|
||
}
|
||
|
||
.developC1_next ul li img {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.developC1_next ul li p {
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.developC1 {
|
||
margin-top: 30px;
|
||
min-height: 200px;
|
||
}
|
||
|
||
.developC1_next {
|
||
width: 100%;
|
||
padding: 20px 10px;
|
||
min-height: 200px;
|
||
}
|
||
|
||
.developC1_next ul {
|
||
gap: 10px;
|
||
}
|
||
|
||
.developC1_next ul li {
|
||
width: 45%; /* 2列布局 */
|
||
flex: 0 0 45%;
|
||
}
|
||
|
||
.developC1_next ul li img {
|
||
width: 40px;
|
||
height: 40px;
|
||
}
|
||
|
||
.developC1_next ul li p {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
|
||
/* 七大保障区域容器 - 新设计 */
|
||
.guarantee-section {
|
||
width: 100%;
|
||
background: #fff;
|
||
margin-top: 95px;
|
||
padding: 60px 0;
|
||
}
|
||
|
||
/* 保障内容区域 - 响应式容器 */
|
||
.guarantee-container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
/* 保障项目网格布局 */
|
||
.guarantee-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 30px;
|
||
margin-top: 40px;
|
||
}
|
||
|
||
/* 保障项目基础样式 */
|
||
.guarantee-item {
|
||
background: #f8f9fa;
|
||
border-radius: 12px;
|
||
padding: 30px 25px;
|
||
position: relative;
|
||
transition: all 0.3s ease;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||
min-height: 220px;
|
||
max-height: 240px;
|
||
max-width: 240px;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.guarantee-item:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
/* 保障内容样式 */
|
||
.guarantee-content {
|
||
width: 100%;
|
||
}
|
||
|
||
.guarantee-content p {
|
||
padding-top: 90px;
|
||
font-size: 16px;
|
||
line-height: 1.6;
|
||
color: #505050;
|
||
|
||
text-align: left;
|
||
}
|
||
|
||
/* 各个保障项目的图标样式 */
|
||
.guarantee-platform {
|
||
background-image: url('/img/devel_qz.png');
|
||
background-repeat: no-repeat;
|
||
background-position: 0 0;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.guarantee-security {
|
||
background-image: url('/img/devel_aq.png');
|
||
background-repeat: no-repeat;
|
||
background-position: 0 0;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.guarantee-practical {
|
||
background-image: url('/img/devel_sy.png');
|
||
background-repeat: no-repeat;
|
||
background-position: 0 0;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.guarantee-reliability {
|
||
background-image: url('/img/devel_kk.png');
|
||
background-repeat: no-repeat;
|
||
background-position: 0 0;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.guarantee-openness {
|
||
background-image: url('/img/devel_kf.png');
|
||
background-repeat: no-repeat;
|
||
background-position: 0 0;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.guarantee-standard {
|
||
background-image: url('/img/devel_bz.png');
|
||
background-repeat: no-repeat;
|
||
background-position: 0 0;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.guarantee-advanced {
|
||
background-image: url('/img/devel_xj.png');
|
||
background-repeat: no-repeat;
|
||
background-position: 0 0;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
/* 区域标题通用样式 */
|
||
|
||
.section-title {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
/* 主标题样式 */
|
||
.title span,
|
||
.section-title span {
|
||
font-size: 32px;
|
||
color: #333;
|
||
font-weight: bold;
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
/* 副标题样式 */
|
||
.title li,
|
||
.section-title li {
|
||
font-size: 16px;
|
||
color: #666;
|
||
list-style: none;
|
||
margin: 5px 0;
|
||
}
|
||
|
||
/* 标题装饰线 */
|
||
.section-title .p1 {
|
||
width: 60px;
|
||
height: 2px;
|
||
background: #2563eb; /* 蓝色装饰线 */
|
||
margin: 15px auto 0;
|
||
}
|
||
|
||
/* ===========================================
|
||
响应式设计 - 媒体查询
|
||
=========================================== */
|
||
|
||
/* 大屏幕 (≥1200px) - 4列网格 */
|
||
@media (min-width: 1200px) {
|
||
.guarantee-grid {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 30px;
|
||
}
|
||
|
||
.guarantee-item {
|
||
min-height: 220px;
|
||
}
|
||
}
|
||
|
||
/* 中等屏幕 (768px - 1199px) - 3列网格 */
|
||
@media (min-width: 768px) and (max-width: 1199px) {
|
||
.guarantee-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 25px;
|
||
}
|
||
|
||
.guarantee-item {
|
||
|
||
padding: 25px 20px;
|
||
}
|
||
|
||
.guarantee-content p {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
|
||
/* 小屏幕 (≤767px) - 单列网格 */
|
||
@media (max-width: 767px) {
|
||
.guarantee-section {
|
||
margin-top: 60px;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.guarantee-container {
|
||
padding: 0 15px;
|
||
}
|
||
|
||
.guarantee-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 20px;
|
||
margin-top: 30px;
|
||
justify-content: center;
|
||
justify-items: center;
|
||
}
|
||
|
||
.guarantee-item {
|
||
|
||
padding: 20px 15px;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.guarantee-content p {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 移动端图标调整 */
|
||
.guarantee-platform,
|
||
.guarantee-security,
|
||
.guarantee-practical,
|
||
.guarantee-reliability,
|
||
.guarantee-openness,
|
||
.guarantee-standard,
|
||
.guarantee-advanced {
|
||
background-size: 100% 100%;
|
||
background-position: 0 0;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
/* 超小屏幕 (≤480px) - 进一步优化 */
|
||
@media (max-width: 480px) {
|
||
.guarantee-container {
|
||
padding: 0 10px;
|
||
}
|
||
|
||
.guarantee-item {
|
||
padding: 15px 10px;
|
||
|
||
}
|
||
|
||
.guarantee-content p {
|
||
font-size: 13px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 超小屏幕图标调整 */
|
||
.guarantee-platform,
|
||
.guarantee-security,
|
||
.guarantee-practical,
|
||
.guarantee-reliability,
|
||
.guarantee-openness,
|
||
.guarantee-standard,
|
||
.guarantee-advanced {
|
||
background-size: 100% 240px;
|
||
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|
||
|
||
|