ec.uniapp-master/pages/store/meal/meal.less

@import '../../../common/css/global';
#meal-matched{

  .contents{
    height:100%;
    overflow:auto;


    .title{
      display: flex;
      justify-content: space-between;
      background-color: #ffffff;
      height: 40px;
      padding-left: 14px;
      padding-right: 14px;
      line-height: 40px;
      border-bottom: 1px solid #e5e5e5;
      color: black;
      font-weight: bold;
      .recommand{
        margin-top: 5px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
        border-radius: 20px;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        background-color: #e40013;
        color: #FFFFFF;
      }
    }
    .meal-list{
      background-color: #ffffff;
      overflow:auto;

      .meal-list-item{
        &.highlight{
          .item-size{
            color: red;
          }
          margin-top: -1px;
          border: 1px solid red;
          &:first-child{
            margin-top: 0px;
          }
        }
        overflow: hidden;
        padding: 10px 0 10px 10px;
        border-bottom: 1px solid #e5e5e5;
        image{
          float: left;
          width: 96px;
          height: 96px;
        }
        .detail{
          overflow: hidden;
          p{
            padding-left: 10px;
            padding-right: 10px;
            &.item-title{
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: normal;
              -webkit-line-clamp: 2;
              display: -webkit-box;
            }
            &.item-count{
              margin-top: 5px;
              text-align: right;
            }
            &.item-size{
              color: #d9d9d9;
              margin-top: 5px;
              font-size: 13px;
              height:32px;
              line-height:32px;
              span{
                &.chanSize{
                  float: right;
                  width: 78px;
                  height: 32px;
                  text-align: center;
                  line-height: 32px;
                  border: 1px solid #d0d0d1;
                  margin-right:10px;
                }
                &.updateSize{
                  margin-right: 10px;
                  float: right;
                  width: 78px;
                  height: 32px;
                  text-align: center;
                  line-height: 32px;
                  color: red;
                  border: 1px solid red;
                }
              }
            }
          }
        }
      }
      .all_count{
        view{
          padding-top:10px;
          padding-bottom: 10px;
          padding-right: 10px;
          text-align: right;
          color: #b5b5b5;
          font-size: 14px;
        }
      }
    }
    .meal-bottom{
      background-color: #ffffff;
      height: 50px;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      display: flex;
      .meal-bottom_detail{
        width: 70%;
        height: 100%;
        line-height:50px;
        p{
          text-align: right;
          padding-right: 10px;
          margin-left:10px;
          span{
            padding-left: 5px;
            color: #e40013;
            font-weight: bold;
          }
        }
      }
      .meal-bottom_button{
        width: 30%;
        height: 100%;
        background-color: @mainColor;
        line-height: 50px;
        text-align: center;
        color: #ffffff;
      }
    }
  }
  /*选取规格部分*/

  .select_goods_container {
    background: #ffffff;
    position: relative;
    z-index:100;

    .select_goods_cloese {

      position: absolute;
      top:12px;
      right:10px;
      width:20px;
      height:20px;
      background: transparent;
      z-index:4;
      overflow:visible;

    }

    .select_goods_cloese:before{
      position: absolute;
      top:9px;
      left:-1px;
      content: '';
      width:28px;
      height:2px;
      background: #2e2e2e;
      transform: rotate(45deg) ;


    }

    .select_goods_cloese:after{
      top:9px;
      left:-1px;
      position: absolute;
      content: '';
      width:28px;
      height:2px;
      background: #2e2e2e;
      transform: rotate(-45deg);


    }

    .select_goods_header{
      display: flex;
      padding: 8px;
      align-items: center;

      .img_box {


        border:1px solid #e5e5e5;
        background:#f9f9f9 ;
        overflow: hidden;

        image {
          width:78px;
          height:78px;
          object-fit: fill;
        }
      }


      .price_item {
        font-size:18px;
        margin-left:20px;
        height:100%;
        display:-webkit-flex;
        flex-direction: column;
        justify-content: center;

        text {
          display: block;
          text-align: left;
        }

        text:nth-child(1){
          font-weight:bold;
          color:#ee2b1d;
        }

        text:nth-child(2){
          font-size:14px;
          color:#6c6c6c;
          text-indent:3px
        }
      }

    }

    .select_spec {
      font-size: 12px;
      padding: 12px 8px 50px 8px;

      .spec_line {
        display: flex;
        margin-bottom: 15px;

        .spec_title {
          padding-right: 11px;
          color: #c4c4c4;
          width: 50px;
          line-height: 35px;
        }


        .spec_list  {
          display: block;
          line-height:35px;
          color:#959595;
          font-size:15px;
        }

        .spec_block {
          display: inline-block;
          margin-top: 10px;
          margin-right: 10px;

          .spec_text {
            display: block;
            padding: 0 7px;
            height: 33px;
            line-height: 33px;
            min-width: 33px;
            border: 1px solid #DDDDDD;
            text-align: center;
            font-size: 12px;
            position: relative;

            .border-color {
              position: absolute;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
              border: 3px solid @mainColor;
            }
          }

          image {
            height: 100%;
            width: 100%;
          }

          .spec_icon {
            width: 35px;
            height: 35px;
            padding: 0;
          }

          /*&.active text {
            &:before {
              content: '';
              position: absolute;
              border: 3px solid @globalColor;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
            }
          }*/

          &.disabled text {
            border: none;
            margin: 1px;

            &:before {
              content: '';
              position: absolute;
              background-color: #eee;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
              opacity: 0.6;
            }

            &:after {
              content: '';
              position: absolute;
              border: 3px dashed #cfcfcf;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
            }
          }
        }

        .num_title {
          padding-right: 11px;
          color: #c4c4c4;
          width: 50px;
          line-height: 30px;
        }

        .num_value {
          display: flex;
          font-size: 0;

          text {
            display: block;
            border: 1px solid #e8e8e8;
            text-align: center;
            min-width: 28px;
            width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 12px;

            &.store {
              width: auto;
              border-color: #ffffff;
              margin-left: 10px;
            }
          }

          input {
            display: block;
            border: none;
            height: 100%;
            width: 100%;
            text-align: center;
            outline: none;
            font-size: 12px;
          }

          .none_border {
            width: 30px;
            border:1px solid #e8e8e8;
            border-left: none;
            border-right: none;
          }
        }
      }
    }

  }
  /*选取规格部分*/

  .select_goods_container {
    background: #ffffff;
    position: relative;
    z-index:100;

    .select_goods_cloese {

      position: absolute;
      top:12px;
      right:10px;
      width:20px;
      height:20px;
      background: transparent;
      z-index:4;
      overflow:visible;

    }

    .select_goods_cloese:before{
      position: absolute;
      top:9px;
      left:-1px;
      content: '';
      width:28px;
      height:2px;
      background: #2e2e2e;
      transform: rotate(45deg) ;


    }

    .select_goods_cloese:after{
      top:9px;
      left:-1px;
      position: absolute;
      content: '';
      width:28px;
      height:2px;
      background: #2e2e2e;
      transform: rotate(-45deg);


    }

    .select_goods_header{
      display: flex;
      padding: 8px;
      align-items: center;

      .img_box {


        border:1px solid #e5e5e5;
        background:#f9f9f9 ;
        overflow: hidden;

        image {
          width:78px;
          height:78px;
          object-fit: fill;
        }
      }


      .price_item {
        font-size:18px;
        margin-left:20px;
        height:100%;
        display:-webkit-flex;
        flex-direction: column;
        justify-content: center;

        text {
          display: block;
          text-align: left;
        }

        text:nth-child(1){
          font-weight:bold;
          color:#ee2b1d;
        }

        text:nth-child(2){
          font-size:14px;
          color:#6c6c6c;
          text-indent:3px
        }
      }

    }

    .select_spec {
      font-size: 12px;
      padding: 12px 8px 50px 8px;

      .spec_line {
        display: flex;
        margin-bottom: 15px;

        .spec_title {
          padding-right: 11px;
          color: #c4c4c4;
          width: 50px;
          line-height: 35px;
        }


        .spec_list  {
          display: block;
          line-height:35px;
          color:#959595;
          font-size:15px;
        }

        .spec_block {
          display: inline-block;
          margin-top: 10px;
          margin-right: 10px;

          .spec_text {
            display: block;
            padding: 0 10px;
            height: 33px;
            line-height: 33px;
            min-width: 33px;
            border: 1px solid #DDDDDD;
            text-align: center;
            font-size: 12px;
            position: relative;
          }

          image {
            height: 100%;
            width: 100%;
          }

          .spec_icon {
            width: 35px;
            height: 35px;
            padding: 0;
          }

          /*&.active text {
            &:before {
              content: '';
              position: absolute;
              border: 3px solid @globalColor;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
            }
          }*/


          &.disabled text {
            border: none;
            margin: 1px;

            &:before {
              content: '';
              position: absolute;
              background-color: #eee;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
              opacity: 0.6;
            }

            &:after {
              content: '';
              position: absolute;
              border: 3px dashed #cfcfcf;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
            }
          }
        }

        .num_title {
          padding-right: 11px;
          color: #c4c4c4;
          width: 50px;
          line-height: 30px;
        }

        .num_value {
          display: flex;
          font-size: 14px;

          text {
            display: block;
            border: 1px solid #e8e8e8;
            text-align: center;
            min-width: 28px;
            width: 28px;
            height: 28px;
            line-height: 28px;
            font-size: 12px;

            &.store {
              width: auto;
              border-color: #ffffff;
              margin-left: 10px;
            }
          }

          input {
            display: block;
            border: none;
            height: 100%;
            width: 100%;
            text-align: center;
            outline: none;
            font-size: 12px;
          }

          .none_border {
            width: 30px;
            border:1px solid #e8e8e8;
            border-left: none;
            border-right: none;
          }
        }
      }
    }

  }
  .maks{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    background: rgba(0,0,0,.4);
    opacity: 1;
    transition: opacity .3s ease;
    display: none;

    &.cur{
      display: block;
    }
  }
  .detail-popup  {
    width:100%;
    position: fixed;
    left: 0;
    bottom: -55px;
	/* #ifdef H5 || APP-PLUS */
	bottom: 0;
	/* #endif */
    z-index: 51;
    transform:translate3d(0,100,0);

    /*选取规格部分*/
    .select_spec {
      font-size: 12px;
      padding: 12px 8px 50px 8px;

      .spec_line {
        display: flex;
        margin-bottom: 15px;

        .spec_title {
          padding-right: 11px;
          color: #c4c4c4;
          width: 50px;
          line-height: 35px;
        }
        .spec_list  {
          display: block;
          line-height:35px;
          color:#959595;
          font-size:15px;
        }

        .spec_value {
          flex: 1;
          font-size: 0;
          margin-top: -10px;

          view{
            overflow: hidden;
          }
        }

        .spec_block {
          display: inline-block;
          margin-top: 10px;
          margin-right: 10px;

          text {
            display: block;
            padding: 0 7px;
            height: 33px;
            line-height: 33px;
            min-width: 20px;
            border: 1px solid #DDDDDD;
            text-align: center;
            font-size: 12px;
            position: relative;
          }

          image {
            height: 100%;
            width: 100%;

          }

          /*&.active view {
            &:before {
              content: '';
              position: absolute;
              border: 3px solid @globalColor;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
            }
          }*/

          &.disabled view {
            border: none;
            margin: 1px;

            &:before {
              content: '';
              position: absolute;
              background-color: #eee;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
              opacity: 0.6;

            }

            &:after {
              content: '';
              position: absolute;
              border: 3px dashed #cfcfcf;
              top: -1px;
              left: -1px;
              right: -1px;
              bottom: -1px;
            }
          }
        }

        .num_title {
          padding-right: 11px;
          color: #c4c4c4;
          width: 50px;
          line-height: 30px;
        }

        //.num_value {
        //  display: flex;
        //  flex: 1;
        //  font-size: 0;
        //
        //  text {
        //    display: block;
        //    border: 1px solid #e8e8e8;
        //    text-align: center;
        //    min-width: 28px;
        //    width: 28px;
        //    height: 28px;
        //    line-height: 28px;
        //    font-size: 12px;
        //
        //    &.store {
        //      width: auto;
        //      border-color: #ffffff;
        //      margin-left: 10px;
        //    }
        //  }
        //
        //  input {
        //    display: block;
        //    border: none;
        //    height: 100%;
        //    width: 100%;
        //    text-align: center;
        //    outline: none;
        //  }
        //
        //  .none_border {
        //    width:50px;
        //    border-left: none;
        //    border-right: none;
        //  }
        //}
      }

      .button {
        height: 50px;
        line-height: 50px;
        text-align: center;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0;
        background: @mainColor;

        &:after {
          border-radius: 0;
          border: none;
        }
        &.disabled {
          background: #C2C2C2;
        }
      }
    }
  }
}