| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115 |
- /*
- ***HotApp云笔记,基于HotApp小程序统计云后台
- ***免费云后台申请地址 https://weixin.hotapp.cn/cloud
- ***API 文档地址:https://weixin.hotapp.cn/api
- ***小程序技术讨论QQ群:173063969
- */
- /**index.wxss**/
- page {
- background: #efeff4;
- }
- .container {
- flex-wrap: wrap;
- background: #efeff4;
- font-family: '微软雅黑';
- }
- .col {
- width: 26%;
- padding-top: 33%;
- margin: 25rpx 3.666666%;
- position: relative;
- }
- .item {
- width: 100%;
- height: 100%;
- border-radius: 20rpx;
- overflow: hidden;
- position: absolute;
- box-sizing: border-box;
- top: 0;
- display: flex;
- flex-direction: column;
- }
- .item .content {
- flex: 1;
- }
- .item .content,
- .item .bottom {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- justify-content: center;
- }
- .item .bottom {
- height: 80rpx;
- background: #9f7968;
- font-size: 22rpx;
- }
- .item .txt {
- flex: 1;
- text-align: center;
- }
- .item .content .txt {
- padding: 0 5%;
- font-size: 28rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 3;
- display: box;
- box-orient: vertical;
- line-clamp: 3;
- }
- .item .bottom .txt {
- color: #fff;
- }
- .item.notepad {
- background: #fff;
- }
- .item.today {
- background: #fde3d5;
- }
- .item.yesterday {
- background: #d5effd;
- }
- .add_box,
- .item.more {
- border: 6rpx dotted #d9d9d9;
- }
- .add_box {
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .tips_box {
- position: relative;
- }
- .tips_icon {
- position: absolute;
- top: -60rpx;
- }
- .item.more {
- background: url('../../../images/more.png') no-repeat center center;
- background-size: 60%;
- }
- .tips {
- position: absolute;
- z-index: 9;
- right: -300rpx;
- bottom: -140rpx;
- }
- .tips_txt {
- width: 360rpx;
- font-size: 32rpx;
- padding: 45rpx 0;
- text-align: center;
- background: #fff;
- border-radius: 14rpx;
- }
- .tips_icon {
- width: 70rpx;
- height: 70rpx;
- margin-left: 30rpx;
- background-size: 100%;
- }
|