Przeglądaj źródła

整体样式调整

threethousanddream 2 miesięcy temu
rodzic
commit
bca63141e1

+ 5 - 5
components/tabBar/index.vue

@@ -60,17 +60,17 @@ export default {
 <style lang="less">
 .tabBar {
   width: 100%;
-  height: 93px;
+  height: 186rpx;
   background-color: #fff;
   .tabBarItem {
-    height: 93px;
+    height: 186rpx;
     .icon {
-      width: 25px;
-      height: 25px;
+      width: 50rpx;
+      height: 50rpx;
     }
   }
 }
 ::v-deep .u-tabbar__content__item-wrapper {
-  height: 93px !important;
+  height: 186rpx !important;
 }
 </style>

+ 3 - 3
components/yx-navbar/yx-navbar.less

@@ -102,9 +102,9 @@
     top: 0;
     left: 0;
   }
-  .u-icon {
+  .close-icon {
     position: absolute;
-    right: 13px;
-    bottom: 13px;
+    right: 28rpx;
+    bottom: 28rpx;
   }
 }

+ 1 - 1
components/yx-navbar/yx-navbar.vue

@@ -72,7 +72,7 @@
 			
 		</view>
 		<view class="addMenuConZhe" v-if="addMenuShow" v-on:touchstart="addMenuShow=false;searchToolList=[]"/>
-		<u-icon name="close-circle" size="22" color="#fff"></u-icon>
+		<u-icon class="close-icon" name="close-circle" size="22" color="#fff"></u-icon>
 	</view>
 </template>
 

+ 33 - 32
pages/home/home.less

@@ -4,13 +4,13 @@
   overflow: hidden;
   .pageIndex {
     width: 100%;
-    height: calc(100vh - 190px);
-    padding: 0 10px;
+    height: calc(100vh - 380rpx);
+    padding: 0 20rpx;
     box-sizing: border-box;
     background-color: #fff;
     .tabs {
-      height: 40px;
-      border-bottom: 1px solid #f0f0f0;
+      height: 80rpx;
+      border-bottom: 2rpx solid #f0f0f0;
       color: #333;
       display: flex;
       justify-content: space-between;
@@ -20,8 +20,8 @@
         display: flex;
         justify-content: center;
         height: 100%;
-        font-size: 14px;
-        line-height: 40px;
+        font-size: 28rpx;
+        line-height: 80rpx;
         font-weight: 600;
         text {
           position: relative;
@@ -29,10 +29,10 @@
           &:before {
             content: '';
             position: absolute;
-            bottom: -1rpx;
+            bottom: -2rpx;
             left: 0;
             right: 0;
-            height: 2px;
+            height: 4rpx;
             background-color: #EB5A10;
             visibility: hidden;
           }
@@ -48,18 +48,18 @@
       }
     }
     .search {
-      margin: 10px 0;
+      margin: 20rpx 0;
       display: flex;
       justify-content: space-between;
       align-items: center;
       .icon {
-        width: 30px;
-        height: 30px;
-        margin-left: 6px;
+        width: 60rpx;
+        height: 60rpx;
+        margin-left: 12rpx;
       }
     }
     .content {
-      height: calc(100% - 90px);
+      height: calc(100% - 180rpx);
       box-sizing: border-box;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
@@ -67,28 +67,28 @@
         display: grid;
         grid-template-columns: 1fr 1fr;
         align-items: start;
-        gap: 10px;
-        padding-bottom: 5px;
+        gap: 20rpx;
+        padding-bottom: 10rpx;
       }
       .infoList {
-        border-radius: 5px;
+        border-radius: 20rpx;
         background-color: #fff;
         box-sizing: border-box;
         overflow: hidden;
-        border: 1px solid #f0f0f0;
+        border: 2rpx solid #f0f0f0;
         position: relative;
         .infoImg {
           width: 100%;
-          height: 90px;
+          height: 190rpx;
         }
         .info-box {
-          line-height: 20px;
-          font-size: 12px;
+          line-height: 40rpx;
+          font-size: 24rpx;
           color: #999999;
-          padding: 0 10px 5px;
+          padding: 0 20rpx 10rpx;
           .name {
-            line-height: 24px;
-            font-size: 14px;
+            line-height: 48rpx;
+            font-size: 28rpx;
             font-weight: 600;
             color: #161616;
             overflow: hidden; //超出隐藏
@@ -96,13 +96,13 @@
             white-space: nowrap;
           }
           .describe {
-            height: 20px;
+            height: 40rpx;
             overflow: hidden; //超出隐藏
             text-overflow: ellipsis; //超出文本设置为...
             white-space: nowrap;
           }
           .info {
-            height: 20px;
+            height: 40rpx;
             display: flex;
             justify-content: space-between;
             align-content: center;
@@ -113,19 +113,20 @@
           left: 0;
           width: 100%;
           overflow: hidden;
-          padding: 0 10px;
+          padding:0;
           top: 0;
           text-align: right;
           box-sizing: border-box;
+          line-height: 32rpx;
           .tag {
             display: inline-block;
-            width: 42px;
-            height: 16px;
-            line-height: 16px;
-            margin-left: 10px;
-            border-radius: 8px;
+            width: 84rpx;
+            line-height: 32rpx;
+            margin-right: 20rpx;
+            margin-top: 20rpx;
+            border-radius: 16rpx;
             text-align: center;
-            font-size: 12px;
+            font-size: 24rpx;
             font-weight: 400;
             color: #fff;
           }