no message

@@ -7,7 +7,7 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="/favicon.ico">
-    <title>亚洲体育舞蹈节</title>
+    <title>世锦赛</title>
     <!--  <script src="./browser.js"></script>-->
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 

@@ -17,8 +17,8 @@ const { proxy } = getCurrentInstance()
 const language= useStorage('language',0)
 
 onMounted(() => {
-  document.body.style.setProperty('--el-color-primary', '#453DEA')
-  document.body.style.setProperty('--el-color-primary-light-3', '#8623FC')
+  document.body.style.setProperty('--el-color-primary', '#0540EC')
+  document.body.style.setProperty('--el-color-primary-light-3', '#1B69F8')
   document.body.style.setProperty('--el-button-hover-bg-color', '#fff')
   nextTick(() => {
     // 初始化主题样式
@@ -91,7 +91,7 @@ li.el-select-dropdown__item {
 }
 
 :root {
-  --el-color-primary: #453DEA;
+  --el-color-primary: #0557EC;
 }
 
 .el-popper .el-menu {
@@ -128,7 +128,9 @@ li.el-select-dropdown__item {
 .el-popper.is-light.is-pure {
   border: none;
 }
-
+.el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover{
+  background-color: transparent;
+}
 .el-popper {
   .el-menu--horizontal .el-menu-item:not(.is-disabled):focus, .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
     color: var(--el-color-primary);
@@ -144,11 +146,11 @@ li.el-select-dropdown__item {
   .el-menu {color: #000;}
 
   .el-menu--horizontal>.el-menu-item {
-    transition: none;color: #000;padding: 6px 10px ;margin: 0 10px;border-radius: 18px;
+    transition: none;color: #000;padding: 6px 0 ;margin: 0 10px;
   }
 
   .el-sub-menu .el-sub-menu__title {
-    font-size: 18px;color: #000;
+    font-size: 16px;color: #000;
   }
 
   .el-menu--horizontal > .el-sub-menu.is-active .el-sub-menu__title {
@@ -164,17 +166,13 @@ li.el-select-dropdown__item {
     color: #453DEA;
   }
 
-  .el-menu--horizontal .el-menu-item:not(.is-disabled):focus {
-
-  }
 
   .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
-    color: #453DEA;
+    color:#000;background: transparent;filter: drop-shadow(0 0 1px #000);
   }
 
   .el-menu--horizontal > .el-menu-item.is-active {
-    border-bottom: none;background: linear-gradient(-90deg, #8623FC, #453DEA);
-    border-radius: 18px;color: #fff!important;
+    border-bottom: 2px solid #000;color: #000!important;
   }
 
   .el-menu--horizontal {
@@ -184,7 +182,7 @@ li.el-select-dropdown__item {
   }
 
   .el-menu--horizontal > .el-menu-item {
-    font-size: 20px;
+    font-size: 16px;
   }
 }
 

@@ -15,6 +15,13 @@ export function getMatchById(params) {
     params: params
   })
 }
+export function getInfoByCptId(params) {
+  return request({
+    url: `/league/competitionLive/getInfoByCptId`,
+    method: 'get',
+    params: params
+  })
+}
 
 export function refundApply(orderId) {
   return request({

@@ -206,14 +206,14 @@ aside {
 }
 .el-step__head.is-success{
   .el-step__icon{color: #fff;border: none;
-    background: linear-gradient(90deg, #8623FC, #453DEA);}
+    background: #000;}
 }
 .el-step__line{border-top:1px dashed #D1D6D8;background: transparent!important;
   .el-step__line-inner{border-width: 0!important;}
 }
 .el-step__head.is-process{border-top: var(--el-color-primary);
   .el-step__icon{color: #fff;border: none;
-    background: linear-gradient(90deg, #8623FC, #453DEA);}
+    background: #000;}
 }
 .el-step__title.is-process{
   color: var(--el-color-primary)!important;font-weight: 400;
@@ -242,7 +242,7 @@ aside {
       height: 30px;
       font-size: 16px;margin: 0 0 18px;
       font-weight: 600;line-height: 30px;display: inline-block;padding:0 20px 0 14px;
-      background: linear-gradient(90deg, #8623FC, #453DEA);
+      background: #000;
       border-radius: 0px 0px 15px 0px;color: #fff;}
   }
   dd{

@@ -14,7 +14,7 @@
 .borderRadius10{border-radius: 10px;}
 .w80{width: 80%;}
 .w50{width: 50%;}
-.text-gray{color: #999}
+.text-gray{color: #929AA0}
  .uppercase{
 	 text-transform: uppercase;
 	 *{
@@ -464,7 +464,7 @@ img{display: block;}
 	 }
  }
  .rotate90_180{transform: rotate(90deg) rotateX(180deg);}
- .istop{background: var(--el-color-primary);color: #fff;
+ .istop{background: #E91C1A;color: #fff;
 	 font-size: 14px;padding: 2px 6px;margin-right: 10px;
 	 border-radius: 5px 5px 0px 5px;position: relative;top: -2px;}
  .newsLine{
@@ -513,14 +513,14 @@ img{display: block;}
 		 }
 	 }
  }
- .bg-lineg{ background: linear-gradient(90deg, #8623FC, #453DEA);color: #fff;}
+ .bg-lineg{ background: #000;color: #fff;}
  .lineHead{
 	 //height: 50px;
 	 padding: 15px;overflow: auto;
-	 background: linear-gradient(90deg, #8623FC, #453DEA);
+	 background: #000;
 	 h3{margin: 0;background: #FFFFFF;
 		 font-size: 18px;
-		 color: var(--el-color-primary);
+		 color: #000;
 		 border-radius: 5px;display: inline;padding: 5px 15px;}
 	 ul{margin: 0;padding: 0;white-space: nowrap;
 		 li{border-radius: 5px;display: inline;padding: 5px 15px; font-size: 18px;text-transform: capitalize;
@@ -578,7 +578,7 @@ img{display: block;}
 	img{object-fit: cover;height: 100%;}
 	.date{width: 60px;height: 60px;text-align: center;
 		position: absolute;left: 0;top:16px;
-		background: var(--el-color-primary);
+		background: #000;
 		.day{color: #fff;transform: scaleX(0.7);font-weight: bold;font-size: 24px;}
 		p{font-size: 14px;margin: 0;transform: scaleX(0.7);font-weight: bold;color: #fff;}
 	}
@@ -729,6 +729,17 @@ img{display: block;}
 		flex-direction: row-reverse;
 	 }
  }
+@media screen and (max-width: 768px) {
+	.newsflex{
+		.el-col:nth-child(2) .item{
+			flex-direction: row-reverse;
+		}
+		.el-col:nth-child(3) .item{
+			flex-direction: row;
+		}
+	}
+}
+
 
  .newsimgcover{
 	 .item{margin: 10px 0;
@@ -1048,10 +1059,7 @@ img{display: block;}
 	  95%{transform: translateY(-3px);}
 	  100%{transform: translateY(0px);}
  }
- .smallToday{display: flex;align-items: center;
-	 .type{margin-right: 20px;}
-	 h3{margin: 0 0 10px;}
- }
+
  .weatherbox{padding: 20px 0;
 	 .today{text-align: center;display: flex;justify-content: center;align-items: center;margin: 0 0 30px;
 		 .type{margin-left: 30px;}
@@ -1333,12 +1341,13 @@ img{display: block;}
 	 font-size: 16px;
 	 color: var(--el-color-primary);
  }
+ .blackBtn{background: #000;}
 
- .btn-lineG{background: linear-gradient(-90deg, #8623FC, #453DEA);
+ .btn-lineG{background: linear-gradient(90deg, #1B69F8, #0540EC);
 	 border-radius: 23px;padding: 6px 40px;
 	 color: #FFFFFF;
 	 font-size: 18px;}
- .btn-lineG:hover{color: #fff;box-shadow: 0 0 10px #453DEA}
+ .btn-lineG:hover{color: #fff;box-shadow: 0 0 10px #453DEA;background: linear-gradient(-90deg, #1B69F8, #0540EC);}
  .indexTitle {
 	 position: relative;margin: 50px 0 25px;
 
@@ -1350,11 +1359,7 @@ img{display: block;}
  }
  .leftboderTT{
 	 font-size: 36px;margin: 0;line-height: 1;text-transform: uppercase;
-	 position:relative;padding-left: 22px;
-	 &::before{  content: '';position: absolute;left: 0;width: 6px;
-		 height: 100%;top: 0;bottom: 0;margin: auto;
-		 background: linear-gradient(0deg, #8623FC, #453DEA);
-		 border-radius: 3px;}
+	 position:relative;
  }
  img.more {
 	 cursor: pointer;
@@ -1371,19 +1376,16 @@ img{display: block;}
  .activeItem {
 	 cursor: pointer;
 	 background: #FFFFFF;
-	 border-image: linear-gradient(-90deg, #8623FC, #453DEA);
-	 border-image-slice: 1;
-	 border-image-width: 0 0 4px;
 	 &:hover {
 		 .imgbox img {
 			 transform: scale(1.1);
 			 transform-origin: center;
 		 }
 		 .info{
-			 background: linear-gradient(-90deg, #8623FC, #453DEA);
+			 background: #000;
 			 color: #fff;
 			 p{color: #fff;}
-			 a{color: #fff;}
+			 a{color: #fff;background: url("@/assets/dance/arrow2.png") no-repeat right;}
 		 }
 	 }
 
@@ -1404,8 +1406,10 @@ img{display: block;}
 		 h3 {
 			 margin: 0;
 		 }
-		 a{color: #453DEA;
-			 font-size: 14px;}
+		 a{color: #000;display: block;text-align: right;
+			 font-size: 14px;background: url("@/assets/dance/arrow02.png") no-repeat right;
+		 	padding-right: 30px;
+		 }
 		 p {
 			 color: #7B7F83;
 			 font-size: 14px;
@@ -1450,9 +1454,9 @@ img{display: block;}
  }
 .languageBtn{white-space: nowrap;
 	font-size: 16px;
-	span{padding: 0 5px;cursor: pointer;}
-	span:hover{font-weight: bold;}
-	.active{color: var(--el-color-primary);font-weight: bold;cursor: pointer;}
+	span{margin: 0 10px;cursor: pointer;color: #929AA0;padding: 6px 0;}
+	span:hover{filter: drop-shadow(0 0 1px #000);}
+	.active{color: #000;font-weight: bold;cursor: pointer;border-bottom: 2px solid #000;}
 }
  .mapBox{word-break: break-all;}
 .as16_9{aspect-ratio: 16/9;}

 <template>
   <div class="footAll">
     <div class="box" style="max-width: 90%">
-      <el-row style="align-items: center;" v-if="language==0">
+      <el-row v-if="language==0" justify="space-between" align="middle">
         <el-col :lg="10" :md="10" :xs="10">
           <ul>
             <li>邮编：214000</li>
@@ -24,12 +24,11 @@
         </el-col>
         <el-col :span="24" style="border-top:  1px solid #fff">
           <div class="text-center copyright pd10">版权所有@无锡和畅赛事运营有限公司
-            &ensp;&ensp
             <a target="_blank" href="https://beian.miit.gov.cn/">ICP备案号：苏ICP备2023054420号-2</a></div>
         </el-col>
       </el-row>
 
-      <el-row style="align-items: center;" v-if="language===1">
+      <el-row justify="space-between" align="middle" v-if="language===1">
         <el-col :span="14">
           <ul>
             <li>Postal code：214000</li>
@@ -59,24 +58,24 @@
     <div class="mlb" v-if="language===0">
       <div onclick="window.open('https://ykf-weixin01.7moor.com/wapchat.html?accessId=6c500b60-02c6-11ef-9a4d-85cd5dacc5bf&fromUrl=&urlTitle=&language=ZHCN','_blank','height=700px,width=700px,top=50,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')" title="客服" >
         <img class="kf" src="@/assets/logo/btn01.png"/>
-        <div class="text-center mt10 gradient-text">在线客服</div>
+        <div class="text-center mt10">在线客服</div>
       </div>
       <div @click="goHelpZH">
 <!--        <a target="_blank" href="https://wdsfwuxicenter.com/stage-api/fs/file/操作指引.zip">-->
         <a>
           <img class="kf" src="@/assets/logo/btn02.png"/>
-          <div class="text-center mt10 gradient-text">指南下载</div>
+          <div class="text-center mt10">指南下载</div>
         </a>
       </div>
     </div>
     <div class="mlb" v-else>
       <div onclick="window.open('https://ykf-weixin01.7moor.com/wapchat.html?accessId=707daf80-02c6-11ef-9a4d-85cd5dacc5bf&fromUrl=&urlTitle=&language=EN','_blank','height=700px,width=700px,top=100,left=150,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')" title="Live Chat">
         <img class="kf" src="@/assets/logo/btn01.png"/>
-        <div class="text-center gradient-text">LIVE CHAT</div>
+        <div class="text-center ">LIVE CHAT</div>
       </div>
       <div @click="goHelp">
         <img class="kf" src="@/assets/logo/btn02.png"/>
-        <div class="text-center gradient-text uppercase">Video Guide</div>
+        <div class="text-center uppercase">Video Guide</div>
       </div>
     </div>
   </div>

@@ -12,14 +12,14 @@
       >
         <el-menu-item index="/">{{ language==0?'首页':'HOME' }}</el-menu-item>
         <el-menu-item index="/news">{{ language==0?'新闻资讯':'NEWS' }}</el-menu-item>
-        <el-menu-item index="/guide">{{ language==0?'参赛指南':'GUIDELINE' }}</el-menu-item>
-        <el-menu-item index="/match/list">{{ language==0?'大赛报名':'REGISTRATION' }}</el-menu-item>
-        <el-menu-item index="/saiC">{{ language==0?'赛程安排':'COMPETITIONS' }}</el-menu-item>
-        <el-menu-item index="/meta">{{ language==0?'媒体中心':'MEDIA' }}</el-menu-item>
         <el-menu-item index="/notice">{{ language==0?'通知公告':'NOTICEBOARD' }}</el-menu-item>
+        <el-menu-item index="/match/list">{{ language==0?'赛事服务':'REGISTRATION' }}</el-menu-item>
+        <el-menu-item index="/saiC">{{ language==0?'竞赛日程':'COMPETITIONS' }}</el-menu-item>
+        <el-menu-item index="/meta">{{ language==0?'媒体中心':'MEDIA' }}</el-menu-item>
+        <el-menu-item index="/guide">{{ language==0?'参赛指南':'GUIDELINE' }}</el-menu-item>
+        <el-menu-item index="/about/wuDao">{{ language==0?'关于我们':'CONTACT & MORE' }}</el-menu-item>
 
         <!--        <el-sub-menu index="/about">-->
-<!--          <template #title>{{ language==0?'关于我们':'CONTACT & MORE' }}</template>-->
 <!--          <el-menu-item index="/about/wuDao">{{ language==0?'舞蹈节':'About Us' }}</el-menu-item>-->
 <!--          <el-menu-item index="/about/regulations" v-if="language==1">Rules & Regulations</el-menu-item>-->
 <!--          <el-menu-item index="/about/culture">{{ language==0?'地方文化':'Culture' }}</el-menu-item>-->
@@ -31,14 +31,14 @@
       >
         <el-menu-item index="/">{{ language==0?'首页':'HOME' }}</el-menu-item>
         <el-menu-item index="/news">{{ language==0?'新闻资讯':'NEWS' }}</el-menu-item>
-        <el-menu-item index="/guide">{{ language==0?'参赛指南':'GUIDELINE' }}</el-menu-item>
-        <el-menu-item index="/match/list">{{ language==0?'大赛报名':'REGISTRATION' }}</el-menu-item>
-        <el-menu-item index="/saiC">{{ language==0?'赛程安排':'COMPETITIONS' }}</el-menu-item>
-        <el-menu-item index="/meta">{{ language==0?'媒体中心':'MEDIA' }}</el-menu-item>
         <el-menu-item index="/notice">{{ language==0?'通知公告':'NOTICEBOARD' }}</el-menu-item>
+        <el-menu-item index="/match/list">{{ language==0?'赛事服务':'REGISTRATION' }}</el-menu-item>
+        <el-menu-item index="/saiC">{{ language==0?'竞赛日程':'COMPETITIONS' }}</el-menu-item>
+        <el-menu-item index="/meta">{{ language==0?'媒体中心':'MEDIA' }}</el-menu-item>
+        <el-menu-item index="/guide">{{ language==0?'参赛指南':'GUIDELINE' }}</el-menu-item>
+        <el-menu-item index="/about/wuDao">{{ language==0?'关于我们':'CONTACT & MORE' }}</el-menu-item>
 
         <!--        <el-sub-menu index="/about">-->
-<!--          <template #title>{{ language==0?'关于我们':'CONTACT & MORE' }}</template>-->
 <!--          <el-menu-item index="/about/wuDaoEn">{{ language==0?'舞蹈节':'About Us' }}</el-menu-item>-->
 <!--          <el-menu-item index="/about/regulations" v-if="language==1">Rules & Regulations</el-menu-item>-->
 <!--          <el-menu-item index="/about/cultureEn">{{ language==0?'地方文化':'Culture' }}</el-menu-item>-->
@@ -52,7 +52,7 @@
       </div>
       <div class="languageBtn">
         <span :class="language==0?'active':''" @click="changeLanguage(0)">{{ language==0?'中文':'CN' }}</span>
-        |
+
         <span :class="language==1?'active':''" @click="changeLanguage(1)">EN</span>
       </div>
       <div class="ml20 forPc" >
@@ -114,15 +114,11 @@
       <el-menu-item index="/">首页</el-menu-item>
       <el-menu-item index="/news">新闻资讯</el-menu-item>
       <el-menu-item index="/notice">通知公告</el-menu-item>
-      <el-menu-item index="/match/list">大赛报名</el-menu-item>
-      <el-menu-item index="/saiC">赛程安排</el-menu-item>
+      <el-menu-item index="/match/list">赛事服务</el-menu-item>
+      <el-menu-item index="/saiC">竞赛日程</el-menu-item>
       <el-menu-item index="/meta">媒体中心</el-menu-item>
       <el-menu-item index="/guide">参赛指南</el-menu-item>
-      <el-sub-menu index="/about">
-        <template #title>关于我们</template>
-        <el-menu-item index="/about/wuDao">舞蹈节</el-menu-item>
-        <el-menu-item index="/about/culture">地方文化</el-menu-item>
-      </el-sub-menu>
+      <el-menu-item index="/about/wuDao">关于我们</el-menu-item>
       <el-menu-item v-if="isLogin" index="/center/myInfo">个人中心</el-menu-item>
     </el-menu>
     <el-menu class="weiMenu"
@@ -137,12 +133,13 @@
       <el-menu-item index="/saiC">COMPETITIONS</el-menu-item>
       <el-menu-item index="/meta">MEDIA</el-menu-item>
       <el-menu-item index="/guide">GUIDELINE</el-menu-item>
-      <el-sub-menu index="/about">
-        <template #title>CONTACT & MORE</template>
-        <el-menu-item index="/about/wuDaoEn">About Us</el-menu-item>
-        <el-menu-item index="/about/regulations">Rules & Regulations</el-menu-item>
-        <el-menu-item index="/about/cultureEn">Culture</el-menu-item>
-      </el-sub-menu>
+      <el-menu-item index="/about/wuDao">CONTACT & MORE</el-menu-item>
+<!--      <el-sub-menu index="/about">-->
+<!--        <template #title>CONTACT & MORE</template>-->
+<!--        <el-menu-item index="/about/wuDaoEn">About Us</el-menu-item>-->
+<!--        <el-menu-item index="/about/regulations">Rules & Regulations</el-menu-item>-->
+<!--        <el-menu-item index="/about/cultureEn">Culture</el-menu-item>-->
+<!--      </el-sub-menu>-->
       <el-menu-item v-if="isLogin" index="/center/myInfo">PERSONAL CENTER</el-menu-item>
     </el-menu>
   </el-drawer>
@@ -270,15 +267,9 @@ function getCode() {
   :deep(.el-menu--horizontal.el-menu){border: none;}
 }
 .loginBtn {color: #fff;margin-right: 15px;border: none;
-  background: linear-gradient(-90deg, #8623FC, #453DEA);box-shadow:0 0 10px #fff;
-  &:active {
-    color: #fff;
-    background:linear-gradient(0deg, #8623FC, #453DEA);
-    border:none;
-  }
-
+  background: #000;box-shadow:0 0 10px #fff;
   &:hover {
-    box-shadow:0 0 10px var(--el-color-primary);border: none;
+    box-shadow:0 0 10px #000;border: none;
     color:#fff;
   }
 
@@ -337,12 +328,11 @@ function getCode() {
 
 
   .ropenbtn{padding: 10px;display: none;
-    img{    width: 44px;}
+    img{    width: 44px;    filter: grayscale(1);}
   }
 
 :deep(.el-input){height: 100%}
 :deep(.el-form-item){height: 40px;}
-//.home-menu .el-menu--horizontal > .el-menu-item{margin: 0 5px; font-size: 18px;}
 .home-menu .el-sub-menu{font-size: 16px;}
 .weiMenu.el-menu{
   border: none;

@@ -188,15 +188,15 @@ function getCode() {
 
 <style scoped lang="scss">
 .loginBtn {color: #fff;margin-right: 15px;border: none;
-  background: linear-gradient(-90deg, #8623FC, #453DEA);box-shadow:0 0 10px #fff;
+  background: #000;box-shadow:0 0 10px #fff;
   &:active {
     color: #fff;
-    background:linear-gradient(0deg, #8623FC, #453DEA);
+    background:#000;
     border:none;
   }
 
   &:hover {
-    box-shadow:0 0 10px var(--el-color-primary);border: none;
+    box-shadow:0 0 10px #aaa;border: none;
     color:#fff;
   }
 
@@ -257,7 +257,7 @@ function getCode() {
 
 
   .ropenbtn{padding: 10px;display: none;
-    img{    width: 44px;}
+    img{    width: 44px;   filter: grayscale(1);}
   }
 
 :deep(.el-input){height: 100%}

@@ -117,7 +117,7 @@ h2 {
     border: none;
     height: 60px;
     color: #fff;
-    background: linear-gradient(-90deg, #8623FC, #453DEA);;
+    background: #000;;
     border-radius: 0px 5px 5px 0px;
   }
 

@@ -103,7 +103,7 @@ h2 {
     border: none;
     height: 60px;
     color: #fff;
-    background: linear-gradient(-90deg, #8623FC, #453DEA);;
+    background: #000;;
     border-radius: 0px 5px 5px 0px;
   }
 

@@ -33,7 +33,8 @@ const useUserStore = defineStore(
       reLogin: {show:false,query:{}},
       visitor: false,
       language: 0,
-      activeName:"5"
+      activeName:"5",
+      weather: null,
     }),
     actions: {
       // 登录
@@ -167,7 +168,11 @@ const useUserStore = defineStore(
       },
       updataActiveName(v){
         this.activeName=v
+      },
+      setWeather(obj){
+        this.weather=obj
       }
+
     }
   })
 

@@ -43,7 +43,7 @@
     .bbtn{position: absolute;right: 5px;bottom: 0px;
       color: #fff;border-radius: 50px;padding: 10px 20px;
       font-size: 18px;cursor: pointer;
-      background: linear-gradient(-90deg, #8623FC, #453DEA); ;
+      background: #000; ;
       &:hover{filter: brightness(1.6)}
     }
   }

@@ -111,8 +111,8 @@ const getDetail = (item,index)=>{
   border-radius: 50%;right: -29px;border: 4px solid #fff;outline: 2px solid #898989;
   box-sizing: content-box;top: 0;bottom: 0;margin: auto;}
   li.active{color: #fff;
-    background: linear-gradient(90deg, #8623FC, #453DEA);
-    &::after{outline: 2px solid #453DEA;background: #453DEA;}
+    background: #000;
+    &::after{outline: 2px solid #000;background: #000;}
   }
 }
 .infoPart{

@@ -38,12 +38,12 @@
           <div class="plr20">
             <div v-for="(r,index) in h.carVoList" :key="index" class="room">
               <el-row :gutter="30" align="middle">
-                <el-col :span="4">
+                <el-col :lg="4">
                   <div class="roomImg">
                     <img :src="fillImgUrl(r.photos?.split(',')[0])">
                   </div>
                 </el-col>
-                <el-col :span="14">
+                <el-col :lg="14">
                   <h3 class="name flex">{{ r.carType }}
                     <div class="tagbox">
                       <span class="tag">{{ r.carColor }}</span>
@@ -59,7 +59,7 @@
                       }}: {{ r.operStart }} ~ {{ r.operEnd }}</span>
                   </div>
                 </el-col>
-                <el-col :span="3">
+                <el-col :lg="3" :xs="12">
                   <div v-if="language==0" class="price">¥
                     <span
                       v-if="r.outPrice&&r.inPrice">{{ Number(r.inPrice) > Number(r.outPrice) ? r.outPrice : r.inPrice }}</span>
@@ -76,7 +76,7 @@
                   </div>
 
                 </el-col>
-                <el-col :span="3">
+                <el-col :lg="3" :xs="12">
                   <el-button class="btn-lineG w100" round type="primary" @click="goOrder(h,r)">
                     {{ language == 0 ? '我要预订' : 'Select' }}
                   </el-button>
@@ -349,5 +349,16 @@ function goOrder(item, car) {
     }
   }
 }
-
+@media screen and (max-width: 768px) {
+  .hotel{
+    .index{font-size: 14px;}
+    p{font-size: 16px}
+    .room{
+      .name{margin: 20px 0 0;}
+      .price{font-size: 16px;
+        span{font-size: 24px;}
+      }
+    }
+  }
+}
 </style>

@@ -3,13 +3,12 @@
     <div class="box">
       <el-card :body-style="{ padding: '0px' }" class="mt20">
         <div slot="header">
-          <div class="bg-lineg uppercase">{{
-              language == 0 ? '车辆预约下单' : 'TRANSPORTATION RESERVATION order'
-            }}
+          <div class="bg-lineg uppercase">
+            {{language == 0 ? '车辆预约下单' : 'TRANSPORTATION RESERVATION order' }}
           </div>
         </div>
         <el-row :gutter="20" class="pd20">
-          <el-col :span="14">
+          <el-col :lg="14">
             <div class="border-info">
               <div class="flex aic">
                 <h3 class="esp">{{ item.checkIn }}</h3>
@@ -123,7 +122,7 @@
               </el-form>
             </div>
           </el-col>
-          <el-col :span="10">
+          <el-col :lg="10">
             <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
             <div class="border-rr mt20 pd20 ccitemBox">
               <label v-show="form.useType.indexOf('0')>-1"> {{ language == 0 ? '接站车辆费' : 'Room fee' }}
@@ -152,14 +151,14 @@
 
       <el-card class="mt30">
         <el-row align="middle" justify="space-between">
-          <el-col :span="12">
+          <el-col :lg="12">
             <label>{{ language == 0 ? '共计金额' : 'Total' }}：
               <span class=" text-warning"> {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{
                   money
                 }}</span></span>
             </label>
           </el-col>
-          <el-col :span="12" class="text-right">
+          <el-col :lg="12" class="text-right">
             <el-button :loading="payLoading" class="btn-lineG w200px" round type="primary" @click="submit">
               {{ language == 0 ? '确认付款' : 'Pay' }}
             </el-button>
@@ -392,7 +391,7 @@ function pushFrom() {
 
     span {
       color: #FF8124;
-      font-family: DIN Alternate;
+      font-family: DIN Alternate, sans-serif;
       font-size: 24px;
     }
   }
@@ -434,7 +433,7 @@ function pushFrom() {
   }
 
   span {
-    border-radius: 13px;
+    border-radius: 13px;display: inline-block;
     font-size: 12px;
     padding: 4px 10px;
     margin-right: 10px;
@@ -461,4 +460,8 @@ function pushFrom() {
     color: rgba(247, 64, 166, 1);
   }
 }
+
+@media screen and (max-width: 768px) {
+  .leftboderTT{margin: 30px 0 15px;}
+}
 </style>

@@ -259,7 +259,7 @@ function goMatch(n) {
 
   .primaryDate {
     color: #fff;
-    background: linear-gradient(90deg, #8623FC, #453DEA);
+    background: #000;
   }
 
   .date {
@@ -310,7 +310,7 @@ function goMatch(n) {
 
     li::before {
       content: '';
-      background: linear-gradient(0deg, #8623FC, #453DEA);
+      background: #000;
       border-radius: 50%;
       width: 8px;
       height: 8px;
@@ -334,7 +334,7 @@ function goMatch(n) {
 
     //li:hover {
     //  color: #fff;
-    //  background: linear-gradient(-90deg, #8623FC, #453DEA);
+    //  background: #000;
     //
     //  label {
     //    color: #fff;
@@ -362,7 +362,7 @@ function goMatch(n) {
 }
 
 :deep(.el-calendar__header) {
-  background: linear-gradient(90deg, #8623FC, #453DEA);
+  background: #000;
   height: 50px;
   line-height: 50px;
 }

@@ -239,7 +239,7 @@ function disabledDateRZ(date) {
 
   .primaryDate {
     color: #fff;
-    background: linear-gradient(90deg, #8623FC, #453DEA);
+    background: #000;
   }
 
   .date {
@@ -290,7 +290,7 @@ function disabledDateRZ(date) {
 
     li::before {
       content: '';
-      background: linear-gradient(0deg, #8623FC, #453DEA);
+      background: #000;
       border-radius: 50%;
       width: 8px;
       height: 8px;
@@ -314,7 +314,7 @@ function disabledDateRZ(date) {
 
     //li:hover {
     //  color: #fff;
-    //  background: linear-gradient(-90deg, #8623FC, #453DEA);
+    //  background: #000;
     //
     //  label {
     //    color: #fff;
@@ -344,7 +344,7 @@ function disabledDateRZ(date) {
 }
 
 :deep(.el-calendar__header) {
-  background: linear-gradient(90deg, #8623FC, #453DEA);
+  background: #000;
   height: 50px;
   line-height: 50px;
 }

@@ -7,7 +7,7 @@
         </div>
         <!--        {{room}}-->
         <el-row class="pd20" :gutter="20">
-          <el-col :span="14">
+          <el-col :lg="14">
             <div class="border-info">
               <h3>{{ restaurant.name }}</h3>
               <div class="room">
@@ -59,7 +59,7 @@
               </el-form>
             </div>
           </el-col>
-          <el-col :span="10">
+          <el-col :lg="10">
             <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
             <div class="border-rr mt20 pd20 ccitemBox">
               <label> {{food.name }}</label>
@@ -78,12 +78,12 @@
 
       <el-card class="mt30">
         <el-row justify="space-between" align="middle">
-          <el-col :span="12">
+          <el-col :lg="12">
             <label>{{ language == 0 ? '共计金额' : 'Total' }}：
               <span class=" text-warning">  {{ language == 0 ? '¥' : '€' }}<span class="bigMoney">{{ form.total }}</span></span>
             </label>
           </el-col>
-          <el-col :span="12" class="text-right">
+          <el-col :lg="12" class="text-right">
             <el-button type="primary" size="large" class="btn-lineG w200px" @click="submit" round>{{  language == 0 ?'确认付款':'Pay' }}</el-button>
           </el-col>
         </el-row>
@@ -338,4 +338,8 @@ function submit() {
   color: #FF8124;
 }
 .tip{font-size: 14px;color: #666;padding: 0 10px;}
+
+@media screen and (max-width: 768px) {
+  .leftboderTT{margin: 30px 0 15px;}
+}
 </style>

@@ -19,12 +19,12 @@
         <el-card @click="goDetail(h)">
           <!--        酒店列表-->
           <el-row class="hotel" align="middle" :gutter="20">
-            <el-col :span="6">
+            <el-col :lg="6" :md="6">
               <div class="imgbox">
                 <img class="w100" :src="fillImgUrl(h.photos?.split(',')[0])"/>
               </div>
             </el-col>
-            <el-col :span="12">
+            <el-col :lg="12" :md="12">
               <h3 class="esp">{{h.name}}</h3>
               <div class="starBox">
                 <img  v-for="i in Number(h.starLevel||0)" src="@/assets/booking/star.png">
@@ -38,11 +38,11 @@
                 {{h.address}}
               </p>
             </el-col>
-            <el-col :span="4" class="text-right">
+            <el-col :lg="4" :md="4" class="text-right">
               <div class="price">{{ language==0?'¥':'€' }}<span>{{ h.price }}</span>
                 <i v-if="language==0">起</i>
               </div>
-              <el-button class="btn-lineG w200px" round type="primary" >{{ language==0?'立即预订':'Select' }} ⇀</el-button>
+              <el-button class="w200px blackBtn" round type="primary" >{{ language==0?'立即预订':'Select' }} ⇀</el-button>
             </el-col>
           </el-row>
         </el-card>
@@ -116,6 +116,7 @@
       span{font-size: 36px;margin: 0 8px;font-family: 'DINAlternate-Bold';font-weight: 600;}
       i{font-style: normal;color: #929AA0;}
     }
+    .blackBtn{background: #000;border: #000;}
   }
   .banner{height: 140px;background-size: cover;text-align: center;
     background: url("@/assets/booking/jd_bg.png") center;display: flex;align-items: center;
@@ -145,4 +146,7 @@
     span:nth-child(4n+2){background: rgba(0, 160, 233, 0.2);color: rgba(0, 160, 233, 1);}
     span:nth-child(4n+3){background: rgba(247, 64, 166, 0.2);color:rgba(247, 64, 166, 1);}
   }
+  @media screen and (max-width: 768px) {
+    .hotel h3{margin: 20px 0 10px; font-size: 18px;}
+  }
 </style>

@@ -6,7 +6,7 @@
           <!--          <el-col :span="6">-->
           <!--            <img class="w100" :src="fillImgUrl(form.photos?.split(',')[0])"/>-->
           <!--          </el-col>-->
-          <el-col :span="language == 0?16:24">
+          <el-col :lg="language == 0?16:24">
             <h3 class="esp flex">{{ form?.name }}
               <div class="starBox ml20">
                 <img v-for="i in Number(form?.starLevel||0)" src="@/assets/booking/star.png">
@@ -34,7 +34,7 @@
               <div :class="showAll?'':'esp_2'" @click="showAll=!showAll" v-html="form.introduction.toString()"></div>
             </div>
           </el-col>
-          <el-col :span="8" class="text-right" v-if="language == 0">
+          <el-col :lg="8" class="text-right" v-if="language == 0">
             <div class="mapBox" @click="goMap">
               <div id="map"></div>
             </div>
@@ -45,15 +45,15 @@
 
       <div class="mt30">
         <el-row :gutter="20">
-          <el-col :span="10">
+          <el-col :lg="10">
             <div class="imgbox hotelImg">
               <el-image :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover"
                         :preview-src-list="form?.photos?.split(',')"/>
             </div>
           </el-col>
-          <el-col :span="14">
+          <el-col :lg="14">
             <el-row class="h100" :gutter="20">
-              <el-col :span="8" class="oddmb" v-for="(p,index) in form?.photos?.split(',').slice(1,7)">
+              <el-col :lg="8" class="oddmb" v-for="(p,index) in form?.photos?.split(',').slice(1,7)">
                 <div class="imgbox hotelImg">
                   <el-image :src="fillImgUrl(p)" fit="cover"/>
                 </div>
@@ -68,7 +68,7 @@
           <ul>
             <li>
               {{ language == 0 ? '房型选择' : 'Available Rooms' }}
-              <span style="margin-left: 100px" @click="initTime">
+              <span style="margin-left: 50px" @click="initTime">
                  <el-date-picker
                      @change="getDaysBetween"
                      v-model="hotTime"
@@ -87,12 +87,12 @@
           <div v-for="(r,index) in roomList" :key="index" class="room"
                v-show="language==0?r.roomPrice>0:r.roomPriceEn>0">
             <el-row :gutter="30" align="middle">
-              <el-col :span="4">
+              <el-col :lg="4">
                 <div class="roomImg">
                   <img :src="fillImgUrl(r.photo?.split(',')[0])">
                 </div>
               </el-col>
-              <el-col :span="14">
+              <el-col :lg="14">
                 <h3 class="name">{{ r.roomType }}</h3>
                 <el-row :gutter="10">
                   <el-col :span="8">{{ r.area }}m²</el-col>
@@ -111,12 +111,12 @@
                   <a v-show="r.label?.split('，').length>4">{{ language==0?'更多':'MORE' }} ></a>
                 </div>
               </el-col>
-              <el-col :span="3">
+              <el-col :lg="3" :md="12" :sm="12" :xs="12">
                 <div class="price">{{
                     language == 0 ? '¥' : '€'
                   }}<span>{{ language == 0 ? r.roomPrice : r.roomPriceEn }}</span></div>
               </el-col>
-              <el-col :span="3">
+              <el-col :lg="3" :md="12" :sm="12" :xs="12">
 <!--                :disabled="!r.useCount && !hotTime"-->
                 <el-button v-if="language==0" :class="{'forbid':!(!hotTime[0] || r.useCount>0)}"
                            @click="goOrder(r)" class="bg-lineg button">
@@ -410,7 +410,7 @@ function goMap() {
     }
   }
 
-  .bg-lineg {
+  .bg-lineg {background: linear-gradient(90deg, #1B69F8, #0540EC);
     margin: auto;
     border-radius: 10px;
     text-align: center;
@@ -572,4 +572,8 @@ function goMap() {
 .forbid:hover {
   box-shadow: none;
 }
+
+@media screen and (max-width: 768px) {
+  .roomImg{margin: 0 0 20px;}
+}
 </style>

 <template>
   <div>
     <div class="box">
-      <el-card :body-style="{ padding: '0px' }" class="mt20">
+      <el-card :body-style="{ padding: '0px' }" class="mt20 mb30">
         <div slot="header">
           <div class="bg-lineg">{{ language == 0 ? '酒店预约下单' : 'Hotel booking order' }}</div>
         </div>
         <!--        {{room}}-->
         <el-row class="pd20" :gutter="20">
-          <el-col :span="14">
+          <el-col :lg="14">
             <div class="border-info">
               <h3>{{ hotelName }}</h3>
               <div class="roomType">{{ room.roomType }}</div>
@@ -88,7 +88,7 @@
               </el-form>
             </div>
           </el-col>
-          <el-col :span="10">
+          <el-col :lg="10">
             <div class="leftboderTT">{{ language == 0 ? '订单明细' : 'Order details' }}</div>
             <div class="border-rr mt20 pd20 ccitemBox">
               <label> {{ language == 0 ? '房费' : 'Room fee' }}
@@ -127,7 +127,7 @@
         </el-row>
       </el-card>
 
-      <el-card class="mt30">
+      <el-card class="mt30 mb30">
         <el-row justify="space-between" align="middle">
           <el-col :span="12">
             <label>{{ language == 0 ? '共计金额' : 'Total' }}：
@@ -508,7 +508,7 @@ function submit() {
 .leftboderTT {
   font-weight: 600;
   font-size: 16px;
-  color: #453DEA;
+  color: var(--el-color-primary);
 }
 
 .border-rr {
@@ -559,4 +559,8 @@ function submit() {
   color: #FF8124;
 }
 .tip{font-size: 14px;color: #666;padding: 0 10px;}
+
+@media screen and (max-width: 768px) {
+  .leftboderTT{margin: 30px 0 15px;}
+}
 </style>

@@ -454,7 +454,7 @@ li img {
 
 .active {
   color: #fff;
-  background: linear-gradient(90deg, #8623FC, #453DEA);
+  background: #000;
   border-radius: 20px;
 }
 @media (max-width: 500px) {

@@ -153,7 +153,7 @@ fieldset {
     }
 
     &.is-active {
-      background: linear-gradient(90deg, #8623FC, #453DEA);
+      background: #000;
 
       .el-radio-button__inner {
         color: #fff;

@@ -99,7 +99,7 @@ function goMatch(n) {
 
   .primaryDate {
     color: #fff;
-    background: linear-gradient(90deg, #8623FC, #453DEA);
+    background: #000;
   }
 
   .date {
@@ -129,7 +129,7 @@ function goMatch(n) {
       font-size: 15px;
 
       label {
-        color: #453DEA;
+        color: #000;
         margin-right: 15px;
 
         &::before {
@@ -150,7 +150,7 @@ function goMatch(n) {
 
     li::before {
       content: '';
-      background: linear-gradient(0deg, #8623FC, #453DEA);
+      background: #000;
       border-radius: 50%;
       width: 8px;
       height: 8px;
@@ -174,7 +174,7 @@ function goMatch(n) {
 
     li:hover {
       color: #fff;
-      background: linear-gradient(-90deg, #8623FC, #453DEA);
+      background: #000;
 
       label {
         color: #fff;

 <template>
-  <div class="itemBox" v-if="language == 0">
-    <el-row :gutter="20">
-      <el-col :sm="12" :lg="8" :xs="12">
-        <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn01.png">酒店预订</div>
+  <div class="itemBox" v-if="language === 0">
+    <el-row :gutter="0" justify="space-around">
+      <el-col :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="building"><img src="@/assets/dance/btn01.png">签证服务</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
-        <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn02.png">车辆预订</div>
+      <el-col :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="popRemark(1)"><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 :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">接送服务</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
-        <div class="item" @click="popRemark(0)"><img src="@/assets/dance/btn04.png">票务预订</div>
+      <el-col :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="goAbout"><img src="@/assets/dance/btn04.png">场馆介绍</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :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">
-        <div class="item" @click="popRemark(5)"><img src="@/assets/dance/btn06.png">拍照预约</div>
+      <el-col :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="liveClick"><img src="@/assets/dance/btn05.png">赛事直播</div>
       </el-col>
     </el-row>
   </div>
   <div class="itemBox_en" v-else>
-    <el-row :gutter="20">
-      <el-col :sm="12" :lg="8" :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">
-        <div class="item_en" @click="popRemark(2)"><img src="@/assets/dance/btn02.png">
-          <p>TRANSPORTATION RESERVATION</p>
-        </div>
+    <el-row :gutter="20" justify="space-around">
+      <el-col :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="building"><img src="@/assets/dance/btn01.png">Visa Services</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 :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="popRemark(1)"><img src="@/assets/dance/btn02.png">HOTEL RESERVATION</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
-        <div class="item_en" @click="popRemark(0)">
-          <img src="@/assets/dance/btn04.png">
-          <p>TICKET BOOKING</p>
-        </div>
+      <el-col :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="popRemark(2)"><img src="@/assets/dance/btn03.png">TRANSPORTATION RESERVATION</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
-        <div class="item_en" @click="popRemark(4)"><img src="@/assets/dance/btn05.png">
-          <p>MAKEUP APPOINTMENT</p>
-        </div>
+      <el-col :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="goAbout"><img src="@/assets/dance/btn04.png">Venue Introduction</div>
       </el-col>
-      <el-col :sm="12" :lg="8" :xs="12">
-        <div class="item_en" @click="popRemark(5)"><img src="@/assets/dance/btn06.png">
-          <p>PHOTOGRAPHY APPOINTMENT</p>
-        </div>
+      <el-col :sm="12" :lg="4" :xs="12">
+        <div class="item" @click="liveClick"><img src="@/assets/dance/btn05.png">live streaming</div>
       </el-col>
     </el-row>
   </div>
@@ -72,6 +53,7 @@ import {ElMessage} from "element-plus";
 import {getCurrentInstance} from "@vue/runtime-core";
 import {computed, onMounted, watch} from "vue";
 import {getBaseInfoByActiveId} from "@/apiPc/booking";
+import * as match from "@/apiPc/match";
 
 const props = defineProps({
   matchId: {
@@ -87,6 +69,7 @@ const props = defineProps({
 })
 const language = useStorage('language', 0)
 const form = ref({})
+const liveData = ref({})
 const matchId = computed(() => props.matchId);
 
 watch(matchId, (val) => {
@@ -97,9 +80,30 @@ watch(matchId, (val) => {
       console.log(err)
       form.value = null
     })
+
+    match.getInfoByCptId({ cptId:props.matchId }).then((res) => {
+      liveData.value = res.data || {}
+    })
   }
 })
 
+const liveClick = () => {
+  if (liveData.value.videoStatus=="1") {
+
+    if(language.value==0){
+
+      window.open(liveData.value.videoUrlCn)
+    } else {
+      window.open(liveData.value.videoUrlEn)
+    }
+  } else {
+    ElMessage.warning(language.value == 0 ? '暂无直播' : 'No live')
+  }
+}
+
+const goAbout = () => {
+  router.push({path: `/about/wuDao`})
+}
 onMounted(() => {
 
 })
@@ -168,61 +172,37 @@ function goBooking(n) {
 </script>
 
 <style scoped lang="scss">
-.itemBox {
-  padding: 20px 40px;
+.itemBox,.itemBox_en {
+  padding: 20px 0;background: #fff;box-shadow: 0 0 46px 0 rgba(1,16,64,0.08);
+  border-radius: 20px;margin-bottom: 22px;
 }
 
-.itemBox_en {
-  padding: 20px 40px;
-
-  p {
-    margin: 0;
-    height: 40px;
-    line-height: 20px;
-    display: flex;
-    align-items: center;
-  }
-}
 
 .item {
   box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
   margin: 10px 0;
   display: flex;
   align-items: center;
-  font-size: 22px;
+  font-size: 20px;
   background: url("@/assets/dance/btn_bg.png") no-repeat left #FFFFFF;
   background-size: 100% 100%;
   border-radius: 15px;
 
   img {
-    margin: 0 5%;
+    margin: 0 5%;width: 75px;
   }
 }
-
-.item_en {
-  box-shadow: 0px 0px 21px 0px rgba(41, 23, 101, 0.14);
-  margin: 40px 0 0;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  text-align: center;
-  color: #333;
-  font-size: 18px;
-  flex-direction: column;
-  padding: 35px 10px 20px;
-  background: url("@/assets/dance/znbb.png") no-repeat left #FFFFFF;
-  background-size: cover;
-  position: relative;
-  border-radius: 15px;
-
+.itemBox_en{}
+.itemBox_en .item {
+  flex-direction: column;text-align: center;text-transform: uppercase;
+height: 100%;
   img {
-    position: absolute;
-    top: -30px;
+    position: relative;
     transition: all 0.2s;
   }
 
   &:hover {
-    box-shadow: 0 0 10px #333;
+    box-shadow: 0 0 10px #eee;
 
     img {
       transform: rotateY(180deg);

+<template>
+  <div class="box weatherLine">
+    <el-row :gutter="20" align="middle" style="height: 100%;">
+      <el-col :sm="24" :lg="10">
+        <!--天气-->
+        <div class="leftFlex">
+          <div class="smallToday">
+              <div class="type">
+                <weather-icon :type="weatherObj.forecast[0]?.type" :width="50"/>
+              </div>
+              <div class="wd_p">
+<!--                {{ weatherObj.forecast[0]?.low.slice(2) }}~-->
+                {{ weatherObj.forecast[0]?.high.slice(2) }}
+              </div>
+          </div>
+          <div>{{ language ==0?'无锡':'Wuxi' }}</div>
+          <div>{{dayjs().month()<9?'0':''}}{{dayjs().month()+1}} / {{dayjs().date()}}</div>
+          <div v-if="language ==0">{{week[dayjs().day()]}}</div>
+          <div v-else>{{weekEn[dayjs().day()]}}</div>
+          <div class="forPc">{{dayjs().hour()<10?'0':''}}{{dayjs().hour()}}:{{dayjs().minute()<10?'0':''}}{{dayjs().minute()}}</div>
+        </div>
+      </el-col>
+      <el-col :sm="24" :lg="14">
+        <el-button round class="searchfw">
+          <el-icon class="mr20">
+            <Search/>
+          </el-icon>
+          服务查询
+        </el-button>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import {onMounted, ref} from "vue"
+import useUserStore from '@/store/modules/user'
+import WeatherIcon from '@/viewsPc/components/weatherIcon'
+import {getWeather} from "@/apiPc/webSite"
+import dayjs from "dayjs"
+const language = useUserStore().language
+const weatherObj = ref({
+  forecast:[]
+})
+const week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']
+const weekEn = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
+onMounted(()=>{
+  if(useUserStore().weather == null){
+    init()
+  }
+})
+function init(){
+  getWeather().then(res=>{
+    weatherObj.value = JSON.parse(res.data).data
+    useUserStore().setWeather(weatherObj.value)
+  })
+}
+</script>
+
+<style scoped lang="scss">
+.weatherLine {padding: 12px;
+  background: linear-gradient(90deg, #0557EC, #0540EC, #013499);
+  border-radius: 45px;
+  color: #fff;
+}
+.leftFlex{display: flex;align-items: center;justify-content: space-between;
+  > div{background: url("@/assets/dance/line.png") no-repeat right;width: 20%;
+    justify-content: center;
+    min-height: 56px;
+    display: flex;
+    align-items: center;}
+  .smallToday{
+    width: 30%;
+    .wd_p{font-size: 18px;}
+  }
+}
+.smallToday{display: flex;align-items: center;
+  .type{margin-right: 10px;}
+  h3{margin: 0 0 10px;}
+}
+.searchfw{width: 100%;height:65px;border-radius: 100px;font-size: 24px;}
+
+@media screen and (max-width: 768px) {
+  .forPc{display: none;}
+  .weatherLine{border-radius: 15px}
+  .leftFlex {margin-bottom: 15px;
+    .smallToday{width: 40%;
+    }
+  }
+  .leftFlex > div{font-size: 12px; width: 15%;}
+  .searchfw{font-size: 18px;height: 40px;}
+}
+</style>

@@ -175,7 +175,7 @@ function showDetail(name) {
   cursor: pointer;border: 1px solid #e1e1e1;border-radius: 4px;
   width: 350px;text-align: center;line-height: 130px;
   padding: 1px;    font-size: 30px;color: #fff;
-  margin: 20px auto;background:linear-gradient(90deg, #8623FC, #453DEA);
+  margin: 20px auto;background:#000;
   &:hover{
     background:linear-gradient(90deg, #453DEA, #8623FC);
     box-shadow: 0 4px 10px #453DEA;border: none;

@@ -236,7 +236,7 @@ function showDetail(name) {
   cursor: pointer;border: 1px solid #e1e1e1;border-radius: 4px;
   width: 350px;text-align: center;line-height: 130px;
   padding: 1px;    font-size: 30px;color: #fff;
-  margin: 20px auto;background:linear-gradient(90deg, #8623FC, #453DEA);
+  margin: 20px auto;background:#000;
   &:hover{
     background:linear-gradient(90deg, #453DEA, #8623FC);
     box-shadow: 0 4px 10px #453DEA;border: none;

@@ -61,9 +61,6 @@
         </div>
       </el-dialog>
     </div>
-    <div class="poCode">
-      <el-image :preview-src-list="['/img/code.jpg']" hide-on-click-modal="true" style="width: 120px;height: 120px;" src="/img/code.jpg"/>
-    </div>
     <dialog-master-class ref="masterClassRef"/>
     <pick-up ref="pickupRef"></pick-up>
     <back-number ref="backNumberRef"></back-number>

@@ -437,13 +437,13 @@ const goPolicy = () => {
 
 .loginBtn {
   height: 40px;
-  background: linear-gradient(-90deg, #8623FC, #453DEA);
+  background: #000;
   border-radius: 20px;
   font-size: 18px;
 
   &:hover {
-    //background: linear-gradient(90deg, #8623FC, #453DEA);
-    box-shadow: 0 0 10px #453DEA;
+    //background: #000;
+    box-shadow: 0 0 10px #000;
   }
 }
 

 <template>
   <div style="filter: opacity(1)">
     <el-row v-if="language==0" class="btnbox" justify='space-between'>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
         <div class="funcBtn" @click="popRemark(0)">
-          <img src="@/assets/dance/btn04.png"/>
-          <h4>票务预订</h4>
+          <img src="@/assets/dance/btn01.png"/>
+          <h4>签证服务</h4>
         </div>
       </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
         <div class="funcBtn" @click="popRemark(1)">
-          <img src="@/assets/dance/btn01.png"/>
+          <img src="@/assets/dance/btn02.png"/>
           <h4>酒店预订</h4>
         </div>
       </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
         <div class="funcBtn" @click="popRemark(2)">
-          <img src="@/assets/dance/btn02.png"/>
-          <h4>车辆预订</h4>
+          <img src="@/assets/dance/btn03.png"/>
+          <h4>接送服务</h4>
         </div>
       </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
         <div class="funcBtn" @click="popRemark(6)">
-          <img src="@/assets/dance/btn07.png"/>
-          <h4>预订查询</h4>
-        </div>
-      </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
-        <div class="funcBtn" @click="popRemark(3)">
-          <img src="@/assets/dance/btn03.png"/>
-          <h4>餐饮预订</h4>
+          <img src="@/assets/dance/btn04.png"/>
+          <h4>场馆介绍</h4>
         </div>
       </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
-        <div class="funcBtn" @click="popRemark(4)">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
+        <div class="funcBtn" @click="liveClick">
           <img src="@/assets/dance/btn05.png"/>
-          <h4>化妆预约</h4>
-        </div>
-      </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
-        <div class="funcBtn" @click="popRemark(5)">
-          <img src="@/assets/dance/btn06.png"/>
-          <h4>拍照预约</h4>
+          <h4>赛事直播</h4>
         </div>
       </el-col>
     </el-row>
     <el-row v-else class="btnbox" justify='space-between'>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
         <div class="funcBtn" @click="popRemark(0)">
-          <img src="@/assets/dance/btn04.png"/>
-          <h4>TICKET BOOKING</h4>
+          <img src="@/assets/dance/btn01.png"/>
+          <h4>Visa Services</h4>
         </div>
       </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
         <div class="funcBtn" @click="popRemark(1)">
-          <img src="@/assets/dance/btn01.png"/>
+          <img src="@/assets/dance/btn02.png"/>
           <h4>HOTEL RESERVATION</h4>
         </div>
       </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
         <div class="funcBtn" @click="popRemark(2)">
-          <img src="@/assets/dance/btn02.png"/>
+          <img src="@/assets/dance/btn03.png"/>
           <h4>TRANSPORTATION RESERVATION</h4>
         </div>
       </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
         <div class="funcBtn" @click="popRemark(6)">
-          <img src="@/assets/dance/btn07.png"/>
-          <h4>RESERVATION SEARCH</h4>
-        </div>
-      </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
-        <div class="funcBtn" @click="popRemark(3)">
-          <img src="@/assets/dance/btn03.png"/>
-          <h4>DINING RESERVATION</h4>
+          <img src="@/assets/dance/btn04.png"/>
+          <h4>Venue Introduction</h4>
         </div>
       </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
-        <div class="funcBtn" @click="popRemark(4)">
+      <el-col :lg="4" :md="7" :sm="11" :xs="11">
+        <div class="funcBtn" @click="liveClick">
           <img src="@/assets/dance/btn05.png"/>
-          <h4>MAKEUP APPOINTMENT</h4>
-        </div>
-      </el-col>
-      <el-col :lg="3" :md="7" :sm="11" :xs="11">
-        <div class="funcBtn" @click="popRemark(5)">
-          <img src="@/assets/dance/btn06.png"/>
-          <h4>PHOTOGRAPHY APPOINTMENT</h4>
+          <h4>live streaming</h4>
         </div>
       </el-col>
     </el-row>
@@ -105,6 +81,7 @@ import OrderRemark from '@/viewsPc/components/orderRemark'
 import {getBaseInfoByActiveId} from "@/apiPc/booking";
 import {getCurrentInstance} from "@vue/runtime-core";
 import {onMounted} from "vue";
+import * as match from "@/apiPc/match";
 
 const {proxy} = getCurrentInstance()
 
@@ -123,6 +100,7 @@ const props = defineProps({
   }
 })
 const form = ref()
+const liveData = ref({})
 onMounted(() => {
   getBaseInfoByActiveId(props.matchId).then(res => {
     form.value = res.data || null
@@ -130,13 +108,29 @@ onMounted(() => {
     form.value = null
     console.log(err)
   })
+
+  match.getInfoByCptId({ cptId:props.matchId }).then((res) => {
+    liveData.value = res.data || {}
+  })
 })
 
 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.')
 
 }
+const liveClick = () => {
+  if (liveData.value.videoStatus=="1") {
 
+    if(language.value==0){
+
+      window.open(liveData.value.videoUrlCn)
+    } else {
+      window.open(liveData.value.videoUrlEn)
+    }
+  } else {
+    ElMessage.warning(language.value == 0 ? '暂无直播' : 'No live')
+  }
+}
 function popRemark(type) {
   if (type == 6) {
     return router.push({
@@ -225,10 +219,12 @@ h4 {
 //    flex: 0 0 14.28%;
 //  }
 //}
-
+.funcBtn{text-transform: uppercase;
+  h4 {display: flex;align-items: center;justify-content: center;height: 20%;}
+}
 .fixedKP {
   position: fixed;
-  background: linear-gradient(-90deg, #8623FC, #453DEA);
+  background: #000;
   left: 0;
   top: 450px;
   cursor: pointer;

@@ -190,17 +190,20 @@ function getList() {
     }
     total.value = res.total
     loading.value = false
+
+    goDetail(res.rows[0].id)
   })
 }
 
 function goDetail(id) {
-  const routeLocation = router.resolve({
+  // const routeLocation = router.resolve({
+  router.push({
     name: 'matchDetail',
     params: {
       id: id
     }
   })
-  window.open(routeLocation.href, '_blank')
+  // window.open(routeLocation.href, '_blank')
 }
 </script>
 

@@ -52,7 +52,7 @@
           <div class="picbox"  @click="goDetail(newsList2[0])"><img :src="fillImgUrl_webSite(newsList2[0]?.picUrl)"/></div>
         </el-col>
         <el-col :lg="15">
-          <el-row :gutter="20">
+          <el-row class="mb20" :gutter="20">
             <el-col :lg="16">
               <div class="picbox" @click="goDetail(newsList2[1])"><img :src="fillImgUrl_webSite(newsList2[1]?.picUrl)"/></div>
             </el-col>

@@ -299,6 +299,12 @@ const goDetail = (n) => {
 }
 </script>
 <style lang="scss" scoped>
+.activeItem{
+  border-bottom: 2px solid #C7C7CD;
+  &:hover{
+    border-bottom: #000;
+  }
+}
 .leftboderTT{
   font-size: 20px;}
 .flexBody {

@@ -152,24 +152,24 @@ const goDetail = (n) => {
     color: var(--el-color-primary);}
 }
 .firstItem{cursor: pointer;
-  background: #F8F4FF;height: 100%;padding: 10px 20px;
+  background: #F7F8FC;height: 100%;padding: 10px 20px;
   .date{font-weight: bold;transform: scaleX(0.7);transform-origin: left;
     font-size: 18px;
-    color: var(--el-color-primary);
+    color: #4C5359;
     p{margin: 5px 0;}
   }
   h3{margin: 10px 0;
     font-size: 22px;}
-  .go{color: var(--el-color-primary);
+  .go{color: #929AA0;
     font-size: 14px;padding: 0 0 5px;}
-  &:hover{background: linear-gradient(90deg, #8623fc3d, #453dea36);}
+  &:hover{background: #dcdde1;}
 }
 .newsLine{
   .firstItem{margin-bottom: 10px;}
   .item{display: flex;position: relative;width: 100%;height: 90px;
     align-items: center;cursor: pointer;border-bottom: 1px dashed #EEEEEE;
     .date{width: 60px;height: 60px;text-align: center;background: #FAFAFA;margin: 0 10px;
-      .day{color: var(--el-color-primary);transform: scaleX(0.7);font-weight: bold;font-size: 24px;}
+      .day{color: #4C5359;transform: scaleX(0.7);font-weight: bold;font-size: 24px;}
       p{font-size: 14px;margin: 0;transform: scaleX(0.7);font-weight: bold;color: #7B7F83;}
     }
     .item-body{width: 60%;
@@ -180,14 +180,14 @@ const goDetail = (n) => {
       filter:grayscale(1);
     }
   }
-  .item:hover{background: #F8F4FF;
+  .item:hover{background: #f7f8fc;
     .date{
-      background: var(--el-color-primary);
+      background:#000;
       .day{color: #fff;}
       p{color: #fff;}
     }
     .item-body{
-      h3{color: var(--el-color-primary);}
+      h3{color: #000;}
     }
   }
 }

@@ -5,7 +5,7 @@
         <div v-if="language==0">
           <h4>一、协议生效与适用范围</h4>
           1.1
-          本协议是您与无锡吉J体育舞蹈数字化平台系统（以下简称“系统”）之间关于您注册并使用系统服务所订立的协议。<br/><br/>
+          本协议是您与本平台系统（以下简称“系统”）之间关于您注册并使用系统服务所订立的协议。<br/><br/>
           1.2 您通过点击或以其他方式选择接受本协议，即表示您已充分阅读、理解并同意接受本协议的约束。如果您不同意本协议的任何条款，请不要进行注册或使用本系统的服务。
           <br/><br/>
           1.3 本协议适用于您使用系统提供的所有服务，包括但不限于在线课程、社区交流、活动报名等。<br/>

@@ -147,7 +147,7 @@ h3{background: #F5F0FF;margin: 0;padding: 10px 0;
   :deep(.el-calendar__button-group){display: none;}
 }
 .primaryDate{color: #fff;
-  background: linear-gradient(90deg, #8623FC, #453DEA);}
+  background: #000;}
 .date{  margin:5px auto;border-radius: 50%;width: 34px;height: 34px;line-height: 34px;
   font-weight: bold;
 }
@@ -158,19 +158,19 @@ h3{background: #F5F0FF;margin: 0;padding: 10px 0;
       border-radius: 10px;
       font-weight: 500;
       font-size: 15px;cursor: pointer;
-      label{color: #453DEA;margin-right: 15px;
+      label{color: #000;margin-right: 15px;
         &::before{content: '';background:#fff;left: -17px;top: 0px;bottom: 0;margin: auto;
           border-radius: 50%;width: 2px;height: 2px;position: absolute;z-index: 1}
       }
     }
-    li::before{content: '';background: linear-gradient(0deg, #8623FC, #453DEA);
+    li::before{content: '';background: #000;
       border-radius: 50%;width: 8px;height: 8px;position: absolute;
       left: -20px;top: 0;bottom: 0;margin: auto;z-index: 1;
     }
     li::after{content: ''; left: -16px;width: 1px;height: 100%;
       background: #EBEBEB;    position: absolute;top: 20px}
     li:hover{color: #fff;
-      background: linear-gradient(-90deg, #8623FC, #453DEA);
+      background: #000;
       label{color: #fff;}
     }
   }