ct/app/components/softwareDevelopment/app/index.vue

<script lang="ts" setup>
// 组件不需要加载资源，由页面统一管理
</script>

<template>

  <view>


    <div class="total">
      <!-- ********************************* -->
      <div class="indexContent">
        <div class="banner">
          <div class="banner-txt middle">
            <h1 class="txt txt1">创特App开发事业部</h1>
            <h2 class="txt txt2">帮助企业快速实现移动化</h2>
          </div>
        </div>
        <!--  -->
        <div class="content1">
          <div class="content1_next middle">
            <div class="title">APP开发的核心价值</div>
            <div class="content1_center">
              <ul class="clearfix">
                <li><span class="oImg oImg1"/>
                  <h2>成熟的应用框架</h2>
                  <p>丰富的应用模板，1000+移动应用开发，14款工具打造完整工作流，轻松完成复杂的业务应用</p>
                </li>
                <li><span class="oImg oImg2"/>
                  <h2>全场景的移动技术</h2>
                  <p>
                    全球最大的HTML5移动技术与服务提供商，从内容制作到上线发布，从商业实践到运营分析，实现完整的生态链支持和服务</p>
                </li>
                <li><span class="oImg oImg3"/>
                  <h2>一次开发，多端适配</h2>
                  <p>涵盖企业web app、独立app、微信服务号、微信企业号、其他轻应用，一次开发多端运行</p>
                </li>
                <li><span class="oImg oImg4"/>
                  <h2>极致的应用体验</h2>
                  <p>媲美游戏的炫酷界面，性能极致优化，操控顺畅流利，响应式设计，多屏完美自适应</p>
                </li>
                <li><span class="oImg oImg5"/>
                  <h2>一站式移动办公门户</h2>
                  <p>
                    单点登录，任务推送，业务处理和流程协作的多业务协同和应用集成环境，个性化定制，无需改变用户原有使用习惯</p>
                </li>
                <li><span class="oImg oImg6"/>
                  <h2>强大的工作流</h2>
                  <p>支持多业务整合集成，全面的流程定义和扩展，多实例和流程模型让开发快捷高效</p>
                </li>
                <li><span class="oImg oImg7"/>
                  <h2>海量扩展资源</h2>
                  <p>门户主题、风格样式、UI组件、后端服务组件、模板、多语言均可任意引入和定制扩展</p>
                </li>
                <li><span class="oImg oImg8"/>
                  <h2>主流技术标准</h2>
                  <p>支持云端一体开发部署，HTML5国际技术标准，主流可靠，更可扩展业务逻辑和规则</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--  -->
        <div class="content2 bg-gray">
          <div class="content2_next middle">
            <img alt="" src="/img/img/banner_b.png">
          </div>
        </div>
        <!--  -->
        <div class="content3 bg-white">
          <div class="content3_next middle">
            <div class="title">我们能为企业快速实现APP的</div>
            <img alt="" src="/img/img/iocn1.png">
            <ul>
              <li>战略咨询</li>
              <li>定制开发</li>
              <li>运维服务</li>
              <li>运营分发</li>
              <li>商业分析</li>
              <li>管理后台</li>
            </ul>
          </div>
        </div>
        <!--  -->
        <div class="content4">
          <div class="content4_next middle">
            <img alt="" src="/img/img/banner_d.png">
          </div>
        </div>
        <!--  -->
        <div class="content5 bg-white">
          <div class="content5_next middle">
            <h2>简化IT，连接一切</h2>
            <img alt="简化IT，连接一切" src="/img/img/iocn2.png">
            <ul>
              <li>1000+移动应用开发</li>
              <li>服务于300+企业</li>
              <li>40+移动战略合作伙伴</li>
              <li>TOP100开发合作商</li>
            </ul>
          </div>
        </div>
      </div>
      <!-- <div class="footer">
      <iframe src="gwFooter.html" width="100%" height="340" scrolling="no" style="border:0; min-width: 1210px;"></iframe>
      </div> -->
    </div>
  </view>
</template>

<style scoped>
/* ===== 基础样式 ===== */
.clearfix:after {
  content: "\200B";
  display: block;
  height: 0;
  clear: both;
}


.fl {
  float: left;
}

.fr {
  float: right;
}

h1, h2, h3, h4, h5, h6, strong {
  font-weight: normal;
}

.bg-gray {
  background-color: #313435;
}

.bg-white {
  background-color: #fff;
}

