skl-www/src/components/foots/index.vue

<template>
  <div class="foots">
    <div class="main">
      <el-image @click="signClick(dwurl)" class="sign" :src="url"></el-image>
      <div class="info">
        <p class="itemBox itemBox1">
          <span class="item">{{ infos.record && infos.record.name }}{{ infos.record && infos.record.value }}</span>
          <span class="item gwab" @click="signClick(waurl)">
            <img @click="signClick" class="gwab" :src="gaurl" />
            {{ infos.jgwa && infos.jgwa.name }}{{ infos.jgwa && infos.jgwa.value }}
          </span>
        </p>
        <p class="itemBox itemBox2">
          <span class="item item1">{{ infos.phone && infos.phone.name }}{{ infos.phone && infos.phone.value }}</span>
          <span class="item item2">{{ infos.postalCode && infos.postalCode.name }}{{ infos.postalCode && infos.postalCode.value }}</span>
          <span class="item item3">{{ infos.address && infos.address.name }}{{ infos.address && infos.address.value }}</span>
        </p>
        <p class="itemBox itemBox1">
          <span class="item">{{ infos.title && infos.title.name }}{{ infos.title && infos.title.value }}</span>
        </p>
        <p class="itemBox itemBox1">
          <el-input size="mini" placeholder="请输入关键字" v-model="searchName" class="search">
            <el-button @click="btnSearch" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
  components: {},
  computed: {
    ...mapState(['websiteInfo']),
    infos() {
      const info = {};
      this.websiteInfo.find(e => {
        info[e.code] = e;
      });
      return info;
    }
  },
  data() {
    return {
      searchName: '',
      url: require('../../assets/sign.png'),
      gaurl: require('../../assets/gwab.png'),
      waurl: 'http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=22010502000421',
      dwurl: 'https://bszs.conac.cn/sitename?method=show&id=520E0E00E9F106D3E053022819AC70F2'
    };
  },
  async mounted() {
    await this.websiteQuery();
  },
  methods: {
    ...mapActions(['websiteQuery']),
    signClick(url) {
      window.open(url);
    },
    async btnSearch() {
      // console.log(this.searchName);
      // const search = sessionStorage.getItem('search');
      // console.log(search);
      // if (search) sessionStorage.removeItem('search');
      // sessionStorage.setItem('search', this.searchName);
      this.$router.push(`/searchList/${this.searchName}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.foots {
  width: 100%;
  height: 230px;
  background-color: #0063b4;
  color: #fff;
  .search {
    width: 30%;
    // margin: 0 auto;
  }
  .main {
    width: 50%;
    display: flex;
    margin: 0 auto;
    padding-top: 2%;
    .sign {
      width: 80px;
      height: 80px;
      margin-top: 10px;
    }
    .info {
      width: 90%;
      margin-left: 20px;
      // display: flex;
      .itemBox {
        display: flex;
        .item {
          display: block;
          width: 50%;
          text-align: left;
          .gwab {
            vertical-align: middle;
          }
        }
        .item1 {
          width: 30%;
        }
        .item2 {
          width: 20%;
        }
        .item3 {
          width: 50%;
        }
      }
    }
  }
}
</style>