丰潇网站完成
This commit is contained in:
225
fengxiao/css/aboutUs.css
Normal file
225
fengxiao/css/aboutUs.css
Normal file
@@ -0,0 +1,225 @@
|
||||
* ,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* box-sizing: border-box; */
|
||||
}
|
||||
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
/* background: linear-gradient(to bottom, #3A8DFF 0%, #AEE6FF 60%, #F1F1F1 100%),
|
||||
url(../imgs/support/bg.png); */
|
||||
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#3478FD 0%,
|
||||
#BED0F4 80%,
|
||||
#f1f1f1 100%
|
||||
);
|
||||
|
||||
/* background: url(../imgs/support/bg.png) no-repeat bottom; */
|
||||
background-size: 100% 80%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: top, center;
|
||||
box-sizing: border-box;
|
||||
background-blend-mode: multiply;
|
||||
margin-top: 12vh;
|
||||
}
|
||||
|
||||
.banner-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../imgs/about/bg.svg);
|
||||
background-size: 120vw auto;
|
||||
background-position: 60% -8vw;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner-content-text{
|
||||
width: 40%;
|
||||
height: 60%;
|
||||
position: absolute;
|
||||
top: 10vw;
|
||||
left: 30vw;
|
||||
|
||||
}
|
||||
|
||||
.banner-content-text p:nth-child(1){
|
||||
font-size: 5vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.banner-content-text p:nth-child(2){
|
||||
font-size: 5vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.banner-content-text p:nth-child(3){
|
||||
font-size: 1.6vw;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-weight: 400;
|
||||
letter-spacing: 0.1vw;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
|
||||
.banner-content-text a{
|
||||
display: inline-block;
|
||||
width: 9vw;
|
||||
height: 2.3vw;
|
||||
background: #fff;
|
||||
border-radius: 1vw;
|
||||
background: #3478FD;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 3vh;
|
||||
margin-left: 13vw;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.banner-content-text a span{
|
||||
font-size: 0.9vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.banner-content-text a img{
|
||||
width: 1.2vw;
|
||||
height: 1.2vw;
|
||||
margin-left: 1vw;
|
||||
}
|
||||
|
||||
.banner-content-text a:hover{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
/* ---------------------------- */
|
||||
.aboutUs-content{
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#f1f1f1 0%,
|
||||
#f1f1f1 100%
|
||||
);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.aboutUs-content-text{
|
||||
width: 80%;
|
||||
height: 100%;
|
||||
|
||||
margin: 0 auto;
|
||||
background: url(../imgs/about/adout1.png) ,url(../imgs/about/adout2.png);
|
||||
background-size: 25vw auto,25vw auto;
|
||||
background-position: 0 0,100% 0;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
padding-top: 18vh;
|
||||
position: relative;
|
||||
top: -10vw;
|
||||
left: 2vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.aboutUs-content-text .text{
|
||||
width: 42%;
|
||||
height: 80%;
|
||||
background:#fff;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 1.05vw;
|
||||
padding: 2.5vw;
|
||||
font-size: 1vw;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
line-height: 4.2vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: justify;
|
||||
}
|
||||
/* ----------------- */
|
||||
.aboutUs-team{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#f1f1f1 0%,
|
||||
#D8E8F4 100%
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.banner-content-list {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background-color: #f1f1f1; */
|
||||
position: relative;
|
||||
background-image: url(../imgs/about/bg2.svg);
|
||||
background-size: 99% 80%;
|
||||
background-position: 100% 18vw;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.banner-content-list h2{
|
||||
font-size: 3vw;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
text-underline-offset: 0.8vw;
|
||||
text-decoration-thickness: 1px;
|
||||
}
|
||||
|
||||
.content-listBOX{
|
||||
width: 80%;
|
||||
height: 70%;
|
||||
/* background: palegoldenrod; */
|
||||
margin-top: 4vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-listBOX-item{
|
||||
width: 23vw;
|
||||
height: 73%;
|
||||
/* background: palegoldenrod; */
|
||||
list-style: none;
|
||||
border-radius: 1vw;
|
||||
box-shadow: 8px 5px 10px 5px rgba(0,0,0,0.1);
|
||||
background: #fff;
|
||||
padding: 1vw;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-listBOX-item img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-listBOX-item h3{
|
||||
font-size: 1vw;
|
||||
/* font-weight: 500; */
|
||||
margin-top: 4vh;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
|
||||
393
fengxiao/css/aimodel.css
Normal file
393
fengxiao/css/aimodel.css
Normal file
@@ -0,0 +1,393 @@
|
||||
body,*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 160vh;
|
||||
box-sizing: border-box;
|
||||
padding-top: 12vh;
|
||||
background: linear-gradient(to bottom, rgba(241, 241, 241, 1) 12vh,#C0E0F5 90vh, #C0E0F5 100%);
|
||||
/* background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%,#C0E0F5 50%, #C0E0F5 100%); */
|
||||
|
||||
}
|
||||
|
||||
|
||||
.banner-top{
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
background-image: url(../imgs/model/bg.png);
|
||||
background-size: 36vw auto;
|
||||
background-position: 89% 0vw;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
}
|
||||
.banner-top-content{
|
||||
box-sizing: border-box;
|
||||
width: 40%;
|
||||
height: 60%;
|
||||
margin-left: 15vw;
|
||||
color: #1A2B3D;
|
||||
font-weight: 400;
|
||||
padding-top: 5vw;
|
||||
}
|
||||
.banner-top-content p:nth-child(1){
|
||||
font-size: 4.5vw;
|
||||
margin: 0;
|
||||
|
||||
|
||||
}
|
||||
.banner-top-content p:nth-child(2){
|
||||
font-size: 4.5vw;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
.banner-top-content p:nth-child(3){
|
||||
font-size: 0.95vw;
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
width: 78%;
|
||||
margin-top: 1vh;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.banner-bottom {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* background: #f5f9fc; */
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
/* height: 400px; */
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-track {
|
||||
display: flex;
|
||||
transition: transform 0.8s cubic-bezier(0.16, 0.77, 0.58, 0.97);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
width: 28vw;
|
||||
height: 55vh !important;
|
||||
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
margin: 0 20px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
/* 确保中间图片完全清晰的关键修改 */
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
object-fit: cover;
|
||||
border-radius: 20px 20px 0 0;
|
||||
/* 明确设置无滤镜 */
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
/* 仅对两侧卡片应用模糊效果 */
|
||||
.carousel-item.left-side img,
|
||||
.carousel-item.right-side img {
|
||||
filter: blur(2px) brightness(0.9);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 中间卡片保持原始状态 */
|
||||
.carousel-item.center {
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||||
/* 确保不继承任何模糊效果 */
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #444444;
|
||||
font-weight: 500;
|
||||
background: #fff;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
/* 渐变遮罩 */
|
||||
.carousel-fade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 28vw;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.carousel-fade.left {
|
||||
width: 50vw;
|
||||
left: 0;
|
||||
background: linear-gradient(to right, #C0E0F5 0%, #C0E0F5 10%, rgba(207, 231, 246, 0) 80%);
|
||||
}
|
||||
|
||||
.carousel-fade.right {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, rgba(194, 225, 245, 1) 0%, rgba(245, 249, 252, 0) 80%);
|
||||
}
|
||||
|
||||
/* 指示点放在盒子外部 */
|
||||
.carousel-dots {
|
||||
position: absolute;
|
||||
left: 56%;
|
||||
bottom: -40px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 8;
|
||||
/* background: red; */
|
||||
}
|
||||
|
||||
.carousel-dots .dot {
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
border-radius: 50%;
|
||||
background:#fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.carousel-dots .dot.active {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* --------------场景需求分析--------------------- */
|
||||
.website-design-content{
|
||||
width: 100%;
|
||||
height: 370vh;
|
||||
background-color: #f1f1f1;
|
||||
background-image: url(../imgs/home/bg1.svg);
|
||||
background-size: 100% auto;
|
||||
background-position: 89% 106%;
|
||||
background-repeat: no-repeat;
|
||||
padding-top: 25vh;
|
||||
}
|
||||
.list-item{
|
||||
width: 80%;
|
||||
height: 50vh;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/* background: palegoldenrod; */
|
||||
|
||||
}
|
||||
|
||||
.list-item img{
|
||||
width: 35vw;
|
||||
height:auto;
|
||||
}
|
||||
.list-item div{
|
||||
width: 40vw;
|
||||
height:auto;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
.list-item div h3{
|
||||
font-size: 1.8vw;
|
||||
font-weight: 600;
|
||||
color: #1B2A3D;
|
||||
}
|
||||
.list-item div p{
|
||||
width: 80%;
|
||||
font-size: 1vw;
|
||||
color: #666;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.right-arrow{
|
||||
width: 95%;
|
||||
/* height: 30vh; */
|
||||
text-align: center;
|
||||
/* background: palegoldenrod; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.right-arrow img{
|
||||
width: 18vw;
|
||||
height: auto;
|
||||
}
|
||||
.left-arrow {
|
||||
width: 20vw; /* 根据实际需要设置 */
|
||||
height: auto;
|
||||
transform: scaleX(-1); /* 或 rotate(180deg) */
|
||||
}
|
||||
/* ------------------服务能力--------------------- */
|
||||
.serviceProcess{
|
||||
width: 100%;
|
||||
height: 150vh;
|
||||
background: linear-gradient(to bottom, #397FF9 0%,#397FF9 50%, #5CB1E5 100%);
|
||||
padding-top: 10vh;
|
||||
|
||||
}
|
||||
.serviceProcess h3{
|
||||
width: 100%;
|
||||
font-size: 3vw;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.serviceProcess p{
|
||||
width: 100%;
|
||||
font-size: 0.9vw;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-align: center;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.process-list{
|
||||
width: 90%;
|
||||
height: 100vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 3vh;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.process-item{
|
||||
width: 24vw;
|
||||
height: 53vh;
|
||||
background: #fff;
|
||||
list-style: none;
|
||||
margin-left: 3vw;
|
||||
border-radius: 18px;
|
||||
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
padding: 2vw;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-top: 8vh;
|
||||
}
|
||||
.process-item img{
|
||||
width:auto;
|
||||
height: 10vh;
|
||||
margin-top: 2vh;
|
||||
}
|
||||
.process-item h3{
|
||||
font-size: 1.1vw;
|
||||
color: #1B2A3D;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
.process-item h3 span{
|
||||
|
||||
font-weight: 600;
|
||||
color: #1B2A3D;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.process-item p{
|
||||
margin: 0 auto;
|
||||
width: 90%;
|
||||
font-size: 0.95vw;
|
||||
color: #666;
|
||||
margin-top: 3vh;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
.processBth{
|
||||
width: 100%;
|
||||
/* height: 8vh; */
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.processBth a{
|
||||
display: inline-block;
|
||||
width: 9vw;
|
||||
height: 2.3vw;
|
||||
background: #fff;
|
||||
border-radius: 1vw;
|
||||
background: #3478FD;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.processBth a span{
|
||||
font-size: 0.8vw;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.processBth a img{
|
||||
width: 1vw;
|
||||
height:auto;
|
||||
margin: 0;
|
||||
margin-left: 0.5vw;
|
||||
}
|
||||
|
||||
.processBth a:hover{
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* ---------------- */
|
||||
|
||||
.serviceBox{
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.serviceBox-content{
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.serviceBox-content img{
|
||||
|
||||
width: 16vw;
|
||||
height: auto;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -2,16 +2,22 @@
|
||||
width: 100%;
|
||||
height: 60vh;
|
||||
background: #1A2B3B;
|
||||
background-image: url(../imgs/home/footerbg.png);
|
||||
background-size: auto 100%;
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.footer-list{
|
||||
width: 90%;
|
||||
height: 95%;
|
||||
height: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
/* margin: 0 auto; */
|
||||
/* background: palegoldenrod; */
|
||||
}
|
||||
|
||||
.footer-list-item{
|
||||
@@ -49,6 +55,7 @@
|
||||
padding-left: 5vw;
|
||||
}
|
||||
|
||||
|
||||
.item-nav p:nth-of-type(1){
|
||||
font-size: 1.5vw;
|
||||
font-weight: 400;
|
||||
@@ -56,6 +63,18 @@
|
||||
|
||||
}
|
||||
|
||||
.item-nav p:nth-of-type(2) {
|
||||
font-size: 0.8vw;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
}
|
||||
|
||||
.item-nav p:nth-of-type(3) {
|
||||
font-size: 0.8vw;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
}
|
||||
|
||||
.item-nav p:nth-of-type(2) a{
|
||||
font-size: 0.8vw;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
@@ -74,7 +93,32 @@
|
||||
color: #4885FD;
|
||||
}
|
||||
|
||||
.item-nav p img{
|
||||
width: 1vw;
|
||||
height: auto;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
|
||||
|
||||
/* .footer-list-item img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
} */
|
||||
.footer-bottom{
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
padding: 0vw 3vw;
|
||||
text-align: right;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 0.8vw;
|
||||
box-sizing: border-box;
|
||||
height: 4vh;
|
||||
}
|
||||
|
||||
.footer-bottom .record{
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.footer-bottom .record:hover{
|
||||
color: #00A0D2;
|
||||
}
|
||||
@@ -5,13 +5,14 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
/* background: #fff; */
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
background-color: rgba(241, 241, 241, 0.5);
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition: background 0.3s;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -75,6 +76,7 @@
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* .nav-item a.active::before {
|
||||
content: '';
|
||||
width: 100%;
|
||||
@@ -153,7 +155,7 @@
|
||||
|
||||
border-top: 5px solid #3478FD;
|
||||
}
|
||||
.nav-dropdown a:hover .arrow{
|
||||
.nav-dropdown a:hover .arrow,.nav-item a.active .arrow{
|
||||
border-top: 5px solid #3478FD;
|
||||
}
|
||||
|
||||
@@ -282,23 +284,39 @@
|
||||
}
|
||||
|
||||
|
||||
.menu-active .dropdown-item {
|
||||
background: transparent;
|
||||
border: 1px solid #00a0d1
|
||||
|
||||
|
||||
|
||||
|
||||
/* 让 menu-active 和 hover 效果一致 */
|
||||
.dropdown-menu li a.menu-active,
|
||||
.dropdown-menu li a:hover {
|
||||
background: #f2f8fa;
|
||||
color: #3478FD;
|
||||
}
|
||||
|
||||
.menu-active .dropdown-item img {
|
||||
/* 图标边框和滤镜一致 */
|
||||
.dropdown-menu li a.menu-active .dropdown-item,
|
||||
.dropdown-menu li a:hover .dropdown-item {
|
||||
|
||||
display: inline-block;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
vertical-align: middle;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid #3478FD;
|
||||
transition: transform 0.2s;
|
||||
transition: all 0.2s;
|
||||
/* transform: scale(1.1); */
|
||||
}
|
||||
|
||||
.dropdown-menu li a.menu-active .dropdown-item img,
|
||||
.dropdown-menu li a:hover .dropdown-item img {
|
||||
filter: brightness(0) saturate(100%) invert(41%) sepia(99%) saturate(749%) hue-rotate(162deg) brightness(97%) contrast(101%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dropdown-menu li a.menu-active {
|
||||
background: #f2f8fa;
|
||||
color: #007a9e;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -5,6 +5,13 @@ body{
|
||||
padding-top: 12vh;
|
||||
}
|
||||
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.banner{
|
||||
width: 88%;
|
||||
height: 85vh;
|
||||
@@ -126,7 +133,7 @@ body{
|
||||
.right-button-top{
|
||||
position: absolute;
|
||||
height: 2.5vh;
|
||||
top: 11vw;
|
||||
top: 24vh;
|
||||
right: 4vw;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -404,12 +411,16 @@ body{
|
||||
|
||||
.list-item-imgBox{
|
||||
width: 15vw;
|
||||
|
||||
/* background: palegoldenrod; */
|
||||
height: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
}
|
||||
|
||||
.list-item-imgBox img{
|
||||
width: 90%;
|
||||
height: auto;
|
||||
width:auto;
|
||||
height: 80%;
|
||||
|
||||
}
|
||||
|
||||
@@ -475,7 +486,7 @@ body{
|
||||
|
||||
.advantage-content h2{
|
||||
width: 100%;
|
||||
height: 8vh;
|
||||
|
||||
font-size: 5vw;
|
||||
font-weight: 500;
|
||||
color: #1A2B3D;
|
||||
@@ -529,6 +540,11 @@ body{
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.advantage-list-item-img img{
|
||||
width: 16vw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
263
fengxiao/css/technicalSupport.css
Normal file
263
fengxiao/css/technicalSupport.css
Normal file
@@ -0,0 +1,263 @@
|
||||
* ,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* box-sizing: border-box; */
|
||||
}
|
||||
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
/* background: linear-gradient(to bottom, #3A8DFF 0%, #AEE6FF 60%, #F1F1F1 100%),
|
||||
url(../imgs/support/bg.png); */
|
||||
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#3478FD 0%,
|
||||
#BED0F4 88%,
|
||||
#f1f1f1 100%
|
||||
);
|
||||
|
||||
/* background: url(../imgs/support/bg.png) no-repeat bottom; */
|
||||
background-size: 100% 80%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: top, center;
|
||||
box-sizing: border-box;
|
||||
background-blend-mode: multiply;
|
||||
margin-top: 12vh;
|
||||
}
|
||||
|
||||
.banner-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(../imgs/support/bg.png);
|
||||
background-size: 112% 72%;
|
||||
background-position: 76% 123%;
|
||||
background-repeat: no-repeat;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.banner-content-text{
|
||||
position: absolute;
|
||||
top: 8vw;
|
||||
left: 33vw;
|
||||
width: 30%;
|
||||
height: 50%;
|
||||
/* background: palegoldenrod; */
|
||||
|
||||
}
|
||||
|
||||
.banner-content-text p:nth-child(1){
|
||||
font-size: 5vw;
|
||||
font-weight: 300;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.banner-content-text p:nth-child(2){
|
||||
font-size: 1.25vw;
|
||||
margin-top: 2vh;
|
||||
color: rgba(0,0,0,0.6);
|
||||
line-height: 5vh;
|
||||
font-weight: 450;
|
||||
/* color: #fff; */
|
||||
|
||||
}
|
||||
|
||||
.banner-content-list {
|
||||
width: 100%;
|
||||
height: 90vh;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#f1f1f1 0%,
|
||||
#C0E1F5 100%
|
||||
);
|
||||
position: relative;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.banner-content-list h2{
|
||||
font-size: 2.5vw;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.5vw;
|
||||
text-decoration-thickness: 0.1vw;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.content-listBOX{
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
/* background: palegoldenrod; */
|
||||
margin-top: 5vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-listBOX-item{
|
||||
width: 23vw;
|
||||
height: 80%;
|
||||
/* background: palegoldenrod; */
|
||||
list-style: none;
|
||||
border-radius: 1vw;
|
||||
box-shadow: 8px 5px 10px 5px rgba(0,0,0,0.1);
|
||||
background: #fff;
|
||||
padding: 2vw;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content-listBOX-item img{
|
||||
width: 10vw;
|
||||
height: 8vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-listBOX-item h3{
|
||||
font-size: 1.5vw;
|
||||
font-weight: 500;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
.content-listBOX-item p{
|
||||
font-size: 0.85vw;
|
||||
font-weight: 400;
|
||||
width: 80%;
|
||||
text-align: justify;
|
||||
margin: 0 auto;
|
||||
margin-top: 2vh;
|
||||
color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ---------------大模型训练-------------------------- */
|
||||
|
||||
.largeModel{
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
font-size: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
#367BFC 0%,
|
||||
#5DB6EE 100%
|
||||
);
|
||||
}
|
||||
|
||||
.largeModel-bg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../imgs/support/left.png) ,url(../imgs/support/right.png);
|
||||
background-size: 50% 148%,39% 132%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: -60% 54%,134% 3%;
|
||||
color: #fff;
|
||||
}
|
||||
.largeModel-bg h2{
|
||||
font-size: 3.5vw;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.largeModel-bg h4{
|
||||
font-size: 1vw;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: rgba(255,255,255,0.8);
|
||||
}
|
||||
|
||||
.largeModel-bg-content{
|
||||
width: 58%;
|
||||
height: 55%;
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
margin-top: 5vh;
|
||||
border-radius: 1vw;
|
||||
padding: 2vw;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
|
||||
.largeModel-bg-content h3{
|
||||
font-size: 1.8vw;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: rgba(0,0,0,0.8);
|
||||
|
||||
}
|
||||
|
||||
.largeModel-bg-content p{
|
||||
font-size: 1vw;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
color: rgba(0,0,0,0.8);
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
.largeModel-bg-content-list{
|
||||
width: 80%;
|
||||
height: 40%;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
color: rgba(0,0,0,0.8);
|
||||
flex-wrap: wrap;
|
||||
margin: 0 auto;
|
||||
padding-left: 2vw;
|
||||
/* background: palegoldenrod; */
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.largeModel-bg-content-list li{
|
||||
/* list-style-type: disc; */
|
||||
width: 25%;
|
||||
font-size: 1vw;
|
||||
font-weight: 400;
|
||||
margin-left: 1vw;
|
||||
position: relative;
|
||||
padding-left: 1.5vw;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.largeModel-bg-content-list li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0.6vw;
|
||||
height: 0.6vw;
|
||||
background-color: #367BFC;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* ------------------------- */
|
||||
|
||||
.serviceBox{
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.serviceBox-content{
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
493
fengxiao/css/websiteDesign.css
Normal file
493
fengxiao/css/websiteDesign.css
Normal file
@@ -0,0 +1,493 @@
|
||||
.banner{
|
||||
width: 100%;
|
||||
height: 160vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
|
||||
padding-top: 12vh;
|
||||
|
||||
/* background: linear-gradient(to bottom, rgba(245, 245, 245, 1) 0%,#C0E0F5 60%, #C0E0F5 100%); */
|
||||
|
||||
background: linear-gradient(to bottom, rgba(241, 241, 241, 1) 12vh,#C0E0F5 90vh, #C0E0F5 100%);
|
||||
|
||||
}
|
||||
body,*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.banner-top{
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
background-image: url(../imgs/website/bg.png);
|
||||
background-size: 38vw auto;
|
||||
background-position: 89% 0vw;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0;
|
||||
}
|
||||
.banner-top-content{
|
||||
box-sizing: border-box;
|
||||
width: 35%;
|
||||
height: 60%;
|
||||
margin-left: 15vw;
|
||||
color: #1A2B3D;
|
||||
font-weight: 400;
|
||||
padding-top: 5vw;
|
||||
}
|
||||
.banner-top-content p:nth-child(1){
|
||||
font-size: 5vw;
|
||||
margin: 0;
|
||||
|
||||
|
||||
}
|
||||
.banner-top-content p:nth-child(2){
|
||||
font-size: 5vw;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
.banner-top-content p:nth-child(3){
|
||||
font-size: 0.95vw;
|
||||
margin: 0;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
width: 88%;
|
||||
margin-top: 1vh;
|
||||
|
||||
}
|
||||
|
||||
/* .banner-bottom{
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
width: 900px;
|
||||
height: 380px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.carousel-track {
|
||||
display: flex;
|
||||
transition: transform 0.6s cubic-bezier(.4,0,.2,1);
|
||||
height: 100%;
|
||||
}
|
||||
.carousel-item {
|
||||
width: 280px;
|
||||
height: 340px;
|
||||
background: #fff;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.10);
|
||||
margin: 0 30px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 75%;
|
||||
object-fit: cover;
|
||||
border-radius: 24px 24px 0 0;
|
||||
}
|
||||
.carousel-caption {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
color: #222;
|
||||
margin-top: 24px;
|
||||
font-weight: 400;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.carousel-fade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 120px;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
.carousel-fade.left {
|
||||
left: 0;
|
||||
background: linear-gradient(to right, #c0e0f5 80%, rgba(192,224,245,0));
|
||||
}
|
||||
.carousel-fade.right {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, #c0e0f5 80%, rgba(192,224,245,0));
|
||||
}
|
||||
.carousel-dots {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 24px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
z-index: 3;
|
||||
}
|
||||
.carousel-dots .dot {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.3s, background 0.3s;
|
||||
}
|
||||
.carousel-dots .dot.active {
|
||||
background: #3478FD;
|
||||
opacity: 1;
|
||||
} */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.banner-bottom {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* background: #f5f9fc; */
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
width: 80%;
|
||||
/* height: 400px; */
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-track {
|
||||
display: flex;
|
||||
transition: transform 0.8s cubic-bezier(0.16, 0.77, 0.58, 0.97);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
width: 28vw;
|
||||
height: 55vh !important;
|
||||
|
||||
border-radius: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
margin: 0 20px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 1vw;
|
||||
}
|
||||
|
||||
/* 确保中间图片完全清晰的关键修改 */
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
object-fit: cover;
|
||||
border-radius: 20px 20px 0 0;
|
||||
/* 明确设置无滤镜 */
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
/* 仅对两侧卡片应用模糊效果 */
|
||||
.carousel-item.left-side img,
|
||||
.carousel-item.right-side img {
|
||||
filter: blur(2px) brightness(0.9);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* 中间卡片保持原始状态 */
|
||||
.carousel-item.center {
|
||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
||||
/* 确保不继承任何模糊效果 */
|
||||
filter: none !important;
|
||||
}
|
||||
|
||||
.carousel-caption {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
color: #444444;
|
||||
font-weight: 500;
|
||||
background: #fff;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
/* 渐变遮罩 */
|
||||
.carousel-fade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 28vw;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.carousel-fade.left {
|
||||
width: 50vw;
|
||||
left: 0;
|
||||
background: linear-gradient(to right, #C0E0F5 0%, #C0E0F5 10%, rgba(207, 231, 246, 0) 80%);
|
||||
}
|
||||
|
||||
.carousel-fade.right {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, rgba(194, 225, 245, 1) 0%, rgba(245, 249, 252, 0) 80%);
|
||||
}
|
||||
|
||||
/* 指示点放在盒子外部 */
|
||||
.carousel-dots {
|
||||
position: absolute;
|
||||
left: 56%;
|
||||
bottom: -40px;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
z-index: 8;
|
||||
/* background: red; */
|
||||
}
|
||||
|
||||
.carousel-dots .dot {
|
||||
width: 1vw;
|
||||
height: 1vw;
|
||||
border-radius: 50%;
|
||||
background:#fff;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.carousel-dots .dot.active {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
/* --------------网站策划与原型设计--------------------- */
|
||||
.website-design-content{
|
||||
width: 100%;
|
||||
height: 370vh;
|
||||
background-color: #f1f1f1;
|
||||
background-image: url(../imgs/home/bg1.svg);
|
||||
background-size: 100% auto;
|
||||
background-position: 89% 106%;
|
||||
background-repeat: no-repeat;
|
||||
padding-top: 25vh;
|
||||
}
|
||||
.list-item{
|
||||
width: 80%;
|
||||
height: 50vh;
|
||||
flex-shrink: 0;
|
||||
margin: 0 auto;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
/* background: palegoldenrod; */
|
||||
|
||||
}
|
||||
|
||||
.list-item img{
|
||||
width: 35vw;
|
||||
height:auto;
|
||||
}
|
||||
.list-item div{
|
||||
width: 40vw;
|
||||
height:auto;
|
||||
margin-left: 10vw;
|
||||
}
|
||||
.list-item div h3{
|
||||
font-size: 1.8vw;
|
||||
font-weight: 600;
|
||||
color: #1B2A3D;
|
||||
}
|
||||
.list-item div p{
|
||||
width: 70%;
|
||||
font-size: 1vw;
|
||||
color: #666;
|
||||
margin-top: 5vh;
|
||||
}
|
||||
|
||||
.right-arrow{
|
||||
width: 95%;
|
||||
/* height: 30vh; */
|
||||
text-align: center;
|
||||
/* background: palegoldenrod; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.right-arrow img{
|
||||
width: 18vw;
|
||||
height: auto;
|
||||
}
|
||||
.left-arrow {
|
||||
width: 20vw; /* 根据实际需要设置 */
|
||||
height: auto;
|
||||
transform: scaleX(-1); /* 或 rotate(180deg) */
|
||||
}
|
||||
|
||||
|
||||
/* ------------------服务流程--------------------- */
|
||||
.serviceProcess{
|
||||
width: 100%;
|
||||
height: 78vh;
|
||||
background: linear-gradient(to bottom, #397FF9 0%,#397FF9 50%, #5CB1E5 100%);
|
||||
padding-top: 10vh;
|
||||
|
||||
}
|
||||
.serviceProcess h3{
|
||||
width: 100%;
|
||||
font-size: 3vw;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.serviceProcess p{
|
||||
width: 100%;
|
||||
font-size: 0.9vw;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
text-align: center;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.process-list{
|
||||
width: 90%;
|
||||
height: 48vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
.process-item{
|
||||
width: 18vw;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
list-style: none;
|
||||
margin-left: 2vw;
|
||||
border-radius: 18px;
|
||||
box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
padding: 2vw;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
}
|
||||
.process-item img{
|
||||
width:auto;
|
||||
height: 10vh;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
.process-item h3{
|
||||
font-size: 1.5vw;
|
||||
font-weight: 600;
|
||||
color: #1B2A3D;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
.process-item p{
|
||||
margin: 0 auto;
|
||||
width: 82%;
|
||||
font-size: 0.95vw;
|
||||
color: #666;
|
||||
margin-top: 4vh;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.process-item-number {
|
||||
position: absolute;
|
||||
top: -2.5vw;
|
||||
left: 5.3vw;
|
||||
width: 5vw;
|
||||
height: 5vw;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.process-item-number::before,
|
||||
.process-item-number::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.process-item-number::before {
|
||||
width: 4.5vw;
|
||||
height: 4.5vw;
|
||||
background: rgba(0, 255, 255, 0.15); /* 外层淡青色光晕 */
|
||||
}
|
||||
|
||||
.process-item-number::after {
|
||||
width: 3.9vw;
|
||||
height: 3.9vw;
|
||||
background: rgba(0, 255, 255, 0.25); /* 中层稍深光晕 */
|
||||
}
|
||||
|
||||
.process-item-number span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 3.2vw;
|
||||
height: 3.2vw;
|
||||
border-radius: 50%;
|
||||
background: #00E6E6; /* 主体青色 */
|
||||
color: #222;
|
||||
font-size: 1vw;
|
||||
font-weight: 500;
|
||||
z-index: 1;
|
||||
box-shadow: 0 0 12px 0 rgba(22,230,248,0.18);
|
||||
font-family: 'Arial', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-style: italic;
|
||||
|
||||
|
||||
}
|
||||
/* ---------------- */
|
||||
|
||||
.serviceBox{
|
||||
width: 100%;
|
||||
height: 30vh;
|
||||
background: #f1f1f1;
|
||||
}
|
||||
.serviceBox-content{
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.serviceBox-content img{
|
||||
|
||||
width: 16vw;
|
||||
height: auto;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user