缩放

WXL (wul)

10 小时以前 9fd8b6d713fd000c8912c7a105724d1e6315ac94

 src/views/followvisit/record/detailpage/index.vue

@@ -254,6 +254,7 @@
      />
    </el-dialog>
    <div class="action-container">
      <!-- 随访内容 -->
      <div class="call-action">
        <div class="call-container">
          <!-- <div class="call-header">
@@ -549,6 +550,7 @@
          </div>
        </div>
      </div>
      <!-- 人工处理 -->
      <div class="manual-action">
        <div class="Followuserinfos">
          <div>
@@ -2533,4 +2535,189 @@
  color: #080808 !important;
  cursor: not-allowed;
}
/* 原有的样式保持不变，添加以下响应式代码 */

.Followupdetailspage {
  margin: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.action-container {
  display: flex;
  flex-direction: row; /* 默认横向排列 */
  gap: 20px;
  margin: 0 10px 20px 10px;

  /* 当缩放比例大于100%或屏幕宽度较小时改为上下排列 */
  @media screen and (max-width: 1200px), (min-resolution: 1.1dppx) {
    flex-direction: column;

    .call-action, .manual-action {
      width: 100% !important;
    }
  }
}

.call-action {
  width: 65%;
  min-width: 0;
}

.manual-action {
  flex: 1;
  min-width: 0;
}

/* 调整内部元素的响应式布局 */
.Followuserinfos {
  .el-form {
    /* 表单响应式调整 */
    .el-row {
      margin: 0 -10px;
    }

    .el-col {
      padding: 0 10px;
    }

    @media screen and (max-width: 768px) {
      .el-col {
        width: 100%;
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

/* 调整表格的响应式表现 */
.el-table {
  ::v-deep .el-table__body-wrapper {
    overflow-x: auto;
  }

  /* 在小屏幕上调整表格列宽 */
  @media screen and (max-width: 992px) {
    .el-table-column {
      min-width: 120px;
    }
  }
}

/* 调整标签选择器的响应式布局 */
.tag-selector-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;

  @media screen and (max-width: 576px) {
    flex-direction: column;
    align-items: flex-start;

    .el-select {
      width: 100%;
      margin-right: 0 !important;
    }
  }
}

/* 调整按钮组的响应式布局 */
.el-form-item.label-processing-opinion {
  .el-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .el-button {
      flex: 1;
      min-width: 120px;
    }
  }
}

/* 调整选项卡的响应式表现 */
.el-tabs {
  ::v-deep .el-tabs__nav-wrap {
    overflow-x: auto;
    white-space: nowrap;

    &::after {
      display: none;
    }
  }
}

/* 调整预览区域的响应式表现 */
.preview-left {
  @media screen and (max-width: 768px) {
    margin: 10px;
    padding: 15px;

    .topic-dev, .scriptTopic-dev {
      margin-bottom: 15px;
    }
  }
}

/* 调整对话框的响应式表现 */
.el-dialog {
  @media screen and (max-width: 992px) {
    width: 90% !important;
    margin-top: 5vh !important;

    .el-dialog__body {
      padding: 15px;
    }
  }

  @media screen and (max-width: 576px) {
    width: 95% !important;

    .el-form-item {
      margin-bottom: 15px;
    }
  }
}

/* 确保内容在缩放时保持可读性 */
.headline {
  font-size: clamp(18px, 2vw, 24px); /* 使用clamp函数确保字体大小在合理范围内 */
}

/* 为移动设备优化滚动体验 */
@media screen and (max-width: 768px) {
  .Followuserinfo, .Followuserinfos {
    padding: 15px;
    margin: 5px;
  }

  .CONTENT {
    min-height: auto;
    padding: 5px;
  }
}

/* 缩放检测样式 */
@media screen and (min-resolution: 1.1dppx),
       screen and (-webkit-min-device-pixel-ratio: 1.1),
       screen and (max-width: 1200px) {
  .action-container {
    flex-direction: column;
  }

  .call-action, .manual-action {
    width: 100%;
  }

  /* 调整内部元素间距 */
  .call-container, .Followuserinfos {
    margin-bottom: 20px;
  }
}
</style>