library-wechat/styles/global.scss

/**
 * 这里是共用样式的定义位置
 */

.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: 16px;
      font-weight: bold;
      margin-top: 8px;
      text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }
    .sub-title {
      font-size: 12px;
      opacity: 0.9;
      margin-top: 4px;
    }
  }
}

// 图书列表

.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;
  }
}

.empty {
  display: flex;
  flex-direction: column;
	justify-content: center;
	align-items: center;
  padding: 20px;
  color: #999;
  font-size: 15px;
}

// 覆盖 uni-popup 层级
.uni-popup {
  z-index: 9999 !important;
}
.uni-popup__mask {
  z-index: 9998 !important;
}
.uni-popup__wrapper {
  z-index: 9999 !important;
  overflow: hidden;
}

.qrcode-popup {
  width: 240px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.qrcode-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
}
.qrcode-num {
  margin: 10px 0;
  font-size: 14px;
  color: #333;
}
.close-btn {
  margin-top: 10px;
  background: #01a4fe;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  padding: 5px 20px;
}

.register-btn {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  height: 44px;
  line-height: 44px;
  border-radius: 24px;
  background-color: #fff !important;
  color: #01a4fe !important;
  border: 1px solid #01a4fe !important;
  font-size: 16px;
  font-weight: 500;
  
  &::after {
    border: none !important;
  }
}