werun-wxapp/components/diy-store/index.wxss

/* components/diy-store/index.wxss */
.one_index {
  margin: 0 0 100rpx 0;
}
.one_index .one_info {
  background-size: 100%;
  height: 370rpx;
  display: flex;
  align-items: flex-end;
  padding: 30rpx;
}
.one_index .one_info .one_image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.one_index .one_info .one_right {
  color: #ffffff;
  width: calc(100% - 180rpx);
  margin: 15rpx 20rpx;
}
.one_index .one_info .one_right .one_name {
  font-size: 38rpx;
  font-weight: 700;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.one_index .one_info .one_right .one_desc {
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.two_index {
  margin: 0 0 100rpx 0;
}
.two_index .two_image {
  width: 100%;
  height: 370rpx;
}
.two_index .two_info {
  width: 100%;
  display: flex;
  margin: -80rpx 30rpx;
}
.two_index .two_info .two_avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.two_index .two_info .two_right {
  width: calc(100% - 190rpx);
  padding: 0 20rpx;
}
.two_index .two_info .two_right .two_name {
  font-size: 38rpx;
  color: #ffffff;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin: 20rpx 0;
}
.two_index .two_info .two_right .two_desc {
  color: #999999;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.three_index {
  margin: 0 0 100rpx 0;
}
.three_index .three_info {
  text-align: center;
}
.three_index .three_info .three_image {
  width: 100%;
  height: 370rpx;
}
.three_index .three_info .three_avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin: -80rpx 0 20rpx;
}
.three_index .three_info .three_name {
  font-size: 38rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.three_index .three_info .three_desc {
  padding: 0 50rpx;
  color: #999999;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.four_index {
  margin: 0 0 100rpx 0;
}
.four_index .four_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 370rpx;
  background-size: 100%;
}
.four_index .four_info .four_avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}
.four_index .four_info .four_name {
  font-size: 38rpx;
  font-weight: 700;
  color: #ffffff;
  margin: 20rpx 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.four_index .four_info .four_line {
  width: 410rpx;
  height: 2rpx;
  background: #f3ece7;
}
.four_index .four_info .four_desc {
  margin-top: 15rpx;
  color: #999999;
  font-size: 24rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}