Superpre page mobile compatibility update

Credit: 0x16花桃白音official

src/components/SuperPre.vue

@@ -13,23 +13,25 @@
                 <p><a href="https://ygo233.com/usage" class="btn">直连服务器使用方法</a></p>
                 <p>若遇到了Bug需要反馈，请在<a href="https://ygobbs.com/c/10" class="feedback">MC社区BUG区</a>发帖反馈。</p>
                 <p>如果你想参与开发，请见本文：<a href="https://ygobbs.com/t/449691" class="download">YGOPro更新事务招人</a></p>
-                <p>更新时间：<span class="updateTime"></span></p>
             </section>
             <section class="update-method">
-                <h2>更新方法</h2>
+                <p><a href="https://cdn02.moecube.com:444/ygopro-super-pre/archive/ygopro-super-pre.ypk" class="btn">超先行补丁下载地址</a></p>
+                <h2>使用方法</h2>
                 <ol>
-                <li>先下载更新包：<a href="https://cdn02.moecube.com:444/ygopro-super-pre/archive/ygopro-super-pre.ypk" class="download">扩展包</a></li>
+                <li>下载超先行补丁。</li>
                 <li>你会下载到一个ypk文件。将文件放在你的ygopro/ygopro2/ygomobile游戏目录下的expansions文件夹。</li>
-                <li>如果你使用的是YGOMobile，也可以在YGOMobile自带的先行卡页面下载安装。</li>
+                <li>如果你使用的是YGOMobile，也可以在YGOMobile自带的先行卡页面下载安装。注意在设置页面打钩允许使用拓展卡，先行卡才会适用。</li>
+                <li>使用MC超先行服务器，开始决斗！</li>
                 </ol>
+                <p>超先行更新时间：<span class="updateTime"></span></p>
                 <p style="text-decoration: line-through;">有没有人能来拯救一下这个UI</p>
             </section>
             </div>
         </header>
         
-        <main>
-            <h1>超先行卡列表</h1>
-            <p>按发布时间排序，最新的卡在前</p>
+        <main style="margin: 0 auto;padding:5px;max-width: 800px;">
+            <h1 style="margin:25px 15px 15px 15px;">超先行卡列表</h1>
+            <p style="margin:0px 15px 10px 15px;">按发布时间排序，最新的卡在前</p>
             <table id="preTable">
                 <thead>
                 <tr>
@@ -43,16 +45,20 @@
                     <span class="loader"></span>
                     </td>
                 </tr>
-                <tr v-for="(card, index) in cards" :key="index">
-                    <td class="img">
+                <tr v-for="(card, index) in cards" :key="index" style="border-top:2px solid #ccc">
+                    <td class="img" style="vertical-align: top;">
+                      <div style="display: inline-block; vertical-align: top;padding:5px;">
                         <img :src="card.picUrl" :alt="card.name" loading="lazy" class="card-image">
+                      </div>
                     </td>
-                    <td class="text">
-                    <p class="name">{{ card.name }}</p>
+                    <td class="text" style="vertical-align: top;">
+                      <div style="display: inline-block; vertical-align: top; padding: 5px;">
+                        <p class="name" style="margin:10px 0px 10px 0px;">{{ card.name }}</p>
                         <p class="overallString">{{ card.overallString }}</p>
                         <p class="desc">{{ card.desc }}</p>
                         <p class="time">发布日期：<span class="createTime">{{ formatDateFromUnixTimestamp(card.createTime) }}</span><br>
                         最后更新：<span class="updateTime">{{ formatDateFromUnixTimestamp(card.updateTime) }}</span></p>
+                       </div>
                     </td>
                 </tr>
                 </tbody>