修改首页布局增加二维码和下载链接

src/pages/login/login.vue

@@ -1,39 +1,60 @@
 <template>
     <div class="login" :style="[computedBgImage]">
         <div class="login-wrap">
-            <div class="login-wrap-header">
-                <div class="login-wrap-header-title">
-                    <ImgView class="logo" :src="sysLogo" :width="44" :height="44"></ImgView>
-                    <span class="title">{{ systemInfo.otherName }}</span>
+            <div class="login-wrap-from">
+                <div class="login-wrap-header">
+                    <div class="login-wrap-header-title">
+                        <ImgView class="logo" :src="sysLogo" :width="44" :height="44"></ImgView>
+                        <span class="title">{{ systemInfo.otherName }}</span>
+                    </div>
+
+                    <div class="login-wrap-desc">{{ systemInfo.description }}</div>
                 </div>
 
-                <div class="login-wrap-desc">{{ systemInfo.description }}</div>
+                <a-form-model :model="form" :rules="rules" ref="ruleForm">
+                    <a-form-model-item ref="account" prop="account" placeholder="账号">
+                        <a-input v-model="form.account">
+                            <a-icon slot="prefix" type="user" />
+                        </a-input>
+                    </a-form-model-item>
+                    <a-form-model-item ref="password" prop="password">
+                        <a-input-password v-model="form.password" placeholder="密码">
+                            <a-icon slot="prefix" type="lock" />
+                        </a-input-password>
+                    </a-form-model-item>
+                    <a-form-model-item>
+                        <a-button
+                            :loading="logging"
+                            style="width: 100%"
+                            size="large"
+                            htmlType="submit"
+                            type="primary"
+                            @click="onSubmit"
+                        >
+                            登录
+                        </a-button>
+                    </a-form-model-item>
+                </a-form-model>
+            </div>
+            <div class="login-wrap-list">
+                <div class="login-wrap-list-item" @click="toDownload('apple')">
+                    <a-icon class="_icon" type="apple" />
+                    <div>
+                        <div class="_title">iPhone</div>
+                        <div class="_desc">立即下载</div>
+                    </div>
+                </div>
+                <div class="login-wrap-list-item" @click="toDownload('android')">
+                    <a-icon class="_icon" type="android" />
+                    <div>
+                        <div class="_title">Android</div>
+                        <div class="_desc">极速下载</div>
+                    </div>
+                </div>
+                <div class="login-wrap-list-image" v-viewer>
+                    <img src="../../assets/img/qrcode.png" alt="" />
+                </div>
             </div>
-
-            <a-form-model :model="form" :rules="rules" ref="ruleForm">
-                <a-form-model-item ref="account" prop="account" placeholder="账号">
-                    <a-input v-model="form.account">
-                        <a-icon slot="prefix" type="user" />
-                    </a-input>
-                </a-form-model-item>
-                <a-form-model-item ref="password" prop="password">
-                    <a-input-password v-model="form.password" placeholder="密码">
-                        <a-icon slot="prefix" type="lock" />
-                    </a-input-password>
-                </a-form-model-item>
-                <a-form-model-item>
-                    <a-button
-                        :loading="logging"
-                        style="width: 100%"
-                        size="large"
-                        htmlType="submit"
-                        type="primary"
-                        @click="onSubmit"
-                    >
-                        登录
-                    </a-button>
-                </a-form-model-item>
-            </a-form-model>
         </div>
 
         <footer class="footer">
@@ -131,6 +152,13 @@ export default {
             }
             return null;
         },
+        toDownload(type) {
+            const u =
+                type === "apple"
+                    ? "https://apps.apple.com/us/app/%E7%9B%9B%E6%B3%B0srm/id6502435294"
+                    : "https://www.pgyer.com/QoVqjq";
+            window.open(u);
+        },
     },
 };
 </script>
@@ -146,11 +174,49 @@ export default {
     background-size: cover;
     background-position: center;
     &-wrap {
-        width: 400px;
+        width: 500px;
         padding: 30px;
         margin: 0 0 100px 0;
         box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
         border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+
+        &-list {
+            display: flex;
+            align-items: center;
+            &-item {
+                padding: 10px;
+                background: #fff;
+                border-radius: 8px;
+                display: flex;
+                align-items: center;
+                width: 170px;
+                color: @primary-color;
+                cursor: pointer;
+                margin-right: 20px;
+                height: 70px;
+            }
+
+            ._icon {
+                font-size: 44px;
+                margin-right: 15px;
+            }
+
+            &-image {
+                width: 100px;
+                height: 100px;
+                flex-shrink: 0;
+                img {
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        &-from {
+            flex: 1;
+        }
 
         &-header {
             text-align: center;