讲真视觉有山大那味了，直不愣登的

src/App.css

@@ -3,11 +3,13 @@ a.btn {
 }
 .btn {
   color: white !important;
-  border-radius: .5rem;
+  border-radius: .3rem;
-  padding: .375rem 1.75rem;
+  padding: .375rem 0;
   font-size: 1.1rem;
   cursor: pointer;
   transition: filter .3s ease-out;
+  width: 5em;
+  text-align: center;
 }
 .btn:disabled {
   cursor: not-allowed;
@@ -33,6 +35,13 @@ button.btn {
 .btn-gray {
   background-color: #d9d9d9;
 }
+.btn.btn-light {
+  background-color: #fcfafa;
+  color: #323232 !important;
+}
+.btn.btn-light:active {
+  color: #323232 !important;
+}
 
 .btn-circle {
   border-radius: 50%;
@@ -41,3 +50,7 @@ button.btn {
   padding: 8px;
   box-shadow: 1px 1px 4px 0 #0003;
 }
+.btn-straight {
+  border-radius: .15em;
+  width: 6em;
+}

src/index/index.css

@@ -1,42 +1,38 @@
-.poster{
+.poster {
-    width: 100%;
+  width: 100%;
-    height: 408px;
+  height: 400px;
-    background-color: #80010A;
+  background-color: #80010a;
-    display: flex;
+  display: flex;
-    justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
 }
-.img-poster{
+.img-poster {
- padding-left: 11%;
+  height: 100%;
 }
-.btn-partIn{
+.btn-partIn {
-    border-radius: 5px;
+  position: absolute;
-    border: 1px; 
+  right: 40px;
-    height: 45px;
+  bottom: 20px;
-    width: 9%;
-    min-width: 130px;
-    font-size: 20px;
-    font-weight: bold;
-    background-color: #FCFAFA;
-    color:#323232;
-    margin-top: 330px;
-    margin-left:11%;
-    
 }
-.message{
+.message {
-    width: 50%;
+  width: calc(50% - 60px);
-    padding-left: 10%;
+  margin-top: 30px;
-    margin-top: 33px;
-    font-weight: bold;
 }
 
-.container{
+.container {
-    display: flex;
+  display: flex;
-    width: 100%;
+  width: 1000px;
-    height: 800px;
+  margin: 0 auto;
+  justify-content: space-between;
 }
-.cut-line{
+.cut-line {
-    display: flex;
+  display: flex;
-    height: 1px;
+  height: 1px;
-    width: 80%;
+  width: 100%;
-    background-color: #E6E6E6;
+  background-color: #e6e6e6;
+}
+.little-title {
+  padding: .75em .5em;
+  font-size: 18px;
 }

src/index/index.js

@@ -1,19 +1,19 @@
 import { Component } from 'react';
 import { Link } from '../components/SingleRouter/SingleRouter';
+import { images } from '../resources.json';
 import './index.css';
 
 export class AppContainer extends Component {
   render() {
     return (
       <div className="App">
-          <div className="poster">
+        <div className="poster">
-          <img src={images.poster}  className="img-poster" />
+          <img src={images.poster} className="img-poster" alt="海报" />
-          <button className="btn-partIn" onClick={this.handlePartIn} >点击参加</button>
+          <Link to="/upload" className="btn btn-light btn-straight btn-partIn">点击参加</Link>
-        {/* <Link to="/upload" className="btn btn-primary">前往</Link> */}
         </div>
         <div className="container">
-        <div className="message"><div className="little-title">精选留言</div><div className="cut-line"></div>{}</div>
+          <div className="message"><div className="little-title">精选留言</div><div className="cut-line"></div>{ }</div>
-        <div className="message"><div className="little-title">精选图片</div><div className="cut-line"></div>{}</div>
+          <div className="message"><div className="little-title">精选图片</div><div className="cut-line"></div>{ }</div>
         </div>
       </div>
     );