shujuju/ruoyi-ui/src/views/index.vue

<template>
  <div class="app-container home">
    <el-row :gutter="5">
      <el-col :sm="24" :lg="17" style="padding-left: 15px">
        <div class="index_heade">
          <img src="../assets/images/icon_more.png" alt="" class="index_headerImg">
          <p class="index_headetab">
            <span :class="[num == index ? ' spanto' : '']" v-for="(item,index) in editableTabs" :key="index" @click="tabSbu(index)">{{item.title}}</span>
          </p>
                <div v-if="num == 0">
                  <ul class="index_headerUl">
                    <li>
                        <img src="../assets/images/icon_list_sj.png" alt="">
                        <p>国家统计局：3月份商品住宅销售价格涨幅总体稳定</p>
                        <span>03/06</span>
                    </li>
                    <li>
                        <img src="../assets/images/icon_list_sj.png" alt="">
                        <p>国家统计局：3月份商品住宅销售价格涨幅总体稳定</p>
                        <span>03/06</span>
                    </li>
                    <li>
                        <img src="../assets/images/icon_list_sj.png" alt="">
                        <p>国家统计局：3月份商品住宅销售价格涨幅总体稳定</p>
                        <span>03/06</span>
                    </li>
                    <li>
                        <img src="../assets/images/icon_list_sj.png" alt="">
                        <p>国家统计局：3月份商品住宅销售价格涨幅总体稳定</p>
                        <span>03/06</span>
                    </li>
                    <li>
                        <img src="../assets/images/icon_list_sj.png" alt="">
                        <p>国家统计局：3月份商品住宅销售价格涨幅总体稳定</p>
                        <span>03/06</span>
                    </li>
                    <li>
                        <img src="../assets/images/icon_list_sj.png" alt="">
                        <p>国家统计局：3月份商品住宅销售价格涨幅总体稳定</p>
                        <span>03/06</span>
                    </li>
                  </ul>
                  <div class="index_haderPagin">
                    <el-pagination
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="currentPage3"
                         :page-size="pageSize"
                         layout="prev, pager, next, jumper"
                         :total="1000">
                    </el-pagination>
                    <span>共 85 条  每页显示 5 条  当前 1/17 页</span>
                  </div>
                </div>
        </div>
        <!-- 列表 -->
          <el-col :sm="24" :lg="24"  style="margin-top: 20px;">
               <div class="index_heade index_headeNav">
                 <img src="../assets/images/icon_more.png" alt="" class="index_headerImg">
                 <p class="index_headetab">
                   <span :class="[num == index ? ' spanto' : '']" v-for="(item,index) in editableTabs" :key="index" @click="tabSbu(index)">{{item.title}} <p class="tab_i">3</p></span></span>
                 </p>
                 <!-- <el-tabs v-model="activeName" @tab-click="handleClick" > -->
                     <!-- <el-tab-pane  name="first">
                        <span slot="label" class="index_heseviewed"><p class="tab_i">3</p> 我的行程</span> -->
                         <div v-if="num == 0">
                           <el-table :data="tableData" style="width: 100%;margin-top: 10px;"  :stripe="true"   >
                                   <!-- <el-table-column type="selection" width="55" align="center" /> -->
                                   <el-table-column label="序号" align="center" prop="noticeId" width="60" height="53" max-height="53" />
                                  <el-table-column
                                    label="申请人"
                                    align="center"
                                    prop="name"
                                    :show-overflow-tooltip="true"
                                    width="70"
                                  />
                                  <el-table-column
                                    label="部门"
                                    align="center"
                                    prop="name"
                                    :formatter="typeFormat"
                                    width="70"
                                  />
                                  <el-table-column
                                    label="请假类型"
                                    align="center"
                                    prop="status"
                                    :formatter="statusFormat"
                                    width="75"
                                  />
                                  <el-table-column label="请假事由" align="center" prop="createBy" width="100"  :show-overflow-tooltip="true"/>
                                  <el-table-column label="请假时间" align="center" prop="date" width="150"/>
                                    <!-- <template slot-scope="scope">
                                      <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                                    </template> -->
                                  <!-- </el-table-column> -->
                                  <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                                    <template slot-scope="scope">
                                      <el-button
                                        size="small"
                                        type="success"
                                        @click="handleUpdate(scope.row)"
                                        v-hasPermi="['system:notice:edit']"

                                      >详情</el-button>
                                      <el-button
                                        size="small"
                                        type="primary"
                                        @click="handleDelete(scope.row)"
                                        v-hasPermi="['system:notice:remove']"
                                      >同意</el-button>
                                      <el-button
                                        size="small"
                                        type="danger"
                                        @click="handleDelete(scope.row)"
                                        v-hasPermi="['system:notice:remove']"
                                      >驳回</el-button>
                                    </template>
                                  </el-table-column>
                                 </el-table>
                           <div class="index_haderPagin">
                             <el-pagination
                                  @size-change="handleSizeChange"
                                  @current-change="handleCurrentChange"
                                  :current-page.sync="currentPage3"
                                  :page-size="pageSize"
                                  layout="prev, pager, next, jumper"
                                  :total="1000">
                             </el-pagination>
                             <span>共 85 条  每页显示 5 条  当前 1/17 页</span>
                           </div>
                         </div>

               </div>
          </el-col>
        <!-- </el-row> -->
        <!-- 公司概况 -->
        <el-col :sm="24" :lg="24">
           <div class="index_heade  index_headeProfile">
             <img src="../assets/images/icon_tjbj.png" alt="" class="index_headerImg">
            <p class="index_headetab">
              <span :class="[num == index ? ' spanto' : '']" v-for="(item,index) in editableTabs" :key="index" @click="tabSbu(index)">{{item.title}} </span>
            </p>
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                 <el-tab-pane label="用户管理" name="first"> -->
                   <div v-if="num == 0">
                     <h3 style="text-align: center;">北京凯特伟业科技有限公司</h3>
                                      <p class="index_profilep">	北京凯特伟业科技有限公司，是HBP集团（股票代码002554）下属全资子公司，主营业务互联网软件服务。公司拥有十余年软件开发经验，其案例遍布能源、通信、金融 、医疗、养老 、制造业等各行业。主要产品有JEPLUS软件开发平台、蒜瓣企业管理系统等，并提供saas服务。
                     蒜瓣产品支持SAAS（即当前软件发展最流行的多租户模式，例如钉钉）和定制两种模式。一般企业不需要购买任何硬件，刚开始只需要简单注册即可，企业无需再配备IT方面的专业技术人员，同时又能得到最新的技术应用，满足企业对信息管理的需求；大型企业有专业化需求时，可采用定制模式。</p>
                                      <div class="index_haderPagin">
                                        <el-pagination
                                             @size-change="handleSizeChange"
                                             @current-change="handleCurrentChange"
                                             :current-page.sync="currentPage3"
                                             :page-size="pageSize"
                                             layout="prev, pager, next, jumper"
                                             :total="1000">
                                        </el-pagination>
                                        <span>共 85 条  每页显示 5 条  当前 1/17 页</span>
                                      </div>
                   </div>
                <!-- </el-tab-pane>
                 <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                 <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                 <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
             </el-tabs> -->

           </div>
        </el-col>
      </el-col>

      <el-col :sm="24" :lg="7" style="padding-left: 15px">
         <div class="index_nav">
          <div class="index_navTime">
            <p class="index_navTimep">
              <span>日程</span>
              <span><i class="el-icon-date"></i>创建日程</span>
            </p>
            <el-calendar v-model="value">
            </el-calendar>
            <img src="../assets/images/pic_kpbg.png" alt="" class="index_navTimeimg">
          </div>
         </div>
         <!-- 备忘录 -->
         <el-col :sm="24" :lg="24" >
           <div class="index_nav index_memoranduNnavTime">
            <div class="index_navTime ">
              <p class="index_navTimep">
                <span>日程</span>
                <span><i class="el-icon-date"></i>创建日程</span>
              </p>
              <ul >
                <li v-for="(index,item) in 6" :key="index">
                  <p>今日的工作安排</p>
                  <span>01-24</span>
                </li>

              </ul>
              <img src="../assets/images/icon_more.png" alt="">
