|
- /* BEM support Func
- -------------------------- */
- /* Element Chalk Variables */
- /* Transition
- -------------------------- */
- /* Color
- -------------------------- */
- /* 53a8ff */
- /* 66b1ff */
- /* 79bbff */
- /* 8cc5ff */
- /* a0cfff */
- /* b3d8ff */
- /* c6e2ff */
- /* d9ecff */
- /* ecf5ff */
- /* Link
- -------------------------- */
- /* Border
- -------------------------- */
- /* Fill
- -------------------------- */
- /* Typography
- -------------------------- */
- /* Size
- -------------------------- */
- /* z-index
- -------------------------- */
- /* Disable base
- -------------------------- */
- /* Icon
- -------------------------- */
- /* Checkbox
- -------------------------- */
- /* Radio
- -------------------------- */
- /* Select
- -------------------------- */
- /* Alert
- -------------------------- */
- /* MessageBox
- -------------------------- */
- /* Message
- -------------------------- */
- /* Notification
- -------------------------- */
- /* Input
- -------------------------- */
- /* Cascader
- -------------------------- */
- /* Group
- -------------------------- */
- /* Tab
- -------------------------- */
- /* Button
- -------------------------- */
- /* cascader
- -------------------------- */
- /* Switch
- -------------------------- */
- /* Dialog
- -------------------------- */
- /* Table
- -------------------------- */
- /* Pagination
- -------------------------- */
- /* Popup
- -------------------------- */
- /* Popover
- -------------------------- */
- /* Tooltip
- -------------------------- */
- /* Tag
- -------------------------- */
- /* Tree
- -------------------------- */
- /* Dropdown
- -------------------------- */
- /* Badge
- -------------------------- */
- /* Card
- --------------------------*/
- /* Slider
- --------------------------*/
- /* Steps
- --------------------------*/
- /* Menu
- --------------------------*/
- /* Rate
- --------------------------*/
- /* DatePicker
- --------------------------*/
- /* Loading
- --------------------------*/
- /* Scrollbar
- --------------------------*/
- /* Carousel
- --------------------------*/
- /* Collapse
- --------------------------*/
- /* Transfer
- --------------------------*/
- /* Header
- --------------------------*/
- /* Footer
- --------------------------*/
- /* Main
- --------------------------*/
- /* Timeline
- --------------------------*/
- /* Backtop
- --------------------------*/
- /* Link
- --------------------------*/
- /* Calendar
- --------------------------*/
- /* Form
- -------------------------- */
- /* Avatar
- --------------------------*/
- /* Break-point
- --------------------------*/
- /* Break-points
- -------------------------- */
- /* Scrollbar
- -------------------------- */
- /* Placeholder
- -------------------------- */
- /* BEM
- -------------------------- */
- /* Element Chalk Variables */
- /* Transition
- -------------------------- */
- /* Color
- -------------------------- */
- /* 53a8ff */
- /* 66b1ff */
- /* 79bbff */
- /* 8cc5ff */
- /* a0cfff */
- /* b3d8ff */
- /* c6e2ff */
- /* d9ecff */
- /* ecf5ff */
- /* Link
- -------------------------- */
- /* Border
- -------------------------- */
- /* Fill
- -------------------------- */
- /* Typography
- -------------------------- */
- /* Size
- -------------------------- */
- /* z-index
- -------------------------- */
- /* Disable base
- -------------------------- */
- /* Icon
- -------------------------- */
- /* Checkbox
- -------------------------- */
- /* Radio
- -------------------------- */
- /* Select
- -------------------------- */
- /* Alert
- -------------------------- */
- /* MessageBox
- -------------------------- */
- /* Message
- -------------------------- */
- /* Notification
- -------------------------- */
- /* Input
- -------------------------- */
- /* Cascader
- -------------------------- */
- /* Group
- -------------------------- */
- /* Tab
- -------------------------- */
- /* Button
- -------------------------- */
- /* cascader
- -------------------------- */
- /* Switch
- -------------------------- */
- /* Dialog
- -------------------------- */
- /* Table
- -------------------------- */
- /* Pagination
- -------------------------- */
- /* Popup
- -------------------------- */
- /* Popover
- -------------------------- */
- /* Tooltip
- -------------------------- */
- /* Tag
- -------------------------- */
- /* Tree
- -------------------------- */
- /* Dropdown
- -------------------------- */
- /* Badge
- -------------------------- */
- /* Card
- --------------------------*/
- /* Slider
- --------------------------*/
- /* Steps
- --------------------------*/
- /* Menu
- --------------------------*/
- /* Rate
- --------------------------*/
- /* DatePicker
- --------------------------*/
- /* Loading
- --------------------------*/
- /* Scrollbar
- --------------------------*/
- /* Carousel
- --------------------------*/
- /* Collapse
- --------------------------*/
- /* Transfer
- --------------------------*/
- /* Header
- --------------------------*/
- /* Footer
- --------------------------*/
- /* Main
- --------------------------*/
- /* Timeline
- --------------------------*/
- /* Backtop
- --------------------------*/
- /* Link
- --------------------------*/
- /* Calendar
- --------------------------*/
- /* Form
- -------------------------- */
- /* Avatar
- --------------------------*/
- /* Break-point
- --------------------------*/
- .el-image__inner, .el-image__placeholder, .el-image__error {
- width: 100%;
- height: 100%; }
-
- .el-image {
- position: relative;
- display: inline-block;
- overflow: hidden; }
- .el-image__inner {
- vertical-align: top; }
- .el-image__inner--center {
- position: relative;
- top: 50%;
- left: 50%;
- -webkit-transform: translate(-50%, -50%);
- transform: translate(-50%, -50%);
- display: block; }
- .el-image__placeholder {
- background: #F5F7FA; }
- .el-image__error {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- font-size: 14px;
- background: #F5F7FA;
- color: #C0C4CC;
- vertical-align: middle; }
- .el-image__preview {
- cursor: pointer; }
-
- .el-image-viewer__wrapper {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0; }
-
- .el-image-viewer__btn {
- position: absolute;
- z-index: 1;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- border-radius: 50%;
- opacity: .8;
- cursor: pointer;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none; }
-
- .el-image-viewer__close {
- top: 40px;
- right: 40px;
- width: 40px;
- height: 40px;
- font-size: 24px;
- color: #fff;
- background-color: #606266; }
-
- .el-image-viewer__canvas {
- width: 100%;
- height: 100%;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center; }
-
- .el-image-viewer__actions {
- left: 50%;
- bottom: 30px;
- -webkit-transform: translateX(-50%);
- transform: translateX(-50%);
- width: 282px;
- height: 44px;
- padding: 0 23px;
- background-color: #606266;
- border-color: #fff;
- border-radius: 22px; }
- .el-image-viewer__actions__inner {
- width: 100%;
- height: 100%;
- text-align: justify;
- cursor: default;
- font-size: 23px;
- color: #fff;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -ms-flex-pack: distribute;
- justify-content: space-around; }
-
- .el-image-viewer__prev {
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- width: 44px;
- height: 44px;
- font-size: 24px;
- color: #fff;
- background-color: #606266;
- border-color: #fff;
- left: 40px; }
-
- .el-image-viewer__next {
- top: 50%;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- width: 44px;
- height: 44px;
- font-size: 24px;
- color: #fff;
- background-color: #606266;
- border-color: #fff;
- right: 40px;
- text-indent: 2px; }
-
- .el-image-viewer__mask {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- opacity: .5;
- background: #000; }
-
- .viewer-fade-enter-active {
- -webkit-animation: viewer-fade-in .3s;
- animation: viewer-fade-in .3s; }
-
- .viewer-fade-leave-active {
- -webkit-animation: viewer-fade-out .3s;
- animation: viewer-fade-out .3s; }
-
- @-webkit-keyframes viewer-fade-in {
- 0% {
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- opacity: 0; }
- 100% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- opacity: 1; } }
-
- @keyframes viewer-fade-in {
- 0% {
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- opacity: 0; }
- 100% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- opacity: 1; } }
-
- @-webkit-keyframes viewer-fade-out {
- 0% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- opacity: 1; }
- 100% {
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- opacity: 0; } }
-
- @keyframes viewer-fade-out {
- 0% {
- -webkit-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- opacity: 1; }
- 100% {
- -webkit-transform: translate3d(0, -20px, 0);
- transform: translate3d(0, -20px, 0);
- opacity: 0; } }
|