|
|
@@ -115,7 +115,7 @@
|
|
|
}
|
|
|
|
|
|
.record5 {
|
|
|
- width: 102px;
|
|
|
+ width: 104px;
|
|
|
height: 25px;
|
|
|
transform: translate(-123px, -73px);
|
|
|
background: url('../../../../assets/img/A7_discover_record5.png') no-repeat center center;
|
|
|
@@ -399,6 +399,135 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.DiscoverEn {
|
|
|
+ :global {
|
|
|
+ .left,
|
|
|
+ .left2 {
|
|
|
+ .record {
|
|
|
+ width: fit-content;
|
|
|
+ height: fit-content;
|
|
|
+ max-width: 250px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ transition: opacity 0.5s;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 9px;
|
|
|
+ max-height: 77px;
|
|
|
+ overflow: auto;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ text-align: right;
|
|
|
+ font-size: 9px;
|
|
|
+ line-height: 14px;
|
|
|
+ color: rgba(255, 223, 174, 1);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .record1 {
|
|
|
+ width: 200px;
|
|
|
+ height: 75px;
|
|
|
+ transform: translate(-149px, -104px);
|
|
|
+ background: url('../../../../assets/img/A7_discover_record1.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .record2 {
|
|
|
+ width: 130px;
|
|
|
+ height: 60px;
|
|
|
+ transform: translate(0%, 94px);
|
|
|
+ background: url('../../../../assets/img/A7_discover_record2.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .btnContainer {
|
|
|
+ width: 100%;
|
|
|
+ height: 12px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 15px;
|
|
|
+ height: 12px;
|
|
|
+ line-height: 10px;
|
|
|
+
|
|
|
+ & > img {
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .record3 {
|
|
|
+ width: 182px;
|
|
|
+ height: 44px;
|
|
|
+ transform: translate(11px, -26px);
|
|
|
+ background: url('../../../../assets/img/A7_discover_record3.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 7px 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .record4 {
|
|
|
+ width: 140px;
|
|
|
+ height: 42px;
|
|
|
+ padding: 0 10px;
|
|
|
+ padding-top: 14px;
|
|
|
+
|
|
|
+ transform: translate(-120px, 84px);
|
|
|
+ background: url('../../../../assets/img/A7_discover_record4.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ height: 100%;
|
|
|
+ line-height: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .record5 {
|
|
|
+ width: 115px;
|
|
|
+ height: 25px;
|
|
|
+ transform: translate(-136px, -73px);
|
|
|
+ background: url('../../../../assets/img/A7_discover_record5.png') no-repeat center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ height: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .item {
|
|
|
+ .text {
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
// ------------移动端
|
|
|
.DiscoverMo {
|
|
|
:global {
|
|
|
@@ -550,3 +679,155 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.DiscoverMoEn {
|
|
|
+ :global {
|
|
|
+ .right {
|
|
|
+ .item {
|
|
|
+ .title {
|
|
|
+ .icon {
|
|
|
+ position: relative;
|
|
|
+ top: -1px;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-top: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .from {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ .record1 {
|
|
|
+ width: 230px;
|
|
|
+ height: 127px;
|
|
|
+ transform: translate(-166px, -139px);
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .record2 {
|
|
|
+ padding-top: 15px;
|
|
|
+ width: 190px;
|
|
|
+ height: 80px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btnContainer {
|
|
|
+ .icon {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: relative;
|
|
|
+ left: -2px;
|
|
|
+ top: -1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .left2 {
|
|
|
+ .record5 {
|
|
|
+ padding-top: 2px;
|
|
|
+ width: 163px;
|
|
|
+ height: 36px;
|
|
|
+ transform: translate(-176px, -83px);
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .record3 {
|
|
|
+ width: 205px;
|
|
|
+ height: 87px;
|
|
|
+ transform: translate(-3px, -69px);
|
|
|
+ padding-top: 2px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 6px 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .record4 {
|
|
|
+ width: 192px;
|
|
|
+ height: 55px;
|
|
|
+ transform: translate(-145px, 84px);
|
|
|
+ padding-top: 16px;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .point4 {
|
|
|
+ transform: translate(-34px, 47px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .back {
|
|
|
+ width: 90px;
|
|
|
+ height: 40px;
|
|
|
+
|
|
|
+ .txt {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .scroll {
|
|
|
+ .item {
|
|
|
+ .text {
|
|
|
+ width: 90%;
|
|
|
+ .text_txt {
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .direct {
|
|
|
+ left: 1%;
|
|
|
+ bottom: 1%;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|