wxd / MShopWeApp

/* pages/liveStream/liveStream.wxss */
page{
  background-color: #eee;
}
.title {
  font-size: 30rpx;
  padding: 50rpx 32rpx;
}
.list-item {
  display: flex;
}
.list-item-left {
  position: relative;
  flex-shrink: 0;
}

.xcx-image {
  width: 20rpx;
  height: 20rpx;
  margin-left: 18rpx;
  margin-top: 8rpx;
  background-size:contain;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAAlQTFRFPcRKAAAA////QjSLrQAAAAN0Uk5T/wD/aewfvgAAATZJREFUeJzt1MFxBSEIANDfRErTAyXQj+nAg1T58wVUEDObnfxLJl52xrcKKvr4SIf2OMG/vF0yUY2FvlqJBF9CgeQOPJ8VYGm7kLTiJatUL3AUVCEvdEGKlTylXhXgPlmrl8ZDAymciBOUbcZImo69Knoy+YakSMr3Es52W8L1lLniSPYdFQlOQQTsmdYp9rSRhoCpHeh/cQ8aoUVMJUo2XbIR9NJU5LcusN6FvEkRgU2SCNISRwqVRWt8ZKB3e+Sp6+lDhrQ096CqjGz4k+e7M2KOqlqlhoLLKe+STtJuSP1V+XEGIJLD3TlLSXqhVnn1fKZll4xIwQcij5cTfurGmXshLSAjeJTxtK/LcZKcjNe4eUlRmHmzfBgWCMLMG+zDiOA+mci2NVPQR5nvjkt5kb39NXkCPTYQh7BBvFgAAAAASUVORK5CYII=

  ) ;
}

.share-image {
  width: 30rpx;
  height: 30rpx;
  margin-left: 18rpx;
  margin-top: 8rpx;
  background-size:contain;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAuIwAALiMBeKU/dgAAACFQTFRFAAAA/04w/04w/04w/04w/04w/0ww/0Aw/0AA/00w/04wncLKIgAAAAt0Uk5TAP8/LxsOQBAE4ZBG21G1AAABIUlEQVR4nO3W2w3CMAwF0AYEEnzRDRiBEViFERiBzUEg+vK913ZFEUjxRyWanDqP4rRpatT4YpR2EIdlyAg8YhEyFQEyFT4xSfzp55M0qh++X4QoeJRqLKRJTZg8Tk14LrGtclkpYVN5bzK4jQndW7pg/A1iRLxChJQ0ka92hIBGQ/S/ARGyH4rgKShSZA5BeAWwrZ5gRFWZjxBP2A5uEkKUwESXWEPccZke/rj+gRw74pxJPTl1RIsBOXe/TacyStyTTZ6sn9cLIJPB9mT1vF4JOSDyilue7PJknydbsJMOQV8HHgFRSSW/TwKlzvSZR+LlMUpMZZ9J/OM0R+yp7n2yoHaHtGAYbSRQ5owIpcETzIhAGroqGeEYvfwJUGOZuAN2OElDEXSpWQAAAABJRU5ErkJggg==
  ) ;
}
.list-item-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 32rpx;
  /* position: relative;
  padding-bottom: 70rpx; */
}

.share-actionSheet {
  background-color: white;
  padding-top: 45rpx;
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 2;
}
.share-actionSheet-title {
  font-size: 38rpx;
  
}
.share-actionSheet-list {
  display: flex;
  justify-content: space-around;
  padding-bottom: 30rpx;
}
.share-actionSheet-item {
  text-align: center;
  padding: 20rpx;
}
.share-actionSheet-pic {
  display: block;
  width: 118rpx;
  height: 118rpx;
  border-radius: 50%;
  margin: 0 auto;
}
.share-actionSheet-desc {
  font-size: 28rpx;
}

.share-actionSheet-title,
.share-actionSheet-cancle {
  text-align: center;
}

