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(item.dictValue)">{{item.dictLabel}}</span>
          </p>
                <div >
                  <ul class="index_headerUl">
                    <li v-for="(item,index) in configList" :key="index">
                        <img src="../assets/images/icon_list_sj.png" alt="">
                        <p>{{item.notice_title}}</p>
                        <span>{{item.create_time}}</span>
                    </li>
                  </ul>
                  <div class="index_haderPagin">
                    <el-pagination
                          v-show="total>0"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :current-page.sync="currentPage3"
                         :page-size="pageSize"
                         layout="prev, pager, next, jumper"
                         :total="total">
                    </el-pagination>
                    <span>共 {{total}} 条  每页显示 6 条  </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="tableDataalid" 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"

                                    width="70"
                                  />
                                  <!-- :formatter="typeFormat" -->
                                  <el-table-column
                                    label="请假类型"
                                    align="center"
                                    prop="status"

                                    width="75"
                                  />
                                  <!-- :formatter="statusFormat" -->
                                  <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="[numprofile == index ? ' spanto' : '']" v-for="(item,index) in editableTabsteo" :key="index" @click="tabSbuprofile(item.dictValue)">{{item.dictLabel}} </span>
            </p>
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                 <el-tab-pane label="用户管理" name="first"> -->
                   <div >
                     <h3 style="text-align: center;">{{tieku}}</h3>
                     <!-- {{getLisprofileone[0].info_title}} -->
                                      <p class="index_profilep" > {{comg}}	</p>
                                      <!-- {{getLisprofileone[0].info_content}} -->
                                      <div class="index_haderPagin">
                                        <el-pagination
                                             @size-change="handleSizeChangeprofile"
                                             @current-change="handleCurrentChangeprofile"
                                             :current-page.sync="currentPage3"
                                             :page-size="queryParamstabprofile.pageSize"
                                             layout="prev, pager, next, jumper"
                                             :total="totalprofile">
                                        </el-pagination>
                                        <span>共 {{totalprofile}} 条  每页显示 1条  </span>
                                      </div>
                   </div>
           </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" @click="handleAdd">
              <span>日程</span>
              <span><i class="el-icon-date" ></i>创建日程</span>
            </p>
            <el-calendar id="calendar">
                <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                <template
                  slot="dateCell"
                  slot-scope="{date, data}">
                  <!--自定义内容-->
                  <div>
                    <div class="calendar-day" style="text-align: center">
                      <el-tooltip v-if="brightDate.indexOf(data.day) != -1" class="item" effect="dark" :content="content(data.day)" placement="right">
                        <span class="everyDay">{{ data.day.split('-').slice(2).join('-') }}</span>
                      </el-tooltip>
                      <span v-else>{{ data.day.split('-').slice(2).join('-') }}</span>
                      <!-- <p :class="data.isSelected ? 'is-selected' : ''">
                            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
                      </p> -->
                    </div>
                  </div>
                </template>
              </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 @click="memoere"><i class="el-icon-date"></i>创建备忘录</span>
              </p>
              <ul >
                <li v-for="(item,index) in getmemorandum" :key="index">
                  <p>{{item.memorandum_title}}
                  </p>
                  <span>{{item.remind_time}}</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">
                           <div class="tab_tol">
                          	<tr class="tr_one">
                          		<th style=" text-align: center;" v-for="(item,index) in tableDataalid" :key="index">{{item.columnComment}}</th>
                          	</tr>
                          		<tr v-for="(item,index) in getLisaillie" :key="index" :class=" [index%2  ==0 ? 'two_tr two_trtwo':'two_tr']" @click="chakn(item)">
                          			<td style=" text-align: center;" >{{ item.contacts_name }}</td>
                          			<td style="text-align: center;">{{ item.dept_id  }}</td>
                          			<td style=" text-align: center;" >{{ item.phone }}</td>
                          			<td style=" text-align: center;" >{{ item.is_del == 1? '删除' :  '未删除'}}</td>
                          			<td style="text-align: center; " >{{ item.remark}}</td>
                          		</tr>
                           </div>
                          <div class="index_haderPagin index_haderPaginfoiu">
                            <el-pagination
                                 @size-change="handleSizeChangeali"
                                 @current-change="handleCurrentChangeali"
                                 :current-page.sync="currentPage3"
                                 :page-size="queryParamsail.pageSize"
                                 :small= "true"
                                 layout="prev, pager, next, jumper"
                                 :total="totalali">
                            </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 /> -->
  <!-- 添加或修改公告对话框 -->
  <el-dialog :title="title" :visible.sync="open" width="980px" append-to-body>
            <!-- if(){ -->
              <!-- 日历 -->
              <dynamic-forms v-if="nummer == 0" :config="form" @inputs = "changeFn" :formConfig="queryData" :open="open" @submitForm="submitForm($event)" @cancel="cancel($event)" :nummer = "nummer" />
            <!-- }else if(){ -->
              <!-- 备忘录 -->
              <memoran-dum v-if="nummer == 1" :config="form" @inputs = "changeFn" :formConfig="queryDatatwo" :open="open"  @cancel="cancel($event)" :nummer = "nummer" />
            <!-- } -->

  </el-dialog>
  </div>
