样式调整

assets/a.scss

@@ -94,7 +94,7 @@ body {
     .search {
         width     : 100%;
         height    : 44px;
-        padding   : 7px 17px;
+        padding   : 6px 17px;
         background: #fff;
         text-align: center;
 
@@ -107,7 +107,7 @@ body {
             background-image   : url(../static/img/search.png);
             background-repeat  : no-repeat;
             background-position: 15px center;
-            background-size    : 20px;
+            background-size    : 16px;
             padding-left       : 40px;
             color              : rgba(153, 153, 153, 1);
             outline            : none;
@@ -138,7 +138,7 @@ body {
 
             h2 {
                 height     : 31px*$a;
-                font-size  : 32px*$a;
+                font-size  : 36px*$a;
                 font-family: PingFang-SC-Bold;
                 font-weight: bold;
                 color      : rgba(32, 32, 32, 1);
@@ -147,7 +147,7 @@ body {
 
             .p1 {
                 margin     : 20px*$a 0;
-                font-size  : 26px*$a;
+                font-size  : 28px*$a;
                 font-family: PingFang-SC-Medium;
                 font-weight: 500;
                 color      : rgba(122, 122, 122, 1);
@@ -166,7 +166,7 @@ body {
 
         background   : rgba(242, 242, 250, 1);
         border-radius: 4px;
-        font-size    : 22px*$a;
+        font-size    : 24px*$a;
         font-family  : PingFang-SC-Regular;
         font-weight  : 400;
         color        : rgba(108, 116, 122, 1);
@@ -174,7 +174,7 @@ body {
     }
 
     .time {
-        color: rgba(122, 122, 122, 1);
+        color: #afafaf;
     }
 
     * {
@@ -219,7 +219,7 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
         background-color: #fff;
         padding         : 20px 0;
         width           : 100%;
-        max-height      : 311px;
+        max-height      : 360px;
 
         >p {
             margin-bottom: 20px;
@@ -233,12 +233,14 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
         .auto {
 
             overflow-x: scroll;
-
+            border-top: .5px solid #f0f0f0;
+            border-bottom: .5px solid #f0f0f0;
             ul {
-                padding   : 15px;
+                text-align: center;
+                padding: 20px 0;
                 overflow-x: auto;
                 width     : 390px;
-                border-top: .5px solid #afafaf;
+                // border-top: .5px solid #afafaf;
 
                 li {
                     width       : 107px;
@@ -253,7 +255,7 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
                         text-align   : center;
                         display      : inline-block;
                         background   : rgba(255, 255, 255, 1);
-                        border       : 2px solid rgba(255, 92, 86, 1);
+                        border       : 2px solid #f0f0f0;
                         border-radius: 16px;
                         color        : red;
 
@@ -299,9 +301,8 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
         }
 
         .confirm {
-            border-top: .5px solid rgba(175, 175, 175, 1);
-            ;
-            padding: 15px 15px 0 15px;
+           
+            padding: 20px 15px 0 15px;
             width  : 100%;
 
             button {
@@ -346,12 +347,12 @@ $colour :#009688 #5FB878 #393D49 #1E9FFF #F7B824 #FF5722;
     }
 
     img:last-child {
-        margin-left: 5px;
+        margin-left: 10px;
     }
 
     span {
         display     : inline-block;
-        width       : calc(100% - 76px);
+        width       : calc(100% - 80px);
         padding-left: 40px;
         font-size   : 18px;
         font-family : PingFang-SC-Bold;

assets/details.scss

@@ -11,7 +11,7 @@
 
     .name {
         margin       : 20px 15px 13px;
-        height       : 347px*0.5;
+        // height       : 347px*0.5;
         background   : rgba(255, 255, 255, 1);
         box-shadow   : 0px 4px 16px 0px rgba(0, 0, 0, 0.05);
         border-radius: 4px;
@@ -23,6 +23,7 @@
                 font-family: PingFang-SC-Bold;
                 font-weight: bold;
                 color      : rgba(32, 32, 32, 1);
+                margin-bottom: 15px;
             }
 
             span {
@@ -36,8 +37,8 @@
             .time {
                 background-image: url(../static/img/time.png);
                 display         : block;
-                height          : 30px;
-                line-height     : 30px;
+                height          : 36px;
+                line-height     : 36px;
                 @extend .bor;
                 margin-bottom: 10px;
             }
@@ -100,7 +101,7 @@
 
             .img {
                 border-radius: 0px 0px 10px 0px;
-                background   : rgba(255, 186, 186, 1);
+                background   : #ffd6d6;
                 width        : 118px*0.5+10px;
                 height       : 24px;
                 line-height  : 26px;

assets/new.scss

@@ -30,10 +30,10 @@ $f0f0f0:#f0f0f0;
     .user_info{
       padding: 1rem 0.5rem;
       padding-left: 2rem;
-      padding-top: 6rem;
+      padding-top: 5rem;
       h2{
-          width: 6rem;
-          height: 6rem;
+          width: 7.2rem;
+          height: 7.2rem;
           border-radius: 50%;
           float: left;
           margin-right: 1rem;
@@ -47,6 +47,7 @@ $f0f0f0:#f0f0f0;
           float: left;
         //   display:flex;
           align-items:center;
+          margin-top: 10px;
           p{
               display: block;
               color: #fff;
@@ -62,10 +63,10 @@ $f0f0f0:#f0f0f0;
         margin: 0 1.5rem;
         box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
         background-color: #fff;
-        height: 6rem;
-        line-height: 6rem;
+        height: 7.2rem;
+        line-height: 7.2rem;
         position: relative;
-        margin-top: 1rem;
+        margin-top: 2rem;
         p{
             color: #d4ae5b;
             font-size: 1.8rem;

components/payment.vue

@@ -7,7 +7,7 @@
       </p>
       <div class="auto">
         <ul>
-          <li class="discount">
+          <li class="discount active">
             <p>
               <span>
                 <i>￥</i>5
@@ -66,4 +66,9 @@ export default {
   },
   watch: {}
 }
-</script>
+</script>
+<style>
+  .payment .auto .active p{
+    border-color: #ff5c5c;
+  }
+</style>