app页面重构

app/components/softwareDevelopment/app/index.vue

@@ -109,23 +109,508 @@
 </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);
 }
-
-/* 响应式字体大小 */
-@media (max-width: 640px) {
-  .text-4xl {
-    font-size: 2rem;
-  }
-
-  .text-5xl {
-    font-size: 2.5rem;
-  }
-
-  .text-6xl {
-    font-size: 3rem;
-  }
-}
 </style>

app/pages/softwareDevelopment/app.vue

@@ -7,8 +7,8 @@ useHead({
     {rel: 'stylesheet', href: '/css/bootstrap.min.css'},
     {rel: 'stylesheet', href: '/css/main2.css'},
     {rel: 'stylesheet', href: '/css/computer_public.css'},
-    {rel: 'stylesheet', href: '/css/headORfooter.css'},
+    // {rel: 'stylesheet', href: '/css/headORfooter.css'},
-    {rel: 'stylesheet', href: '/css/mobile_App.css'},
+    // {rel: 'stylesheet', href: '/css/mobile_App.css'},
     {rel: 'stylesheet', href: '/css/yuxi2019.css'}
   ],
   script: [