搜索页样式

src/views/company/search.vue

@@ -82,7 +82,7 @@
             </div>
         </div>
         <div class="padding-content search-results" v-if="showSearchData">
-            <p class="text-muted">为您找到{{searchDataList.length}}条相关信息</p>
+            <p class="text-muted" style="width: 800px;margin: 20px auto 10px;">为您找到<strong style="color: #1890ff;padding: 0 3px;">{{searchDataList.length}}</strong>条相关信息</p>
             <div class="results-item-block" v-for="(item,index) in searchDataList" :key="index">
                 <div class="company">
                     <img :src="item.logo" class="company-logo">
@@ -91,11 +91,11 @@
                 </div>
                 <div class="company-info text-muted">
                     <el-row>
-                        <el-col :span="12">
+                        <el-col :span="24">
                             <span>电话：</span>
                             <span>{{item.mobile}}</span>
                         </el-col>
-                        <el-col :span="12">
+                        <el-col :span="24">
                             <span>官网：</span>
                             <span>{{item.logo}}</span>
                         </el-col>
@@ -399,16 +399,16 @@ export default {
 .advanced-search {
     position: absolute;
     z-index: 999;
-    background: #fff;
+    background: #f8f8f8;
     left: 50%;
     transform: translateX(-50%);
     margin-top: 20px;
     padding: 15px;
     width: 900px;
-    min-height: 400px;
-    border: 1px solid rgb(170, 168, 168);
+    min-height: 300px;
+    // border: 1px solid rgb(170, 168, 168);
     border-radius: 10px;
-    box-shadow: 0px 0px 15px #888888;
+    box-shadow: 0px 0px 15px rgba($color: #000000, $alpha: 0.2);
     .title-block {
         position: relative;
         width: 100%;
@@ -417,19 +417,28 @@ export default {
         &::before {
             position: absolute;
             content: ' ';
-            width: 4px;
-            height: 20px;
-            background-color: #616dff;
-            top: 1px;
+            width: 5px;
+            height: 16px;
+            background-color: #1890ff;
+            top: 3px;
             left: 0;
         }
     }
+    .el-button:last-child{
+        color: #fff;
+        background: #1890ff;
+        border-color: #1890ff;
+    }
     .search-item {
         
         .search-lable {
             position: relative;
             display: inline-block;
             width: 80px;
+            margin-top: 10px;
+            font-size: 14px;
+            font-weight: bold;
+            color: #333333;
             vertical-align: top;
         }
         .search-option {
@@ -440,9 +449,19 @@ export default {
             line-height: 40px;
         }
         .el-radio-button .el-radio-button__inner {
+            color: #333;
+            background-color: #f8f8f8;
             border: none;
             border-radius:0;
         }
+        .el-radio-button__orig-radio:checked + .el-radio-button__inner{
+            padding: 7px 15px;
+            font-size: 12px;
+            border-radius: 3px;
+            color: #FFFFFF;
+            background-color: #1890ff;
+            border-color: #1890ff;
+        }
     }
     
 }
@@ -450,9 +469,10 @@ export default {
     .results-item-block {
         position: relative;
         // border: 1px solid #eeeeee;
-        padding: 20px;
         width: 800px;
         // height: 150px;
+        padding: 20px;
+        margin: 0 auto;
         background: rgba($color: #f2f2f2, $alpha: 0.5);
         border-radius: 6px;
         .company {
@@ -476,7 +496,7 @@ export default {
         .company-info {
             position: relative;
             width: 100%;
-            height: 70px;
+            // height: 70px;
             font-size: 14px;
             line-height: 22px;
             // background-color: #f5faff;
@@ -488,11 +508,17 @@ export default {
             -webkit-line-clamp: 2;
             line-clamp: 2;
             -webkit-box-orient: vertical;
-
+            .el-row{
+                color: #666666;
+                .el-col{
+                    line-height: 26px;
+                }
             }
-
-        
         }
+    }
+    // .results-item-block:hover{
+    //     background: rgba(210, 238, 251, 0.5);
+    // }
 }
 .detail-results {
     position: relative;