修改图片预览旋转90度

src/views/zy/zyInfo/ZyInfoV2List.vue

@@ -584,8 +584,12 @@
     <XxhbbksListModal ref="XxhbbksListModalPage"></XxhbbksListModal>
 
     <a-modal v-model:visible="imgvisible" title="图片预览" width="800px" :cancelText="`关闭`" :okButtonProps="{ class: { 'jee-hidden': true } }">
-      <div style="padding: 15px; text-align: center">
+      <div style="padding: 10px 20px;">
-        <img :src="ylimgurl" />
+        <a-button type="primary" @click="rotateImage">顺时针旋转90度</a-button>
+        <a-button type="primary" @click="rotateImage2" style="margin-left: 20px;">逆时针旋转90度</a-button>
+      </div>
+      <div class="image-container">
+        <img :src="ylimgurl" :style="{ transform: 'rotate(' + rotationAngle + 'deg)'  }" class="rotated-image"/>
       </div>
     </a-modal>
   </div>
@@ -667,6 +671,7 @@ const tableCcjgData = ref<any>([]);
 const tableXshpData = ref<any>([]);
 const rowSelectionKhnr = ref<any>([]);
 const ylimgurl = ref<any>('');
+const rotationAngle = ref(0);
 
 const SzybStudentModalpage = ref();
 const registerScoreModal = ref();
@@ -736,6 +741,13 @@ function handleWxtx(record) {
   createMessage.success('发送成功');
 }
 
+function rotateImage() {
+  rotationAngle.value += 90; // 每次点击旋转90度
+}
+
+function rotateImage2() {
+  rotationAngle.value -= 90; // 每次点击旋转90度
+}
 function handleJscjbfb() {
   var list = tableData.value;
 
@@ -1975,4 +1987,20 @@ onMounted(() => {
 .zbClass {
   margin-left: 15px;
 }
+.image-container {
+  padding: 10px;
+  width:100%; /* 设置容器宽度 */
+  height: auto; /* 设置容器高度 */
+  overflow: hidden; /* 隐藏溢出的部分 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+ 
+.rotated-image {
+  max-width: 100%; /* 最大宽度为容器宽度 */
+  max-height: 100%; /* 最大高度为容器高度 */
+  object-fit: contain; /* 保持图片内容不失真 */
+  transform: rotate(90deg); /* 假设图片已经旋转90度 */
+}
 </style>

src/views/zy/zyInfoStudent/components/ZyInfoStudentPiyueForm.vue

@@ -7,7 +7,14 @@
             <iframe id="pdfPreviewIframe" :src="ylurl" frameborder="0" width="100%" height="550px" scrolling="auto"></iframe>
           </div>
           <div v-else-if="showType=='2'">
-            <img :src="ylurl" style="width: 100%;min-height:200px;" />
+            <div style="padding: 10px 20px;">
+              <a-button type="primary" @click="rotateImage">顺时针旋转90度</a-button>
+              <a-button type="primary" @click="rotateImage2" style="margin-left: 20px;">逆时针旋转90度</a-button>
+            </div>
+            
+            <div class="image-container">
+              <img :src="ylurl" :style="{ transform: 'rotate(' + rotationAngle + 'deg)'  }" class="rotated-image"/>
+            </div>
           </div>
           <div v-else-if="showType=='3'">
             <div  class="video-container">
@@ -100,6 +107,7 @@ import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
   const confirmLoading = ref<boolean>(false);
   const showType = ref<string>('0');
   const ylurl = ref<string>('');
+const rotationAngle = ref(0);
   const zyInfo = ref<any>({});
 const globSetting = useGlobSetting();
 const baseApiUrl = globSetting.domainUrl;
@@ -111,6 +119,7 @@ const videoOpen = ref<boolean>(false);
   const loop = ref(false);
 const videoUrl = ref<String>('');
 
+
   //表单验证
   const validatorRules = {
     score: [{ required: true, message: '请输入分数!' }],
@@ -155,6 +164,13 @@ const videoUrl = ref<String>('');
     
   }
   
+function rotateImage() {
+  rotationAngle.value += 90; // 每次点击旋转90度
+}
+
+function rotateImage2() {
+  rotationAngle.value -= 90; // 每次点击旋转90度
+}
   /**
    * 新增
    */
@@ -367,4 +383,21 @@ video {
   display: block;
   max-width: 100%; /* 确保视频宽度不超过其容器宽度 */
 }
+
+.image-container {
+  padding: 10px;
+  width:100%; /* 设置容器宽度 */
+  height: auto; /* 设置容器高度 */
+  overflow: hidden; /* 隐藏溢出的部分 */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+ 
+.rotated-image {
+  max-width: 100%; /* 最大宽度为容器宽度 */
+  max-height: 100%; /* 最大高度为容器高度 */
+  object-fit: contain; /* 保持图片内容不失真 */
+  transform: rotate(90deg); /* 假设图片已经旋转90度 */
+}
 </style>