更新

src/viewsframe/login/login.vue

@@ -5,25 +5,27 @@
 -->
 <template>
    <div class="login">
-      <div class="decoration">
-         <img class="star" src="@/img/loginErr/star.png" />
-         <img class="bStar" src="@/img/loginErr/bStar.png" />
-         <img class="music" src="@/img/loginErr/music.png" />
-      </div>
-      <div class="loginBox">
-         <img v-show="qrcodeStatus === 2" class="scanned" src="@/img/loginErr/scanned.png" />
-         <div v-show="qrcodeStatus !== 2" v-loading="!uuid" class="qrcodeBox">
-            <div class="qrCodeCon" :class="{ refresh: qrcodeStatus === 3 }">
-               <qrcode-vue class="qrCode" v-if="uuid" :value="qrcode" :size="164" />
-               <img @click="handleRefresh" src="@/img/loginErr/refresh.png" />
-            </div>
+      <div class="loginCon">
+         <div class="decoration">
+            <img class="star" src="@/img/loginErr/star.png" />
+            <img class="bStar" src="@/img/loginErr/bStar.png" />
+            <img class="music" src="@/img/loginErr/music.png" />
          </div>
-         <div class="dsc">
-            <img src="@/img/loginErr/jiantou1.png" />
-            <div>{{ qrcodeStatus === 2 ? "扫码完成，请在手机上操作" : "使用客户端扫描二维码登录乐教通" }}</div>
-            <img src="@/img/loginErr/jiantou2.png" />
+         <div class="loginBox">
+            <img v-show="qrcodeStatus === 2" class="scanned" src="@/img/loginErr/scanned.png" />
+            <div v-show="qrcodeStatus !== 2" v-loading="!uuid" class="qrcodeBox">
+               <div class="qrCodeCon" :class="{ refresh: qrcodeStatus === 3 }">
+                  <qrcode-vue class="qrCode" v-if="uuid" :value="qrcode" :size="164" />
+                  <img @click="handleRefresh" src="@/img/loginErr/refresh.png" />
+               </div>
+            </div>
+            <div class="dsc">
+               <img src="@/img/loginErr/jiantou1.png" />
+               <div>{{ qrcodeStatus === 2 ? "扫码完成，请在手机上操作" : "使用客户端扫描二维码登录乐教通" }}</div>
+               <img src="@/img/loginErr/jiantou2.png" />
+            </div>
+            <div class="refreshBtn" @click="handleRefresh">{{ qrcodeStatus === 2 ? "重新扫码" : "刷新二维码" }}</div>
          </div>
-         <div class="refreshBtn" @click="handleRefresh">{{ qrcodeStatus === 2 ? "重新扫码" : "刷新二维码" }}</div>
       </div>
    </div>
 </template>
@@ -102,11 +104,16 @@ function handleRefresh() {
    min-height: 100%;
    background: url("@/img/loginErr/bg.png") no-repeat;
    background-size: cover;
-   position: relative;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   min-width: 1280px;
+   .loginCon {
+      display: flex;
+      justify-content: space-between;
+      width: 80%;
+   }
    .loginBox {
-      position: absolute;
-      top: 166px;
-      right: 280px;
       width: 440px;
       height: 498px;
       background: url("@/img/loginErr/loginBox.png") no-repeat;
@@ -175,9 +182,7 @@ function handleRefresh() {
       }
    }
    .decoration {
-      position: absolute;
-      top: 158px;
-      left: 346px;
+      position: relative;
       width: 522px;
       height: 626px;
       background: url("@/img/loginErr/xiaoren.png") no-repeat;