<template>
  <div id="partisan">
    <el-row>
      <el-col :span="24" class="style">
        <el-col :span="24" class="top">
          <top></top>
        </el-col>
        <el-col :span="24" class="menu">
          <div class="w_1200">
            <menus></menus>
          </div>
        </el-col>
      </el-col>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="images">
            <el-carousel indicator-position="outside" height="380px" width="590px">
              <el-carousel-item
                v-for="(item, index) in ruleList"
                :key="index"
                @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '图片新闻', id: 'id', display: '1' } })"
                class="ruleList"
              >
                <el-image :src="item.img_url"></el-image>
                <p class="textOver">{{ item.title }}</p>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="12" class="right">
            <el-col :span="24" class="infoTop">
              <span>|</span><span>党建工作</span
              ><span @click="$router.push({ path: '/partisan/listDetail', query: { col_name: '党建工作', display: '0' } })">MORE</span>
            </el-col>
            <el-col
              :span="24"
              class="info"
              v-for="(item, index) in workList"
              :key="index"
              @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '党建工作', id: 'id', display: '1' } })"
            >
              <span></span><span class="textOver">{{ item.title }}</span
              ><span>{{ item.publish_time }}</span>
            </el-col>
          </el-col>
          <el-col :span="12" class="left">
            <el-col :span="24" class="infoTop">
              <span>|</span><span>学习园地</span
              ><span @click="$router.push({ path: '/partisan/listDetail', query: { col_name: '学习园地', display: '0' } })">MORE</span>
            </el-col>
            <el-col
              :span="24"
              class="info"
              v-for="(item, index) in stuList"
              :key="index"
              @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '学习园地', id: 'id', display: '1' } })"
            >
              <span></span><span class="textOver">{{ item.title }}</span
              ><span>{{ item.publish_time }}</span>
            </el-col>
          </el-col>
          <el-col :span="12" class="right">
            <el-col :span="24" class="infoTop">
              <span>|</span><span>党风廉政</span
              ><span @click="$router.push({ path: '/partisan/listDetail', query: { col_name: '党风廉政', display: '0' } })">MORE</span>
            </el-col>
            <el-col
              :span="24"
              class="info"
              v-for="(item, index) in politicsList"
              :key="index"
              @click.native="$router.push({ path: '/partisan/listDetail', query: { col_name: '党风廉政', id: 'id', display: '1' } })"
            >
              <span></span><span class="textOver">{{ item.title }}</span
              ><span>{{ item.publish_time }}</span>
            </el-col>
          </el-col>
        </div>
      </el-col>
      <el-col :span="24" class="foot">
        <div class="w_1200">
          <foot></foot>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import top from '@/layout/common/top.vue';
import menus from '@/layout/common/menus.vue';
import foot from '@/layout/common/foot.vue';
export default {
  name: 'partisan',
  props: {},
  components: { top, menus, foot },
  data: () => ({
    // 图片新闻
    ruleList: [
      {
        title: '标题',
        img_url: require('@/assets/123.jpg'),
      },
    ],
    // 党建工作
    workList: [
      {
        title: '标题',
        publish_time: '2020-05-23',
      },
      {
        title: '八条数据',
        publish_time: '2020-05-23',
      },
    ],
    // 学习园地
    stuList: [
      {
        title: '标题',
        publish_time: '2020-05-23',
      },
      {
        title: '八条数据',
        publish_time: '2020-05-23',
      },
    ],
    // 党风廉政
    politicsList: [
      {
        title: '标题',
        publish_time: '2020-05-23',
      },
      {
        title: '八条数据',
        publish_time: '2020-05-23',
      },
    ],
  }),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 1200px;
  margin: 0 auto;
}
.main {
  min-height: 600px;
  overflow: hidden;
  margin: 10px 0;
}
.left {
  background-color: #ffffff;
  float: left;
  height: 400px;
  width: 595px;
  margin: 0 10px 10px 0;
}
.right {
  background-color: #ffffff;
  float: right;
  height: 400px;
  width: 595px;
  margin: 0 0 10px 0;
}
.infoTop {
  height: 50px;
  border-bottom: 1px dashed #ccc;
  margin: 0 auto;
  float: none;
  width: 560px;
  padding: 20px 0 5px 0;
}
.infoTop span {
  font-size: 20px;
  color: #005293;
  font-weight: bold;
  margin-right: 10px;
}
.infoTop span:last-child {
  float: right;
  font-size: 18px;
  font-weight: 400;
  color: #005293;
  margin: 0;
}
.info {
  margin: 0 auto;
  float: none;
  width: 560px;
  height: 42px;
  cursor: pointer;
}
.info span:first-child {
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #ccc;
  display: inline-block;
  margin: 20px 10px 20px 0;
}
.info span:nth-child(2) {
  padding: 15px 0;
  font-size: 16px;
  color: #444444;
  font-family: '微软雅黑';
  overflow: hidden;
  width: 420px;
  display: inline-block;
}
.info span:last-child {
  float: right;
  text-align: right;
  width: 100px;
  font-size: 16px;
  color: #777777;
  font-family: '微软雅黑';
  margin: 10px 0;
}
.images {
  height: 390px;
  width: 590px;
  margin: 10px auto;
  float: left;
  margin: 0 10px 20px 0;
}
.images .el-image {
  width: 100%;
  height: 100%;
  position: relative;
}
.images p {
  width: 98%;
  height: 50px;
  position: absolute;
  background-color: #0000004f;
  color: #ffffff;
  font-size: 16px;
  top: 340px;
  padding: 7px;
}
.foot {
  height: 135px;
}
</style>
