<template>
  <div class="wrapper">
    <header-nav :index_num="index_num"></header-nav>
    <div id="box">
      <!-- 公告 -->
      <div class="top">
        <img :src="imgUrl.xlb"
             alt />
        <div>
          <span>世界婚博会已通过初审</span>
          <time>[2019-07-31]</time>
        </div>
      </div>
      <div class="bottom">
        <!-- 表格 -->
        <div class="table">
          <div class="top-p">项目概览</div>
          <div class="top-b">
            <div>
              <section>
                <span>初筛通过</span>
                <span>10</span>
              </section>
            </div>
            <div>
              <section>
                <span>立项通过</span>
                <span>10</span>
              </section>
            </div>
            <div>
              <section>
                <span>执行中</span>
                <span>10</span>
              </section>
            </div>
            <div>
              <section>
                <span>已完结</span>
                <span>10</span>
              </section>
            </div>
          </div>
        </div>
        <!-- 下拉框 -->
        <div class="select">
          <select class="one"
                  name="date">
            <option value>2017/10/14 至 2017/10/15</option>
            <option value>2017/10/14 至 2017/10/15</option>
          </select>
          <select class="two"
                  name="type">
            <option value>类型1</option>
            <option value>类型2</option>
          </select>
          <select class="three"
                  name="area">
            <option value>区域1</option>
            <option value>区域2</option>
          </select>
          <span @click="$jump('application')">项目申报</span>
        </div>
        <!-- container -->
        <div class="con">
          <!-- 导航 -->
          <div class="top-t">
            <h3 @click="btn(index)"
                v-for="(item,index) in text"
                :key="index"
                :class="sub == index ? 'style' : ''">{{item}}</h3>
          </div>
          <!-- 主题内容 -->
          <div class="cc">
            <template v-for="(item,index) in sData">
              <div class="list"
                   :key="index"
                   v-if="index < 9"
                   @click="$jump('schedule')">
                <div class="div">
                  <div class="bb">
                    <h3>世界婚博会</h3>
                    <h5>活动</h5>
                  </div>
                  <time>2019-07-19</time>
                </div>
                <dl>
                  <dt>
                    <img :src="imgUrl.tg"
                         v-if="item.state == 0" />
                    <img :src="imgUrl.btg"
                         v-if="item.state == 1" />
                    <img :src="imgUrl.shz"
                         v-if="item.state == 2" />
                    <img :src="imgUrl.zxz"
                         v-if="item.state == 3" />
                  </dt>
                  <dd>
                    <span class="iconfont icon-zuzhijiegou"></span>
                    <span>朝阳社会组织</span>
                  </dd>
                  <dd>
                    <span class="iconfont icon-weizhi"></span>
                    <span>北京市朝阳区建外街道</span>
                  </dd>
                  <dd>
                    <span class="iconfont icon-shenhetongguo1"></span>
                    <span>当前申报阶段：立项审核中</span>
                  </dd>
                </dl>
              </div>
            </template>
          </div>
        </div>
        <!-- 分页按钮 -->
        <div class="page">
          <el-pagination @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page="currentPage"
                         :page-size="pageSize"
                         background
                         layout="prev, pager, next"
                         :total="10"></el-pagination>
        </div>
      </div>
    </div>
    <footer-nav class="footer"></footer-nav>
  </div>
</template>

