new project

src/components/home.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import logoWhite from "../assets/images/logo-white2.png";
 import "../css/home.css";
 
 const navItems = ["探索", "类目", "店铺", "达人", "商品", "视频与广告", "直播"];
@@ -25,7 +26,9 @@ export default function Home() {
     <div className="home">
       <header className="home-header">
         <div className="home-brand">
-          <div className="home-logo">Kalodata</div>
+          <span className="home-logo-wrap">
+            <img className="home-logo" src={logoWhite} alt="Kalodata" />
+          </span>
         </div>
         <nav className="home-nav">
           {navItems.map((item) => (

src/css/home.css

@@ -13,20 +13,28 @@ body {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 20px 48px;
+  padding: 0px 24px;
+  height: 56px;
 }
 
 .home-brand {
   display: flex;
   align-items: center;
   gap: 10px;
-  font-weight: 700;
+}
-  font-size: 18px;
+
+.home-logo-wrap {
+  height: 56px;
+  display: inline-block;
+  overflow: hidden;
 }
 
 .home-logo {
-  color: #1f6feb;
+  height: auto;
-  letter-spacing: 0.5px;
+  width: 128px;
+  display: block;
+  transform: scale(1.4);
+  transform-origin: center;
 }
 
 .home-nav {

webpack.config.js

@@ -25,6 +25,10 @@ module.exports = {
       {
         test: /\.css$/,
         use: ["style-loader", "css-loader"]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/i,
+        type: "asset/resource"
       }
     ]
   },