<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="content-left">
          <div class="task-wrap">
            <div class="item">
              <img src="@/assets/images/index/icon1.png"/>
              <div>
                <p>即将开标项目</p>
                <p>36</p>
                <p>较上月 <span>+3</span></p>
              </div>
            </div>
            <div class="item">
              <img src="@/assets/images/index/icon2.png"/>
              <div>
                <p>重点关注项目</p>
                <p>36</p>
                <p>较上月 <span>+3</span></p>
              </div>
            </div>
            <div class="item">
              <img src="@/assets/images/index/icon3.png"/>
              <div>
                <p>重点关注客户</p>
                <p>36</p>
                <p>较上月 <span>+3<img src="@/assets/images/index/down.png"/></span></p>
              </div>
            </div>
            <div class="item">
              <img class="left" src="@/assets/images/index/icon4.png"/>
              <div class="right">
                <p>储备合作客户</p>
                <p>36</p>
                <p>较上月 <span>+3<img src="@/assets/images/index/up.png"/></span></p>
              </div>
            </div>
          </div>
          <div class="content-wrap">
            <el-col :span="12">
              <div class="record">2</div>
            </el-col>
            <el-col :span="12">
              <div class="ranking">3</div>
            </el-col>
          </div>
          <div class="analysis">

          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="content-right">
          <div class="user"></div>
          <div class="search"></div>
          <div class="zbgg"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.5"
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
  .app-container{
    padding: 0;
  }
  .home {
    ::v-deep .el-row{
      .el-col:nth-child(1){
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .el-col:nth-child(2){
        padding-left: 16px !important;
        padding-right: 0 !important;
      }
    }
    .content-left{
      .task-wrap{
        height: 88px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 12px;
      }
      .content-wrap{
        margin-bottom: 12px;
        height: 460px;
        .record{
          height: 460px;
          background: #FFFFFF;
          border-radius: 4px;
        }
        .ranking{
          height: 460px;
          background: #FFFFFF;
          border-radius: 4px;
        }
      }
      .analysis{
        height: 242px;
        background: #FFFFFF;
        border-radius: 4px;
      }
    }
    .content-right{
      .user{
        height: 88px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 12px;
      }
      .search{
        height: 322px;
        background: #FFFFFF;
        border-radius: 4px;
        margin-bottom: 12px;
      }
      .zbgg{
        height: 382px;
        background: #FFFFFF;
        border-radius: 4px;
      }
    }
  }
</style>

