chuanshan_static/src/components/section.vue

<template>
  <div
    class="section"
    :style="{ background: $linear[`${isTheme ? 'w' : 'r'}`] }"
  >
    <!-- <img class="s-bg" v-if="bgImg" :src="bgImg"/> -->
    <div class="s-header">
      <img
        :src="`${$cdn}/images/title_icon_${isTheme ? 'r' : 'w'}.png`"
        alt=""
      />
      <span :style="{ color: isTheme ? '#444' : '#fff' }">{{ title }}</span>
    </div>

    <div class="section-con">
      <div class="preface" :slot="'container'">
        <div class="txt">
          <p
            :style="{ color: isTheme ? '#444' : '#fff' }"
            v-for="(item, i) in txtArr"
            :key="i"
            v-html="item"
          ></p>
        </div>
      </div>
      <jieshuo v-if="!hideJiesuo" :isTheme="isTheme" />
      <bm-slide
        :full="full"
        :isTheme="isTheme"
        v-if="data.length > 0"
        :idx="activeIdx"
        @activeItem="handleItem"
        :list="data"
        class="sld-con"
      />

      <div class="readmore">
        <span @click="goto">查看更多藏品</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import jieshuo from "./jieshuo";
import bmSlide from "./bmSlide/";

export default {
  computed: {
    ...mapState({
      theme: (state) => state.common.theme,
    }),
  },
  components: {
    jieshuo,
    bmSlide,
  },
  props: {
    full: {
      type: Boolean,
      default() {
        return false;
      },
    },
    txtArr: {
      type: Array,
      default() {
        return [];
      },
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    activeIdx: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: "",
    },
    hideJiesuo: {
      type: Boolean,
      default: false,
    },
    titlecolor: {
      type: String,
      default: "#444",
    },
    bgImg: {
      type: String,
      default: "",
    },
    isTheme: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    handleItem(item) {
      this.$emit("activeItem", item);
    },
    goto() {
      this.$router.push({
        name: "collection",
        params: { type: this.data[0].type },
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
@import "../assets/style/globalVars.less";
@cdn: "https://houseoss.4dkankan.com/chuanshan";
.section {
  margin: 0 auto;
  padding: 7.5rem 0 4.17rem;
  position: relative;
  overflow: hidden;
  .s-header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 1.75rem;
    margin: 0 auto 1.25rem;
    img {
      width: 2.5rem;
      margin-right: 1.25rem;
    }
    span {
      font-size: 1.5rem;
      font-weight: bolder;
      line-height: 1;
      display: inline-block;
      margin: 0 0.83rem;
      vertical-align: middle;
      color: #444444;
    }
  }

  .section-con {
    width: @containerW;
    margin: 0 auto;
    .txt {
      width: 80%;
      min-width: 41.67rem;
      margin: 3.83rem auto;
      > p {
        font-size: @fontSizeNormal;
        line-height: @fontSizeNormalLightHeight;
        text-indent: 2rem;
        text-align: justify;
        font-size: 1rem;
        color: #444;
        &:last-of-type {
          margin-bottom: 3.83rem;
        }
      }
    }
    .sld-con {
      width: 80%;
      margin: 3.83rem auto;
    }
    .readmore {
      span {
        cursor: pointer;
        display: inline-block;
        color: @theme;
        width: 9.58rem;
        text-align: center;
        line-height: 2.67rem;
        height: 2.67rem;
        background: url("@{cdn}/images/readmore.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }

  .s-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0;
    z-index: -1;
  }
}
</style>