wanzb_xcxv3/pages/index/index.wxss

/**index.wxss**/
/*首页跑马灯效果*/
@keyframes around {
  from {
   margin-left: 90%;
  }
  to {
   /* var接受传入的变量 */
   margin-left: -100%;
  }
 }
 .zd{
   width: 80px;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
   background: #fff;

 }
.marquee_container{
  width: 100%;
  background: #fff;
  /* box-shadow:0px 4px 12px 0px rgba(0,0,0,0.08); */
  border-radius:4px;
  padding: 12.5px 12px;
  position: relative;
  overflow: hidden;
  height: 90rpx;
}
.marquee_container:hover{
  /* 不起作用 */
  animation-play-state: paused;
}
.marquee_text{
  color:#333;
  font-size: 28rpx;
  display: flex;
  white-space: nowrap;
  animation-name: around;
  animation-duration: 15s;  /*过渡时间*/
  animation-iteration-count: infinite;
  animation-timing-function:linear;
}
.marquee_text navigator{
  margin-right: 20px;
}
.marquee_container image{
  width: 60px;
  max-height: 30px;
  position: absolute;
  left: 10px;
  top: 30rpx;
}
page{
  background: #F7F7F7;
}
.list-top{
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 10rpx 0;
}
.list-top navigator{
  width: 20%;
  text-align: center;
  padding: 10rpx 0;
  font-size: 24rpx;
}
.list-top image{
  width: 50rpx;
  display: block;
  margin: 0 auto 5rpx;
}
.banner-list{
  height: 370rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}
