meri-design-dev/custom/theme/ViewTable.styl

基于vue框架的ui库

/*!
 * @meri-design-dev v0.0.13
 * (c) 2019-2020 wangyongcun
 * Released under the MIT License.
 * 2024-04-29 11:26:20
 */
.p-view-table-header
  display: flex
  align-items: center
  justify-content: space-around
  background-color: $grey-50
  border-bottom: 1px solid $grey-200
  width: 100%
  height: 60px
  font-size: 0
  overflow: hidden

.p-view-table-header .p-table-header-item
  flex: 1

.p-view-table-header .p-table-header-item .p-table-header-text
  padding-left: 20px
  padding-right: 20px
  color: $grey-600
  font-size: 12px
  text-align: center

.p-view-table-header .p-table-header-item .p-table-header-text .p-table-header-child
  display: inline-block
  width: 100%
  line-height: 20px

.p-view-table-header .p-table-header-item .p-table-header-text-lh
  line-height: 30px

.p-view-table-header .p-table-header-item .p-table-header-item-children
  display: flex
  align-items: center
  justify-content: space-between
  border-top: 1px solid $grey-200
  height: 30px

.p-view-table-header .p-table-header-item .p-table-header-item-children .p-table-header-children-text
  align-self: flex-start
  width: 50%

.p-view-table-header .p-table-header-item .p-table-header-item-children .p-table-header-children-text:nth-child(even)
  border-left: 1px solid $grey-200

.p-view-table-header .p-table-header-item-hc
  flex-shrink: .8
  border-left: 1px solid $grey-200

.p-view-table-header .p-table-header-item-center .p-table-header-text
  text-align: center

.p-view-table-header .p-table-header-item-left .p-table-header-text
  text-align: left

.p-view-table-header .p-table-header-item-left .p-table-header-text-lh
  text-align: center

.p-view-table-header .p-table-header-item-right .p-table-header-text
  text-align: right

.p-view-table-header .p-table-header-item-right .p-table-header-text-lh
  text-align: center

.p-table-main
  font-size: 0

.p-table-main .p-table-box-item
  display: flex
  align-items: center
  justify-content: space-around
  background-color: $theme
  border-top: 1px solid $grey-200
  height: 80px
  transition: background-color .3s
  overflow: hidden

.p-table-main .p-table-box-item:first-child
  border-top: 0

.p-table-main .p-table-box-item:last-child
  border-bottom: 1px solid $grey-200

.p-table-main .p-table-box-item:hover
  background-color: $grey-300

.p-table-main .p-table-box-item .p-table-box-text
  padding-left: 20px
  padding-right: 20px
  text-align: center
  color: $grey-900
  font-size: 14px

.p-table-main .p-table-box-item .p-table-box-item-list
  flex: 1

.p-table-main .p-table-box-item .p-table-box-children
  display: flex

.p-table-main .p-table-box-item .p-table-box-text-str
  height: 32px
  line-height: 32px

.p-table-main .p-table-box-item .p-table-box-children-str .p-table-box-text-item:nth-child(odd) .p-table-box-text
  font-size: 12px

.p-table-main .p-table-box-item .p-table-box-item-words .p-table-box-text:nth-child(odd)
  font-size: 12px

.p-table-main .p-table-box-item-radius-left .p-table-box-text
  text-align: left

.p-table-main .p-table-box-item-radius-right .p-table-box-text
  text-align: right

.p-table-main .p-table-box-item-list-center .p-table-box-text
  text-align: center

.p-view-table
  background-color: $white
  width: 100%
  overflow: hidden
  font-size: 0

.p-view-table .p-view-table-header
  position: relative
  height: 60px
  overflow: hidden

.p-view-table .p-view-table-header-fixed
  position: absolute
  left: 0
  top: 0
  z-index: 10

.p-view-table .p-view-table-content-wrapper
  width: 100%
  overflow: auto

.p-view-table .p-view-table-content
  position: relative
  width: 100%

.p-view-table .p-view-table-content-fixed
  position: absolute
  left: 0
  top: 0
  background-color: $white

.p-view-table .p-view-table-content-fixed-shadow
  box-shadow: $box-shadow-right

.p-view-table .p-table-no-data
  padding-top: 24px
  padding-bottom: 24px
  width: 100%
  text-align: center

.p-view-table .p-table-no-data > img
  width: 120px
  height: 120px

.p-view-table .p-table-no-data .p-table-no-data-text
  color: $grey-600
  font-size: 14px