suomingxiang 21 години тому
джерело
коміт
b632603b25

BIN
dev/static/font/DIN-Medium-2.otf Переглянути файл


+ 4
- 0
dev/static/font/cavan.css Переглянути файл

@@ -18,4 +18,8 @@
18 18
 @font-face {
19 19
     font-family: 'SemiBold';
20 20
     src: url('./CrimsonText-SemiBold-6.ttf') format('truetype');
21
+}
22
+@font-face {
23
+    font-family: 'DIN-Medium';
24
+    src: url('./DIN-Medium-2.otf') format('truetype');
21 25
 }

BIN
dev/static/images/hgkf/budai.png Переглянути файл


BIN
dev/static/images/hgkf/yezi.png Переглянути файл


+ 1
- 0
src/pages/HogoodCoffee/index.html Переглянути файл

@@ -283,6 +283,7 @@
283 283
 
284 284
                 </video>
285 285
             </div>
286
+            <img class="yezi" src="../static/images/hgkf/yezi.png" alt="">
286 287
         </div>
287 288
 
288 289
     </div>

+ 121
- 10
src/pages/HogoodCoffee/index.less Переглянути файл

@@ -13,6 +13,7 @@
13 13
     }
14 14
 
15 15
     .logo {
16
+        transform: scale(.8);
16 17
         width: 339px;
17 18
         height: 106px;
18 19
         background: url("../common/images/hgkf.png") no-repeat center;
@@ -80,7 +81,7 @@
80 81
         .contents{
81 82
             width: 1300px;
82 83
             margin: 0 auto;
83
-            line-height: 1.5;
84
+            line-height: 50px;
84 85
             font-size: 26px;
85 86
             color: #000;
86 87
             .flexBox{
@@ -117,7 +118,9 @@
117 118
                 font-family: "思源";
118 119
                 padding-right: 25px;
119 120
                 span{
120
-                    font-family: "DINBOLD";
121
+                    font-weight: 400;
122
+                    font-family: "DIN-Medium";
123
+                    white-space: nowrap;
121 124
                 }
122 125
             }
123 126
             .p5{
@@ -207,10 +210,25 @@
207 210
         width: 100%;
208 211
         height: 920px;
209 212
         max-width: 1920px;
210
-        background: url("../common/images/tbBj.png") no-repeat center;
211
-        background-size: 1920px 838px;
212
-        background-position: 0 0;
213
+        // background: url("../common/images/tbBj.png") no-repeat center;
214
+        // background-size: 1920px 838px;
215
+        // background-position: 0 0;
216
+        position: relative;
213 217
 
218
+        .budai{
219
+            position: absolute;
220
+            width: 167px;
221
+            height: 150px;
222
+            left: 0;
223
+            bottom: 120px;
224
+        }
225
+        .yezi{
226
+            position: absolute;
227
+            width: 186px;
228
+            height: 440px;
229
+            right: 0;
230
+            top: 0;
231
+        }
214 232
         .title {
215 233
             font-size: 70px;
216 234
             color: #000000;
@@ -491,24 +509,72 @@ p{
491 509
 }
492 510
 
493 511
 
494
-
512
+@media screen and (min-width: 1500px) and (max-width: 1900px) {
513
+    .hg-header{
514
+        .headerPC{
515
+            height: 80px;
516
+            padding: 0 50px;
517
+        }
518
+        .logo{
519
+            transform: scale(0.7);
520
+        }
521
+        .menu {
522
+            &>div {
523
+                &>a {
524
+                    font-size: 20px;
525
+                }
526
+            }
527
+        }
528
+    }
529
+    .main{
530
+        
531
+        .chart{
532
+            background-size: 100% auto;
533
+            .tbGif{
534
+                width: 80%;
535
+                height: auto;
536
+            }
537
+        }
538
+    }
539
+}
495 540
 @media screen and (min-width: 1300px) and (max-width: 1600px) {
496 541
     .hg-header{
497 542
         .headerPC{
543
+            height: 80px;
544
+            
498 545
             padding: 0 50px;
499 546
         }
500 547
         .logo{
501
-            transform: scale(0.5);
548
+            transform: scale(0.7);
549
+            margin-left: -135px;
502 550
         }
503 551
         .menu {
504 552
             &>div {
505 553
                 &>a {
506
-                    font-size: 16px;
554
+                    font-size: 20px;
507 555
                 }
508 556
             }
509 557
         }
510 558
     }
511 559
     .main{
560
+        .content{
561
+            .contents{
562
+                width: 95%;
563
+                .p6{
564
+                    font-size: 22px;
565
+                    white-space: nowrap;
566
+                }
567
+                .p3{
568
+                    width: 600px;
569
+                }
570
+                .p5{
571
+                    width: 1100px;
572
+                }
573
+                .p4{
574
+                    padding-right: 0;
575
+                }
576
+            }
577
+        }
512 578
         .chart{
513 579
             background-size: 100% auto;
514 580
             .tbGif{
@@ -522,20 +588,48 @@ p{
522 588
 @media screen and (min-width: 801px) and (max-width: 1300px) {
523 589
     .hg-header{
524 590
         .headerPC{
591
+            height: 80px;
525 592
             padding: 0 50px;
526 593
         }
527 594
         .logo{
528
-            transform: scale(0.5);
595
+            transform: scale(0.7);
596
+            margin-left: -115px;
529 597
         }
530 598
         .menu {
531 599
             &>div {
532 600
                 &>a {
533
-                    font-size: 16px;
601
+                    font-size: 18px;
534 602
                 }
535 603
             }
536 604
         }
537 605
     }
538 606
     .main{
607
+        .atlas{
608
+            .atlasCon{
609
+                width: 95%;
610
+                    margin: 0 auto;
611
+                .imgCon{
612
+                    
613
+                    .imgLi{
614
+                        height: auto;
615
+                        width: calc(50% - 20px);
616
+                    }
617
+                }
618
+            }
619
+        }
620
+        .content{
621
+            .contents{
622
+                width: 95%;
623
+                .p6{
624
+                    font-size: 22px;
625
+                }
626
+                .p2{
627
+                    img{
628
+                        transform: scale(0.8);
629
+                    }
630
+                }
631
+            }
632
+        }
539 633
         .chart{
540 634
             background-size: 100% auto;
541 635
             .tbGif{
@@ -544,6 +638,23 @@ p{
544 638
             }
545 639
         }
546 640
     }
641
+    .banner{
642
+        .bannerSwiper{
643
+            transform: scale(0.8);
644
+        }
645
+        .btn-prev,
646
+        .btn-next{
647
+            top: 283px;
648
+            transform: scale(0.8);
649
+
650
+        }
651
+        .btn-prev{
652
+            margin-left: -525px;
653
+        }
654
+        .btn-next{
655
+            margin-left:445px ;
656
+        }
657
+    }
547 658
 
548 659
 }
549 660
 

Завантаження…
Відмінити
Зберегти