公共展示

<template>
  <div
    :style="{ width: boxWidth, height: boxHeight, backgroundImage: imgsbg }"
    :class="[bgType == '1' ? 'module-box' : 'module-box-2']"
    class="module-box"
  >
    <div v-if="showTitle" class="module-box-title">
      <div @dblclick="doubleclick" class="module-box-title-left">
        <div v-if="ticon" class="t-icon">
          <img :src="ticon" alt="" />
        </div>
        <div class="title-cn">
          {{ title }}
        </div>
      </div>
      <div class="module-box-title-right">
        <selectBox
          v-if="cityShow"
          @handleChoose="handleChooseCity"
          :dataList="cityList"
          value="全部城市"
        ></selectBox>
        <selectBox
          v-if="scenicShow"
          @handleChoose="handleChooseScenic"
          :dataList="scenicList"
          value="全部景区"
        ></selectBox>
        <selectBox
          v-if="sourceShow"
          @handleChoose="handleChooseSource"
          :dataList="sourceList"
          value="全部来源"
        ></selectBox>
        <div class="more" v-if="moreShow" @click="handleChooseMore">
          更多
          <img src="@/assets/icons/arrowr.png" alt="" />
        </div>
      </div>
    </div>
    <div class="module-box-slot">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: "ModuleBox2",
  components: {
    selectBox: () => import("./selectBox"),
  },
  props: {
    showTitle: {
      type: Boolean,
      default: true,
    },
    titleWidth: {
      type: Number,
      default: 0,
    },
    boxWidth: {
      type: String,
      default: "100%",
    },
    boxHeight: {
      type: String,
      default: "100%",
    },
    title: {
      type: String,
      default: "中文标题",
    },
    titleEn: {
      type: String,
      default: "",
    },
    hasBg: {
      type: Boolean,
      default: false,
    },
    ticon: {
      type: String,
      default: require("../assets/imgs/ticon.png"),
    },
    bgType: {
      type: String,
      default: "1",
    },
    imgsbg: {
      type: String,
      // default: "url(" + require("@/assets/emergency/tk-bg2.png") + ")",
      default: "",
    },
    moduleType: {
      type: String,
      default: "",
    },
    styleObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    cityShow: {
      type: Boolean,
      default: false,
    },
    scenicShow: {
      type: Boolean,
      default: false,
    },
    sourceShow: {
      type: Boolean,
      default: false,
    },
    moreShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      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",
        },
      ],
    };
  },
  methods: {
    doubleclick() {
      let data = {
        moduleType: this.moduleType,
        styleObj: this.styleObj,
      };
      globalBus.$emit("setModuleType", data);
    },
    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>
.module-box {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  width: 100%;
  background: url("../assets/imgs/moduleBg.png") 0 0 no-repeat;
  background-size: 100% 100%;
  .module-box-title {
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 10px;
    margin-top: 24px;
    cursor: pointer;
    .module-box-title-left {
      display: flex;
      .title-cn {
        height: 16px;
        font-size: 14px;
        font-family: BDZYJT--GB1-0, BDZYJT--GB1;
        font-weight: normal;
        color: #ffffff;
        margin-left: 3px;
        display: flex;
        align-items: center;
      }
      .t-icon {
        width: 14px;
        height: 16px;
        position: relative;
        top: -1px;
        img {
          width: 100%;
        }
      }
    }
    .module-box-title-right {
      display: flex;
      .more {
        width: 67px;
        height: 24px;
        background: url("../assets/icons/morebg.png") no-repeat center center;
        background-size: 100% 100%;
        text-align: center;
        line-height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 9px;
      }
    }
  }
  .module-box-slot {
    position: relative;
    flex: 1 0 auto;
    width: 100%;
    z-index: 1;
  }
}
.module-box-2 {
  background: url("../assets/imgs/moduleBg-2.png") 0 0 no-repeat;
  background-size: 100% 100%;
  .module-box-title {
    margin-left: 10px;
    margin-top: 12px;
  }
}
.module-box-3 {
  background: url("../assets/imgs/moduleBg-3.png") 0 0 no-repeat;
  background-size: 100% 100%;
  .module-box-title {
    margin-left: 10px;
    margin-top: 12px;
  }
}
</style>

import ModuleBox2 from "@/components/ModuleBox2.vue";

components: {
    ModuleBox2,}

<ModuleBox2
            title="最新新闻"
            bgType="2"
            :imgsbg="imgsbgxw"
            :sourceShow="true"
            @ChooseSource="getChooseSource"
            :moreShow="true"
            @ChooseMore="getmore"
          >
            
          </ModuleBox2>

 imgsbgxw: "url(" + require("@/assets/imgs/moduleBg3.png") + ")",