wxd / MShopWeApp

@charset "UTF-8";

/* Author XGQ
 * 2019-10-27
 */

.image_box {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.image_box image {
  width: 100%;
  height: 690rpx;
}

.top {
  margin: -20rpx 28rpx 45rpx 28rpx;
  padding: 10rpx 10rpx 70rpx 10rpx;
  background-color: #fff;
  border-radius: 0rpx 0rpx 15rpx 15rpx;
}

.top_box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  text-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.top_box_text {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 50rpx 15rpx 20rpx 15rpx;
}

.top_box_text text {
  color: rgb(71, 132, 239);
  font-size: 40rpx;
}

.top_item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
  margin: 60rpx 0 0 0;
}

.top_item_img {
  float: left;
  width: 28%;
  margin: 0rpx 10rpx 0rpx 20rpx;
}

.top_item_img image {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  border: #f96865 solid 3rpx;
}

.top_item_center {
  float: left;
  width: 50%;
}

.top_item_center_title {
  font-size: 35rpx;
  color: rgb(71, 132, 239);
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding: 0 10rpx 15rpx 0rpx;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.top_item_center_ramke {
  font-size: 25rpx;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  line-height: 35rpx;
  letter-spacing: 0.5rpx;
  word-break: break-all;
  /*属性规定自动换行的处理方法。normal(使用浏览器默认的换行规则。),break-all(允许在单词内换行。),keep-all(只能在半角空格或连字符处换行。)*/
  text-overflow: ellipsis;
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2;
  /** 显示的行数 **/
  overflow: hidden;
  /** 隐藏超出的内容 **/
}

.top_item_button {
  float: right;
  width: 22%;
  padding: 65rpx 20rpx 0 1rpx;
}

.top_item_button button {
  font-size: 25rpx;
  background: #fd6969;
  color: #fff;
  border-radius: 50rpx;
  height: 45rpx;
  line-height: 45rpx;
}

.top_card {
  width: 300rpx;
  display: inline-block;
  margin: 15rpx;
}

.top_card_box {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 20rpx;
  height: 250rpx;
  margin: 5rpx;
}

.img1 {
  background-image: url(https://mshopimg.yolipai.net/miniapp/images/giftbag/vip01.png);
}

.img2 {
  background-image: url(https://mshopimg.yolipai.net/miniapp/images/giftbag/vip02.png);
}

.img3 {
  background-image: url(https://mshopimg.yolipai.net/miniapp/images/giftbag/vip03.png);
}

.top_card_tite_box {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}

.top_card_tite_a {
  padding: 5rpx 25rpx 5rpx 25rpx;
  line-height: 29rpx;
  font-size: 25rpx;
  color: #fff;
  background: #ffa7c0;
  border-radius: 0rpx 20rpx 0rpx 6rpx;
}

.top_card_tite_b {
  padding: 5rpx 25rpx 5rpx 25rpx;
  line-height: 29rpx;
  font-size: 25rpx;
  color: #fff;
  background: #50dfdb;
  border-radius: 0rpx 20rpx 0rpx 6rpx;
}

.top_card_tite_c {
  padding: 5rpx 25rpx 5rpx 25rpx;
  line-height: 29rpx;
  font-size: 25rpx;
  color: #fff;
  background: #92cbff;
  border-radius: 0rpx 20rpx 0rpx 6rpx;
}

.top_card_tite_d {
  padding: 5rpx 25rpx 5rpx 25rpx;
  line-height: 29rpx;
  font-size: 25rpx;
  color: #fff;
  border-radius: 0rpx 20rpx 0rpx 6rpx;
}

.top_card_counte {
  padding: 40rpx 20rpx 0 0;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: #fff;
  font-size: 40rpx;
}

.top_card_remak {
  padding: 20rpx 0 40rpx 0;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  font-size: 20rpx;
  color: #fff;
}

.top_card_button_a button {
  margin: 0 85rpx;
  background: #ffa6bc;
  border-radius: 50rpx;
  line-height: 40rpx;
  height: 40rpx;
  color: white;
  font-size: 25rpx;
}

.top_card_button_b button {
  margin: 0 85rpx;
  background: #50dfdb;
  border-radius: 50rpx;
  line-height: 40rpx;
  height: 40rpx;
  color: white;
  font-size: 25rpx;
}

.top_card_button_c button {
  margin: 0 85rpx;
  background: #75bcfc;
  border-radius: 50rpx;
  line-height: 40rpx;
  height: 40rpx;
  color: white;
  font-size: 25rpx;
}

.top_card_button_d button {
  margin: 0 85rpx;
  border-radius: 50rpx;
  line-height: 40rpx;
  height: 40rpx;
  color: white;
  font-size: 25rpx;
}

.top_box_image {
  padding: 20rpx 20rpx 20rpx 20rpx;
}

.top_box_image image {
  height: 216rpx;
  width: 100%;
}

.top_box_image button {
  margin: 15rpx 95rpx 0rpx 95rpx;
  background: #fe6a6a;
  border-radius: 50rpx;
  line-height: 60rpx;
  height: 60rpx;
  color: white;
  font-size: 30rpx;
}

.foot_box {
  margin: 0 30rpx 40rpx 30rpx;
  /* background: #FFFFFF; */
  border-radius: 20rpx;
  background-color: rgb(255, 255, 255);
}

.foot_box_title {
  /* color: #000000; */
  padding: 20rpx 30rpx 20rpx 30rpx;
}

.foot_box_text {
  font-size: 30rpx;
  /* color: #000000; */
  line-height: 48rpx;
  padding: 20rpx 35rpx 50rpx 30rpx;
}

.button_box {
  margin: 50rpx 50rpx 50rpx 50rpx;
  text-align: center;
}

.button {
  margin: 0 30rpx;
  background: rgb(93, 147, 245);
  border-radius: 50rpx;
  line-height: 80rpx;
  height: 80rpx;
  color: rgb(255, 255, 255);
  font-size: 35rpx;
}

.button_text {
  padding-top: 20rpx;
  font-size: 22rpx;
  color: white;
  height: 100rpx;
}

.foot_empty {
  height: 90rpx;
}

.foot_button {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  margin: 20rpx 0rpx 0rpx 0rpx;
  padding: 25rpx 0rpx;
  background: #fff;
  text-align: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.foot_button_buy {
  background: rgb(71, 132, 239);
  color: #fff;
  width: 400rpx;
  height: 70rpx;
  font-size: 28rpx;
  line-height: 70rpx;
  border-radius: 40rpx;
}

.foot_button_notbuy {
  background: #999;
  color: #fff;
  width: 400rpx;
  height: 70rpx;
  font-size: 28rpx;
  line-height: 70rpx;
  border-radius: 40rpx;
}

page {
  background-color: rgb(71, 132, 239);
}

button::after {
  border: none;
}

.foot_box_text ._img {
  width: 100%;
}

.foot_box_text .img {
  line-height: 0;
}
.num {
  color: rgb(71, 132, 239);
}

.lvip {
  left: 30rpx;
  bottom: -58rpx;
  width: 20rpx;
  height: 90rpx;
  z-index: 5;
}

.rvip {
  right: 30rpx;
  bottom: -58rpx;
  width: 20rpx;
  height: 90rpx;
  z-index: 5;
}