所有项目提交
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);
|
||||
}
|
||||
|
||||
135
驭鑫/yxsilicon/html/aboutUs.html
Normal file
135
驭鑫/yxsilicon/html/aboutUs.html
Normal file
@@ -0,0 +1,135 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/SVG/LOGO黑色字.svg">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/aboutUs.css">
|
||||
<link rel="stylesheet" href="../css/header.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<title>深圳驭鑫科技有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/SVG/LOGO黑色字.svg" alt="logo">
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a href="aboutUs.html" style="color: #2AC2EC;"> 关于我们</a></li>
|
||||
<li> <a href="productIntroduction.html"> 产品介绍</a></li>
|
||||
<li> <a href="solution.html"> 解决方案</a></li>
|
||||
<li> <a href="contactUs.html"> 联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<section class="aboutUs">
|
||||
<div class="container"></div>
|
||||
<div class="aboutUs-content">
|
||||
<div class="aboutUs-content-img">
|
||||
<div class="with-border">
|
||||
<img src="../imgs/我们的团队.png" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="exaboutUs-content-tt">
|
||||
|
||||
<p>
|
||||
我们的团队
|
||||
</p>
|
||||
<p>Our team</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="textBox">
|
||||
<div class="textBox-title">
|
||||
<p>
|
||||
扶摇万里，乘风致远
|
||||
</p>
|
||||
<p>深圳市驭鑫科技有限公司，成立于2021年1月。目前公司主营业务有:销售代理，芯片进出口，云计算服务器设备研发生产销售。</p>
|
||||
</div>
|
||||
<div class="textBox-title">
|
||||
<p>
|
||||
公司发展目标
|
||||
</p>
|
||||
<p>成为行业领先的芯片代理商，聚焦芯片代理服务、芯片进出口服务、云计算服务器设备研发、生成、销售，并形成有持续盈利能力的产品线。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="staffBox">
|
||||
<div class="staffBox-left">
|
||||
<div class="top">
|
||||
<div class="top-title">
|
||||
<p>人员结构</p>
|
||||
<p>12人</p>
|
||||
</div>
|
||||
|
||||
<div class="top-img">
|
||||
<img src="../imgs/SVG/人员结构.svg" alt="人员结构">
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottom-title">
|
||||
<p><span class="colorBlock"></span> <span class="Block2">CEO</span> <span class="Block3">1名</span></p>
|
||||
<p><span class="colorBlock2"></span> <span class="Block2">CFO</span> <span class="Block3">1名</span></p>
|
||||
<p><span class="colorBlock3"></span> <span class="Block2">研发</span> <span class="Block3">10名</span></p>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="bottom-img">
|
||||
<img src="../imgs/SVG/人员结构饼图.svg" alt="人员结构">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="staffBox-right">
|
||||
<div class="top">
|
||||
<div class="top-title" style="justify-content: center;align-items: end;">
|
||||
<p>员工学历</p>
|
||||
</div>
|
||||
|
||||
<div class="top-img">
|
||||
<img src="../imgs/SVG/员工学历.svg" alt="员工学历">
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="bottom-title">
|
||||
<p><span class="colorBlock4"></span> <span class="Block2">本科</span> <span class="Block3">2名</span></p>
|
||||
<p><span class="colorBlock5"></span> <span class="Block2">硕士</span> <span class="Block3">10名</span></p>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="bottom-img">
|
||||
<img src="../imgs/SVG/员工学历饼图.svg" alt="员工学历">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="footer">
|
||||
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<img src="../imgs/LOGO白色字.svg" alt="logo">
|
||||
<div class="footer-left-content">
|
||||
<p>广东省深圳市南山区高新中三道2号软件园一期7栋303室</p>
|
||||
<p><a class="YXemail" href="mailto:zmz@yxsilicon.com">zmz@yxsilicon.com</a></p>
|
||||
<p>工作时间: 9:30-18:00</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<p>Copyright ©深圳驭鑫科技有限公司 <a class="record" href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2021012067号-2</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
114
驭鑫/yxsilicon/html/contactUs.html
Normal file
114
驭鑫/yxsilicon/html/contactUs.html
Normal file
@@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/SVG/LOGO黑色字.svg">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/contactUs.css">
|
||||
<link rel="stylesheet" href="../css/header.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<script>
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: 'd7d163684cbe3ea85f182a42cd1b8880',
|
||||
}
|
||||
</script>
|
||||
<script src="https://webapi.amap.com/maps?v=2.0&key=d8d0391f0356497ccdc1c0f13d4a8c33&callback=initMap"></script>
|
||||
<script type="text/javascript" src="../js/contactUs.js"></script>
|
||||
<title>深圳驭鑫科技有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/SVG/LOGO黑色字.svg" alt="logo">
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a href="aboutUs.html" > 关于我们</a></li>
|
||||
<li> <a href="productIntroduction.html"> 产品介绍</a></li>
|
||||
<li> <a href="solution.html"> 解决方案</a></li>
|
||||
<li> <a href="#" style="color: #2AC2EC;"> 联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<section class="aboutUs">
|
||||
<div class="container"></div>
|
||||
<div class="aboutUs-content">
|
||||
<div class="aboutUs-content-img">
|
||||
<div class="with-border">
|
||||
<img src="../imgs/联系我们.png" alt="联系我们">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="exaboutUs-content-tt">
|
||||
|
||||
<p>
|
||||
联系我们
|
||||
</p>
|
||||
<p>Contact us</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="textBox">
|
||||
<div class="gifBox">
|
||||
<img src="../imgs/@标志.gif" alt="联系我们">
|
||||
</div>
|
||||
<div class="textBox-title">
|
||||
<p>我们期待您的联系</p>
|
||||
<p>
|
||||
为公司的成长和发展
|
||||
</p>
|
||||
<p>及时选择合适的人员并将他们安置在正确的位置</p>
|
||||
<p>以便每个成员</p>
|
||||
<p>都能大限度地发挥各自的能力</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="addressBox">
|
||||
<div class="addressBox-top">
|
||||
<div class="emailBox">
|
||||
<img src="../imgs/邮件.gif" alt="邮件">
|
||||
<a href="mailto:zmz@yxsilicon.com">zmz@yxsilicon.com</a>
|
||||
</div>
|
||||
|
||||
<div class="positioningBox">
|
||||
<img src="../imgs/定位.gif" alt="定位">
|
||||
<p>广东省深圳市南山区高新中三道2号软件园一期7栋303室</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="addressBox-bottom">
|
||||
<div id="mapContainer"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<img src="../imgs/LOGO白色字.svg" alt="logo">
|
||||
<div class="footer-left-content">
|
||||
<p>广东省深圳市南山区高新中三道2号软件园一期7栋303室</p>
|
||||
<p><a class="YXemail" href="mailto:zmz@yxsilicon.com">zmz@yxsilicon.com</a></p>
|
||||
<p>工作时间: 9:30-18:00</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<p>Copyright ©深圳驭鑫科技有限公司 <a class="record" href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2021012067号-2</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
184
驭鑫/yxsilicon/html/productIntroduction.html
Normal file
184
驭鑫/yxsilicon/html/productIntroduction.html
Normal file
@@ -0,0 +1,184 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/SVG/LOGO黑色字.svg">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/productIntroduction.css">
|
||||
<link rel="stylesheet" href="../css/header.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<script src="../js/productIntroduction.js"></script>
|
||||
<title>深圳驭鑫科技有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/SVG/LOGO黑色字.svg" alt="logo">
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a href="aboutUs.html"> 关于我们</a></li>
|
||||
<li> <a href="productIntroduction.html" style="color: #2AC2EC;"> 产品介绍</a></li>
|
||||
<li> <a href="solution.html"> 解决方案</a></li>
|
||||
<li> <a href="contactUs.html"> 联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<section class="aboutUs">
|
||||
|
||||
<div class="CarouselBox">
|
||||
<div class="carousel-container">
|
||||
<div class="carousel-list">
|
||||
<div class="carousel-item">
|
||||
<img src="../imgs/产品介绍图（滚动）/图1.png" alt="产品介绍">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../imgs/产品介绍图（滚动）/图2.png" alt="产品介绍">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../imgs/产品介绍图（滚动）/图3.png" alt="产品介绍">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../imgs/产品介绍图（滚动）/图4.png" alt="产品介绍">
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-arrow carousel-arrow-left">❮</div><div class="carousel-arrow carousel-arrow-right">❯</div> </div>
|
||||
<div class="carousel-indicators">
|
||||
<span class="indicator active"></span>
|
||||
<span class="indicator"></span>
|
||||
<span class="indicator"></span>
|
||||
<span class="indicator"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="aboutUs-content">
|
||||
<div class="aboutUs-content-img">
|
||||
<div class="with-border">
|
||||
<img src="../imgs/产品介绍.png" alt="">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="exaboutUs-content-tt">
|
||||
|
||||
<p>
|
||||
产品介绍
|
||||
</p>
|
||||
<p>Product introduction</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="productIntroduction">
|
||||
<div class="top">
|
||||
<div class="top-left">
|
||||
<img src="../imgs/芯片代理.png" alt="芯片代理">
|
||||
|
||||
<div class="text-box " >
|
||||
<p>芯片代理销售服务</p>
|
||||
<p>1.Game等专用加速芯片</p>
|
||||
<p>2.低功耗数据传输加解密芯片</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
|
||||
<img src="../imgs/芯片进出口.png" alt="芯片进出口">
|
||||
|
||||
<div class="text-box text-right">
|
||||
<p>芯片进出口服务</p>
|
||||
<p>提供便捷的芯片进出口业务</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="top2Box">
|
||||
<div class="top ">
|
||||
<div class="top-left">
|
||||
<img src="../imgs/设备研发.png" alt="设备研发">
|
||||
|
||||
<div class="text-box " >
|
||||
<p>云计算服务器设备研发</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
|
||||
<img src="../imgs/设备生产.png" alt="设备生产">
|
||||
|
||||
<div class="text-box text-right">
|
||||
<p>云计算服务器设备生产</p>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
|
||||
<div class="bottom-left" >
|
||||
<img src="../imgs/设备销售.png" alt="设备销售">
|
||||
<div class="text-box">
|
||||
<p>云计算服务器设备销售</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<img src="../imgs/LOGO白色字.svg" alt="logo">
|
||||
<div class="footer-left-content">
|
||||
<p>广东省深圳市南山区高新中三道2号软件园一期7栋303室</p>
|
||||
<p><a class="YXemail" href="mailto:zmz@yxsilicon.com">zmz@yxsilicon.com</a></p>
|
||||
<p>工作时间: 9:30-18:00</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<p>Copyright ©深圳驭鑫科技有限公司 <a class="record" href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2021012067号-2</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</footer>
|
||||
<script >
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
101
驭鑫/yxsilicon/html/solution.html
Normal file
101
驭鑫/yxsilicon/html/solution.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="../imgs/SVG/LOGO黑色字.svg">
|
||||
<link rel="stylesheet" href="../css/base.css">
|
||||
<link rel="stylesheet" href="../css/solution.css">
|
||||
<link rel="stylesheet" href="../css/header.css">
|
||||
<link rel="stylesheet" href="../css/footer.css">
|
||||
<script src="../js/solution.js"></script>
|
||||
<title>深圳驭鑫科技有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<img src="../imgs/SVG/LOGO黑色字.svg" alt="logo">
|
||||
</div>
|
||||
<ul>
|
||||
<li> <a href="../index.html"> 首页</a></li>
|
||||
<li> <a href="aboutUs.html" > 关于我们</a></li>
|
||||
<li> <a href="productIntroduction.html"> 产品介绍</a></li>
|
||||
<li> <a href="solution.html" style="color: #2AC2EC;"> 解决方案</a></li>
|
||||
<li> <a href="contactUs.html"> 联系我们</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
<section class="aboutUs">
|
||||
<div class="container"></div>
|
||||
<div class="aboutUs-content">
|
||||
<div class="aboutUs-content-img">
|
||||
<div class="with-border">
|
||||
<img src="../imgs/解决方案.png" alt="解决方案">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="exaboutUs-content-tt">
|
||||
|
||||
<p>
|
||||
解决方案
|
||||
</p>
|
||||
<p>Service case</p>
|
||||
<p>公司主要代理产品:Game等专用加速芯片</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="CarouselBox">
|
||||
<div class="carousel-container">
|
||||
<div class="carousel-list">
|
||||
<div class="carousel-item">
|
||||
<img src="../imgs/图1.png" alt="数据展示">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../imgs/图2.png" alt="数据展示">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../imgs/图3.png" alt="数据展示">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="../imgs/图4.png" alt="数据展示">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-indicators">
|
||||
<span class="indicator active"></span>
|
||||
<span class="indicator"></span>
|
||||
<span class="indicator"></span>
|
||||
<span class="indicator"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<img src="../imgs/LOGO白色字.svg" alt="logo">
|
||||
<div class="footer-left-content">
|
||||
<p>广东省深圳市南山区高新中三道2号软件园一期7栋303室</p>
|
||||
<p><a class="YXemail" href="mailto:zmz@yxsilicon.com">zmz@yxsilicon.com</a></p>
|
||||
<p>工作时间: 9:30-18:00</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<p>Copyright ©深圳驭鑫科技有限公司 <a class="record" href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2021012067号-2</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
BIN
驭鑫/yxsilicon/imgs/@标志.gif
Normal file
BIN
驭鑫/yxsilicon/imgs/@标志.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 682 KiB |
1
驭鑫/yxsilicon/imgs/LOGO白色字.svg
Normal file
1
驭鑫/yxsilicon/imgs/LOGO白色字.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306.88 315.62"><defs><style>.cls-1{fill:#2ac2ec;}.cls-2{fill:#1f599b;}.cls-3{font-size:50.03px;font-family:ArialMT, Arial;}.cls-3,.cls-4,.cls-5{fill:#fff;}.cls-4{font-size:33.08px;font-family:SimHei;letter-spacing:0.7em;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" x="37.39" y="95.29" width="272.98" height="14.42" rx="2.21" transform="translate(123.41 -92.93) rotate(45)"/><rect class="cls-2" x="-3.49" y="93.48" width="272.98" height="14.42" rx="2.21" transform="translate(110.16 -64.55) rotate(45)"/><path class="cls-2" d="M304.77,187.73,200.39,83.36l75.82-65.74a7.21,7.21,0,1,0-9.45-10.9l-80,69.37a7.2,7.2,0,0,0-2.3,11.74l110.11,110.1a7.21,7.21,0,0,0,10.2,0h0A7.22,7.22,0,0,0,304.77,187.73Z"/><path class="cls-1" d="M122.26,115.93a7.18,7.18,0,0,0-1.48-2.19L12.31,5.27a7.21,7.21,0,0,0-10.2,0h0a7.21,7.21,0,0,0,0,10.19L105.66,119l-75.3,65.29a7.21,7.21,0,1,0,9.45,10.9l81-70.21A7.19,7.19,0,0,0,122.26,115.93Z"/><rect class="cls-1" x="154.63" y="31.51" width="93.35" height="14.42" rx="2.21" transform="translate(23.85 141.34) rotate(-40.93)"/><rect class="cls-2" x="59.11" y="156.7" width="93.35" height="14.42" rx="2.21" transform="translate(-81.52 109.37) rotate(-40.93)"/><text class="cls-3" transform="translate(29.64 256.61) scale(0.97 1)">YXSILICON</text><text class="cls-4" transform="translate(42.67 310.45) scale(1.09 1)">驭鑫科技</text><rect class="cls-5" x="88.86" y="284.55" width="4.82" height="29.55"/><rect class="cls-5" x="149.88" y="284.55" width="4.82" height="29.55"/><rect class="cls-5" x="213.56" y="284.55" width="4.82" height="29.55"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
1
驭鑫/yxsilicon/imgs/SVG/LOGO黑色字.svg
Normal file
1
驭鑫/yxsilicon/imgs/SVG/LOGO黑色字.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 315.47 324.85"><defs><style>.cls-1{fill:#2ac2ec;}.cls-2{fill:#1f599b;}.cls-3{font-size:51.43px;font-family:ArialMT, Arial;}.cls-4{font-size:34.01px;font-family:SimHei;letter-spacing:0.7em;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><rect class="cls-1" x="38.44" y="98.35" width="280.63" height="14.82" rx="1.35" transform="translate(127.14 -95.42) rotate(45)"/><rect class="cls-2" x="-3.59" y="96.49" width="280.63" height="14.82" rx="1.35" transform="translate(113.51 -66.25) rotate(45)"/><path class="cls-2" d="M313.3,193.38,206,86.08,284,18.49a7.41,7.41,0,0,0-9.71-11.2L192,78.61a7.3,7.3,0,0,0-2.36,1.58,7.42,7.42,0,0,0,0,10.48L302.82,203.86a7.4,7.4,0,0,0,10.48,0h0A7.4,7.4,0,0,0,313.3,193.38Z"/><path class="cls-1" d="M125.69,119.56a7.41,7.41,0,0,0-1.52-2.24L12.65,5.8a7.4,7.4,0,0,0-10.48,0h0a7.42,7.42,0,0,0,0,10.48L108.62,122.73,31.21,189.86a7.41,7.41,0,1,0,9.71,11.2l83.23-72.17A7.41,7.41,0,0,0,125.69,119.56Z"/><rect class="cls-1" x="158.96" y="32.78" width="95.96" height="14.82" rx="1.35" transform="translate(24.26 145.39) rotate(-40.93)"/><rect class="cls-2" x="60.76" y="161.47" width="95.96" height="14.82" rx="1.35" transform="translate(-84.05 112.53) rotate(-40.93)"/><text class="cls-3" transform="translate(30.46 264.18) scale(0.97 1)">YXSILICON</text><text class="cls-4" transform="translate(43.86 319.53) scale(1.09 1)">驭鑫科技</text><rect x="91.35" y="292.91" width="4.96" height="30.38"/><rect x="154.08" y="292.91" width="4.96" height="30.38"/><rect x="219.54" y="292.91" width="4.96" height="30.38"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
驭鑫/yxsilicon/imgs/SVG/人员结构.svg
Normal file
1
驭鑫/yxsilicon/imgs/SVG/人员结构.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.89 59.75"><defs><style>.cls-1{fill:#2ac2ec;opacity:0.3;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path id="Vector" class="cls-1" d="M10.31,27.23a14.17,14.17,0,1,1,5.41,1.07A14.15,14.15,0,0,1,10.31,27.23Zm29.54,10a12.58,12.58,0,1,1,8.89,3.68,12.57,12.57,0,0,1-8.89-3.68Zm18.89,11a14.15,14.15,0,0,1,4.15,10v1.57H34.59V58.18a14.15,14.15,0,0,1,24.15-10Zm-37-15.53a15.74,15.74,0,0,1,9.7,14.53V59.75H0V47.17A15.74,15.74,0,0,1,21.74,32.64Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 557 B |
1
驭鑫/yxsilicon/imgs/SVG/人员结构饼图.svg
Normal file
1
驭鑫/yxsilicon/imgs/SVG/人员结构饼图.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99.98 99.97"><defs><style>.cls-1{fill:#2ac2ec;}.cls-2{fill:#0b3560;}.cls-3{fill:#1f599b;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M26.33,26.15a33.24,33.24,0,0,1,12.49-7.83L33.48,2.81A48.8,48.8,0,0,0,14.83,14.46l0,0Z"/><path class="cls-2" d="M97.78,35.24A50.28,50.28,0,0,0,37.63,1.53l4,15.92A33.63,33.63,0,1,1,17,43.86L.87,41.1H.8a50,50,0,1,0,97-5.85Z"/><path class="cls-3" d="M17.61,41h0A33.84,33.84,0,0,1,24.35,28.3L11.92,17.69l-.05,0a49.08,49.08,0,0,0-10.1,19.2L17.58,41Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 618 B |
1
驭鑫/yxsilicon/imgs/SVG/员工学历.svg
Normal file
1
驭鑫/yxsilicon/imgs/SVG/员工学历.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.89 70.75"><defs><style>.cls-1{fill:#b160a2;opacity:0.3;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path id="Vector" class="cls-1" d="M31.44,39.3A15.71,15.71,0,0,1,15.72,23.59h0l.43-3.69L3.93,13.76,31.44,0,59,13.76V33.41H55V15.72l-8.29,4.17.42,3.69A15.71,15.71,0,0,1,31.45,39.3ZM62.89,62.89v7.86H0V62.89C0,54.2,14.07,47.16,31.44,47.16s31.45,7,31.45,15.73Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 478 B |
1
驭鑫/yxsilicon/imgs/SVG/员工学历饼图.svg
Normal file
1
驭鑫/yxsilicon/imgs/SVG/员工学历饼图.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 99.98 99.97"><defs><style>.cls-1{fill:#b160a2;}.cls-2{fill:#601a56;}</style></defs><g id="图层_2" data-name="图层 2"><g id="图层_1-2" data-name="图层 1"><path class="cls-1" d="M38.82,18.32C27.79,22.66,21,30.48,17.62,41L1.77,36.85C6.85,19.47,18,8.79,33.48,2.81Z"/><path class="cls-2" d="M97.78,35.24A50.28,50.28,0,0,0,37.63,1.53l4,15.92A33.63,33.63,0,1,1,17,43.86L.87,41.1H.8a50,50,0,1,0,97-5.85Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 473 B |
BIN
驭鑫/yxsilicon/imgs/产品介绍.png
Normal file
BIN
驭鑫/yxsilicon/imgs/产品介绍.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
驭鑫/yxsilicon/imgs/产品介绍图（滚动）/图1.png
Normal file
BIN
驭鑫/yxsilicon/imgs/产品介绍图（滚动）/图1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 223 KiB |
BIN
驭鑫/yxsilicon/imgs/产品介绍图（滚动）/图2.png
Normal file
BIN
驭鑫/yxsilicon/imgs/产品介绍图（滚动）/图2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 729 KiB |
BIN
驭鑫/yxsilicon/imgs/产品介绍图（滚动）/图3.png
Normal file
BIN
驭鑫/yxsilicon/imgs/产品介绍图（滚动）/图3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 660 KiB |
BIN
驭鑫/yxsilicon/imgs/产品介绍图（滚动）/图4.png
Normal file
BIN
驭鑫/yxsilicon/imgs/产品介绍图（滚动）/图4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 543 KiB |
BIN
驭鑫/yxsilicon/imgs/关于我们.png
Normal file
BIN
驭鑫/yxsilicon/imgs/关于我们.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
驭鑫/yxsilicon/imgs/关于我们图.jpg
Normal file
BIN
驭鑫/yxsilicon/imgs/关于我们图.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
BIN
驭鑫/yxsilicon/imgs/图1.png
Normal file
BIN
驭鑫/yxsilicon/imgs/图1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
BIN
驭鑫/yxsilicon/imgs/图2.png
Normal file
BIN
驭鑫/yxsilicon/imgs/图2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
BIN
驭鑫/yxsilicon/imgs/图3.png
Normal file
BIN
驭鑫/yxsilicon/imgs/图3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
驭鑫/yxsilicon/imgs/图4.png
Normal file
BIN
驭鑫/yxsilicon/imgs/图4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 337 KiB |
BIN
驭鑫/yxsilicon/imgs/定位.gif
Normal file
BIN
驭鑫/yxsilicon/imgs/定位.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
驭鑫/yxsilicon/imgs/我们的团队.png
Normal file
BIN
驭鑫/yxsilicon/imgs/我们的团队.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
驭鑫/yxsilicon/imgs/技术团队.png
Normal file
BIN
驭鑫/yxsilicon/imgs/技术团队.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
驭鑫/yxsilicon/imgs/技术支持.png
Normal file
BIN
驭鑫/yxsilicon/imgs/技术支持.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
驭鑫/yxsilicon/imgs/核心技术.png
Normal file
BIN
驭鑫/yxsilicon/imgs/核心技术.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
驭鑫/yxsilicon/imgs/联系我们.png
Normal file
BIN
驭鑫/yxsilicon/imgs/联系我们.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
驭鑫/yxsilicon/imgs/联系我们背景图.png
Normal file
BIN
驭鑫/yxsilicon/imgs/联系我们背景图.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 645 KiB |
BIN
驭鑫/yxsilicon/imgs/背景底.jpg
Normal file
BIN
驭鑫/yxsilicon/imgs/背景底.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
驭鑫/yxsilicon/imgs/芯片代理.png
Normal file
BIN
驭鑫/yxsilicon/imgs/芯片代理.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
驭鑫/yxsilicon/imgs/芯片进出口.png
Normal file
BIN
驭鑫/yxsilicon/imgs/芯片进出口.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
BIN
驭鑫/yxsilicon/imgs/解决方案.png
Normal file
BIN
驭鑫/yxsilicon/imgs/解决方案.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
驭鑫/yxsilicon/imgs/解决方案背景图.png
Normal file
BIN
驭鑫/yxsilicon/imgs/解决方案背景图.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 675 KiB |
BIN
驭鑫/yxsilicon/imgs/设备生产.png
Normal file
BIN
驭鑫/yxsilicon/imgs/设备生产.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
驭鑫/yxsilicon/imgs/设备研发.png
Normal file
BIN
驭鑫/yxsilicon/imgs/设备研发.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
BIN
驭鑫/yxsilicon/imgs/设备销售.png
Normal file
BIN
驭鑫/yxsilicon/imgs/设备销售.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
驭鑫/yxsilicon/imgs/邮件.gif
Normal file
BIN
驭鑫/yxsilicon/imgs/邮件.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 229 KiB |
BIN
驭鑫/yxsilicon/imgs/首页.jpg
Normal file
BIN
驭鑫/yxsilicon/imgs/首页.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 800 KiB |
172
驭鑫/yxsilicon/index.html
Normal file
172
驭鑫/yxsilicon/index.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" href="imgs/SVG/LOGO黑色字.svg">
|
||||
<link rel="stylesheet" href="css/base.css">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<link rel="stylesheet" href="css/footer.css">
|
||||
<title>深圳驭鑫科技有限公司</title>
|
||||
</head>
|
||||
<body>
|
||||
<section class="banner">
|
||||
<div class="container">
|
||||
<section class="content">
|
||||
<div class="title">
|
||||
<h1>深圳驭鑫科技有限公司</h1>
|
||||
<p>YXSILICON</p>
|
||||
</div>
|
||||
|
||||
<div class="text">
|
||||
<p>深圳驭鑫科技有限公司成立于2021年1月，公司地址位于深圳市南山区。主要经营范围是芯片销售代理，芯片进出口，云计算服务器设备研发生产销售。公司注册资本为100万元人民币。</p>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<ul>
|
||||
<li class="nav-item" data-href="html/aboutUs.html">
|
||||
<div class="roundImg">
|
||||
<img src="imgs/关于我们.png" alt="关于我们">
|
||||
</div>
|
||||
<div class="textImg">
|
||||
<pc class="imgTitle">关于我们</pc>
|
||||
<p class="imgTitleEN"> About us</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item" data-href="html/productIntroduction.html">
|
||||
<div class="roundImg">
|
||||
<img src="imgs/产品介绍.png" alt="产品介绍">
|
||||
</div>
|
||||
<div class="textImg">
|
||||
<pc class="imgTitle">产品介绍</pc>
|
||||
<p class="imgTitleEN"> Product introduction</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item" data-href="html/solution.html">
|
||||
<div class="roundImg">
|
||||
<img src="imgs/解决方案.png" alt="解决方案">
|
||||
</div>
|
||||
<div class="textImg">
|
||||
<pc class="imgTitle">解决方案</pc>
|
||||
<p class="imgTitleEN">Service case</p>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item" data-href="html/contactUs.html">
|
||||
<div class="roundImg">
|
||||
<img src="imgs/联系我们.png" alt="联系我们">
|
||||
</div>
|
||||
<div class="textImg">
|
||||
<pc class="imgTitle">联系我们</pc>
|
||||
<p class="imgTitleEN">Contact us</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="we">
|
||||
<ul class="weList">
|
||||
<li class="weList1">
|
||||
<img src="imgs/核心技术.png" alt="核心技术">
|
||||
<div class="core">
|
||||
<p class="weListTitle">强大的核心技术</p>
|
||||
<p class="weListText">自主研发先进技术体系</p>
|
||||
<p class="weListText">产品竞争的关键技术集群</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<li class="weList2">
|
||||
<img src="imgs/技术团队.png" alt="技术团队">
|
||||
<div class="core2">
|
||||
<p class="weListTitle">优秀的技术团队</p>
|
||||
<p class="weListText">专业技术开发团队</p>
|
||||
<p class="weListText">专注于产品的研发和测试</p>
|
||||
</div>
|
||||
|
||||
|
||||
</li>
|
||||
<li class="weList3">
|
||||
<img src="imgs/技术支持.png" alt="技术支持">
|
||||
<div class="core3">
|
||||
<p class="weListTitle">专业的技术支持</p>
|
||||
<p class="weListText">定制化的解决方案</p>
|
||||
<p class="weListText">资深工程师团队全程护航</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<footer class="footer">
|
||||
|
||||
<div class="footer-content">
|
||||
<div class="footer-left">
|
||||
<img src="./imgs/LOGO白色字.svg" alt="logo">
|
||||
<div class="footer-left-content">
|
||||
<p>广东省深圳市南山区高新中三道2号软件园一期7栋303室</p>
|
||||
<p><a class="YXemail" href="mailto:zmz@yxsilicon.com">zmz@yxsilicon.com</a></p>
|
||||
<p>工作时间: 9:30-18:00</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="footer-right">
|
||||
<p>Copyright ©深圳驭鑫科技有限公司 <a class="record" href="https://beian.miit.gov.cn/#/Integrated/index">粤ICP备2021012067号-2</a></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const items = document.querySelectorAll('.nav-item');
|
||||
|
||||
items.forEach(item => {
|
||||
item.addEventListener('click', (e) => {
|
||||
const href = item.getAttribute('data-href');
|
||||
if (!href) {
|
||||
console.error('未设置跳转路径');
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查路径是否有效
|
||||
if (href.startsWith('/page')) {
|
||||
console.error('无效的路径:', href);
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = href;
|
||||
});
|
||||
|
||||
// 保持现有的键盘访问支持
|
||||
item.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
const href = item.getAttribute('data-href');
|
||||
if (href && !href.startsWith('/page')) {
|
||||
window.location.href = href;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
120
驭鑫/yxsilicon/js/contactUs.js
Normal file
120
驭鑫/yxsilicon/js/contactUs.js
Normal file
@@ -0,0 +1,120 @@
|
||||
function initAMap() {
|
||||
try {
|
||||
// 更精确的地址
|
||||
const address = '广东省深圳市南山区高新中三道2号软件园一期7栋303室';
|
||||
|
||||
// 创建地图实例 - 延迟创建，等待地址解析
|
||||
let map = null;
|
||||
|
||||
// 地址解析
|
||||
AMap.plugin('AMap.Geocoder', function() {
|
||||
const geocoder = new AMap.Geocoder({
|
||||
city: "深圳", // 指定城市提高精度
|
||||
radius: 1000 // 搜索半径
|
||||
});
|
||||
|
||||
geocoder.getLocation(address, function(status, result) {
|
||||
if (status === 'complete' && result.info === 'OK') {
|
||||
// 获取经纬度
|
||||
const lnglat = result.geocodes[0].location;
|
||||
|
||||
// 在获取到坐标后再初始化地图，并直接设置中心点
|
||||
map = new AMap.Map('mapContainer', {
|
||||
zoom: 17, // 放大缩放级别以聚焦位置
|
||||
center: [lnglat.lng, lnglat.lat], // 直接设置中心点
|
||||
viewMode: '3D', // 使用3D视图更生动
|
||||
resizeEnable: true, // 监控地图容器尺寸变化
|
||||
pitch: 30, // 俯视角度
|
||||
mapStyle: 'amap://styles/normal' // 使用标准彩色地图
|
||||
});
|
||||
|
||||
// 添加标记
|
||||
const marker = new AMap.Marker({
|
||||
position: [lnglat.lng, lnglat.lat],
|
||||
title: '深圳驭鑫科技有限公司',
|
||||
animation: 'AMAP_ANIMATION_DROP',
|
||||
offset: new AMap.Pixel(-13, -30)
|
||||
});
|
||||
|
||||
// 将标记添加到地图
|
||||
map.add(marker);
|
||||
|
||||
// 创建信息窗体内容
|
||||
const content = `
|
||||
<div class="info-content">
|
||||
<div class="info-title">深圳驭鑫科技有限公司</div>
|
||||
<div class="info-address">${address}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 创建信息窗体
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content: content,
|
||||
offset: new AMap.Pixel(0, -30),
|
||||
closeWhenClickMap: true
|
||||
});
|
||||
|
||||
// 确保地图加载完成后再打开信息窗体
|
||||
map.on('complete', function() {
|
||||
// 默认打开信息窗体
|
||||
infoWindow.open(map, [lnglat.lng, lnglat.lat]);
|
||||
});
|
||||
|
||||
// 绑定标记点击事件
|
||||
marker.on('click', function() {
|
||||
infoWindow.open(map, marker.getPosition());
|
||||
});
|
||||
|
||||
// 添加缩放控件
|
||||
map.addControl(new AMap.ToolBar({
|
||||
position: 'RB'
|
||||
}));
|
||||
|
||||
// 添加比例尺控件
|
||||
map.addControl(new AMap.Scale());
|
||||
|
||||
// 确保标记点居中显示
|
||||
map.setFitView([marker]);
|
||||
|
||||
// 适应地图大小变化
|
||||
window.addEventListener('resize', function() {
|
||||
map.resize();
|
||||
// 重新居中
|
||||
map.setCenter([lnglat.lng, lnglat.lat]);
|
||||
});
|
||||
} else {
|
||||
console.error('地址解析失败:', result);
|
||||
document.getElementById('mapContainer').innerHTML =
|
||||
'<div style="text-align:center;padding:20px;color:#f00;">地址定位失败，请刷新重试</div>';
|
||||
|
||||
// 地址解析失败时，创建一个默认地图
|
||||
map = new AMap.Map('mapContainer', {
|
||||
zoom: 12,
|
||||
center: [113.953537, 22.533354], // 深圳市中心
|
||||
viewMode: '2D',
|
||||
resizeEnable: true,
|
||||
mapStyle: 'amap://styles/normal'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('地图初始化失败:', error);
|
||||
document.getElementById('mapContainer').innerHTML =
|
||||
'<div style="text-align:center;padding:20px;color:#f00;">地图加载失败，请刷新重试</div>';
|
||||
}
|
||||
}
|
||||
|
||||
// 当DOM加载完成时，如果AMap已加载则初始化地图
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (typeof AMap !== 'undefined') {
|
||||
initAMap();
|
||||
}
|
||||
});
|
||||
|
||||
// 暴露全局函数供回调使用
|
||||
window.initMap = function() {
|
||||
if (typeof AMap !== 'undefined') {
|
||||
initAMap();
|
||||
}
|
||||
};
|
||||
160
驭鑫/yxsilicon/js/productIntroduction.js
Normal file
160
驭鑫/yxsilicon/js/productIntroduction.js
Normal file
@@ -0,0 +1,160 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 获取所需的DOM元素
|
||||
const container = document.querySelector('.carousel-container');
|
||||
const list = document.querySelector('.carousel-list');
|
||||
const items = document.querySelectorAll('.carousel-item');
|
||||
const prevBtn = document.querySelector('.carousel-arrow-left');
|
||||
const nextBtn = document.querySelector('.carousel-arrow-right');
|
||||
const indicators = document.querySelectorAll('.indicator');
|
||||
|
||||
// 如果元素不存在，直接返回
|
||||
if (!container || !list || !items.length) {
|
||||
console.error('轮播图元素不存在，初始化失败');
|
||||
return;
|
||||
}
|
||||
|
||||
// 克隆第一个和最后一个项目
|
||||
const firstClone = items[0].cloneNode(true);
|
||||
const lastClone = items[items.length - 1].cloneNode(true);
|
||||
|
||||
// 将克隆的元素添加到列表中
|
||||
list.appendChild(firstClone);
|
||||
list.insertBefore(lastClone, list.firstChild);
|
||||
|
||||
// 设置初始位置，因为添加了一个项目在前面，所以从1开始
|
||||
let currentIndex = 1;
|
||||
let interval = null;
|
||||
let isTransitioning = false;
|
||||
|
||||
// 初始化位置
|
||||
updatePosition(false);
|
||||
|
||||
// 更新位置的函数
|
||||
function updatePosition(withTransition = true) {
|
||||
// 如果需要过渡动画
|
||||
if (withTransition) {
|
||||
list.style.transition = 'transform 0.5s ease';
|
||||
} else {
|
||||
list.style.transition = 'none';
|
||||
}
|
||||
|
||||
// 计算位置并应用变换
|
||||
const position = -currentIndex * 100;
|
||||
list.style.transform = `translateX(${position}%)`;
|
||||
|
||||
// 更新指示器状态，注意要减去1因为我们添加了克隆项目
|
||||
updateIndicators();
|
||||
}
|
||||
|
||||
// 更新指示器状态
|
||||
function updateIndicators() {
|
||||
// 考虑循环，将currentIndex转换回真实索引
|
||||
const realIndex = currentIndex - 1;
|
||||
// 使用模运算确保索引在有效范围内
|
||||
const activeIndex = (realIndex + items.length) % items.length;
|
||||
|
||||
indicators.forEach((indicator, i) => {
|
||||
indicator.classList.toggle('active', i === activeIndex);
|
||||
});
|
||||
}
|
||||
|
||||
// 自动播放函数
|
||||
function startAutoPlay() {
|
||||
if (interval) clearInterval(interval);
|
||||
interval = setInterval(nextSlide, 3000);
|
||||
}
|
||||
|
||||
// 暂停自动播放
|
||||
function stopAutoPlay() {
|
||||
clearInterval(interval);
|
||||
}
|
||||
|
||||
// 下一张函数
|
||||
function nextSlide() {
|
||||
if (isTransitioning) return;
|
||||
isTransitioning = true;
|
||||
|
||||
currentIndex++;
|
||||
updatePosition();
|
||||
}
|
||||
|
||||
// 上一张函数
|
||||
function prevSlide() {
|
||||
if (isTransitioning) return;
|
||||
isTransitioning = true;
|
||||
|
||||
currentIndex--;
|
||||
updatePosition();
|
||||
}
|
||||
|
||||
// 处理过渡结束事件
|
||||
list.addEventListener('transitionend', () => {
|
||||
isTransitioning = false;
|
||||
|
||||
// 如果到达了最后一个克隆项
|
||||
if (currentIndex >= items.length + 1) {
|
||||
currentIndex = 1;
|
||||
updatePosition(false);
|
||||
}
|
||||
|
||||
// 如果到达了第一个克隆项
|
||||
if (currentIndex <= 0) {
|
||||
currentIndex = items.length;
|
||||
updatePosition(false);
|
||||
}
|
||||
});
|
||||
|
||||
// 绑定按钮事件
|
||||
prevBtn.addEventListener('click', () => {
|
||||
prevSlide();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
});
|
||||
|
||||
nextBtn.addEventListener('click', () => {
|
||||
nextSlide();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
});
|
||||
|
||||
// 绑定指示器点击事件
|
||||
indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener('click', () => {
|
||||
currentIndex = index + 1; // +1因为我们添加了克隆项目
|
||||
updatePosition();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
});
|
||||
});
|
||||
|
||||
// 鼠标悬停暂停
|
||||
container.addEventListener('mouseenter', stopAutoPlay);
|
||||
container.addEventListener('mouseleave', startAutoPlay);
|
||||
|
||||
// 添加触摸滑动支持
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
container.addEventListener('touchstart', (e) => {
|
||||
touchStartX = e.touches[0].clientX;
|
||||
stopAutoPlay();
|
||||
});
|
||||
|
||||
container.addEventListener('touchend', (e) => {
|
||||
touchEndX = e.changedTouches[0].clientX;
|
||||
const difference = touchStartX - touchEndX;
|
||||
|
||||
if (Math.abs(difference) > 50) {
|
||||
if (difference > 0) {
|
||||
nextSlide();
|
||||
} else {
|
||||
prevSlide();
|
||||
}
|
||||
}
|
||||
|
||||
startAutoPlay();
|
||||
});
|
||||
|
||||
// 开始自动播放
|
||||
startAutoPlay();
|
||||
});
|
||||
160
驭鑫/yxsilicon/js/solution.js
Normal file
160
驭鑫/yxsilicon/js/solution.js
Normal file
@@ -0,0 +1,160 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 获取所需的DOM元素
|
||||
const container = document.querySelector('.carousel-container');
|
||||
const list = document.querySelector('.carousel-list');
|
||||
const items = document.querySelectorAll('.carousel-item');
|
||||
const prevBtn = document.querySelector('.carousel-arrow-left');
|
||||
const nextBtn = document.querySelector('.carousel-arrow-right');
|
||||
const indicators = document.querySelectorAll('.indicator');
|
||||
|
||||
// 如果元素不存在，直接返回
|
||||
if (!container || !list || !items.length) {
|
||||
console.error('轮播图元素不存在，初始化失败');
|
||||
return;
|
||||
}
|
||||
|
||||
// 克隆第一个和最后一个项目
|
||||
const firstClone = items[0].cloneNode(true);
|
||||
const lastClone = items[items.length - 1].cloneNode(true);
|
||||
|
||||
// 将克隆的元素添加到列表中
|
||||
list.appendChild(firstClone);
|
||||
list.insertBefore(lastClone, list.firstChild);
|
||||
|
||||
// 设置初始位置，因为添加了一个项目在前面，所以从1开始
|
||||
let currentIndex = 1;
|
||||
let interval = null;
|
||||
let isTransitioning = false;
|
||||
|
||||
// 初始化位置
|
||||
updatePosition(false);
|
||||
|
||||
// 更新位置的函数
|
||||
function updatePosition(withTransition = true) {
|
||||
// 如果需要过渡动画
|
||||
if (withTransition) {
|
||||
list.style.transition = 'transform 0.5s ease';
|
||||
} else {
|
||||
list.style.transition = 'none';
|
||||
}
|
||||
|
||||
// 计算位置并应用变换
|
||||
const position = -currentIndex * 100;
|
||||
list.style.transform = `translateX(${position}%)`;
|
||||
|
||||
// 更新指示器状态，注意要减去1因为我们添加了克隆项目
|
||||
updateIndicators();
|
||||
}
|
||||
|
||||
// 更新指示器状态
|
||||
function updateIndicators() {
|
||||
// 考虑循环，将currentIndex转换回真实索引
|
||||
const realIndex = currentIndex - 1;
|
||||
// 使用模运算确保索引在有效范围内
|
||||
const activeIndex = (realIndex + items.length) % items.length;
|
||||
|
||||
indicators.forEach((indicator, i) => {
|
||||
indicator.classList.toggle('active', i === activeIndex);
|
||||
});
|
||||
}
|
||||
|
||||
// 自动播放函数
|
||||
function startAutoPlay() {
|
||||
if (interval) clearInterval(interval);
|
||||
interval = setInterval(nextSlide, 3000);
|
||||
}
|
||||
|
||||
// 暂停自动播放
|
||||
function stopAutoPlay() {
|
||||
clearInterval(interval);
|
||||
}
|
||||
|
||||
// 下一张函数
|
||||
function nextSlide() {
|
||||
if (isTransitioning) return;
|
||||
isTransitioning = true;
|
||||
|
||||
currentIndex++;
|
||||
updatePosition();
|
||||
}
|
||||
|
||||
// 上一张函数
|
||||
function prevSlide() {
|
||||
if (isTransitioning) return;
|
||||
isTransitioning = true;
|
||||
|
||||
currentIndex--;
|
||||
updatePosition();
|
||||
}
|
||||
|
||||
// 处理过渡结束事件
|
||||
list.addEventListener('transitionend', () => {
|
||||
isTransitioning = false;
|
||||
|
||||
// 如果到达了最后一个克隆项
|
||||
if (currentIndex >= items.length + 1) {
|
||||
currentIndex = 1;
|
||||
updatePosition(false);
|
||||
}
|
||||
|
||||
// 如果到达了第一个克隆项
|
||||
if (currentIndex <= 0) {
|
||||
currentIndex = items.length;
|
||||
updatePosition(false);
|
||||
}
|
||||
});
|
||||
|
||||
// // 绑定按钮事件
|
||||
// prevBtn.addEventListener('click', () => {
|
||||
// prevSlide();
|
||||
// stopAutoPlay();
|
||||
// startAutoPlay();
|
||||
// });
|
||||
|
||||
// nextBtn.addEventListener('click', () => {
|
||||
// nextSlide();
|
||||
// stopAutoPlay();
|
||||
// startAutoPlay();
|
||||
// });
|
||||
|
||||
// 绑定指示器点击事件
|
||||
indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener('click', () => {
|
||||
currentIndex = index + 1; // +1因为我们添加了克隆项目
|
||||
updatePosition();
|
||||
stopAutoPlay();
|
||||
startAutoPlay();
|
||||
});
|
||||
});
|
||||
|
||||
// 鼠标悬停暂停
|
||||
container.addEventListener('mouseenter', stopAutoPlay);
|
||||
container.addEventListener('mouseleave', startAutoPlay);
|
||||
|
||||
// 添加触摸滑动支持
|
||||
let touchStartX = 0;
|
||||
let touchEndX = 0;
|
||||
|
||||
container.addEventListener('touchstart', (e) => {
|
||||
touchStartX = e.touches[0].clientX;
|
||||
stopAutoPlay();
|
||||
});
|
||||
|
||||
container.addEventListener('touchend', (e) => {
|
||||
touchEndX = e.changedTouches[0].clientX;
|
||||
const difference = touchStartX - touchEndX;
|
||||
|
||||
if (Math.abs(difference) > 50) {
|
||||
if (difference > 0) {
|
||||
nextSlide();
|
||||
} else {
|
||||
prevSlide();
|
||||
}
|
||||
}
|
||||
|
||||
startAutoPlay();
|
||||
});
|
||||
|
||||
// 开始自动播放
|
||||
startAutoPlay();
|
||||
});
|
||||
Reference in New Issue
Block a user