test/src/views/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24">
        <el-col :span="24">
          <top></top>
        </el-col>
        <el-col :span="24">
          <menus></menus>
        </el-col>
        <el-col :span="24" class="main">
          <div class="w_1200">
            <el-col :span="24" class="one">
              <el-col :span="9" class="left">
                <el-image :src="map"></el-image>
                <p>创新地图提供科技企业的分布和位置信息</p>
              </el-col>
              <el-col :span="15" class="right">
                <el-col :span="24" class="top">
                  <el-col :span="20" class="topLeft">
                    <span></span>
                    <span>最新资讯</span>
                  </el-col>
                  <el-col :span="4" class="topRight">
                    <i class="el-icon-more"></i>
                  </el-col>
                </el-col>
                <el-col :span="24" class="list">
                  <el-col :span="24" class="zxzxList" v-for="(item, index) in zxzxList" :key="index">
                    <el-col :span="20" class="title textOver">
                      <span></span>
                      {{ item.title }}
                    </el-col>
                    <el-col :span="4" class="date textOver">
                      {{ item.date }}
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="two">
              <el-col :span="8" class="a">
                <el-col :span="24" class="top">
                  <el-col :span="20" class="topLeft">
                    <span></span>
                    <span>通知通告</span>
                  </el-col>
                  <el-col :span="4" class="topRight">
                    <i class="el-icon-more"></i>
                  </el-col>
                </el-col>
                <el-col :span="24" class="list">
                  <el-col :span="24" class="tztgList" v-for="(item, index) in tztgList" :key="index">
                    <el-col :span="20" class="title">
                      <span></span>
                      {{ item.title }}
                    </el-col>
                    <el-col :span="4" class="date textOver">
                      {{ item.date }}
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="8" class="a">
                <el-col :span="24" class="top">
                  <el-col :span="20" class="topLeft">
                    <span></span>
                    <span>政策法规</span>
                  </el-col>
                  <el-col :span="4" class="topRight">
                    <i class="el-icon-more"></i>
                  </el-col>
                </el-col>
                <el-col :span="24" class="list">
                  <el-col :span="24" class="tztgList" v-for="(item, index) in zcfgList" :key="index">
                    <el-col :span="20" class="title">
                      <span></span>
                      {{ item.title }}
                    </el-col>
                    <el-col :span="4" class="date textOver">
                      {{ item.date }}
                    </el-col>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="8" class="a">
                <el-col :span="24" class="top">
                  <el-col :span="20" class="topLeft">
                    <span></span>
                    <span>科技服务</span>
                  </el-col>
                  <el-col :span="4" class="topRight">
                    <i class="el-icon-more"></i>
                  </el-col>
                </el-col>
                <el-col :span="24" class="list">
                  <el-col :span="12" class="kjfwList" v-for="(item, index) in kjfwList" :key="index">
                    <el-link :underline="false" :href="item.href">
                      <el-image :src="item.url"></el-image>
                    </el-link>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="three">
              <links :linkList="linkList"></links>
            </el-col>
          </div>
        </el-col>
        <el-col :span="24">
          <foot></foot>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '@/components/common/top.vue';
import menus from '@/components/common/menus.vue';
import foot from '@/components/common/foot.vue';
import links from '@/components/common/links.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {
    top,
    menus,
    foot,
    links,
  },
  data: function() {
    return {
      // 地图
      map: require('@a/map.jpg'),
      // 最新资讯
      zxzxList: [
        {
          title: '测试标题',
          date: '2020-10-29',
        },
        {
          title: '九条数据',
          date: '2020-10-29',
        },
      ],
      // 通知通告
      tztgList: [
        {
          title: '测试标题',
          date: '10-10',
        },
        {
          title: '五条数据',
          date: '10-10',
        },
      ],
      // 政策法规
      zcfgList: [
        {
          title: '测试标题',
          date: '10-10',
        },
        {
          title: '五条数据',
          date: '10-10',
        },
      ],
      // 科技服务
      kjfwList: [
        { url: require('../assets/service1.jpg'), href: '' },
        { url: require('../assets/service2.jpg'), href: '' },
        { url: require('../assets/service3.jpg'), href: '' },
        { url: require('../assets/service4.jpg'), href: '' },
        { url: require('../assets/service5.jpg'), href: '' },
        { url: require('../assets/service6.jpg'), href: '' },
        { url: require('../assets/service7.jpg'), href: '' },
        { url: require('../assets/service8.jpg'), href: '' },
      ],
      // 友情链接
      linkList: [{ pic: require('@a/link.jpg') }, { pic: require('@a/link2.jpg') }, { pic: require('@a/link3.jpg') }, { pic: require('@a/link.jpg') }],
    };
  },
  created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.main {
  min-height: 500px;
  margin: 10px 0;
  .one {
    height: 350px;
    overflow: hidden;
    margin: 0 0 10px 0;
    .left {
      position: relative;
      height: 350px;
      background: #fff;
      margin: 0 10px 0 0;
      padding: 10px;
      .el-image {
        width: 100%;
        height: 330px;
      }
      p {
        position: absolute;
        bottom: 15px;
        width: 91%;
        color: #fff;
        padding: 0 10px;
      }
    }
    .right {
      width: 740px;
      height: 350px;
      background: #fff;
      padding: 0 20px;
      .list {
        height: 265px;
        overflow: hidden;
        .zxzxList {
          padding: 0 0 9px 0;
          .title {
            color: #555;
            span {
              display: inline-block;
              width: 4px;
              height: 4px;
              background: #666;
              border-radius: 90px;
              position: relative;
              top: -4px;
            }
          }
          .date {
            text-align: right;
            color: #555;
          }
        }
      }
    }
  }
  .two {
    height: 340px;
    overflow: hidden;
    margin: 0 0 10px 0;
    .a {
      width: 393px;
      height: 340px;
      margin: 0 10px 0 0;
      overflow: hidden;
      background: #fff;
      padding: 0 20px;
      .list {
        height: 255px;
        overflow: hidden;
        .tztgList {
          padding: 0 0 10px 0;
          .title {
            color: #555;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            height: 42px;
            span {
              display: inline-block;
              width: 4px;
              height: 4px;
              background: #666;
              border-radius: 90px;
              position: relative;
              top: -4px;
            }
          }
          .date {
            color: #555;
            text-align: right;
          }
        }
        .kjfwList {
          width: 170px;
          height: 53px;
          margin: 0 6px 15px 0;
          .el-image {
            width: 170px;
            height: 53px;
          }
        }
      }
    }
    .a:last-child {
      margin: 0;
    }
  }
  .three {
    height: 100px;
    overflow: hidden;
    background: #fff;
  }
  // 公用栏目名称样式
  .top {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #ccc;
    margin: 0 0 15px 0;
    .topLeft {
      span:nth-child(1) {
        display: inline-block;
        width: 4px;
        height: 20px;
        background: #005293;
        margin: 0px 10px 0 0;
        position: relative;
        top: 3px;
      }
      span:nth-child(2) {
        font-size: 20px;
        color: #005293;
      }
    }
    .topRight {
      text-align: right;
    }
  }
}
</style>