我创建了一个项目,添加了所有引用,并在 package.json 中添加了 highcharts 引用。但显示要求未找到。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
body {
background-color: #ffffff; /* White background color for the whole page */
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
color: #333;
font-family: 'Poppins', sans-serif;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
.logo {
width: 150px;
}
.contact-info {
p {
margin: 0;
font-size: 16px;
font-weight: bold;
color: #007bff; /* Blue color as shown in the mockup */
}
}
}
.main-content {
.promo-section {
text-align: center;
padding: 40px 20px;
background: #f0f4fc; /* Light blue background as shown in the mockup */
border-radius: 8px;
margin-bottom: 20px;
.main-title {
font-size: 2em;
font-weight: bold;
margin-bottom: 10px;
color: #1d4ed8; /* Dark blue color for the title */
}
.main-description {
font-size: 1.2em;
color: #1e3a8a; /* Slightly darker blue for the description */
}
}
.how-it-works, .how-to-qualify {
background: #4e46e5; /* Purple background for these sections */
border-radius: 8px;
padding: 20px;
h2 {
font-size: 1.5em;
margin-bottom: 20px;
color: #ffffff; /* White color for the section titles */
text-align: center;
}
.steps, .criteria {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
.step, .criterion {
flex: 1;
text-align: center;
padding: 20px;
margin: 0 10px;
background-color: #ffffff; /* White background color */
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #4e46e5; /* Purple text color */
.step-title, .criterion-title {
font-weight: bold;
}
p {
margin: 5px 0;
}
}
}
}
.qualifying-locations {
padding: 20px 0;
h2 {
font-size: 1.5em;
margin-bottom: 20px;
color: #4e46e5; /* Purple color for the section titles */
text-align: center;
}
.locations {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
.column {
flex: 1;
min-width: 280px; /* Ensure columns don't get too narrow */
}
.state {
background-color: #ffffff; /* White background color */
border: 1px solid #4e46e5; /* Purple border */
border-radius: 8px;
padding: 10px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
h3 {
margin-top: 0;
font-size: 1.2em;
color: #4e46e5; /* Purple color for the state names */
}
ul {
padding-left: 20px;
list-style-type: disc;
color: #495057; /* Dark grey color for the cities */
}
li {
margin-bottom: 5px;
}
}
}
}
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
}