release汉晶网站完成

hanJing/css/ourProducts.css

@@ -0,0 +1,219 @@
+.topBanner{
+    width: 100%;
+    height: 100vh;   
+    background-color: #030045;
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    /* background: palegoldenrod; */
+    overflow: hidden;
+    background-image: url(../imgs/PNG/我们的产品图.png);
+    background-repeat: no-repeat;
+    background-size:65vw auto;
+    background-position:35vw 0vw;  
+    position: relative;
+}
+
+.topBannerLeft{
+    width: 26%;
+    height: 80%;
+    /* background: #00316B; */
+    color: #fff;
+    position: absolute;
+    top: 16vh;
+    left: 13vw;
+}
+
+.topBannerLeft p:nth-child(1){
+   font-size: 3vw;
+   font-weight: 600;
+   letter-spacing: 0.3vw;
+}
+
+.topBannerLeft p:nth-child(2){
+    font-size: 1.2vw;
+  
+    color: #01A0D0;
+    margin-top: 18px;
+    line-height: 6.5vh;
+  
+}
+.topBannerBth{
+    width: 100%;
+   padding-left: 2vw;
+   margin-top: 13vh;
+   
+}
+
+.topBannerBth a{
+    display: block;
+    width: 15vw;
+    height: 4vw;
+    font-size: 1.4vw;
+    font-weight: 600;
+    color: #fff;
+    text-decoration: none;
+    background: #00ECEC;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+    transition: all 0.3s ease;
+   
+}
+.topBannerBth span{
+    font-size: 1.2vw;
+    margin-right: 1vw;
+}
+.topBannerBth img{
+    width: 1.5vw;
+    height: auto;
+}
+.topBannerBth a:hover{
+    color: #fff; 
+    transform: scale(1.1);  /* 放大到原尺寸的1.1倍 */
+    transition: all 0.3s ease;  /* 添加过渡动画 */
+
+}
+
+.btLeft{
+    width: 20vw;
+    position: absolute;
+    bottom: 8vh;
+    left: -5.5vw;
+}
+.tpRight{
+    width: 17vw; 
+    position: absolute;
+    top: 16vh;
+    right: -6vw;
+}
+.btRight{
+    width:70vw;
+    position: absolute;
+    bottom: -1.3vh;
+    right: 0vw;
+}
+
+
+
+/* ----------------------------- */
+
+.banner{
+    width: 100%;
+    height: 219vh;
+    background-image: url(../imgs/SVG/背景纹（大）.svg);
+    background-repeat: no-repeat;
+    background-size:160%;
+    background-position: 54vw -42vw;  
+    background-color: #00316B;
+}
+/* .bannerLeft{
+    width: 100%;
+    height: 30%;
+    background-color: rgba(3, 0, 69, 0.5);  
+} */
+ .bannertop{
+    width: 100%;
+    height:105vh;    
+   display: flex;
+   align-items: center;
+   justify-content: left;
+
+
+    
+ }
+
+ .imgBox{
+    width: 50%;
+    height: 100%;
+    /* background: palegreen; */
+    position: relative;
+ }
+ .imgBox .imgBox1{
+    width: 20vw;
+    height: auto;
+    /* background: palegoldenrod; */
+    position: absolute;
+    top: 5vw;
+    left:10vw;
+ }
+ .imgBox .imgBox2{
+    width: 20vw;
+    height: auto;
+    position: absolute;
+    top: 19vw;
+    left: 20vw;
+    /* background: palegoldenrod; */
+ }
+ .imgBox img{
+    width: 26vw;
+    height: auto;
+ }
+ .textBox{
+    width: 15vw;
+    height: 50%;
+   color: #fff;
+   margin-left: 5vw;
+   /* background: peru; */
+ }
+ .textBox h1{
+    font-size: 2vw;
+    font-weight: 600;
+    letter-spacing: 0.3vw;
+ }
+ .textBox p{
+    font-size: 1.2vw;
+    line-height: 6vh;
+    margin-top: 5vh;
+    
+ }
+
+ /* ------------------------- */
+ .bannerBottom{
+    width: 100%;
+    height: 115vh;
+    position: relative;
+    background-image: url(../imgs/png/电子商城.png);
+    background-repeat: no-repeat;
+    background-size:40vw;
+    background-position:0vw 50%;
+   display: flex;
+   justify-content: right;
+   padding-right: 10vw;
+   background-color: rgba(3, 0, 69, 0.8);  
+    
+}
+
+.bannerBottomText{
+    width: 40%;
+    height: 100%;
+    /* background-color: palegoldenrod; */
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center; 
+    color: #fff;
+    /* background: peru; */
+}
+
+.bannerBottomText .top{
+    width: 100%;
+    height: 40%;
+    /* background-color: palegoldenrod; */
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    /* padding-top: 3vh; */
+}
+
+.top p{
+    width: 70%;
+    font-size: 1.5vw;
+    line-height:7vh;
+    margin-top: 4vh;
+
+}
+
+