2257 lines
48 KiB
CSS
2257 lines
48 KiB
CSS
/* 安卓全屏模拟标题 */
|
|
.block-title {
|
|
height: 2.5rem;
|
|
background: #373b3e;
|
|
padding: 0 2.8rem;
|
|
color: #fff;
|
|
font-size: 0.85rem;
|
|
line-height: 2.7rem;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 101;
|
|
display: none;
|
|
}
|
|
|
|
.block-title:before {
|
|
content: '';
|
|
border-left: 1px solid #313336;
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
bottom: 0.5rem;
|
|
left: 2.2rem;
|
|
}
|
|
|
|
.player-fullscreen .block-title {
|
|
display: block;
|
|
}
|
|
|
|
/* 视频播放 区域*/
|
|
.block-video {
|
|
height: 11rem;
|
|
background-color: #000;
|
|
background-image: url("../images/preview-cover.jpg");
|
|
background-position: 0 0;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fullscreen .block-video {
|
|
height: auto;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.block-video .video {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-position: 0 0;
|
|
object-fit: fill;
|
|
}
|
|
|
|
.fullscreen .block-video .video {
|
|
height: 100%;
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.player-fullscreen .block-video {
|
|
height: auto;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.player-fullscreen .block-video .video {
|
|
object-fit: contain;
|
|
object-position: 0px 50px;
|
|
}
|
|
.prompt .live-tips {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 99;
|
|
text-align: center;
|
|
color: #fff;
|
|
display: none;
|
|
}
|
|
|
|
.prompt .live-tips.loading {
|
|
display: block;
|
|
}
|
|
|
|
.prompt .live-tips .inner {
|
|
height: 2rem;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
margin-top: -1rem;
|
|
}
|
|
|
|
.fullscreen .prompt .live-tips .inner {
|
|
position: relative;
|
|
height: auto;
|
|
}
|
|
|
|
.prompt .live-tips .inner .date {
|
|
color: #118cff;
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
.fullscreen .prompt .live-tips {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding-top: 4rem;
|
|
}
|
|
|
|
.player-fullscreen .prompt .live-tips {
|
|
padding-top: 8rem;
|
|
}
|
|
|
|
.fullscreen .prompt .live-tips .inner {
|
|
width: 70%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 0.6rem 0;
|
|
margin: auto;
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
.prompt .live-tips.play .inner .icon {
|
|
height: 2rem;
|
|
font-size: 2rem;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.fullscreen .prompt .live-tips.play .inner {
|
|
width: 4rem;
|
|
}
|
|
|
|
/* 直播信息(顶部) 区域 */
|
|
.block-info {
|
|
height: 1.7rem;
|
|
width: auto;
|
|
max-width: 50%;
|
|
position: absolute;
|
|
top: 0.4rem;
|
|
left: 0.5rem;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
z-index: 11;
|
|
}
|
|
|
|
.player-fullscreen .block-info {
|
|
top: 2.9rem;
|
|
}
|
|
|
|
.block-info .live-info {
|
|
height: 1.6rem;
|
|
width: 100%;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
padding: 0.25rem;
|
|
border-radius: 3px;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.block-info .live-info .face {
|
|
height: 1.1rem;
|
|
width: 1.1rem;
|
|
border-radius: 1.1rem;
|
|
background: yellow;
|
|
}
|
|
|
|
.block-info .live-info .face img {
|
|
height: 1.1rem;
|
|
width: 1.1rem;
|
|
display: block;
|
|
border-radius: 1.1rem;
|
|
}
|
|
|
|
.block-info .live-info .text {
|
|
width: 100%;
|
|
color: #fff;
|
|
font-size: 0.7rem;
|
|
line-height: 1.1rem;
|
|
padding: 0 0.3rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.block-info .live-info .btn-favorite {
|
|
height: 1.1rem;
|
|
padding:0 0.2rem;
|
|
color: #fff;
|
|
font-size: 0.6rem;
|
|
background: #118cff;
|
|
text-align: center;
|
|
border-radius: 0.3rem;
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
.block-info .live-info .btn-favorite.disabled {
|
|
background: #f95959;
|
|
}
|
|
|
|
.block-info .btn-gifts {
|
|
height: 1.6rem;
|
|
width: 1.6rem;
|
|
margin-left: 0.4rem;
|
|
}
|
|
|
|
.fullscreen .block-info .btn-gifts {
|
|
width: 9.5rem;
|
|
margin-left: 0;
|
|
position: absolute;
|
|
left: -0.5rem;
|
|
top: 2.2rem;
|
|
}
|
|
|
|
.fullscreen .block-info .btn-gifts .inner {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
position: absolute;
|
|
top: -0.2rem;
|
|
left: 0.5rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.fullscreen .block-info .btn-gifts .text {
|
|
background: #fdac6d;
|
|
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0));
|
|
line-height: 1.6rem;
|
|
color: #fff;
|
|
font-size: 0.65rem;
|
|
padding-left: 2.8rem;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: block;
|
|
}
|
|
|
|
.block-info .btn-gifts .inner {
|
|
height: 1.6rem;
|
|
width: 1.6rem;
|
|
background-image: url("../images/icon-gifts.png");
|
|
background-position: 0 0;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.block-info .btn-gifts .text {
|
|
display: none;
|
|
}
|
|
|
|
/* 直播观看人数(顶部) 区域 */
|
|
.block-online {
|
|
width: auto;
|
|
max-width: 40%;
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem;
|
|
font-size: 0.6rem;
|
|
z-index: 11;
|
|
}
|
|
|
|
.player-fullscreen .block-online {
|
|
top: 3rem;
|
|
}
|
|
|
|
.block-online .online {
|
|
color: #fff;
|
|
text-align: right;
|
|
}
|
|
|
|
.block-online .mycard {
|
|
height: 1.1rem;
|
|
width: auto;
|
|
display: block;
|
|
background-color: #020202;
|
|
background-image: url("../images/icon-myacard.png");
|
|
background-position: 1px center;
|
|
background-size: 1rem;
|
|
background-repeat: no-repeat;
|
|
padding: 0 0.2rem 0 1.1rem;
|
|
margin-top: 0.2rem;
|
|
color: #d0a762;
|
|
border-radius: 3px;
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
/* 视频播放 区域*/
|
|
.block-tab {
|
|
height: 2.2rem;
|
|
background: #fff;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
z-index: 2;
|
|
}
|
|
|
|
.fullscreen .block-tab {
|
|
display: none;
|
|
}
|
|
|
|
.player-fullscreen .block-tab {
|
|
top: 13.5rem;
|
|
}
|
|
|
|
.block-tab:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-bottom: 1px solid #eaeaea;
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.block-tab a {
|
|
width: 100%;
|
|
line-height: 2.2rem;
|
|
text-align: center;
|
|
font-size: 0.7rem;
|
|
color: #333;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.block-tab a.active {
|
|
color: #118cff;
|
|
}
|
|
|
|
.block-tab a.active:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
right: 0.5rem;
|
|
bottom: 0;
|
|
border-bottom: 2px solid #118cff;
|
|
}
|
|
|
|
/* 内容 区域 */
|
|
.block-content {
|
|
background: #fafafa;
|
|
position: absolute;
|
|
top: 13.2rem;
|
|
bottom: 2.8rem;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.fullscreen .block-content {
|
|
height: 15rem;
|
|
width: 70%;
|
|
background: none;
|
|
margin-left: 0.5rem;
|
|
top: auto;
|
|
}
|
|
|
|
.player-fullscreen .block-content {
|
|
/*top: 15.7rem;*/
|
|
}
|
|
|
|
.block-content .layer-enter {
|
|
height: 1.5rem;
|
|
width: 9.5rem;
|
|
position: absolute;
|
|
top: 2rem;
|
|
left: 0;
|
|
background: url("../images/bg-enter.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #fff;
|
|
z-index: 10;
|
|
font-size: 0.7rem;
|
|
line-height: 1.5rem;
|
|
|
|
left: 100%;
|
|
transition: all 0.4s;
|
|
-moz-transition: all 0.4s;
|
|
-webkit-transition: all 0.4s;
|
|
-o-transition: all 0.4s;
|
|
opacity: 0;
|
|
}
|
|
|
|
.block-content .layer-enter.in {
|
|
left: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.block-content .layer-enter.out {
|
|
left: -100%;
|
|
opacity: 0;
|
|
}
|
|
|
|
.block-content .layer-enter .name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
float: left;
|
|
max-width: 4.5rem;
|
|
padding-left: 0.3rem;
|
|
}
|
|
|
|
.block-content .layer-enter .text {
|
|
width: 5rem;
|
|
padding-left: 4px;
|
|
float: left;
|
|
}
|
|
|
|
.block-content .layer-at {
|
|
width: auto;
|
|
padding: 0.4rem 0.4rem 0.4rem 1.4rem;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 0 1rem 1rem 0;
|
|
font-size: 0.7rem;
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 0;
|
|
background: #ededed;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
z-index: 2;
|
|
-webkit-transform: translate(-100%, 0);
|
|
-ms-transform: translate(-100%, 0);
|
|
transform: translate(-100%, 0);
|
|
transition: all 0.4s;
|
|
-moz-transition: all 0.4s;
|
|
-webkit-transition: all 0.4s;
|
|
-o-transition: all 0.4s;
|
|
}
|
|
|
|
.block-content .layer-at.in {
|
|
-webkit-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
.fullscreen .block-content .layer-at {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
padding: 0.4rem 0.4rem 0.4rem 1.6rem;
|
|
border: 0;
|
|
position: absolute;
|
|
top: -2.2rem;
|
|
left: -0.5rem;
|
|
}
|
|
|
|
.block-content .layer-at .layer-close {
|
|
border: 0;
|
|
color: #cccccc;
|
|
left: 0.6rem;
|
|
top: 0;
|
|
}
|
|
|
|
.block-content .layer-at .at-text {
|
|
max-width: 10rem;
|
|
padding-right: 0.4rem;
|
|
color: #0e0e0e;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.block-content .layer-at .at-icon {
|
|
height: 1.2rem;
|
|
width: 1.2rem;
|
|
background: #f95959;
|
|
border-radius: 1.2rem;
|
|
font-size: 0.9rem;
|
|
color: #fff;
|
|
line-height: 1.2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.block-content .tab-content {
|
|
height: 100%;
|
|
display: none;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
.block-content .tab-content[data-tab="interaction"] {
|
|
padding-right: 2.2rem;
|
|
}
|
|
.fullscreen .block-content .tab-content {
|
|
background: none;
|
|
}
|
|
.fullscreen .block-content .tab-content[data-tab="interaction"] {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.block-content .tab-content[data-tab='chat'] {
|
|
display: block;
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content[data-tab='chat'] {
|
|
height: 15rem;
|
|
}
|
|
|
|
/* 消息样式 */
|
|
.block-content .tab-content .msg {
|
|
width: 100%;
|
|
padding: 0 0.5rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
word-break:break-all;
|
|
word-wrap:break-word;
|
|
display: block;
|
|
}
|
|
|
|
.block-content .tab-content .msg.notice,
|
|
.block-content .tab-content .msg.notice .content {
|
|
color: #ef4f4f;
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content .msg {
|
|
background: rgba(255, 255, 255, 0.4);
|
|
padding: 0.1rem 0.5rem;
|
|
margin-bottom: 0.3rem;
|
|
border-radius: 0.4rem;
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content .msg.nopadding {
|
|
padding: 0;
|
|
background: none;
|
|
display: block;
|
|
}
|
|
|
|
.block-content .tab-content .msg a {
|
|
color: #118cff;
|
|
}
|
|
|
|
.block-content .tab-content .msg .tip {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.block-content .tab-content .msg .tip .text {
|
|
background: #ccc;
|
|
color: #fff;
|
|
font-size: 0.65rem;
|
|
line-height: 1.2rem;
|
|
padding: 0 0.5rem;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content .msg .tip .text {
|
|
background: rgba(204, 204, 204, 0.6);
|
|
}
|
|
|
|
.block-content .tab-content .msg .nickname {
|
|
color: #118cff;
|
|
display: inline;
|
|
font-size:0.6rem;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content {
|
|
color: #444;
|
|
display: inline;
|
|
font-size:0.6rem;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content img {
|
|
max-width: 50%;
|
|
width: auto;
|
|
height: auto;
|
|
display: inline-block;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content img.face {
|
|
max-width: 24px;
|
|
width: 24px;
|
|
height: 24px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content .msg .content img {
|
|
border-radius: 0.1rem;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .coupon,
|
|
.block-content .tab-content .msg .content .redpack {
|
|
width: auto;
|
|
max-width: 80%;
|
|
height: 2.5rem;
|
|
padding: 0 0.4rem 0 2.2rem;
|
|
background-color: #f44649;
|
|
background-image: url("../images/icon-redpack.png");
|
|
background-position: 0.2rem center;
|
|
background-size: 2rem;
|
|
background-repeat: no-repeat;
|
|
border-radius: 0.4rem;
|
|
line-height: 1rem;
|
|
color: #fff;
|
|
display: table-cell;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .coupon p.desc,
|
|
.block-content .tab-content .msg .content .redpack p.desc {
|
|
font-size: 0.65rem;
|
|
line-height: 0.7rem;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .redpack.drew {
|
|
background-color: #faa1a1;
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content .msg .content .coupon,
|
|
.fullscreen .block-content .tab-content .msg .content .redpack {
|
|
max-width: 100%;
|
|
background-color: rgba(244, 70, 73, 0.9);
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content .msg .content .redpack.drew {
|
|
background-color: rgba(250, 161, 161, 0.9);
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .conpon:empty,
|
|
.block-content .tab-content .msg .content .redpack:empty {
|
|
background-position: center center;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .coupon {
|
|
background-color: #4e9afe;
|
|
background-image: url("../images/icon-coupon.png");
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .coupon.drew {
|
|
background-color: #91caff;
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content .msg .content .coupon {
|
|
background-color: rgba(78, 154, 254, 0.9);
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content .msg .content .coupon.drew {
|
|
background-color: rgba(142, 202, 255, 0.9);
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .goods {
|
|
width: 80%;
|
|
height: 3.8rem;
|
|
background-color: #eee;
|
|
border-radius: 0.4rem;
|
|
padding: 0.4rem 0.6rem;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
.fullscreen .block-content .tab-content .msg .content .goods {
|
|
width: 90%;
|
|
background-color: rgba(238, 238, 238, 0.9);
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .goods .thumb {
|
|
height: 3rem;
|
|
width: 3rem;
|
|
background: #ddd;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .goods .thumb img {
|
|
max-width: 3rem !important;
|
|
height: 3rem;
|
|
width: 3rem;
|
|
display: block;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .goods .info {
|
|
width: 1%;
|
|
height: 3rem;
|
|
margin-left: 0.4rem;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .goods .info .title {
|
|
width: 100%;
|
|
height: 1.5rem;
|
|
line-height: 1.5rem;
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .goods .info .price {
|
|
line-height: 1rem;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
vertical-align: middle;
|
|
margin-top: 0.4rem;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .goods .info .price .num {
|
|
color: #f95959;
|
|
font-size: 0.85rem;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
display: inline-block;
|
|
}
|
|
|
|
.block-content .tab-content .msg .content .goods .info .price .btn-buy {
|
|
padding: 0 0.2rem;
|
|
background: #e64a4c;
|
|
border-radius: 0.2rem;
|
|
color: #fff;
|
|
font-size: 0.55rem;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.block-content .tab-content .msg .btn-repeal {
|
|
height: 0.9rem;
|
|
line-height: 0.9rem;
|
|
color: #999;
|
|
background: #f3f3f3;
|
|
text-align: center;
|
|
border-radius: 0.2rem;
|
|
font-size: 0.55rem;
|
|
margin-left: 0.2rem;
|
|
padding: 0 0.2rem;
|
|
display: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.block-content .tab-content .msg .btn-repeal.show {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* 房间信息 */
|
|
.block-content .tab-content .shop-info {
|
|
height: 3.6rem;
|
|
background: #fff;
|
|
padding: 0.95rem 0.5rem;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.block-content .tab-content .shop-info:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-bottom: 1px solid #eaeaea;
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.block-content .tab-content .shop-info .logo,
|
|
.block-content .tab-content .shop-info .logo img {
|
|
height: 1.7rem;
|
|
width: 1.7rem;
|
|
display: block;
|
|
border-radius: 1.7rem;
|
|
}
|
|
|
|
.block-content .tab-content .shop-info .info {
|
|
width: 1%;
|
|
padding: 0 0.5rem;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.block-content .tab-content .shop-info .btn-enter {
|
|
height: 1.25rem;
|
|
background: #3482fe;
|
|
color: #fff;
|
|
line-height: 1.25rem;
|
|
font-size: 0.65rem;
|
|
padding: 0 0.5rem;
|
|
border-radius: 1.25rem;
|
|
}
|
|
|
|
.block-content .tab-content .room-info {
|
|
height: auto;
|
|
background: #fff;
|
|
padding: 0.5rem 0.5rem 0.5rem 1rem;
|
|
font-size: 0.7rem;
|
|
position: relative;
|
|
}
|
|
|
|
.block-content .tab-content .room-info p {
|
|
line-height: 1.4rem;
|
|
}
|
|
|
|
.block-content .tab-content .room-info:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-bottom: 1px solid #eaeaea;
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.block-content .tab-content .room-info:after {
|
|
content: '';
|
|
height: 0.7rem;
|
|
position: absolute;
|
|
top: 0.85rem;
|
|
left: 0.5rem;
|
|
border-left: 4px solid #3482fe;
|
|
}
|
|
|
|
/* 浮动图标 */
|
|
.block-icon {
|
|
width: 2.45rem;
|
|
height: auto;
|
|
position: fixed;
|
|
right: 0.25rem;
|
|
bottom: 4.5rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
.block-icon .btn-gift {
|
|
height: 2.2rem;
|
|
width: 2.45rem;
|
|
background-image: url("../images/icon-gift2.png");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin-top: 0.85rem;
|
|
}
|
|
|
|
.block-icon .btn-content {
|
|
height: 2.2rem;
|
|
width: 2.45rem;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin-top: 0.85rem;
|
|
}
|
|
.block-icon .btn-content.btn-show{
|
|
background-image: url("../images/btn-show.png");
|
|
display: none;
|
|
}
|
|
.block-icon .btn-content.btn-hide{
|
|
background-image: url("../images/btn-hide.png");
|
|
}
|
|
|
|
.block-icon .btn-like {
|
|
height: 2.2rem;
|
|
width: 2.45rem;
|
|
background-image: url("../images/icon-like2.png");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin-top: 0.85rem;
|
|
}
|
|
|
|
.block-icon .btn-share {
|
|
height: 2.2rem;
|
|
width: 2.45rem;
|
|
background-image: url("../images/icon-share2.png");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
margin-top: 0.85rem;
|
|
display: block;
|
|
}
|
|
|
|
/* 公告浮层 */
|
|
.block-notice {
|
|
height: 1.4rem;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 0 0.2rem;
|
|
line-height: 1.4rem;
|
|
font-size: 0.7rem;
|
|
position: absolute;
|
|
top: 7.45rem;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
display: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.block-notice .inner {
|
|
height: 1.4rem;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 100%;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
color: #fff;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.fullscreen .block-notice {
|
|
top: 2.8rem;
|
|
}
|
|
|
|
.player-fullscreen .block-notice {
|
|
top: 5rem;
|
|
}
|
|
|
|
/* 商品列表 */
|
|
.goods-item {
|
|
padding: 0.5rem;
|
|
position: relative;
|
|
background: #fff;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-webkit-align-items: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.goods-item:before {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-bottom: 1px solid #eaeaea;
|
|
-webkit-transform-origin: 50% 100%;
|
|
transform-origin: 50% 100%;
|
|
}
|
|
|
|
.goods-item .thumb,
|
|
.goods-item .thumb img {
|
|
height: 3.4rem;
|
|
width: 3.4rem;
|
|
display: block;
|
|
-webkit-border-radius: 0.2rem;
|
|
border-radius: 0.2rem;
|
|
}
|
|
|
|
.goods-item .info {
|
|
max-height: 3.4rem;
|
|
padding-left: 0.5rem;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
display: table-cell;
|
|
}
|
|
|
|
.goods-item .info .title {
|
|
max-height: 2rem;
|
|
margin-bottom: 0.2rem;
|
|
line-height: 1rem;
|
|
font-size: 0.7rem;
|
|
color: #444;
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.goods-item .info .price {
|
|
height: 1.2rem;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
padding: 0;
|
|
vertical-align: middle;
|
|
font-size: 0.6rem;
|
|
}
|
|
|
|
.goods-item .info .price .num {
|
|
color: #f95959;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
line-height: 1.2rem;
|
|
vertical-align: middle;
|
|
display: block;
|
|
}
|
|
|
|
.goods-item .info .price .num span {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.goods-item .info .price .num .label {
|
|
display: inline-block;
|
|
height: 0.85rem;
|
|
line-height: 0.85rem;
|
|
background: #f4484a;
|
|
padding: 0 0.1rem;
|
|
color: #fff;
|
|
font-size: 0.55rem;
|
|
}
|
|
|
|
.goods-item .info .price .num .bigprice {
|
|
height: 1.2rem;
|
|
line-height: 1.1rem;
|
|
font-size: 0.8rem;
|
|
padding: 0 0.2rem;
|
|
color: #f4484a;
|
|
}
|
|
|
|
.goods-item .info .price .num .product {
|
|
color: #999;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.goods-item .info .price .btn-buy {
|
|
border: 1px solid #e64a4c;
|
|
font-size: 0.6rem;
|
|
padding: 0 0.3rem;
|
|
border-radius: 1rem;
|
|
line-height: 1.15rem;
|
|
display: inline-block;
|
|
color: #e64a4c;
|
|
}
|
|
|
|
/* 输入区域 */
|
|
.block-input {
|
|
height: 2.8rem;
|
|
background: #f7f7f7;
|
|
padding: 0.5rem;
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
z-index: 100 !important;
|
|
}
|
|
|
|
.block-input:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-top: 1px solid #d2d2d2;
|
|
}
|
|
|
|
.block-input.focus .btn-plus,
|
|
.block-input.focus .btn-goods,
|
|
.block-input.focus .btn-like {
|
|
display: none;
|
|
}
|
|
|
|
.block-input.focus .input {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/*Full* 全屏样式 */
|
|
.fullscreen .block-input {
|
|
background: transparent;
|
|
}
|
|
|
|
.fullscreen .block-input:before {
|
|
border: 0;
|
|
}
|
|
|
|
/* 底部输入框 区域 */
|
|
.block-input .btn-goods,
|
|
.block-input .btn-plus,
|
|
.block-input .btn-like {
|
|
height: 1.8rem;
|
|
width: 1.8rem;
|
|
background-position: 0 0;
|
|
background-size: 100%;
|
|
}
|
|
|
|
.block-input .btn-goods {
|
|
background-image: url("../images/icon-goods.png");
|
|
}
|
|
|
|
.block-input .btn-plus {
|
|
background-image: url("../images/icon-plus.png");
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.block-input .input {
|
|
background: #e4e4e4;
|
|
margin: 0 0.5rem 0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
.block-input .input input,
|
|
.block-input .input .input-place {
|
|
height: 1.8rem;
|
|
background: transparent;
|
|
padding: 0 0.4rem;
|
|
border: 0;
|
|
border-radius: 0;
|
|
outline: none;
|
|
color: #666;
|
|
font-size: 0.75rem;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.block-input .input input {
|
|
display: none;
|
|
}
|
|
|
|
.block-input .input .input-place {
|
|
line-height: 1.8rem;
|
|
}
|
|
|
|
.block-input .input .input-place a {
|
|
color: #118cff;
|
|
}
|
|
|
|
.fullscreen .block-input .input {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.fullscreen .block-input .input input {
|
|
color: #fff;
|
|
}
|
|
|
|
.fullscreen .block-input .input ::-webkit-input-placeholder {
|
|
color:#fff;
|
|
}
|
|
|
|
.fullscreen .block-input .input :-moz-placeholder {
|
|
color: #fff;
|
|
}
|
|
.fullscreen .block-input .input ::-moz-placeholder {
|
|
color:#999;
|
|
}
|
|
.fullscreen .block-input .input :-ms-input-placeholder {
|
|
color:#999;
|
|
}
|
|
|
|
.block-input .input .btn-emoji {
|
|
height: 1.8rem;
|
|
width: 1.8rem;
|
|
font-family: "icon" !important;
|
|
line-height: 1.9rem;
|
|
text-align: center;
|
|
font-size: 1.1rem;
|
|
color: #909090;
|
|
display: none;
|
|
}
|
|
|
|
.fullscreen .block-input .input .btn-emoji.active,
|
|
.block-input .input .btn-emoji.active {
|
|
color: #00bbee;
|
|
}
|
|
|
|
.fullscreen .block-input .input .btn-emoji {
|
|
color: #fff;
|
|
}
|
|
|
|
.block-input .input .btn-emoji:before {
|
|
content: "\e76d";
|
|
}
|
|
|
|
.block-input .btn-like {
|
|
background-image: url("../images/icon-like.png");
|
|
}
|
|
|
|
.block-input .btn-send {
|
|
height: 1.8rem;
|
|
width: 3.5rem;
|
|
background: #ccc;
|
|
color: #fff;
|
|
line-height: 1.8rem;
|
|
text-align: center;
|
|
border-radius: 4px;
|
|
display: none;
|
|
}
|
|
|
|
.block-input .btn-send.active {
|
|
background: #00bbee;
|
|
}
|
|
|
|
.block-input.focus .btn-send {
|
|
display: block;
|
|
}
|
|
|
|
.show-emoji .block-input {
|
|
bottom: 9rem;
|
|
}
|
|
|
|
.show-plus .block-input {
|
|
bottom: 5rem;
|
|
}
|
|
|
|
.show-emoji .block-content {
|
|
bottom: 11.8rem;
|
|
}
|
|
|
|
.show-plus .block-content {
|
|
bottom: 7.8rem;
|
|
}
|
|
|
|
.show-plus .block-plus,
|
|
.show-emoji .block-emoji {
|
|
display: block;
|
|
}
|
|
|
|
/* 表情列表 */
|
|
.block-plus,
|
|
.block-emoji {
|
|
background: #f7f7f7;
|
|
position: fixed;
|
|
height: 9rem;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 999;
|
|
display: none;
|
|
}
|
|
|
|
.block-emoji {
|
|
background: #fff;
|
|
padding: 0.3rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.block-plus {
|
|
height: 5rem;
|
|
background: #f4f4f4;
|
|
padding: 0.8rem 0.2rem
|
|
}
|
|
|
|
.block-plus:before,
|
|
.block-emoji:before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-top: 1px solid #d2d2d2;
|
|
}
|
|
|
|
.block-plus .item {
|
|
height: 2.5rem;
|
|
width: 25%;
|
|
font-size: 0.7rem;
|
|
float: left;
|
|
}
|
|
|
|
.block-plus .item .item-icon {
|
|
height: 2.5rem;
|
|
width: 2.5rem;
|
|
background: #fafafc;
|
|
margin: auto;
|
|
color: #c9c9c8;
|
|
border: 1px solid #c9c9c8 !important;
|
|
border-radius: 0.2rem;
|
|
line-height: 2.5rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.block-plus .item .item-icon .icon {
|
|
font-size: 1.4rem;
|
|
color: #888;
|
|
}
|
|
|
|
.block-plus .item .item-text {
|
|
width: 100%;
|
|
margin: auto;
|
|
text-align: center;
|
|
line-height: 1.2rem;
|
|
color: #777;
|
|
}
|
|
|
|
.block-emoji .item {
|
|
width: 1.6rem;
|
|
height: 1.6rem;
|
|
background: url("../images/face/allface.jpg");
|
|
background-size: 1.6rem auto;
|
|
margin: 0.1rem 0.2rem;
|
|
float: left;
|
|
}
|
|
|
|
|
|
.block-emoji .item:nth-child(1){background-position: 0 -0rem;}
|
|
.block-emoji .item:nth-child(2){background-position: 0 -1.6rem;}
|
|
.block-emoji .item:nth-child(3){background-position: 0 -3.2rem;}
|
|
.block-emoji .item:nth-child(4){background-position: 0 -4.8rem;}
|
|
.block-emoji .item:nth-child(5){background-position: 0 -6.4rem;}
|
|
.block-emoji .item:nth-child(6){background-position: 0 -8rem;}
|
|
.block-emoji .item:nth-child(7){background-position: 0 -9.6rem;}
|
|
.block-emoji .item:nth-child(8){background-position: 0 -11.2rem;}
|
|
.block-emoji .item:nth-child(9){background-position: 0 -12.8rem;}
|
|
.block-emoji .item:nth-child(10){background-position: 0 -14.4rem;}
|
|
.block-emoji .item:nth-child(11){background-position: 0 -16rem;}
|
|
.block-emoji .item:nth-child(12){background-position: 0 -17.6rem;}
|
|
.block-emoji .item:nth-child(13){background-position: 0 -19.2rem;}
|
|
.block-emoji .item:nth-child(14){background-position: 0 -20.8rem;}
|
|
.block-emoji .item:nth-child(15){background-position: 0 -22.4rem;}
|
|
.block-emoji .item:nth-child(16){background-position: 0 -24rem;}
|
|
.block-emoji .item:nth-child(17){background-position: 0 -25.6rem;}
|
|
.block-emoji .item:nth-child(18){background-position: 0 -27.2rem;}
|
|
.block-emoji .item:nth-child(19){background-position: 0 -28.8rem;}
|
|
.block-emoji .item:nth-child(20){background-position: 0 -30.4rem;}
|
|
.block-emoji .item:nth-child(21){background-position: 0 -32rem;}
|
|
.block-emoji .item:nth-child(22){background-position: 0 -33.6rem;}
|
|
.block-emoji .item:nth-child(23){background-position: 0 -35.2rem;}
|
|
.block-emoji .item:nth-child(24){background-position: 0 -36.8rem;}
|
|
.block-emoji .item:nth-child(25){background-position: 0 -38.4rem;}
|
|
.block-emoji .item:nth-child(26){background-position: 0 -40rem;}
|
|
.block-emoji .item:nth-child(27){background-position: 0 -41.6rem;}
|
|
.block-emoji .item:nth-child(28){background-position: 0 -43.2rem;}
|
|
.block-emoji .item:nth-child(29){background-position: 0 -44.8rem;}
|
|
.block-emoji .item:nth-child(30){background-position: 0 -46.4rem;}
|
|
.block-emoji .item:nth-child(31){background-position: 0 -48rem;}
|
|
.block-emoji .item:nth-child(32){background-position: 0 -49.6rem;}
|
|
.block-emoji .item:nth-child(33){background-position: 0 -51.2rem;}
|
|
.block-emoji .item:nth-child(34){background-position: 0 -52.8rem;}
|
|
.block-emoji .item:nth-child(35){background-position: 0 -54.4rem;}
|
|
.block-emoji .item:nth-child(36){background-position: 0 -56rem;}
|
|
.block-emoji .item:nth-child(37){background-position: 0 -57.6rem;}
|
|
.block-emoji .item:nth-child(38){background-position: 0 -59.2rem;}
|
|
.block-emoji .item:nth-child(39){background-position: 0 -60.8rem;}
|
|
.block-emoji .item:nth-child(40){background-position: 0 -62.4rem;}
|
|
.block-emoji .item:nth-child(41){background-position: 0 -64rem;}
|
|
.block-emoji .item:nth-child(42){background-position: 0 -65.6rem;}
|
|
.block-emoji .item:nth-child(43){background-position: 0 -67.2rem;}
|
|
.block-emoji .item:nth-child(44){background-position: 0 -68.8rem;}
|
|
.block-emoji .item:nth-child(45){background-position: 0 -70.4rem;}
|
|
.block-emoji .item:nth-child(46){background-position: 0 -72rem;}
|
|
.block-emoji .item:nth-child(47){background-position: 0 -73.6rem;}
|
|
.block-emoji .item:nth-child(48){background-position: 0 -75.2rem;}
|
|
.block-emoji .item:nth-child(49){background-position: 0 -76.8rem;}
|
|
.block-emoji .item:nth-child(50){background-position: 0 -78.4rem;}
|
|
.block-emoji .item:nth-child(51){background-position: 0 -80rem;}
|
|
.block-emoji .item:nth-child(52){background-position: 0 -81.6rem;}
|
|
.block-emoji .item:nth-child(53){background-position: 0 -83.2rem;}
|
|
.block-emoji .item:nth-child(54){background-position: 0 -84.8rem;}
|
|
.block-emoji .item:nth-child(55){background-position: 0 -86.4rem;}
|
|
.block-emoji .item:nth-child(56){background-position: 0 -88rem;}
|
|
.block-emoji .item:nth-child(57){background-position: 0 -89.6rem;}
|
|
.block-emoji .item:nth-child(58){background-position: 0 -91.2rem;}
|
|
.block-emoji .item:nth-child(59){background-position: 0 -92.8rem;}
|
|
.block-emoji .item:nth-child(60){background-position: 0 -94.4rem;}
|
|
.block-emoji .item:nth-child(61){background-position: 0 -96rem;}
|
|
.block-emoji .item:nth-child(62){background-position: 0 -97.6rem;}
|
|
.block-emoji .item:nth-child(63){background-position: 0 -99.2rem;}
|
|
.block-emoji .item:nth-child(64){background-position: 0 -100.8rem;}
|
|
.block-emoji .item:nth-child(65){background-position: 0 -102.4rem;}
|
|
.block-emoji .item:nth-child(66){background-position: 0 -104rem;}
|
|
.block-emoji .item:nth-child(67){background-position: 0 -105.6rem;}
|
|
.block-emoji .item:nth-child(68){background-position: 0 -107.2rem;}
|
|
.block-emoji .item:nth-child(69){background-position: 0 -108.8rem;}
|
|
.block-emoji .item:nth-child(70){background-position: 0 -110.4rem;}
|
|
.block-emoji .item:nth-child(71){background-position: 0 -112rem;}
|
|
.block-emoji .item:nth-child(72){background-position: 0 -113.6rem;}
|
|
.block-emoji .item:nth-child(73){background-position: 0 -115.2rem;}
|
|
.block-emoji .item:nth-child(74){background-position: 0 -116.8rem;}
|
|
.block-emoji .item:nth-child(75){background-position: 0 -118.4rem;}
|
|
.block-emoji .item:nth-child(76){background-position: 0 -120rem;}
|
|
.block-emoji .item:nth-child(77){background-position: 0 -121.6rem;}
|
|
.block-emoji .item:nth-child(78){background-position: 0 -123.2rem;}
|
|
.block-emoji .item:nth-child(79){background-position: 0 -124.8rem;}
|
|
.block-emoji .item:nth-child(80){background-position: 0 -126.4rem;}
|
|
.block-emoji .item:nth-child(81){background-position: 0 -128rem;}
|
|
.block-emoji .item:nth-child(82){background-position: 0 -129.6rem;}
|
|
.block-emoji .item:nth-child(83){background-position: 0 -131.2rem;}
|
|
.block-emoji .item:nth-child(84){background-position: 0 -132.8rem;}
|
|
.block-emoji .item:nth-child(85){background-position: 0 -134.4rem;}
|
|
.block-emoji .item:nth-child(86){background-position: 0 -136rem;}
|
|
.block-emoji .item:nth-child(87){background-position: 0 -137.6rem;}
|
|
.block-emoji .item:nth-child(88){background-position: 0 -139.2rem;}
|
|
.block-emoji .item:nth-child(89){background-position: 0 -140.8rem;}
|
|
.block-emoji .item:nth-child(90){background-position: 0 -142.4rem;}
|
|
|
|
.block-emoji .item img {
|
|
height: 1.2rem;
|
|
width: 1.2rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.layer-mask {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 95;
|
|
display: none;
|
|
}
|
|
|
|
/* 红包弹窗 */
|
|
.layer-redpack {
|
|
height: 19rem;
|
|
width: 15rem;
|
|
background: #d94e4e;
|
|
border-radius: 0.5rem;
|
|
margin: -9.5rem 0 0 -7.5rem;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 100;
|
|
display: none;
|
|
}
|
|
|
|
.layer:not(.layer-goods):not(.layer-at).in {
|
|
display: block;
|
|
-webkit-animation: layerIn 0.3s;
|
|
-ms-animation: layerIn 0.3s;
|
|
animation: layerIn 0.3s;
|
|
}
|
|
|
|
@keyframes layerIn {
|
|
0% {
|
|
-webkit-transform: scale(0.5);
|
|
-ms-transform: scale(0.5);
|
|
transform: scale(0.5);
|
|
}
|
|
70% {
|
|
-webkit-transform: scale(1.1);
|
|
-ms-transform: scale(1.1);
|
|
transform: scale(1.1);
|
|
}
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
-ms-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
.layer-redpack.open {
|
|
background: #f95959;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layer-redpack .layer-close {
|
|
height: 1.5rem;
|
|
border: 0;
|
|
font-size: 2rem;
|
|
color: #b82727;
|
|
font-weight: lighter;
|
|
line-height: 1.5rem;
|
|
font-size: 1.5rem;
|
|
position: absolute;
|
|
top: 0.4rem;
|
|
right: 0.2rem;
|
|
left: auto;
|
|
z-index: 100;
|
|
}
|
|
|
|
.layer-redpack .redpack-bg {
|
|
height: 15rem;
|
|
width: 15rem;
|
|
border-radius: 0.5rem;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-bg {
|
|
display: none;
|
|
}
|
|
|
|
.layer-redpack .redpack-bg:before {
|
|
content: '';
|
|
height: 20rem;
|
|
width: 24rem;
|
|
background-color: #f95959;
|
|
background-image: url("../images/redpack-bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 15rem;
|
|
background-position: 4.5rem 7.5rem;
|
|
border-radius: 0 0 50% 50%;
|
|
position: absolute;
|
|
bottom: 0.5rem;
|
|
left: -4.5rem;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.layer-redpack .redpack-title {
|
|
color: #fff;
|
|
font-size: 1.35rem;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
left: 0.5rem;
|
|
right: 0.5rem;
|
|
top: 6rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-title {
|
|
font-size: 0.8rem;
|
|
top: 0.8rem;
|
|
left: 1rem;
|
|
right: 1.8rem;
|
|
}
|
|
|
|
.layer-redpack .redpack-draw {
|
|
height: 4rem;
|
|
width: 4rem;
|
|
background: #fad22c;
|
|
margin-left: -2rem;
|
|
border-radius: 4rem;
|
|
color: #eb2020;
|
|
font-size: 1.5rem;
|
|
line-height: 4rem;
|
|
text-align: center;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 2.8rem;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-draw {
|
|
display: none;
|
|
}
|
|
|
|
.layer-redpack .redpack-draw.rotate {
|
|
-webkit-animation: drawRotate 1.5s ease infinite;
|
|
-ms-animation: drawRotate 1.5s ease infinite;
|
|
animation: drawRotate 1.5s ease infinite;
|
|
}
|
|
|
|
@keyframes drawRotate {
|
|
0% {
|
|
-webkit-transform: rotateY(0deg);
|
|
-ms-transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
50% {
|
|
-webkit-transform: rotateY(180deg);
|
|
-ms-transform: rotateY(180deg);
|
|
transform: rotateY(180deg);
|
|
}
|
|
100% {
|
|
-webkit-transform: rotateY(0deg);
|
|
-ms-transform: rotateY(0deg);
|
|
transform: rotateY(0deg);
|
|
}
|
|
}
|
|
|
|
.layer-redpack .redpack-info {
|
|
display: none;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-info {
|
|
width: 12.6rem;
|
|
height: 5.4rem;
|
|
background-color: #fff;
|
|
background-image: url("../images/redpack-detail-bg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
background-position: center 0.7rem;
|
|
margin-left: -6.3rem;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 2.5rem;
|
|
left: 50%;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
display: block;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-info .price {
|
|
height: 3.5rem;
|
|
font-size: 3rem;
|
|
line-height: 4.5rem;
|
|
color: #ff8706;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-info .price.small {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-info .price span {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-info .type {
|
|
font-size: 0.65rem;
|
|
line-height: 1.4rem;
|
|
color: #ff8400;
|
|
}
|
|
|
|
.layer-redpack .redpack-list {
|
|
display: none;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-list {
|
|
position: absolute;
|
|
top: 7.9rem;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
|
|
display: block;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-list .title {
|
|
height: 2.4rem;
|
|
padding: 0 1.1rem;
|
|
color: #fff;
|
|
font-size: 0.65rem;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-list .inner {
|
|
height: 8.5rem;
|
|
padding: 0 1.1rem;
|
|
overflow-y: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-list .inner .item {
|
|
height: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.5rem;
|
|
color: #fff;
|
|
font-size: 0.75rem;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-list .inner .item .avatar,
|
|
.layer-redpack.open .redpack-list .inner .item .avatar img {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
border-radius: 1.5rem;
|
|
display: block;
|
|
}
|
|
|
|
.layer-redpack.open .redpack-list .inner .item .nickname {
|
|
padding: 0 0.4rem;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
/* 优惠券弹窗 */
|
|
.layer-coupon,
|
|
.layer-gifts {
|
|
width: 14.8rem;
|
|
background: #fff;
|
|
margin: -5.7rem 0 0 -7.4rem;
|
|
border-radius: 0.5rem;
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 50%;
|
|
left: 50%;
|
|
display: none;
|
|
}
|
|
|
|
.layer-gifts {
|
|
max-height: 16rem;
|
|
margin-top: -7.5rem;
|
|
}
|
|
|
|
.layer-coupon .coupon-close {
|
|
position: absolute;
|
|
top: 0.3rem;
|
|
right: 0.5rem;
|
|
font-size: 2rem;
|
|
color: #666;
|
|
font-weight: lighter;
|
|
line-height: 1.5rem;
|
|
height: 1.5rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
.layer-coupon .coupon-title {
|
|
height: 3rem;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
text-align: center;
|
|
line-height: 3rem;
|
|
color: #fff;
|
|
font-size: 0.8rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.layer-coupon.fail .coupon-title {
|
|
height: 1.8rem;
|
|
margin-top: 0.7rem;
|
|
line-height: 1.7rem;
|
|
color: #000;
|
|
position: relative;
|
|
}
|
|
|
|
.layer-coupon .coupon-fail-title {
|
|
display: none;
|
|
}
|
|
|
|
.layer-coupon.fail .coupon-fail-title {
|
|
font-size: 0.7rem;
|
|
color: #999;
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
.layer-coupon .coupon-inner {
|
|
height: 6.8rem;
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 0.5rem 0.5rem 0 0;
|
|
}
|
|
|
|
.layer-coupon.fail .coupon-inner {
|
|
display: none;
|
|
}
|
|
|
|
.layer-coupon .coupon-inner .coupon-bg {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
right: 0;
|
|
height: 6.8rem;
|
|
width: 20rem;
|
|
background: #118cff;
|
|
margin-left: -10rem;
|
|
border-radius: 0.5rem 0.5rem 50% 50%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layer-coupon .coupon-inner .coupon-bg .coupon-block {
|
|
width: 7.4rem;
|
|
height: 5rem;
|
|
background: #deefff;
|
|
margin: 3rem auto 0;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.layer-coupon .coupon-inner .coupon-bg .coupon-block .price {
|
|
height: 2.2rem;
|
|
line-height: 2.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.layer-coupon .coupon-inner .coupon-bg .coupon-block .price .money {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.layer-coupon .coupon-inner .coupon-bg .coupon-block .desc {
|
|
font-size: 0.65rem;
|
|
color: #666;
|
|
}
|
|
|
|
.layer-coupon .coupon-inner .coupon-bg .coupon-block .coupon-gold {
|
|
height: 2.75rem;
|
|
width: 2.75rem;
|
|
background-image: url("../images/icon-gold.png");
|
|
background-size: 100%;
|
|
position: absolute;
|
|
bottom: 0.5rem;
|
|
left: -1.5rem;
|
|
}
|
|
|
|
.layer-coupon .coupon-inner .coupon-bg .coupon-block .coupon-gift {
|
|
height: 2.75rem;
|
|
width: 2.75rem;
|
|
background-image: url("../images/icon-gift.png");
|
|
background-size: 100%;
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
right: -1.3rem;
|
|
}
|
|
|
|
.layer-coupon .coupon-btn {
|
|
height: 1.8rem;
|
|
width: 100%;
|
|
margin: 1.4rem 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.layer-coupon.fail .coupon-btn {
|
|
display: none;
|
|
}
|
|
|
|
.layer-coupon .coupon-btn .btn {
|
|
height: 1.8rem;
|
|
width: 6rem;
|
|
background: #81cdff;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-right: 0.75rem;
|
|
color: #000;
|
|
border: 0;
|
|
border-radius: 1.8rem;
|
|
line-height: 1.8rem;
|
|
}
|
|
.layer-coupon .coupon-btn .btn.btn-goon{display: none;}
|
|
.layer-coupon.roomcoupon .coupon-btn .btn.btn-goon{display: inline-block;}
|
|
.layer-coupon.roomcoupon .coupon-btn .btn.btn-blue{display: none;}
|
|
|
|
|
|
.layer-coupon .coupon-btn .btn-yellow {
|
|
margin-right: 0;
|
|
background: #f9ca3e;
|
|
}
|
|
|
|
.layer-coupon.fail .coupon-fail {
|
|
height: 5.6rem;
|
|
width: 5.6rem;
|
|
background-image: url("../images/coupon-fail.png");
|
|
background-size: 100%;
|
|
margin: 0.8rem auto 1.4rem;
|
|
}
|
|
|
|
.layer-coupon > .title {
|
|
height: 3rem;
|
|
color: #118cff;
|
|
font-size: 0.8rem;
|
|
line-height: 3rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.layer-coupon .item,
|
|
.layer-gifts .coupon-item {
|
|
height: 3.8rem;
|
|
background: #53acfe;
|
|
margin: 0 0.85rem;
|
|
color: #fff;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.layer-coupon .item .center:before,
|
|
.layer-coupon .item .center:after,
|
|
.layer-gifts .coupon-item .center:before,
|
|
.layer-gifts .coupon-item .center:after {
|
|
content: '';
|
|
height: 0.5rem;
|
|
width: 0.5rem;
|
|
background: #fff;
|
|
border-radius: 0.5rem;
|
|
position: absolute;
|
|
left: 3.75rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.layer-coupon .item .center:before,
|
|
.layer-gifts .coupon-item .center:before {
|
|
top: -0.25rem;
|
|
}
|
|
|
|
.layer-coupon .item .center:after,
|
|
.layer-gifts .coupon-item .center:after {
|
|
bottom: -0.25rem;
|
|
}
|
|
|
|
.layer-coupon .item .left,
|
|
.layer-gifts .coupon-item .left {
|
|
width: 4rem;
|
|
background: #118cff;
|
|
line-height: 3.8rem;
|
|
font-size: 1.25rem;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.layer-coupon .item .left:before,
|
|
.layer-gifts .coupon-item .left:before {
|
|
content: '';
|
|
width: 0.5rem;
|
|
background-image: url("../images/coupon-side.png");
|
|
background-repeat: no-repeat;
|
|
background-size: auto 100%;
|
|
background-position: 0 0;
|
|
position: absolute;
|
|
left: -0.12rem;
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.layer-coupon .item .left span,
|
|
.layer-gifts .coupon-item .left span {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.layer-gifts .coupon-item .center,
|
|
.layer-coupon .item .center {
|
|
padding: 0.5rem 0.8rem;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.layer-coupon .item .center .title,
|
|
.layer-gifts .coupon-item .center .title {
|
|
font-size: 0.8rem;
|
|
height:1.5rem;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.layer-coupon .item .center .subtitle,
|
|
.layer-gifts .coupon-item .center .subtitle {
|
|
font-size: 0.6rem;
|
|
overflow:hidden;
|
|
text-overflow:ellipsis;
|
|
white-space:nowrap;
|
|
height:1.2rem;
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
.layer-coupon .item .right,
|
|
.layer-gifts .coupon-item .right {
|
|
width: 3rem;
|
|
background-image: url("../images/icon-coupon2.png");
|
|
background-size: 2rem;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.layer-coupon .tip {
|
|
margin-top: 2rem;
|
|
text-align: center;
|
|
color: #999;
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
/* 店铺信息+关注 */
|
|
.layer-roominfo {
|
|
max-height: 19rem;
|
|
width: 15.2rem;
|
|
background: #fff;
|
|
padding: 1.5rem 0.9rem 0.9rem;
|
|
margin: -9.5rem 0 0 -7.6rem;
|
|
border-radius: 0.5rem;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
z-index: 100;
|
|
display: none;
|
|
}
|
|
|
|
.layer-roominfo .room-face {
|
|
height: 3.8rem;
|
|
width: 3.8rem;
|
|
background: #fff;
|
|
padding: 0.1rem;
|
|
margin-left: -1.9rem;
|
|
border-radius: 1.9rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: -2.1rem;
|
|
}
|
|
|
|
.layer-roominfo .room-face img {
|
|
height: 3.6rem;
|
|
width: 3.6rem;
|
|
border-radius: 3.6rem;
|
|
}
|
|
|
|
.layer-roominfo .room-title {
|
|
height: 1.75rem;
|
|
color: #118cff;
|
|
font-size: 0.85rem;
|
|
text-align: center;
|
|
line-height: 2.2rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.layer-roominfo .room-info {
|
|
height: 3.8rem;
|
|
padding: 0.5rem;
|
|
margin-top: 0.5rem;
|
|
border-radius: 0.5rem;
|
|
border: 1px dashed #e3e3e3;
|
|
font-size: 0.7rem;
|
|
line-height: 1.05rem;
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.layer-roominfo .room-info p {
|
|
height: 1.3rem;
|
|
width: 100%;
|
|
line-height: 1.3rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.layer-roominfo .room-qrcode {
|
|
height: 5.7rem;
|
|
width: 5.7rem;
|
|
margin: 0.7rem auto 0;
|
|
}
|
|
|
|
.layer-roominfo .room-qrcode img {
|
|
height: 5.7rem;
|
|
width: 5.7rem;
|
|
display: block;
|
|
}
|
|
|
|
.layer-roominfo .room-btn {
|
|
height: 2rem;
|
|
width: 10rem;
|
|
background: #118cff;
|
|
margin: 1rem auto 0;
|
|
border-radius: 2rem;
|
|
color: #fff;
|
|
line-height: 2rem;
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.layer-roominfo .room-btn.disabled {
|
|
background: #f95959;
|
|
}
|
|
|
|
/* 礼物弹窗 */
|
|
.layer-gifts {
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.layer-gifts .inner {
|
|
max-height: 13.5rem;
|
|
width: 100%;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.layer-gifts .redpack-item {
|
|
height: 3.8rem;
|
|
background: #ff5555;
|
|
margin: 0 0.85rem;
|
|
border-radius: 0.25rem;
|
|
display: -webkit-box;
|
|
display: -webkit-flex;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
}
|
|
|
|
.layer-gifts .redpack-item.disabled,
|
|
.layer-gifts .coupon-item.disabled {
|
|
position: relative;
|
|
}
|
|
|
|
.layer-gifts .redpack-item.disabled .live-mask,
|
|
.layer-gifts .coupon-item.disabled .live-mask {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
line-height: 3.8rem;
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: 0.85rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.layer-gifts .redpack-item.disabled:before {
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.layer-gifts .coupon-item {
|
|
margin-top: 0.4rem;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.layer-gifts .redpack-item .left {
|
|
padding: 0.5rem 0.8rem;
|
|
color: #fff;
|
|
-webkit-box-flex: 1;
|
|
-webkit-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
}
|
|
|
|
.layer-gifts .redpack-item .left .title {
|
|
font-size: 0.8rem;
|
|
line-height: 1.5rem;
|
|
}
|
|
|
|
.layer-gifts .redpack-item .left .subtitle {
|
|
font-size: 0.6rem;
|
|
line-height: 1.2rem;
|
|
}
|
|
|
|
.layer-gifts .redpack-item .right {
|
|
width: 3rem;
|
|
background-image: url("../images/icon-redpack2.png");
|
|
background-size: 2rem;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
/* 弹层关闭按钮 */
|
|
.layer-close {
|
|
height: 1.8rem;
|
|
width: 1.8rem;
|
|
border: 1px solid #fff;
|
|
border-radius: 1.8rem;
|
|
margin-left: -0.75rem;
|
|
font-family: "icon" !important;
|
|
font-size: 1.2rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 1.8rem;
|
|
position: absolute;
|
|
bottom: -2.5rem;
|
|
left: 50%;
|
|
}
|
|
|
|
.layer-close:before {
|
|
content: '\e602';
|
|
}
|
|
|
|
/* 商品弹层 */
|
|
.layer-goods {
|
|
height: auto;
|
|
max-height: 65%;
|
|
padding-top: 1.4rem;
|
|
background: #fff;
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 100;
|
|
transition: all 0.4s;
|
|
-moz-transition: all 0.4s;
|
|
-webkit-transition: all 0.4s;
|
|
-o-transition: all 0.4s;
|
|
-webkit-transform: translate(0, 100%);
|
|
-ms-transform: translate(0, 100%);
|
|
transform: translate(0, 100%);
|
|
}
|
|
|
|
.layer-goods.in {
|
|
-webkit-transform: translate(0, 0);
|
|
-ms-transform: translate(0, 0);
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
.layer-goods .layer-close {
|
|
left: auto;
|
|
right: 0;
|
|
bottom: auto;
|
|
top: -0.2rem;
|
|
z-index: 101;
|
|
border: 0;
|
|
color: #ccc;
|
|
}
|
|
|
|
.layer-goods .inner {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding-bottom: 2.8rem;
|
|
}
|
|
|
|
.ico-like {
|
|
height: 1.5rem;
|
|
width: 1.5rem;
|
|
color: #f90;;
|
|
position: fixed;
|
|
right: 30px;
|
|
bottom: 2.5rem;
|
|
z-index: 100;
|
|
}
|
|
|
|
.ico-like .icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
#liveframe {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
border: 0;
|
|
z-index: 1000;
|
|
display: none;
|
|
} |