web-test/src/views/service/index.vue

<template>
  <div id="index">
    <div class="w_0100">
      <div class="w_1200">
        <div class="servicemain">
          <div class="serviceOne">
            <el-col :span="24">
              <el-col class="infoleft" :span="12">
                <el-col class="lefttop"><span class="title"> |</span> 政务公开</el-col>
                <ul>
                  <li v-for="(item, index) in zhengwuList" :key="index">
                    <a href="">
                      <el-image :src="item.pic" class="leftimage"></el-image>
                    </a>
                  </li>
                </ul>
              </el-col>
              <el-col class="inforight" :span="12">
                <el-col class="lefttop"><span class="title"> |</span> 常用服务</el-col>
                <ul>
                  <li v-for="(item, index) in serviceList" :key="index">
                    <a href="">
                      <el-image :src="item.pic" class="rightimage"></el-image>
                    </a>
                  </li>
                </ul>
              </el-col>
            </el-col>
            <div class="infocontext">
              <div class="contexttop"><span class="title"> |</span> 公众参与</div>
              <ul>
                <li v-for="(item, index) in gongzhongList" :key="index">
                  <a href="">
                    <el-image :src="item.pic"></el-image>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {},
  data: () => {
    return {
      // 政务公开
      zhengwuList: [
        {
          pic: require('@/assets/live/zhengwu1.jpg'),
        },
        {
          pic: require('@/assets/live/zhengwu2.jpg'),
        },
        {
          pic: require('@/assets/live/zhengwu3.jpg'),
        },
        {
          pic: require('@/assets/live/zhengwu4.jpg'),
        },
        {
          pic: require('@/assets/live/zhengwu5.jpg'),
        },
        {
          pic: require('@/assets/live/zhengwu6.jpg'),
        },
        {
          pic: require('@/assets/live/zhengwu7.jpg'),
        },
        {
          pic: require('@/assets/live/zhengwu8.jpg'),
        },
      ],
      // 常用服务
      serviceList: [
        {
          pic: require('@/assets/live/changyong1.jpg'),
        },
        {
          pic: require('@/assets/live/changyong2.jpg'),
        },
        {
          pic: require('@/assets/live/changyong3.jpg'),
        },
        {
          pic: require('@/assets/live/changyong4.jpg'),
        },
        {
          pic: require('@/assets/live/changyong5.jpg'),
        },
        {
          pic: require('@/assets/live/changyong6.jpg'),
        },
      ],
      // 公众参与
      gongzhongList: [
        {
          pic: require('@/assets/live/gongzhong1.jpg'),
        },
        {
          pic: require('@/assets/live/gongzhong2.jpg'),
        },
        {
          pic: require('@/assets/live/gongzhong3.jpg'),
        },
        {
          pic: require('@/assets/live/gongzhong4.jpg'),
        },
        {
          pic: require('@/assets/live/gongzhong5.jpg'),
        },
        {
          pic: require('@/assets/live/gongzhong6.jpg'),
        },
      ],
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  margin: 0 auto;
  width: 80%;
  min-height: 600px;
}
.infoleft {
  width: 48%;
  height: 320px;
  box-shadow: 0 0 10px #2d64b3;
  // width: 777px;
}
.inforight {
  margin: 0 0 0 2%;
  height: 320px;
  box-shadow: 0 0 10px #2d64b3;
  // width: 825px;
}
.lefttop {
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px 10px 20px 10px;
  font-size: 18px;
}
.title {
  padding: 0px 0 1px 1px;
  background: #005293;
}
.infoleft ul li {
  float: left;
  width: 21%;
  height: 115px;
  margin: 0 13px 10px 16px;
}

.leftimage {
  width: 100%;
  height: 100%;
}

.inforight ul li {
  float: left;
  width: 235px;

  height: 115px;
  margin: 0 13px 15px 14px;
}

.rightimage {
  width: 235px;
  height: 100px;
}
.infocontext {
  height: 237px;
  box-shadow: 0 0 10px #2d64b3;
  width: 100%;
  float: left;

  margin: 25px 0 0 0;
}
.contexttop {
  width: 98%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px 10px 20px 10px;
  font-size: 18px;
}

.infocontext ul li {
  float: left;
  width: 249px;
  height: 146px;
  margin: 0px 0px 0 17px;
}
.newimg {
  width: 249px;
  height: 152px;
}
</style>