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 :span="12" class="infoleft">
                <el-col class="lefttop" :span="24"><span class="title"> |</span> 本地服务</el-col>
                <ul>
                  <li class="zhengwuList" v-for="(item, index) in zhengwuList" :key="index">
                    <a @click="$router.push({ path: '/live/service/list', query: { name: item.title } })">
                      <el-image style="width:64px;height:64px;" :src="item.pic"></el-image>
                      <p>{{ item.title }}</p>
                    </a>
                  </li>
                </ul>
              </el-col>
              <el-col :span="12" class="inforight">
                <div class="lefttop"><span class="title"> |</span> 合作服务</div>
                <ul>
                  <li class="serviceList" v-for="(item, index) in serviceList" :key="index">
                    <a>
                      <el-image style="width:64px;height:64px;" :src="item.pic"></el-image>
                      <p>{{ item.title }}</p>
                    </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 { createNamespacedHelpers, mapGetters, mapState } from 'vuex';
export default {
  name: 'index',
  props: {},
  components: {},
  data: () => {
    return {
      // 本地服务
      zhengwuList: [
        {
          pic: require('@/assets/live/bendi1.png'),
          title: '智慧推荐',
        },
        {
          pic: require('@/assets/live/bendi2.png'),
          title: '展会管理',
        },
        {
          pic: require('@/assets/live/bendi3.png'),
          title: '科技评估',
        },
        {
          pic: require('@/assets/live/bendi4.png'),
          title: '合同在线',
        },
        {
          pic: require('@/assets/live/bendi5.png'),
          title: '信誉认证',
        },
        {
          pic: require('@/assets/live/bendi6.png'),
          title: '绩效评价',
        },
      ],
      // 合作服务
      serviceList: [
        {
          pic: require('@/assets/live/hezuo1.png'),
          title: '知识产权',
        },
        {
          pic: require('@/assets/live/hezuo2.png'),
          title: '科技文献',
        },
        {
          pic: require('@/assets/live/hezuo3.png'),
          title: '项目申报',
        },
        {
          pic: require('@/assets/live/hezuo4.png'),
          title: '科技金融',
        },
        {
          pic: require('@/assets/live/hezuo5.png'),
          title: '科技孵化',
        },
        {
          pic: require('@/assets/live/hezuo6.png'),
          title: '成果登记',
        },
        {
          pic: require('@/assets/live/hezuo7.png'),
          title: '技术合同',
        },
        {
          pic: require('@/assets/live/hezuo8.png'),
          title: '高企认定',
        },
      ],
      // 公众参与
      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: {
    bendiservice(item) {
      console.log(item);
    },
  },
  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;
}
.serviceOne {
  margin: 20px 0 0 0;
}
.infoleft {
  height: 320px;
  box-shadow: 0 0 10px #2d64b3;
  width: 49%;
}
.infoleft ul .zhengwuList {
  float: left;
  width: 25%;
  height: 115px;
  margin: 0 5% 15px 3%;
  text-align: center;
}
.infoleft ul .zhengwuList p {
  font-size: 20px;
  color: #215199;
  float: left;
  width: 100%;
}
.inforight {
  height: 320px;
  box-shadow: 0 0 10px #2d64b3;
  width: 49.5%;
  margin: 0 0 0 15px;
}
.inforight ul .serviceList {
  float: left;
  width: 17%;
  height: 105px;
  margin: 0 5% 20px 3%;
  text-align: center;
  background: #f8f8f8;
}
.inforight ul .serviceList .el-image {
  padding: 5px 0 0 0;
}
.inforight ul .serviceList p {
  font-size: 20px;
  color: #215199;
  float: left;
  width: 100%;
}

.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: 20%;
  height: 115px;
  margin: 0 2% 10px 3%;
}
.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: 15.66%;
  height: 146px;
  margin: 0px 0px 0 1%;
}
.newimg {
  width: 185px;
}
</style>