bike页面更改2

public/cssBike/index.css

@@ -879,4 +879,271 @@
     color: #70849D;
     margin-top: 20px;
     display: inline-block;
+}
+
+/* 响应式媒体查询 */
+@media (max-width: 1199px) {
+    /* 首屏巨幕响应式 */
+    .index-giant-cont h1 {
+        font-size: 3.2rem;
+    }
+
+    /* 解决方案区域响应式 */
+    .index-solut {
+        padding-top: 80px;
+        height: auto;
+    }
+
+    .solut-detail {
+        height: auto;
+        padding: 40px 0 80px;
+    }
+
+    .solut-detail ul {
+        top: 0;
+        display: block;
+    }
+
+    .solut-detail ul li {
+        margin: 10px 20px;
+    }
+
+    /* APP介绍区域响应式 */
+    #picbtns {
+        width: 90%;
+    }
+
+    #picbtns .caption {
+        width: 45%;
+        margin: 0 2.5%;
+        float: left;
+    }
+
+    /* 收益区域响应式 */
+    .index-profit ul {
+        width: 90%;
+    }
+
+    .index-profit ul li {
+        margin: 20px 2%;
+        width: 28%;
+    }
+
+    /* 应用场景响应式 */
+    .use-scene ul {
+        width: 90%;
+    }
+
+    .use-scene ul li {
+        width: 48%;
+        margin: 0 1%;
+        height: 420px;
+    }
+
+    /* 锁页面响应式 */
+    .page-conter {
+        width: 95%;
+        margin: 60px auto 100px auto;
+    }
+
+    .car-lock {
+        width: 95%;
+    }
+
+    .car-lock-left {
+        width: 100%;
+        text-align: center;
+    }
+
+    .lock-descript {
+        width: 95%;
+    }
+
+    .h-cont ul li {
+        width: 49%;
+        margin-bottom: 20px;
+    }
+
+    /* 案例页面响应式 */
+    .giant-cont {
+        width: 90%;
+    }
+
+    .location {
+        width: 95%;
+    }
+
+    .location-cont ul li {
+        width: 100%;
+        margin: 10px 0;
+        border: none;
+        border-bottom: 1px solid #E4E8EC;
+    }
+
+    .location-cont ul li.li-border {
+        border-right: none;
+        border-left: none;
+    }
+}
+
+@media (max-width: 768px) {
+    /* 首屏巨幕移动端 */
+    .index-giant-cont {
+        margin-top: 25%;
+    }
+
+    .index-giant-cont h1 {
+        font-size: 2.4rem;
+        white-space: normal;
+        padding: 0 16px;
+    }
+
+    /* 解决方案移动端 */
+    .index-solut h2 {
+        font-size: 2.2rem;
+    }
+
+    .index-solut p {
+        font-size: 1rem;
+        margin: 12px auto 24px;
+        padding: 0 16px;
+    }
+
+    .index-solut ul {
+        width: 240px;
+    }
+
+    .solut-detail ul li {
+        width: 80px;
+        height: 90px;
+        margin: 8px 12px;
+    }
+
+    /* APP介绍移动端 */
+    #picbtns {
+        width: 100%;
+    }
+
+    #picbtns .caption {
+        width: 90%;
+        margin: 0 auto 20px;
+        float: none;
+    }
+
+    /* 收益区域移动端 */
+    .index-profit {
+        height: auto;
+        padding-bottom: 40px;
+    }
+
+    .index-profit ul {
+        width: 92%;
+    }
+
+    .index-profit ul li {
+        width: 100%;
+        height: auto;
+        margin: 16px 0;
+        background-size: contain;
+    }
+
+    .index-profit ul li h2 {
+        position: static;
+        margin-top: 8px;
+    }
+
+    /* 应用场景移动端 */
+    .use-scene {
+        height: auto;
+        padding-bottom: 40px;
+    }
+
+    .use-scene ul {
+        width: 92%;
+    }
+
+    .use-scene ul li {
+        width: 100%;
+        height: 380px;
+        margin-bottom: 16px;
+    }
+
+    /* 侧边栏移动端隐藏 */
+    .left-bar {
+        display: none;
+    }
+
+    /* 锁页面移动端 */
+    .car-lock-left h2 {
+        font-size: 3.5rem;
+    }
+
+    .h-cont ul li {
+        width: 100%;
+        margin-bottom: 15px;
+    }
+
+    /* 案例页面移动端 */
+    .giant-cont h2 {
+        font-size: 4rem;
+    }
+
+    .location-cont ul li {
+        height: auto;
+        padding: 20px 0;
+    }
+
+    /* 导航栏移动端 */
+    .top-nav-cent {
+        width: 95%;
+    }
+
+    .top-nav-cent ul {
+        display: none; /* 可以添加移动端菜单 */
+    }
+}
+
+@media (max-width: 480px) {
+    /* 超小屏幕优化 */
+    .index-giant-cont h1 {
+        font-size: 2rem;
+    }
+
+    .index-solut h2 {
+        font-size: 1.8rem;
+    }
+
+    .app-introd-top h2 {
+        font-size: 2.2rem;
+    }
+
+    .index-profit h2 {
+        font-size: 2.2rem;
+    }
+
+    .use-scene-tit h2 {
+        font-size: 2.2rem;
+    }
+
+    .car-lock-left h2 {
+        font-size: 2.8rem;
+    }
+
+    .giant-cont h2 {
+        font-size: 3rem;
+    }
+
+    .index-giant-cont button {
+        width: 200px;
+        height: 45px;
+        font-size: 1.6rem;
+    }
+
+    .giant-cont button {
+        width: 180px;
+        height: 35px;
+        font-size: 1rem;
+    }
+
+
 }