/** * 这里是共用样式的定义位置 */ .line-clamp-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } // 卡片视图 .card { border: 1px solid #f9f9f9; border-radius: 5px; margin: 12px; padding: 12px; box-shadow: 2px 2px 5px 1px rgba(143, 143, 143, 0.1); } // 单行不换行 .nowrap { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } // 头像 .avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #e5e5e5; } // 顶部图书馆头像等 .top-bar{ position: relative; width: 100%; height: 150px; display: flex; align-items: center; color: $uni-white; overflow: hidden; .top-bar-bg{ position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; z-index: 1; } .library-info{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 22; .avatar{ width: 65px; height: 65px; border-radius: 50%; overflow: hidden; margin-bottom: 10px; } .library-name { font-size: 14px; text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2); } } } // 图书列表 .recommendation-list { display: flex; justify-content: space-around; padding: 0 5px; } .book-item { flex: 0 0 110px; display: flex; flex-direction: column; align-items: center; } .book-cover { width: 160rpx; height: 110px; border-radius: 4px; margin-bottom: 15px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); } .book-title { font-size: 12px; color: #333; text-align: center; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; width: 100%; } // 活动列表 .activity-item { border-radius: 10px; background-color: #fff; margin-bottom: 20px; overflow: hidden; .activity-img { width: 100%; height: 150px; } .activity-info { display: flex; justify-content: space-between; align-items: center; padding: 10px; .activity-info-left { display: flex; flex-direction: column; justify-content: flex-start; margin-right: 6px; .title { font-size: 16px; font-weight: bold; color: #333; padding-bottom: 10px; } .time { display: flex; justify-content: flex-start; align-items: flex-start; font-size: 12px; color: #999; .time-icon{ margin-top: 1px; margin-right: 2px; } // ::v-deep .uni-icons{ // margin-left: 2px; // } } } .activity-btn { width: 80px; height: 32px; line-height: 32px; font-size: 14px; background-color: #01a4fe; margin: 0 !important; padding: 0 !important; border-radius: 16px; &::after { border: none !important; } &.disabled-btn { color: #797979; background-color: #e5e5e5; } } } } // 详情底部菜单(活动/图书) .detail-bottom{ position: fixed; left: 0; bottom: 0; right: 0; background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 6px 15px; } // .detail-bottom-mark{ // height: 60px; // } .detail-left{ display: flex; justify-content: flex; align-items: center; } .handle-btn{ display: flex; justify-content: flex-start; align-items: center; background-color: transparent !important; margin: 0 !important; &::after{ border: none !important; } .share-text{ margin-left: 10px; font-size: 14px; } } .join-btn{ font-size: 14px; color: #fff; margin: 0 !important; background-color: #01a4fe !important; border-radius: 23px; padding: 0 30px; &::after{ border: none !important; } &.disabled-btn { color: #797979; background-color: #e5e5e5 !important; } }