主页面

qushaowei

2023-10-29 1ef38f7b420900816f27bdea509017cab11a96d2

 src/views/dashboard/IndexTask.vue

@@ -1,15 +1,29 @@
<template>
  <div class="index-container-ty">
    <a-spin :spinning="loading">
      <a-row type="flex" justify="start" :gutter="3">
        <a-col :sm="24" :lg="12">
      <a-row
        type="flex"
        justify="start"
        :gutter="3"
      >
        <a-col
          :sm="24"
          :lg="12"
        >
          <a-card>
            <div slot="title" class="index-md-title">
            <div
              slot="title"
              class="index-md-title"
            >
              <img src="../../assets/daiban.png"/>
              我的待办【{{ dataSource1.length }}】
            </div>
            <div slot="extra">
              <a v-if="dataSource1 && dataSource1.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
              <a
                v-if="dataSource1 && dataSource1.length>0"
                slot="footer"
                @click="goPage"
              >更多 <a-icon type="double-right" /></a>
            </div>
            <a-table
              :class="'my-index-table tytable1'"
@@ -18,16 +32,34 @@
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource1"
              :pagination="false">
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              :pagination="false"
            >
              <template
                slot="ellipsisText"
                slot-scope="text"
              >
                <j-ellipsis
                  :value="text"
                  :length="textMaxLength"
                ></j-ellipsis>
              </template>

              <template slot="dayWarnning" slot-scope="text,record">
                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
              <template
                slot="dayWarnning"
                slot-scope="text,record"
              >
                <a-icon
                  type="bulb"
                  theme="twoTone"
                  style="font-size:22px"
                  :twoToneColor="getTipColor(record)"
                />
              </template>

              <span slot="action" slot-scope="text, record">
              <span
                slot="action"
                slot-scope="text, record"
              >
                <a @click="handleData">办理</a>
              </span>

@@ -35,14 +67,24 @@
          </a-card>
        </a-col>

        <a-col :sm="24" :lg="12">
        <a-col
          :sm="24"
          :lg="12"
        >
          <a-card>
            <div slot="title" class="index-md-title">
            <div
              slot="title"
              class="index-md-title"
            >
              <img src="../../assets/zaiban.png"/>
              我的在办【{{ dataSource2.length }}】
            </div>
            <div slot="extra">
              <a v-if="dataSource2 && dataSource2.length>0" slot="footer" @click="goPage">更多 <a-icon type="double-right" /></a>
              <a
                v-if="dataSource2 && dataSource2.length>0"
                slot="footer"
                @click="goPage"
              >更多 <a-icon type="double-right" /></a>
            </div>
            <a-table
              :class="'my-index-table tytable2'"
@@ -51,16 +93,34 @@
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource2"
              :pagination="false">
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              :pagination="false"
            >
              <template
                slot="ellipsisText"
                slot-scope="text"
              >
                <j-ellipsis
                  :value="text"
                  :length="textMaxLength"
                ></j-ellipsis>
              </template>

              <template slot="dayWarnning" slot-scope="text,record">
                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
              <template
                slot="dayWarnning"
                slot-scope="text,record"
              >
                <a-icon
                  type="bulb"
                  theme="twoTone"
                  style="font-size:22px"
                  :twoToneColor="getTipColor(record)"
                />
              </template>

              <span slot="action" slot-scope="text, record">
              <span
                slot="action"
                slot-scope="text, record"
              >
                <a @click="handleData">办理</a>
              </span>

@@ -72,9 +132,15 @@
          <div style="height: 5px;"></div>
        </a-col>

        <a-col :sm="24" :lg="12">
        <a-col
          :sm="24"
          :lg="12"
        >
          <a-card>
            <div slot="title" class="index-md-title">
            <div
              slot="title"
              class="index-md-title"
            >
              <img src="../../assets/guaz.png"/>
              我的挂账【{{ dataSource4.length }}】
            </div>
@@ -85,16 +151,34 @@
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource4"
              :pagination="false">
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              :pagination="false"
            >
              <template
                slot="ellipsisText"
                slot-scope="text"
              >
                <j-ellipsis
                  :value="text"
                  :length="textMaxLength"
                ></j-ellipsis>
              </template>

              <template slot="dayWarnning" slot-scope="text,record">
                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
              <template
                slot="dayWarnning"
                slot-scope="text,record"
              >
                <a-icon
                  type="bulb"
                  theme="twoTone"
                  style="font-size:22px"
                  :twoToneColor="getTipColor(record)"
                />
              </template>

              <span slot="action" slot-scope="text, record">
              <span
                slot="action"
                slot-scope="text, record"
              >
                <a @click="handleData">办理</a>
              </span>

