meri-design-dev/custom/theme/ImageUpload.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-message-box
  position: fixed
  top: 36px
  left: 0
  text-align: center
  display: flex
  flex-flow: column wrap
  justify-content: center
  align-items: center
  width: 100%
  z-index: 9000
  pointer-events: none

.fadeDownUpUi-enter-active
  animation: fadeInDownUi .3s ease-out

.fadeDownUpUi-leave-active
  animation: fadeOutUpUi .3s ease-in

@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeInDownUi
  from
    opacity: 0
    transform: translate3d(0,-100%,0)
  to
    opacity: 1
    transform: translate3d(0,0,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
@keyframes fadeOutUpUi
  from
    opacity: 1
  to
    opacity: 0
    transform: translate3d(0,-100%,0)
.p-message
  display: flex
  justify-content: space-around
  align-items: flex-start
  padding: 8px 8px 8px 12px
  border-radius: 4px
  box-shadow: $box-shadow-bottom
  min-width: 240px
  max-width: 600px
  min-height: 40px

.p-message + .p-message
  margin-top: 24px

.p-message .p-message-hint
  line-height: 24px
  font-size: 0

.p-message .p-message-hint svg
  vertical-align: middle
  width: 16px
  height: 16px

.p-message .p-message-text
  padding-left: 8px
  padding-right: 8px
  width: 100%
  text-align: left
  font-size: 14px
  color: $white
  word-wrap: break-word
  line-height: 24px

.p-message .p-message-close
  height: 24px
  line-height: 24px
  pointer-events: auto
  font-size: 0

.p-message .p-message-close svg
  vertical-align: middle
  width: 12px
  opacity: .5
  transition: opacity .3s
  cursor: pointer

.p-message .p-message-close svg:hover
  opacity: 1

.p-message-info
  background-color: $blue-500

.p-message-success
  background-color: $turquoise-500

.p-message-warning
  background-color: $orange-400

.p-message-error
  background-color: $red-400

.p-image-upload
  display: inline-flex
  flex-wrap: wrap
  width: 100%
  font-size: 0

.p-image-upload .p-image-upload-centent
  position: relative
  display: flex
  flex-direction: column
  align-items: center
  width: 112px
  height: 112px
  margin-right: 12px
  margin-bottom: 20px
  padding-top: 20px
  padding-bottom: 12px
  border: 1px dashed $grey-400
  border-radius: 4px
  background: $grey-50
  cursor: pointer
  transition: all .36s

.p-image-upload .p-image-upload-centent .p-add-image-input
  position: absolute
  top: 0
  left: 0
  background: none
  width: 100%
  height: 100%
  opacity: 0
  cursor: pointer

.p-image-upload .p-image-upload-centent .p-label
  font-size: 14px
  font-weight: 400
  line-height: 22px
  color: $grey-900
  margin-top: 8px
  margin-bottom: 4px
  cursor: pointer

.p-image-upload .p-image-upload-centent .p-number
  font-size: 14px
  font-weight: 400
  line-height: 22px
  color: $grey-500

.p-image-upload .p-image-upload-centent:hover
  border-color: $blue-500

.p-image-upload .p-image-upload-disabled
  cursor: default

.p-image-upload .p-image-upload-disabled .p-add-image-input
  cursor: default

.p-image-upload .p-image-upload-disabled .p-label
  color: $grey-400
  cursor: not-allowed

.p-image-upload .p-image-upload-disabled .p-number
  color: $grey-400

.p-image-upload .p-image-upload-disabled svg rect
  fill: $grey-400

.p-image-upload .p-image-upload-disabled:hover
  border-color: $grey-400

.p-image-upload .p-image-list
  position: relative
  display: flex
  flex-direction: column
  align-items: center
  width: 112px
  height: 112px
  margin-right: 12px
  margin-bottom: 20px
  border: 1px dashed $grey-400
  border-radius: 4px
  background: $grey-50
  cursor: pointer

.p-image-upload .p-image-list .p-delete-icon
  width: 16px
  height: 16px
  position: absolute
  opacity: 0
  top: 8px
  right: 8px
  transition: opacity .3s

.p-image-upload .p-image-list .p-delete-icon path
  transition: fill .36s

.p-image-upload .p-image-list .p-delete-icon:hover path
  fill: $blue-500

.p-image-upload .p-image-list-done
  padding: 4px
  border: 1px solid $grey-400
  border-radius: 4px
  background: $theme

.p-image-upload .p-image-list-done .p-small-image-box
  display: flex
  justify-content: center
  align-items: center
  width: 100%
  height: 100%
  overflow: hidden

.p-image-upload .p-image-list-done .p-small-image-box .p-list-image
  height: 100%

.p-image-upload .p-image-list-done:hover .p-delete-icon
  opacity: 1

.p-image-upload .p-image-list-fail
  border: 1px solid $grey-400
  border-radius: 4px
  background: $grey-50

.p-image-upload .p-image-list-fail .p-fail-icon
  margin-top: 28px
  margin-bottom: 4px

.p-image-upload .p-image-list-fail .p-fail-text
  font-size: 14px
  font-weight: 400
  line-height: 22px
  color: $grey-500

.p-image-upload .p-image-list-fail:hover .p-delete-icon
  opacity: 1

.p-image-upload .p-image-list-pending:hover .p-delete-icon
  opacity: 1

.p-image-upload .p-image-list-pending .p-list-label
  display: inline-block
  margin-top: 36px
  font-size: 14px
  font-weight: 400
  line-height: 22px
  color: $grey-500

.p-image-upload .p-image-list-pending .p-progress-bar
  width: calc(100% - 16px)
  height: 4px
  margin-top: 8px
  border-radius: 2px
  background: $grey-300

.p-image-upload .p-image-list-pending .p-progress-bar .p-progress-rate
  width: 0
  height: 4px
  background: $blue-500
  border-radius: 2px
  transition: width 2s

.p-image-upload .p-image-modal
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: $theme
  z-index: 7000

.p-image-upload .p-image-modal .p-image-modal-back
  position: fixed
  top: 56px
  width: 100%
  height: calc(100% - 56px)
  background: $grey-600
  opacity: .5

.p-image-upload .p-image-modal .p-image-header
  display: flex
  align-items: center
  justify-content: flex-end
  width: 100%
  height: 56px
  padding-left: 32px
  padding-right: 32px
  background: $grey-50

.p-image-upload .p-image-modal .p-image-header span
  font-size: 14px
  line-height: 22px

.p-image-upload .p-image-modal .p-image-header div
  margin-left: 24px
  display: flex
  align-items: center
  cursor: pointer

.p-image-upload .p-image-modal .p-image-header .p-size-box svg
  width: 16px
  height: 16px

.p-image-upload .p-image-modal .p-image-header .p-size-box svg >g>path
  transition: all .36s

.p-image-upload .p-image-modal .p-image-header .p-size-box svg rect,
.p-image-upload .p-image-modal .p-image-header .p-size-box svg circle
  transition: all .36s

.p-image-upload .p-image-modal .p-image-header .p-size-box .p-size-label
  display: inline-block
  margin-left: 4px
  transition: all .36s

.p-image-upload .p-image-modal .p-image-header .p-size-box:hover
  color: $blue-500

.p-image-upload .p-image-modal .p-image-header .p-size-box:hover svg>g path:first-child
  fill: $blue-500

.p-image-upload .p-image-modal .p-image-header .p-size-box:hover svg>g path:last-child
  stroke: $blue-500

.p-image-upload .p-image-modal .p-image-header .p-size-box:hover svg>g rect,
.p-image-upload .p-image-modal .p-image-header .p-size-box:hover svg>g circle
  fill: $blue-500

.p-image-upload .p-image-modal .p-image-header .p-download-box .p-size-label
  display: inline-block
  margin-left: 4px
  transition: all .36s

.p-image-upload .p-image-modal .p-image-header .p-download-box svg
  width: 16px
  height: 16px

.p-image-upload .p-image-modal .p-image-header .p-download-box svg >g>path
  transition: all .36s

.p-image-upload .p-image-modal .p-image-header .p-download-box:hover
  color: $blue-500

.p-image-upload .p-image-modal .p-image-header .p-download-box:hover svg>g>path
  fill: $blue-500

.p-image-upload .p-image-modal .p-image-header .p-close-box
  position: relative

.p-image-upload .p-image-modal .p-image-header .p-close-box svg
  width: 16px
  height: 16px

.p-image-upload .p-image-modal .p-image-header .p-close-box svg path,
.p-image-upload .p-image-modal .p-image-header .p-close-box svg rect
  transition: all .36s

.p-image-upload .p-image-modal .p-image-header .p-close-box::before
  content: ''
  position: absolute
  left: -12px
  width: 1px
  height: 22px
  background: $grey-400

.p-image-upload .p-image-modal .p-image-header .p-close-box:hover svg path,
.p-image-upload .p-image-modal .p-image-header .p-close-box:hover svg rect
  fill: $blue-500

.p-image-upload .p-image-modal .p-image-content
  position: relative
  display: flex
  justify-content: space-between
  align-items: center
  width: 100%
  height: calc(100% - 56px)
  padding-left: 32px
  padding-right: 32px

.p-image-upload .p-image-modal .p-image-content .p-image-box
  position: relative
  width: 100%
  height: 100%
  overflow: hidden
  display: flex
  justify-content: center
  align-items: center

.p-image-upload .p-image-modal .p-image-content .p-image-box .p-big-image
  position: relative
  width: 100%
  cursor: move
  user-select: none

.p-image-upload .p-image-modal .p-image-content .p-control
  position: absolute
  display: flex
  justify-content: center
  align-items: center
  width: 40px
  height: 40px
  background: $grey-50
  border: 1px solid $grey-50
  border-radius: 20px
  cursor: pointer
  transition: all 1s
  z-index: 1000

.p-image-upload .p-image-modal .p-image-content .p-control svg
  width: 20px
  height: 20px

.p-image-upload .p-image-modal .p-image-content .p-control:hover svg path
  stroke: $blue-500

.p-image-upload .p-image-modal .p-image-content .p-control-right
  right: 32px
  transform: rotate(180deg)