/* 聚集页 单页面 样式 index archive */ /* #region 首页*/ .index-part-techs .techs-title { margin-right: auto; } .index-part-techs .techs-list { flex-grow: 1; justify-content: space-evenly; } .index-part-techs .techs-item { position: relative; } .index-part-techs .techs-item>img { height: 100%; max-height: 42px; display: block; user-select: none; /* filter: brightness(0); */ /* -webkit-filter: brightness(0); */ } .index-part-techs .techs-item:after { content: ""; position: absolute; left: -120%; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); transform: skewx(-25deg); -webkit-transform: skewx(-25deg) } .index-part-techs .techs-item:hover:after { transition: all .5s ease; left: 100% } /* 热门产品 列表 */ .index-part-hot-products .hot-products-list { display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 1rem; width: 100%; max-height: 560px; aspect-ratio: 131 / 56; margin-left: auto; margin-right: auto; } .index-part-hot-products .hot-products-item { position: relative; transition: all 0.3s; /* overflow: hidden; */ } .index-part-hot-products .hot-products-item .bg { position: absolute; inset: 0; background-color: #ccc; z-index: 1; overflow: hidden; } .index-part-hot-products .hot-products-item .bg img { object-fit: cover; object-position: bottom center; width: 100%; height: 100%; } .index-part-hot-products .hot-products-item .content { position: relative; width: 100%; height: 100%; z-index: 2; transition: all 0.3s; overflow: hidden; } .index-part-hot-products .hot-products-item .content:after { content: ""; position: absolute; left: -120%; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.3) 70%, rgba(255, 255, 255, 0) 100%); transform: skewx(-25deg); -webkit-transform: skewx(-25deg) } .index-part-hot-products .hot-products-item .content:hover:after { transition: all 1s ease; left: 100%; } .index-part-hot-products .hot-products-item.item-3 .content:hover:after { transition: all 2s ease; } .index-part-hot-products .hot-products-item .content .title { position: absolute; top: 1rem; left: 1rem; z-index: 2; } .index-part-hot-products .hot-products-item .content .tech-icons { position: absolute; top: 1rem; left: 1rem; z-index: 2; column-gap: 7px; align-items: center; transform: translateY(120%); } .index-part-hot-products .hot-products-item .content .tech-icons .icon { height: 1.7rem; box-sizing: border-box; } .index-part-hot-products .hot-products-item .content .tech-icons .icon>img { height: 100%; width: auto; pointer-events: none; user-select: none; /* filter: brightness(0%); */ } .index-part-hot-products .hot-products-item .content .img { position: absolute; width: 100%; height: 100%; padding: 2rem; text-align: center; z-index: 1; pointer-events: none; user-select: none; /* 禁用鼠标事件 */ } .index-part-hot-products .hot-products-item .content .img>img { max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; pointer-events: none; user-select: none; object-fit: contain; } .index-part-hot-products .hot-products-list .item-0 .content .img img, .index-part-hot-products .hot-products-list .item-4 .content .img img { transform: translateY(20%); } .index-part-hot-products .hot-products-item .content .more { position: absolute; bottom: 1rem; right: 1rem; z-index: 2; padding: 3px 1rem; color: var(--color-blue); border: 1px solid #fff; background-color: #fff; border-radius: 1rem; transition: all 0.3s; font-size: 0.9em; } .index-part-hot-products .hot-products-item .content .more:hover { background-color: var(--color-blue); border: 1px solid var(--color-blue); color: #fff; } .index-part-hot-products .hot-products-list .item-0 { grid-row-start: 1; grid-column-start: 1; grid-row-end: 3; grid-column-end: 2; } .index-part-hot-products .hot-products-list .item-1 { grid-row-start: 1; grid-column-start: 2; grid-row-end: 2; grid-column-end: 3; } .index-part-hot-products .hot-products-list .item-2 { grid-row-start: 1; grid-column-start: 3; grid-row-end: 2; grid-column-end: 4; } .index-part-hot-products .hot-products-list .item-3 { grid-row-start: 2; grid-column-start: 2; grid-row-end: 3; grid-column-end: 4; } .index-part-hot-products .hot-products-list .item-4 { grid-row-start: 1; grid-column-start: 4; grid-row-end: 3; grid-column-end: 5; } /* 首页 行业应用 */ .index-part-industry-application .industry-application-cate .list { width: 100%; column-gap: 1rem; border-bottom: 1px solid #ccc; } .index-part-industry-application .industry-application-cate .item { width: calc((100% - 6rem)/ 7); padding-bottom: .5rem; column-gap: 1rem; position: relative; cursor: pointer; } .index-part-industry-application .industry-application-cate .item:hover::after, .index-part-industry-application .industry-application-cate .item.active::after { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--color-blue); transform: translateY(50%); } .index-part-industry-application .industry-application-cate .icon-svg { max-width: 2.28rem; } .index-part-industry-application .industry-application-cate .icon-svg svg { width: 100%; height: auto; aspect-ratio: 1 / 1; } .index-part-industry-application .industry-application-cate .item::after, .index-part-industry-application .industry-application-cate .item .icon-svg svg path, .index-part-industry-application .industry-application-cate .item a { transition: all 0.2s; } .index-part-industry-application .industry-application-cate .item:hover a, .index-part-industry-application .industry-application-cate .item.active a { color: var(--color-blue); } .index-part-industry-application .industry-application-cate .item:hover .icon-svg svg path, .index-part-industry-application .industry-application-cate .item.active .icon-svg svg path { fill: var(--color-blue) } .index-part-industry-application .industry-application-info .list { position: relative; aspect-ratio: 32 / 10; } .index-part-industry-application .industry-application-info .item { background-color: #f7f9f9; position: absolute; inset: 0; transition: all 0.3s ease-in-out; visibility: hidden; opacity: 0; pointer-events: none; /* 禁用鼠标事件 */ box-shadow: 0 2px 4px rgba(0, 0, 0, .1); } .index-part-industry-application .industry-application-info .item.active { visibility: visible; opacity: 1; pointer-events: unset; } .index-part-industry-application .industry-application-info .right { width: 50%; flex-shrink: 0; } .index-part-industry-application .industry-application-info .right img { width: 100%; height: auto; aspect-ratio: 16 / 10; } .index-part-industry-application .industry-application-info .left { padding: 2vw; } .index-part-industry-application .industry-application-info .left .icon-svg { background-color: #00a7b630; padding: 6px 10px; margin-left: auto; } .index-part-industry-application .industry-application-info .left .icon-svg svg { width: 3rem; height: auto; aspect-ratio: 1 / 1; } .index-part-industry-application .industry-application-info .left .icon-svg svg path { fill: var(--color-blue) } .index-part-industry-application .industry-application-info .left .text { line-height: 1.8; } .index-part-industry-application .industry-application-info .left .more { margin-top: auto; padding: 5px 2rem; border: 1px solid var(--color-blue); border-radius: 5rem; margin-left: auto; background-color: transparent; transition: all 0.2s; color: var(--color-blue); } .index-part-industry-application .industry-application-info .left .more:hover { background-color: var(--color-blue); color: #fff; } .index-part-about-us { position: relative; aspect-ratio: 1920 / 700; } .index-part-partners .partners-bg, .index-part-about-us .about-us-bg { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; pointer-events: none; } .index-part-partners .partners-bg>img, .index-part-about-us .about-us-bg>img { object-fit: cover; } .index-part-partners .partners-content, .index-part-about-us .about-us-content { position: relative; height: 100%; justify-content: start; } .index-part-about-us .about-us-content .left { width: 50%; } .index-part-about-us .about-us-content .title { position: relative; } .index-part-about-us .about-us-content .title>i { position: absolute; font-size: 2em; top: -100%; left: 0; opacity: 0.2; pointer-events: none; z-index: 1; font-style: italic; } .index-part-about-us .about-us-content .title>h2 { position: relative; z-index: 2; } .index-part-about-us .about-us-content .des { line-height: 1.8; } .index-part-about-us .about-us-content .highlight-list { width: 100%; column-gap: 5rem; row-gap: 1rem; } .index-part-about-us .about-us-content .highlight-item { width: calc((100% - 5rem) / 2); } .index-part-about-us .about-us-content .highlight-item>i { margin-right: 0.5rem; opacity: 0.8; } .index-part-partners { position: relative; aspect-ratio: 1920 / 414; } .index-part-partners .center { margin: 0 auto; max-width: 1024px; width: 70%; } .index-part-partners .center .logo-container { width: 100%; position: relative; border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-image: linear-gradient(to right, transparent, var(--color-blue), transparent) 1; /* 使用线性渐变 */ padding: 2rem 0; overflow: hidden; } .index-part-partners .center .logo-list { width: 100%; column-gap: 3rem; } .index-part-partners .center .logo-item { font-size: 0; } .index-part-partners .center .logo-item>img { max-height: 36px; } .index-part-our-service .our-service-content { column-gap: 6%; } .index-part-our-service .our-service-content .left { width: 16%; flex-shrink: 0; } .index-part-our-service .our-service-content .left .list { row-gap: 3rem; } .index-part-our-service .our-service-content .left .item { padding: 8px 1rem; border: 1px solid var(--color-blue); border-radius: 5rem; } .index-part-our-service .our-service-content .left .item .icon-svg { margin-right: 5px; max-width: 28px; align-content: center; } .index-part-our-service .our-service-content .left .item .icon-svg svg { width: 100%; height: auto; aspect-ratio: 1 / 1; } .index-part-our-service .our-service-content .right { flex-grow: 1; } .index-part-our-service .our-service-content .right .list { column-gap: 1px; width: 100%; } .index-part-our-service .our-service-content .right .item { width: calc((100% - 3px) / 4); aspect-ratio: 19 / 30; position: relative; transition: all 0.2s; cursor: pointer; } .index-part-our-service .our-service-content .right .item.active { transform: scale(1); z-index: 2; box-shadow: 0 0 30px rgba(0, 0, 0, .2); } .index-part-our-service .our-service-content .right .item.active .bg { transform: scale(1.3); transform-origin: center center; } .index-part-our-service .our-service-content .right .item .bg { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; pointer-events: none; overflow: hidden; font-size: 0; } .index-part-our-service .our-service-content .right .item .bg>img { object-fit: cover; display: block; } .index-part-our-service .our-service-content .right .item .bg::after { position: absolute; inset: 0; content: ''; background-color: rgba(255, 255, 255, .6); backdrop-filter: blur(0.5px); } .index-part-our-service .our-service-content .right .item.active .bg::after { background-color: rgba(0, 0, 0, .5); } .index-part-our-service .our-service-content .right .item .content { position: relative; height: 100%; padding: 1rem; color: var(--color-black); } .index-part-our-service .our-service-content .right .item .content .icon-svg { width: 24px; margin-right: 5px; } .index-part-our-service .our-service-content .right .item .content .icon-svg svg { width: 100%; height: auto; aspect-ratio: 1 / 1; } .index-part-our-service .our-service-content .right .item .content .icon-svg svg path { fill: var(--color-black); } .index-part-our-service .our-service-content .right .item .content .more, .index-part-our-service .our-service-content .right .item.active .content { color: #fff; } .index-part-our-service .our-service-content .right .item.active .content .icon-svg svg path { fill: #fff; } .index-part-our-service .our-service-content .right .item .content .more, .index-part-our-service .our-service-content .right .item .content .des { display: none; } .index-part-our-service .our-service-content .right .item.active .content .more, .index-part-our-service .our-service-content .right .item.active .content .des { display: block; } .index-part-news .news-content { column-gap: 5%; } .index-part-news .news-content .news-cate { /* height: 3rem; */ /* line-height: 3rem/; */ padding: 5px 1rem; position: relative; clear: both; } .index-part-news .news-content .news-cate::before { position: absolute; content: ''; left: 0; top: 50%; width: 3px; height: 2rem; background-color: var(--color-blue); transform: translateY(-50%); } .index-part-news .news-content .news-cate .more { font-size: 0.8em; transition: all 0.3s; float: right; } .index-part-news .news-content .news-cate .more:hover { color: var(--color-blue); border-bottom: 1px dashed var(--color-blue); } .index-part-news .news-content .left { width: 50%; flex-shrink: 0; } .index-part-news .news-content .sticky-post { position: relative; font-size: 0; transition: all 0.3s; overflow: hidden; } .index-part-news .news-content .sticky-post:hover { box-shadow: 0 2px 20px rgb(0 68 74 / 15%); } .index-part-news .news-content .sticky-post>img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; overflow: hidden; } .index-part-news .news-content .sticky-post .text { position: absolute; left: 0; bottom: -1px; width: 100%; background-color: #f7f9f9; backdrop-filter: blur(2px); padding: 5px 2rem; align-items: center; column-gap: 1rem; background-color: hsla(0, 0%, 100%, .8); backdrop-filter: blur(10px); } .index-part-news .news-content .sticky-post .text .date{ line-height: 1.2; } .index-part-news .news-content .sticky-post .title h3, .index-part-news .news-content .right .item h3, .index-part-news .news-content .sticky-post .excerpt { overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-height: 1.2em; max-height: 1.4em; } .index-part-news .news-content .right { flex-grow: 1; } .index-part-news .news-content .right .list { flex-grow: 1; justify-content: space-between; } .index-part-news .news-content .right .item { background-color: #f7f9f9; padding: 1vw 2vw; transition: all 0.3s; min-height: calc((100% - 3vw) / 4); row-gap: 6px; justify-content: center; } .index-part-news .news-content .right .item:hover { box-shadow: 0 0 30px rgba(0, 0, 0, .2); } .index-part-news .news-content .right .item .title { align-items: center; } .index-part-news .news-content .right .item .article_tag { padding: 3px 10px; font-size: 0.8em; color: #fff; border-radius: 2rem; margin-right: 6px; white-space: nowrap; } .index-part-news .news-content .right .item .date { /*opacity: 0.5;*/ font-size: 0.9em; } /* #endregion */ /* #region 产品汇总*/ .procuct-cate-main { background-color: #f5f5f7; } .procuct-cate-main .product-nav { margin-right: 1rem; position: fixed; left: 0; top: 50%; z-index: 99; /* background-color: #fff; */ padding-left: 3px; padding-top: 1rem; /* padding-bottom: 1rem; */ max-width: var(--layout-padding); /* box-shadow: 0 0 30px rgba(0, 0, 0, .15); */ opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease-in-out; transform: translateX(-100%) translateY(-50%); } .procuct-cate-main .product-nav.active { opacity: 1; visibility: visible; pointer-events: unset; transform: translateX(0) translateY(-50%); } .procuct-cate-main .product-nav .item { padding: 6px 1rem; position: relative; transition: all 0.3s ease-in-out; cursor: pointer; padding-left: 10px; } .procuct-cate-main .product-nav .item::before { position: absolute; content: ''; left: 0; top: 0; height: 100%; width: 3px; border-radius: 1px; background-color: #51c0ca59; transition: all 0.3s ease-in-out; } .procuct-cate-main .product-nav .item.active::before { background-color: var(--color-blue); width: 5px; left: -1px; border-radius: 2px; } .procuct-cate-main .product-nav .item.active, .procuct-cate-main .product-nav .item:hover { background-color: #f5f5f5; font-weight: 700; } .procuct-cate-main .product-list { flex-grow: 1; /* padding: 0 1rem; */ } .procuct-cate-main .product-sub-list .cate-name { column-gap: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed #ccc; } .procuct-cate-main .product-sub-list .cate-name img { width: auto; height: 46px; } .product-list-grid { width: 100%; display: grid; grid-gap: 15px; row-gap: 15px; grid-template-columns: var(--grid-list-column-5); } /* 产品列表 布局 01 */ .product-list-01 .item { background-color: #fff; padding: 1.5rem 1rem; box-shadow: 2px 4px 12px #00000014; transition: all .3s cubic-bezier(0, 0, .5, 1); cursor: pointer; } .product-list-01 .content { position: relative; overflow: hidden; } .product-list-01 .item:hover { box-shadow: 2px 4px 16px #00000029; transform: scale3d(1.01, 1.01, 1.01); } .product-list-01 .content>img { margin-top: 1rem; aspect-ratio: 1 / 1; transition: all .4s cubic-bezier(0, 0, .5, 1); } .product-list-01 .content .title { overflow: hidden; white-space: normal; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.35em; height: 2.7em; border-top: 1px dashed #e3ebf4; padding-top: 10px; box-sizing: content-box; transition: all .2s cubic-bezier(0, 0, .5, 1); margin-top: 1rem; } .product-list-01 .content .tag { column-gap: 2px; width: 100%; overflow: hidden; transition: all .1s cubic-bezier(0, 0, .5, 1); } .product-list-01 .content .tag .icon { position: relative; padding: 2px 3px; height: 22px; /* max-width: calc((100% - 12px) / 7); */ background-color: #2db7c2bb; border-radius: 3px; box-sizing: border-box; } .product-list-01 .content .tag .icon>img { height: 100%; width: auto; filter: brightness(0) invert(1); } .product-list-01 .content .feature { position: absolute; left: 0; z-index: 1; /* background-color: #fff; */ top: 0; transform: translateY(-100%); width: 100%; column-gap: 1rem; row-gap: 1px; transition: all .4s cubic-bezier(0, 0, .5, 1); font-size: 0.9em; } .product-list-01 .content .feature span { /* width: calc((100% - 1rem) / 2); */ width: 100%; /* color: #666; */ } /* .product-list-01 .item:first-child .content .feature, */ .product-list-01 .item:hover .content .feature { opacity: 1; visibility: visible; } /* .product-list-01 .item:first-child .content .tag, */ .product-list-01 .item:hover .content .tag { opacity: 0; visibility: hidden; } /* .product-list-01 .item:first-child .content>img, */ .product-list-01 .item:hover .content>img { transform: translateY(1rem); } /* .product-list-01 .item:first-child .content .feature, */ .product-list-01 .item:hover .content .feature { transform: translateY(0); } .procuct-cate-application .application-list .list { width: 100%; display: grid; column-gap: 1rem; row-gap: 2rem; grid-template-columns: var(--grid-list-column-3); } .procuct-cate-application .application-list .item { background-color: #f5f5f7; padding: 2rem 0rem 0rem; font-size: 0; } .procuct-cate-application .application-list .item>div { row-gap: .5rem; } .procuct-cate-application .application-list .item .more { color: var(--color-blue); transition: all 0.3s ease-in-out; border-bottom: 1px dashed transparent; } .procuct-cate-application .application-list .item .more:hover { color: var(--color-blue); border-bottom: 1px dashed var(--color-blue); } /* 产品列表 样式 01 */ /* #endregion */ /* #region 行业应用*/ .industry-application-detail-info { position: relative; } .industry-application-detail-info .bread-crumbs { position: absolute; top: 0; left: 0; z-index: 2; transform: translateY(-100%); text-align: right; opacity: 0.95; transition: all 0.2s; border-bottom: 1px dashed transparent; } .industry-application-detail-info .bread-crumbs a { margin-inline-end: 6px; color: #fff; mix-blend-mode: difference; /* 动态对比 */ background-color: transparent; /* 避免背景叠加 */ } .industry-application-detail-info .bread-crumbs a::after { content: "/"; margin-inline-start: 5px; } .industry-application-detail-info .bread-crumbs a:last-child::after { content: ""; } .industry-application-detail-info .bread-crumbs a:hover { border-bottom: 1px dashed var(--color-blue); } /* 详情介绍 */ .industry-application-detail-info .full-page .container { position: relative; } .industry-application-detail-info .full-page .bg, .industry-application-detail-info .full-page .mask { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .industry-application-detail-info .full-page .bg video, .industry-application-detail-info .full-page .bg img { width: 100%; height: 100%; object-fit: cover; } .industry-application-detail-info .full-page .content { position: relative; z-index: 2; } .industry-application-detail-info .left-right-page .container { position: relative; } .industry-application-detail-info .left-right-page .bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .industry-application-detail-info .left-right-page .bg video, .industry-application-detail-info .left-right-page .bg img { width: 100%; height: 100%; object-fit: cover; } .industry-application-detail-info .left-right-page .content { position: relative; z-index: 2; } .industry-application-detail-info .left-right-page .image-is-content .content { column-gap: 10%; } .industry-application-detail-info .left-right-page .image-is-content .content>div { width: 50%; overflow: hidden; } .industry-application-detail-info .left-right-page .image-is-content .media img, .industry-application-detail-info .left-right-page .image-is-content .media video { width: 100%; height: 100%; object-fit: cover; } .industry-application-detail-info .left-right-page .image-is-content .text.on-right { order: 2; } /* 相关产品列表 */ .industry-application-related-product { background-color: #fff; overflow-x: hidden; } .industry-application-related-product .container { position: relative; max-width: 1280px; margin-inline: auto; } .industry-application-related-product .container { position: relative; } .industry-application-related-product .container .bg, .industry-application-related-product .container .bg img{ width: 100%; display: block; pointer-events: none; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ user-select: none; /* Standard syntax */ aspect-ratio: 1650 / 1021 ; } .industry-application-related-product .container .item{ position: absolute; left: 10%; top: 10%; transition: all 0.3s ease-in-out; max-width: 360px; } .industry-application-related-product .container .item::before{ position: absolute; content: attr(data-index); left: 0; top: 0; opacity: 0; } .industry-application-related-product .container .item:hover{ transform: translateY(-3px); } .industry-application-related-product .container .item>a{ background-color: #f9fbfc; border-radius: 80px 6px 6px 80px; overflow: hidden; box-shadow: 1px 2px 5px #00000014; justify-content: flex-start; } .industry-application-related-product .item .img{ width: 4.5vw; max-width: 76px; min-width: 56px; aspect-ratio: 1 / 1; padding: 3px; border-radius: 80px; background-color: #12a8ab; } .industry-application-related-product .item .text{ padding: 5px 10px; line-height: 1.3; } /* 应用场景 */ .industry-application-scenario .item { background-color: #f9fafc; position: relative; } .industry-application-scenario .item:nth-child(even) { background-color: #fff; } .industry-application-scenario .item::before{ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.08; background-image: url(../imgs/num-1.svg); background-repeat: no-repeat; background-size: auto calc( 100% - 8px); background-position: center; } .industry-application-scenario .item:nth-child(2):before{ background-image: url(../imgs/num-2.svg); } .industry-application-scenario .item:nth-child(3):before{ background-image: url(../imgs/num-3.svg); } .industry-application-scenario .item:nth-child(4):before{ background-image: url(../imgs/num-4.svg); } .industry-application-scenario .item:nth-child(5):before{ background-image: url(../imgs/num-5.svg); } .industry-application-scenario .item:nth-child(6):before{ background-image: url(../imgs/num-6.svg); } .industry-application-scenario .item:nth-child(7):before{ background-image: url(../imgs/num-7.svg); } .industry-application-scenario .item:nth-child(8):before{ background-image: url(../imgs/num-8.svg); } .industry-application-scenario .item>div{ position: relative; z-index: 2; align-items: stretch; line-height: 2; } .industry-application-scenario .content-top{ column-gap: 10%; } .industry-application-scenario .content-top .text{ width: 45%; flex-grow: 0; justify-content: center; } .industry-application-scenario .item:nth-child(even) .content-top .text{ order: 2; } .industry-application-scenario .content-top .img{ width:45%; flex-grow: 0; } .industry-application-scenario .content-top .img img { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; } .industry-application-scenario .content-bottom{ /* column-gap: 15%; */ justify-content: space-between; } .industry-application-scenario .content-bottom>div{ padding: 3rem; width: calc( ( 100% - 15% ) / 2 ); background-color: #f9fafc; box-shadow: 2px 4px 12px #00000014; line-height: 1.8; } .industry-application-scenario .item:nth-child(odd) .content-bottom>div{ background-color: #fff; } /* 行业应用列表页 */ .industry-application-list .list { width: 100%; display: grid; grid-gap: 2rem; row-gap: 2rem; grid-template-columns: var(--grid-list-column-2); } .industry-application-list .item { box-shadow: 2px 4px 12px #00000014; transition: all .3s cubic-bezier(0, 0, .5, 1); cursor: pointer; position: relative; aspect-ratio: 16 / 9; font-size: 0; overflow: hidden; } .industry-application-list .item>img { aspect-ratio: 16 / 9; width: 100%; height: auto; } .industry-application-list .item .text { position: absolute; inset: 0; background-color: #ebebebc9; } .industry-application-list .item .text .desc { position: absolute; inset: 0; background-color: transparent; transition: all 0.4s ease-in-out; } .industry-application-list .item .desc-01 .icon-svg { margin-right: .5rem; width: 32px; height: auto; aspect-ratio: 1 / 1; } .industry-application-list .item .desc-01 .icon-svg svg { width: 100%; height: 100%; aspect-ratio: 1 / 1; } .industry-application-list .item .desc-01 .icon-svg svg path { fill: var(--color-blue) } .industry-application-list .item .text .desc-01 { visibility: visible; opacity: 1; pointer-events: unset; transform: translateY(0%); } .industry-application-list .item.has-detail:hover .text .desc-01 { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-100%); } .industry-application-list .item .text .desc-02 { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(100%); padding: 0 2rem; } .industry-application-list .item.has-detail:hover .text .desc-02 { visibility: visible; opacity: 1; pointer-events: unset; transform: translateY(0%); } .industry-application-list .item .text .desc-02 .more { padding: 5px 2rem; border: 1px solid var(--color-blue); border-radius: 5rem; background-color: transparent; transition: all 0.2s; color: var(--color-blue); } .industry-application-list .item .text .desc-02 .more:hover { background-color: var(--color-blue); color: #fff; } /* #endregion */ /* #region 服务单页*/ .service-part-development .part-01 { column-gap: 10%; } .service-part-development .part-01 .media { width: 50%; overflow: hidden; } .service-part-development .part-01 .text { width: 50%; overflow: hidden; line-height: 2; } .service-part-development .part-02 { background-color: #f9fafc; overflow: hidden; } .service-part-development .team-container { max-width: 940px; margin-left: auto; margin-right: auto; } .service-part-development .team-container .swiper-wrapper { width: 100%; } .service-part-development .team-container .swiper-slide { width: 100%; font-size: 0; border-radius: 10px; } .service-part-development .team-container .swiper-slide img { width: 100%; aspect-ratio: 120 / 64; box-shadow: 2px 4px 12px #00000014; border-radius: 10px; } .service-part-development .team-container .swiper-button-next, .service-part-development .team-container .swiper-button-prev { color: var(--color-black); width: 30px; height: 30px; } .service-part-development .team-container .swiper-button-next { right: -3rem; } .service-part-development .team-container .swiper-button-prev { left: -3rem; } .service-part-development .team-container .swiper-button-next:after, .service-part-development .team-container .swiper-button-prev:after { font-size: 16px; font-weight: 700; } .service-part-development .team-container.swiper-3d .swiper-slide-shadow-left { border-radius: 10px; background-image: linear-gradient(to left, rgba(1, 168, 184, .5), rgba(249, 250, 252, 0) 25%); } .service-part-development .team-container.swiper-3d .swiper-slide-shadow-right { border-radius: 10px; background-image: linear-gradient(to right, rgba(1, 168, 184, .5), rgba(249, 250, 252, 0) 25%); } .service-part-development .test-container { column-gap: 5rem; } .service-part-development .test-container .list { row-gap: 2rem; } .service-part-development .test-container .media { width: 70%; max-width: 960px; flex-shrink: 0; flex-grow: 0; font-size: 0; } .service-part-development .test-container .media>img { width: 100%; aspect-ratio: 120 / 64; box-shadow: 2px 4px 12px #00000014; border-radius: 10px; } .service-part-flexible .part-01 { column-gap: 10%; } .service-part-flexible .part-01 .media { width: 50%; overflow: hidden; } .service-part-flexible .part-01 .text { width: 50%; overflow: hidden; } .service-part-flexible .part-02 { background-color: #f9fafc; overflow: hidden; column-gap: 10%; } .service-part-flexible .part-02 .flexible-image-container { width: 60%; overflow: hidden; aspect-ratio: 800 / 450; } .service-part-flexible .part-02 .flexible-text-container { width: 40%; overflow: hidden; } .service-part-flexible .part-02 .flexible-text-container .list { row-gap: 5px; } .service-part-flexible .part-02 .flexible-text-container .item { cursor: pointer; border-bottom: 1px solid #ddd; padding: 1rem; } .service-part-flexible .part-02 .flexible-text-container .item>h3 { display: flex; align-items: center; } .service-part-flexible .part-02 .flexible-text-container .item>h3>i { margin-left: auto; transition: all 0.2s; } .service-part-flexible .part-02 .flexible-text-container .item.active>h3>i { transform: rotate(90deg); } .service-part-flexible .part-02 .flexible-text-container .item>div { display: none; transition: all 0.2s; } .service-part-flexible .part-02 .flexible-text-container .item.active>div { display: block; } .service-part-support .part-01 { overflow: hidden; column-gap: 8%; } .service-part-support .part-01 .support-image-container { width: 50%; overflow: hidden; aspect-ratio: 4 / 3; } .service-part-support .part-01 .support-text-container { width: 50%; height: 100%; position: relative; aspect-ratio: 4 / 3; overflow: hidden; } .service-part-support .part-01 .support-text-container .desc-list { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } .service-part-support .part-01 .support-text-container .desc-list p { margin: 0.5rem 0; } .service-part-support .part-01 .support-text-container .desc-list>div { display: none; } .service-part-support .part-01 .support-text-container .desc-list>div.active { display: block; } .service-part-support .part-01 .support-text-container .title-list { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); } .service-part-support .part-01 .support-text-container .title-list::after { position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: ''; border-right: 2px dashed #ddd; width: 100%; height: 200%; border-radius: 100%; z-index: -1; } .service-part-support .part-01 .support-text-container .title-list>h3 { position: relative; padding: 3px 8px; border-radius: 2px; transform: translateX(calc(-1rem + 3px)); margin: 2rem 0; cursor: pointer; } .service-part-support .part-01 .support-text-container .title-list>h3:first-child { transform: translateX(calc(-1rem + 1px)); } .service-part-support .part-01 .support-text-container .title-list>h3:last-child { transform: translateX(calc(-1rem + 1px)); } .service-part-support .part-01 .support-text-container .title-list>h3::after { position: absolute; top: 50%; transform: translateY(-50%); right: -1rem; content: ''; width: 4px; height: 4px; border-radius: 4px; padding: 1px; background-color: #fff; border: 1px solid var(--color-blue); z-index: 9; } .service-part-support .part-01 .support-text-container .title-list>h3.active { padding: 3px 8px; background-color: var(--color-blue); color: #fff; } .service-part-support .part-01 .support-text-container .title-list>h3.active::after { border: 1px solid var(--color-blue); padding: 1px; background-color: var(--color-blue); } /* #endregion */ /* #region 关于我们 (优势,品牌)*/ .about-advantages-technology .list { width: 100%; column-gap: 2rem; row-gap: 2rem; } .about-advantages-technology .item { width: calc((100% - 4rem) / 3); background-color: #f9fafc; row-gap: 1.5rem; aspect-ratio: 5 / 3; box-shadow: 3px 3px 10px 0px rgba(7, 62, 107, 0.11); } .about-advantages-technology .item .icon-svg { max-width: 52px; } .about-advantages-technology .item .icon-svg svg { width: 100%; height: auto; aspect-ratio: 1 / 1; } .about-advantages-technology .item .icon-svg svg path { fill: var(--color-dark); transition: all 0.2s; } .about-advantages-technology .item:hover .icon-svg svg path { fill: var(--color-blue) } .about-advantages-product { background-color: #f1f4f8; } .about-advantages-product .list { width: 100%; column-gap: 1rem; row-gap: 1rem; } .about-advantages-product .item { width: calc((100% - 3rem) / 4); background-color: #fff; row-gap: 3px; aspect-ratio: 5 / 3; padding: calc(1.5rem * var(--zoom-ratio)); box-shadow: 3px 3px 10px 0px rgba(7, 62, 107, 0.11); position: relative; overflow: hidden; } .about-advantages-product .item>*{ position: relative; z-index: 2; } .about-advantages-product .item::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom right, #ffffff70 40%, #1bcfd470); opacity: 0; transition: all ease .6s; } .about-advantages-product .item:hover::before { opacity: 1; transition: all ease .6s; } .about-advantages-product .item .icon-svg { max-width: 36px; } .about-advantages-product .item .icon-svg.full { max-width: 32px; } .about-advantages-product .item .icon-svg svg { width: 100%; height: auto; aspect-ratio: 1 / 1; } .about-advantages-product .item .icon-svg svg path { fill: var(--color-dark); transition: all 0.2s; } .about-advantages-product .item:hover .icon-svg svg path { fill: var(--color-blue) } .about-advantages-service .list { width: 100%; column-gap: 1.5vw; row-gap: 1.5vw; line-height: 1.8; } .about-advantages-service .item { width: calc((100% - 3vw) / 3); background-color: #f9fafc; row-gap: 1vw; padding: 1rem; box-shadow: 3px 3px 10px 0px rgba(7, 62, 107, 0.11); transition: all 0.2s; /* max-width: 360px; */ } .about-advantages-service .item { box-shadow: 3px 3px 10px 0px rgba(7, 62, 107, 0.2); } .about-advantages-service .item img { aspect-ratio: 16 / 9; border-radius: 5px; margin-top: 2rem; } .about-advantages-manufacture .part { position: relative; } .about-advantages-manufacture .placeholder { position: relative; font-size: 0; } .about-advantages-manufacture .content { position: absolute; inset: 0; align-items: center; } .about-advantages-manufacture .content .text { width: 45%; } .about-advantages-manufacture .part.text-on-right .text{ margin-left: auto; } /* 品牌页 */ .about-brand-desc .content { column-gap: 10%; } .about-brand-desc .content .text { width: 50%; line-height: 2; } .tagcloud-page-desc .title, .about-brand-dynamic .title, .about-brand-history .title, .about-brand-desc .content .text .title { position: relative; line-height: 1.5; } .tagcloud-page-desc .title>i, .about-brand-dynamic .title>i, .about-brand-history .title>i, .about-brand-desc .content .text .title>i { position: absolute; font-size: 1.4em; top: -100%; left: 0; opacity: 0.2; pointer-events: none; z-index: 1; font-style: italic; line-height: 0.9; text-transform: uppercase; } .tagcloud-page-desc .title>h2, .about-brand-dynamic .title>h2, .about-brand-history .title>h2, .about-brand-desc .content .text .title>h2 { position: relative; z-index: 2; } .about-brand-desc .content .media { width: 50%; overflow: hidden; aspect-ratio: 1 / 1; } .about-brand-desc .content .media img { -webkit-mask-size: contain; -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; mask-size: contain; mask-position: center center; mask-repeat: no-repeat; vertical-align: top; -webkit-mask-image: url(../imgs/mask-17-svg.png); -mask-image: url(../imgs/mask-17-svg.png); } .about-brand-company-video .content { position: relative; } .about-brand-company-video .content .bg { aspect-ratio: 16 / 6; font-size: 0; } .about-brand-company-video .content .bg img { width: 100%; height: 100%; object-fit: cover; } .about-brand-company-video .container { position: absolute; inset: 0; background-color: #00000040; } .about-brand-company-video .container::before { position: absolute; content: ''; inset: 0; background-image: url(../imgs/bg_overlay.png); opacity: 0.2; z-index: 1; } .about-brand-company-video .container .text { position: relative; z-index: 2; width: 100%; height: 100%; } .about-brand-company-video .container .text>h2 { letter-spacing: 2px; background: linear-gradient(to right, #2eb8c3, #b0dbe1); -webkit-background-clip: text; background-clip: text; color: transparent; } .about-brand-company-video .container .text .paly { position: relative; cursor: pointer; } .about-brand-company-video .container .text .paly::before, .about-brand-company-video .container .text .paly::after { position: absolute; inset: 0; content: ''; border: 1px solid var(--color-blue); transform: scale(1.1); border-radius: 200px; opacity: 0.8; animation: play 1.2s ease-out 0s infinite; } .about-brand-company-video .container .text .paly::after { transform: scale(1.2); opacity: 0.5; animation: play2 1.2s ease-out 0s infinite; } @keyframes play { 0% { transform: scale(1.2); opacity: 0.5; } 30% { opacity: 0.5; } 100% { transform: scale(1.3); opacity: 0.2; } } @keyframes play2 { 0% { transform: scale(1.3); opacity: 0.3; } 30% { opacity: 0.3; } 100% { transform: scale(1.5); opacity: 0; } } .about-brand-company-video .content .mask { background: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999; display: none; } .about-brand-company-video .content .mask.active { display: block; } .about-brand-company-video .content .mask .video-box { width: 100%; max-width: 860px; height: auto; aspect-ratio: 16 / 9; position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; } .about-brand-company-video .content .mask .video-box video { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: fill; } .about-brand-company-video .content .mask .video-box .close { position: absolute; right: -1rem; top: -1rem; width: 2rem; height: 2rem; background-color: var(--color-blue); border-radius: 2rem; cursor: pointer; } .about-brand-history .year-bar { margin-left: auto; max-width: 65%; overflow: hidden; padding: 0 2rem; position: relative; } .about-brand-history .year-bar .swiper-button-next, .about-brand-history .year-bar .swiper-button-prev { color: var(--color-blue); position: absolute; right: unset; left: 0; top: 50%; transform: translateY(-50%); margin-top: unset; height: 100%; width: 2rem; text-align: center; background-color: #fff; } .about-brand-history .year-bar .swiper-button-next:after, .about-brand-history .year-bar .swiper-button-prev:after { font-size: 16px; font-weight: 700; opacity: 0.8; } .about-brand-history .year-bar .swiper-button-next { right: 0; left: unset; } .about-brand-history .year-bar .item { padding: 2px 16px; background-color: transparent; border-radius: 2rem; transition: all 0.2s; opacity: 0.8; text-align: center; cursor: pointer; } .about-brand-history .year-bar .item.swiper-slide-active { background-color: var(--color-blue); color: #fff; } .about-brand-history .history-container { position: relative; width: 100%; overflow: hidden; } .about-brand-history .history-container .swiper-button-next, .about-brand-history .history-container .swiper-button-prev { color: var(--color-blue); position: absolute; right: 5px; left: unset; top: unset; bottom: 0; /* transform: translateY(-50%); */ margin-top: unset; height: 2rem; width: 2rem; text-align: center; background-color: #cccccc50; transition: all 0.2s; opacity: .8; border-radius: 2rem; } .about-brand-history .history-container .swiper-button-next:hover, .about-brand-history .history-container .swiper-button-prev:hover { background-color: #c9e9ec; } .about-brand-history .history-container .swiper-button-next:after, .about-brand-history .history-container .swiper-button-prev:after { font-size: 12px; font-weight: 700; } .about-brand-history .history-container .swiper-button-prev { transform: translateX(calc(-100% - 1rem)); } .about-brand-history .history-slide { column-gap: 10%; } .about-brand-history .history-slide .list { width: 45%; flex-grow: 0; flex-shrink: 0; } .about-brand-history .history-slide .list-img { position: relative; aspect-ratio: 16 / 9; } .about-brand-history .history-slide .list-img .item { position: absolute; inset: 0; background-color: #fff; opacity: 0; visibility: hidden; transition: all 0.2s; pointer-events: none; overflow: hidden; } .about-brand-history .history-slide .list-img .item.active-1 { opacity: 1; visibility: visible; pointer-events: unset; } .about-brand-history .history-slide .list-img img, .about-brand-history .history-slide .list-img .img { width: 100%; height: 100%; background-color: #00000029; } .about-brand-history .history-slide .list-text { row-gap: .5rem; padding: 1rem 0; } .about-brand-history .history-slide .list-text .item { cursor: pointer; position: relative; } .about-brand-history .history-slide .list-text .item>h3 { transition: all 0.2s; position: relative; color: var(--color-gray); } .about-brand-history .history-slide .list-text .item.active-1>h3 { font-weight: 600; color: var(--color-black); } .about-brand-history .history-slide .list-text .item::before { position: absolute; left: -10px; top: 50%; transform: translateY(-50%); content: ''; width: 5px; height: 5px; border-radius: 5px; background-color: var(--color-black); opacity: 0; visibility: hidden; transition: all 0.2s; } /* .about-brand-history .history-slide .list-text .item:hover::before, */ .about-brand-history .history-slide .list-text .item.active-1::before { opacity: 1; visibility: visible; } .about-brand-award { background-color: #f9fafc; } .about-brand-award .award-content { position: relative; } .about-brand-award .award-content::before { content: ''; position: absolute; background-image: url(../imgs/dizuo.webp); background-position: center center; background-size: cover; background-repeat: no-repeat; transform: translate(-50%, 100%); left: 50%; bottom: -5px; z-index: 2; width: 118%; height: auto; aspect-ratio: 1662 / 98; } .about-brand-award .award-cate .list { padding: 8px; background-color: #fff; column-gap: 1rem; } .about-brand-award .award-cate .item { width: 50%; padding: 8px 0; background-color: transparent; transition: all 0.2s; cursor: pointer; } .about-brand-award .award-cate .item.active { background-color: #c9e9ec; } .about-brand-award .award-cate .item.active h2 { color: var(--color-blue); } .about-brand-award .award-container { width: 100%; position: relative; overflow: hidden; display: none; } .about-brand-award .award-container.active { display: block; } .about-brand-award .award-container .item { /* border: 1px solid rgb(0 176 185 / 10%); */ padding: 1rem; background-color: #fff; /* box-shadow: 1px 1px 4px 0px rgb(0 176 185 / 10%); */ } .about-brand-award .award-container .item h3 { overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2em; height: 2.4em; } .about-brand-award .award-container .swiper-button-next, .about-brand-award .award-container .swiper-button-prev { color: var(--color-blue); position: absolute; right: unset; left: 0; top: 50%; transform: translateY(-50%); margin-top: unset; height: 4rem; width: 2rem; text-align: center; background-color: #cccccc50; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.2s; } .about-brand-award .award-container:hover .swiper-button-next, .about-brand-award .award-container:hover .swiper-button-prev { opacity: 1; visibility: visible; pointer-events: unset; } .about-brand-award .award-container .swiper-button-next:after, .about-brand-award .award-container .swiper-button-prev:after { font-size: 16px; font-weight: 700; opacity: 0.8; } .about-brand-award .award-container .swiper-button-next { right: 0; left: unset; } .about-brand-culture .title .desc { line-height: 1.8; } .about-brand-culture .culture-container .item { width: calc(100% / 3); padding: 2rem 0; } .about-brand-culture .culture-container .item .icon-svg { /* max-width: 68px; */ } .about-brand-culture .culture-container .item .icon-svg svg { aspect-ratio: 1 / 1; } .about-brand-culture .culture-container .item .icon-svg svg path { transition: all 0.2s; } .about-brand-culture .culture-container .item:hover .icon-svg svg path { fill: var(--color-blue); } .about-brand-culture .culture-container .item:hover h3, .about-brand-culture .culture-container .item:hover p { color: var(--color-blue); } .about-brand-dynamic { background-color: #f7f9f9; } .about-brand-dynamic .dynamic-article { width: 100%; display: grid; grid-gap: 2rem; row-gap: 2rem; grid-template-columns: var(--grid-list-column-3); } .about-brand-dynamic .dynamic-article .item { border: 1px solid #fff; } .about-brand-dynamic .dynamic-article .item>a { height: 100%; } .about-brand-dynamic .dynamic-article .item .img { width: 100%; flex-shrink: 0; aspect-ratio: 16 / 9; overflow: hidden; } .about-brand-dynamic .dynamic-article .item .img img { width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; } .about-brand-dynamic .dynamic-article .item .text { padding: 2rem 1rem 1rem; width: 100%; flex-grow: 1; background-color: #fff; } .about-brand-dynamic .dynamic-article .item .text .title { overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.4em; height: 2.8em; margin-bottom: .5rem; transition: all 0.2s; } .about-brand-dynamic .dynamic-article .item:hover .text .title { color: var(--color-blue); } .about-brand-dynamic .dynamic-article .item .text .tags { font-size: 0.85em; margin-top: auto; } /* 联系我们 */ .about-contact-form .container { column-gap: 5rem; } .about-contact-form .container .left { width: 100%; max-width: 600px; } .about-contact-form .container .left ul { row-gap: 1rem; } .about-contact-form .container .left ul i.icon { color: var(--color-blue); margin-right: 1rem; } .about-contact-form .container .right { padding: 2rem; background: #fff; border: 1px solid #a1a1a124; flex-grow: 1; box-shadow: 0 1px 20px #00000014; } .about-contact-form .container .right .contact-form { max-width: 800px; width: 100%; margin-left: auto; margin-right: auto; } /* #endregion */ /* #region 管理平台页面 */ .tagcloud-page-ability .title h2, .tagcloud-page-demo .title h2 { background: linear-gradient(to right bottom, #0abff0 30%, #07e4dc 60%); color: transparent; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; } .tagcloud-page-demo{ background-color: #f9fafc; } .tagcloud-page-demo .content { position: relative; } .tagcloud-page-demo .content>img{ aspect-ratio: 1497 / 860; max-width: 840px; width: 100%; } .tagcloud-page-ability .img { position: relative; aspect-ratio: 1585 / 759; max-width: 1280px; margin-inline: auto; box-shadow: 2px 2px 30px 0px rgb(122 204 215 / 32%); overflow: hidden; } .tagcloud-page-ability .img { position: relative; } .tagcloud-page-ability .img>a.go-to { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: linear-gradient(to right, #0abff0 30%, #07e4dc 60%); box-shadow: 1px 1px 20px 0px rgb(29 43 45 / 27%); color: #fff; padding: 8px 3rem; transition: all .3s ease-in-out; letter-spacing: 3px; } .tagcloud-page-ability .img>a.go-to:hover{ transform: translate(-50%, calc( -50% + 4px)); } .tagcloud-page-ability .text>ul { row-gap: 5px; width: 100%; max-width: 780px; margin-inline: auto; } .tagcloud-page-ability .text>ul>li { width: calc( (100% - 2rem ) / 4 ); } .tagcloud-page-desc .content { column-gap: 6%; } .tagcloud-page-desc .content>div { width: 50%; } .tagcloud-page-desc .content>div.text { width: 55%; line-height: 2; } .tagcloud-page-advantage .container { position: relative; } .tagcloud-page-advantage .container .bg{ position: absolute; z-index: 1; pointer-events: none; inset: 0; } .tagcloud-page-advantage .container .bg>img{ aspect-ratio: 1920 / 550; width: 100%; } .tagcloud-page-advantage .container .content { position: relative; z-index: 2; height: 100%; width: 100%; } .tagcloud-page-advantage .content>div { width: 50%; /* overflow: hidden; */ } .tagcloud-page-advantage .content .media .video, .tagcloud-page-advantage .content .media .img{ position: relative; font-size: 0; aspect-ratio: 800 / 450 ; width: 100%; overflow: hidden; } .tagcloud-page-advantage .content .media .img.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; } .tagcloud-page-advantage .content .media img, .tagcloud-page-advantage .content .media video{ width: 100%; height: 100%; object-fit: cover; } .tagcloud-page-advantage .content .video .video-mask { position: absolute; inset: 0; transition: all 0.3s ease-in-out; opacity: 1; visibility: visible; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #e3ffff52; } .tagcloud-page-advantage .content .video.autoplay .video-mask { display: none; } .tagcloud-page-advantage .content .video .video-mask .play-ico { cursor: pointer; width: 66px; height: 66px; position: relative; z-index: 12; border-radius: 50%; background-color: transparent; text-align: center; line-height: 66px; font-size: 0; color: var(--color-blue); opacity: 0.5; } .tagcloud-page-advantage .content.text-right .text { order: 2; } .tagcloud-page-advantage .content.text-center>div { width: 100%; } .tagcloud-page-advantage .content.text-center>div.text { max-width: 980px; } .tagcloud-page-advantage .content.text-center .media .img{ aspect-ratio: 1634 / 712 ; box-shadow: 2px 2px 30px 0px rgb(122 204 215 / 32%); max-width: 1280px; margin-inline: auto; } /* #endregion */ /* #region 搜索结果页*/ .search-results{ background-color: #f7f9f9; } .search-results .container{ width: 100%; column-gap: 2rem; row-gap: 2rem; } .search-results .search-item{ position: relative; background-color: #fff; box-shadow: 3px 3px 10px 0px rgba(7, 62, 107, 0.11); width: calc( (100% - 2rem) / 2 ); } .search-results .search-item .img{ aspect-ratio: 4 / 3; width: 38%; overflow: hidden; flex-shrink: 0; /* box-shadow: 3px 3px 10px 0px rgba(7, 62, 107, 0.11); */ background-color: #fff; } .search-results .search-item .img>img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } .search-results .search-item.product-item .img>img{ width: auto; } .search-results .search-item .text{ padding: 1rem ; row-gap: 5px; } .search-results .search-item .text .info{ margin-top: auto; column-gap: 1rem; } .search-results .search-item .title{ line-height: 1.4; } .search-results .search-item .label{ background: linear-gradient(to right, #00cc3f 40%, #49b9d0 100%); padding: 3px 10px; font-size: calc( ( 13 / 14 ) * var(--font-size-root) ); color: #fff; border-radius: 2rem; margin-right: 3px; } /* #endregion */ /* #region 落地页*/ .loading-page-banner{ position: relative; } .loading-page-banner .bread-crumbs{ position: absolute; bottom: 1rem; left: 0; z-index: 2; text-align: right; opacity: 0.95; transition: all 0.2s; border-bottom: 1px dashed transparent; } .loading-page-banner .bread-crumbs a { margin-inline-end: 6px; color: #666; mix-blend-mode: difference; background-color: transparent; } .loading-page-banner .bread-crumbs a:last-child::after { content: ""; } .loading-page-banner .bread-crumbs a::after { content: "/"; margin-inline-start: 5px; } .loading-page-product-list{ background-color: #f9fafc; } .loading-page-product-list .product-nav .list li { cursor: pointer; padding: 5px 2rem; border-bottom: 2px solid #ccc; transition: all 0.3s ease-in-out; position: relative; } .loading-page-product-list .product-nav .list li:hover , .loading-page-product-list .product-nav .list li.active { color: var(--color-blue); /* border-bottom: 2px solid var(--color-blue); */ } .loading-page-product-list .product-nav .list li::after { position: absolute; content: ''; bottom: -2px; left: 50%; transform: translateX(-50%); background-color: var(--color-blue); width: 4rem; height: 3px; opacity: 0; transition: all 0.2s ease-in-out; } /* .loading-page-product-list .product-nav .list li:hover::after, */ .loading-page-product-list .product-nav .list li.active::after { opacity: 1; } .loading-page-product-list .product-container .product-list-box{ display: none; } .loading-page-product-list .product-container .product-list-box.active{ display: block; } .loading-page-product-list .product-container .item { background-color: #fff; padding: 1rem; box-shadow: 2px 4px 12px #00000014; transition: all .3s cubic-bezier(0, 0, .5, 1); overflow: hidden; cursor: pointer; } .loading-page-product-list .product-container .above>img{ width: 100%; aspect-ratio: 1 / 1; transition: all 0.4s ease-in-out; } .loading-page-product-list .product-container .above .title { overflow: hidden; /* white-space: nowrap; */ overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-height: 1.35em; height: 1.35em; border-top: 1px dashed #e3ebf4; padding-top: 10px; box-sizing: content-box; transition: all .2s cubic-bezier(0, 0, .5, 1); width: 100%; } .loading-page-product-list .product-container .behind .feature { row-gap: 5px; } .loading-page-product-list .product-container .behind .feature span{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; } .loading-page-product-list .product-container .behind .btns{ justify-content: flex-end; } .loading-page-product-list .product-container .behind .btns{ position: relative; } .loading-page-product-list .product-container .behind .btns>a.aff{ padding: 5px 1rem; background-color: var(--color-blue); color: #fff; } .loading-page-product-list .product-container .behind .btns>a.more{ font-size: 0.85em; } .loading-page-contact-form{ /* background-color: #f1f4f8; */ /* box-shadow: 0 1px 20px #00000014; */ } .loading-page-contact-form .contact-form{ padding: 2rem; /* border-radius: 10px; */ /* box-shadow: 0 1px 20px #00000014; */ } .loading-page-contact-form .contact-form .wpcf7-form-container{ column-gap: 4%; } .loading-page-contact-form .contact-form .wpcf7-form-container>div{ width: 48%; } /* #endregion */ /* #region 搜索结果页*/ /* #endregion */ /* #region 搜索结果页*/ /* #endregion */