/* ===== 主容器 ===== */
.total {
  width: 100%;
  min-width: 1200px; /* PC端最小宽度 */
}

/* ===== 内容容器 ===== */
.indexContent {
  width: 100%;
}

/* ===== 横幅区域 ===== */
.banner {
  max-width: 1920px;
  height: 680px; /* PC端高度 */
  background: url('/img/img/banner_a.jpg') 50% 50%;
  background-size: cover;
  min-width: 1200px;
}

.middle {
  width: 1200px; /* PC端固定宽度 */
  margin: 0 auto;
}

.banner-txt {
  position: relative;
  top: 90px;
}

.banner-txt .txt {
  font-size: 50px; /* PC端字体 */
}

.banner-txt .txt1 {
  padding-top: 210px;
  color: #95c1ff;
}

.banner-txt .txt2 {
  color: #ffffff;
}

/* ===== 核心价值区域 ===== */
.content1_next {
  padding-top: 36px;
  padding-bottom: 70px;
}

.content1_next .title {
  height: 114px;
  line-height: 114px;
  text-align: center;
  font-size: 36px; /* PC端标题 */
  color: #282828;
  border-bottom: 1px solid #282828;
}

.content1_center li {
  width: 300px; /* PC端固定宽度 */
  height: 300px;
  float: left;
  padding-top: 54px;
}

.content1_center h2 {
  padding-top: 40px;
  padding-bottom: 20px;
  font-size: 24px; /* PC端副标题 */
  color: #1b1b1b;
  text-align: center;
}

.content1_center p {
  font-size: 16px; /* PC端正文 */
  line-height: 28px;
  color: #8c8c8c;
  padding: 0 4%;
}

/* ===== 图标样式 ===== */
.oImg {
  display: block;
  width: 100px; /* PC端图标 */
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  background: url('/img/img/iocn.png');
}

.oImg1 {
  background-position: 0 0;
}

.oImg2 {
  background-position: -105px 0;
}

.oImg3 {
  background-position: -210px 0;
}

.oImg4 {
  background-position: -315px 0;
}

.oImg5 {
  background-position: -420px 0;
}

.oImg6 {
  background-position: -525px 0;
}

.oImg7 {
  background-position: -630px 0;
}

.oImg8 {
  background-position: -735px 0;
}

/* ===== 其他内容区域 ===== */
.content2 {
  height: 492px;
}

.content2_next img {
  position: relative;
  top: -54px;
  width: 1200px; /* PC端固定宽度 */
  height: 682px;
}

.content3 {
  height: 500px;
}

.content3_next .title {
  font-size: 36px; /* PC端标题 */
  color: #282828;
  padding-top: 144px;
  text-align: center;
}

.content3_next img {
  display: block;

  height: 72px;
  margin: 0 auto;

}

.content3_next li {
  float: left;
  padding-top: 10px;
  width: 200px; /* PC端固定宽度 */
  text-align: center;
}

.content4 {
  max-width: 1920px;
  height: 400px;
  background: url('/img/img/banner_c.jpg') 50% 50%;
  background-size: cover;
}

.content4_next img {
  display: block;
  margin: 0 auto;
  width: 1044px; /* PC端固定宽度 */
  height: 217px;
  padding-top: 94px;
}

.content5 {
  height: 428px;
}

.content5_next h2 {
  padding-top: 90px;
  padding-bottom: 60px;
  font-size: 36px; /* PC端标题 */
  color: #282828;
  text-align: center;
}

.content5_next img {
  display: block;
  width: 1076px; /* PC端固定宽度 */
  height: 130px;
  margin: 0 auto;
}

.content5_next li {
  width: 300px; /* PC端固定宽度 */
  float: left;
  padding-top: 16px;
  text-align: center;
  font-size: 18px; /* PC端字体 */
  color: #414141;
}

/* ===== 响应式设计 ===== */

