web-common/src/layout/master/index/other.vue

<template>
  <div id="other">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="infoone">
          <el-col :span="24" class="infoonebei">
            <span>03其他</span>
          </el-col>
        </el-col>
        <el-col :span="24" class="infoonelist">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in otherList" :key="index" label="事业单位" :name="`${index}`">
              <el-col :span="24" class="list">
                <el-col :span="24" class="listinfo" v-for="(item, index) in danweilist" :key="index">
                  <el-col :span="21">
                    <span class="qiu"></span>
                    <el-link :underline="false">
                      <p class="title">{{ item.title }}</p>
                    </el-link>
                  </el-col>
                  <el-col :span="3" class="date">
                    {{ item.date }}
                  </el-col>
                </el-col>
              </el-col>
            </el-tab-pane>
          </el-tabs>
          <el-link :underline="false" class="add"><i class="el-icon-plus"></i></el-link>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'other',
  props: {
    otherList: null,
  },
  components: {},
  data: () => ({
    activeName: 'first',
  }),
  created() {},
  computed: {},
  methods: {
    handleClick(tab, event) {
      // eslint-disable-next-line no-console
      console.log(tab, event);
    },
  },
};
</script>

<style lang="less" scoped>
p {
  margin: 0;
  padding: 0;
}
.infoone {
  height: 476px;
}
.infoonebei {
  width: 294px;
  height: 476px;
  background: #415285;
}
.infoonebei span {
  display: inline-block;
  width: 294px;
  text-align: center;
  height: 108px;
  line-height: 108px;
  font-size: 42px;
  color: #fff;
}
.infoonelist {
  width: 1130px;
  height: 348px;
  background: #fff;
  position: absolute;
  top: 100px;
  left: 71px;
  box-shadow: 0px 0px 5px #ccc;
}
.add {
  position: absolute;
  top: 40px;
  right: 20px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.add .el-link--inner {
  font-size: 30px;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs__nav-wrap {
  height: 90px;
}
/deep/.el-tabs__item {
  font-size: 26px;
  height: 90px;
  line-height: 112px;
}
/deep/.el-tabs__item.is-active {
  color: #415285;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
/deep/.el-tabs__active-bar {
  background-color: #415285;
  height: 4px;
}
/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 20px;
}
.list {
  height: 259px;
  overflow: hidden;
}
.listinfo {
  padding: 26px 0 0 0;
}
.list .qiu {
  display: inline-block;
  width: 4px;
  height: 5px;
  background: #999;
  margin: 0 5px 0 25px;
}
.list .title {
  font-size: 24px;
  color: #000;
}
.list .date {
  font-size: 24px;
  color: #999;
}
</style>