fix:样式

00b6fab7 · caodi\cd · 5ab24ae0 · 00b6fab7
--- a/pages/listingManagement/index.vue
+++ b/pages/listingManagement/index.vue
@@ -22,6 +22,7 @@
    <view class="selected-count"> 已选择{{ selectedCount }}张图片</view>

    <!-- 第三个模块：照片显示模块 -->
+    <view class="photo-box">
      <view class="photo-list">
        <view
          v-for="(group, date) in photoGroups"
@@ -52,7 +53,9 @@
              <view class="check-icon" @click.stop="toggleSelect(photo)">
                <text v-if="photo.selected">√</text>
              </view>
-            <view class="delete-icon" @click.stop="deletePhoto(photo)">×</view>
+              <view class="delete-icon" @click.stop="deletePhoto(photo)"
+                >×</view
+              >
              <view class="type">{{
                photo.synchronization ? "已同步" : "待同步"
              }}</view>
@@ -69,7 +72,8 @@
            </view>
          </view>
        </view>
-    </view>
+      </view></view
+    >
    <view
      v-if="selectedPhotos && selectedPhotos.length"
      class="inspection-button"
@@ -135,12 +139,7 @@ export default {
  onLoad(options) {
    this.getDetails();
  },
-  mounted() {
-		
-		const systemInfo = uni.getSystemInfoSync();
-		console.log("设备逻辑宽度",systemInfo.windowWidth); // 设备逻辑宽度
-		console.log("设备像素比",systemInfo.pixelRatio);  // 设备像素比
-	},
+  mounted() {},
  methods: {
    back() {
      uni.navigateBack();
@@ -324,71 +323,66 @@ export default {
  },
 };
 </script>
-
 <style lang="less" scoped>
-/* 导航栏样式--- */
 .uni-nav-bar-text {
-  height: 36px;
-  width: 36px;
+  height: 28.8px;
+  width: 28.8px;
  background: #ffffff;
-  border: 0.4px solid rgba(224, 224, 224, 1);
-  border-radius: 18px;
+  border: 0.32px solid rgba(224, 224, 224, 1);
+  border-radius: 14.4px;
  border-radius: 50%;
  color: #333;
  text-align: center;

  .iconfont {
-    font-size: 20px;
-    line-height: 36px;
+    font-size: 16px;
+    line-height: 28.8px;
  }
 }

 .nav-right {
-  width: 240px;
+  width: 192px;
 }

 .header-buttons {
  display: flex;
  align-items: center;
-  margin-left: auto; // 将按钮组推到最右侧
+  margin-left: auto;

  .button {
-    width: 112px;
-    height: 36px;
+    width: 89.6px;
+    height: 28.8px;
    background: #ffffff;
-    border-radius: 18px;
-    margin-left: 16px;
+    border-radius: 14.4px;
+    margin-left: 12.8px;
    font-family: PingFangSC-Regular;
-    font-size: 16px;
+    font-size: 12.8px;
    color: #000000;
-    line-height: 36px;
+    line-height: 28.8px;
    font-weight: 400;
  }
 }

-/* 导航栏样式--- */
-
 .container {
  background-image: linear-gradient(115deg, #e8f0fb 0%, #e1ebfa 100%);
-  // padding: 0 32px;
-  height: 100vh;
+  height: 100%;
 }

 .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
-  margin-bottom: 16px;
+  margin-bottom: 12.8px;

  .title {
    display: flex;
    align-items: center;

    .blue-line {
-      width: 4px;
-      height: 20px;
+      width: 3.2px;
+      height: 16px;
      background-color: blue;
-      margin-right: 8px;
+      margin-right: 6.4px;
    }
  }

@@ -396,38 +390,46 @@ export default {
    display: flex;

    .btn {
-      width: 112px;
-      height: 36px;
-      border-radius: 18px;
-      margin-left: 8px;
+      width: 89.6px;
+      height: 28.8px;
+      border-radius: 14.4px;
+      margin-left: 6.4px;
    }
  }
 }

 .selected-count {
  background-color: #f0f0f0;
-  padding: 8px;
-  border-radius: 8px;
-  margin-bottom: 16px;
+  padding: 6.4px;
+  border-radius: 6.4px;
+  margin-bottom: 12.8px;
 }

-.photo-list {
-  padding: 24px 0;
+.photo-box {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  .photo-list {
+    padding: 19.2px 0;
+    overflow: auto;
+
    .photo-group {
-    margin-bottom: 16px;
+      margin-bottom: 12.8px;

      .group-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;
-      margin-bottom: 8px;
-      padding: 0 32px;
+        margin-bottom: 6.4px;
+        padding: 0 25.6px;
+
        .date {
-        font-size: 26px;
+          font-size: 20.8px;
          color: #000000;
-        line-height: 18px;
+          line-height: 14.4px;
          font-weight: 500;
-        margin-left: 8px;
+          margin-left: 6.4px;
        }
      }

@@ -437,9 +439,9 @@ export default {
        gap: 3.2px;

        .card {
-        width: 168rpx;
-        height: 188.8rpx;
-				margin-bottom: 22px;
+          width: 168px;
+          height: 188.8px;
+          margin-bottom: 17.6px;
          position: relative;

          .photo {
@@ -449,12 +451,12 @@ export default {

          .check-icon {
            position: absolute;
-          top: 8px;
-          left: 8px;
+            top: 6.4px;
+            left: 6.4px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
-          width: 24px;
-          height: 24px;
+            width: 19.2px;
+            height: 19.2px;
            display: flex;
            justify-content: center;
            align-items: center;
@@ -462,91 +464,93 @@ export default {

          .delete-icon {
            position: absolute;
-          bottom: 8px;
-          left: 8px;
+            bottom: 6.4px;
+            left: 6.4px;
            background-color: rgba(255, 0, 0, 0.8);
            border-radius: 50%;
-          width: 24px;
-          height: 24px;
+            width: 19.2px;
+            height: 19.2px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
          }
+
          .type {
-					width: 52px;
-					padding: 0 8px;
+            width: 41.6px;
+            padding: 0 6.4px;
            text-align: center;
            background: rgba(0, 0, 0, 0.5);
-          border-radius: 11px;
-          font-size: 12px;
+            border-radius: 8.8px;
+            font-size: 9.6px;
            color: #ffffff;
            text-align: left;
-          line-height: 20px;
+            line-height: 16px;
            font-weight: 400;
            position: absolute;
-					right: 13.5px;
-					top: 8px;
+            right: 10.8px;
+            top: 6.4px;
          }
+
          .photo-info {
            text-align: center;

            text {
              font-family: PingFangSC-Regular;
-            font-size: 14px;
+              font-size: 11.2px;
              color: #000000;
-            line-height: 22px;
+              line-height: 17.6px;
              font-weight: 400;
            }
          }
        }
      }
    }
+  }
 }
-// 按钮
+
 .inspection-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
-  bottom: 60px;
-  width: 280px;
-  height: 48px;
+  bottom: 25.6px;
+  width: 224px;
+  height: 38.4px;
  left: 50%;
  transform: translateX(-50%);
  background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
-  box-shadow: 0px 10px 24px 0px rgba(51, 104, 246, 0.24);
-  border-radius: 27px;
+  box-shadow: 0px 8px 19.2px 0px rgba(51, 104, 246, 0.24);
+  border-radius: 21.6px;
  font-family: PingFangSC-Regular;
-  font-size: 20px;
-  line-height: 48px;
+  font-size: 16px;
+  line-height: 38.4px;
  color: #ffffff;
  text-align: center;
  font-weight: 400;
 }

-/* 圆形按钮样式 */
 .circle-button {
-  width: 18px;
-  height: 18px;
+  width: 14.4px;
+  height: 14.4px;
  border-radius: 50%;
-  border: 1.14px solid rgba(199, 199, 199, 1);
+  border: 0.912px solid rgba(199, 199, 199, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
-  /* 选中状态样式 */
+
  &.active {
    border-color: #007aff;
    background-color: #3774f6;
  }
-  /* 内部小圆点 */
+
  .inner-circle {
-    width: 18px;
-    height: 18px;
+    width: 14.4px;
+    height: 14.4px;
    border-radius: 50%;
-    margin-right: 8px;
+    margin-right: 6.4px;
  }
 }
 </style>
\ No newline at end of file