web-financial/pages/home/index.wxss

.home-page {
  height: 160rpx;
  width: 100%;
  border: 1rpx solid red;
  font-size: 60rpx;
}

.home {
  width: 100%;
  height: 100%;
  position: relative;
  top: 135rpx;

}

.home .top {
  width: 92%;
  height: 350rpx;
  margin: 30rpx 30rpx 0 30rpx;
}

.home .top swiper-item {
  float: left;
  width: 100%;
  height: 350rpx;
  border-radius: 20rpx;
}

.home .top image {
  width: 100%;
  height: 350rpx;
  border-radius: 20rpx;
}

.home .top swiper {
  height: 350rpx;
}

.home .main {
  float: left;
  width: 100%;
  margin: 40rpx 0 0 0;
}

.main .mainOne {
  float: left;
  width: 92%;
  height: 255rpx;
  margin: 0 30rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 10px 30px 0px rgba(175, 146, 146, 0.2);
  border-radius: 20px;
}

.main .mainOne image {
  float: left;
  width: 335rpx;
  height: 255rpx;
  border-radius: 10rpx;
}

.main .mainOne .mainOneInfo {
  float: left;
  width: 355rpx;
  height: 255rpx;
  overflow: hidden;
}

.main .mainOne .mainOneInfo .mainOneInfos {
  float: left;
  width: 49%;
  height: 127rpx;
  text-align: center;
  border-right: 1px solid rgba(229, 229, 229, 1);
  border-bottom: 1px solid rgba(229, 229, 229, 1);
}

.main .mainOne .mainOneInfo .mainOneInfos view sub {
  font-size: 10px;
  vertical-align: text-bottom;
}

.main .mainOne .mainOneInfo .mainOneInfos:nth-child(2n) {
  border-right: none;
}

.main .mainOne .mainOneInfo .mainOneInfos:nth-child(2) view:first-child {
  color: #006CFF;
}

.main .mainOne .mainOneInfo .mainOneInfos:nth-child(3) view:first-child {
  color: #832DFF;
}

.main .mainOne .mainOneInfo .mainOneInfos:nth-child(4) view:first-child {
  color: #E9021D;
}

.main .mainOne .mainOneInfo .mainOneInfos view:first-child {
  float: left;
  width: 100%;
  font-size: 30rpx;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: rgba(255, 126, 0, 1);
  margin: 20rpx 0 0 0;
}

.main .mainOne .mainOneInfo .mainOneInfos view:last-child {
  float: left;
  width: 100%;
  font-size: 20rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  margin: 15rpx 0 0 0;

}

.main .mainTwo {
  float: left;
  width: 92%;
  margin: 50rpx 30rpx 0rpx 30rpx;
  height: 500rpx;
}

.main .mainTwo .title {
  /* float: left; */
  font-size: 34rpx;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: rgba(40, 40, 40, 1);
  margin: 0 0 30rpx 0;
}

.main .mainTwo .red {
  display: inline-block;
  width: 4px;
  height: 20px;
  background: rgba(233, 2, 29, 1);
  vertical-align: text-bottom;
  margin-right: 10rpx;
 
}

.main .mainTwo .more {
  margin-left: 65%;
  font-size: 30rpx;
  color: rgba(102, 102, 102, 1);
}


.main .mainTwo .list {
  float: left;
  width: 335rpx;
  height: 108rpx;
  margin: 0 20rpx 0 0;
  background: rgba(151, 93, 255, 1);
  border-radius: 20rpx;
  position: relative;
}

.main .mainTwo .list:last-child {
  background: rgba(30, 219, 233, 1);
  margin: 0;

}

.main .mainTwo .list image {
  float: left;
  width: 100%;
  height: 108rpx;
 
}

.main .mainTwo .list text {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  color: #fff;
  background: #cccccc5f;
  height: 108rpx;
  border-radius: 20rpx;
  text-align: center;
  line-height: 108rpx;
  font-weight: bold;

}

.mainThree {
  position: relative;
  z-index: 9999999;
  float: left;
  width: 92%;
  margin: 0rpx 30rpx 0 30rpx;
}

.mainThree .mainThreeTop {
  float: left;
  width: 100%;
  margin: 0 0 30rpx 0;
  height: 35rpx;
  line-height: 35rpx;

}

.mainThree .mainThreeTop span {
  float: left;
  width: 80%;
  font-size: 34rpx;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: rgba(40, 40, 40, 1);
}

.mainThree .mainThreeTop a {
  box-sizing: border-box;
  float: right;
  width: 20%;
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(136, 136, 136, 1);
  text-align: right;
  border: 10rpx solid transparent;
  margin-top: -10rpx;
}

.mainThreeList {
  float: left;
  width: 100%;
}

.mainThreeList .list {
  float: left;
  width: 100%;
  /* height: 150rpx; */
  margin: 0 0 20rpx 0;
}

.mainThreeList image {
  float: left;
  width: 150rpx;
  height: 150rpx;
  margin: 0 20rpx 0 0;
}

.mainThreeList .info {
  float: left;
  width: 100%;
  /* height: 150rpx; */
  /* border: 1px solid red; */
  border-bottom: 1px solid #e8e8e8;
  /* border-bottom: 1px solid #f3f3f3; */
}

.mainThreeList .info p:first-child {
  float: left;
  width: 100%;
  font-size: 30rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(40, 40, 40, 1);
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* -webkit-line-clamp: 1; */
  /* word-break: break-all; */
  /* display: -webkit-box; */
  /* -webkit-box-orient: vertical; */
}