.banner-list navigator{
  height: 300rpx;
  overflow: hidden;
}
.banner-list image{
  width: 100%;
}
.banner-list .name{
  padding:0 20rpx;
  line-height: 70rpx;
  font-size: 25rpx;
  font-weight: 600;
}
.banner-list .wx-swiper-dots.wx-swiper-dots-horizontal {
  position: absolute;
  bottom: 90rpx;
  right:auto;
  left: 75%;
}
.notice{
  background-color: #fff;
  padding: 20rpx;
  display: flex;
}
.notice image{
  width: 40rpx;
}
.notice text{
  color: #FF583D;
  font-size: 26rpx;
  position: relative;
  left: 10rpx;
  top: -12rpx;
}
.notice-list{
  width: 80%;
  font-size: 26rpx;
  line-height: 55rpx;
  margin-top: -6rpx;
  padding-left: 20rpx;
}
.up-down-view{
  background-color: #fff;
  margin-top: 20rpx;
}
.content-list{
  display: flex;
  width: 250vw;
}
.number{
  width: 38rpx;
  display: inline-block;
  text-align: center;
  color: #CE994F;
  font-size: 26rpx;
  font-weight: 600;
  margin-right: 10rpx;
  margin-top: 6rpx;
}
image.number{
  margin-top: 10rpx;
}
.avatar{
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}
.up-down{
  width: 60vw;
  margin-right: 40rpx;
}
.up-down>navigator{
  padding: 20rpx 0;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  font-size: 26rpx;
}
.up-down .usm{
  width: 50%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.up-title{
  font-size: 28rpx;
  padding: 20rpx;
  
}
.up-title navigator{
  float: right;
  font-size: 24rpx;
}
.up-down navigator text{
  line-height: 50rpx;
}
.up-down>text{
  color: #999;
  font-size: 24rpx;
  margin-bottom: 10rpx;
  display: block;
}
.article-img{
  max-width: 60rpx;
  height: 60rpx;
  border-radius: 8rpx;
}
.article-name{
  display: inline-block;
  width: 82%;
  line-height: 38rpx !important;
  height: 38rpx;
}
.article-title{
  font-size: 28rpx;
  padding-right: 20rpx;
  margin-bottom: 10rpx;
}
.article-title navigator{
  font-size: 24rpx;
  color: #999;
  float: right !important;
}
.baike{
  background-color: #fff;
  width: 100%;
  padding:20rpx;
  margin: 20rpx 0;
}
.baike .article-title{
  margin-bottom: 20rpx;
}
.baike-list{
  color: #333;
  font-size: 24rpx;
  margin-bottom: 20rpx;
  padding: 0 0 20rpx;
  font-weight: 500;
  border-bottom: 1px solid #f2f2f2;
}
.baike-list text{
  margin-right: 10rpx;
}
.baike-info{
  display: flex;
  margin-top: 10rpx;
}
.baike-info image{
  width: 150rpx;
  height: 150rpx;
  border-radius: 10rpx;
}
.baike-info text{
  display: block;
  width: 75%;
  padding: 20rpx;
  color: #666;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
  -webkit-line-clamp: 3;-webkit-box-orient: vertical;align-content: center;
  height: 123rpx;
}
.tab{
  background: #fff;
  margin-top: 16rpx;
  padding:0 20rpx;
  display: flex;
  border-bottom: 1px solid #f2f2f2;
  
}
.tab view{
  font-size: 28rpx;
  color: #333;
  line-height: 80rpx;
  transition: all .1s linear;
  margin-right: 30rpx;
}
.tab .act{
  color: #FF583D;
  border-bottom: 2px solid #FF583D;
}
.swiper-content{
  background: #fff;
  height: calc(100vh - 86rpx);
}

scroll-view{
  height: 100%;
  padding: 25rpx 25rpx 0;
}
.swiper-content scroll-view{
  padding-top: 0;
}
.item1{
  border-bottom: 1px solid #F5F5F5;
  margin: 30rpx 0;
}
.name{
  font-size: 32rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
}
.name>text{
  color: #AAAAAA;
  font-size: 20rpx;
  border: 1px solid #AAAAAA;
  border-radius: 4rpx;
  font-weight: 400;
  padding: 0 4rpx;
  position: relative;
  top: -3rpx;
}
.name view{
  float: right;
  color: #CE994F;
  font-size: 22rpx;
  text-align: center;
  position: relative;
  top: -5rpx;
}
.name view text{
  display: block;
  font-size: 32rpx;
  color: #CE994F;
  position: relative;
  top: -8rpx;
}
.info{
  font-size: 30rpx;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
}
.info view{
  color: #666;
  width: 85%;
  vertical-align: top;
}
.info label{
  font-weight: 500;
  color: #333;
}
.imgs{
  margin: 30rpx 0;
}
.img{
  display: inline-block;
  width: 224rpx;
  height: 224rpx;
  border-radius: 8rpx;
  margin-right: 8rpx;
  margin-bottom: 8rpx;
}

/* //热门股票 */
.item2{
  padding: 20rpx 25rpx 0;
}
.date-picker{
  text-align: center;
  font-weight: 500;
  font-size: 32rpx;
}
.hot{
  border-radius: 16rpx;
  margin-top: 30rpx;
  /* box-shadow: 0px 0px 12px 0px rgba(218, 217, 217, 0.5); */
}
.hot_tab{
  display: flex;
}
.hot_tab view{
  width: 50%;
  text-align: center;
  font-size: 30rpx;
  line-height: 88rpx;
  position: relative;
}
.hot_tab .act1{
  font-weight: bold;
}
.act1 text{
  position: absolute;
  width: 64rpx;
  height: 6rpx;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: rgba(217, 75, 36, 1);
  border-radius: 40rpx;
}
.tab1{
  color: #D94B24;
  padding: 0 24rpx;
  font-weight: 500;
  font-size: 40rpx;
  line-height: 88rpx;
  border-radius: 16rpx 16rpx 0px 0px;
  background: linear-gradient(124deg, #FEEAEC 0%, #FFAEAF 100%);
}
.tab2{
  color: #2383E5;
  padding: 0 24rpx;
  font-weight: 500;
  font-size: 40rpx;
  line-height: 88rpx;
  border-radius: 16rpx 16rpx 0px 0px;
  background: linear-gradient(124deg, #ECF6FF 0%, #B4D9FF 100%);
}
.hot image{
  width: 54rpx;
  position: relative;
  top:3rpx;
}
.gp{
  display: flex;
  justify-content: space-between;
  padding: 24rpx 0;
  flex-wrap: wrap;
  border-bottom: 1px solid #F5F5F5;
}
.gp-name{
  font-weight: 500;
  font-size: 32rpx;
  width: 60%;
  padding-left: 8rpx;
}
.num{
  font-size: 28rpx;
  color: #999;
  text-align: right;
  width: 200rpx;
}
.num text{
  font-size: 36rpx;
  font-weight: 500;
  color: #D94B24;
}
.comment{
  width: 100%;
  padding-top: 10rpx;
  padding-left: 60rpx;
}
.comment text{
  color: #666;
  margin:0 10rpx;
  font-size: 28rpx;
}
.more{
  display: block;
  
  line-height: 94rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}
.more image{
  width: 24rpx;
  position: relative;
  top: 3rpx;
}

/* 胜率 */
.win{
  position: relative;
  padding: 30rpx 0;
  padding-left: 59rpx;
  border-bottom: 1px solid #F5F5F5;
}
.win image{
  width: 50rpx;
  position: absolute;
  top: 33rpx;
  left: 0;
}
.hot .rank{
  width:50rpx;text-align:center;color:#CE994F;
  display: inline-block;
}
.win .rank{
  position: absolute;
  top: 32rpx;
  left: 0;
  width:50rpx;text-align:center;color:#CE994F;
}
.win .name view{
  float: right;
  color: #666;
  font-size: 28rpx;
  text-align: center;
  position: relative;
  top: 0;
  font-weight: 400;
}
.win .name view text{
  font-size: 36rpx;
  color: #E90001;
  display: inline;
  top: 0;
}
.win .tag{
  font-size: 28rpx;
  color: #CE994F;
  border: 1px solid #CE994F;
  border-radius: 8rpx;
  margin-right: 8rpx;
  font-weight: 400;
  padding: 0 8rpx;
  margin-bottom: 10rpx;
}

/* 冠军心得 */
.list{
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #F5F5F5;
  padding: 24rpx 0;
}
.list image{
  width: 174rpx;
  height: 120rpx;
  border-radius: 8rpx;
}
.list>view{
  width: 70%;
  font-size: 32rpx;
}
.list .title{
  height: 88rpx;
}
.list text{
  font-size: 28rpx;
  color: #999;
}
.exp{
  color: #D94B24;
  font-size: 24rpx;
}


.relist{
  position: relative;
  padding-left: 80rpx;
  margin-bottom: 24rpx;
}
.relist>image{
  width: 64rpx;
  height: 64rpx;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 100%;
}
.content,.msg .name{
  font-size: 30rpx;
  line-height: 48rpx;
  color: #333;
}
.msg view{
  color: #666;
  font-size: 28rpx;
}
.msg view label{
  font-size: 28rpx;
}
.recomment{
  padding:  24rpx 0;
  border-bottom: 1px solid rgba(245, 245, 245, 1);
}
.recomment image{
  width: 32rpx;
  margin-right: 10rpx;
  position: relative;
  top: 5rpx;
}
.recomment text{
  color: #999;
  font-size: 28rpx;
  margin-right: 40rpx;
}