缩放

WXL (wul)

12 小时以前 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>
@@ -712,6 +714,9 @@
                  <el-button plain type="info" @click="Editsingletaskson('5')"
                    >中心随访</el-button
                  >
                  <el-button type="primary" round @click="sendAgainmsg"
                    >短信发送</el-button
                  >
                </div>
              </el-form-item>
            </el-form>
@@ -773,7 +778,53 @@
        </div>
      </div>
    </div>

    <!-- 短信发送对话框 -->
    <el-dialog title="短信发送" :visible.sync="smsDialogVisible">
      <!-- 注意这里使用了 smsDialogVisible 以区分已有的 dialogFormVisible -->
      <el-form ref="smsForm" :model="form" label-width="80px">
        <el-form-item label="患者名称">
          <el-input
            style="width: 400px"
            disabled
            v-model="form.sendname"
          ></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input style="width: 400px" disabled v-model="form.age"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input
            style="width: 400px"
            disabled
            v-model="userform.telcode"
          ></el-input>
          <!-- 注意这里可能使用 userform.telcode -->
        </el-form-item>
        <el-form-item label="科室">
          <el-input
            style="width: 400px"
            disabled
            v-model="form.deptname"
          ></el-input>
        </el-form-item>
        <el-form-item label="病区">
          <el-input
            style="width: 400px"
            disabled
            v-model="form.leavehospitaldistrictname"
          ></el-input>
        </el-form-item>
        <el-form-item label="短信内容">
          <el-input type="textarea" v-model="smsContent"></el-input>
          <!-- 建议使用独立的 smsContent 变量 -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="smsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendSms">确认发送</el-button>
        <!-- 注意方法名改为 sendSms -->
      </div>
    </el-dialog>
    <el-dialog
      title="患者再次随访"
      v-dialogDrags
@@ -935,6 +986,7 @@
  updatePersonVoices,
  addPersonVoices,
  query360PatInfo,
  sendMsg,
} from "@/api/AiCentre/index";
import {
  messagelistpatient,
@@ -1197,6 +1249,8 @@
        },
      ],
      userform: {},
      smsDialogVisible: false, // 控制短信对话框显示
      smsContent: "", // 存储短信内容
      Whetherall: true, //是否全部记录展示
      dialogFormVisible: false,
      Voicetype: 0, //是否为语音服务
@@ -1713,6 +1767,34 @@
          this.getsearchrResults();
        }
      });
    },
    // 调起短信发送对话框
    sendAgainmsg() {
      this.smsDialogVisible = true;
      // 可以在这里初始化 smsContent，例如 this.smsContent = '';
    },

    // 发送短信的方法
    sendSms() {
      // 这里调用你的短信发送 API
      // 假设 API 为 sendMsg，参数可能需要根据实际情况调整
      sendMsg({
        phone: this.userform.telcode, // 确保电话号码字段正确
        content: this.smsContent,
      })
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("发送成功");
            this.smsDialogVisible = false; // 关闭对话框
            this.smsContent = ""; // 清空内容
          } else {
            this.$modal.msgError("发送失败");
          }
        })
        .catch((error) => {
          console.error("发送短信失败:", error);
          this.$modal.msgError("发送失败");
        });
    },
    Editsingletaskson(son) {
      let objson = {};
@@ -2453,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>