jsm-mall-front/src/components/moduleEnclosure.vue

<template>
  <div class="am-moduleEnclosure am-corner">
    <div class="am-moduleEnclosurecon">
      <zj-page-container>
        <div class="am-moduleEnclosureTitle" v-if="title">
          <div class="am-moduleEnclosureTitle-div">
            <img
              src="@/assets/rightdb.png"
              style="width: 12px; height: 12px; margin-right: 4px"
            />
            <span>{{ title }}</span>
          </div>
          <div class="am-moduleEnclosureTitle-right">
            <slot name="rightce" />
          </div>
        </div>
        <zj-page-fill>
          <div style="width: 100%; height: 100%; overflow: hidden">
            <slot />
          </div>
        </zj-page-fill>
      </zj-page-container>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    title: {
      type: String,
      default: null,
    },
  },
};
</script>

<style scoped lang="scss">
.am-moduleEnclosure {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(
    0deg,
    rgba(9, 20, 82, 0.6) 0%,
    rgba(6, 22, 81, 0.6) 50%,
    rgba(9, 20, 82, 0.6) 100%
  );
  border: 3px solid #082570;
  border-image: linear-gradient(0deg, #34c7ff 0%, #26d5ff 51%, #34c7ff 100%) 3 3;
  box-sizing: border-box;
  padding: 12px;
}
.am-moduleEnclosurecon {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 12px;
  right: 12px;
  z-index: 999;
}
.am-moduleEnclosureTitle-div {
  height: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
  margin-right: 20px;
}
.am-moduleEnclosureTitle-right {
  width: 0;
  flex: 1;
  display: flex;
  justify-content: flex-end;
}
.am-moduleEnclosureTitle {
  width: 100%;
  height: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: -4px;
  font-size: 14px;
  font-family: Source Han Sans CN, Source Han Sans CN-Bold;
  font-weight: 700;
  text-align: left;
  color: #759bdd;
  line-height: 22px;
}
.am-corner {
  position: relative;
  border: 3px solid #81bcff;
}
.am-corner:after {
  content: '';
  width: calc(100% - 24px);
  height: calc(100% + 6px);
  position: absolute;
  left: 12px;
  top: -3px;
  bottom: -3px;
  border-bottom: 3px solid #082570;
  border-top: 3px solid #082570;
}
.am-corner:before {
  content: '';
  width: calc(100% + 6px);
  height: calc(100% - 24px);
  position: absolute;
  left: -3px;
  right: -3px;
  top: 12px;
  border-left: 3px solid #082570;
  border-right: 3px solid #082570;
}
</style>