.share-actionSheet-cancle {
  padding: 30rpx 0;
  border-top: 2rpx solid #CBCBCB;
}
.item-pic {
  /* width: 400rpx; */
  width: 100%;
  height: 100%;
  background-color: #eee;
  border-radius: 15rpx;
}
.item-desc {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: black;
  color: #fff;
  text-align: center;
  padding-bottom: 23rpx;

  background: -moz-linear-gradient(bottom,#7A7171, transparent);/*Mozilla*/
  background: -webkit-gradient(bottom,0 50%,100% 50%,from(#7A7171),to(transparent));/*Old gradient for webkit*/
  background: -webkit-linear-gradient(bottom,rgba(0,0,0,.8),transparent);/*new gradient for Webkit*/
  background: -o-linear-gradient(bottom,#7A7171,transparent); /*Opera11*/
}
.item-desc view:first-child {
  font-size: 24rpx;
  font-weight: bold;
}
.item-desc view:last-child {
  font-size: 17rpx;
}
.item-title {
  font-weight: bold;
  font-size: 30rpx;
  text-align: justify;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.item-time {
  color: #999;
  font-size: 24rpx;
  padding-top: 10rpx;
}
.item-anchor {
  color: #999;
  font-size: 24rpx;
  text-align: justify;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.item-btn {
  width: 172rpx;
  height: 56rpx;
  line-height: 56rpx;
  background-color: #f23030;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  position: absolute;top: 15rpx;left: 7px;
    border-radius: 15rpx;
}
.item-btnhf {
  width: 172rpx;
  height: 56rpx;
  line-height: 56rpx;
  background-color: #acacac;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  position: absolute;top: 15rpx;left: 7px;
    border-radius: 15rpx;
}
.item-btnjjkb {
  width: 172rpx;
  height: 56rpx;
  line-height: 56rpx;
  background-color: rgb(250, 182, 36);
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  position: absolute;top: 15rpx;left: 7px;
    border-radius: 15rpx;
}


.item-btnld {
  width: 202rpx;
  height: 56rpx;
  line-height: 56rpx;
  background-color: #c9c9c9;
  font-size: 24rpx;
  text-align: center;
  position: absolute;
  bottom: 12rpx;
    border-top-right-radius: 15rpx;
    overflow: hidden;
    opacity: 0.3;
}
.item-btnldt {
  width: 202rpx;
  height: 56rpx;
  line-height: 56rpx;
  color: white;
  font-size: 24rpx;
  text-align: center;
  position: absolute;
  bottom: 12rpx;
  overflow: hidden;
  margin-left: 20rpx;
}

.item-btnxcx {
  width: 32rpx;
  height: 32rpx;
  line-height: 56rpx;
  color: rgb(233, 233, 233);
  font-size: 24rpx;
  left: 0;
  bottom: 22rpx;
  position: absolute;
  overflow: hidden;

}

.content {
  background-color: white;
  padding-bottom: 168rpx;
  position: relative;
}
button::after {
  border: none;
}

subscribe {
  position: relative;
}
.subscribe--live-player-subscribe__btn {
  width: 172rpx !important;
  height: 56rpx !important;
  line-height: 56rpx !important;
  background-color: #f23030 !important;
  font-size: 28rpx !important;
  position: relative;
  border-radius: 0 !important;
  margin: 0 !important;
}
.subscribe--live-player-notSubscribe::before {
  content: '订阅';
  position: absolute;
  left: 0;
  width: 172rpx;
  height: 56rpx;
  background-color: #f23030;
  color: #fff;
}
.subscribe--live-player-hasSubscribe {
  background-color: #666 !important;
}

.no-more {
	font-size: 24rpx;
	line-height: 3;
	color: #909090;
	text-align: center;
}

.share-actionSheet.active ~ .mask,

.mask {
  display: none;
  background-color: rgba(0,0,0,.7);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.playbill {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: none;
}
.share-actionSheet.active ~ .mask,
.playbill.active ~ .mask {
  display: block;
}
.playbill-pic {
  display: block;
  width: 560rpx;
  height: auto;
  margin: 0 auto 26rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.playbill-save {
  width: 560rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #f23030;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  margin: 0 auto;
}
.playbill-save image {
  width: 44rpx;
  height: 36rpx;
  margin-right: 23rpx;
}