<!--              <el-calendar v-model="value">
              </el-calendar> -->

              <img src="../assets/images/pic_kpbg.png" alt="" class="index_navTimeimg">
            </div>
           </div>
         </el-col >
         <!-- 通讯录 -->
         <el-col :sm="24" :lg="24">
           <div class="index_nav index_memoranduMail">
                       <div class="index_navTime ">
                         <p class="index_navTimep">
                           <span>通讯录</span>
                           <img src="../assets/images/icon_more.png" alt="" class="index_navTimeimgtwo">
                           <!-- <span><i class="el-icon-date"></i>创建日程</span> -->
                         </p>
                        <div class="index_memoranduMailnav">
                          <el-table :data="tableData" style="width: 100%;margin-top: 10px;"  :stripe="true"  >
                                  <!-- <el-table-column type="selection" width="55" align="center" /> -->
                                  <!-- <el-table-column label="序号" align="center" prop="noticeId" width="60" height="53" max-height="53" /> -->
                                 <el-table-column
                                   label="申请人"
                                   align="center"
                                   prop="name"
                                   :show-overflow-tooltip="true"
                                   style="height: 38px;"
                                 />
                                 <el-table-column
                                   label="部门"
                                   align="center"
                                   prop="name"
                                   :formatter="typeFormat"
                                   style="height: 38px;"
                                 />
                                 <el-table-column
                                   label="请假类型"
                                   align="center"
                                   prop="status"
                                   :formatter="statusFormat"
                                   style="height: 38px;"
                                 />

                                </el-table>
                          <div class="index_haderPagin index_haderPaginfoiu">
                            <el-pagination
                                 @size-change="handleSizeChange"
                                 @current-change="handleCurrentChange"
                                 :current-page.sync="currentPage3"
                                 :page-size="pageSize"
                                 :small= "true"
                                 layout="prev, pager, next, jumper"
                                 :total="1000">
                            </el-pagination>
                          </div>
                        </div>
                      <img src="../assets/images/pic_kpbg.png" alt="" class="index_navTimeimg">
                       </div>
            </div>
         </el-col>


      </el-col>
    </el-row>
    <!-- <el-divider /> -->

  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      // 版本号
      version: "2.5.0",
       currentPage3: 1,
       pageSize:10,
       activeName: 'second',
        value: new Date(),
        editableTabs: [{
                 title: 'Tab 1',
                 name: '1',
                 content: 'Tab 1 content'
               }, {
                 title: 'Tab 2',
                 name: '2',
                 content: 'Tab 2 content'
               }],
      num:0
    };
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
     handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
      },
    handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
      },
    handleClick(tab, event) {
              console.log(tab, event);
      },
      // tab点击
    tabSbu(index){
     this.num = index
    }
  },
};
</script>

