search.wxss 4.1 KB
.container {
  /* padding: 0 32rpx; */
  padding-top: 24rpx;
  width: 375px;
  background: linear-gradient(180deg, #ffffff, #ebedf0);
}
/* 搜索框 */
.search_center {
  height: 68rpx;
  margin-bottom: 24rpx;
  width:750rpx;
}

.real_search_center {
  margin: 0 auto;
  margin-bottom: 24rpx;
  width: 606rpx;
  height: 64rpx;
  background: #f7f8fa;
  border-radius: 186rpx;
  position: relative;
  padding-right: 0;
  box-sizing: border-box;
  display: flex;
  margin-left: 32rpx;
}

.searchIcon{
  width: 32rpx;
  height: 32rpx;
  margin-right: 12rpx;
  display: flex;
  height: 64rpx;
  align-items: center;
  margin-left: 16rpx;
}
.searchIcon image{
  width: 32rpx;
  height: 32rpx;
}
.icon-sousuo {
  font-size: 32rpx;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20rpx;
}

.real_search_center input {
  width: 490rpx;
  height: 100%;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 64rpx;
  color: rgba(189, 196, 206, 1);
  padding: 0 30rpx;
  padding-left: 0;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.placeholder {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 64rpx;
  color: rgba(189, 196, 206, 1);
}
.search_right {
  width: 104rpx;
  height: 64rpx;
  /* background: rgba(232, 101, 27, 1); */
  border-radius: 20rpx;
  text-align: center;
  line-height: 64rpx;
  color: #323233;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
}


/* 搜索 */
.search {
  height: 108rpx;
}

.searchHistory {
  width: 750rpx;
  height: 420rpx;
background: linear-gradient(180deg,#ffffff, #ebedf0);
  /* background-color: cadetblue; */
}

.searchTitle {
  width: 686rpx;
  height: 40rpx;
  font-size: 28rpx;
  color: #7d7e80;
  display: flex;
  margin: 0 auto;
  margin-bottom: 24rpx;
  justify-content: space-between;
}

.searchLable {
  margin-top: 24rpx;
  width: 686rpx;
  margin: 0 auto;
}

.searchTitle .title {
  width: 112rpx;
  height: 40rpx;
}

.searchTitle .delIcon {
  width: 32rpx;
  height: 32rpx;
}

.searchTitle .delIcon image {
  width: 32rpx;
  height: 32rpx;
}

.lableBox {
  display: inline-block;
  height: 64rpx;
  width: auto;
  padding: 14rpx 32rpx;
  background: #f7f8fa;
  border-radius: 8px;
  box-sizing: border-box;
  margin-right: 16rpx;
  line-height: 36rpx;
  color: #323233;
  font-size: 26rpx;
  font-weight: 400;
}

/* 猜你喜欢 */
.middleLine {
  width: 750rpx;
  height: 16rpx;
  background-color: #f1f2f4;
}

.like {
  width: 686rpx;
  margin-top: 16rpx;
  background-color: rgb(241, 247, 247);
  margin: 0 auto;
}

.titleMain {
  width: 152rpx;
  height: 96rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.like .icon {
  width: 8rpx;
  height: 32rpx;
  background: linear-gradient(137deg, #5b8eff, #2e55ff 92%);
  border-radius: 4px;
}

.like .title {
  width: 128rpx;
  height: 44rpx;
  font-size: 32rpx;
  font-weight: 500;
  text-align: center;
  color: #101010;
  line-height: 44rpx;
}

.listTable {
  width: 686rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}

.listSon {
  margin-bottom: 16rpxs;
  width: 335rpx;
  background-color: #ffffff;
  margin-bottom: 24rpx;
  padding: 0 11rpx 8rpx 12rpx;
  box-sizing: border-box;
}

.listPic {
  width: 312rpx;
  height: 328rpx;
}

.listSon image {
  width: 312rpx;
  height: 328rpx;
}

.listTitle {
  margin-bottom: 8rpx;
  width: 100%;
  font-size: 28rpx;
  font-weight: 500;
  color: #323233;
  line-height: 40rpx;
}

.collect {
  width: 100%;
  font-size: 24rpx;
  font-weight: 400;
  text-align: left;
  color: #7d7e80;
  line-height: 34rpx;
}

.discount {
  width: 100%;
  height: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discountTitle {
  width: 10rpx;
  height: 38rpx;
  /* border: 1rpx solid #ff4944; */
  border-radius: 12rpx;
  font-size: 22rpx;
  font-weight: 400;
  text-align: left;
  color: #ff4340;
  line-height: 48rpx;
  letter-spacing: 1rpx;
  text-align: center;
}

.discountPic {
  height: 48rpx;
  font-size: 28rpx;
  color: #f8633e;
}

.discountPic image {
  width: 48rpx;
  height: 48rpx;
}