cjy_web/src/views/components/v-bottom/index.vue

<template>
  <div class="cjy-bottom row">
    <div class="v-container row">
      <div class="cjy-bottom-left">
        <div class="tel-number">{{ company_data.phone }}</div>
        <div class="tel-text">商务合作热线</div>
        <div class="left-title m-t-normal">公司地址</div>
        <div class="left-content">{{ company_data.address }}</div>
        <div class="left-title m-t-normal">公司网址</div>
        <div class="left-content">{{ company_data.url }}</div>
      </div>
      <div class="cjy-bottom-nav row">
        <div class="nav-item">
          <div class="item-title">全域旅游</div>
          <div class="item-children" v-for="(cell, i) in solvePlan" :key="i" @click="gotoPages(cell.id,1)">
            <div class="children-title">{{ cell.title }}</div>
          </div>
        </div>
        <div class="nav-item">
          <div class="item-title">智慧景区</div>
          <div class="item-children" v-for="(cell, i) in scensePlan" :key="i" @click="gotoPages(cell.id,1)">
            <div class="children-title">{{ cell.title }}</div>
          </div>
        </div>
        <div class="nav-item">
          <div class="item-title">经典案例</div>
          <div class="item-children" v-for="(cell, i) in classicCase" :key="i" @click="gotoPages(cell.id,2)">
            <div class="children-title">{{ cell.title }}</div>
          </div>
        </div>
      </div>
      <div class="cjy-bottom-right">
        <img :src="company_data.qrCode" style="width: 120px">
        <div class="text">关注公众号<br />
          了解更多最新动态
        </div>
      </div>
    </div>
    <div class="v-container row cjy-bottom-copy flex-justify-center">
      <div class="copy-text">@{{ copy_date }}河北创巨圆科技发展有限公司版权所有</div>
      <div class="copy-text">冀ICP备15022141号-3</div>
    </div>
  </div>
</template>

<script>
  import * as Api from '@/api/cjy/company';
  import * as Apis from "@/api/cjy/columninfo"
  export default {
    name: "index",
    data() {
      return {
        copy_date: null,
        nav_list: [],
        company_data: [],//企业信息
        solvePlan:[],
        scensePlan:[],
        classicCase:[]
      }
    },
    mounted() {
      this.copy_date = new Date().getFullYear()
      this.getCompany()
      this.getNavList()

      this.getCompanyAllArea()
      this.getCompanySolvePlan()
      this.getClassicCase()
    },
    methods: {
      /** 提交按钮 */
      async getCompany() {
        let res = await Api.getColumnInfo();
        this.company_data = res.data
      },
      //全域旅游解决方案
      async getCompanyAllArea() {
        const params = {
          type: 3,
          infoType: 1
        }
        let res = await Apis.getColumnInfoList(params)
        this.solvePlan = res.data.list.slice(0, 6);

      },
      //智慧景区解决方案
      async getCompanySolvePlan() {
        const params = {
          type: 3,
          infoType: 2
        }
        let res = await Apis.getColumnInfoList(params)
        this.scensePlan = res.data.list.slice(0, 6);

      },
      //经典案例
      async getClassicCase() {
        const params = {
          type: 5,
        }
        let res = await Apis.getColumnInfoList(params)
        this.classicCase = res.data.list.slice(0, 6);

      },
      getNavList() {
        this.nav_list = [
          {
            title: "全域旅游", child: [
              { title: "文旅大数据中心", url: "" },
              { title: "文旅产业监测平台", url: "" },
              { title: "大数据分析平台", url: "" },
              { title: "一部手机游平台", url: "" },
              { title: "智慧导游导览系统", url: "" },
            ]
          },
          {
            title: "智慧景区", child: [
              { title: "景区综合管控平台", url: "" },
              { title: "景区票务系统", url: "" },
              { title: "衡水老白干智慧景区", url: "" },
              { title: "一部手机游平台", url: "" },
              { title: "智慧导游导览系统", url: "" },
            ]
          },
          {
            title: "经典案例", child: [
              { title: "文旅厅全域旅游" },
              { title: "老白干智慧景区" },
              { title: "沽源全域旅游" },
              { title: "沙河市农厕监管平台" },
              { title: "一部手机游平台" },
            ]
          }
        ]
      },
      // 跳转页面 函数
      gotoPages(val,type) {
        this.$router.push("/case-detail?id=" + val + "&type=" + type)
      }
    }
  }
</script>

<style scoped lang="scss">
  .cjy-bottom {
    height: 480px;
    padding-top: 80px;
    background: url("~@/assets/images/v-bottom-bg.jpg");

    .cjy-bottom-left {
      position: relative;
      width: 300px;
      padding-right: 30px;
      margin-right: 80px;


      &:after {
        content: "";
        position: absolute;
        right: 0;
        top: 0px;
        width: 1px;
        height: 250px;
        background-color: rgb(30, 56, 93)
      }

      .tel-number {
        font-weight: 600;
        font-size: 32px;
        line-height: 150%;
        color: #fff;
      }

      .tel-text {
        color: #fff;
      }

      .left-title {
        color: #fff;
        font-weight: 700;
        font-size: 16px;
      }

      .left-content {
        color: #fff;
      }
    }

    .cjy-bottom-nav {
      .nav-item {
        width: 200px;


        .item-title {
          position: relative;
          margin-bottom: 30px;
          color: #fff;
          font-weight: 700;
          font-size: 16px;

          &:after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -10px;
            width: 30px;
            height: 2px;
            border-radius: 2px;
            background-color: #fff
          }
        }

        .children-title {
          margin-top: 15px;
          color: rgba(255, 255, 255, .8);
          cursor: pointer;
        }
      }
    }

    .cjy-bottom-right {
      margin-left: 60px;

      .text {
        margin-top: 20px;
        color: #fff;
      }
    }

    .cjy-bottom-copy {
      position: relative;
      margin-top: 30px;
      padding-top: 30px;

      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0px;
        width: 100%;
        height: 1px;
        background-color: rgb(30, 56, 93)
      }

      .copy-text {
        color: #fff;
      }

      .copy-text:first-child {
        margin-right: 80px;
      }
    }
  }

  @media (max-width: 768px) {
    .cjy-bottom {
      padding: 20px 0;
      height: auto;

      .cjy-bottom-left {
        width: auto;
        margin-right: 0;
        padding-right: 0;
        text-align: center;

        &:after {
          display: none
        }
      }

      .cjy-bottom-nav {
        display: none
      }

      .cjy-bottom-right {
        display: none
      }
    }
  }
</style>