tanyanfei 2 месяцев назад
Родитель
Сommit
4cf54dfb3c
5 измененных файлов с 99 добавлено и 59 удалено
  1. 11 4
      css/index.css
  2. 21 5
      css/login.css
  3. 27 12
      detail.html
  4. 6 6
      list.html
  5. 34 32
      login.html

+ 11 - 4
css/index.css

@@ -99,10 +99,10 @@ header a{
     font-size: 14px;
 }
 .left{
-    width: 78%;
+    width: 75%;
 }
 .right{
-    width: calc(22% - 16px);
+    width: calc(25% - 20px);
 }
 .banner{
     height: 158px;
@@ -111,6 +111,8 @@ header a{
     color: #fff;
     line-height: 150px;
     margin-bottom: 16px;
+    border-radius: 10px;
+    overflow: hidden;
 }
 
 .part{
@@ -118,6 +120,7 @@ header a{
     padding: 35px;
     box-shadow: 0px 0px 4px 0 rgba(0,0,0,.1);
     margin: 16px 0;
+    border-radius: 10px;
 }
 .title{
     font-size: 18px;
@@ -137,7 +140,7 @@ header a{
 .list{
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-between;
+    /* justify-content: space-between; */
 }
 .list li{
     width: 48%;
@@ -159,7 +162,7 @@ header a{
     background-image: linear-gradient(to top,#FFFFFF,#E9EDFD);
     border-radius: 10px;
     height: 92px;
-    width: 32%;
+    width: 23%;
     padding: 15px;
     position: relative;
     padding-left: 50px;
@@ -168,6 +171,7 @@ header a{
     line-height: 25px;
     display: table;
     border: 1px solid #fff;
+    margin: 10px 1%;
 }
 .index .left li div{
     display: table-cell;
@@ -271,6 +275,9 @@ header a{
     margin-bottom: 15px;
     outline: none;
 }
+input::-webkit-input-placeholder{
+    color: #BBBBBB;
+}
 .form textarea{
     height: 220px;
     padding: 10px;

+ 21 - 5
css/login.css

@@ -1,6 +1,7 @@
-.content>div{
-    width: 49%;
-    background-color: #fff;
+
+.top_bg>div{
+    width: 50%;
+    /* background-color: #fff; */
     margin: 15px 0;
 }
 .content .addvx{
@@ -8,7 +9,16 @@
     padding: 50px 0;
     line-height: 25px;
     font-size: 14px;
-    margin-right: 20px;
+    border-right: 1px solid #d9d9d9;
+}
+.content .top_bg{
+    width: 930px;
+    /* background-color: #fdc70320; */
+    background-image: linear-gradient(to bottom, #fdc70320, #fff 5%,#fff);
+    display: flex;
+    margin-top: 20px;
+    padding: 20px 0;
+    justify-content: center;
 }
 .addvx b{
     color: #0760C7;
@@ -22,11 +32,17 @@
     font-size: 14px;
 }
 .reg input{
-    margin-top: 5px;
+    height: 33px;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    border-color: #BBBBBB50;
 }
 .reg button{
     display: block;
     margin: 10px auto;
+    background-color: #F6C845;
+    width: 200px;
+    border-radius: 10px;
 }
 
 @media screen and (max-width: 768px){

+ 27 - 12
detail.html

@@ -24,8 +24,8 @@
     }
 
     .search input {
-        width: 100%;
-        height: 40px;
+        width: 200px;
+        height: 32px;
         border: 1px solid #ccc;
         border-radius: 3px;
         padding: 0 10px;
@@ -44,13 +44,15 @@
     }
 
     .tag span {
-        background-color: #000;
-        color: #fff;
+        background-color: #A9ABAD20;
+        color: #666;
         display: inline-block;
-        padding: 2px 5px;
+        width: 60px;
+        line-height: 25px;
         margin-right: 10px;
-        font-size: 12px;
-        border-radius: 2px;
+        font-size: 14px;
+        border-radius: 10px;
+        text-align: center;
     }
 
     .tag a {
@@ -101,6 +103,18 @@
         padding-top: 140px;
         border-radius: 10px;
     }
+    #list li{
+        line-height: 30px;
+        padding: 10px 0;
+        font-size: 14px;
+        border-bottom: 1px solid #BBBBBB20;
+    }
+    #list li a{
+        color: #0065D7;
+    }
+    .part{
+        padding: 25px;
+    }
 </style>
 
 <body>
@@ -151,13 +165,14 @@
             <div class="left search_left">
                 <div class="part">
                     <p class="search">
-                        <input type="text" v-model="searchKeyword" @input="search" placeholder="题目搜索">
+                        <input  type="text" v-model="searchKeyword" @input="search" placeholder="题目搜索">
                     </p>
-                    <ul class="list">
-                        <li v-for="item in list" :key="item.interviewId"><a
+                    <ol class="list" id="list">
+                        <li v-for="(item,i) in list" :key="item.interviewId" v-show="i<10">
+                            <a
                                 :href="'/detail.html?cat='+param.category+'&id='+item.interviewId">{{item.name}}</a>
                         </li>
-                    </ul>
+                    </ol>
                 </div>
                 <div class="part">
                     <h2 class="sec_title"><span>贡献面试题</span></h2>
@@ -170,7 +185,7 @@
             </div>
             <div class="right detail_right">
                 <div class="part">
-                    <b>{{detail.name}}</b>
+                    <b style="font-size: 28px;color: #000;">{{detail.name}}</b>
                     <p class="tag">
                         <span>{{detail.category}}</span>
                         <a href="">分享给朋友</a>

+ 6 - 6
list.html

@@ -9,14 +9,14 @@
     <script src="js/vue.js"></script>
 </head>
 <style>
-    .list li{
+    #list li{
         width: 95% !important;
         line-height: 55px;
-        font-size: 16px;
-        border-bottom: 1px solid #f5f5f5;
+        font-size: 14px;
+        border-bottom: 1px solid #BBBBBB20;
     }
-    .list li a{
-        color: #1677ff;
+    #list li a{
+        color: #0065D7;
     }
 </style>
 <body>
@@ -79,7 +79,7 @@
                 面试题</p>
             <div class="left">
                 <div class="part">
-                    <ul class="list">
+                    <ul class="list" id="list">
                         <li v-for="item in list">
                             <a :href="'/detail.html?cat='+parm.category+'&id='+item.interviewId">{{item.name}}</a>
                         </li>

+ 34 - 32
login.html

@@ -46,38 +46,40 @@
             <a href="">关于猿人学</a>
         </div>
     </transition>
-    <div class="content" style="justify-content: center;">
+    <div class="content" style="justify-content: center;width: 930px;">
         <p class="navtation"><a href="/index.html">首页</a> - {{showLogin?'登录页':'注册页'}}</p>
-        <div class="addvx" v-if="!showLogin">
-            扫码加我微信 <br>
-            <b>免费领取注册邀请码</b><br>
-            <img width="200" src="img/logo.jpg" alt=""><br>
-            备注“面试邀请码” <br>
-            拉你入猿人学 - 面试交流群
-        </div>
-        <div class="signup">
-            <form v-if="!showLogin"  class="form reg" >
-                <label>昵称</label>
-                <input type="text" v-model="form.nickname" placeholder="昵称将会展示出来">
-                <label>注册账号</label>
-                <input type="text" v-model="form.name" placeholder="登录时的账号">
-                <label>登录密码</label>
-                <input type="password" v-model="form.password">
-                <label>确认密码</label>
-                <input type="password" v-model="form.repassword">
-                <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>
-            </form>
-            <form v-else  class="form reg"  style="padding: 30px;">
-                <label>账号</label>
-                <input type="text" v-model="loginForm.name" placeholder="账号">
-                <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>
-            </form>
+        <div class="top_bg">
+            <div class="addvx" v-if="!showLogin">
+                扫码加我微信 <br>
+                <b>免费领取注册邀请码</b><br>
+                <img width="200" src="img/logo.jpg" alt=""><br>
+                备注“面试邀请码” <br>
+                拉你入猿人学 - 面试交流群
+            </div>
+            <div class="signup">
+                <form v-if="!showLogin"  class="form reg" >
+                    <label>昵称</label>
+                    <input type="text" v-model="form.nickname" placeholder="昵称将会展示出来">
+                    <label>注册账号</label>
+                    <input type="text" v-model="form.name" placeholder="登录时的账号">
+                    <label>登录密码</label>
+                    <input type="password" v-model="form.password">
+                    <label>确认密码</label>
+                    <input type="password" v-model="form.repassword">
+                    <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>
+                </form>
+                <form v-else  class="form reg"  style="padding: 30px;">
+                    <label>账号</label>
+                    <input type="text" v-model="loginForm.name" placeholder="账号">
+                    <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>
+                </form>
+            </div>
         </div>
     </div>
 </section>
@@ -87,7 +89,7 @@
     createApp({
         data() {
             return {
-                showLogin: true,
+                showLogin: false,
                 form: {
                     name: "",
                     nickname: "",