2 Коммиты 0685d62fe8 ... 34304e6053

Автор SHA1 Сообщение Дата
  tanyanfei 34304e6053 Merge branch 'master' of http://118.190.145.217:3000/xiaojincai/yrxinterview into master 2 месяцев назад
  tanyanfei 2a8a6c939e 样式修改 2 месяцев назад
7 измененных файлов с 116 добавлено и 49 удалено
  1. 86 35
      css/index.css
  2. 3 1
      detail.html
  3. BIN
      img/1.png
  4. BIN
      img/2.jpg
  5. 10 4
      index.html
  6. 13 5
      list.html
  7. 4 4
      record.html

+ 86 - 35
css/index.css

@@ -92,35 +92,36 @@ header a{
 .content{
     width: 1200px;
     max-width: 100%;
-    margin: 20px auto;
+    margin: 16px auto;
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     font-size: 14px;
 }
 .left{
-    width: 70%;
+    width: 78%;
 }
 .right{
-    width: 28%;
+    width: calc(22% - 16px);
 }
 .banner{
-    height: 150px;
-    background-color: #000;
+    height: 158px;
+    background-color: #fff;
     text-align: center;
     color: #fff;
     line-height: 150px;
+    margin-bottom: 16px;
 }
 
 .part{
     background-color: #fff;
-    padding: 15px;
+    padding: 35px;
     box-shadow: 0px 0px 4px 0 rgba(0,0,0,.1);
-    margin: 15px 0;
+    margin: 16px 0;
 }
 .title{
-    font-size: 22px;
-    font-weight: 500;
+    font-size: 18px;
+    font-weight: 600;
     text-align: center;
     margin-bottom: 20px;
     position: relative;
@@ -128,32 +129,22 @@ header a{
 .title span{
     position: relative;
     z-index: 9;
+    border-bottom: 13px solid #F6C845;
+    display: inline-block;
+    line-height: 2px;
 }
-.title::before{
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-left: 25px solid transparent;
-    border-right: 130px solid transparent;
-    border-bottom: 20px solid #FDC606;
-    left: 0;
-    right: 0;
-    margin: auto;
-    top: 35%;
-    z-index: 1;
-    transform: rotate(-10deg);
-}
+
 .list{
     display: flex;
     flex-wrap: wrap;
+    justify-content: space-between;
 }
 .list li{
     width: 48%;
-    overflow: hidden;
+    /* overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
-    line-height: 50px;
+    white-space: nowrap; */
+    /* line-height: 50px; */
 }
 .list li a{
     color: #333;
@@ -163,15 +154,57 @@ header a{
 .list li a:hover{
     color: #0760C7;
 }
+
+.index .left li{
+    background-image: linear-gradient(to top,#FFFFFF,#E9EDFD);
+    border-radius: 10px;
+    height: 92px;
+    width: 32%;
+    padding: 15px;
+    position: relative;
+    padding-left: 50px;
+    margin-bottom: 20px;
+    box-shadow: 0 6px 5px 1px rgba(0,0,0,.1);
+    line-height: 25px;
+    display: table;
+    border: 1px solid #fff;
+}
+.index .left li div{
+    display: table-cell;
+    vertical-align: middle;
+}
+.index .left li a{
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2; /* 限制显示的行数为2 */
+    overflow: hidden; /* 隐藏超出部分 */
+    text-overflow: ellipsis; /* 显示省略号 */
+    max-height: 50px;
+}
+.index .left li::before{
+    content: '';
+    width: 20px;
+    height: 20px;
+    background-image: url(../img/1.png);
+    background-size: 100%;
+    position: absolute;
+    top: 35px;
+    left: 10px;
+}
+.index .left li:hover{
+    border: 1px solid #C9D8F0;
+}
 .more{
     display: block;
-    background-color: #000;
-    color: #fff;
+    /* background-color: #000; */
+    color: #2268D0;
     padding: 10px 0;
     text-align: center;
     margin: 15px auto;
     border-radius: 3px;
     width: 200px;
+    font-size: 16px;
+    font-weight: 600;
 }
 .sec_title{
     display: flex;
@@ -181,7 +214,9 @@ header a{
 }
 .sec_title span{
     font-size: 16px;
-    border-bottom: 4px solid #FDC606;
+    border-bottom: 7px solid #FDC606;
+    display: inline-block;
+    line-height: 7px;
 }
 .sec_title a{
     font-size: 13px;
@@ -193,12 +228,27 @@ header a{
 .list_100 li{
     width: 100%;
     display: flex;
-    line-height: 40px;
+    line-height: 40px !important;
     justify-content: space-between;
 }
 .list_100 li span{
-    color: #999;
+    color: #a9abad;
     font-size: 13px;
+    position: relative;
+    padding-left: 20px;
+    display: inline-block;
+    width: 40px;
+    text-align: center;
+}
+.list_100 li span::before{
+    content: '';
+    width: 15px;
+    height: 15px;
+    background-image: url(../img/2.jpg);
+    background-size: 100%;
+    position: absolute;
+    left: 0;
+    top: 10px;
 }
 .comment textarea{
     width: 100%;
@@ -214,16 +264,17 @@ header a{
 }
 .form input,.form textarea{
     width: 100%;
-    height: 40px;
+    height: 45px;
     border: 1px solid #ccc;
-    border-radius: 3px;
+    border-radius: 10px;
     padding: 0 10px;
     margin-bottom: 15px;
     outline: none;
 }
 .form textarea{
-    height: 200px;
+    height: 220px;
     padding: 10px;
+    border: 2px solid #3473F6;
 }
 .form button{
     width: 150px;

+ 3 - 1
detail.html

@@ -16,6 +16,7 @@
 
     .search_left .list li {
         width: 100%;
+        line-height: 30px;
     }
 
     .part {
@@ -24,7 +25,7 @@
 
     .search input {
         width: 100%;
-        height: 30px;
+        height: 40px;
         border: 1px solid #ccc;
         border-radius: 3px;
         padding: 0 10px;
@@ -131,6 +132,7 @@
                     <a v-else href="/login.html">请先登录</a>
                 </div>
             </div>
+      
         </header>
         <transition name="slide">
             <div class="slide" v-if="show">



+ 10 - 4
index.html

@@ -47,7 +47,7 @@
                 <a v-if="userInfo" @click="logout">退出登录</a>
             </div>
         </transition>
-        <div class="content">
+        <div class="content index">
             <div class="left">
                 <div class="banner">
                     <img width="100%" height="100%" :src="img[0]" alt="">
@@ -63,7 +63,9 @@
                     <h1 class="title"><span>JS逆向面试题</span></h1>
                     <ul class="list">
                         <li v-for="item in list[0].list">
-                            <a :href="'/detail.html?cat=js&id='+item.interviewId">{{item.name}}</a>
+                            <div>
+                                <a :href="'/detail.html?cat=js&id='+item.interviewId">{{item.name}}</a>
+                            </div>
                         </li>
                     </ul>
                     <a href="/list.html?cat=js" class="more">更多JS逆向面试题</a>
@@ -72,7 +74,9 @@
                     <h1 class="title"><span>安卓逆向面试题</span></h1>
                     <ul class="list">
                         <li v-for="item in list[1].list">
-                            <a :href="'/detail.html?cat=android&id='+item.interviewId">{{item.name}}</a>
+                            <div>
+                                <a :href="'/detail.html?cat=android&id='+item.interviewId">{{item.name}}</a>
+                            </div>
                         </li>
                     </ul>
                     <a href="/list.html?cat=android" class="more">更多安卓逆向面试题</a>
@@ -81,7 +85,9 @@
                     <h1 class="title"><span>爬虫面试题</span></h1>
                     <ul class="list">
                         <li v-for="item in list[2].list">
-                            <a :href="'/detail.html?cat=crawler&id='+item.interviewId">{{item.name}}</a>
+                            <div>
+                                <a :href="'/detail.html?cat=crawler&id='+item.interviewId">{{item.name}}</a>
+                            </div>
                         </li>
                     </ul>
                     <a href="/list.html?cat=crawler" class="more">更多爬虫面试题</a>

+ 13 - 5
list.html

@@ -11,8 +11,13 @@
 <style>
     .list li{
         width: 95% !important;
+        line-height: 55px;
+        font-size: 16px;
+        border-bottom: 1px solid #f5f5f5;
+    }
+    .list li a{
+        color: #1677ff;
     }
-    
 </style>
 <body>
     <section id="app">
@@ -55,8 +60,11 @@
         </transition>
         <div class="content">
             <div class="left">
-                <div class="banner">
-                    <img width="100%" height="100%" :src="img[0]" alt="">
+                <div class="banner" style="align-items: anchor-center;display: flex;padding: 0 10px;">
+                    <img align="left" width='100' height="100" :src="img[0]" alt="">
+                    <p style="color: #333;text-align: left;padding: 10px;">
+                        描述描述描述描述描述描述描述描述描述描述描述描述
+                    </p>
                 </div>
             </div>
             <div class="right">
@@ -77,9 +85,9 @@
                         </li>
                     </ul>
                     <p class="page">
-                        <button :disabled="parm.page==1?'disabled':''" @click="parm.page--,getData()">上一页</button>
+                        <button :disabled="parm.page==1?'disabled':false" @click="parm.page--,getData()">上一页</button>
                         <span><b>{{parm.page}}</b>/{{pages}}</span>
-                        <button :disabled="parm.page==pages?'disabled':''" @click="parm.page++,getData()">下一页</button>
+                        <button :disabled="parm.page==pages?'disabled':false" @click="parm.page++,getData()">下一页</button>
                     </p>
                 </div>
             </div>

+ 4 - 4
record.html

@@ -64,17 +64,17 @@
         <p class="navtation"><a href="/index.html">首页</a> - 刷题记录</p>
         <div class="left">
             <div class="part">
-                <p><b style="font-size: 15px;">蛋黄酱</b>的面试刷题</p>
+                <p><b style="font-size: 15px;">{{userInfo.name}}</b>的面试刷题</p>
                 <ul class="list record">
                     <li v-for="(item,i) in list"><a :href="'/detail.html?cat='+item.category+'&id='+item.interviewId">
                         {{i+1}}.{{item.name}} <br>
                         <span>{{item.ctime}}</span>
                     </a></li>
                 </ul>
-                <p class="page">
-                    <button :disabled="parm.page==1?'disabled':''" @click="parm.page--,getData()">上一页</button>
+                <p class="page" v-show="pages>0">
+                    <button :disabled="parm.page==1?'disabled':false" @click="parm.page--,getData()">上一页</button>
                     <span><b>{{parm.page}}</b>/{{pages}}</span>
-                    <button :disabled="parm.page==pages?'disabled':''" @click="parm.page++,getData()">下一页</button>
+                    <button :disabled="parm.page==pages?'disabled':false" @click="parm.page++,getData()">下一页</button>
                 </p>
             </div>
         </div>