Skip to content

杨炀 / 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 @@ ...@@ -82,43 +82,43 @@
82 </label> 82 </label>
83 {{ matchData.contactEmail }} 83 {{ matchData.contactEmail }}
84 84
85 <span class="father"> 85 <!-- <span class="father">-->
86 <div class="son2"> 86 <!-- <div class="son2">-->
87 <div v-if="matchData.chatQrcode"> 87 <!-- <div v-if="matchData.chatQrcode">-->
88 <div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div> 88 <!-- <div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>-->
89 <el-image 89 <!-- <el-image-->
90 :preview-src-list="[fillImgUrl(matchData.chatQrcode)]" 90 <!-- :preview-src-list="[fillImgUrl(matchData.chatQrcode)]"-->
91 :src="fillImgUrl(matchData.chatQrcode)" 91 <!-- :src="fillImgUrl(matchData.chatQrcode)"-->
92 fit="cover" 92 <!-- fit="cover"-->
93 preview-teleported 93 <!-- preview-teleported-->
94 style="width: 100px;height: 100px;margin-left: 10px" 94 <!-- style="width: 100px;height: 100px;margin-left: 10px"-->
95 /> 95 <!-- />-->
96 </div> 96 <!-- </div>-->
97 <div v-if="matchData.liveQrcode"> 97 <!-- <div v-if="matchData.liveQrcode">-->
98 <div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div> 98 <!-- <div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>-->
99 <el-image 99 <!-- <el-image-->
100 :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]" 100 <!-- :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"-->
101 :src="fillImgUrl(matchData.liveQrcode)" 101 <!-- :src="fillImgUrl(matchData.liveQrcode)"-->
102 fit="cover" 102 <!-- fit="cover"-->
103 preview-teleported 103 <!-- preview-teleported-->
104 style="width: 100px;height: 100px;margin-left: 10px" 104 <!-- style="width: 100px;height: 100px;margin-left: 10px"-->
105 /> 105 <!-- />-->
106 </div> 106 <!-- </div>-->
107 {{ matchData.cptQrcode }} 107 <!-- {{ matchData.cptQrcode }}-->
108 <div v-if="matchData.qrcode"> 108 <!-- <div v-if="matchData.qrcode">-->
109 <div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div> 109 <!-- <div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div>-->
110 <el-image 110 <!-- <el-image-->
111 v-if="matchData.qrcode" 111 <!-- v-if="matchData.qrcode"-->
112 :preview-src-list="[fillImgUrl(matchData.qrcode)]" 112 <!-- :preview-src-list="[fillImgUrl(matchData.qrcode)]"-->
113 :src="fillImgUrl(matchData.qrcode)" 113 <!-- :src="fillImgUrl(matchData.qrcode)"-->
114 fit="cover" 114 <!-- fit="cover"-->
115 preview-teleported 115 <!-- preview-teleported-->
116 style="width: 100px;height: 100px;margin-left: 10px" 116 <!-- style="width: 100px;height: 100px;margin-left: 10px"-->
117 /> 117 <!-- />-->
118 </div> 118 <!-- </div>-->
119 119 <!-- -->
120 </div> 120 <!-- </div>-->
121 </span> 121 <!-- </span>-->
122 </p> 122 </p>
123 <p class="ppl"> 123 <p class="ppl">
124 <label> 124 <label>
...@@ -135,6 +135,43 @@ ...@@ -135,6 +135,43 @@
135 {{ language == 0 ? '分&nbsp;站&nbsp;赛' : 'NO. OF TOURNAMENTS' }}：</label> 135 {{ language == 0 ? '分&nbsp;站&nbsp;赛' : 'NO. OF TOURNAMENTS' }}：</label>
136 {{ matchData.cpts.length }} 136 {{ matchData.cpts.length }}
137 </p> 137 </p>
138 <div class="father">
139 <div class="son2">
140 <div v-if="matchData.chatQrcode">
141 <div class="qrTitle">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>
142 <el-image
143 :preview-src-list="[fillImgUrl(matchData.chatQrcode)]"
144 :src="fillImgUrl(matchData.chatQrcode)"
145 fit="cover"
146 preview-teleported
147 style="width: 100px;height: 100px;margin-left: 10px"
148 />
149 </div>
150 <div v-if="matchData.liveQrcode">
151 <div class="qrTitle">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>
152 <el-image
153 :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"
154 :src="fillImgUrl(matchData.liveQrcode)"
155 fit="cover"
156 preview-teleported
157 style="width: 100px;height: 100px;margin-left: 10px"
158 />
159 </div>
160 {{ matchData.cptQrcode }}
161 <div v-if="matchData.qrcode">
162 <div class="qrTitle">{{ language == 0 ? '小程序' : "UniApp" }}</div>
163 <el-image
164 v-if="matchData.qrcode"
165 :preview-src-list="[fillImgUrl(matchData.qrcode)]"
166 :src="fillImgUrl(matchData.qrcode)"
167 fit="cover"
168 preview-teleported
169 style="width: 100px;height: 100px;margin-left: 10px"
170 />
171 </div>
172
173 </div>
174 </div>
138 </div> 175 </div>
139 176
140 <div v-if="matchData.type=='0'"> 177 <div v-if="matchData.type=='0'">
...@@ -161,7 +198,44 @@ ...@@ -161,7 +198,44 @@
161 <p v-if="matchData.contactEmail" class="ppl"> 198 <p v-if="matchData.contactEmail" class="ppl">
162 <label>{{ language == 0 ? '邮&nbsp;&nbsp;&nbsp;&nbsp;箱' : 'EMAIL' }}：</label> 199 <label>{{ language == 0 ? '邮&nbsp;&nbsp;&nbsp;&nbsp;箱' : 'EMAIL' }}：</label>
163 {{ matchData.contactEmail }} 200 {{ matchData.contactEmail }}
164 <span class="father"> 201 <!-- <span class="father">-->
202 <!-- <div v-if="matchData.type!=1" class="son">-->
203 <!-- <div v-if="matchData.chatQrcode">-->
204 <!-- <div class="qrTitle2">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>-->
205 <!-- <el-image-->
206 <!-- :preview-src-list="[fillImgUrl(matchData.chatQrcode)]"-->
207 <!-- :src="fillImgUrl(matchData.chatQrcode)"-->
208 <!-- fit="cover"-->
209 <!-- preview-teleported-->
210 <!-- style="width: 50px;height: 50px;margin-left: 10px"-->
211 <!-- />-->
212 <!-- </div>-->
213 <!-- <div v-if="matchData.liveQrcode">-->
214 <!-- <div class="qrTitle2">{{ language == 0 ? '群二维码' : 'WhatsApp' }}</div>-->
215 <!-- <el-image-->
216 <!-- :preview-src-list="[fillImgUrl(matchData.liveQrcode) ]"-->
217 <!-- :src="fillImgUrl(matchData.liveQrcode)"-->
218 <!-- fit="cover"-->
219 <!-- preview-teleported-->
220 <!-- style="width: 50px;height: 50px;margin-left: 10px"-->
221 <!-- />-->
222 <!-- </div>-->
223 <!-- <div v-if="matchData.qrcode">-->
224 <!-- <div class="qrTitle2">{{ language == 0 ? '小程序' : "UniApp" }}</div>-->
225 <!-- <el-image-->
226 <!-- v-if="matchData.qrcode"-->
227 <!-- :preview-src-list="[fillImgUrl(matchData.qrcode)]"-->
228 <!-- :src="fillImgUrl(matchData.qrcode)"-->
229 <!-- fit="cover"-->
230 <!-- preview-teleported-->
231 <!-- style="width: 50px;height: 50px;margin-left: 10px"-->
232 <!-- />-->
233 <!-- </div>-->
234 <!-- </div>-->
235 <!-- </span>-->
236 </p>
237 <div v-if="matchData.chatQrcode||matchData.liveQrcode||matchData.qrcode">
238 <div class="father">
165 <div v-if="matchData.type!=1" class="son"> 239 <div v-if="matchData.type!=1" class="son">
166 <div v-if="matchData.chatQrcode"> 240 <div v-if="matchData.chatQrcode">
167 <div class="qrTitle2">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div> 241 <div class="qrTitle2">{{ language == 0 ? '赛事直播' : "Live Qrcode" }}</div>
...@@ -184,7 +258,7 @@ ...@@ -184,7 +258,7 @@
184 /> 258 />
185 </div> 259 </div>
186 <div v-if="matchData.qrcode"> 260 <div v-if="matchData.qrcode">
187 <div class="qrTitle2">{{ language == 0 ? '11小程序' : "UniApp" }}</div> 261 <div class="qrTitle2">{{ language == 0 ? '小程序' : "UniApp" }}</div>
188 <el-image 262 <el-image
189 v-if="matchData.qrcode" 263 v-if="matchData.qrcode"
190 :preview-src-list="[fillImgUrl(matchData.qrcode)]" 264 :preview-src-list="[fillImgUrl(matchData.qrcode)]"
...@@ -195,8 +269,8 @@ ...@@ -195,8 +269,8 @@
195 /> 269 />
196 </div> 270 </div>
197 </div> 271 </div>
198 </span> 272 </div>
199 </p> 273 </div>
200 </div> 274 </div>
201 275
202 <div style="height: 30px" /> 276 <div style="height: 30px" />
...@@ -1734,31 +1808,102 @@ async function handelQR(id, type) { ...@@ -1734,31 +1808,102 @@ async function handelQR(id, type) {
1734 } 1808 }
1735 } 1809 }
1736 1810
1737 .father { 1811
1738 position: relative; 1812 @media (max-width: 767px) {
1739 1813 .father {
1740 .son { 1814 position: relative;
1741 position: absolute; 1815 width: 100%;
1742 bottom: -5px; 1816 margin-top: 10px;
1743 left: 0%; 1817
1744 width: 15vw; 1818 .son {
1745 max-width: 430px; 1819 width: 100%;
1746 display: flex; 1820 display: flex;
1747 justify-content: space-around; 1821 justify-content: space-around;
1822 }
1823
1824 .son2 {
1825 width: 100%;
1826 display: flex;
1827 justify-content: space-around;
1828 }
1748 } 1829 }
1749 1830 }
1750 .son2 { 1831
1751 position: absolute; 1832 /* 中等屏幕（平板设备） */
1752 bottom: -35px; 1833 @media (min-width: 768px) and (max-width: 1199px) {
1753 left: 0; 1834 .father {
1754 width: 36vw; 1835 position: relative;
1755 min-width: 450px; 1836 width: 100%;
1756 max-width: 900px; 1837 margin-top: 10px;
1757 display: flex; 1838
1758 justify-content: space-around; 1839 .son {
1840 width: 100%;
1841 display: flex;
1842 justify-content: space-around;
1843 }
1844
1845 .son2 {
1846 width: 100%;
1847 display: flex;
1848 justify-content: space-around;
1849 }
1850 }
1851 }
1852
1853 /* 大屏幕（桌面设备） */
1854 @media (min-width: 1200px) and (max-width: 1630px) {
1855 .father {
1856 position: relative;
1857 width: 100%;
1858
1859 .son {
1860 position: absolute;
1861 bottom: 0;
1862 left: 55%;
1863 width: 50%;
1864 display: flex;
1865 justify-content: space-around;
1866 }
1867
1868 .son2 {
1869 position: absolute;
1870 bottom: 0;
1871 left: 35%;
1872 width: 70%;
1873 display: flex;
1874 justify-content: space-around;
1875 }
1759 } 1876 }
1760 } 1877 }
1761 1878
1879 /* 大屏幕（桌面设备） */
1880 @media (min-width: 1631px) {
1881 .father {
1882 position: relative;
1883 width: 100%;
1884
1885 .son {
1886 position: absolute;
1887 bottom: 0;
1888 left: 35%;
1889 width: 65%;
1890 display: flex;
1891 justify-content: space-around;
1892 }
1893
1894 .son2 {
1895 position: absolute;
1896 bottom: 0;
1897 left: 260px;
1898 width: 45vw;
1899 max-width: 900px;
1900 display: flex;
1901 justify-content: space-around;
1902 }
1903 }
1904 }
1905
1906
1762 .qrTitle { 1907 .qrTitle {
1763 font-size: 14px; 1908 font-size: 14px;
1764 text-align: center; 1909 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!