享服务 首页

src/App.vue

@@ -11,6 +11,18 @@ export default {
 };
 </script>
 <style lang="less">
+// // 滚动条整体部分，其中的属性有width,height,background,border等。
+// ::-webkit-scrollbar { width: 1.3vw; height: 1.3vw; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+// // 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，改变颜色。
+// ::-webkit-scrollbar-button { display: none; }
+// // 滑动轨道。可以用display:none让其不显示，也可以添加背景图片，改变颜色。另外还有::webkit-scrollbar-track-piece这个是内层轨道？有吗？
+// ::-webkit-scrollbar-track { background: rgba(84, 84, 84, 0.11); border-radius: 0.5vw; }
+// // 滑块
+// ::-webkit-scrollbar-thumb { background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%); border-radius: 0.5vw; }
+// // 横竖滚动条轨道交汇处
+// ::-webkit-scrollbar-corner { display: none; }
+// ::-webkit-scrollbar-resizer { display: none; }
+
 #app {
   width: 100vw;
   max-width: 500px;

src/views/Serve/index.vue

@@ -315,7 +315,10 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
     }
     .grid-wrap {
       margin-top: 3.1rem;
+      display: flex;
+      align-items: center;
       .left-wrap {
+        flex: 0 1 auto;
         display: inline-block;
         position: relative;
         width: 41.9vw;
@@ -343,9 +346,11 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
       }
       .right-wrap {
         display: inline-block;
+        flex: 0 1 auto;
+        width: 47.5vw;
         > .card {
           position: relative;
-          width: 47.5vw;
+          width: 100%;
           height: 18.4vw;
           margin-bottom: 0.8vw;
           &:last-of-type {
@@ -431,6 +436,17 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
     position: relative;
     padding: 1.9vw 3.5vw 4.5vw;
     background: #fff;
+    // 滚动条整体部分，其中的属性有width,height,background,border等。
+    ::-webkit-scrollbar { width: 1.3vw; height: 1.3vw; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
+    // 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，改变颜色。
+    ::-webkit-scrollbar-button { display: none; }
+    // 滑动轨道。可以用display:none让其不显示，也可以添加背景图片，改变颜色。另外还有::webkit-scrollbar-track-piece这个是内层轨道？有吗？
+    ::-webkit-scrollbar-track { background: rgba(84, 84, 84, 0.11); border-radius: 0.5vw; }
+    // 滑块
+    ::-webkit-scrollbar-thumb { background: linear-gradient(0deg, #FF615C 0%, #FF9877 100%); border-radius: 0.5vw; }
+    // 横竖滚动条轨道交汇处
+    ::-webkit-scrollbar-corner { display: none; }
+    ::-webkit-scrollbar-resizer { display: none; }
     > h3 {
       font-size: 3.5vw;
       font-weight: bold;