<style lang="scss">
  .home{
    .el-tabs__header{
     margin-bottom: 5px !important;
    }
    .el-calendar-table tr td:first-child{
      border: 0 !important;
    }
    .el-calendar-table tr:first-child td{
      border: 0 !important;
    }
    .el-calendar-table td{
      border: 0 !important;
    }
    .el-calendar-table .el-calendar-day{
      height: 30px;
      text-align: center;
      line-height: 30px;
      border-radius: 30px;
      padding: 0;
      // background-color: #0B18E8;
    }
    .el-calendar-table td.is-selected{
      // background-color: #0B18E8;
       border-radius: 30px;
    }
    .el-calendar__header{
      border: 0;
      padding: 0 20px;
    }
    .el-calendar__body{
      padding-top: 0;
      padding-bottom: 0;
    }
    .el-pagination{
      padding-left: 0;
    }
    .index_headeNav{
      .el-tabs__item{
        position: relative;
      }
    }
    .el-table th.is-leaf, .el-table td{
       border: 0 !important;
    }
    .el-calendar__title{
      font-size: 12px;
    }
     .el-table td{
       padding:  6px 0;
     }
     .index_haderPaginfoiu{
       .el-pagination__jump{
         display: block !important;
         text-align: center;
         margin-left: 0;
       }
     }

  }
</style>


