票务

 <template>
   <div v-if="language == 0" class="itemBox">
     <el-row :gutter="20">
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn01.png">酒店预订</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn02.png">车辆预订</div>
       </el-col>
       <!--      <el-col :sm="12" :lg="8" :xs="12">-->
       <!--        <div class="item" @click="popRemark(3)"><img src="@/assets/dance/btn03.png">餐饮预订</div>-->
       <!--      </el-col>-->
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item" @click="popRemark(8)"><img src="@/assets/dance/btn08.png">旅游服务</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn04.png">票务预订</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item" @click="popRemark(4)"><img src="@/assets/dance/btn05.png">化妆预约</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item" @click="popRemark(5)"><img src="@/assets/dance/btn06.png">拍照预约</div>
       </el-col>
     </el-row>
   </div>
   <div v-else class="itemBox_en">
     <el-row :gutter="20">
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item_en" @click="popRemark(1)"><img src="@/assets/dance/btn01.png">
           <p>HOTEL RESERVATION</p>
         </div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item_en" @click="popRemark(2)"><img src="@/assets/dance/btn02.png">
           <p>TRANSPORTATION RESERVATION</p>
         </div>
       </el-col>
-<!--      <el-col :sm="12" :lg="8" :xs="12">-->
-<!--        <div class="item_en" @click="popRemark(3)"><img src="@/assets/dance/btn03.png">-->
-<!--          <p>DINING RESERVATION</p>-->
-<!--        </div>-->
-<!--      </el-col>-->
-      <el-col :sm="12" :lg="8" :xs="12">
+      <!--      <el-col :sm="12" :lg="8" :xs="12">-->
+      <!--        <div class="item_en" @click="popRemark(3)"><img src="@/assets/dance/btn03.png">-->
+      <!--          <p>DINING RESERVATION</p>-->
+      <!--        </div>-->
+      <!--      </el-col>-->
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item_en" @click="popRemark(8)"><img src="@/assets/dance/btn08.png">
           <p>TRAVEL SERVICE</p>
         </div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item_en" @click="popRemark(0)">
           <img src="@/assets/dance/btn04.png">
           <p>TICKET BOOKING</p>
         </div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item_en" @click="popRemark(4)"><img src="@/assets/dance/btn05.png">
           <p>MAKEUP APPOINTMENT</p>
         </div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
+      <el-col :lg="8" :sm="12" :xs="12">
         <div class="item_en" @click="popRemark(5)"><img src="@/assets/dance/btn06.png">
           <p>PHOTOGRAPHY APPOINTMENT</p>
         </div>
@@ -114,7 +114,6 @@ onMounted(() => {
 
 function building() {
   ElMessage.warning(language.value == 0 ? '感谢您对本次比赛的关注，该服务暂无可预订信息，敬请期待。' : 'Thank you for your attention to this competition. The service is currently unavailable for booking. Please stay tuned.')
-  return
 }
 
 function popRemark(type) {
@@ -180,7 +179,7 @@ function goBooking(n) {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .itemBox {
   padding: 20px 40px;
 }
@@ -248,9 +247,16 @@ function goBooking(n) {
 }
 
 @media screen and (max-width: 768px) {
-  .itemBox,.itemBox_en{padding: 0 20px 20px}
-  .item{font-size: 16px;
-    img{width: 50px;height: 50px}
+  .itemBox, .itemBox_en {
+    padding: 0 20px 20px
+  }
+  .item {
+    font-size: 16px;
+    
+    img {
+      width: 50px;
+      height: 50px
+    }
   }
 }
 </style>

 <template>
- <el-dialog :title="title"  v-model="show" width="400px" @close="close">
+  <el-dialog v-model="show" :title="title" destroy-on-close width="400px" @close="close">
     <div>
-     <h2 class="text-warning text-center" v-if="cptName">{{cptName}}</h2>
+      <h2 v-if="cptName" class="text-warning text-center">{{ cptName }}</h2>
       
-     <div v-if="type==1" class="plr20" v-html="form.reserveDes"></div>
-     <div v-if="type==2" class="plr20" v-html="form.reserveDesCar"></div>
-     <div v-if="type==3" class="plr20" v-html="form.reserveDesFood"></div>
-     <div v-if="type==4" class="plr20" v-html="form.reserveDesMeal"></div>
-     <div v-if="type==5" class="plr20" v-html="form.reserveDesPhoto"></div>
-     <div v-if="type==0" class="plr20" v-html="form.reserveDesTitck"></div>
-     <div v-if="type==8" class="plr20" v-html="form.reserveDesTravel"></div>
+      <div v-if="type==1" class="plr20" v-html="form.reserveDes" />
+      <div v-if="type==2" class="plr20" v-html="form.reserveDesCar" />
+      <div v-if="type==3" class="plr20" v-html="form.reserveDesFood" />
+      <div v-if="type==4" class="plr20" v-html="form.reserveDesMeal" />
+      <div v-if="type==5" class="plr20" v-html="form.reserveDesPhoto" />
+      <div v-if="type==0" class="plr20" v-html="form.reserveDesTitck" />
+      <div v-if="type==8" class="plr20" v-html="form.reserveDesScenic" />
     </div>
     <template #footer>
       <div class="dialog-footer text-center">
-           <el-button type="primary" class="btn-lineG w200px" round @click="ok">{{language==0?'确定':'Confirm'}}</el-button>
+        <el-button class="btn-lineG w200px" round type="primary" @click="ok">{{ language == 0 ? '确定' : 'Confirm' }}
+        </el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
 <script setup>
-import {getBaseInfoByActiveId} from "@/apiPc/booking";
-import {getCurrentInstance} from "@vue/runtime-core";
-import {useStorage} from "@vueuse/core/index";
-const emit = defineEmits([ 'submit'])
-const {proxy} = getCurrentInstance()
-const language= useStorage('language',0)
-import useUserStore from "@/store/modules/user";
+import { getBaseInfoByActiveId } from '@/apiPc/booking'
+import { getCurrentInstance } from '@vue/runtime-core'
+import { useStorage } from '@vueuse/core/index'
+
+const emit = defineEmits(['submit'])
+const { proxy } = getCurrentInstance()
+const language = useStorage('language', 0)
+import useUserStore from '@/store/modules/user'
+
 const user = useUserStore().user
 const title = ref('')
 const cptName = ref('')
@@ -48,16 +51,18 @@ defineExpose({
 
 function getData() {
   console.log(matchId)
-  getBaseInfoByActiveId(matchId).then(res=>{
+  getBaseInfoByActiveId(matchId).then(res => {
     form.value = res.data || {}
     console.log(form.value)
-  }).catch(err=>{
+  }).catch(err => {
     console.log(err)
   })
 }
+
 function close() {
   show.value = false
 }
+
 function ok() {
   // type
   show.value = false
@@ -70,6 +75,6 @@ function ok() {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 
 </style>