</template>

<script>
import { listIndex, listIndextwo, listIndextherr, listIndexfou, listIndextanl, getConfig, delConfig, addConfig, updateConfig, clearCache } from "@/api/system/config";
import Editor from '@/components/Editor';
export default {
  name: "index",
  components: {
    Editor
  },
  data() {
    return {
      // 版本号
      version: "2.5.0",
       currentPage3: 1,
       total:0,
       totalprofile:0,
       totalali:0,
       pageSize:6,
       activeName: 'second',
       // 是否显示弹出层
       open: false,
       // 弹出层标题
       title: "",
       value: new Date(),
       editableTabs: [],
       editableTabsteo:[],
       configList:[],
       queryParams:{
        table:'sys_notice',
        orderBy:'create_time desc',
        pageNo:1,
        pageSize:6,
        condition:{
          notice_type:1
        }
      },
      queryParamstab:{
        table:'sys_notice',
        orderBy:'create_time desc',
        pageNo:1,
        pageSize:6,
        condition:{
          notice_type:1
        }
      },
      // 公司概况
      queryParamstabprofile:{
        table:'sys_info',
        orderBy:'create_time desc',
        pageNo:1,
        pageSize:1,
        condition:{
          notice_type:1
        }
      },
      // 日历
      queryParamscalendar:{
        table:'sys_schedule',
        orderBy:'create_time desc',
        pageNo:1,
        pageSize:10,
      },
      // 备忘录
      queryParamstabmemorandum:{
        table:'sys_memorandum',
        orderBy:'create_time desc',
        pageNo:1,
        pageSize:6,
      },
      // 通讯录
      queryParamsail:{
        table:'sys_contacts',
        orderBy:'create_time desc',
        pageNo:1,
        pageSize:6,
      },
      num:0,
      numprofile:0,
      dictType:'sys_notice_type',
      // 公司概况
      dictTypetwo:'sys_describe_type',
      gettabList:[],
      getLisprofileone:[],
      // 备忘录
      getmemorandum:[],
      //通讯录参数
      aliemg:{
        table:'sys_memorandum'
      },
      tableDataalid:[],
      getLisaillie:[],
      alendarList:[],
      calendarData: [
            ],
      ary:[],
      tieku:'',
      comg:'',
      aekti:'',
      // 弹框数据
      form:{
      },
      // 表单校验
      rules: {
      },
      //日历弹框
      calendaradd:{
        table:'sys_schedule'
      },
      //备忘录弹框
      calendaraddmer:{
        table:'sys_memorandum'
      },
      // input
      inputList:[],
      // 时间
      dataList:[],
      //单选框
      radiolist:[],
      // 复选框
      chekbosList:[],
      //下拉框
      selectList:[],
      editorList:[],
      queryData: {},
      queryDatatwo:{},
      nummer:0   //0 是日历  1 是备忘录
    };
  },

  created() {
    this.getLisalendar()//日历
    this.getList()
    this.getListtab()
    this.getLiser()
    this.getLisprofile()
    this.getLismemorandum()  //备忘录
    this.getLisail()//通讯录
    this.getLisailtwo()

  },
  computed: {

     // 时间高亮的数组
     brightDate () {
       // let ary = []
       var that =  this
       console.log(that.calendarData,887)
       for (var i = 0 ; i < that.calendarData.length; i++) {
         // that.ary.push(that.calendarData[i].startDate)
         // that.ary.push(that.calendarData[i].begin_time.slice(0,10))
         // that.ary.push(that.calendarData[i].all_date.split(','))
         if(that.calendarData[i].all_date !== undefined){
           that.ary.push(that.calendarData[i].all_date.join(','))
           console.log(that.calendarData[i].all_date.join(','),754)
         }
         // console.log(that.calendarData[i].all_date,754)
       }
       console.log(that.ary)
       return that.ary
     }

   },
  methods: {
      // Tooltip 文字提示
        content (date) {
          console.log(date,37645)
          let content = ''
          // console.log(data,37645)
          for (var i = 0 ; i < this.calendarData.length; i++) {
          // this.calendarData[i].begin_time = this.calendarData[i].begin_time.slice(0,10)
            console.log(this.calendarData[i].begin_time,123)
            // if (date === this.calendarData[i].begin_time) {
              if(this.calendarData[i].all_date !== undefined){
                content = this.calendarData[i].remind_type
              }

            // }
          }
          console.log(content)
          return content
        },
    //数据  第一部分列表
    getList() {
      this.loading = true;
      listIndex(this.queryParams).then(response => {
          this.configList = response.data.rows;
          console.log(this.configList)
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    //数据  第二部分列表
    getListtabone() {
      this.loading = true;
      listIndex(this.queryParams).then(response => {
          this.configList = response.data.rows;
          console.log(this.configList)
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    //数据  第三部分列表
    getLisprofile() {
      this.loading = true;
      listIndex(this.queryParamstabprofile).then(response => {
          if(response.data !== undefined){
            this.getLisprofileone = response.data.rows;
            this.tieku = this.getLisprofileone[0].info_title
            this.comg = this.getLisprofileone[0].info_content
            console.log(this.getLisprofileone[0].info_title,98)
            this.totalprofile = response.data.total;
          }
          this.loading = false;
        }
      );
    },
    //数据  日历数据列表
    getLisalendar() {
      this.loading = true;
      listIndex(this.queryParamscalendar).then(response => {
          if(response.data !== undefined){
            this.calendarData = response.data.rows;
            console.log(this.calendarData,9845765)
          }
          this.loading = false;
        }
      );
    },
    //数据  备忘录数据列表
    getLismemorandum() {
      this.loading = true;
      listIndex(this.queryParamstabmemorandum).then(response => {
          if(response.data !== undefined){
            this.getmemorandum = response.data.rows;
            console.log(this.getmemorandum,98765)
          }
          this.loading = false;
        }
      );
    },
    // 数据列表   通讯录数据
    getLisailtwo() {
      this.loading = true;
      listIndex(this.queryParamsail).then(response => {
          if(response.data !== undefined){
            this.getLisaillie = response.data.rows;
            // console.log(this.configList)
          }
          this.totalali = response.data.total
          this.loading = false;
        }
      );
    },
    //tab 公告 栏数据
    getListtab() {
      this.loading = true;
      listIndextwo(this.dictType).then(response => {
          this.editableTabs = response.data;
          this.queryParams.dictType = response.data[1].dictType
          console.log(this.editableTabs)
          // this.total = response.total;
          this.loading = false;
        }
      )
    },
    // 公司概况  tab
    getLiser() {
      this.loading = true;
      listIndextherr(this.dictTypetwo).then(response => {
          this.editableTabsteo = response.data;
          console.log(this.editableTabsteo)
          // this.total = response.total;
          this.loading = false;
        }
      )
    },
   // 通讯录表头
   getLisail() {
     this.loading = true;
     listIndexfou(this.aliemg).then(response => {
         if(response.data !== undefined){
           this.tableDataalid = response.data.tableHeadList;
           console.log(this.tableDataalid,67)
           this.totalprofile = response.data.total;
         }
         this.loading = false;
       }
     );
   },
   //日历新增弹框数据
   getLisalendaraddd() {
     this.loading = true;
     listIndextanl(this.calendaradd).then(response => {
         if(response.data !== undefined){
           this.queryData = response.data
           this.queryData.columns.filter(route => {
             // console.log(route)
             if(route.htmlType == "input" || route.htmlType == 'textarea'){
               this.inputList.push(route)
             }else if(route.htmlType == "select"){
               this.selectList.push(route)
             }else if(route.htmlType == "datetime"){
               this.dataList.push(route)
             }else if(route.htmlType == "editor"){
               this.editorList.push(route)
             }
         })
        // console.log(this.selectList)

         }
         this.loading = false;
       }
     );
   },
   //备忘录新增弹框数据
   getLisalendaradddmer() {
     this.loading = true;
     listIndextanl(this.calendaraddmer).then(response => {
         if(response.data !== undefined){
           this.queryDatatwo = response.data
           this.queryDatatwo.columns.filter(route => {
             // console.log(route)
             if(route.htmlType == "input" || route.htmlType == 'textarea'){
               this.inputList.push(route)
             }else if(route.htmlType == "select"){
               this.selectList.push(route)
             }else if(route.htmlType == "datetime"){
               this.dataList.push(route)
             }else if(route.htmlType == "editor"){
               this.editorList.push(route)
             }
         })
        // console.log(this.selectList)

         }
         this.loading = false;
       }
     );
   },
    goTarget(href) {
      window.open(href, "_blank");
    },
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      },
    handleCurrentChange(val) {
      this.queryParams.pageNo = val
      this.getList()
        console.log(`当前页: ${val}`);
      },
      // 公司概况
      handleSizeChangeprofile(val) {
              console.log(`每页 ${val} 条`);
        },
      handleCurrentChangeprofile(val) {
        this.queryParamstabprofile.pageNo = val
        this.getLisprofile()
          console.log(`当前页: ${val}`);
        },
     // 通讯录
     handleSizeChangeali(val) {
             console.log(`每页 ${val} 条`);
       },
     handleCurrentChangeali(val) {
       this.queryParamsail.pageNo = val
       this.getLisailtwo()
         console.log(`当前页: ${val}`);
       },
    handleClick(tab, event) {
              console.log(tab, event);
      },
      // 第一部分tab点击
    tabSbu(index){
      console.log(index)
     this.num = index - 1
     this.queryParams.condition.notice_type = index
     this.getList()
    },
    // 第三部分tab点击
    tabSbuprofile(index){
      this.numprofile = index - 1
      this.queryParamstabprofile.condition.notice_type = index
      this.getLisprofile()
    },
    // 表单重置
    reset() {
      this.form = {
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.nummer = 0
      console.log(this.open)
      this.reset();
      this.getLisalendaraddd()
      this.open = true;
      this.title = "添加日历";
    },
    /** 提交按钮 */
    submitForm: function(data) {
      console.log(this.form,data)
      // this.$refs["form"].validate(valid => {
      //   if (valid) {
      //     if (this.form.id != undefined) {
      //       updateNotice(this.form).then(response => {
      //         this.msgSuccess("修改成功");
      //         this.open = false;
      //         this.getList();
      //       });
      //     } else {
      //       addNotice(this.form).then(response => {
      //         this.msgSuccess("新增成功");
      //         this.open = false;
      //         this.getList();
      //       });
      //     }
      //   }
      // });
    },
    // 弹框
    changeFn(obj) {
      console.log(obj)
      for(let key in obj){
        this.form[key] = obj[key]
      }
    },
    // 新增备忘录
    memoere(){
     this.nummer = 1
     this.open = true;
     this.title = "添加备忘录";
     this.getLisalendaradddmer()
    }
  },
};
</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;
       }
     }
   .everyDay {
     display: inline-block;
     width: 20px;
     height: 20px;
     line-height: 20px;
     background-color: #409eff;
     color: #fff;
     border-radius: 50%;
     margin-top: 5px;
   }
  }
</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;
   }
  }
}

// table
.tab_tol{
  // display: flex;
  .tr_one{
    display: flex;
    justify-content: space-around;
    width: 100%;
    th{
      flex: 1;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #343434;
      line-height: 36px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
  .two_tr{
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
    line-height: 36px;
    td{
      flex: 1;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
  .two_trtwo{
    background-color: #F2F2F2;
  }
}

</style>