Changed Header Image and Brand Color #39 (#46)

* Changed header image * Changed brand color
wuhan2020 · Feb 3, 2020 · 25fc7a9 · 25fc7a9
1 parent 4cff9b5
commit 25fc7a9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 27 deletions.
diff --git a/images/wuhan2020-header-image.png b/images/wuhan2020-header-image.png
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -90,31 +90,8 @@ class Home extends Language {
                                 </a>
                             </div>
                         </div>
-                        <div className="animation">
-                            <div className="outer-circle"/>
-                            <div className="rotate-circle">
-                                <svg viewBox="0 0 404 404" xmlns="http://www.w3.org/2000/svg">
-                                    <defs>
-                                        <linearGradient
-                                            id="linear"
-                                            x1="0%"
-                                            y1="0%"
-                                            x2="100%"
-                                            y2="0%"
-                                        >
-                                            <stop offset="0%" stopColor="rgba(17, 186, 250, 1)"/>
-                                            <stop offset="50%" stopColor="rgba(17, 186, 250, 0.1)"/>
-                                            <stop offset="50%" stopColor="rgba(17, 186, 250, 1)"/>
-                                            <stop offset="100%" stopColor="rgba(17, 186, 250, 0.1)"/>
-                                        </linearGradient>
-                                    </defs>
-                                    <circle cx="202" cy="202" r="200" fill="rgba(0, 0, 0, 0)" stroke="url(#linear)"
-                                            strokeWidth="4"/>
-                                </svg>
-                            </div>
-                            <img className="img3" src="//img.alicdn.com/tfs/TB1EBu.JgHqK1RjSZJnXXbNLpXa-914-1156.png"/>
-                            <img className="img4" src="//img.alicdn.com/tfs/TB115i2JmzqK1RjSZPxXXc4tVXa-186-78.png"/>
-                            <img className="img5" src="//img.alicdn.com/tfs/TB115i2JmzqK1RjSZPxXXc4tVXa-186-78.png"/>
+                        <div className="header-image">
+                            <img src="/images/wuhan2020-header-image.png"/>
                         </div>
                     </div>
                 </section>

diff --git a/src/pages/home/index.scss b/src/pages/home/index.scss
@@ -183,12 +183,27 @@
         }
       }
     }
+    .header-image {
+      width: 546px;
+      height: 578px;
+      position: absolute;
+      top: 146px;
+      right: 0;
+      img {
+        position: absolute;
+        height: 578px;
+        left: 50%;
+        transform: translateX(-50%);
+        top: 0;
+        z-index: 1;
+      }
+    }
     @media screen and (max-width: 768px) {
       .vertical-middle {
         text-align: center;
         width: 100%;
       }
-      .animation {
+      .header-image {
         display: none;
       }
     }

diff --git a/src/variables.scss b/src/variables.scss
@@ -1,5 +1,5 @@
 // 品牌色
-$brandColor: #0054D1;
+$brandColor: #FF6440;
 // 渐变起始色
 $startColor: #0054D1;
 // 渐变结束色