动态调整pre的宽度2

src/views/KMPlatform/OpenPlatform/platformText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="queueId === '0'" class="w">
+  <div v-if="queueId === '0'" class="platform-text">
     <el-card class="api-doc-card" width="100%">
       <template #header>
         <div class="card-header">
@@ -62,7 +62,7 @@
       </el-collapse>
     </el-card>
   </div>
-  <div v-if="queueId === '1'" class="w">
+  <div v-if="queueId === '1'" class="platform-text">
     <el-card class="api-doc-card">
       <template #header>
         <div class="card-header">
@@ -113,7 +113,7 @@
     </el-card>
   </div>
 
-  <div v-if="queueId === '2'" class="w">
+  <div v-if="queueId === '2'" class="platform-text">
     <el-card class="api-doc-card">
       <template #header>
         <div class="card-header">
@@ -177,7 +177,7 @@
   </div>
 
 
-  <div v-if="queueId === '3'" class="w">
+  <div v-if="queueId === '3'" class="platform-text">
     <el-card class="api-doc-card">
       <template #header>
         <div class="card-header">
@@ -227,7 +227,7 @@
     </el-card>
   </div>
 
-  <div v-if="queueId === '4'" class="w">
+  <div v-if="queueId === '4'" class="platform-text">
     <el-card class="api-doc-card">
       <template #header>
         <div class="card-header">
@@ -276,11 +276,13 @@
   </div>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onBeforeUnmount, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { DocumentCopy } from '@element-plus/icons-vue';
 import { highlightHtml } from "@/utils/highlight"
+import $ from 'jquery'
+
 
 const route = useRoute();
 let queueId = ref(route.params.id || '0'); // 默认值为 '0'，表示简介
@@ -622,9 +624,23 @@ const responseExampleRelationshipProp = ref(
     ]
 }`
 )
+
+function handleSetPreWidth() {
+  const ElCardBodyWidth = $('.platform-text .el-card__body').width()
+  $('.platform-text pre').css('width', ElCardBodyWidth + 'px')
+}
+
+onMounted(() => {
+  handleSetPreWidth()
+  $(window).resize(handleSetPreWidth)
+})
+onBeforeUnmount(() => {
+  $(window).off('resize', handleSetPreWidth);
+})
+
 </script>
 <style lang="less" scoped>
-.w {
+.platform-text {
   width: 100%;
 }
 
@@ -658,17 +674,41 @@ pre {
   padding: 10px;
   border-radius: 4px;
   overflow: auto;
-  width: calc(100vw - 425px);
-  // width: 100%;
-  white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
-  word-wrap: break-word; /* 允许长单词或 URL 地址换行到下一行 */
+  width: 10px;
+  white-space: pre-wrap;
+  /* 保留空白符序列，但是正常地进行换行 */
+  word-wrap: break-word;
+  /* 允许长单词或 URL 地址换行到下一行 */
+
+
+  &::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+    background-color: #F5F5F5;
+  }
+
+
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    border-radius: 10px;
+    background-color: #F5F5F5;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    background-color: #DDDEE0;
+  }
+
 }
 
 code {
   font-family: 'Courier New', Courier, monospace;
   width: 100%;
-  white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
-  word-wrap: break-word; /* 允许长单词或 URL 地址换行到下一行 */
+  // white-space: pre-wrap;
+  /* 保留空白符序列，但是正常地进行换行 */
+  // word-wrap: break-word;
+  /* 允许长单词或 URL 地址换行到下一行 */
 }
 
 .code-container {