web-website/src/layout/index/law.vue

<template>
  <div id="law">
    <el-row>
      <el-col :span="24" class="top">
        <el-col :span="20" class="topTit">
          <span>{{ title }}</span>
        </el-col>
        <el-col :span="4" class="topLink">
          <el-link :underline="false"
            >more<i class="el-icon-d-arrow-right"></i
          ></el-link>
        </el-col>
      </el-col>
      <el-col :span="24" class="info">
        <el-col
          :span="24"
          class="list"
          v-for="(item, index) in lawList"
          :key="index"
        >
          <el-col :span="19" class="title">
            <p class="textOver">
              <i class="el-icon-caret-right icon"></i>{{ item.title }}
            </p>
          </el-col>
          <el-col :span="5" class="date">
            {{ item.date }}
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "law",
  props: {
    lawList: null
  },
  components: {},
  data: () => ({
    title: "政策法规"
  }),
  created() {},
  computed: {},
  methods: {}
};
</script>

<style lang="less" scoped>
p {
  padding: 0;
  margin: 0;
}
.textOver {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top {
  height: 39px;
  line-height: 39px;
  border-bottom: 1px solid #176ebb;
}
.top .topTit span {
  display: inline-block;
  width: 110px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  background-color: #176ebb;
}
.top .topLink {
  height: 39px;
  line-height: 39px;
  text-align: center;
}
.top .topLink .el-link {
  height: 39px;
  line-height: 39px;
  text-align: center;
  color: #000;
  font-size: 16px;
  text-transform: uppercase;
}
.top .topLink:hover .el-link {
  color: #a32324;
}
.list {
  padding: 8px 10px;
}
.list .title {
  font-size: 16px;
}
.list .title .icon {
  float: left;
  padding: 4px 4px;
  // color: #176ebb;
}
.list .date {
  font-size: 16px;
}
.list:hover {
  cursor: pointer;
}
.list:hover .title {
  color: #a32324;
}
.list:hover .date {
  color: #a32324;
}
</style>