Hooke / vue-flow-editor

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7dccf548 1 parent a68733b5

fix

Inline Side-by-side
Showing 2 changed files with 113 additions and 113 deletions
...@@ -578,115 +578,4 @@ body { ...@@ -578,115 +578,4 @@ body {
578 .demo-tabs > .el-tabs__content { 578 .demo-tabs > .el-tabs__content {
579 /* padding: 32px; */ 579 /* padding: 32px; */
580 } 580 }
581 -
582 -.flow-tabs__nav-wrap {
583 - overflow: hidden;
584 - margin-bottom: -1px;
585 - position: relative;
586 -}
587 -.flow-tabs__nav-wrap::after {
588 - content: "";
589 - position: absolute;
590 - left: 0;
591 - bottom: 0;
592 - width: 100%;
593 - height: 2px;
594 - background-color: #e4e7ed;
595 - /* z-index: 1; */
596 -}
597 -
598 -.flow-tabs__nav-scroll {
599 - /* overflow: hidden; */
600 - overflow: scroll;
601 -}
602 -
603 -.flow-tabs__active-bar {
604 - position: absolute;
605 - bottom: 0;
606 - left: 0;
607 - height: 2px;
608 - background-color: #409eff;
609 - z-index: 1;
610 - transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
611 - transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
612 - list-style: none;
613 -}
614 -
615 -.flow-tabs__nav {
616 - display: flex;
617 - white-space: nowrap;
618 - position: relative;
619 - transition: transformX(0px);
620 - float: left;
621 - .flow-tabs__item {
622 - padding: 0 20px;
623 - height: 40px;
624 - box-sizing: border-box;
625 - display: flex;
626 - align-items: center;
627 - justify-content: center;
628 - list-style: none;
629 - font-size: 14px;
630 - font-weight: 500;
631 - color: #303133;
632 - position: relative;
633 - &:hover {
634 - color: #409eff;
635 - cursor: pointer;
636 - }
637 - &.is-active {
638 - color: #409eff;
639 - }
640 - &.is-top:nth-child(2) {
641 - padding-left: 0;
642 - }
643 - }
644 -}
645 -
646 -.flow-tab-search {
647 - position: absolute;
648 - top: 0;
649 - right: 0;
650 - width: 100px;
651 - display: flex;
652 - align-items: center;
653 - background-color: #e4e7ed;
654 - padding: 5px 5px 5px 15px;
655 - border-radius: 15px;
656 - color: #b1b3b8;
657 - &:hover {
658 - cursor: pointer;
659 - }
660 -}
661 -
662 -.flow-checkbox-group {
663 - .el-checkbox {
664 - display: flex !important;
665 - }
666 -}
667 -
668 -.search-btn-wrapper {
669 - .el-input-group__append {
670 - width: 100px !important;
671 - padding: 0 !important;
672 - }
673 - .search-group {
674 - display: flex;
675 - text-align: center;
676 - .confirm-btn {
677 - width: 50px;
678 - color: #fff;
679 - background-color: #409eff;
680 - &:hover {
681 - cursor: pointer;
682 - }
683 - }
684 - .cancel-btn {
685 - width: 50px;
686 - &:hover {
687 - cursor: pointer;
688 - }
689 - }
690 - }
691 -}
692 </style> 581 </style>
......
1 <!-- 1 <!--
2 * @Date: 2023-11-01 10:18:53 2 * @Date: 2023-11-01 10:18:53
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-11-01 11:28:37 4 + * @LastEditTime: 2023-11-01 11:33:00
5 * @FilePath: /vue-flow-editor/doc/selectUserView.vue 5 * @FilePath: /vue-flow-editor/doc/selectUserView.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -656,4 +656,115 @@ watch( ...@@ -656,4 +656,115 @@ watch(
656 ); 656 );
657 </script> 657 </script>
658 658
659 -<style lang="less" scoped></style> 659 +<style lang="scss">
660 +.flow-tabs__nav-wrap {
661 + overflow: hidden;
662 + margin-bottom: -1px;
663 + position: relative;
664 +}
665 +.flow-tabs__nav-wrap::after {
666 + content: "";
667 + position: absolute;
668 + left: 0;
669 + bottom: 0;
670 + width: 100%;
671 + height: 2px;
672 + background-color: #e4e7ed;
673 + /* z-index: 1; */
674 +}
675 +
676 +.flow-tabs__nav-scroll {
677 + /* overflow: hidden; */
678 + overflow: scroll;
679 +}
680 +
681 +.flow-tabs__active-bar {
682 + position: absolute;
683 + bottom: 0;
684 + left: 0;
685 + height: 2px;
686 + background-color: #409eff;
687 + z-index: 1;
688 + transition: width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
689 + transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
690 + list-style: none;
691 +}
692 +
693 +.flow-tabs__nav {
694 + display: flex;
695 + white-space: nowrap;
696 + position: relative;
697 + transition: transformX(0px);
698 + float: left;
699 + .flow-tabs__item {
700 + padding: 0 20px;
701 + height: 40px;
702 + box-sizing: border-box;
703 + display: flex;
704 + align-items: center;
705 + justify-content: center;
706 + list-style: none;
707 + font-size: 14px;
708 + font-weight: 500;
709 + color: #303133;
710 + position: relative;
711 + &:hover {
712 + color: #409eff;
713 + cursor: pointer;
714 + }
715 + &.is-active {
716 + color: #409eff;
717 + }
718 + &.is-top:nth-child(2) {
719 + padding-left: 0;
720 + }
721 + }
722 +}
723 +
724 +.flow-tab-search {
725 + position: absolute;
726 + top: 0;
727 + right: 0;
728 + width: 100px;
729 + display: flex;
730 + align-items: center;
731 + background-color: #e4e7ed;
732 + padding: 5px 5px 5px 15px;
733 + border-radius: 15px;
734 + color: #b1b3b8;
735 + &:hover {
736 + cursor: pointer;
737 + }
738 +}
739 +
740 +.flow-checkbox-group {
741 + .el-checkbox {
742 + display: flex !important;
743 + }
744 +}
745 +
746 +.search-btn-wrapper {
747 + .el-input-group__append {
748 + width: 100px !important;
749 + padding: 0 !important;
750 + }
751 + .search-group {
752 + display: flex;
753 + text-align: center;
754 + .confirm-btn {
755 + width: 50px;
756 + color: #fff;
757 + background-color: #409eff;
758 + &:hover {
759 + cursor: pointer;
760 + }
761 + }
762 + .cancel-btn {
763 + width: 50px;
764 + &:hover {
765 + cursor: pointer;
766 + }
767 + }
768 + }
769 +}
770 +</style>
......