4/16

css/index.css

@@ -19,19 +19,21 @@ header{
     box-shadow: 0px 0px 4px 0 rgba(0,0,0,.5);
 }
 .logo{
-    width: 40px;
-    height: 40px;
-    border-radius: 5px;
-    margin-top: 5px;
+    /* width: 40px; */
+    height: 100%;
+    /* border-radius: 5px; */
+    /* margin-top: 5px; */
+    margin-left: 15px;
 }
 header a{
     color: #000;
     text-decoration: none;
     font-weight: 500;
+    font-size: 14px;
 }
 .nav{
     width: 1200px;
-    max-width: 80%;
+    max-width: 55%;
     /* text-align: center; */
 }
 .nav a{
@@ -40,7 +42,7 @@ header a{
     margin: 0 20px;
     padding: 0 20px;
     display: inline-block;
-    border-radius: 30px 15px 30px 15px;
+    border-radius: 30px;
 }
 /* .nav a:hover{
     color: #fff;
@@ -49,7 +51,8 @@ header a{
 .nav .act{
     background-color: #000;
     color: #fff;
-    transform: skew(-10deg);
+    font-weight: 600;
+    /* transform: skew(-10deg); */
 }
 .login img{
     border-radius: 50%;
@@ -57,7 +60,14 @@ header a{
     top: 10px;
 }
 .login a{
-    padding: 0 10px;
+    background-color: #000;
+    color: #fff;
+    display: inline-block;
+    width: 125px;
+    height: 40px;
+    text-align: center;
+    line-height: 40px;
+    border-radius: 10px;
 }
 .menu{
     display: inline-block;
@@ -92,7 +102,7 @@ header a{
 .content{
     width: 1200px;
     max-width: 100%;
-    margin: 16px auto;
+    margin: 0 auto;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
@@ -110,7 +120,7 @@ header a{
     text-align: center;
     color: #fff;
     line-height: 150px;
-    margin-bottom: 16px;
+    /* margin-bottom: 16px; */
     border-radius: 10px;
     overflow: hidden;
 }
@@ -119,7 +129,7 @@ header a{
     background-color: #fff;
     padding: 35px;
     box-shadow: 0px 0px 4px 0 rgba(0,0,0,.1);
-    margin: 16px 0;
+    margin: 0 0 16px;
     border-radius: 10px;
 }
 .title{
@@ -324,8 +334,9 @@ input:focus{
     color: #0760C7;
 }
 .navtation{
-    margin: 20px 0 0;
+    /* margin: 20px 0 0; */
     width: 100%;
+    line-height: 40px;
 }
 .navtation a{
     color: #0760C7;
@@ -375,7 +386,6 @@ footer{
         display: none;
     }
     .logo{
-        width: 30px;
         height: 30px;
         margin-left: 5px;
         margin-top: 0;

css/login.css

@@ -1,11 +1,13 @@
-
+body{
+    background-color: #fff;
+}
 .top_bg>div{
     /* width: 50%; */
     /* background-color: #fff; */
     margin: 15px 0;
 }
 .signup{
-    width: 65%;
+    width: 55%;
     padding: 0 30px;
 }
 .content .addvx{
@@ -18,13 +20,15 @@
 }
 .content .top_bg{
     width: 930px;
-    /* background-color: #fdc70320; */
-    background-image: linear-gradient(to bottom, #fdc70320, #fff 5%,#fff);
+    background-color: #fff;
+    /* background-image: linear-gradient(to bottom, #fdc70320, #fff 5%,#fff); */
     display: flex;
-    margin-top: 20px;
+    /* margin-top: 20px; */
     padding: 20px 0;
     justify-content: center;
     flex-wrap: wrap;
+    border-radius: 10px;
+    box-shadow: 0 0 10px 0 rgba(0,0,0,0.3);
 }
 .addvx b{
     color: #0760C7;
@@ -36,9 +40,11 @@
     text-align: left;
     padding: 15px 30px;
     font-size: 14px;
+    width: 350px;
+    max-width: 100%;
 }
 .reg input{
-    height: 33px;
+    height: 40px;
     margin-top: 10px;
     margin-bottom: 20px;
     border-color: #BBBBBB50;

detail.html

@@ -11,7 +11,7 @@
 </head>
 <style>
     .search_left {
-        width: 30%;
+        width: calc(25% - 20px);
     }
 
     .search_left .list li {
@@ -45,7 +45,7 @@
         cursor: pointer;
     }
     .detail_right {
-        width: 69%;
+        width: 75%;
     }
 
     .tag {
@@ -133,16 +133,16 @@
         <header>
             <div class="left_nav">
                 <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
-                <img class="logo" src="img/logo.jpg" alt="logo">
+                <img class="logo" src="img/logo.png" alt="logo">
             </div>
             <div class="nav">
-                <a class="act" href="/index.html">猿人学面试</a>
+                <a class="act" href="/index.html">主页</a>
                 <a href="">爬虫比赛</a>
                 <a href="">关于猿人学</a>
             </div>
             <div class="login">
                 <div class="pc">
-                    <img width="30px" src="img/logo.jpg" alt="logo">
+                    <!-- <img width="30px" src="img/logo.jpg" alt="logo"> -->
                     <div v-if="userInfo" class="menu">
                         {{userInfo.name}}
                         <ul>

index.html

@@ -8,21 +8,26 @@
     <script src="js/axios.min.js"></script>
     <script src="js/vue.js"></script>
 </head>
+<style>
+    .banner{
+        margin: 16px auto;
+    }
+</style>
 <body>
     <section id="app">
         <header>
             <div class="left_nav">
                 <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
-                <img class="logo" src="img/logo.jpg" alt="logo">
+                <img class="logo" src="img/logo.png" alt="logo">
             </div>
             <div class="nav">
-                <a class="act" href="/index.html">猿人学面试</a>
+                <a class="act" href="/index.html">主页</a>
                 <a href="">爬虫比赛</a>
                 <a href="">关于猿人学</a>
             </div>
             <div class="login">
                 <div class="pc">
-                    <img width="30px" src="img/logo.jpg" alt="logo">
+                    <!-- <img width="30px" src="img/logo.jpg" alt="logo"> -->
                     <div v-if="userInfo" class="menu">
                         {{userInfo.name}}
                         <ul>
@@ -47,8 +52,8 @@
                 <a v-if="userInfo" @click="logout">退出登录</a>
             </div>
         </transition>
-        <div class="content index">
-            <div class="left">
+        <div class="content index" >
+            <div class="left" >
                 <div class="banner">
                     <img width="100%" height="100%" :src="img[0]" alt="">
                 </div>

list.html

@@ -25,16 +25,16 @@
         <header>
             <div class="left_nav">
                 <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
-                <img class="logo" src="img/logo.jpg" alt="logo">
+                <img class="logo" src="img/logo.png" alt="logo">
             </div>
             <div class="nav">
-                <a class="act" href="/index.html">猿人学面试</a>
+                <a class="act" href="/index.html">主页</a>
                 <a href="">爬虫比赛</a>
                 <a href="">关于猿人学</a>
             </div>
             <div class="login">
                 <div class="pc">
-                    <img width="30px" src="img/logo.jpg" alt="logo">
+                    <!-- <img width="30px" src="img/logo.jpg" alt="logo"> -->
                     <div v-if="userInfo" class="menu">
                         {{userInfo.name}}
                         <ul>
@@ -59,7 +59,7 @@
                 <a v-if="userInfo" @click="logout">退出登录</a>
             </div>
         </transition>
-        <div class="content">
+        <div class="content" style="margin-top: 16px;">
             <div class="left">
                 <div class="banner" style="align-items: anchor-center;display: flex;padding: 0 10px;">
                     <!-- <img align="left" width='100' height="100" :src="img[0]" alt=""> -->

login.html

@@ -14,16 +14,16 @@
     <header>
         <div class="left_nav">
             <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
-            <img class="logo" src="img/logo.jpg" alt="logo">
+            <img class="logo" src="img/logo.png" alt="logo">
         </div>
         <div class="nav">
-            <a class="act" href="/index.html">猿人学面试</a>
+            <a class="act" href="/index.html">主页</a>
             <a href="">爬虫比赛</a>
             <a href="">关于猿人学</a>
         </div>
         <div class="login">
             <div class="pc">
-                <img width="30px" src="img/logo.jpg" alt="logo">
+                <!-- <img width="30px" src="img/logo.jpg" alt="logo"> -->
                 <div v-if="userInfo" class="menu">
                     {{userInfo.name}}
                     <ul>
@@ -63,7 +63,7 @@
                     <label>注册邀请码</label>
                     <input type="text" v-model="form.invitationCode" placeholder="右侧扫码加我微信，免费领取">
                     <button type="button" @click="submitForm">立即注册</button>
-                    <p align="center"><a style="cursor: pointer;" @click="showLogin=1">去登录</a></p>
+                    <p align="center"><a style="cursor: pointer;color: #00f;" @click="showLogin=1">去登录</a></p>
                 </form>
                 <form v-else  class="form reg"  style="padding: 30px;">
                     <label>账号</label>
@@ -71,7 +71,7 @@
                     <label>密码</label>
                     <input type="password" placeholder="密码" v-model="loginForm.password">
                     <button type="button" @click="login">立即登录</button>
-                    <p align="center"><a style="cursor: pointer;" @click="showLogin=0">去注册</a></p>
+                    <p align="center"><a style="cursor: pointer;color: #00f;" @click="showLogin=0">去注册</a></p>
                 </form>
             </div>
             <div class="addvx">

record.html

@@ -26,16 +26,16 @@
     <header>
         <div class="left_nav">
             <img @click="show=!show" class="phone" width="30" src="img/menu.png" alt="">
-            <img class="logo" src="img/logo.jpg" alt="logo">
+            <img class="logo" src="img/logo.png" alt="logo">
         </div>
         <div class="nav">
-            <a class="act" href="/index.html">猿人学面试</a>
+            <a class="act" href="/index.html">主页</a>
             <a href="">爬虫比赛</a>
             <a href="">关于猿人学</a>
         </div>
         <div class="login">
             <div class="pc">
-                <img width="30px" src="img/logo.jpg" alt="logo">
+                <!-- <img width="30px" src="img/logo.jpg" alt="logo"> -->
                 <div v-if="userInfo" class="menu">
                     {{userInfo.name}}
                     <ul>