<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24">
          <top :infoMes="infoMes"></top>
        </el-col>
        <el-col :span="24">
          <menus></menus>
        </el-col>
        <el-col :span="24" class="info">
          <div class="w_1200">
            <el-col :span="12" class="one">
              <el-col :span="24" class="top">
                <div class="shu"></div>
                <span class="title">政务公开</span>
              </el-col>
              <el-col :span="24" class="con1">
                <a :href="item.href1" v-for="(item, index) in links" :key="index">
                  <el-image :src="item.url" style="width: 100%; height: 100%" class="img"></el-image>
                </a>
              </el-col>
            </el-col>
            <el-col :span="12" class="two">
              <el-col :span="24" class="top">
                <div class="shu"></div>
                <span class="title">常用服务</span>
              </el-col>
              <el-col :span="24" class="con2">
                <a :href="item.href1" v-for="(item, index) in links1" :key="index">
                  <el-image :src="item.url" style="width: 100%; height: 100%" class="img"></el-image>
                </a>
              </el-col>
            </el-col>
            <el-col :span="24" class="three">
              <el-col :span="24" class="top">
                <div class="shu"></div>
                <span class="title">公众参与</span>
              </el-col>
              <el-col :span="24" class="con3">
                <a :href="item.href1" v-for="(item, index) in links2" :key="index">
                  <el-image :src="item.url" style="width: 100%; height: 100%" class="img"></el-image>
                </a>
              </el-col>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24">
          <foot :infoMes="infoMes"></foot>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import top from '../../components/common/top.vue';
import menus from '../../components/common/menus.vue';
import foot from '../../components/common/foot1.vue';
const { mapActions: siteInfo } = createNamespacedHelpers('siteInfo');

export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {
    top,
    menus,
    foot,
  },
  data: function() {
    return {
      url: '../../assets/zhengwu1.jpg',
      links: [
        {
          url: require('../../assets/zhengwu1.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/zhengwu2.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/zhengwu3.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/zhengwu4.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/zhengwu5.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/zhengwu6.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/zhengwu7.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/zhengwu8.jpg'),
          href1: '',
        },
      ],
      links1: [
        {
          url: require('../../assets/changyong1.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/changyong2.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/changyong3.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/changyong4.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/changyong5.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/changyong6.jpg'),
          href1: '',
        },
      ],
      links2: [
        {
          url: require('../../assets/gongzhong1.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/gongzhong2.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/gongzhong3.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/gongzhong4.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/gongzhong5.jpg'),
          href1: '',
        },
        {
          url: require('../../assets/gongzhong6.jpg'),
          href1: '',
        },
      ],
      //头尾信息
      infoMes: {},
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...siteInfo({ sitequery: 'query' }),
    async search() {
      const res1 = await this.sitequery();
      if (this.$checkRes(res1)) {
        this.$set(this, `infoMes`, res1.data[0]);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.info {
  margin: 10px 0px;
  .one {
    width: 595px;
    margin-right: 10px;
    height: 330px;
    background-color: #fff;
    padding: 20px;
    overflow: hidden;
    .top {
      border-bottom: 1px solid #ccc;
      padding: 5px 0px;
      .shu {
        width: 4px;
        height: 20px;
        background: #005293;
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
      }
      .title {
        display: inline-block;
        font-size: 20px;
        line-height: 23px;
        vertical-align: middle;
        color: #005293;
      }
    }
    .con1 {
      margin-top: 15px;
      a {
        display: inline-block;
        width: 130px;
        height: 115px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      a:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
  .two {
    width: 595px;
    height: 330px;
    background-color: #fff;
    padding: 20px;
    overflow: hidden;
    .top {
      border-bottom: 1px solid #ccc;
      padding: 5px 0px;
      .shu {
        width: 4px;
        height: 20px;
        background: #005293;
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
      }
      .title {
        display: inline-block;
        font-size: 20px;
        line-height: 23px;
        vertical-align: middle;
        color: #005293;
      }
    }
    .con2 {
      margin-top: 15px;
      a {
        display: inline-block;
        width: 175px;
        height: 105px;
        margin-right: 10px;
        margin-bottom: 20px;
      }
      a:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
  .three {
    height: 237px;
    padding: 20px;
    background-color: #fff;
    margin-top: 10px;
    overflow: hidden;
    .top {
      border-bottom: 1px solid #ccc;
      padding: 5px 0px;
      .shu {
        width: 4px;
        height: 20px;
        background: #005293;
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
      }
      .title {
        display: inline-block;
        font-size: 20px;
        line-height: 23px;
        vertical-align: middle;
        color: #005293;
      }
    }
    .con3 {
      margin-top: 15px;
      a {
        display: inline-block;
        width: 185px;
        height: 146px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      a:nth-child(6n) {
        margin-right: 0;
      }
    }
  }
}
</style>