.mainThreeList .info .infos {
  float: left;
  width: 100%;
  /* border-bottom: 1px solid #f3f3f3; */
  /* margin-bottom: 15px; */
  /* border: 1px solid red; */
}

.mainThreeList .info .infos text:first-child {
  float: left;
  width: 100%;
  font-size: 26rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: #888888;
  /* overflow: hidden; 
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  margin-left: 10px; */
}

.mainThreeList .info .infos text:last-child {
  float: right;
  width: 100%;
  text-align: right;
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  /* color: #000; */
  /* padding-top: 30rpx; */
  color: #aaaeb1;
  padding-bottom: 10px;

}

/* .mainThreeList .info p:last-child {
  float: left;
  width: 100%;
  margin: 20rpx 0 0 0;
}

.mainThreeList .info p:last-child span {
  float: left;
  width: 228rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: left;
  margin: 0 20rpx 0 0;
  background: rgba(242, 245, 250, 1);
  border-radius: 10px;
  font-size: 26rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(136, 136, 136, 1);
  padding: 0 0 0 20rpx;

}

.mainThreeList .info p:last-child span:last-child {
  margin: 0;
} */

.home .down {
  margin-top: 44rpx;
  float: left;
  width: 100%;
  position: relative;
  z-index: 99999999;
}

.home .down .tabber {
  float: left;
  width: 100%;
  margin: 100rpx 0 0 0;
}

/* 新增效果 */
.container-zhaozhi {
  float: left;
  height: 430rpx;
  padding: 0 10rpx;
  border-radius: 20rpx;
  white-space: nowrap;
  /*不放这个不能横排*/
}

.container-zhaozhi .chaozhilist {
  width: 290rpx;
  /* height: 240rpx; */
  display: inline-block;
  margin: 0 30rpx 0 0;
  position: relative;
  border-radius: 20rpx;

  background: rgba(255, 255, 255, 1);
  /* background: red; */
  box-shadow: 0px 10rpx 30rpx 0px rgba(175, 146, 146, 0.2);
  padding: 20rpx;
  /*不放这个不能横排*/
}

.container-zhaozhi .chaozhilist .one {
  float: left;
  /* width: 100%; */
  margin: 0 0 10rpx 0;
}

.container-zhaozhi .chaozhilist .one img {
  float: left;
}

.container-zhaozhi .chaozhilist .one view {
  float: right;
  margin: 30rpx 0 10rpx 30rpx;
}

.container-zhaozhi .chaozhilist .two {
  float: left;
  width: 100%;
  text-align: center;
  margin: 0 0 10rpx 0;
  /* border: #888888 2rpx solid; */
  padding: 10rpx 0;
}

.container-zhaozhi .chaozhilist .two view:first-child {
  float: left;
  width: 100%;
  font-size: 34rpx;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: rgba(233, 2, 29, 1);
  margin: 0 0 10rpx 0;
}

.container-zhaozhi .chaozhilist .two view:first-child sub {
  font-size: 10px;
  vertical-align: text-bottom;
}

.container-zhaozhi .chaozhilist .two view:last-child {
  float: left;
  width: 100%;
  font-size: 24rpx;
  font-family: Source Han Sans SC;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);

}

.container-zhaozhi .chaozhilist .three {
  float: left;
  width: 100%;
  font-size: 24rpx;
  text-align: center;
  padding: 10rpx 0;
}

.container-zhaozhi .chaozhilist .four {
  float: left;
  width: 100%;
  font-size: 40rpx;
  text-align: center;
  padding: 10rpx 0;
  color: rgba(233, 2, 29, 1);
}

.container-zhaozhi .chaozhilist .five {
  float: left;
  width: 100%;
  font-size: 24rpx;
  text-align: center;
  padding: 10rpx 0;
}

.container-zhaozhi .chaozhilist .six {
  float: left;
  width: 100%;
  font-size: 24rpx;
  text-align: center;
  padding: 10rpx 0;
}

button:not([size='mini']) {
  margin-left: auto;
  margin-right: auto;
  width: 200rpx !important;
  padding: 0 20rpx;
}

button[size='mini'] {
  font-size: 26rpx !important;
}

button[type='primary'] {
  background-color: rgba(233, 2, 29, 1) !important;
}

.mainFour {
  float: left;
  width: 100%;
}

.scroll-unit {
  box-sizing: border-box;
  white-space: nowrap;
  width: 100%;
  padding-left: 24rpx;
}

.scroll-unit-item-father {
  box-sizing: border-box;
  display: inline-block;
  width: 50%;
  padding-right: 24rpx;
}

.scroll-unit-item {
  box-sizing: border-box;
  display: inline-block;
  width: 100%;
  height: 183rpx;
  position: relative;
}

.scroll-unit-item-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.scroll-unit-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  white-space: normal;
  color: #FFFFFF;
  font-weight: 700;
  text-shadow: 5rpx 5rpx 5rpx #000000;
}

.unit-text-last {
  margin: 30rpx 30rpx 36rpx 30rpx;
  font-size: 34rpx;
  font-family: Source Han Sans SC;
  font-weight: bold;
  color: rgba(40, 40, 40, 1);
}


.top1 {
  width: 92%;
  height: 100rpx;
  margin: 10rpx 0rpx 0 30rpx;

}
.top1 image {
  width: 100%;
  height: 100rpx;
  border-radius: 20rpx;

}