|
@@ -1,152 +1,156 @@
|
|
|
.container {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 20Px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 20Px;
|
|
|
}
|
|
|
|
|
|
.tools {
|
|
|
- padding: 32px 32px 20px 32px;
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- flex-shrink: 0;
|
|
|
+ padding: 32px 32px 20px 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ :global {
|
|
|
+ .n-input {
|
|
|
+ margin-left: auto;
|
|
|
+ width: 360px;
|
|
|
+ }
|
|
|
|
|
|
- :global {
|
|
|
- .n-input {
|
|
|
- margin-left: auto;
|
|
|
- width: 360px;
|
|
|
- }
|
|
|
-
|
|
|
- .n-button.n-button--disabled {
|
|
|
- cursor: initial;
|
|
|
- padding: 0;
|
|
|
- }
|
|
|
+ .n-button.n-button--disabled {
|
|
|
+ cursor: initial;
|
|
|
+ padding: 0;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .tagWrap {
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 20Px;
|
|
|
+ }
|
|
|
|
|
|
- .tagWrap {
|
|
|
- flex: 1;
|
|
|
- margin-right: 20Px;
|
|
|
+ .tags {
|
|
|
+ &:first-child {
|
|
|
+ padding-top: 6px;
|
|
|
}
|
|
|
|
|
|
- .tags {
|
|
|
- padding: 12px 0;
|
|
|
-
|
|
|
- :global {
|
|
|
- .n-button {
|
|
|
- min-width: 102px;
|
|
|
- height: 37px;
|
|
|
- padding: 0 24px;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
+ padding: 12px 0;
|
|
|
+
|
|
|
+ :global {
|
|
|
+ .n-button {
|
|
|
+ min-width: 102px;
|
|
|
+ height: 37px;
|
|
|
+ padding: 0 24px;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
- flex: 1;
|
|
|
- padding: 20Px 36Px 36Px 36Px;
|
|
|
+ flex: 1;
|
|
|
+ padding: 20Px 36Px 36Px 36Px;
|
|
|
}
|
|
|
|
|
|
.item {
|
|
|
+ position: relative;
|
|
|
+ width: 214Px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all .3s;
|
|
|
+
|
|
|
+ .cover {
|
|
|
position: relative;
|
|
|
- width: 214Px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all .3s;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 107Px;
|
|
|
+ left: 0;
|
|
|
+ width: 214Px;
|
|
|
+ height: 214Px;
|
|
|
+ background: #DDF2FF;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemImg {
|
|
|
+ position: relative;
|
|
|
+ width: 158Px;
|
|
|
+ height: 223Px;
|
|
|
+ margin: auto;
|
|
|
+ background-color: #EDEFF2;
|
|
|
+ background-image: url('./icon_default.svg');
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 4Px;
|
|
|
+ right: -4Px;
|
|
|
+ width: 4Px;
|
|
|
+ height: calc(100% - 8Px);
|
|
|
+ background-color: #C5C5C5;
|
|
|
+ z-index: 1;
|
|
|
+
|
|
|
|
|
|
- .cover {
|
|
|
- position: relative;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 107Px;
|
|
|
- left: 0;
|
|
|
- width: 214Px;
|
|
|
- height: 214Px;
|
|
|
- background: #DDF2FF;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
- &:hover {
|
|
|
- transform: scale(1.1);
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: 2Px;
|
|
|
+ right: -2Px;
|
|
|
+ width: 4Px;
|
|
|
+ height: calc(100% - 4Px);
|
|
|
+ background-color: #E7E7E7;
|
|
|
+ z-index: 2;
|
|
|
}
|
|
|
|
|
|
- .itemImg {
|
|
|
- position: relative;
|
|
|
- width: 158Px;
|
|
|
- height: 223Px;
|
|
|
- margin: auto;
|
|
|
- background-color: #EDEFF2;
|
|
|
- background-image: url('./icon_default.svg');
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-position: center center;
|
|
|
-
|
|
|
- &::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 4Px;
|
|
|
- right: -4Px;
|
|
|
- width: 4Px;
|
|
|
- height: calc(100% - 8Px);
|
|
|
- background-color: #C5C5C5;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- top: 2Px;
|
|
|
- right: -2Px;
|
|
|
- width: 4Px;
|
|
|
- height: calc(100% - 4Px);
|
|
|
- background-color: #E7E7E7;
|
|
|
- z-index: 2;
|
|
|
- }
|
|
|
-
|
|
|
- .itemBg {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 4;
|
|
|
- background-repeat: no-repeat;
|
|
|
- background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
|
|
|
- background-size: 50% 100%, 50% 100%;
|
|
|
- background-position: 0% top, 9% top;
|
|
|
- }
|
|
|
-
|
|
|
- :global {
|
|
|
- .n-image {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 3;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- transition: opacity .3s;
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
-
|
|
|
- img[data-loaded="true"] {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
+ .itemBg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 4;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
|
|
|
+ background-size: 50% 100%, 50% 100%;
|
|
|
+ background-position: 0% top, 9% top;
|
|
|
+ }
|
|
|
|
|
|
+ :global {
|
|
|
+ .n-image {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 3;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
+ img {
|
|
|
+ transition: opacity .3s;
|
|
|
+ opacity: 0;
|
|
|
}
|
|
|
|
|
|
- .itemName {
|
|
|
- margin-top: 16Px;
|
|
|
- font-size: 16Px;
|
|
|
- font-weight: 500;
|
|
|
- color: #333;
|
|
|
- text-align: center;
|
|
|
+ img[data-loaded="true"] {
|
|
|
+ opacity: 1;
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemName {
|
|
|
+ margin-top: 16Px;
|
|
|
+ font-size: 16Px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
}
|