saas_pc/src/components/footer2/index.vue

<template>
  <div id="footer_main">
    <div class="width_1200 headers">
      <div class="lf">
        <h2 v-if="footer.sloganStatus == 1">{{ footer.slogan }}</h2>
        <div class="botm">
          <div class="li" v-if="footer.sub1Status == 1">
            <img src="@/assets/new1/rspz.png" alt="" />
            <div class="r_li">
              <p>{{ footer.sub1Title }}</p>
              <p>{{ footer.sub1Description }}</p>
            </div>
          </div>
          <div class="li" v-if="footer.sub2Status == 1">
            <img src="@/assets/new1/tenzz.png" alt="" />
            <div class="r_li">
              <p>{{ footer.sub2Title }}</p>
              <p>{{ footer.sub2Description }}</p>
            </div>
          </div>
          <div class="li" v-if="footer.sub3Status == 1">
            <img src="@/assets/new1/jxsl.png" alt="" />
            <div class="r_li">
              <p>{{ footer.sub3Title }}</p>
              <p>{{ footer.sub3Description }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="rg">
        <div v-if="consultPc.h5Status == 1 && consultPc.h5Sync.includes(1)">
          <p>移动端</p>
          <img :src="$tools.splitImgHost(consultPc.h5Img)" alt="" />
        </div>
        <div v-if="consultPc.appletStatus == 1 && consultPc.appletSync.includes(1)">
          <p>小程序</p>
          <img :src="$tools.splitImgHost(consultPc.appletImg)" alt="" />
        </div>
        <div v-if="consultPc.accountsStatus == 1 && consultPc.accountsSync.includes(1)">
          <p>公众号</p>
          <img :src="$tools.splitImgHost(consultPc.accountsImg)" alt="" />
        </div>
      </div>
    </div>
    <div class="fgx"></div>
    <div class="width_1200 yq" v-if="showList(links).length > 0">
      <div class="lf">友情链接：</div>
      <div class="rg">
        <a
          v-for="(item, index) in showList(links)"
          :key="index"
          :href="item.url ? item.url : 'javascript:;'"
          target="_blank"
          >{{ item.name }}</a
        >
        <div style="clear:both"></div>
      </div>
    </div>
    <div
      class="fgx"
      style="width: 1200px;margin: 0px auto;"
      v-if="showList(links).length > 0"
    ></div>
    <div class="width_1200 ftend">
      <div class="f1">
        <p v-for="(item, index) in footer.tableData" :key="index">{{ item.name }}</p>
        <a style="color:#e1e1e1;" target="_blank" :href="footer.miit">{{footer.icp}}</a>
        <p v-if="footer.technologyStatus == 1">技术支持：{{ footer.technology }}</p>
        <p v-if="footer.copyrightStatus == 1">版权所有：{{ footer.copyright }}</p>
        <div v-html="footer.otherHtml"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["footer", "links", "consultPc"]),
    showList: function() {
      return function(list) {
        let showList = [];
        if (list) {
          showList = list.filter(item => {
            return item.status == 1;
          });
        }
        return showList;
      };
    },
    sty: function() {
      return function(str) {
        let a = str.replace(
          /<a/gi,
          '<a style="color:#e1e1e1;" target="_blank"'
        );

        return a;
      };
    }
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
#footer_main {
  background-color: rgb(31, 40, 51);
  & > .headers {
    display: flex;
    align-items: center;
    & > .lf {
      flex: 1;
      & > h2 {
        font-size: 18px;
        color: #f2f2f2;
        margin-bottom: 30px;
      }
      & > .botm {
        display: flex;
        align-items: center;
        & > .li {
          display: flex;
          align-items: center;
          margin-right: 30px;
          &:last-child {
            margin-right: 0px;
          }
          & > img {
            width: 40px;
            height: 40px;
            margin-right: 6px;
          }
          & > .r_li > p {
            color: #c9cdd1;
            font-size: 14px;
          }
        }
      }
    }
    & > .rg {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      & > div {
        margin-left: 28px;
        &:first-child {
          margin-left: 0px;
        }
        & > p {
          text-align: center;
          padding-bottom: 14px;
          color: #c9cdd1;
          font-size: 12px;
        }
        & > img {
          width: 80px;
          height: 80px;
          border-radius: 4px;
          overflow: hidden;
          background-color: #fff;
        }
      }
    }
  }
  & > .yq {
    display: flex;
    font-size: 14px;
    color: #e1e1e1;
    opacity: 0.5;
    & > .lf {
      width: 80px;
      flex-shrink: 0;
    }
    & > .rg {
      flex: 1;
      & > a {
        color: #e1e1e1;
        user-select: none;
        cursor: pointer;
        float: left;
        margin: 0px 10px 14px 14px;
        transition: all 0.2s;
        &:hover {
          color: rgb(0, 122, 255);
        }
      }
    }
  }
  & > .ftend {
    display: flex;
    color: #e1e1e1 !important;
    opacity: 0.5;
    & > .f1 {
      flex: 0.6;
      & > p {
        display: inline-block;
        margin: 0px 24px 18px 0px;
      }
      & > a {
        display: inline-block;
        margin: 0px 24px 18px 0px;
      }
    }
  }
}
.width_1200 {
  width: 1200px;
  padding: 40px 0px;
  margin: 0px auto;
}
.fgx {
  border-bottom: 1px dashed rgb(48, 56, 57);
}
</style>