Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
f33c4dba by zhangmeng
Options

官网

1 parent 29a38066
Inline Side-by-side
Showing 1 changed file with 207 additions and 62 deletions
src/viewsPc/match/detail_en.vue
......@@ -82,43 +82,43 @@
</label>
{{ matchData.contactEmail }}
<span class="father">
<div class="son2">
<div v-if="matchData.chatQrcode">
<div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>
<el-image
:preview-src-list="[fillImgUrl(matchData.chatQrcode)]"
:src="fillImgUrl(matchData.chatQrcode)"
fit="cover"
preview-teleported
style="width: 100px;height: 100px;margin-left: 10px"
/>
</div>
<div v-if="matchData.liveQrcode">
<div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>
<el-image
:preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"
:src="fillImgUrl(matchData.liveQrcode)"
fit="cover"
preview-teleported
style="width: 100px;height: 100px;margin-left: 10px"
/>
</div>
{{ matchData.cptQrcode }}
<div v-if="matchData.qrcode">
<div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div>
<el-image
v-if="matchData.qrcode"
:preview-src-list="[fillImgUrl(matchData.qrcode)]"
:src="fillImgUrl(matchData.qrcode)"
fit="cover"
preview-teleported
style="width: 100px;height: 100px;margin-left: 10px"
/>
</div>
</div>
</span>
<!-- <span class="father">-->
<!-- <div class="son2">-->
<!-- <div v-if="matchData.chatQrcode">-->
<!-- <div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>-->
<!-- <el-image-->
<!-- :preview-src-list="[fillImgUrl(matchData.chatQrcode)]"-->
<!-- :src="fillImgUrl(matchData.chatQrcode)"-->
<!-- fit="cover"-->
<!-- preview-teleported-->
<!-- style="width: 100px;height: 100px;margin-left: 10px"-->
<!-- />-->
<!-- </div>-->
<!-- <div v-if="matchData.liveQrcode">-->
<!-- <div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>-->
<!-- <el-image-->
<!-- :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"-->
<!-- :src="fillImgUrl(matchData.liveQrcode)"-->
<!-- fit="cover"-->
<!-- preview-teleported-->
<!-- style="width: 100px;height: 100px;margin-left: 10px"-->
<!-- />-->
<!-- </div>-->
<!-- {{ matchData.cptQrcode }}-->
<!-- <div v-if="matchData.qrcode">-->
<!-- <div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div>-->
<!-- <el-image-->
<!-- v-if="matchData.qrcode"-->
<!-- :preview-src-list="[fillImgUrl(matchData.qrcode)]"-->
<!-- :src="fillImgUrl(matchData.qrcode)"-->
<!-- fit="cover"-->
<!-- preview-teleported-->
<!-- style="width: 100px;height: 100px;margin-left: 10px"-->
<!-- />-->
<!-- </div>-->
<!-- -->
<!-- </div>-->
<!-- </span>-->
</p>
<p class="ppl">
<label>
......@@ -135,6 +135,43 @@
{{ language == 0 ? '分&nbsp;站&nbsp;赛' : 'NO. OF TOURNAMENTS' }}：</label>
{{ matchData.cpts.length }}
</p>
<div class="father">
<div class="son2">
<div v-if="matchData.chatQrcode">
<div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>
<el-image
:preview-src-list="[fillImgUrl(matchData.chatQrcode)]"
:src="fillImgUrl(matchData.chatQrcode)"
fit="cover"
preview-teleported
style="width: 100px;height: 100px;margin-left: 10px"
/>
</div>
<div v-if="matchData.liveQrcode">
<div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>
<el-image
:preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"
:src="fillImgUrl(matchData.liveQrcode)"
fit="cover"
preview-teleported
style="width: 100px;height: 100px;margin-left: 10px"
/>
</div>
{{ matchData.cptQrcode }}
<div v-if="matchData.qrcode">
<div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div>
<el-image
v-if="matchData.qrcode"
:preview-src-list="[fillImgUrl(matchData.qrcode)]"
:src="fillImgUrl(matchData.qrcode)"
fit="cover"
preview-teleported
style="width: 100px;height: 100px;margin-left: 10px"
/>
</div>
</div>
</div>
</div>
<div v-if="matchData.type=='0'">
......@@ -161,7 +198,44 @@
<p v-if="matchData.contactEmail" class="ppl">
<label>{{ language == 0 ? '邮&nbsp;&nbsp;&nbsp;&nbsp;箱' : 'EMAIL' }}：</label>
{{ matchData.contactEmail }}
<span class="father">
<!-- <span class="father">-->
<!-- <div v-if="matchData.type!=1" class="son">-->
<!-- <div v-if="matchData.chatQrcode">-->
<!-- <div class="qrTitle2">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>-->
<!-- <el-image-->
<!-- :preview-src-list="[fillImgUrl(matchData.chatQrcode)]"-->
<!-- :src="fillImgUrl(matchData.chatQrcode)"-->
<!-- fit="cover"-->
<!-- preview-teleported-->
<!-- style="width: 50px;height: 50px;margin-left: 10px"-->
<!-- />-->
<!-- </div>-->
<!-- <div v-if="matchData.liveQrcode">-->
<!-- <div class="qrTitle2">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>-->
<!-- <el-image-->
<!-- :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"-->
<!-- :src="fillImgUrl(matchData.liveQrcode)"-->
<!-- fit="cover"-->
<!-- preview-teleported-->
<!-- style="width: 50px;height: 50px;margin-left: 10px"-->
<!-- />-->
<!-- </div>-->
<!-- <div v-if="matchData.qrcode">-->
<!-- <div class="qrTitle2">{{ language == 0 ? '小程序' : "UniApp" }}</div>-->
<!-- <el-image-->
<!-- v-if="matchData.qrcode"-->
<!-- :preview-src-list="[fillImgUrl(matchData.qrcode)]"-->
<!-- :src="fillImgUrl(matchData.qrcode)"-->
<!-- fit="cover"-->
<!-- preview-teleported-->
<!-- style="width: 50px;height: 50px;margin-left: 10px"-->
<!-- />-->
<!-- </div>-->
<!-- </div>-->
<!-- </span>-->
</p>
<div v-if="matchData.chatQrcode||matchData.liveQrcode||matchData.qrcode">
<div class="father">
<div v-if="matchData.type!=1" class="son">
<div v-if="matchData.chatQrcode">
<div class="qrTitle2">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>
......@@ -184,7 +258,7 @@
/>
</div>
<div v-if="matchData.qrcode">
<div class="qrTitle2">{{ language == 0 ? '11小程序' : "UniApp" }}</div>
<div class="qrTitle2">{{ language == 0 ? '小程序' : "UniApp" }}</div>
<el-image
v-if="matchData.qrcode"
:preview-src-list="[fillImgUrl(matchData.qrcode)]"
......@@ -195,8 +269,8 @@
/>
</div>
</div>
</span>
</p>
</div>
</div>
</div>
<div style="height: 30px" />
......@@ -1734,31 +1808,102 @@ async function handelQR(id, type) {
}
}
.father {
position: relative;
.son {
position: absolute;
bottom: -5px;
left: 0%;
width: 15vw;
max-width: 430px;
display: flex;
justify-content: space-around;
@media (max-width: 767px) {
.father {
position: relative;
width: 100%;
margin-top: 10px;
.son {
width: 100%;
display: flex;
justify-content: space-around;
}
.son2 {
width: 100%;
display: flex;
justify-content: space-around;
}
}
.son2 {
position: absolute;
bottom: -35px;
left: 0;
width: 36vw;
min-width: 450px;
max-width: 900px;
display: flex;
justify-content: space-around;
}
/* 中等屏幕（平板设备） */
@media (min-width: 768px) and (max-width: 1199px) {
.father {
position: relative;
width: 100%;
margin-top: 10px;
.son {
width: 100%;
display: flex;
justify-content: space-around;
}
.son2 {
width: 100%;
display: flex;
justify-content: space-around;
}
}
}
/* 大屏幕（桌面设备） */
@media (min-width: 1200px) and (max-width: 1630px) {
.father {
position: relative;
width: 100%;
.son {
position: absolute;
bottom: 0;
left: 55%;
width: 50%;
display: flex;
justify-content: space-around;
}
.son2 {
position: absolute;
bottom: 0;
left: 35%;
width: 70%;
display: flex;
justify-content: space-around;
}
}
}
/* 大屏幕（桌面设备） */
@media (min-width: 1631px) {
.father {
position: relative;
width: 100%;
.son {
position: absolute;
bottom: 0;
left: 35%;
width: 65%;
display: flex;
justify-content: space-around;
}
.son2 {
position: absolute;
bottom: 0;
left: 260px;
width: 45vw;
max-width: 900px;
display: flex;
justify-content: space-around;
}
}
}
.qrTitle {
font-size: 14px;
text-align: center;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!