<style scoped lang="scss">
.home {
  // tab
  .index_headetab{
    display: flex;
    border-bottom: 1px solid #E5E5E5;
    height: 53px;
    padding-top: 10px;
    padding-bottom: 10px;
   span{
     width: 70px;
     text-align: center;
     line-height: 43px;
     height: 43px;
     font-size: 15px;
     font-family: PingFang SC;
     font-weight: bold;
     color: #666;
     position: relative;
     // flex: 1;
     // border-bottom: ;
   }
   .span{
     content: '';
     display: block;
     width: 18px;
     height: 8px;
     border-radius: 3px;
     background-color: #3C8DBC;
     color: #3C8DBC !important;
     // position: absolute;
     // border-bottom: ;
   }
  .spanto{
    color:#3C8DBC ;
    border-bottom: 3px solid #3C8DBC;
  }
  }
  p{
    margin: 0;

  }
  ul{
    margin: 0;
    padding: 0;
  }
  background-color: #eef0ff;
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  .index_heade{
    // border: 1px solid #eee;
    // width: 100%;
    padding: 0 20px;
    height: 386px;
    background-color: #fff;
    position: relative;
    border-radius: 6px;
    .index_headerImg{
      width: 23px;
      height: 6px;
      position: absolute;
      right: 20px;
      top:25px;
    }
    .index_headerUl{
      width: 100%;
      padding: 0;
      margin: 0;
      li{
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 43px;
        img{
          width: 11px;
          height: 13px;
        }
        p{
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
          line-height: 36px;
          margin: 0;
          text-align: left;
          flex: 1;
          padding: 0 18px;
        }
        span{
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
          line-height: 36px;
        }
      }
    }
    .index_haderPagin{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
      span{
        flex: 1;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #343434;
        text-align: right;
        // line-height: 36px;
      }
    }
  }
  //表格样式
  .index_headeNav{
    padding: 0 20px;
    height: 550px;
    background-color: #fff;
    position: relative;
    border-radius: 6px;
     .tab_i{
       position: absolute;
       right: 1px;
       top:5px;
       border-radius: 50%;
     // display: block;
     width: 15px ;
     height: 15px;
     line-height: 15px;
     text-align: center;
     color: #fff;
     background-color: red;
     overflow:hidden; //超出的文本隐藏
     text-overflow:ellipsis; //溢出用省略号显示
     white-space:nowrap; //溢出不换行
     font-size: 11px;
     font-family: PingFang SC;
     font-weight: bold;

      }
  }
  .index_nav{
    // border: 1px solid #eee;
    background-color: #fff;
    height: 315px;
    box-shadow: 0px 4px 4px 0px rgba(130, 150, 162, 0.64);
    border-radius: 6px;
    .index_navTime{
      height: 270px;
      position: relative;
    }
    .index_navTimeimg{
      height: 47px;
      width: 100%;
      position: absolute;
      bottom: -76px;
      left: 0;
    }
    .index_navTimep{
      padding: 10px 0;
      margin: 0 20px;
      margin-bottom: 10px;
      border-bottom: 1px solid #E5E5E5;
      display: flex;
      justify-content: space-between;
      align-items: center;
       span:nth-child(1){
         font-size: 15px;
         font-family: PingFang SC;
         font-weight: bold;
         color: #3C8DBC;
       }
       span:nth-child(1)::before{
          content: "";
         display: block;
         width: 18px;
         height: 8px;
         background: #3C8DBC;
         border-radius: 3px;
       }
       span:nth-child(2){
         font-size: 12px;
         font-family: PingFang SC;
         font-weight: 400;
         color: #3C8DBC;
       }
    }
  }
  // 公司概况样式
  .index_headeProfile{
    margin-top: 20px;
    margin-bottom: 20px;
    height: 316px;
    .index_profilep{
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
      line-height: 27px;
    }
    .index_haderPagin{
      margin-top: 25px;
    }
    .index_headerImg{
      width: 21px;
      height: 21px;
      top:9px;
    }
  }
  // 备忘录样式
  .index_memoranduNnavTime{
    height: 335px;
    margin-top: 90px;
    position: relative;
    .index_navTimep{
      padding: 20px 0;
      // margin-bottom: 20px;
    }
    .index_navTimeimg{
      height: 47px;
      width: 100%;
      position: absolute;
      bottom: -76px;
      left: 0;
      bottom: -96px;
    }
    img{
      width: 23px;
      height: 6px;
      position: absolute;
      right: 20px;
      bottom: -50px;
    }
    ul{
      padding: 0 20px;
      li{
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px dashed #E5E5E5;
        p{
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
          line-height: 36px;
          flex: 1;
        }
        span{
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #343434;
          line-height: 36px;
        }

      }
    }
  }
  //通讯录样式
  .index_memoranduMail{
    height: 363px;
    margin-top: 100px;
    .index_navTimeimgtwo{
      width: 23px;
      height: 6px;
    }
    .index_navTimep{
      padding: 20px 0;
    }
    .index_memoranduMailnav{
      padding: 0 20px;
    }
    .index_navTimeimg{
      height: 47px;
      width: 100%;
      position: absolute;
      bottom: -76px;
      left: 0;
      bottom: -126px;
    }
   .index_haderPagin{
     margin-top: 10px;
   }
  }
}
</style>