@@ -102,9 +186,15 @@
          </a-card>
        </a-col>

        <a-col :sm="24" :lg="12">
        <a-col
          :sm="24"
          :lg="12"
        >
          <a-card>
            <div slot="title" class="index-md-title">
            <div
              slot="title"
              class="index-md-title"
            >
              <img src="../../assets/duban.png"/>
              我的督办【{{ dataSource3.length }}】
            </div>
@@ -115,16 +205,34 @@
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource3"
              :pagination="false">
              <template slot="ellipsisText" slot-scope="text">
                <j-ellipsis :value="text" :length="textMaxLength"></j-ellipsis>
              :pagination="false"
            >
              <template
                slot="ellipsisText"
                slot-scope="text"
              >
                <j-ellipsis
                  :value="text"
                  :length="textMaxLength"
                ></j-ellipsis>
              </template>

              <template slot="dayWarnning" slot-scope="text,record">
                <a-icon type="bulb" theme="twoTone" style="font-size:22px" :twoToneColor="getTipColor(record)"/>
              <template
                slot="dayWarnning"
                slot-scope="text,record"
              >
                <a-icon
                  type="bulb"
                  theme="twoTone"
                  style="font-size:22px"
                  :twoToneColor="getTipColor(record)"
                />
              </template>

              <span slot="action" slot-scope="text, record">
              <span
                slot="action"
                slot-scope="text, record"
              >
                <a @click="handleData">办理</a>
              </span>

@@ -304,27 +412,47 @@
</script>

<style>
  .my-index-table{height:270px}
  .my-index-table table{font-size: 14px !important;}
.my-index-table {
  height: 270px;
}
.my-index-table table {
  font-size: 14px !important;
}

  .index-container-ty .ant-card-head-title{padding-top: 6px;padding-bottom: 6px;}
  .index-container-ty .ant-card-extra{padding:0}
  .index-container-ty .ant-card-extra a{color:#fff}
  .index-container-ty .ant-card-extra a:hover{color:#152ede}
  .index-container-ty .ant-card-head-wrapper,.index-container-ty .ant-card-head{
.index-container-ty .ant-card-head-title {
  padding-top: 6px;
  padding-bottom: 6px;
}
.index-container-ty .ant-card-extra {
  padding: 0;
}
.index-container-ty .ant-card-extra a {
  color: #fff;
}
.index-container-ty .ant-card-extra a:hover {
  color: #152ede;
}
.index-container-ty .ant-card-head-wrapper,
.index-container-ty .ant-card-head {
    line-height:24px;
    min-height:24px;
    /*background: #90aeff;*/
    background: #7196fb;
  }
  .index-container-ty .ant-card-body{padding: 10px 12px 0px 12px}
.index-container-ty .ant-card-body {
  padding: 10px 12px 0px 12px;
}

  /* .index-container-ty .ant-card-actions{background: #fff}
   .index-container-ty .ant-card-actions li {margin:2px 0;}
   .index-container-ty .ant-card-actions > li > span{width: 100%}*/


  .index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;}
.index-container-ty .ant-table-footer {
  text-align: right;
  padding: 6px 12px 6px 6px;
  background: #fff;
  border-top: 2px solid #f7f1f1;
}

  .index-md-title{
    postion:relative;
@@ -347,18 +475,43 @@
    border-bottom:1px solid #90aeff;*/
  }


  .index-container-ty .ant-table-thead > tr > th,
  .index-container-ty .ant-table-tbody > tr > td{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th{
.index-container-ty
  .ant-table-small
  > .ant-table-content
  > .ant-table-fixed-left
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-thead
  > tr
  > th,
.index-container-ty
  .ant-table-small
  > .ant-table-content
  > .ant-table-fixed-right
  > .ant-table-body-outer
  > .ant-table-body-inner
  > table
  > .ant-table-thead
  > tr
  > th {
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty  .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th{
.index-container-ty
  .ant-table-small
  > .ant-table-content
  > .ant-table-scroll
  > .ant-table-body
  > table
  > .ant-table-thead
  > tr
  > th {
    border-bottom: 1px solid #90aeff;
  }

@@ -367,6 +520,6 @@
  }

  .index-container-ty .ant-table-placeholder {
    padding: 0
  padding: 0;
  }
</style>