<!--
@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>


