长城期货
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1094 lines
31 KiB

.title{
display: flex;
justify-content: space-between;
padding: 50px 0;
.left{
p{
display: flex;
align-items: center;
font-weight: bold;
font-size: 26px;
line-height: 1.75;
color: #1a1a1a;
&::before{
display: block;
content: '';
width: 5px;
height: 26px;
margin-top: 1px;
margin-right: 15px;
background: #f08200;
border-radius: 3px;
}
}
}
}
.more{
display: flex;
align-items: center;
font-size: 16px;
line-height: 24px;
color: #f08200;
img{
margin-left: 7px;
}
}
.contTit{
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
.leftCont{
display: flex;
align-items: center;
width: calc(100% - 85px);
overflow-x: auto;
overflow-y: hidden;
a{
position: relative;
margin-left: 40px;
padding-bottom: 21px;
white-space: nowrap;
font-size: 18px;
color: #1a1a1a;
&::after{
display: block;
content: '';
position: absolute;
bottom: 0px;
z-index: 1;
transition: width .5s;
width: 0%;
height: 3px;
background: #f08200;
}
&.on{
font-weight: bold;
&::after{
width: 100%;
}
}
&:first-child{
margin-left: 0;
}
}
}
&::after{
display: block;
content: '';
position: absolute;
bottom: 1px;
width: 100%;
height: 1px;
background: #e6e6e6;
}
.img{
font-size: 0;
}
}
.layui-laydate .layui-this, .layui-laydate .layui-this>div{
background: #f08200 !important;
}
.indexBanner{
position: relative;
.indexBannerSwiper{
position: relative;
.swiper-wrapper .swiper-slide{
height: 650px;
font-size: 0;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.swiper-pagination{
width: 100%;
font-size: 0;
bottom: 200px;
span{
transition: width .3s, background .3s;
opacity: 1;
width: 8px;
height: 8px;
margin: 0 6px;
border-radius: 4px;
background: rgba($color: #fff, $alpha: .5);
&.swiper-pagination-bullet-active{
width: 28px;
background: #fff;
}
}
}
}
.w1280{
display: flex;
position: absolute;
left: 50%;
bottom: 45px;
transform: translateX(-50%);
z-index: 1;
padding: 10px 25px;
background-color: #ffffff;
border-radius: 10px;
opacity: 0.98;
.left{
display: flex;
align-items: center;
position: relative;
padding-right: 35px;
.img{
width: 95px;
height: 95px;
margin-right: 14px;
}
p{
font-weight: bold;
font-size: 16px;
color: #212121;
}
&::after{
display: block;
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 80px;
background: #e6e6e6;
}
}
.right{
display: flex;
justify-content: space-between;
width: calc(100% - 238px);
margin-left: 30px;
padding-right: 10px;
.list{
display: flex;
align-items: center;
padding-right: 10px;
.img{
display: flex;
align-items: center;
justify-content: center;
min-width: 52px;
height: 44px;
margin-right: 13px;
}
.text{
p{
font-weight: bold;
font-size: 16px;
color: #333;
}
.tips{
margin-top: 5px;
font-size: 14px;
color: #666;
}
}
}
}
}
&.mob{
display: none;
}
}
.indexBlock2{
padding: 60px 0 0;
border-top: 1px solid #f2f2f2;
background: #f7f7f7;
.w1280{
display: flex;
align-items: flex-start;
justify-content: space-between;
.img{
position: relative;
overflow: hidden;
width: calc((100% - 50px) / 3);
height: 350px;
font-size: 0;
img{
transition: transform .5s;
transform: scale(1);
width: 100%;
height: 100%;
object-fit: cover;
}
}
.right{
display: flex;
width: calc(((100% - 50px) / 3)*2 + 25px);
height: 350px;
.list{
width: calc((100% - 25px) / 2);
height: 100%;
margin-left: 25px;
padding: 28px 30px;
background: #fff;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.02);
&:first-child{
margin-left: 0;
}
ul{
padding-top: 6px;
li {
margin-top: 25px;
a{
display: flex;
justify-content: space-between;
align-items: center;
.leftCont{
position: relative;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: calc(100% - 45px);
padding-left: 16px;
font-size: 16px;
color: #333;
&::after{
display: block;
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 6px;
height: 6px;
background-color: #cccccc;
}
}
span{
font-size: 14px;
color: #999;
}
}
}
}
}
.list1{
ul{
display: none;
}
}
}
}
}
.indexBlock3{
padding: 25px 0 60px;
background: #f7f7f7;
background-attachment: fixed;
.w1280{
display: flex;
justify-content: space-between;
.left{
width: calc(((100% - 50px) / 3)*2 + 25px);
padding: 28px 30px;
background: #fff;
.content{
ul{
display: none;
padding-top: 5px;
li {
margin-top: 26px;
a{
display: flex;
justify-content: space-between;
align-items: center;
.leftCont{
position: relative;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: calc(100% - 85px);
padding-left: 16px;
font-size: 16px;
color: #333;
&::after{
display: block;
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 6px;
height: 6px;
background-color: #cccccc;
}
}
span{
font-size: 14px;
color: #999;
}
}
}
}
}
}
.right{
width: calc((100% - 50px) / 3);
padding: 28px 25px 18px;
background: #fff;
#ID-laydate-static-1{
width: 100%;
#layui-laydate1{
width: 100%;
border: 0;
box-shadow: none;
.layui-laydate-main{
width: 100%;
.layui-laydate-header{
display: flex;
justify-content: space-between;
padding: 0;
padding-top: 23px;
border-bottom: 0;
.laydate-set-ym{
span{
padding: 0;
font-size: 20px;
font-weight: bold;
color: #333;
}
}
.laydate-prev-y,.laydate-next-y{
display: none;
}
i{
top: auto;
font-weight: bold;
color: #3f3a39;
&.laydate-prev-m{
position: initial;
}
&.laydate-next-m{
position: initial;
}
}
}
.layui-laydate-content{
// margin-top: 34px;
margin-top: 20px;
padding: 0;
table{
width: 100%;
thead tr,tbody tr{
display: flex;
justify-content: space-between;
th{
width: 34px;
height: auto;
font-size: 14px;
color: #999;
}
td{
width: 34px;
height: 34px;
margin-top: 9px;
font-size: 14px;
line-height: 34px;
color: #333;
div{
padding: 0;
}
&.laydate-day-prev div,&.laydate-day-next div{
color: #ccc;
}
.laydate-day-mark{
font-size: 14px;
line-height: 34px;
&::after{
top: 4px;
background: #f08200;
}
}
}
.layui-this {
background: #fff !important;
div{
overflow: hidden;
border-radius: 50%;
background: #f08200 !important;
}
}
}
thead tr{
margin-bottom: 10px;
}
}
}
}
.layui-laydate-footer{
display: none;
}
}
}
}
}
}
.indexBlock4{
padding-bottom: 60px;
.w1280{
.title{
padding-bottom: 30px;
}
.content{
display: flex;
justify-content: space-between;
.left{
width: calc(630/1280*100%);
max-width: 630px;
a{
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
font-size: 0;
img{
transition: transform .5s;
transform: scale(1);
width: 100%;
height: 100%;
object-fit: cover;
}
&::after{
display: block;
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 7px;
background-color: #ff7a1a;
}
}
}
.right{
width: calc(630/1280*100%);
max-width: 630px;
.list{
display: flex;
height: 50%;
.img{
display: flex;
align-items: flex-end;
position: relative;
overflow: hidden;
width: 50%;
font-size: 0;
img{
transition: transform .5s;
transform: scale(1);
}
&::after{
display: block;
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 7px;
background-color: #ff7a1a;
}
}
.text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 50%;
padding: 0 calc(36/630*100%);
background: #f5f5f5;
.type{
margin-top: -2px;
font-weight: bold;
font-size: 18px;
color: #1a1a1a;
}
.time{
margin-top: 13px;
font-size: 14px;
color: #999;
}
.tit{
margin-top: 21px;
font-size: 18px;
color: #666;
}
> a{
display: flex;
align-items: center;
margin-top: 23px;
font-weight: bold;
font-size: 15px;
line-height: 20px;
color: #ff7a1a;
img{
margin-right: 8px;
}
}
}
&:nth-child(even){
flex-direction: row-reverse;
}
}
}
}
}
}
.indexBlock5{
background: #f7f7f7;
padding-bottom: 60px;
.w1280{
.title{
padding-bottom: 30px;
}
.content{
display: flex;
.list{
width: 300px;
margin-left: 26px;
background: #fff;
.img{
overflow: hidden;
font-size: 0;
img{
transition: transform .5s;
transform: scale(1);
}
}
.text{
padding: 27px 30px 29px;
p{
font-weight: bold;
font-size: 18px;
color: #212121;
}
.tips{
margin-top: 12px;
font-size: 14px;
line-height: 1.75;
color: #666;
}
.more{
margin-top: 26px;
}
}
&:first-child{
margin-left: 0;
}
}
}
}
}
.indexBlock6{
position: relative;
background: url(../images/indexBlock6Img.jpg) no-repeat center / cover;
background-attachment: fixed;
min-height: 500px;
.w1280{
display: flex;
justify-content: space-between;
align-items: flex-start;
padding-top: 103px;
.left{
width: 700px;
.tit{
font-weight: bold;
font-size: 34px;
color: #fff;
}
.tips{
margin-top: 26px;
font-size: 16px;
line-height: 30px;
color: #fff;
}
.link{
display: flex;
align-items: center;
justify-content: center;
transition: background .5s,color .5s;
width: 150px;
height: 44px;
margin-top: 46px;
border-radius: 22px;
border: solid 1px #ffffff;
font-size: 16px;
color: #fff;
}
}
.right{
display: flex;
justify-content: flex-end;
max-width: 463px;
width: calc(100% - 700px);
padding-top: 108px;
padding-right: 193px;
.player{
font-size: 0;
cursor: pointer;
}
}
}
}
.windowVideo{
display: none;
position: fixed;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100vh;
background: rgba($color: #000, $alpha: .4);
.content{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100%;
max-width: 850px;
background: #fff;
.tit{
padding: 0 20px;
background: #fff;
border-bottom: 1px solid #eaeaea;
font-size: 18px;
line-height: 40px;
color: #333;
}
.cont{
font-size: 0;
video{
width: 100%;
}
}
.close{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: -25px;
right: -60px;
z-index: 1;
width: 40px;
height: 40px;
font-size: 0;
cursor: pointer;
border-radius: 50%;
border: 1px solid #fff;
img{
width: 25px;
height: 25px;
filter: contrast(0) brightness(10);
}
}
}
}
@media (any-hover:hover) {
.more:hover{
color: #f08200;
}
.indexBlock2 .w1280 {
.img:hover img{
transform: scale(1.05);
}
.right .content .list ul li:hover a{
color: #f08200;
}
}
.indexBlock3 .w1280 {
.left{
.content .cont ul {
> .first:hover{
.img{
img{
transform: scale(1.1);
}
}
}
li:hover a{
color: #f08200;
}
}
}
.right #ID-laydate-static-1 #layui-laydate1 .layui-laydate-main .layui-laydate-content table tbody tr td div:hover{
border-radius: 50%;
}
}
.indexBlock4 .w1280 .content {
.left a:hover{
img{
transform: scale(1.05);
}
}
.right .list:hover .img img{
transform: scale(1.1);
}
}
.indexBlock5 .w1280 .content .list:hover{
.img img{
transform: scale(1.1);
}
}
.indexBlock6 .w1280 .left .link:hover{
background: #fff;
color: #f08200;
}
}
@media (max-width: 1200px){
.contTit .leftCont a{
margin-left: 20px;
}
.indexBlock4 .w1280 .content .right .list .text .tit {
font-size: 14px;
line-height: 1.5;
}
}
@media (max-width: 1080px) {
.contTit .leftCont a{
font-size: 16px;
}
.title{
padding: 30px 0;
}
.indexBanner {
display: none;
.indexBannerSwiper {
.swiper-pagination{
bottom: 40px;
}
.swiper-wrapper .swiper-slide{
height: auto;
}
}
&.mob{
display: block;
}
.w1280{
position: initial;
transform: translate(0);
padding: 20px 0;
.left{
display: none;
}
.right{
flex-wrap: wrap;
width: 100%;
padding: 0;
margin: 0;
.list{
padding-right: 0;
flex-direction: column;
.img{
margin-right: 0;
img{
margin: 0 auto;
}
}
.text{
text-align: center;
margin-top: 5px;
.tips{
display: none;
}
}
}
}
}
}
.indexBlock2{
.w1280{
// flex-wrap: wrap;
// .img{
// width: auto;
// margin: 0 auto;
// }
}
}
.indexBlock3{
padding: 25px 0 40px;
background-attachment: initial;
.w1280{
flex-wrap: wrap;
.left{
// width: 100%;
.tit{
p{
font-size: 20px;
}
}
.content{
.tab{
overflow-x: auto;
&::-webkit-scrollbar{
opacity: 0 !important;
}
}
.cont ul li{
a{
width: 100%;
}
span{
display: none;
}
}
}
}
.right{
// margin: 0 auto;
// margin-top: 30px;
padding-bottom: 20px;
max-width: 420px;
// width: 100%;
.tit{
padding-top: 22px;
padding-bottom: 20px;
span{
font-size: 20px;
}
}
}
}
}
.indexBlock4 {
padding-bottom: 40px;
.w1280 {
.title {
padding: 40px 0 30px;
.left p{
font-size: 20px;
}
}
.content {
flex-wrap: wrap;
.left{
width: 100%;
margin: 0 auto;
}
.right {
width: 100%;
margin: 0 auto;
.list .text {
.time{
display: none;
}
}
}
}
}
}
.indexBlock5 {
.w1280 .title .left p{
font-size: 20px;
}
}
.indexBlock6{
background-attachment: initial;
.w1280 {
padding-top: 56px;
.left{
.tit{
font-size: 20px;
}
.tips{
font-size: 14px;
line-height: 30px;
}
}
.right{
display: none;
}
}
}
}
@media (max-width: 996px) {
.indexBlock2 .w1280{
flex-wrap: wrap;
.img{
width: 100%;
height: auto;
}
.right{
flex-wrap: wrap;
width: 100%;
height: auto;
.list{
width: 100%;
margin-left: 0;
margin-top: 30px;
}
}
}
.indexBlock3 .w1280 {
flex-wrap: wrap;
.left{
width: 100%;
}
.right{
width: 100%;
max-width: 100%;
margin-top: 30px;
}
}
.indexBlock5 {
padding-bottom: 10px;
.w1280 .content{
flex-wrap: wrap;
justify-content: space-between;
.list{
width: calc((100% - 30px) / 2);
margin: 0 0 30px;
.img{
img{
width: 100%;
}
}
}
}
}
}
@media (max-width: 820px) {
.indexBlock4 .w1280 .content {
flex-direction: column;
.left{
width: 100%;
max-width: 100%;
margin: 0 auto;
}
.right{
width: 100%;
max-width: 100%;
margin-top: 30px;
.list{
.img{
img{
width: 100%;
}
}
.text{
padding: 0 20px;
}
}
}
}
}
@media (max-width: 500px){
.more{
font-size: 14px;
}
.indexBanner {
.indexBannerSwiper .swiper-pagination{
bottom: 20px;
}
.w1280{
.right{
.list{
.img{
height: 35px;
img{
max-height: 100%;
}
}
.text p{
font-size: 14px;
}
}
}
}
}
.indexBlock2 {
padding-top: 40px;
.w1280 .right {
.list{
padding: 20px 20px 25px;
ul li{
margin-top: 15px;
a{
.leftCont{
font-size: 14px;
}
span{
font-size: 12px;
}
}
}
}
}
}
.indexBlock3 .w1280 {
.left {
.contTit {
.leftCont{
width: 100%;
}
.more{
display: none;
}
}
.content ul {
li{
margin-top: 15px;
a{
.leftCont{
font-size: 14px;
}
span{
font-size: 12px;
}
}
}
> .first{
margin-bottom: 22px;
.text p{
-webkit-line-clamp: 3;
font-size: 14px;
}
}
}
}
.right{
padding: 20px;
}
}
.indexBlock4 .w1280 .content .right {
margin-top: 0;
.list {
flex-direction: column;
margin-top: 30px;
.img{
width: 100%;
}
.text{
width: 100%;
padding: 20px;
.tit{
margin-top: 10px;
}
> a{
margin-top: 10px;
}
}
&:nth-child(even){
flex-direction: column;
}
}
}
.indexBlock5 .w1280 .content {
flex-wrap: nowrap;
overflow-y: hidden;
overflow-x: auto;
.list{
min-width: 300px;
width: 300px;
margin-left: 20px;
&:first-child{
margin-left: 0;
}
}
}
}