完善样式

src/common/_common.scss

@@ -2,7 +2,7 @@ $topBarBg: #ffffff;
 $backgroundColor : #fff;
 $tabBackgroundColor: #DBDCE0;
 $tabSelectedBg: #FEFEFE;
-$fontColor:#000000;
+$fontColor:#484848;
 $itemBg: #FEFEFE;
 
 @mixin textOverflow(){

src/component/Content/ContentItem.scss

@@ -6,13 +6,15 @@
 .content-item{
     width: 278px;
     height: 157px;
-    border: 2px solid #B995A1;
+   // border: 2px solid #B995A1;
     border-radius: 5px;
     padding: 10px;
     box-sizing: border-box;
-    background: $itemBg;
+ //   background: $itemBg;
     position: relative;
 
+    border: 1px solid #ccc;
+    background-image: -webkit-linear-gradient(top,#fff,#f9f9f9);
     .content-adminTool{
         width: 36px;
         height: 15px;
@@ -41,7 +43,8 @@
         font-weight: bold;
         font-size: 18px;
         z-index: 1;
-        border: 2px solid #B995A1;
+       // border: 2px solid #B995A1;
+        border-top: 1px solid #ddd;
         cursor: pointer;
     }
 
@@ -64,7 +67,7 @@
         font-size: 17px;
         font-weight: bold;
         line-height: 30px;
-        left: 78px;
+        left: 80px;
         top: 10px;
         cursor: pointer;
         @include textOverflow();
@@ -74,7 +77,8 @@
         width: 100%;
         height: 46px;
         font-size: 12px;
-        border-top: 2px solid #344857;
+       // border-top: 2px solid #344857;
+        border-top: 1px solid #ddd;
         padding-top: 3px;
         margin-top: 3px;
         overflow: hidden;
@@ -97,9 +101,9 @@
         height: 25px;
         position: absolute;
         top: 40px;
-        left: 78px;
+        left: 81px;
         line-height: 25px;
-        font-weight: bold;
+       // font-weight: bold;
         font-size: 14px;
         cursor: pointer;
 

src/component/ToolType/ToolType.scss

@@ -4,17 +4,20 @@
     max-width: 1190px;
     min-width: 612px;
     height: 35px;
-    margin-top: 20px;
+    margin-top: 10px;
     background: $tabBackgroundColor;
     display: flex;
     border-radius: 3px 3px;
-
+    background: linear-gradient( 21deg,#00afcb 1%,#26d6ca)!important;
+    color: #fff;
+    font-size: 14px;
+    padding-top: 4px;
     .item-tool-type {
         width: 80px;
         line-height: 35px;
         text-align: center;
         cursor: pointer;
-        border-bottom: 2px solid #cccccc;
+        // border-bottom: 2px solid #cccccc;
     }
 
     .item-tool-type-selected {
@@ -22,5 +25,6 @@
         border-bottom: none;
         background: $tabSelectedBg;
         border-radius: 3px 3px 0 0;
+        color: #444;
     }
 }

src/page/index/index.jsx

@@ -14,9 +14,19 @@ function Index() {
 
     return (
         <PopContext.Provider value={{hidePop: () => setPop(''), showPop: popName => showPop(popName)}}>
+           
             <div className="index">
+                <div className="welcome-top">
+                    <span>欢迎您！
+                        <span className="welcome-uname">王天宇</span>
+                        <a>退出登录</a>
+                    </span>
+                </div>
                 <div className="nav">
-                    <div className="nav-title"><img src={logo} alt=""/></div>
+                    <div className="nav-title">
+                    <img src={logo} alt=""/>
+                    </div>
+                    <div className="nav-weather"><iframe width="500" height="40" frameborder="0" scrolling="no" hspace="0" src="https://i.tianqi.com/?c=code&a=getcode&id=40&icon=1"></iframe></div>
                 </div>
                 <div className="tool-nav">
                     <ToolType/>
@@ -27,6 +37,9 @@ function Index() {
                 {
                     pop
                 }
+                <div className="index-footer">
+                杭州兑吧网络科技游戏公司版权所有
+                </div>
             </div>
         </PopContext.Provider>
     )

src/page/index/index.scss

@@ -6,12 +6,41 @@ body {
     width: 100%;
     height: 100%;
     color: $fontColor;
+    background: #f1f1f1;
+    font-size: 14px;
+    font-style: normal;
+    .welcome-top{
+        background-color: #444;
+        color: #fff;
+        text-align: right;
+        padding: 4px 10px;
+        .welcome-uname{
+            padding: 0px 4px;
+            font-weight: bold;
+        }
+    }
+    .index-footer{
+        text-align: center;
+    }
+    .nav-weather{
+        float: right;
+        padding-top: 18px;
+        &::after{
+            display: block;
+            clear: both;
+            content: "";
+        }
+    }
+    
     .nav {
         width: 100%;
-        height: 50px;
-        background: $topBarBg;
+        height: 60px;
+        //background: $topBarBg;
         color: #fff;
-
+        max-width: 1190px;
+        min-width: 612px;
+        margin: auto;
+        border-bottom: 2px solid #dedede;
         .nav-title {
             width: 150px;
             height: 50px;
@@ -20,7 +49,8 @@ body {
             font-weight: bold;;
             text-align: center;
             margin-left: 20px;
-
+            float: left;
+            margin-top: 6px;
             img {
                 width: 100%;
             }