-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathapp.wxss
69 lines (55 loc) · 4.19 KB
/
app.wxss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
page { height: 100vh; background: #f6f6f6; font-size: 28rpx; color: #333; box-sizing: border-box; }
view, text, scroll-view, swiper, button, form, input, textarea, label, navigator, image { box-sizing: border-box; }
.clearfix { zoom: 1; clear:both;}
.clearfix:after { clear: both; content: ""; display: block; height: 0; visibility: hidden; }
.ellipsis{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
button::after{ border: 0;}
.mt10{ margin-top: 10rpx;}
.mt20{ margin-top: 20rpx;}
.mt40{ margin-top: 40rpx;}
.btnGroup{ padding: 10rpx 0; overflow: hidden; display: flex;}
.btnGroup.mb10{ margin-bottom: 20rpx;}
.btnGroup.mb20{ margin-bottom: 40rpx;}
.btnGroup .item{ display: flex; width: 100%; padding: 0 15rpx;}
.btnGroup .item.w50{ width: 50%;}
.btnGroup .btn{ background: #ff5a5f; color: #fff; width: 100%; padding: 0 30rpx; text-align: center; border-radius: 8rpx; line-height: 80rpx; height: 80rpx; overflow: hidden; font-size: 32rpx;}
.btnGroup .btn.default{ background: #fff; color: #999;}
.btnGroup .btn.gray{ background: #f4f4f4; color: #999;}
.btnGroup .btn.blue{ background: #5988fe;}
.btnGroup .btn.orange{ background: #fea233;}
.btnGroup .btn.disabled{ opacity: .8;}
.icon{ width: 28rpx; height: 28rpx; overflow: hidden; margin-right: 15rpx; }
.icon.fire{ width: 28rpx; height: 28rpx; }
.icon.good{ width: 20rpx; height: 20rpx; margin-right: 10rpx; }
.img{ width: 100%; height: 100%; border: 0; }
.copyRight{ text-align: center; margin: 80rpx 0 10rpx; color: #999; padding-top: 30rpx; border-top:1rpx dotted #eee; font-size: 20rpx; line-height: 24rpx;}
.launchGird{ padding: 20rpx; position: relative; height:100%;}
.focus{ position: absolute; left: 0; top: 0; z-index: 2; width: 100%; height: 100%; border-radius: 10rpx; overflow: hidden; }
.shadowOverlay { position: absolute; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; overflow: hidden; background-image: linear-gradient(0deg, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%); }
.displayGroup{ background: #eee; border: 20rpx solid #fff; box-shadow: 0 0 10rpx #eee; border-radius: 10rpx; margin-bottom: 40rpx; height: 420rpx; position: relative; overflow: hidden;}
.dmGroup{ position: absolute; top:140rpx; left: 100%; z-index: 10; animation-timing-function: linear; animation-fill-mode: none; transform: translateZ(0); white-space: nowrap; height: 60rpx; }
.dmGroup.top{ height: 60rpx; }
.dmGroup.mid{ height: 60rpx; top:200rpx; }
.dmGroup.btm{ height: 60rpx; top:260rpx; }
.dmItem{ display: inline-flex; margin-right: 60rpx; white-space: nowrap; }
.dmItem .dm{ display: inline-flex; vertical-align: middle; align-items: center; position: relative; height: 50rpx; line-height: 50rpx; padding: 0 15rpx 0 5rpx; background: rgba(0,0,0,.5); border-radius: 25rpx; overflow: hidden; font-size: 24rpx; color: #fff; }
.dmItem .avatarBox{ display: inline-block; position: relative; width: 40rpx; height: 40rpx; margin-right: 10rpx; }
.dmItem .avatarBox .avatar{ width: 40rpx; height: 40rpx; border: 0; border-radius: 50%; overflow: hidden; }
.dmItem .dm .sex{ position: absolute; left: 25rpx; top: 18rpx; width: 22rpx; height: 22rpx; overflow: hidden; }
.dmItem .dm .content{display: inline-block; max-width: 440rpx; height: 50rpx; line-height: 50rpx; margin-right: 10rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.detailGroup{ margin: 40rpx 0; padding: 50rpx 40rpx; overflow: hidden; font-size: 24rpx; line-height: 28rpx; color: #5c5c5c; background: #fff; }
.detailGroup .title{ margin-bottom: 20rpx; font-size: 28rpx; padding-bottom: 20rpx; border-bottom: 1rpx solid #eee; line-height: 32rpx; color: #454545; }
.detailGroup .title.small{ font-size: 26rpx; line-height: 28rpx; }
.detailGroup .tips{ border-left: 8rpx solid #e7e9ed; padding: 15rpx 15rpx 15rpx 30rpx; margin-bottom: 20rpx; font-size: 24rpx; line-height: 28rpx; color: #7f8fa4; background: #f6f6f6; }
.detailGroup .detail{ font-size: 24rpx; line-height: 28rpx; color: #5c5c5c; }
.detailGroup .cfRed{ color: #f30; }
.detailGroup .cfBlue{ color: #5988fe; }
.detailGroup .cfOrange{ color: #fea233; }
@keyframes dmAnimation2{
0% { transform: translateX(0); }
100% { transform: translateX(-130%); }
}
@keyframes dmAnimation{
from{ left: 100%; }
to{ left: -100%; }
}