refactor: 专题 - 电力品线
This commit is contained in:
@@ -1,73 +1,73 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 1. 根字体适配：限制最小根字体为14px，从源头避免文字过小 */
|
||||
html {
|
||||
/* PC端（≥1024px）：1rem=16px（原尺寸） */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 平板端（768px~1023px）：15px→16px（过渡，最小15px） */
|
||||
@media (max-width: 1023px) and (min-width: 768px) {
|
||||
html {
|
||||
font-size: calc(15px + (16 - 15) * (100vw - 768px) / (1023 - 768));
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端（320px~767px）：固定14px（不随屏幕缩小而变小，避免文字<12px） */
|
||||
@media (max-width: 767px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏（≤320px）：仍固定14px，彻底杜绝文字过小 */
|
||||
@media (max-width: 320px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
body {
|
||||
background: rgb(242, 243, 245);
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.more {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: clamp(1.5rem, 3vw, 3rem);
|
||||
}
|
||||
.more-img {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
font-size: clamp(0.6rem, 0.9vw, 0.9rem);
|
||||
border-radius: clamp(0.875rem, 1.5vw, 1.125rem);
|
||||
padding: clamp(0.1rem, 0.3vw, 0.2rem);
|
||||
width: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: clamp(1.5rem, 3vw, 3rem);
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
.header-img {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 1. 根字体适配：限制最小根字体为14px，从源头避免文字过小 */
|
||||
html {
|
||||
/* PC端（≥1024px）：1rem=16px（原尺寸） */
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 平板端（768px~1023px）：15px→16px（过渡，最小15px） */
|
||||
@media (max-width: 1023px) and (min-width: 768px) {
|
||||
html {
|
||||
font-size: calc(15px + (16 - 15) * (100vw - 768px) / (1023 - 768));
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端（320px~767px）：固定14px（不随屏幕缩小而变小，避免文字<12px） */
|
||||
@media (max-width: 767px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏（≤320px）：仍固定14px，彻底杜绝文字过小 */
|
||||
@media (max-width: 320px) {
|
||||
html {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
body {
|
||||
background: rgb(242, 243, 245);
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.more {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: clamp(1.5rem, 3vw, 3rem);
|
||||
}
|
||||
.more-img {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
font-size: clamp(0.6rem, 0.9vw, 0.9rem);
|
||||
border-radius: clamp(0.875rem, 1.5vw, 1.125rem);
|
||||
padding: clamp(0.1rem, 0.3vw, 0.2rem);
|
||||
width: 5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: clamp(2.5rem, 5vw, 15rem);
|
||||
}
|
||||
.header {
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
}
|
||||
.header-img {
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@@ -1,147 +1,151 @@
|
||||
.product-box {
|
||||
background: #fff;
|
||||
padding: clamp(1.5rem, 3vw, 3rem) 0;
|
||||
/* 产品块之间留间距 */
|
||||
}
|
||||
|
||||
.product-title {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: clamp(1.5rem, 3vw, 3rem);
|
||||
}
|
||||
|
||||
.product-title-h2 {
|
||||
font-size: clamp(1.5rem, 3vw, 2.25rem);
|
||||
/* padding-top: clamp(1.5rem, 3vw, 3rem); */
|
||||
}
|
||||
|
||||
.product-title-p {
|
||||
font-size: clamp(0.875rem, 1.5vw, 1.125rem);
|
||||
color: #646464;
|
||||
margin-top: clamp(0.5rem, 1vw, 0.75rem);
|
||||
}
|
||||
|
||||
/* 容器布局：两个产品通用 */
|
||||
.product-container {
|
||||
display: flex;
|
||||
gap: clamp(0.4rem, 1vw, 0.71rem);
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* 左侧容器：两个产品通用 */
|
||||
.product-left {
|
||||
flex: 1.8;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
/* 取消图片底部空隙 */
|
||||
}
|
||||
|
||||
/* 悬浮图公共样式：两个产品尺寸完全一致（100%宽度） */
|
||||
.product-img-hover {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
/* 两个产品悬浮图宽度相同 */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.product-img-hover img {
|
||||
width: 100%;
|
||||
/* 图片尺寸100%，无区别 */
|
||||
height: auto;
|
||||
/* max-height: 70%; */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 第一个产品：悬浮图居中上移（仅定位差异） */
|
||||
.product-img-1 {
|
||||
top: -10%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 第二个产品：悬浮图上右超出（仅定位差异） */
|
||||
.product-img-2 {
|
||||
top: -10%;
|
||||
/* 上超出 */
|
||||
transform: none;
|
||||
width: 108%;
|
||||
/* 取消居中 */
|
||||
}
|
||||
|
||||
/* 右侧容器：两个产品通用 */
|
||||
.product-right {
|
||||
flex: 3.2;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.right-video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* PC端适配：仅微调定位参数，尺寸不变 */
|
||||
@media (min-width: 1024px) {
|
||||
.product-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.product-left {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.product-right {
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
/* 宽度保持一致，仅调定位偏移 */
|
||||
.product-img-1 {
|
||||
top: -11%;
|
||||
}
|
||||
|
||||
.product-img-2 {
|
||||
top: -12%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏适配：尺寸不变，微调定位 */
|
||||
@media (max-width: 375px) {
|
||||
.product-left {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
.product-right {
|
||||
flex: 3.5;
|
||||
}
|
||||
|
||||
/* 宽度仍保持一致 */
|
||||
.product-img-1 {
|
||||
top: -6%;
|
||||
}
|
||||
|
||||
.product-img-2 {
|
||||
top: -8%;
|
||||
}
|
||||
}
|
||||
.product-box {
|
||||
background: #fff;
|
||||
padding: clamp(1.5rem, 3vw, 3rem) 0;
|
||||
/* 产品块之间留间距 */
|
||||
}
|
||||
|
||||
.product-title {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
padding-bottom: clamp(1.5rem, 3vw, 3rem);
|
||||
}
|
||||
|
||||
.product-title-h2 {
|
||||
font-size: clamp(1.5rem, 3vw, 2.25rem);
|
||||
/* padding-top: clamp(1.5rem, 3vw, 3rem); */
|
||||
}
|
||||
|
||||
.product-title-p {
|
||||
font-size: clamp(0.875rem, 1.5vw, 1.125rem);
|
||||
color: #646464;
|
||||
margin-top: clamp(0.5rem, 1vw, 0.75rem);
|
||||
}
|
||||
|
||||
/* 容器布局：两个产品通用 */
|
||||
.product-container {
|
||||
display: flex;
|
||||
gap: clamp(0.4rem, 1vw, 0.71rem);
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/* 左侧容器：两个产品通用 */
|
||||
.product-left {
|
||||
flex: 1.8;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.product-img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
/* 取消图片底部空隙 */
|
||||
}
|
||||
|
||||
/* 悬浮图公共样式：两个产品尺寸完全一致（100%宽度） */
|
||||
.product-img-hover {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
/* 两个产品悬浮图宽度相同 */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.product-img-hover img {
|
||||
width: 100%;
|
||||
/*max-width: 340px;*/
|
||||
/* 图片尺寸100%，无区别 */
|
||||
height: auto;
|
||||
/* max-height: 70%; */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* 第一个产品：悬浮图居中上移（仅定位差异） */
|
||||
.product-img-1 {
|
||||
top: -10%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* 第二个产品：悬浮图上右超出（仅定位差异） */
|
||||
.product-img-2 {
|
||||
top: -10%;
|
||||
/* 上超出 */
|
||||
transform: none;
|
||||
width: 108%;
|
||||
/* 取消居中 */
|
||||
}
|
||||
|
||||
/* 右侧容器：两个产品通用 */
|
||||
.product-right {
|
||||
flex: 3.2;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background-color: #f5f5f5;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.right-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.right-video {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* PC端适配：仅微调定位参数，尺寸不变 */
|
||||
@media (min-width: 1024px) {
|
||||
.product-container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.product-left {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.product-right {
|
||||
flex: 5;
|
||||
}
|
||||
|
||||
/* 宽度保持一致，仅调定位偏移 */
|
||||
.product-img-1 {
|
||||
top: -11%;
|
||||
}
|
||||
|
||||
.product-img-2 {
|
||||
top: -12%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 超小屏适配：尺寸不变，微调定位 */
|
||||
@media (max-width: 375px) {
|
||||
.product-left {
|
||||
flex: 1.5;
|
||||
}
|
||||
|
||||
.product-right {
|
||||
flex: 3.5;
|
||||
}
|
||||
|
||||
/* 宽度仍保持一致 */
|
||||
.product-img-1 {
|
||||
top: -6%;
|
||||
}
|
||||
|
||||
.product-img-2 {
|
||||
top: -8%;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
public/static/index/pc/images/jiant.png
Normal file
BIN
public/static/index/pc/images/jiant.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
BIN
public/static/index/pc/images/ljgd.png
Normal file
BIN
public/static/index/pc/images/ljgd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Reference in New Issue
Block a user