Jelajahi Sumber

更改九宫格页面样式

hao lei 1 tahun lalu
induk
melakukan
3a9674a0f2
2 mengubah file dengan 586 tambahan dan 542 penghapusan
  1. 42 6
      src/views/squarePage/index.less
  2. 544 536
      src/views/squarePage/list.vue

+ 42 - 6
src/views/squarePage/index.less

@@ -1,34 +1,39 @@
 .square-container {
   display: flex;
   float: right;
+
   .square-left {
     display: flex;
     width: 63.48vw;
-    justify-content: center;
-    flex-wrap: wrap;
+    flex-direction: column;
+    align-items: center;
     .search-container {
       height: 7.4vh;
       width: 44.9vw;
       margin-top: 11.29vh;
       margin-bottom: 7.87vh;
     }
+
     .square-map {
       overflow-y: auto;
       position: relative;
       width: 63.34vw;
       height: 67.79vh;
-      margin-top: -30vh;
+      // margin-top: -30vh;
+
       .grid-item-close {
         margin-left: 16.69vw;
         margin-top: -21.94vh;
         margin-bottom: 14.5vh;
-        
+
       }
+
       .grid-item {
         width: 18.6vw;
         height: 16.74vh;
         margin-right: 1.39vw;
         margin-bottom: 1.94vh;
+
         img {
           width: 100%;
           height: 100%;
@@ -53,15 +58,17 @@
     color: #dfdfdf;
     font-size: 16px;
   }
+
   .origin-basic {
     height: 22.38vh;
-    margin-top: 11.29vh;;
+    margin-top: 11.29vh;
+    ;
     margin-bottom: 1.85vh;
     background: rgba(0, 0, 0, 0.49);
     border-radius: 2.08vw;
     border: 1px solid #707070;
     margin-left: 1.56vw;
-    
+
   }
 
   .square-list {
@@ -69,18 +76,21 @@
     //height: 49.27vh;
     margin-left: 1.56vw;
   }
+
   .square-list {
     .item-image {
       width: 7.29vw;
       height: 7.29vw;
       border-radius: 15px;
       border: 2px solid #dfdfdf;
+
       img {
         width: 100%;
         height: 100%;
         border-radius: 15px;
       }
     }
+
     .item-box {
       width: 100%;
       padding: 1.04vw 1.66vh 1.04vw;
@@ -88,8 +98,10 @@
       border-radius: 20px 20px 20px 20px;
       opacity: 1;
       display: flex;
+
       .item-text {
         margin-left: 1.2vw;
+
         .item-title {
           height: 4.17vh;
           font-size: 28px;
@@ -98,6 +110,7 @@
           color: #fbfbfb;
           line-height: 4.17vh;
         }
+
         .item-description {
           margin-top: 0.37vh;
           height: 2.31vh;
@@ -107,10 +120,12 @@
           color: #dfdfdf;
           line-height: 2.31vh;
         }
+
         .item-tag {
           display: flex;
           margin-top: 0vh;
           width: 10vw;
+
           .tag {
             margin-bottom: 0.2vh;
             //width: 3.13vw;
@@ -128,3 +143,24 @@
     }
   }
 }
+
+*::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width: 6px;
+  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 1px;
+}
+
+*::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 5px;
+  box-shadow: inset 0 0 5px rgba(180, 180, 180, 0.5);
+  background: rgba(180, 180, 180, 0.2);
+}
+
+*::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  /* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
+  border-radius: 10px;
+  background: transparent;
+}

File diff ditekan karena terlalu besar
+ 544 - 536
src/views/squarePage/list.vue