二维码
Showing
1 changed file
with
93 additions
and
75 deletions
| ... | @@ -21,7 +21,7 @@ | ... | @@ -21,7 +21,7 @@ |
| 21 | 21 | ||
| 22 | <img :src="fillImgUrl(matchData.coverUrl)" class="mauto w100 as16_9"> | 22 | <img :src="fillImgUrl(matchData.coverUrl)" class="mauto w100 as16_9"> |
| 23 | </el-col> | 23 | </el-col> |
| 24 | <el-col :lg="matchData.type=='0'?9:16" :md="12" :xl="10" class="father" style="position: relative"> | 24 | <el-col :lg="matchData.type=='0'?9:16" :md="12" :xl="10" style="position: relative"> |
| 25 | <h3 style="margin: 0 0 10px">{{ matchData.name }}</h3> | 25 | <h3 style="margin: 0 0 10px">{{ matchData.name }}</h3> |
| 26 | <div v-if="matchData.type=='1'"> | 26 | <div v-if="matchData.type=='1'"> |
| 27 | <p class="ppl"> | 27 | <p class="ppl"> |
| ... | @@ -81,6 +81,44 @@ | ... | @@ -81,6 +81,44 @@ |
| 81 | {{ language == 0 ? '邮 箱' : 'EMAIL' }}: | 81 | {{ language == 0 ? '邮 箱' : 'EMAIL' }}: |
| 82 | </label> | 82 | </label> |
| 83 | {{ matchData.contactEmail }} | 83 | {{ matchData.contactEmail }} |
| 84 | |||
| 85 | <span class="father"> | ||
| 86 | <div class="son2"> | ||
| 87 | <div v-if="matchData.chatQrcode"> | ||
| 88 | <div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div> | ||
| 89 | <el-image | ||
| 90 | :preview-src-list="[fillImgUrl(matchData.chatQrcode)]" | ||
| 91 | :src="fillImgUrl(matchData.chatQrcode)" | ||
| 92 | fit="cover" | ||
| 93 | preview-teleported | ||
| 94 | style="width: 100px;height: 100px;margin-left: 10px" | ||
| 95 | /> | ||
| 96 | </div> | ||
| 97 | <div v-if="matchData.liveQrcode"> | ||
| 98 | <div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div> | ||
| 99 | <el-image | ||
| 100 | :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]" | ||
| 101 | :src="fillImgUrl(matchData.liveQrcode)" | ||
| 102 | fit="cover" | ||
| 103 | preview-teleported | ||
| 104 | style="width: 100px;height: 100px;margin-left: 10px" | ||
| 105 | /> | ||
| 106 | </div> | ||
| 107 | {{ matchData.cptQrcode }} | ||
| 108 | <div v-if="matchData.qrcode"> | ||
| 109 | <div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div> | ||
| 110 | <el-image | ||
| 111 | v-if="matchData.qrcode" | ||
| 112 | :preview-src-list="[fillImgUrl(matchData.qrcode)]" | ||
| 113 | :src="fillImgUrl(matchData.qrcode)" | ||
| 114 | fit="cover" | ||
| 115 | preview-teleported | ||
| 116 | style="width: 100px;height: 100px;margin-left: 10px" | ||
| 117 | /> | ||
| 118 | </div> | ||
| 119 | |||
| 120 | </div> | ||
| 121 | </span> | ||
| 84 | </p> | 122 | </p> |
| 85 | <p class="ppl"> | 123 | <p class="ppl"> |
| 86 | <label> | 124 | <label> |
| ... | @@ -122,7 +160,43 @@ | ... | @@ -122,7 +160,43 @@ |
| 122 | </p> | 160 | </p> |
| 123 | <p v-if="matchData.contactEmail" class="ppl"> | 161 | <p v-if="matchData.contactEmail" class="ppl"> |
| 124 | <label>{{ language == 0 ? '邮 箱' : 'EMAIL' }}:</label> | 162 | <label>{{ language == 0 ? '邮 箱' : 'EMAIL' }}:</label> |
| 125 | {{ matchData.contactEmail }}</p> | 163 | {{ matchData.contactEmail }} |
| 164 | <span class="father"> | ||
| 165 | <div v-if="matchData.type!=1" class="son"> | ||
| 166 | <div v-if="matchData.chatQrcode"> | ||
| 167 | <div class="qrTitle2">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div> | ||
| 168 | <el-image | ||
| 169 | :preview-src-list="[fillImgUrl(matchData.chatQrcode)]" | ||
| 170 | :src="fillImgUrl(matchData.chatQrcode)" | ||
| 171 | fit="cover" | ||
| 172 | preview-teleported | ||
| 173 | style="width: 50px;height: 50px;margin-left: 10px" | ||
| 174 | /> | ||
| 175 | </div> | ||
| 176 | <div v-if="matchData.liveQrcode"> | ||
| 177 | <div class="qrTitle2">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div> | ||
| 178 | <el-image | ||
| 179 | :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]" | ||
| 180 | :src="fillImgUrl(matchData.liveQrcode)" | ||
| 181 | fit="cover" | ||
| 182 | preview-teleported | ||
| 183 | style="width: 50px;height: 50px;margin-left: 10px" | ||
| 184 | /> | ||
| 185 | </div> | ||
| 186 | <div v-if="matchData.qrcode"> | ||
| 187 | <div class="qrTitle2">{{ language == 0 ? '小程序' : "UniApp" }}</div> | ||
| 188 | <el-image | ||
| 189 | v-if="matchData.qrcode" | ||
| 190 | :preview-src-list="[fillImgUrl(matchData.qrcode)]" | ||
| 191 | :src="fillImgUrl(matchData.qrcode)" | ||
| 192 | fit="cover" | ||
| 193 | preview-teleported | ||
| 194 | style="width: 50px;height: 50px;margin-left: 10px" | ||
| 195 | /> | ||
| 196 | </div> | ||
| 197 | </div> | ||
| 198 | </span> | ||
| 199 | </p> | ||
| 126 | </div> | 200 | </div> |
| 127 | 201 | ||
| 128 | <div style="height: 30px" /> | 202 | <div style="height: 30px" /> |
| ... | @@ -162,75 +236,7 @@ | ... | @@ -162,75 +236,7 @@ |
| 162 | {{ language == 0 ? '赛事规程' : 'Competition Regulations' }} | 236 | {{ language == 0 ? '赛事规程' : 'Competition Regulations' }} |
| 163 | </el-link> | 237 | </el-link> |
| 164 | </div> | 238 | </div> |
| 165 | <div v-if="matchData.type!=1" class="son"> | 239 | |
| 166 | <div v-if="matchData.chatQrcode"> | ||
| 167 | <!-- <div style="font-size: 14px">群聊二维码</div>--> | ||
| 168 | <el-image | ||
| 169 | :preview-src-list="[fillImgUrl(matchData.chatQrcode)]" | ||
| 170 | :src="fillImgUrl(matchData.chatQrcode)" | ||
| 171 | fit="cover" | ||
| 172 | preview-teleported | ||
| 173 | style="width: 50px;height: 50px;margin-left: 10px" | ||
| 174 | /> | ||
| 175 | </div> | ||
| 176 | <div v-if="matchData.liveQrcode"> | ||
| 177 | <!-- <div style="font-size: 14px">直播二维码</div>--> | ||
| 178 | <el-image | ||
| 179 | :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]" | ||
| 180 | :src="fillImgUrl(matchData.liveQrcode)" | ||
| 181 | fit="cover" | ||
| 182 | preview-teleported | ||
| 183 | style="width: 50px;height: 50px;margin-left: 10px" | ||
| 184 | /> | ||
| 185 | </div> | ||
| 186 | <div v-if="matchData.qrcode"> | ||
| 187 | <!-- <div style="font-size: 14px">赛事二维码</div>--> | ||
| 188 | <el-image | ||
| 189 | v-if="matchData.qrcode" | ||
| 190 | :preview-src-list="[fillImgUrl(matchData.qrcode)]" | ||
| 191 | :src="fillImgUrl(matchData.qrcode)" | ||
| 192 | fit="cover" | ||
| 193 | preview-teleported | ||
| 194 | style="width: 50px;height: 50px;margin-left: 10px" | ||
| 195 | /> | ||
| 196 | </div> | ||
| 197 | |||
| 198 | </div> | ||
| 199 | <div v-else class="son2"> | ||
| 200 | <div v-if="matchData.chatQrcode"> | ||
| 201 | <div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div> | ||
| 202 | <el-image | ||
| 203 | :preview-src-list="[fillImgUrl(matchData.chatQrcode)]" | ||
| 204 | :src="fillImgUrl(matchData.chatQrcode)" | ||
| 205 | fit="cover" | ||
| 206 | preview-teleported | ||
| 207 | style="width: 100px;height: 100px;margin-left: 10px" | ||
| 208 | /> | ||
| 209 | </div> | ||
| 210 | <div v-if="matchData.liveQrcode"> | ||
| 211 | <div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div> | ||
| 212 | <el-image | ||
| 213 | :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]" | ||
| 214 | :src="fillImgUrl(matchData.liveQrcode)" | ||
| 215 | fit="cover" | ||
| 216 | preview-teleported | ||
| 217 | style="width: 100px;height: 100px;margin-left: 10px" | ||
| 218 | /> | ||
| 219 | </div> | ||
| 220 | {{ matchData.cptQrcode }} | ||
| 221 | <div> | ||
| 222 | <div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div> | ||
| 223 | <el-image | ||
| 224 | v-if="matchData.qrcode" | ||
| 225 | :preview-src-list="[fillImgUrl(matchData.qrcode)]" | ||
| 226 | :src="fillImgUrl(matchData.qrcode)" | ||
| 227 | fit="cover" | ||
| 228 | preview-teleported | ||
| 229 | style="width: 100px;height: 100px;margin-left: 10px" | ||
| 230 | /> | ||
| 231 | </div> | ||
| 232 | |||
| 233 | </div> | ||
| 234 | </el-col> | 240 | </el-col> |
| 235 | <el-col v-if="matchData.type=='0'" :lg="8" :md="12" :xl="8"> | 241 | <el-col v-if="matchData.type=='0'" :lg="8" :md="12" :xl="8"> |
| 236 | <p v-if="language==0" class="countDownTitle"> | 242 | <p v-if="language==0" class="countDownTitle"> |
| ... | @@ -274,6 +280,7 @@ | ... | @@ -274,6 +280,7 @@ |
| 274 | }}:{{ matchData.signEndTime?.slice(0, 10) }}</p> | 280 | }}:{{ matchData.signEndTime?.slice(0, 10) }}</p> |
| 275 | 281 | ||
| 276 | </el-col> | 282 | </el-col> |
| 283 | |||
| 277 | </el-row> | 284 | </el-row> |
| 278 | 285 | ||
| 279 | </el-card> | 286 | </el-card> |
| ... | @@ -1722,16 +1729,20 @@ async function handelQR(id, type) { | ... | @@ -1722,16 +1729,20 @@ async function handelQR(id, type) { |
| 1722 | 1729 | ||
| 1723 | .son { | 1730 | .son { |
| 1724 | position: absolute; | 1731 | position: absolute; |
| 1725 | bottom: 0; | 1732 | bottom: -5px; |
| 1726 | right: -10%; | 1733 | left: 0%; |
| 1734 | width: 15vw; | ||
| 1727 | display: flex; | 1735 | display: flex; |
| 1736 | justify-content: space-around; | ||
| 1728 | } | 1737 | } |
| 1729 | 1738 | ||
| 1730 | .son2 { | 1739 | .son2 { |
| 1731 | position: absolute; | 1740 | position: absolute; |
| 1732 | bottom: 0; | 1741 | bottom: -43px; |
| 1733 | right: 10%; | 1742 | left: 0%; |
| 1743 | width: 33vw; | ||
| 1734 | display: flex; | 1744 | display: flex; |
| 1745 | justify-content: space-around; | ||
| 1735 | } | 1746 | } |
| 1736 | } | 1747 | } |
| 1737 | 1748 | ||
| ... | @@ -1741,4 +1752,11 @@ async function handelQR(id, type) { | ... | @@ -1741,4 +1752,11 @@ async function handelQR(id, type) { |
| 1741 | height: 25px; | 1752 | height: 25px; |
| 1742 | line-height: 25px; | 1753 | line-height: 25px; |
| 1743 | } | 1754 | } |
| 1755 | |||
| 1756 | .qrTitle2 { | ||
| 1757 | font-size: 12px; | ||
| 1758 | text-align: center; | ||
| 1759 | height: 25px; | ||
| 1760 | line-height: 25px; | ||
| 1761 | } | ||
| 1744 | </style> | 1762 | </style> | ... | ... |
-
Please register or sign in to post a comment