页面切图

common/css/base.scss

@@ -1,111 +1,103 @@
 page {
-  background: #f3f4f5;
+    background: #f3f4f5;
 }
 
 // mt0,mr0,mb0,ml0 --> mt100,mr100,mb100,ml100
 @for $i from 0 through 100 {
     .mt#{$i} {
-      margin-top: #{$i}rpx;
+        margin-top: #{$i}rpx;
     }
-  
+
     .mr#{$i} {
-      margin-right: #{$i}rpx;
+        margin-right: #{$i}rpx;
     }
-  
+
     .mb#{$i} {
-      margin-bottom: #{$i}rpx;
+        margin-bottom: #{$i}rpx;
     }
-  
+
     .ml#{$i} {
-      margin-left: #{$i}rpx;
+        margin-left: #{$i}rpx;
     }
-  
+
     .pt#{$i} {
-      padding-top: #{$i}rpx;
+        padding-top: #{$i}rpx;
     }
-  
+
     .pr#{$i} {
-      padding-right: #{$i}rpx;
+        padding-right: #{$i}rpx;
     }
-  
+
     .pb#{$i} {
-      padding-bottom: #{$i}rpx;
+        padding-bottom: #{$i}rpx;
     }
-  
+
     .pl#{$i} {
-      padding-left: #{$i}rpx;
+        padding-left: #{$i}rpx;
     }
-  }
-  
+}
+
 .hide-txt {
     overflow-x: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     word-break: break-all;
     -webkit-line-clamp: 1;
-  }
-  
-  .clamp-txt {
+}
+
+.clamp-txt {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     word-break: break-all;
-  }
-  
-
-.bg-blue {
-  background: #277bc0;
-}
-
-.list {
-  .list-card {
-    margin-bottom: 20rpx;
-    padding: 24rpx 20rpx;
-    background: #fff;
-    .list-card-title {
-      font-size: 28rpx;
-      color: #111;
-      font-weight: 700;
-    }
-
-    .list-card-des {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-top: 22rpx;
-      color: #999999;
-      font-size: 24rpx;
-
-      .list-card-des-btn {
-        margin-left: 20rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 48rpx;
-        width: 120rpx;
-        border-radius: 4rpx;
-        color: #fff;
-        background: #449dff;
-      }
-    }
-  }
 }
 
 .fixed-btn {
-  position: fixed;
-  right: 80rpx;
-  bottom: 200rpx;
-  width: 126rpx;
-  height: 126rpx;
-  background: #fff;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
-  image {
-    height: 66rpx;
-    width: 66rpx;
-  }
+    position: fixed;
+    right: 80rpx;
+    bottom: 200rpx;
+    width: 126rpx;
+    height: 126rpx;
+    background: #fff;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
+
+    image {
+        height: 66rpx;
+        width: 66rpx;
+    }
 }
+
+
+.grid-card {
+    background: #fff;
+    border-radius: 12rpx;
+    padding: 20rpx;
+    margin-bottom: 20rpx;
+    .grid-card-title {
+        font-size: 28rpx;
+        color: #111;
+        font-weight: 700;
+        margin-bottom: 10rpx;
+    }
+
+    .grid-card-content-4,
+    .grid-card-content-3 {
+        display: grid;
+        font-size: 24rpx;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        .item {
+            display: flex;
+            align-items: center;
+            min-height: 50rpx;
+        }
+    }
+
+    .grid-card-content-3 {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+}