app页面重构
This commit is contained in:
WindowBird
parent
9b838635c0
commit
1798927e93
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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/mobile_App.css'},
|
||||
// {rel: 'stylesheet', href: '/css/headORfooter.css'},
|
||||
// {rel: 'stylesheet', href: '/css/mobile_App.css'},
|
||||
{rel: 'stylesheet', href: '/css/yuxi2019.css'}
|
||||
],
|
||||
script: [
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user