2023-04-17 16:14:18 +08:00

450 lines
8.3 KiB
Plaintext

/* pages/replyQuestions/replyQuestions.wxss */
.nocontent{
text-align: center;
color: #999;
margin: 20rpx 0;
}
.container{
background: #f2f2f2;
height: 100vh;
}
/*聊天室 */
.chart-header{
display: flex;
padding: 0 32rpx ;
font-size: 0;
text-align: center;
border-bottom: 1px solid #e8e8e8;
height: 74px;
box-sizing: border-box;
background: #fff;
align-items: center;
justify-content: space-between;
}
.chart-header .btn{
display: inline-flex;
width: calc(33.33% - 16rpx);
height: 80rpx;
line-height: 80rpx;
box-sizing: border-box;
border:1px solid #e8e8e8;
border-radius: 5px;
font-size: 30rpx;
color: #666;
position: relative;
justify-content: center;
}
.chart-header .btn image{
display: inline-block;
width: 36rpx;
height: 36rpx;
vertical-align: middle;
position: absolute;
left: 16rpx;
top: 22rpx;
}
.chart-header .btn.active{
background: #62b1fe;
color: #fff;
}
.chart-content{
height: calc(100vh - 400rpx);
padding:0rpx 0rpx 0rpx;
box-sizing: border-box;
background: #fff;
}
.chart-content2{
height: calc(100vh - 630rpx);
}
.chart-content.long{
height: calc(100vh - 250rpx);
}
.chart-content2.long{
height: calc(100vh - 480rpx);
}
.content-list{
padding: 60rpx 32rpx 30rpx;
}
.content-list .times{
font-size: 26rpx;
color: #ccc;
text-align: center;
margin-bottom: 60rpx;
}
.content-list .avatar{
width: 64rpx;
height: 64rpx;
display: inline-block;
vertical-align: top;
border-radius: 5px;
z-index: 1000;
}
.content-list .ta,.content-list .wo{
font-size: 0;
margin-bottom: 60rpx;
position: relative;
}
.content-list .c{
display: inline-block;
width: calc(100% - 64rpx);
box-sizing: border-box;
padding-left: 20rpx;
}
.content-list .username{
font-size: 26rpx;
color: #999;
}
.content-list .content{
margin-top: 20rpx;
}
.content-list .content .article{
width: 20rpx;
height: 21rpx;
display: inline-block;
vertical-align: middle;
position: relative;
top: -4rpx;
margin-right: 12rpx;
}
.content-list .content .bg{
display: inline-block;
background: #eeeff3;
font-size: 30rpx;
color: #333;
padding: 20rpx;
border-radius: 5px;
word-break: break-word;
}
.content-list .content .bg view{
min-height: 38rpx;
}
.content-list .content .pic_bg{
display: inline-block;
font-size: 30rpx;
color: #333;
padding: 20rpx 0;
border-radius: 5px;
word-break: break-word;
}
.content-list .content .pic_bg image,.content-list .content .pic_bg video{
max-width:calc(100vw - 148rpx);
border-radius: 5px;
}
.content-list .content .video{
width: 160rpx;
height: 160rpx;
background: #62b1fe;
border-radius: 5px;
position: relative;
display: inline-block
}
/* .content-list .wo .video{
} */
.content-list .content .video image{
width: 60rpx;
height: 60rpx;
position: absolute;
left: 50rpx;
top: 50rpx;
}
.content-list .content .video .num{
color: #fff;
position: absolute;
bottom: 10rpx;
right: 10rpx;
text-align: right;
font-size: 24rpx;
}
.content-list .content .map{
width:400rpx;
border-radius: 5px;
display: inline-block;
}
.content-list .content .map .top{
background: #eeeff3;
color: #333;
padding:0 30rpx;
line-height: 100rpx;
height: 100rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 30rpx;
border-radius: 5px 5px 0 0;
text-align: left;
}
.content-list .content .map image{
width: 400rpx;
height:145.6rpx;
}
.content-list .wo .bg{
/* animation: show_content 0.1s 1s ease-out forwards;
overflow: hidden;
position: relative;
width: 0;
height: 0;
left: -80rpx;
top: -60rpx;
z-index: 1;
background: transparent; */
background: #75cdc1;
color: #fff;
}
.content-list .content .navigator{
background: #62b1fe !important;
color: #fff;
}
.source{
font-size: 24rpx;
margin-bottom: 10rpx;
}
.content-list .wo .c{
padding: 0 20rpx 0 0;
}
.content-list .wo{
text-align: right;
}
.content-list .wo .username{
text-align: right;
}
.content-list .wo .bg{
text-align: left;
/* animation: show_contentr 0.1s 1s ease-out forwards;
overflow: hidden;
position: relative;
width: 0;
height: 0;
right: -80rpx;
top: -60rpx;
z-index: 1;
background: transparent; */
}
@keyframes show_content{
0%{
width: 0;
height: 0;
left: -80rpx;
top: -60rpx;
background: transparent;
}
100%{
width: auto;
height: auto;
left: 0;
top: 0;
background: #eeeff3;
}
}
@keyframes show_contentr{
0%{
width: 0;
height: 0;
right: -80rpx;
top: -60rpx;
background: transparent;
}
100%{
width: auto;
height: auto;
right: 0;
top: 0;
background: #eeeff3;
}
}
.chart-footer{
box-sizing: border-box;
border-top: 2rpx solid #e8e8e8;
background: #f2f2f2;
display: table;
width: 100vw;
padding: 24rpx 0 16rpx;
line-height: 78rpx;
position: relative;
}
.chart-footer .show_new_msg{
position: absolute;
top:-80rpx;
right: 30rpx;
color: #1aad19;
z-index: 1000;
}
.chart-footer>view{
display: table-cell;
vertical-align: top;
}
.chart-footer .l{
width: 17%;
font-size: 30rpx;
text-align: left;
padding-left: 20rpx;
}
.chart-footer .c{
width: 71%;
height: 78rpx;
position: relative;
}
.chart-footer .c .text{
width: 100%;
box-sizing: border-box;
min-height: 80rpx;
background: #fff;
border:1px solid #e8e8e8;
vertical-align: top;
border-radius: 5px;
/* position: absolute;
left: 0;
top: 0; */
padding: 6rpx 8rpx 26rpx;
line-height: 44rpx;
height: auto;
max-height: 240rpx;
}
.chart-footer .r{
width: 12%;
text-align: center;
display: table-cell;
}
.chart-footer .tobottom{
width: 20rpx;
height: 10rpx;
display: inline-block;
}
.chart-footer .pic{
width: 43.2rpx;
height: 34.4rpx;
display: inline-block;
position: relative;
top: 4rpx;
}
.chart-footer .plusgrey{
width: 43.2rpx;
height: 43.2rpx;
display: inline-block;
position: relative;
top: 8rpx;
}
.select-options1 .title{
text-align: center;
line-height: 160rpx;
color: #333;
font-size: 30rpx;
font-weight: 650;
}
.select-options1 .ul{
max-height: calc(64vh - 316rpx);
overflow-y: scroll;
-webkit-overflow-scrolling: touch
}
.select-options1 .edit{
width: 216rpx;
height: 76rpx;
border-radius: 76rpx;
line-height: 76rpx;
text-align: center;
margin: 40rpx auto;
background: #f2f2f2;
font-size: 30rpx;
color: #666;
}
.select-options1 .box .li{
padding: 31rpx 40rpx;
line-height: 40rpx;
}
.select-options1 .edit image{
width: 32rpx;
height: 32rpx;
display: inline-block;
position: relative;
top: 3rpx;
margin-right: 4rpx;
float: none;
}
.select-options1 .black{
height: 36vh;
}
.send_btn{
font-size: 30rpx;
color: #1aad19
}
.function-box{
border-top: 2rpx solid #e8e8e8;
background: #f2f2f2;
padding:30rpx 20rpx 40rpx 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
height: 114px;
box-sizing: border-box;
}
.function-box .item{
display: inline-block;
margin-right: 48rpx;
text-align: center;
color: #999;
font-size: 28rpx;
letter-spacing: 1px;
}
.function-box .item .pic-box{
width: 110rpx;
height: 110rpx;
border:1px solid #e8e8e8;
background: #fff;
border-radius: 16rpx;
margin-bottom: 10rpx;
position: relative
}
.function-box .item image{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}
.function-box .item .pic{
width: 54rpx;
height: 43rpx;
}
.function-box .item .video{
width: 54rpx;
height:54rpx;
}
.function-box .item .location{
width: 54rpx;
height:54rpx;
}
.back-to-index{
position: fixed;
right: 20rpx;
bottom: 140rpx;
background:#eb7b78;
border-radius: 50%;
width: 100rpx;
height: 100rpx;
z-index: 1000;
}
.back-to-index.movetop{
bottom: 380rpx;
}
.back-to-index image{
width: 56rpx;
height:46rpx;
position: absolute;
left:22rpx;
top: 27rpx;
}
.page-footer{
position: fixed;
left: 0;
bottom: 0;
width: 100vw;
}