所有项目提交
This commit is contained in:
254
驭鑫/yxsilicon/css/aboutUs.css
Normal file
254
驭鑫/yxsilicon/css/aboutUs.css
Normal file
@@ -0,0 +1,254 @@
|
||||
.aboutUs{
|
||||
width: 100%;
|
||||
height: 88vh;
|
||||
/* background: palegoldenrod; */
|
||||
position: relative;
|
||||
}
|
||||
.aboutUs .container{
|
||||
width: 100%;
|
||||
height: 83%;
|
||||
/* background: palevioletred; */
|
||||
background-image: url(../imgs/关于我们图.jpg);
|
||||
background-size:100% auto;
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.aboutUs-content{
|
||||
width:20vw;
|
||||
height: 20vh;
|
||||
/* background: palevioletred; */
|
||||
position: absolute;
|
||||
bottom: 6vh;
|
||||
left: 15vw;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.aboutUs-content-img{
|
||||
width: 43%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.with-border{
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.with-border img{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt{
|
||||
/* background: palevioletred; */
|
||||
width: 48%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt p:nth-of-type(1){
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.7);
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt p:nth-of-type(2){
|
||||
font-size: 0.8vw;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.3);
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
|
||||
.textBox{
|
||||
width: 19vw;
|
||||
height: 30vh;
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
left: 8vw;
|
||||
}
|
||||
|
||||
.textBox-title{
|
||||
margin-top: 1vh;
|
||||
|
||||
}
|
||||
|
||||
.textBox-title p{
|
||||
|
||||
line-height: 30px;
|
||||
color: rgba(0,0,0,0.7);
|
||||
|
||||
}
|
||||
|
||||
.textBox-title p:nth-of-type(1){
|
||||
font-size: 0.9vw;
|
||||
|
||||
}
|
||||
.textBox-title p:nth-of-type(2){
|
||||
font-size: 0.75vw;
|
||||
margin-top: 0.5vh;
|
||||
|
||||
}
|
||||
|
||||
.staffBox{
|
||||
width: 100%;
|
||||
height: 45vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
}
|
||||
.staffBox-left,.staffBox-right{
|
||||
width: 13vw;
|
||||
height: 68%;
|
||||
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2);
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.top, .bottom{
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.top div{
|
||||
width: 50%;
|
||||
height:100%;
|
||||
text-align: right;
|
||||
}
|
||||
.top-title{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
align-items: end;
|
||||
}
|
||||
.top-title p:nth-of-type(1){
|
||||
font-size: 1vw;
|
||||
color: rgba(0,0,0,0.7);
|
||||
text-align: right;
|
||||
width: 80%;
|
||||
padding-right: 0.4vw;
|
||||
|
||||
}
|
||||
.top-title p:nth-of-type(2){
|
||||
font-size: 2vw;
|
||||
color: rgba(0,0,0,0.3);
|
||||
text-align: right;
|
||||
font-weight: 600;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.top-img {
|
||||
text-align: center !important;
|
||||
padding-top: 4vh;
|
||||
}
|
||||
|
||||
.top-img img{
|
||||
width: 55%;
|
||||
height: auto;
|
||||
}
|
||||
.bottom-title{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.bottom-title p{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
display: flex;
|
||||
justify-content: left;
|
||||
align-items: center;
|
||||
margin-top: 0.5vh;
|
||||
padding-left: 1vw;
|
||||
}
|
||||
.colorBlock{
|
||||
display: inline-block;
|
||||
width: 0.8vw;
|
||||
height: 1.1vh;
|
||||
background: #29C2EB;
|
||||
border-radius: 3px;
|
||||
margin-right: 0.5vw;
|
||||
}
|
||||
.colorBlock2{
|
||||
display: inline-block;
|
||||
width: 0.8vw;
|
||||
height: 1.1vh;
|
||||
border-radius: 3px;
|
||||
margin-right: 0.5vw;
|
||||
background: #1F589B;
|
||||
}
|
||||
.colorBlock3{
|
||||
display: inline-block;
|
||||
width: 0.8vw;
|
||||
height: 1.1vh;
|
||||
border-radius: 3px;
|
||||
margin-right: 0.5vw;
|
||||
background: #0C3660;
|
||||
}
|
||||
.colorBlock4{
|
||||
display: inline-block;
|
||||
width: 0.8vw;
|
||||
height: 1.1vh;
|
||||
border-radius: 3px;
|
||||
margin-right: 0.5vw;
|
||||
background: #B160A2;
|
||||
}
|
||||
.colorBlock5{
|
||||
display: inline-block;
|
||||
width: 0.8vw;
|
||||
height: 1.1vh;
|
||||
border-radius: 3px;
|
||||
margin-right: 0.5vw;
|
||||
background: #601A56;
|
||||
}
|
||||
.Block2 , .Block3{
|
||||
font-size: 0.7vw;
|
||||
color: rgba(0,0,0,0.7);
|
||||
margin-right: 0.5vw;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.bottom-img{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
/* padding-top: 2vh; */
|
||||
}
|
||||
.bottom-img img{
|
||||
width: 80%;
|
||||
height: auto;
|
||||
}
|
||||
/* .staffBox-left{
|
||||
width: 12vw;
|
||||
height: 70%;
|
||||
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2);
|
||||
border-radius: 15px;
|
||||
} */
|
||||
|
||||
.staffBox-right{
|
||||
margin-left: 8vw;
|
||||
}
|
||||
|
||||
|
||||
|
||||
75
驭鑫/yxsilicon/css/base.css
Normal file
75
驭鑫/yxsilicon/css/base.css
Normal file
@@ -0,0 +1,75 @@
|
||||
/* 所有标签的内外边距清零 */
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
/* css3盒子模型 */
|
||||
box-sizing: border-box;
|
||||
font-family:DFKai-SB;
|
||||
}
|
||||
/* em 和 i 斜体的文字不倾斜 */
|
||||
em,
|
||||
i {
|
||||
font-style: normal
|
||||
}
|
||||
html,body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* 去掉li 的小圆点 */
|
||||
/* li {
|
||||
list-style: none
|
||||
} */
|
||||
/* ul{
|
||||
list-style: none;
|
||||
} */
|
||||
|
||||
img {
|
||||
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
|
||||
border: 0;
|
||||
/* 取消图片底侧有空白缝隙的问题 */
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button {
|
||||
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #c81623
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
|
||||
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
|
||||
/* 默认有灰色边框我们需要手动去掉 */
|
||||
}
|
||||
|
||||
body {
|
||||
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
/* background-color: #fff; */
|
||||
/* font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; */
|
||||
/* color: #666 */
|
||||
}
|
||||
|
||||
.hide,
|
||||
.none {
|
||||
display: none
|
||||
}
|
||||
/* 清除浮动 */
|
||||
.clearfix::after {
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
display: block;
|
||||
content: ".";
|
||||
height: 0
|
||||
}
|
||||
|
||||
227
驭鑫/yxsilicon/css/contactUs.css
Normal file
227
驭鑫/yxsilicon/css/contactUs.css
Normal file
@@ -0,0 +1,227 @@
|
||||
.aboutUs{
|
||||
width: 100%;
|
||||
height: 88vh;
|
||||
/* background: palegoldenrod; */
|
||||
position: relative;
|
||||
}
|
||||
.aboutUs .container{
|
||||
width: 100%;
|
||||
height: 83%;
|
||||
/* background: palevioletred; */
|
||||
background-image: url(../imgs/联系我们背景图.png);
|
||||
background-size:100% 100%;
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.aboutUs-content{
|
||||
width:20vw;
|
||||
height: 20vh;
|
||||
/* background: palevioletred; */
|
||||
position: absolute;
|
||||
bottom: 6vh;
|
||||
left: 15vw;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.aboutUs-content-img{
|
||||
width: 43%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.with-border{
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.with-border img{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt{
|
||||
/* background: palevioletred; */
|
||||
width: 48%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt p:nth-of-type(1){
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.7);
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt p:nth-of-type(2){
|
||||
font-size: 0.8vw;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.3);
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
|
||||
.textBox{
|
||||
width: 20vw;
|
||||
height: 50vh;
|
||||
position: absolute;
|
||||
top: 18vh;
|
||||
left: 40vw;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.gifBox{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
.gifBox img{
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.textBox-title{
|
||||
margin-top: 1vh;
|
||||
|
||||
}
|
||||
|
||||
.textBox-title p{
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
color: rgba(255,255,255,0.9);
|
||||
font-size: 0.9vw;
|
||||
|
||||
text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
.textBox-title p:nth-of-type(1){
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
text-shadow: 2px 2px 8px rgba(0, 0, 0, 1);
|
||||
|
||||
}
|
||||
.textBox-title p:nth-of-type(2){
|
||||
font-size: 0.9vw;
|
||||
margin-top: 1.8vh;
|
||||
|
||||
}
|
||||
|
||||
/* 地址 */
|
||||
|
||||
.addressBox{
|
||||
width: 100%;
|
||||
height:70vh;
|
||||
}
|
||||
.addressBox-top{
|
||||
width: 40%;
|
||||
height: 10vh;
|
||||
padding-bottom: 3vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.emailBox{
|
||||
width: 8vw;
|
||||
|
||||
/* background: olive; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding-top: 3vh;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.emailBox img{
|
||||
width: 23%;
|
||||
height: auto;
|
||||
margin-bottom: 1vh;
|
||||
|
||||
}
|
||||
.emailBox a{
|
||||
font-size: 0.7vw;
|
||||
color: rgba(0,0,0,0.7);
|
||||
margin-top: 8px;
|
||||
}
|
||||
a:hover{
|
||||
color: #2AC2EC;
|
||||
}
|
||||
|
||||
.positioningBox{
|
||||
width: 22vw;
|
||||
height: 100%;
|
||||
/* background: olive; */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.positioningBox img{
|
||||
width:auto;
|
||||
height: 8vh;
|
||||
}
|
||||
.positioningBox p{
|
||||
font-size: 0.8vw;
|
||||
color: rgba(0,0,0,0.7);
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.addressBox-bottom{
|
||||
width: 40%;
|
||||
height: 50vh;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
margin-top: 3vh;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#mapContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 300px; /* 确保地图有最小高度 */
|
||||
}
|
||||
|
||||
/* 自定义信息窗体样式 */
|
||||
.amap-info-content {
|
||||
padding: 10px;
|
||||
border-radius: 8px;
|
||||
font-family: DFKai-SB;
|
||||
}
|
||||
|
||||
.info-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.info-address {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
75
驭鑫/yxsilicon/css/footer.css
Normal file
75
驭鑫/yxsilicon/css/footer.css
Normal file
@@ -0,0 +1,75 @@
|
||||
.footer{
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
background-image: url(../imgs/背景底.jpg);
|
||||
/* background-size: cover; */
|
||||
background-position: 5% 0%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.footer-content{
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
.footer-left{
|
||||
width: 30%;
|
||||
height: 60%;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
/* background: palegoldenrod; */
|
||||
}
|
||||
.footer-left img{
|
||||
width: 5vw;
|
||||
height:auto;
|
||||
|
||||
}
|
||||
|
||||
.footer-right{
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
/* background: palevioletred; */
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: right;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding-bottom: 20px;
|
||||
font-size: 0.6vw;
|
||||
}
|
||||
.footer-left-content{
|
||||
height: 100%;
|
||||
color: white;
|
||||
font-size: 0.7vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* align-items: end; */
|
||||
justify-content: end;
|
||||
|
||||
}
|
||||
.YXemail{
|
||||
color: white;
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
|
||||
.YXemail:hover{
|
||||
color: #007bff;
|
||||
}
|
||||
.footer-left p{
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.record{
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.record:hover{
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
|
||||
51
驭鑫/yxsilicon/css/header.css
Normal file
51
驭鑫/yxsilicon/css/header.css
Normal file
@@ -0,0 +1,51 @@
|
||||
.header{
|
||||
width: 100%;
|
||||
height: 11vh;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
}
|
||||
.header .container{
|
||||
width: 65%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.logo{
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: right;
|
||||
}
|
||||
.logo img{
|
||||
width: 3vw;
|
||||
height: auto;
|
||||
}
|
||||
.header ul{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/* background: palevioletred; */
|
||||
margin-left: 5vw;
|
||||
}
|
||||
.header ul li{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.9vw;
|
||||
}
|
||||
.header ul li a{
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.header ul li a:hover{
|
||||
font-size: 1vw;
|
||||
color: rgba(0, 0, 0, 1);
|
||||
text-shadow: 0 0 10px rgba(41, 111, 216, 0.5);
|
||||
}
|
||||
237
驭鑫/yxsilicon/css/index.css
Normal file
237
驭鑫/yxsilicon/css/index.css
Normal file
@@ -0,0 +1,237 @@
|
||||
|
||||
.banner{
|
||||
width: 100%;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
position: relative;
|
||||
padding-bottom: 170px;
|
||||
}
|
||||
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 83vh;
|
||||
background-image: url(../imgs/首页.jpg);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
}
|
||||
.content{
|
||||
width:60%;
|
||||
height: 75%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
|
||||
}
|
||||
.content .title{
|
||||
text-align: center;
|
||||
|
||||
padding-right: 4%;
|
||||
}
|
||||
.content .title h1{
|
||||
font-size: 4.5vw;
|
||||
font-weight: 600;
|
||||
letter-spacing: 3px;
|
||||
margin-top: 22%;
|
||||
|
||||
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
|
||||
|
||||
}
|
||||
.content .title p{
|
||||
font-size: 2.5vw;
|
||||
font-weight: 400;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
text-align: right;
|
||||
padding-right: 5vw;
|
||||
letter-spacing: 10px;
|
||||
}
|
||||
.content .text{
|
||||
width: 51%;
|
||||
font-size: 0.86vw;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
margin-left: 24%;
|
||||
line-height: 35px;
|
||||
text-indent: 2em;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.content .list{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 24%;
|
||||
width: 50%;
|
||||
height:300px;
|
||||
}
|
||||
.content .list ul{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
color: #000;
|
||||
/* align-items: center; */
|
||||
}
|
||||
.content .list ul li{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
}
|
||||
ul li .roundImg{
|
||||
width: clamp(150px, 9vw, 400px); /* 最小200px，最大400px，默认20vw */
|
||||
height: auto;
|
||||
list-style: none;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
ul li .roundImg:hover{
|
||||
width: clamp(150px, 10vw, 400px);
|
||||
box-shadow: 0 0 20px rgba(63, 53, 206, 0.5);
|
||||
|
||||
}
|
||||
ul li .roundImg img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: 50%; /* 如果是圆形图片 */
|
||||
|
||||
}
|
||||
|
||||
ul li .textImg{
|
||||
width: 100%;
|
||||
|
||||
margin-left: 0px;
|
||||
padding-left: 0px;
|
||||
margin-top: 18px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
ul li .imgTitle{
|
||||
font-size: 23px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
ul li .imgTitleEN{
|
||||
font-size: 16px;
|
||||
color: #A8A8A8;
|
||||
|
||||
}
|
||||
|
||||
.we{
|
||||
width: 100%;
|
||||
height: 50vh;
|
||||
/* background-color: palegoldenrod; */
|
||||
|
||||
}
|
||||
.weList{
|
||||
width: 40%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
margin: 0 auto;
|
||||
/* background: paleturquoise; */
|
||||
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.weList li{
|
||||
list-style: none;
|
||||
width: 12vw;
|
||||
/* height: 100%; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
/* background: peachpuff; */
|
||||
|
||||
}
|
||||
.weList li img{
|
||||
/* width: 100%; */
|
||||
object-fit: cover; /* 保持图片比例填充 */
|
||||
display: block; /* 避免图片底部间隙 */
|
||||
|
||||
}
|
||||
.core{
|
||||
position: absolute;
|
||||
top: 21.5vh;
|
||||
left: 17%;
|
||||
}
|
||||
.core2{
|
||||
position: absolute;
|
||||
top: 21.5vh;
|
||||
left: 22%;
|
||||
}
|
||||
.core3{
|
||||
position: absolute;
|
||||
top: 21.5vh;
|
||||
left: 24%;
|
||||
}
|
||||
ul .weList1 img{
|
||||
width: auto;
|
||||
height: 35vh;
|
||||
/* background-image: url(../imgs/核心技术.png);
|
||||
background-size: 12vw auto;
|
||||
background-position: 0.5vw 1.4vw;
|
||||
background-repeat: no-repeat; */
|
||||
}
|
||||
ul .weList2 img{
|
||||
width: auto;
|
||||
height: 35vh;
|
||||
/* background-image: url(../imgs/技术团队.png);
|
||||
background-size:10.2vw auto;
|
||||
background-position: 0.8vw 2vw;
|
||||
background-repeat: no-repeat; */
|
||||
}
|
||||
ul .weList3 img{
|
||||
width: auto;
|
||||
height: 35vh;
|
||||
/* background-image: url(../imgs/技术支持.png);
|
||||
background-size: 10.95vw auto;
|
||||
background-position: 0.5vw 0vw;
|
||||
background-repeat: no-repeat; */
|
||||
}
|
||||
|
||||
.weListTitle{
|
||||
/* margin-top: 7vh; */
|
||||
font-size: 0.8vw;
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
margin-bottom: 0.6vw;
|
||||
/* background: palegreen; */
|
||||
height: 11vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.weListText{
|
||||
font-size: 0.6vw;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
padding-bottom: 1vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
326
驭鑫/yxsilicon/css/productIntroduction.css
Normal file
326
驭鑫/yxsilicon/css/productIntroduction.css
Normal file
@@ -0,0 +1,326 @@
|
||||
.aboutUs{
|
||||
width: 100%;
|
||||
height: 88vh;
|
||||
/* background: palegoldenrod; */
|
||||
position: relative;
|
||||
}
|
||||
/* .aboutUs .container{
|
||||
width: 100%;
|
||||
height: 83%;
|
||||
|
||||
} */
|
||||
|
||||
.CarouselBox{
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
/* 轮播图容器 */
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
.carousel-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 优化图片渲染 */
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
/* 添加这些属性以提升性能 */
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
}
|
||||
|
||||
/* 优化箭头按钮样式 */
|
||||
.carousel-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
z-index: 10;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.carousel-arrow:hover {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* 添加触摸设备支持 */
|
||||
@media (hover: none) {
|
||||
.carousel-arrow {
|
||||
display: none; /* 在触摸设备上隐藏箭头 */
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-arrow-left {
|
||||
left: 2vw;
|
||||
top: 48.7%;
|
||||
|
||||
}
|
||||
|
||||
.carousel-arrow-right {
|
||||
right: 2vw;
|
||||
|
||||
}
|
||||
/* 修正指示器容器样式 */
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 5vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 修正指示器小圆点样式 */
|
||||
.indicator {
|
||||
width: 8px; /* 稍微调小一点 */
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 补充激活状态的指示器样式 */
|
||||
.indicator.active {
|
||||
background-color: #fff; /* 高亮为纯白色 */
|
||||
transform: scale(1.2); /* 稍微放大 */
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 添加发光效果 */
|
||||
}
|
||||
/* 修正容器结构相关样式 */
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative; /* 确保是相对定位 */
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.indicator:hover {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.aboutUs-content{
|
||||
width:20vw;
|
||||
height: 20vh;
|
||||
/* background: palevioletred; */
|
||||
position: absolute;
|
||||
bottom: 6vh;
|
||||
left: 15vw;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.aboutUs-content-img{
|
||||
width: 43%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.with-border{
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.with-border img{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt{
|
||||
/* background: palevioletred; */
|
||||
width: 48%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
.exaboutUs-content-tt p{
|
||||
margin-left: 1vw;
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt p:nth-of-type(1){
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.7);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt p:nth-of-type(2){
|
||||
font-size: 0.8vw;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.3);
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
.textBox{
|
||||
width: 19vw;
|
||||
height: 30vh;
|
||||
position: absolute;
|
||||
top: 5vh;
|
||||
left: 8vw;
|
||||
}
|
||||
|
||||
.textBox-title{
|
||||
margin-top: 1vh;
|
||||
|
||||
}
|
||||
|
||||
.textBox-title p{
|
||||
|
||||
line-height: 30px;
|
||||
color: rgba(0,0,0,0.7);
|
||||
|
||||
}
|
||||
|
||||
.textBox-title p:nth-of-type(1){
|
||||
font-size: 0.9vw;
|
||||
|
||||
}
|
||||
.textBox-title p:nth-of-type(2){
|
||||
font-size: 0.75vw;
|
||||
margin-top: 0.5vh;
|
||||
|
||||
}
|
||||
|
||||
/* -------------------------- */
|
||||
|
||||
.productIntroduction{
|
||||
width: 100%;
|
||||
|
||||
/* background: palegoldenrod; */
|
||||
}
|
||||
.productIntroduction .top{
|
||||
width: 70%;
|
||||
height: 62vh;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
|
||||
.productIntroduction .top .top-left,.top-right{
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.productIntroduction .top-left img{
|
||||
width: 80%;
|
||||
height: auto;
|
||||
|
||||
}
|
||||
|
||||
.text-box{
|
||||
margin-top: 3vh;
|
||||
padding-left: 0.5vw;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-box p{
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
.text-box p:nth-of-type(1){
|
||||
font-size: 0.9vw;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
|
||||
.productIntroduction .top-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-right{
|
||||
padding-left: 7vw;
|
||||
}
|
||||
|
||||
|
||||
.productIntroduction .top-right img{
|
||||
width: 82%;
|
||||
height: auto;
|
||||
|
||||
|
||||
}
|
||||
.top2Box{
|
||||
width: 100%;
|
||||
background: #E9F1F3;
|
||||
padding-top: 5vh;
|
||||
}
|
||||
.top2Box .top{
|
||||
height: 53vh !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.productIntroduction .bottom{
|
||||
width: 100%;
|
||||
height: 55vh;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
background: #E9F1F3;
|
||||
}
|
||||
|
||||
.bottom-left{
|
||||
text-align: left;
|
||||
width: 32%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
.bottom-left img{
|
||||
width: 90%;
|
||||
|
||||
}
|
||||
|
||||
176
驭鑫/yxsilicon/css/solution.css
Normal file
176
驭鑫/yxsilicon/css/solution.css
Normal file
@@ -0,0 +1,176 @@
|
||||
.aboutUs{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* background: palegoldenrod; */
|
||||
position: relative;
|
||||
}
|
||||
.aboutUs .container{
|
||||
width: 100%;
|
||||
height: 73%;
|
||||
/* background: palevioletred; */
|
||||
background-image: url(../imgs/解决方案背景图.png);
|
||||
background-size:100% 100%;
|
||||
background-position: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.aboutUs-content{
|
||||
width:30vw;
|
||||
height: 25vh;
|
||||
/* background: palevioletred; */
|
||||
position: absolute;
|
||||
bottom: 15vh;
|
||||
left: 15vw;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
.aboutUs-content-img{
|
||||
width: 30%;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.with-border{
|
||||
padding: 3px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.with-border img{
|
||||
width: 100%;
|
||||
height:auto;
|
||||
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt{
|
||||
/* background: palevioletred; */
|
||||
width: 20vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt p:nth-of-type(1){
|
||||
font-size: 1.3vw;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.7);
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.exaboutUs-content-tt p:nth-of-type(2){
|
||||
font-size: 0.8vw;
|
||||
font-weight: 600;
|
||||
color: rgba(0,0,0,0.3);
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
|
||||
}
|
||||
.exaboutUs-content-tt p:nth-of-type(3){
|
||||
font-size: 0.8vw;
|
||||
/* font-weight: 600; */
|
||||
color: rgba(0,0,0,0.8);
|
||||
text-align: left;
|
||||
width: 80%;
|
||||
margin-top: 8px;
|
||||
|
||||
}
|
||||
/* ---------------- */
|
||||
.CarouselBox{
|
||||
width: 40vw;
|
||||
height: 45vh;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 8vh;
|
||||
left: 5vw;
|
||||
padding-bottom: 2vh;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
|
||||
/* 轮播图容器 */
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
object-fit: cover;
|
||||
}
|
||||
.carousel-list {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 优化图片渲染 */
|
||||
.carousel-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain; /* 改为contain，确保图片完整显示 */
|
||||
|
||||
user-select: none;
|
||||
/* 添加这些属性以提升性能 */
|
||||
-webkit-user-drag: none;
|
||||
-khtml-user-drag: none;
|
||||
-moz-user-drag: none;
|
||||
-o-user-drag: none;
|
||||
|
||||
}
|
||||
|
||||
/* 修正指示器容器样式 */
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
bottom: 2vh;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* 修正指示器小圆点样式 */
|
||||
.indicator {
|
||||
width: 8px; /* 稍微调小一点 */
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* 补充激活状态的指示器样式 */
|
||||
.indicator.active {
|
||||
background-color: #fff; /* 高亮为纯白色 */
|
||||
transform: scale(1.2); /* 稍微放大 */
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.9); /* 添加发光效果 */
|
||||
}
|
||||
/* 修正容器结构相关样式 */
|
||||
.carousel-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative; /* 确保是相对定位 */
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 悬停效果 */
|
||||
.indicator:hover {
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user