H5_module/share/content/index.css

/* index.css */
page{background: #fff;padding: 0 0 30rpx;box-sizing: border-box;}
.user{padding: 30rpx;}
.userimg{width: 80rpx;height: 80rpx;margin-right: 25rpx;}
.username{font-size: 28rpx;color: #333;font-weight: bold;}
.title{font-size: 40rpx;color: #282828;font-weight: bold;line-height: 60rpx;padding: 0 30rpx;margin-bottom: 30rpx;}
.brief{font-size: 30rpx;color: #282828;line-height: 50rpx;padding: 0 30rpx;}
.imabox{flex-wrap: wrap;padding: 0 30rpx;margin-top: 30rpx;}
.img{width: 220rpx;height: 220rpx;border-radius: 10rpx;margin: 0 15rpx 15rpx 0;}
.imabox .img:nth-child(3n){margin-right: 0;}
.det-sta{padding: 0 30rpx;margin-top: 20rpx;font-size: 24rpx;}
.sitename{color: var(--mina);margin-right: 15rpx;}
.time{color: #999;font-size: 24rpx;margin-top: 10rpx;}
.time text{font-size: 28rpx;color: #333;margin-right: 23rpx;}
.content{font-size: 34rpx;color: #333;padding: 0 30rpx 30rpx;line-height: 1.7;}
.con-vheight{max-height: 120vh;position: relative;overflow: hidden;}
.con-vheight::after{content: '';display: block;position: absolute;left: 0;right: 0;bottom: 0;height: 15vh;background: linear-gradient(rgba(255, 255, 255, 0), #fff);z-index: 5;}
.content video{width: 100%;height: 400rpx;object-fit:fill; margin-bottom: 20rpx;}
.content image{width: 100%;margin: 30rpx auto;}
._p{padding: 0 30rpx;}
.view-more{width: 230rpx;height: 70rpx;font-size: 30rpx;color: #999;margin: 30rpx auto 0;text-align: center;line-height: 70rpx;}
.bot{padding: 40rpx 35rpx 0;}
.sbanner{overflow: hidden;position: relative;}
.sbanner .swiper,.sbanner .swiper image{width: 100%;height: 160rpx;border-radius: 12rpx;overflow: hidden;}
.dots{position: absolute;left: 0;right: 0;bottom: 20rpx;align-items: center;justify-content: center;}
.dot{background: rgba(0,0,0,.5);width: 12rpx;height: 12rpx;border-radius: 6rpx;margin: 0 4rpx;}
.dot.active{width: 30rpx;background: #fff;}
.tits{font-size: 36rpx;color: #333;font-weight: bold;margin: 30rpx 0 0;}
.zxlist .li{padding: 40rpx 0;border-bottom: 1rpx solid #EBEBEB;}
.zximg{width: 230rpx;height: 150rpx;border-radius: 12rpx;margin-right: 23rpx;}
.zxtit{font-size: 30rpx;color: #333;line-height: 41rpx;height: 82rpx;}
.datas{font-size: 24rpx;color: #999;margin-top: 30rpx;}
.adContainer{margin: 30rpx 0 0;border-radius: 10rpx;overflow: hidden;}
.operate{padding: 30rpx 30rpx 50rpx;justify-content: space-between;font-size: 28rpx;color: #666;margin-top: 40rpx;}
.zan image{width: 30rpx;height: 30rpx;margin-right: 15rpx;}
.zan.active{color: #108FFF;}
.share{font-size: 28rpx;color: #666;}
.share image{width: 30rpx;height: 30rpx;margin-right: 15rpx;}
.box{padding: 40rpx 30rpx 0;border-top: 20rpx solid #f9f9f9;}
.tit{font-size: 32rpx;color: #333;font-weight: bold;}
.pro{padding-bottom: 10rpx;}
.pro .li{padding: 30rpx 0;border-bottom: 1rpx solid #e5e5e5;}
.pro .li:last-child{border-bottom: none;}
.proimg{box-sizing: border-box;width: 210rpx;height: 210rpx;border-radius: 10rpx;margin-right: 20rpx;border: 2rpx solid #E5E5E5;}
.proname{font-size: 28rpx;color: #333;overflow : hidden;line-height: 36rpx;height: 72rpx;}
.infos {font-size: 24rpx;color: #999;margin: 10rpx 0 20rpx;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.Ninfos{padding: 16rpx 0;}
.ope{justify-content: space-between;align-items: center;}
.price{font-size: 25rpx;color: #FE0419;align-items: center;}
.price text{font-size: 36rpx;font-weight: bold;}
.price text.del{font-size: 24rpx !important;color: #999;text-decoration: line-through;margin-left: 15rpx;font-weight: normal !important;}
.price .vip{margin-left: 12rpx;color: var(--vip);border: 1rpx solid;padding: 0 8rpx 2rpx 8rpx;border-radius: 5px;}
.price .vip text{font-size: 24rpx;font-weight: normal;}
.btn{width: 150rpx;height: 50rpx;background: linear-gradient(90deg, rgba(254, 147, 76, 1) 0%, rgba(253, 58, 49, 1) 100%);font-size: 24rpx;color: #fff;text-align: center;line-height: 50rpx;border-radius: 25rpx;}
.rec .li{padding: 30rpx 0;border-bottom: 1rpx solid #EDEDED;}
.rec .li:last-child{border-bottom: none;}
.rec-tit{font-size: 34rpx;color: #333;font-weight: bold;line-height: 48rpx;height: 96rpx;margin-bottom: 25rpx;}
.author{font-size: 28rpx;color: #999;margin-right: 24rpx;}
.author image{width: 32rpx;height: 32rpx;border-radius: 2rpx;margin-right: 10rpx;}
.rec-time{font-size: 28rpx;color: #999;}
.rec-img{width: 218rpx;height: 152rpx;margin-left: 55rpx;}

/* 广告 */
.banner{height: 200rpx;position: relative;padding: 30rpx;border-top: 20rpx solid #f9f9f9;}
.swiper{width: 100%;height: 200rpx;border-radius: 10rpx;}
.swiper image{width: 100%;height: 100%;border-radius: 10rpx;}
.dots{position: absolute;left: 50%;transform: translateX(-50%);bottom: 50rpx;z-index: 3;justify-content: center;}
.dot{width: 46rpx;height: 4rpx;background: rgba(255,255,255,.5);margin: 0 3rpx;}
.dot.active{background: #fff;}