Home Explore Help
Register Sign In
xiaojincai
/
yrxinterview
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

4.10

tanyanfei 2 months ago
parent
34304e6053
commit
4cf54dfb3c
5 changed files with 99 additions and 59 deletions
Unified View Show Diff Stats
  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
View File 

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

+ 21 - 5
css/login.css
View File 

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

+ 27 - 12
detail.html
View File 

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

+ 6 - 6
list.html
View File 

@@ -9,14 +9,14 @@
 
     <script src="js/vue.js"></script>
 
     <script src="js/vue.js"></script>
 
 </head>
 
 </head>
 
 <style>
 
 <style>
 
-    .list li{
 
+    #list li{
 
         width: 95% !important;
 
         width: 95% !important;
 
         line-height: 55px;
 
         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>
 
 </style>
 
 <body>
 
 <body>
 
@@ -79,7 +79,7 @@
 
                 面试题</p>
 
                 面试题</p>
 
             <div class="left">
 
             <div class="left">
 
                 <div class="part">
 
                 <div class="part">
 
-                    <ul class="list">
 
+                    <ul class="list" id="list">
 
                         <li v-for="item in list">
 
                         <li v-for="item in list">
 
                             <a :href="'/detail.html?cat='+parm.category+'&id='+item.interviewId">{{item.name}}</a>
 
                             <a :href="'/detail.html?cat='+parm.category+'&id='+item.interviewId">{{item.name}}</a>
 
                         </li>
 
                         </li>

+ 34 - 32
login.html
View File 

@@ -46,38 +46,40 @@
 
             <a href="">关于猿人学</a>
 
             <a href="">关于猿人学</a>
 
         </div>
 
         </div>
 
     </transition>
 
     </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>
 
         <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>
 
     </div>
 
     </div>
 
 </section>
 
 </section>
 
@@ -87,7 +89,7 @@
 
     createApp({
 
     createApp({
 
         data() {
 
         data() {
 
             return {
 
             return {
 
-                showLogin: true,
 
+                showLogin: false,
 
                 form: {
 
                 form: {
 
                     name: "",
 
                     name: "",
 
                     nickname: "",
 
                     nickname: "",