/* 中等屏幕 (≤1199px) */
@media (max-width: 1199px) {
  .total {
    min-width: auto; /* 移除最小宽度限制 */
  }

  .banner {
    height: 500px; /* 中等屏幕高度 */
    min-width: auto;
  }

  .middle {
    width: 90%; /* 响应式宽度 */
    max-width: 900px;
  }

  .banner-txt .txt {
    font-size: 40px; /* 中等屏幕字体 */
  }

  .banner-txt .txt1 {
    padding-top: 150px;
  }

  .content1_next .title {
    font-size: 30px; /* 中等屏幕标题 */
  }

  .content1_center li {
    width: 45%; /* 2列布局 */
    margin: 0 2.5%;
    margin-bottom: 30px;
  }

  .content1_center h2 {
    font-size: 20px; /* 中等屏幕副标题 */
  }

  .content1_center p {
    font-size: 14px; /* 中等屏幕正文 */
  }


  .content2_next img {
    width: 100%;
    height: auto;

  }

  .content3_next .title {
    font-size: 30px; /* 中等屏幕标题 */
  }

  .content3_next img {
    width: 100%;

  }

  .content3_next li {
    width: 16.6%; /* 3列布局 */

  }

  .content4_next img {
    width: 100%;
    max-width: 800px;
    height: auto;
  }

  .content5_next h2 {
    font-size: 30px; /* 中等屏幕标题 */
  }

  .content5_next img {
    width: 100%;
    max-width: 800px;
  }

  .content5_next li {
    width: 45%; /* 2列布局 */
    margin: 0 2.5%;
    margin-bottom: 20px;
  }
}

/* 平板端 (≤768px) */
@media (max-width: 768px) {
  .banner {
    height: 400px; /* 平板端高度 */
  }

  .banner-txt .txt {
    font-size: 32px; /* 平板端字体 */
  }

  .banner-txt .txt1 {
    padding-top: 120px;
  }

  .middle {
    width: 95%;
    padding: 0 15px;
  }

  .content1_next .title {
    font-size: 26px; /* 平板端标题 */
    height: auto;
    line-height: 1.4;
    padding: 20px 0;
  }

  .content1_center li {
    width: 100%; /* 单列布局 */
    margin: 0 0 30px 0;
    height: auto;
    padding: 20px;
  }

  .content1_center h2 {
    font-size: 18px; /* 平板端副标题 */
  }

  .content1_center p {
    font-size: 14px; /* 平板端正文 */
  }


  .content2 {
    height: auto;
    padding: 40px 0;
  }

  .content2_next img {
    position: static;
    width: 100%;
    height: auto;
  }

  .content3 {
    height: auto;
    padding: 40px 0;
  }

  .content3_next .title {
    font-size: 26px; /* 平板端标题 */
    padding-top: 40px;
  }

  .content3_next img {
    width: 100%;
    height: auto;
    padding-top: 40px;
  }

  .content3_next li {

    margin: 10px 0;
    padding: 10px 0;
  }

  .content4 {
    height: 300px;
  }

  .content4_next img {
    width: 100%;
    height: auto;
    padding-top: 50px;
  }

  .content5 {
    height: auto;
    padding: 40px 0;
  }

  .content5_next h2 {
    font-size: 26px; /* 平板端标题 */
    padding-top: 40px;
  }

  .content5_next img {
    width: 100%;
    height: auto;
  }

  .content5_next li {
    width: 100%; /* 单列布局 */
    margin: 10px 0;
    padding: 10px 0;
    font-size: 16px; /* 平板端字体 */
  }
}

/* 手机端 (≤480px) */
@media (max-width: 480px) {
  .banner {
    height: 300px; /* 手机端高度 */
  }

  .banner-txt .txt {
    font-size: 24px; /* 手机端字体 */
  }

  .banner-txt .txt1 {
    padding-top: 80px;
  }

  .middle {
    width: 100%;
    padding: 0 10px;
  }

  .content1_next .title {
    font-size: 22px; /* 手机端标题 */
    padding: 15px 0;
  }

  .content1_center li {
    padding: 15px;
    margin-bottom: 20px;
  }

  .content1_center h2 {
    font-size: 16px; /* 手机端副标题 */
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .content1_center p {
    font-size: 13px; /* 手机端正文 */
    line-height: 1.5;
  }


  .content2 {
    padding: 20px 0;
  }

  .content3_next .title {
    font-size: 22px; /* 手机端标题 */
    padding-top: 20px;
  }

  .content3_next img {
    padding-top: 20px;
  }

  .content4 {
    height: 250px;
  }

  .content4_next img {
    padding-top: 30px;
  }

  .content5_next h2 {
    font-size: 22px; /* 手机端标题 */
    padding-top: 20px;
    padding-bottom: 30px;
  }

  .content5_next li {
    font-size: 14px; /* 手机端字体 */
  }
}

/* ===== 自定义动画效果 ===== */
.hover\:shadow-lg:hover {
  transform: translateY(-2px);
}
</style>