|
@@ -1,64 +1,235 @@
|
|
|
-.hc-search-hot-key {
|
|
|
+.hc-using-query-page {
|
|
|
position: relative;
|
|
|
- color: #9A9A9A;
|
|
|
- padding: 16px;
|
|
|
- font-size: 14px;
|
|
|
-}
|
|
|
-
|
|
|
-.hc-search-screening-item {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 20px;
|
|
|
- font-size: 14px;
|
|
|
- .title {
|
|
|
- position: relative;
|
|
|
- }
|
|
|
- .screening-key {
|
|
|
+ height:100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .hc-query-card-box {
|
|
|
position: relative;
|
|
|
- padding: 1px 12px;
|
|
|
- border-radius: 100px;
|
|
|
- cursor: pointer;
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- transition: background 0.2s, color 0.2s;
|
|
|
- &:hover {
|
|
|
- background: var(--el-color-primary-light-8);
|
|
|
+ flex-direction: column;
|
|
|
+ //筛选关键词
|
|
|
+ .hc-tag-flex-box {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ flex-shrink: 0;
|
|
|
+ .scrollbar-content {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
}
|
|
|
- &.cut {
|
|
|
- background: var(--el-color-primary);
|
|
|
- color: white;
|
|
|
- cursor: default;
|
|
|
+ //搜索框
|
|
|
+ .hc-query-input-box {
|
|
|
+ position: relative;
|
|
|
+ flex-shrink: 0;
|
|
|
+ .el-input {
|
|
|
+ --el-input-border-radius: 10px;
|
|
|
+ --el-input-height: 65px;
|
|
|
+ font-size: 16px;
|
|
|
+ .el-input__wrapper {
|
|
|
+ padding-right: 80px;
|
|
|
+ }
|
|
|
+ .el-input-group__prepend {
|
|
|
+ padding: 0 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ transition: .1s;
|
|
|
+ .prepend-filtering {
|
|
|
+ .name {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: #dedede;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input-group__append {
|
|
|
+ padding: 0;
|
|
|
+ .append-search-btn-box {
|
|
|
+ position: relative;
|
|
|
+ display: block;
|
|
|
+ .search-btn {
|
|
|
+ border-radius: 0 10px 0 0;
|
|
|
+ }
|
|
|
+ .search-btn + .search-btn {
|
|
|
+ margin-top: 0.5px;
|
|
|
+ border-radius: 0 0 10px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-input-group__append .el-button,
|
|
|
+ .el-input-group__append .el-input,
|
|
|
+ .el-input-group__prepend .el-button,
|
|
|
+ .el-input-group__prepend .el-input {
|
|
|
+ font-size: var(--el-font-size-base);
|
|
|
+ }
|
|
|
+ .el-input-group__append .el-button,
|
|
|
+ .el-input-group__append .el-select,
|
|
|
+ .el-input-group__prepend .el-button,
|
|
|
+ .el-input-group__prepend .el-select {
|
|
|
+ display: block;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .el-input-group__append button.el-button,
|
|
|
+ .el-input-group__append button.el-button:hover,
|
|
|
+ .el-input-group__append div.el-select .el-input__wrapper,
|
|
|
+ .el-input-group__append div.el-select:hover .el-input__wrapper,
|
|
|
+ .el-input-group__prepend button.el-button,
|
|
|
+ .el-input-group__prepend button.el-button:hover,
|
|
|
+ .el-input-group__prepend div.el-select .el-input__wrapper,
|
|
|
+ .el-input-group__prepend div.el-select:hover .el-input__wrapper {
|
|
|
+ background-color: var(--el-button-bg-color);
|
|
|
+ color: var(--el-button-text-color);
|
|
|
+ font-weight: 400;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .el-input-group__append button.el-button:hover,
|
|
|
+ .el-input-group__append div.el-select:hover .el-input__wrapper,
|
|
|
+ .el-input-group__prepend button.el-button:hover,
|
|
|
+ .el-input-group__prepend div.el-select:hover .el-input__wrapper {
|
|
|
+ background-color: var(--el-button-hover-bg-color);
|
|
|
+ }
|
|
|
+ .el-input-group__append .el-button.is-disabled,
|
|
|
+ .el-input-group__append .el-button.is-disabled:focus,
|
|
|
+ .el-input-group__append .el-button.is-disabled:hover {
|
|
|
+ color: var(--el-button-disabled-text-color);
|
|
|
+ cursor: not-allowed;
|
|
|
+ background-image: none;
|
|
|
+ background-color: var(--el-button-disabled-bg-color);
|
|
|
+ border-color: var(--el-button-disabled-border-color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-icon-mic {
|
|
|
+ color: var(--hc-text-color);
|
|
|
+ position: absolute;
|
|
|
+ top: 2px;
|
|
|
+ right: 102px;
|
|
|
+ height: 61px;
|
|
|
+ width: 61px;
|
|
|
+ border-radius: 4px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 28px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: .1s;
|
|
|
+ &:hover {
|
|
|
+ background: var(--el-color-primary-light-8);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .screening-key + .screening-key {
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-.hc-search-screening-item + .hc-search-screening-item {
|
|
|
- margin-top: 14px;
|
|
|
-}
|
|
|
-
|
|
|
+ //筛选搜索
|
|
|
+ .hc-query-filtering-collapse-box {
|
|
|
+ position: relative;
|
|
|
+ flex-shrink: 0;
|
|
|
+ .filtering-collapse {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 99;
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: var(--hc-shadow);
|
|
|
+ margin-top: 5px;
|
|
|
+ .el-collapse {
|
|
|
+ --el-collapse-header-height: 0;
|
|
|
+ --el-collapse-border-color: inherit;
|
|
|
+ --el-collapse-header-bg-color: inherit;
|
|
|
+ --el-collapse-header-text-color: inherit;
|
|
|
+ --el-collapse-header-font-size: inherit;
|
|
|
+ --el-collapse-content-bg-color: #E7EEF4;
|
|
|
+ --el-collapse-content-font-size: inherit;
|
|
|
+ --el-collapse-content-text-color: inherit;
|
|
|
+ border: 0 !important;
|
|
|
+ }
|
|
|
+ .el-collapse-item__header {
|
|
|
+ display: block;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ .hc-collapse-item-header {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .hc-search-filtering-title {
|
|
|
+ margin-right: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ .name {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-collapse-item__arrow {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .el-collapse-item__wrap {
|
|
|
+ border-bottom: 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ .el-collapse-item__content {
|
|
|
+ padding-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-.hc-query-content-header-box {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- padding: 16px 0;
|
|
|
- margin-bottom: 24px;
|
|
|
- align-items: center;
|
|
|
- border-bottom: 1px dashed #dcdcdc;
|
|
|
- .header {
|
|
|
- position: relative;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .extra {
|
|
|
- position: relative;
|
|
|
+ .hc-search-hot-key {
|
|
|
+ position: relative;
|
|
|
+ color: #9A9A9A;
|
|
|
+ padding: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .hc-search-screening-item {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ .title {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .screening-key {
|
|
|
+ position: relative;
|
|
|
+ padding: 1px 12px;
|
|
|
+ border-radius: 100px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ transition: background 0.2s, color 0.2s;
|
|
|
+ &:hover {
|
|
|
+ background: var(--el-color-primary-light-8);
|
|
|
+ }
|
|
|
+ &.cut {
|
|
|
+ background: var(--el-color-primary);
|
|
|
+ color: white;
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .screening-key + .screening-key {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hc-search-screening-item + .hc-search-screening-item {
|
|
|
+ margin-top: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //数据内容区域
|
|
|
+ .hc-gather-card-box {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ flex-basis: auto;
|
|
|
+ margin-top: 14px;
|
|
|
+ .hc-gather-card-body {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.hc-gather-card-box {
|
|
|
position: relative;
|
|
|
- height: calc(100% - 180px);
|
|
|
+ //height: calc(100% - 180px);
|
|
|
.hc-card-item-main {
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
@@ -430,163 +601,8 @@
|
|
|
}
|
|
|
|
|
|
|
|
|
-//tag框
|
|
|
-.flex_box{
|
|
|
- position: absolute;
|
|
|
- top: -30px;
|
|
|
- z-index: 1;
|
|
|
-}
|
|
|
-//搜索框
|
|
|
-.hc-query-input-box {
|
|
|
- position: relative;
|
|
|
- top: 24px;
|
|
|
- margin-bottom: 20px;
|
|
|
- .el-input {
|
|
|
- --el-input-border-radius: 10px;
|
|
|
- --el-input-height: 65px;
|
|
|
- font-size: 16px;
|
|
|
- .el-input__wrapper {
|
|
|
- padding-right: 80px;
|
|
|
- }
|
|
|
- .el-input-group__prepend {
|
|
|
- padding: 0 12px;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- user-select: none;
|
|
|
- transition: .1s;
|
|
|
- .prepend-filtering {
|
|
|
- .name {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- background-color: #dedede;
|
|
|
- }
|
|
|
- }
|
|
|
- .el-input-group__append {
|
|
|
- padding: 0;
|
|
|
- .append-search-btn-box {
|
|
|
- position: relative;
|
|
|
- display: block;
|
|
|
- .search-btn {
|
|
|
- border-radius: 0 10px 0 0;
|
|
|
- }
|
|
|
- .search-btn + .search-btn {
|
|
|
- margin-top: 0.5px;
|
|
|
- border-radius: 0 0 10px 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-input-group__append .el-button,
|
|
|
- .el-input-group__append .el-input,
|
|
|
- .el-input-group__prepend .el-button,
|
|
|
- .el-input-group__prepend .el-input {
|
|
|
- font-size: var(--el-font-size-base);
|
|
|
- }
|
|
|
- .el-input-group__append .el-button,
|
|
|
- .el-input-group__append .el-select,
|
|
|
- .el-input-group__prepend .el-button,
|
|
|
- .el-input-group__prepend .el-select {
|
|
|
- display: block;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- .el-input-group__append button.el-button,
|
|
|
- .el-input-group__append button.el-button:hover,
|
|
|
- .el-input-group__append div.el-select .el-input__wrapper,
|
|
|
- .el-input-group__append div.el-select:hover .el-input__wrapper,
|
|
|
- .el-input-group__prepend button.el-button,
|
|
|
- .el-input-group__prepend button.el-button:hover,
|
|
|
- .el-input-group__prepend div.el-select .el-input__wrapper,
|
|
|
- .el-input-group__prepend div.el-select:hover .el-input__wrapper {
|
|
|
- background-color: var(--el-button-bg-color);
|
|
|
- color: var(--el-button-text-color);
|
|
|
- font-weight: 400;
|
|
|
- border: 0;
|
|
|
- }
|
|
|
- .el-input-group__append button.el-button:hover,
|
|
|
- .el-input-group__append div.el-select:hover .el-input__wrapper,
|
|
|
- .el-input-group__prepend button.el-button:hover,
|
|
|
- .el-input-group__prepend div.el-select:hover .el-input__wrapper {
|
|
|
- background-color: var(--el-button-hover-bg-color);
|
|
|
- }
|
|
|
- .el-input-group__append .el-button.is-disabled,
|
|
|
- .el-input-group__append .el-button.is-disabled:focus,
|
|
|
- .el-input-group__append .el-button.is-disabled:hover {
|
|
|
- color: var(--el-button-disabled-text-color);
|
|
|
- cursor: not-allowed;
|
|
|
- background-image: none;
|
|
|
- background-color: var(--el-button-disabled-bg-color);
|
|
|
- border-color: var(--el-button-disabled-border-color);
|
|
|
- }
|
|
|
- }
|
|
|
- .hc-icon-mic {
|
|
|
- color: var(--hc-text-color);
|
|
|
- position: absolute;
|
|
|
- top: 2px;
|
|
|
- right: 102px;
|
|
|
- height: 61px;
|
|
|
- width: 61px;
|
|
|
- border-radius: 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 28px;
|
|
|
- cursor: pointer;
|
|
|
- transition: .1s;
|
|
|
- &:hover {
|
|
|
- background: var(--el-color-primary-light-8);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-//筛选搜索
|
|
|
-.hc-query-card-box .hc-query-filtering-collapse-box {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- z-index: 99;
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: var(--hc-shadow);
|
|
|
- margin-top: 5px;
|
|
|
- .el-collapse {
|
|
|
- --el-collapse-header-height: 0;
|
|
|
- --el-collapse-border-color: inherit;
|
|
|
- --el-collapse-header-bg-color: inherit;
|
|
|
- --el-collapse-header-text-color: inherit;
|
|
|
- --el-collapse-header-font-size: inherit;
|
|
|
- --el-collapse-content-bg-color: #E7EEF4;
|
|
|
- --el-collapse-content-font-size: inherit;
|
|
|
- --el-collapse-content-text-color: inherit;
|
|
|
- border: 0 !important;
|
|
|
- }
|
|
|
- .el-collapse-item__header {
|
|
|
- display: block;
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
- .hc-collapse-item-header {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .hc-search-filtering-title {
|
|
|
- margin-right: 24px;
|
|
|
- font-size: 16px;
|
|
|
- color: var(--el-color-primary);
|
|
|
- .name {
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .el-collapse-item__arrow {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .el-collapse-item__wrap {
|
|
|
- border-bottom: 0;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
- .el-collapse-item__content {
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
|
|
|
|
|
|
.hc-query-card-box.hc-card-box.el-card {
|