公共弹框

 

 

<template>
  <div
    :style="{ width: width, height: height, backgroundImage: imgsbg }"
    class="base-popout"
    v-show="isShow"
  >
    <div class="device-info-box-header">
      <div v-if="ticon" class="t-icon">
        <img :src="ticon" alt="" />
      </div>
      <div class="device-info-box-title">{{ popoutTitle }}</div>
      <div class="device-info-box-colse" @click="hidePopout">
        <i class="el-icon-close" />
      </div>
      <div class="device-info-box-right">
        <selectBox
          v-if="sourceShow"
          @handleChoose="handleChooseSource"
          :dataList="sourceList"
          value="全部来源"
        ></selectBox>
        <selectBox
          v-if="cityShow"
          @handleChoose="handleChooseCity"
          :dataList="cityList"
          value="全部城市"
        ></selectBox>
        <selectBox
          v-if="scenicShow"
          @handleChoose="handleChooseScenic"
          :dataList="scenicList"
          value="全部景区"
        ></selectBox>

        <div class="more" v-if="moreShow" @click="handleChooseMore">
          更多
          <img src="@/assets/icons/arrowr.png" alt="" />
        </div>
      </div>
    </div>
    <div class="device-info-box-content">
      <slot></slot>
    </div>
    <div class="bg-w" v-show="isShow"></div>
  </div>
</template>

<script>
export default {
  name: "bgPopout2",
  components: {
    selectBox: () => import("./selectBox"),
  },
  props: {
    width: {
      type: String,
      default: "25",
    },

    height: {
      type: String,
      default: "65",
    },
    isShow: {
      type: Boolean,
      default: true,
    },
    popoutTitle: {
      type: String,
      default: "标题",
    },
    imgsbg: {
      type: String,
      // default: "url(" + require("@/assets/emergency/tk-bg2.png") + ")",
      default: "",
    },
    ticon: {
      type: String,
      default: require("../assets/imgs/ticon.png"),
    },
    cityShow: {
      type: Boolean,
      default: false,
    },
    scenicShow: {
      type: Boolean,
      default: false,
    },
    sourceShow: {
      type: Boolean,
      default: false,
    },
    moreShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      widthRem: "",
      heightRem: "",
      cityList: [
        {
          name: "城市1",
          value: "城市1",
        },
        {
          name: "城市2",
          value: "城市2",
        },
        {
          name: "城市3",
          value: "城市3",
        },
        {
          name: "城市4",
          value: "城市4",
        },
      ],
      scenicList: [
        {
          name: "景区1",
          value: "景区1",
        },
        {
          name: "景区2",
          value: "景区2",
        },
        {
          name: "景区3",
          value: "景区3",
        },
        {
          name: "景区4",
          value: "景区4",
        },
      ],
      sourceList: [
        {
          name: "来源1",
          value: "来源1",
        },
        {
          name: "来源2",
          value: "来源2",
        },
      ],
    };
  },
  created() {},
  methods: {
    hidePopout() {
      this.$emit("update:isShow", false);
    },
    handleChooseCity(val) {
      this.$emit("ChooseCity", val);
    },
    handleChooseScenic(val) {
      this.$emit("ChooseScenic", val);
    },
    handleChooseSource(val) {
      this.$emit("ChooseSource", val);
    },
    handleChooseMore(val) {
      console.log("val", val);
      this.$emit("ChooseMore", true);
    },
  },
};
</script>

<style lang="scss" scoped>
.base-popout {
  width: 481px;
  // min-height: 239px;
  height: 239px;
  position: absolute;
  box-sizing: border-box;
  background-position: center center;
  background-repeat: no-repeat;
  // background-image: url("../assets/emergency/tk-bg2.png");
  background-size: 100% 100%;
  left: 50%;
  top: 50%;
  margin-left: -450px;
  margin-top: -300px;
  z-index: 1000;
  .device-info-box-header {
    display: flex;
    padding: 20px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #f7f7f7;
    width: 100%;
    height: 1px;
    border-image: linear-gradient(
        270deg,
        rgba(79, 123, 212, 0.48),
        rgba(97, 147, 246, 1),
        rgba(72, 115, 201, 0.42)
      )
      1 1;
    margin-top: 37px;
    align-items: center;

    i {
      font-size: 18px;
    }
    .t-icon {
      width: 14px;
      height: 16px;
      margin-bottom: 24px;
      img {
        width: 100%;
      }
    }
    .device-info-box-title {
      width: 100%;
      font-size: 14px;
      font-family: BDZYJT--GB1-0, BDZYJT--GB1;
      font-weight: normal;
      color: #ffffff;
      margin-bottom: 22px;
      margin-left: 4px;
    }
    .device-info-box-colse {
      cursor: pointer;
      position: absolute;
      top: -26px;
      right: 10px;
    }
    .device-info-box-right {
      display: flex;
      margin-bottom: 22px;
      cursor: pointer;
    }
  }
  .device-info-box-content {
    width: 100%;
    // height: 100%;
    height: calc(100% - 80px);
    // height: 331px;
    overflow-y: auto;
    padding: 0 20px 10px 20px;
  }
}
.content-box {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.bg-w {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: -1;
  backdrop-filter: blur(1px);
}
</style>