<script>
/* eslint-disable */
import HeaderNav from "../../components/HeaderNav";
/* eslint-disable */
import FooterNav from "../../components/FooterNav";
export default {
  components: {
    HeaderNav,
    FooterNav
  },
  props: {},
  data() {
    return {
      index_num: 2,
      pageSize: 1,
      currentPage: 1,
      totalCount: 1,
      imgUrl: {
        xlb: require("../../../static/img/xlb.png"),
        tg: require("../../../static/img/tg.png"),
        btg: require("../../../static/img/btg.png"),
        shz: require("../../../static/img/shz.png"),
        zxz: require("../../../static/img/zxz.png")
      },
      text: ["全部", "项目初筛", "项目立项"],
      sub: 0,
      sData: [
        { state: 0 },
        { state: 0 },
        { state: 0 },
        { state: 1 },
        { state: 1 },
        { state: 2 },
        { state: 3 },
        { state: 3 },
        { state: 2 },
        { state: 0 }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    btn(index) {
      let s = this.sub;
      s = index;
      this.sub = s;
    },
    handleSizeChange(val) {
      this.pageNum = val;
      this.getPackData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPackData();
    },
    getPackData() {}
  },
  created() {
    this.currentPage = Number(localStorage.getItem("pagination")) || 1;
    this.handleCurrentChange(this.currentPage);
  },
  mounted() {}
};
</script>

<style lang='scss' scoped>
.wrapper {
  width: 1280px;
  box-sizing: border-box;

  .footer {
    margin-top: 80px;
  }

  #box {
    margin: 0 auto;
    width: 1200px;
    box-sizing: border-box;

    .bottom {
      padding: 35px 30px 0px;
      box-sizing: border-box;
      width: 1200px;
      height: 1320px;
      background-color: #ffffff;

      .page {
        margin-top: 60px;
        height: 36px;
        display: flex;
        justify-content: flex-end;
        align-items: center;

        /deep/ .el-pagination.is-background .el-pager li {
          color: #333 !important;
        }

        /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
          background-color: #e60012;
          color: #fff !important;
        }

        /deep/ .el-icon.el-icon-arrow-left::before {
          content: "上一页";
          font-family: "MicrosoftYaHei";
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #666;
        }

        /deep/ .el-pagination .btn-prev {
          width: 80px;
        }

        /deep/ .el-pagination .btn-next {
          width: 80px;
        }

        /deep/ .el-icon.el-icon-arrow-right::before {
          content: "下一页";
          font-family: "MicrosoftYaHei";
          font-size: 12px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #666;
        }
      }

      .con {
        width: 1140px;
        height: 773px;

        .cc {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: flex-start;

          .list {
            margin-bottom: 60px;
            width: 367px;
            height: 184px;
            background-color: #ffffff;
            box-shadow: 0px 19px 21px 3px rgba(145, 142, 142, 0.1);
            border-radius: 10px;
            padding: 19px 29px 0px 16px;
            box-sizing: border-box;

            dl {
              width: 100%;
              height: 97px;
              margin-top: 25px;
              position: relative;

              dd {
                margin-bottom: 22px;
                .iconfont {
                  font-size: 17px;
                  color: #ccc;
                  margin-right: 16px;
                }
                span {
                  font-family: "MicrosoftYaHei";
                  font-size: 14px;
                  font-weight: normal;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #666666;
                }
              }

              dt {
                img {
                  position: absolute;
                  right: -8.5%;
                  bottom: -26%;
                  width: 119px;
                  height: 95px;
                }
              }
            }

            .div {
              width: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              time {
                font-family: "MicrosoftYaHei";
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #999999;
              }
              .bb {
                display: flex;
                justify-content: center;
                align-items: center;
                h5 {
                  margin-left: 6px;
                  height: 18px;
                  color: #f6ad35;
                  text-align: center;
                  line-height: 18px;
                  border: 1px solid #f6ad35;
                  border-radius: 4px;
                  font-size: 12px;
                }
                h3 {
                  font-family: "MicrosoftYaHei";
                  font-size: 16px;
                  font-weight: normal;
                  font-stretch: normal;
                  letter-spacing: 0px;
                  color: #333333;
                }
              }
            }
          }
        }

        .top-t {
          width: 1140px;
          height: 38px;
          padding-left: 12px;
          box-sizing: border-box;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          border-bottom: 1px solid #ccc;
          margin-bottom: 60px;

          h3 {
            text-align: center;
            margin-right: 78px;
            width: 90px;
            font-family: "MicrosoftYaHei";
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333;
          }

          .style {
            color: #e60012;
            position: relative;
            &::after {
              content: "";
              width: 91px;
              height: 2px;
              background-image: linear-gradient(#e60012, #e60012),
                linear-gradient(#ff7f7f, #ff7f7f);
              background-blend-mode: normal, normal;
              position: absolute;
              left: 0%;
              bottom: -94%;
            }
          }
        }
      }

      .select {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 50px;
        margin-bottom: 50px;

        .one {
          padding-left: 30px;
          box-sizing: border-box;
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 280px center no-repeat;
          background-size: 14px 8px;
          width: 325px;
          height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
          outline: none;
          font-size: 18px;
          color: #666;
        }

        .two {
          padding-left: 30px;
          box-sizing: border-box;
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 90px center no-repeat;
          background-size: 14px 8px;
          width: 134px;
          height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
          outline: none;
          font-size: 18px;
          color: #666;
        }

        .three {
          padding-left: 30px;
          box-sizing: border-box;
          /* 清除默认的箭头样式 */
          appearance: none;
          -moz-appearance: none;
          -webkit-appearance: none;
          /* 右侧添加小箭头的背景图 */
          background: url("../../../static/img/xa.png") 90px center no-repeat;
          background-size: 14px 8px;
          width: 134px;
          height: 38px;
          background-color: #f9f8f8;
          border-radius: 4px;
          border: solid 1px #c7c7c7;
          outline: none;
          font-size: 18px;
          color: #666;
        }
        span {
          display: inline-block;
          text-align: center;
          line-height: 32px;
          width: 96px;
          height: 32px;
          background-image: linear-gradient(
              69deg,
              #cc263f 0%,
              #f42b47 100%,
              #ed162d 100%,
              #e60012 100%
            ),
            linear-gradient(#e60012, #e60012);
          background-blend-mode: normal, normal;
          border-radius: 4px;
          font-family: "MicrosoftYaHei";
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #ffffff;
        }
      }

      .table {
        width: 1137px;
        height: 181px;
        border: solid 1px #dadada;
        background-color: #f6f6f6;
        box-sizing: border-box;

        .top-b {
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          div {
            width: 283px;
            height: 139px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

            section {
              width: 72px;
              height: 67px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;

              span:first-child {
                font-family: "MicrosoftYaHei";
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #666666;
              }

              span:last-child {
                font-family: "MicrosoftYaHei";
                font-size: 24px;
                font-weight: bold;
                font-stretch: normal;
                letter-spacing: 0px;
                color: #e60012;
              }
            }
          }
        }

        .top-p {
          font-family: "MicrosoftYaHei";
          font-size: 18px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #333333;
          width: 1136px;
          height: 40px;
          background-color: #f6f6f6;
          text-align: center;
          line-height: 40px;
          border-bottom: 1px solid #dadada;
          border-right: 1px solid #dadada;
          box-sizing: border-box;
        }
      }
    }

    .top {
      width: 732px;
      height: 40px;
      margin: 30px 0 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 33px;
        height: 27px;
      }
      div {
        width: 672px;
        height: 21px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0px;
          color: #666666;
        }

        time {
          font-family: "MicrosoftYaHei";
          font-size: 20px;
          font-weight: normal;
          letter-spacing: 0px;
          color: #999999;
        }
      }
    }
  }
}
</style>