FE_IASF_client/src/pages/contactUs/index.vue

<template>
  <div class="wrap">
    <div class="single-banner">
      <img class="banner-img"
           :src="modules[0].form.pic"
           alt="" />
      <div class="texts">
        <h6 class="banner-title">{{ modules[0].form.title }}</h6>
      </div>
    </div>

    <div class="block">
      <div class="inner">
        <Breadcrumb ref="breadcrumb"
                    :data.sync="routes" />
        <div class="contact">
          <div class="fields">
            <h6>Contact us</h6>
            <p class="text">发圣诞节快乐副驾驶打卡了分速度快了父级圣诞快乐</p>
            <p class="text">发圣诞节快乐副驾驶打卡了分速度快了父级圣诞快乐</p>
            <p class="text">发圣诞节快乐副驾驶打卡了分速度快了父级圣诞快乐</p>
          </div>
          <img src="http://10.10.11.7/images/contactUs/2.png"
               alt=""
               class="pic">
          <el-table :data="list"
                    class="patent-table"
                    ref="table"
                    stripe
                    header-align="center">
            <el-table-column prop="title"
                             label="部门"
                             align="center"
                             min-width="250"></el-table-column>
            <el-table-column prop="publishingHouse"
                             label="联系人"
                             align="center"
                             min-width="100"></el-table-column>
            <el-table-column prop="writersAndEditors"
                             label="电话"
                             align="center"
                             min-width="150"></el-table-column>
            <el-table-column prop="publicationYear"
                             label="邮箱"
                             align="center"
                             min-width="150"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import Breadcrumb from '@/components/breadcrumb'
import WOW from 'wow.js'
export default {
  mixins: [mixins],
  data () {
    return {
      routes: [],
      list: []
    };
  },
  components: {
    Breadcrumb
  },
  mounted () {
    new WOW().init();
    this.getColumn()
  },
  methods: {
    // 获取文章详情
    getInfo () {
      // 预览/详情
      this.$post(
        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
      )
        .then(({ data }) => {
          if (data.length) {
            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
            const json = JSON.parse(
              this.preview
                ? data
                : data[data.length - 1][
                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
                ]
            );
            this.modules = json;
            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
          }
        })
        .catch((err) => { });
    },
    // 获取父级所有栏目名称和id
    getParent (data, id) {
      for (const e of data) {
        if (e.id == id) {
          this.routes.push({
            name: e.columnName,
            query: {
              id: e.id
            }
          })
          break
        } else if (e.children.length) {
          this.routes.push({
            name: e.columnName,
            query: {
              id: e.id
            }
          })
          this.getParent(e.children, id)
        }
      }
    },
    // 获取上级面包屑
    getColumn () {
      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
        this.getParent(data, this.id)
      }).catch(err => { })
    },
  },
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';

.single-banner {
    .banner-img {
        height: 21.6rem;
    }
    .texts {
        h6 {
            font-size: 2.16rem;
            margin-bottom: 0.95rem;
        }
        .banner-des {
            font-size: 0.96rem;
        }
    }
}
.block {
    padding: 2rem 0;
    background: url(http://10.10.11.7/images/contactUs/3.png) 0 130px no-repeat,
        url(http://10.10.11.7/images/contactUs/4.png) bottom right no-repeat;
    background-color: #f7f8fa;
}
.inner {
    .contact {
        padding: 3rem 6rem;
        background-color: #fff;
    }
    .fields {
        position: relative;
        padding: 2rem;
        border: 4px solid #f9f9f9;
        h6 {
            position: absolute;
            top: -16px;
            left: 60px;
            font-size: 1.1rem;
            font-family: PingFangSC-Medium, PingFang SC;
            color: #333;
            background-color: #fff;
        }
        .text {
            font-size: 1rem;
            color: #333;
            line-height: 1.6;
        }
    }
    .pic {
        width: 100%;
        margin: 2rem 0 1.5rem;
    }
}
</style>