@charset "UTF-8";
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */
/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */
/* 颜色变量 */
/* 行为相关颜色 */
/* 文字基本颜色 */
/* 背景颜色 */
/* 边框颜色 */
/* 尺寸变量 */
/* 文字尺寸 */
/* 图片尺寸 */
/* Border Radius */
/* 水平间距 */
/* 垂直间距 */
/* 透明度 */
/* 文章场景相关 */
/* 页面左右间距 */
/* 文字尺寸 */
/*文字颜色*/
/* 边框颜色 */
/* 图片加载中颜色 */
/* 行为相关颜色 */
page {
  /* background: $page-color-base; */
  padding-bottom: 160rpx;
}
.icon-you {
  font-size: 30rpx;
  color: #888;
}
.carousel {
  height: 722rpx;
  position: relative;
}
.carousel swiper {
    height: 100%;
}
.carousel .image-wrapper {
    width: 100%;
    height: 100%;
}
.carousel .swiper-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    -webkit-align-content: center;
            align-content: center;
    height: 750rpx;
    overflow: hidden;
}
.carousel .swiper-item image {
      width: 100%;
      height: 100%;
}
.titleLayout {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
          justify-content: space-between;
  padding-bottom: 20rpx;
}
/* 标题简介 */
.introduce-section {
  background: #fff;
  padding: 20rpx 30rpx;
}
.introduce-section .title {
    font-size: 36rpx;
    color: #303133;
    height: 50rpx;
    line-height: 50rpx;
    width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.introduce-section .titleRight {
    border-left: 1px solid #F5F5F5;
    padding-left: 32rpx;
}
.introduce-section .price-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
            align-items: baseline;
    height: 64rpx;
    padding: 10rpx 0;
    font-size: 26rpx;
    color: #fa436a;
}
.introduce-section .price {
    font-size: 34rpx;
}
.introduce-section .m-price {
    margin: 0 12rpx;
    color: #909399;
    text-decoration: line-through;
}
.introduce-section .coupon-tip {
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    padding: 4rpx 10rpx;
    background: #fa436a;
    font-size: 24rpx;
    color: #fff;
    border-radius: 6rpx;
    line-height: 1;
    -webkit-transform: translateY(-4rpx);
            transform: translateY(-4rpx);
}
.introduce-section .bot-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    height: 50rpx;
    font-size: 24rpx;
    color: #909399;
}
.introduce-section .bot-row text {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
              flex: 1;
}
/* 分享 */
.share-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
  color: #606266;
  background: -webkit-linear-gradient(left, #fdf5f6, #fbebf6);
  background: linear-gradient(left, #fdf5f6, #fbebf6);
  padding: 12rpx 30rpx;
}
.share-section .share-icon {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    width: 70rpx;
    height: 30rpx;
    line-height: 1;
    border: 1px solid #fa436a;
    border-radius: 4rpx;
    position: relative;
    overflow: hidden;
    font-size: 22rpx;
    color: #fa436a;
}
.share-section .share-icon:after {
      content: '';
      width: 50rpx;
      height: 50rpx;
      border-radius: 50%;
      left: -20rpx;
      top: -12rpx;
      position: absolute;
      background: #fa436a;
}
.share-section .icon-xingxing {
    position: relative;
    z-index: 1;
    font-size: 24rpx;
    margin-left: 2rpx;
    margin-right: 10rpx;
    color: #fff;
    line-height: 1;
}
.share-section .tit {
    font-size: 28rpx;
    margin-left: 10rpx;
}
.share-section .icon-bangzhu1 {
    padding: 10rpx;
    font-size: 30rpx;
    line-height: 1;
}
.share-section .share-btn {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
            flex: 1;
    text-align: right;
    font-size: 24rpx;
    color: #fa436a;
}
.share-section .icon-you {
    font-size: 24rpx;
    margin-left: 4rpx;
    color: #fa436a;
}
.c-list {
  font-size: 26rpx;
  color: #606266;
  background: #fff;
  border-top: 20rpx solid #F5F5F5;
  border-bottom: 20rpx solid #F5F5F5;
}
.c-list .c-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    padding: 20rpx 30rpx;
    position: relative;
}
.c-list .tit {
    width: 140rpx;
}
.c-list .con {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
            flex: 1;
    color: #303133;
}
.c-list .con .selected-text {
      margin-right: 10rpx;
}
.c-list .bz-list {
    height: 40rpx;
    font-size: 26rpx;
    color: #303133;
}
.c-list .bz-list text {
      display: inline-block;
      margin-right: 30rpx;
}
.c-list .con-list {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
            flex-direction: column;
    color: #303133;
    line-height: 40rpx;
}
.c-list .red {
    color: #fa436a;
}
/* 评价 */
.eva-section {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
          flex-direction: column;
  padding: 20rpx 30rpx;
  background: #fff;
  margin-top: 16rpx;
}
.eva-section .e-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    height: 70rpx;
    font-size: 26rpx;
    color: #909399;
}
.eva-section .e-header .tit {
      font-size: 30rpx;
      color: #303133;
      margin-right: 4rpx;
}
.eva-section .e-header .tip {
      -webkit-box-flex: 1;
      -webkit-flex: 1;
              flex: 1;
      text-align: right;
}
.eva-section .e-header .icon-you {
      margin-left: 10rpx;
}
.eva-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding: 20rpx 0;
}
.eva-box .portrait {
    -webkit-flex-shrink: 0;
            flex-shrink: 0;
    width: 80rpx;
    height: 80rpx;
    border-radius: 100px;
}
.eva-box .right {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
            flex-direction: column;
    font-size: 28rpx;
    color: #606266;
    padding-left: 26rpx;
}
.eva-box .right .con {
      font-size: 28rpx;
      color: #303133;
      padding: 20rpx 0;
}
.eva-box .right .bot {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
              justify-content: space-between;
      font-size: 24rpx;
      color: #909399;
}
/*  详情 */
.detail-desc {
  background: #fff;
  margin-top: 16rpx;
  width: 100%;
}
.detail-desc .d-header {
    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;
    height: 80rpx;
    font-size: 30rpx;
    color: #303133;
    position: relative;
}
.detail-desc .d-header text {
      padding: 0 20rpx;
      background: #fff;
      position: relative;
      z-index: 1;
}
.detail-desc .d-header:after {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      width: 300rpx;
      height: 0;
      content: '';
      border-bottom: 1px solid #ccc;
}
/* 规格选择弹窗 */
.attr-content {
  padding: 10rpx 30rpx;
}
.attr-content .a-t {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}
.attr-content .a-t image {
      width: 170rpx;
      height: 170rpx;
      -webkit-flex-shrink: 0;
              flex-shrink: 0;
      margin-top: -40rpx;
      border-radius: 8rpx;
}
.attr-content .a-t .right {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
              flex-direction: column;
      padding-left: 24rpx;
      font-size: 26rpx;
      color: #606266;
      line-height: 42rpx;
      -webkit-justify-content: space-around;
              justify-content: space-around;
}
.attr-content .a-t .right .price {
        font-size: 32rpx;
        color: #fa436a;
        margin-bottom: 10rpx;
}
.attr-content .a-t .right .selected-text {
        margin-right: 10rpx;
}
.attr-content .attr-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
            flex-direction: column;
    font-size: 30rpx;
    color: #606266;
    padding-top: 30rpx;
    padding-left: 10rpx;
}
.attr-content .item-list {
    padding: 20rpx 0 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
}
.attr-content .item-list text {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
              justify-content: center;
      background: #eee;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      border-radius: 100rpx;
      min-width: 60rpx;
      height: 60rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #303133;
}
.attr-content .item-list .selected {
      background: #fbebee;
      color: #fa436a;
}
/*  弹出层 */
.popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 100rpx;
  z-index: 99;
}
.popup.show {
    display: block;
}
.popup.show .mask {
      -webkit-animation: showPopup 0.2s linear both;
              animation: showPopup 0.2s linear both;
}
.popup.show .layer {
      -webkit-animation: showLayer 0.2s linear both;
              animation: showLayer 0.2s linear both;
}
.popup.hide .mask {
    -webkit-animation: hidePopup 0.2s linear both;
            animation: hidePopup 0.2s linear both;
}
.popup.hide .layer {
    -webkit-animation: hideLayer 0.2s linear both;
            animation: hideLayer 0.2s linear both;
}
.popup.none {
    display: none;
}
.popup .mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 90%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4);
}
.popup .layer {
    position: fixed;
    z-index: 99;
    bottom: 100rpx;
    width: 100%;
    min-height: 40vh;
    border-radius: 10rpx 10rpx 0 0;
    background-color: #fff;
}
.popup .layer .btn {
      height: 66rpx;
      line-height: 66rpx;
      border-radius: 100rpx;
      background: #fa436a;
      font-size: 30rpx;
      color: #fff;
      margin: 30rpx auto 20rpx;
}
@-webkit-keyframes showPopup {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes showPopup {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@-webkit-keyframes hidePopup {
0% {
    opacity: 1;
}
90% {
    opacity: 0;
}
}
@keyframes hidePopup {
0% {
    opacity: 1;
}
90% {
    opacity: 0;
}
}
@-webkit-keyframes showLayer {
0% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
}
100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
}
}
@keyframes showLayer {
0% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
}
100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
}
}
@-webkit-keyframes hideLayer {
0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
100% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
}
}
@keyframes hideLayer {
0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
}
100% {
    -webkit-transform: translateY(120%);
            transform: translateY(120%);
}
}
.van-sticky {
  /* z-index: 0!important; */
}
/* 详情固定 */
.activeColor {
  /* background: #fff!important; */
  position: fixed;
  background-color: #fff;
  top: 0rpx;
  z-index: 99;
  margin-top: 0;
}
/* 底部操作菜单 */
.page-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  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;
  width: 100%;
  height: 100rpx;
  z-index: 99;
  background: rgba(255, 255, 255, 0.9);
}
.page-bottom .p-b-btn {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
    -webkit-align-items: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
            justify-content: center;
    font-size: 24rpx;
    color: #606266;
    width: 96rpx;
    height: 80rpx;
}
.page-bottom .p-b-btn .yticon {
      font-size: 40rpx;
      line-height: 48rpx;
      color: #909399;
}
.page-bottom .p-b-btn.active, .page-bottom .p-b-btn.active .yticon {
      color: #fa436a;
}
.page-bottom .p-b-btn .icon-fenxiang2 {
      font-size: 42rpx;
      -webkit-transform: translateY(-2rpx);
              transform: translateY(-2rpx);
}
.page-bottom .p-b-btn .icon-shoucang {
      font-size: 46rpx;
}
.page-bottom .action-btn-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    height: 76rpx;
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0 20rpx 40rpx -16rpx #fa436a;
    box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
    background: -webkit-linear-gradient(left, #ffac30, #fa436a, #F56C6C);
    background: linear-gradient(to right, #ffac30, #fa436a, #F56C6C);
    margin-left: 20rpx;
    position: relative;
}
.page-bottom .action-btn-group:after {
      content: '';
      position: absolute;
      top: 50%;
      right: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
      height: 28rpx;
      width: 0;
      border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.page-bottom .action-btn-group .action-btn {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
              align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
              justify-content: center;
      width: 180rpx;
      height: 100%;
      font-size: 28rpx;
      padding: 0;
      border-radius: 0;
      background: transparent;
}