front-end/hdApp/src/components/sel-popup.vue

<template>
  <div class="sel-popup">
    <bottom-popup class="popup-wrap" :show="show" @close="close">
      <app-close @close="close" />
      <div class="tui-popup-box">
        <image :src="getCover" mode="aspectFit" style="height:550upx"></image>
      </div>
    </bottom-popup>
  </div>
</template>
<script>
import BottomPopup from "@/components/plugin/bottom-popup";
import NumberBox from "@/components/plugin/number-box";
import AppClose from "@/components/module/app-close";
export default {
  name: "sel-popup",
  components: {
    BottomPopup,
    NumberBox,
    AppClose
  },
  props: {
    // 信息
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },
    buyNum: {
      type: Number,
      default: 1
    },
    show: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      selIndex: 0
    };
  },
  computed: {
    getCover() {
      if (!this.$util.isEmpty(this.info)) {
        return this.info.bigCover;
      }
    }
  },
  methods: {
    change(e) {
      this.$emit("change", e);
    },
    close() {
      this.$emit("close");
    },
    changeStyleFn(index) {
      this.selIndex = index;
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep.popup-wrap {
  .tui-popup-class {
    border-top-left-radius: 24upx;
    border-top-right-radius: 24upx;
    // 适配iphoneX
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tui-popup-box {
    padding: 80upx 10upx 30upx;
  }
  .tui-popup-btn {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 14upx 0;
    @include disFlex(center, center);
    border-top: 1px solid $borderColor;
    .button-com {
      width: 80%;
      font-size: 32upx;
    }
  }

  .tui-product-box {
    display: flex;
    align-items: center;
    font-size: 24upx;
    padding-bottom: 30upx;
  }

  .tui-popup-img {
    height: 200upx;
    width: 200upx;
    border-radius: 24upx;
    display: block;
  }

  .tui-popup-price {
    padding-left: 20upx;
    padding-bottom: 8upx;
    .goods-tit {
      margin-bottom: 75upx;
    }
  }

  .tui-amount {
    color: #ff201f;
    font-size: 36upx;
  }

  .tui-popup-scroll {
    max-height: 380upx;
    font-size: 26upx;
  }

  .tui-scrollview-box {
    padding: 0 30upx 60upx 30upx;
    box-sizing: border-box;
  }

  .tui-attr-title {
    padding: 10upx 0;
    color: #333;
  }

  .tui-attr-box {
    font-size: 0;
    padding: 20upx 0;
  }

  .tui-attr-item {
    max-width: 100%;
    min-width: 200upx;
    height: 64upx;
    display: -webkit-inline-flex;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    padding: 0 26upx;
    box-sizing: border-box;
    border-radius: 32upx;
    margin-right: 20upx;
    margin-bottom: 20upx;
    font-size: 26upx;
  }

  .tui-attr-active {
    background: #fcedea !important;
    color: #e41f19;
    font-weight: bold;
    position: relative;
  }

  .tui-attr-active::after {
    content: "";
    position: absolute;
    border: 1upx solid #e41f19;
    width: 100%;
    height: 100%;
    border-radius: 40upx;
    left: 0;
    top: 0;
  }

  .tui-number-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20upx 0 30upx 0;
    box-sizing: border-box;
  }
}
</style>