订单详情

 <template>
   <div>
     <el-dialog
-      v-model="show" title="详情" :close-on-click-modal="true" width="800px">
-      <div v-html="content">
+      v-model="show" :title="language==0?'详情':'Details'" :close-on-click-modal="true" width="80%">
+      <div class="box-Dialog">
+        <div v-html="content"/>
       </div>
     </el-dialog>
   </div>
@@ -10,6 +11,9 @@
 
 <script setup>
 import {ref} from 'vue'
+import {useStorage} from "@vueuse/core/index";
+
+const language= useStorage('language',0)
 const show=ref(false)
 const content=ref()
 
@@ -24,5 +28,11 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-
+.box-Dialog{
+  display: flex;
+  justify-content: center;
+  //overflow: hidden;
+  overflow-x: scroll ;
+  overflow-y: hidden ;
+}
 </style>

@@ -66,17 +66,19 @@
                     <span style="margin-left: 40px">{{language==0?'工作室电话':'Studio phone number' }}：{{formInfo.contact}}</span>
                   </el-col>
                   <el-col>
-                    {{ language == 0 ?'套餐说明':'Package Description' }}：{{ formInfo.introduction}}
-                  </el-col>
-                  <el-col>
-                    <div v-if="language == 0">
-                      套餐详情: <span v-html="form.details"></span>
-                    </div>
-                    <div v-else>
-                      Package details:<span v-html="form.detailsEn"></span>
+                    <div class="esp_3 s" @click="handleView()">
+                      {{ language == 0 ?'套餐说明':'Package Description' }}：{{ formInfo.introduction}}
                     </div>
-<!--                    {{ language == 0 ?'套餐详情':'Package details' }}：{{ language == 0?form.details:form.detailsEn}}-->
                   </el-col>
+<!--                  <el-col>-->
+<!--                    <div v-if="language == 0">-->
+<!--                      套餐详情: <span v-html="form.details"></span>-->
+<!--                    </div>-->
+<!--                    <div v-else>-->
+<!--                      Package details:<span v-html="form.detailsEn"></span>-->
+<!--                    </div>-->
+<!--&lt;!&ndash;                    {{ language == 0 ?'套餐详情':'Package details' }}：{{ language == 0?form.details:form.detailsEn}}&ndash;&gt;-->
+<!--                  </el-col>-->
                 </el-row>
               </div>
             </div>
@@ -366,6 +368,7 @@
         </template>
       </el-result>
     </div>
+    <Dialog ref="DialogRef" />
   </div>
 </template>
 
@@ -375,8 +378,10 @@ import {getCurrentInstance, ref} from 'vue'
 import {onMounted} from "@vue/runtime-core"
 import {useRoute, useRouter} from "vue-router"
 import * as booking from "@/apiPc/booking"
+import Dialog from '@/viewsPc/booking/component/dailog.vue'
 import MatchInfoRow from "@/viewsPc/match/components/matchInfo-row";
 
+
 const {proxy} = getCurrentInstance()
 const route = useRoute()
 const router = useRouter()
@@ -654,6 +659,12 @@ function exportPdf() {
 
 }
 
+// 套餐详情
+function handleView(){
+  console.log(form.value)
+  proxy.$refs['DialogRef'].open(language.value==0? form.value.details:form.value.detailsEn)
+}
+
 </script>
 
 <style scoped lang="scss">