Merge branch 'master' of https://gitlab.ezijing.com/zhangyanxin/learn-mbaOnline

client/.config.dev.js

@@ -7,7 +7,7 @@ module.exports = {
       'CKEDITOR': 'window.CKEDITOR',
       'VideoJs': 'window.swfobject',
       'Base64': 'window.Base64',
-      'Md5': 'window.md5',
+      'md5': 'window.md5',
       '$': 'window.$',
       'Aliplayer': 'window.Aliplayer',
       'AliPlayerComponent': 'window.AliPlayerComponent'

client/.config.pro.js

@@ -7,7 +7,7 @@ module.exports = {
       'CKEDITOR': 'window.CKEDITOR',
       'VideoJs': 'window.swfobject',
       'Base64': 'window.Base64',
-      'Md5': 'window.md5',
+      'md5': 'window.md5',
       '$': 'window.$',
       'Aliplayer': 'window.Aliplayer',
       'AliPlayerComponent': 'window.AliPlayerComponent'

client/.config.test.js

@@ -8,7 +8,7 @@ module.exports = {
       'CKEDITOR': 'window.CKEDITOR',
       'VideoJs': 'window.swfobject',
       'Base64': 'window.Base64',
-      'Md5': 'window.md5',
+      'md5': 'window.md5',
       '$': 'window.$',
       'Aliplayer': 'window.Aliplayer',
       'AliPlayerComponent': 'window.AliPlayerComponent'

client/.eslintrc

@@ -16,7 +16,7 @@
     "CKEDITOR": false,
     "VideoJs": false,
     "Base64": false,
-    "Md5": false,
+    "md5": false,
     "$": false,
     "Aliplayer": false,
     "AliPlayerComponent": false,

client/src/modules/login-module/src/CodeLogin.vue

@@ -9,7 +9,7 @@
         <el-button slot="suffix" size="mini" :disabled="isSendDisable || isSendCode" @click="sendCode">{{sendBtnText}}</el-button>
       </el-input>
     </el-form-item>
-    <el-form-item prop="isRemember" style="margin-bottom: 0px;">
+    <el-form-item prop="isRemember" style="margin-bottom: 0px; text-align: left;">
       <el-checkbox v-model="setAccount.isRemember" :label="$t('LoginModule.NormalLogin.isRemember')" name="type"></el-checkbox>
     </el-form-item>
     <el-form-item>

client/src/modules/login-module/src/NormalLogin.vue

@@ -10,7 +10,7 @@
         <i slot="prefix" class="el-input__icon el-icon-self-mima"></i>
       </el-input>
     </el-form-item>
-    <el-form-item prop="isRemember" style="margin-bottom: 0px;">
+    <el-form-item prop="isRemember" style="margin-bottom: 0px; text-align: left;">
       <el-checkbox v-model="setAccount.isRemember" :label="$t('LoginModule.NormalLogin.isRemember')" name="type"></el-checkbox>
     </el-form-item>
     <el-form-item>

client/src/pages/login/code.vue

 <template>
   <div class="p-con">
-    <div class="header">
-      <div class="logo"></div>
+    <div class="hd">
+      <img src="@/assets/images/logo.png" alt="logo">
+      <div class="txt">在线学习系统</div>
+      <!-- <s-language></s-language> -->
     </div>
-    <s-language></s-language>
-    <div class="main">
-      <div class="bg"></div>
-      <div class="content">
-        <div class="title">
-          <i class="icon"></i>
-          <p>{{$t('Login.title1')}}</p>
-          <p>{{$t('Login.title2')}}</p>
-        </div>
-        <div class="login">
-          <div class="logo"></div>
+    <div class="bd">
+      <div class="top50 container">
+        <el-row>
+          <el-col :xs="2" :sm="7" :md="3" :lg="3" :xl="3"><div style="height: 1px;"></div></el-col>
+          <el-col class="hidden-xs-only hidden-sm-only" :md="10" :lg="10" :xl="10">
+            <img src="@/assets/images/login-left-bg.png" alt="左侧-sofia logo">
+          </el-col>
+          <el-col :xs="20" :sm="10" :md="6" :lg="6" :xl="6">
             <code-login>
               <div class="text" slot="text">
                 <span class="code-login">
@@ -25,18 +24,25 @@
                   </template>
                 </span>
                 <span class="forget-pwd">
-                <!-- <template v-if="query.rd">
+                  <template v-if="query.rd">
                     <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/forget?rd=' + query.rd }">{{$t('Login.forgetPassword')}}</router-link>
                   </template>
                   <template v-else>
                     <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'login-forget' }">{{$t('Login.forgetPassword')}}</router-link>
-                </template> -->
-                <div class="router-link-class" @click="dialogMsg">{{$t('Login.forgetPassword')}}</div>
+                  </template>
+                  <!-- <div class="router-link-class" @click="dialogMsg">{{$t('Login.forgetPassword')}}</div> -->
                 </span>
               </div>
             </code-login>
+          </el-col>
+          <el-col :xs="2" :sm="7" :md="5" :lg="5" :xl="5"><div style="height: 1px;"></div></el-col>
+        </el-row>
       </div>
     </div>
+    <div class="ft">
+      <div class="num">学习平台服务电话：010-62793299</div>
+      <div class="time">服务时间：9:00-18:00</div>
+      <div class="txt">Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司 京ICP证150431号 京公网安备 11010802023681号</div>
     </div>
   </div>
 </template>
@@ -72,94 +78,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.p-con { position: relative; width: 100%; height: 100%; background: #fff; }
+.p-con { position: relative; width: 100%; height: 100%; background: #981838; color: #535353; text-align: center; }
 /* 头部 */
-.header { width: 1000px; padding: 15px 0; margin: 0 auto; }
-.logo { height: 40px; background: url('~@/assets/images/logo.png') no-repeat; background-size: contain; }
+.p-con .hd { position: absolute; top: 0; left: 0; right: 0; background: #ffffff; }
+.p-con .hd img { display: block; margin: 0 auto; padding: 0.3rem 0 0.1rem 0; }
+.p-con .hd .txt { margin: 0 auto; padding: 0 0 0.2rem 0; letter-spacing: 0.05rem; font-size: 0.32rem; font-weight: 700; }
 /* 底部 */
-
+.p-con .ft { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.4rem 0 0.1rem 0; background: #e5e5e5; }
+.p-con .ft .num { font-size: 0.14rem; line-height: 1.5; }
+.p-con .ft .time { font-size: 0.14rem; line-height: 1.5; }
+.p-con .ft .txt { padding: 0.1rem; color: #898989; font-size: 0.12rem; line-height: 1.5; }
 /* 中间部分 */
-.main { position: relative; }
-.main .bg { height: 360px; background: url('~@/assets/images/bg.png') no-repeat center bottom; background-size: cover; }
-.main .content { max-width: 700px; min-width: 320px; position: relative; margin: -200px auto 0; }
-.p-con .router-link-class { color: #999; text-decoration: none; }
+.p-con .bd { position: relative; padding: 1.45rem 0 1.3rem 0; margin: 0 auto; height: 100%; min-height: 6rem; box-sizing: border-box; }
+.p-con .bd .router-link-class { color: #ffffff; text-decoration: none; }
 
-.p-con .main .content .login { background-color: #fff; box-sizing: border-box; }
-.p-con .main .content .text { margin-top: -16px; color: #999; font-size: 16px; line-height: 1.5; overflow: hidden; }
-.p-con .main .content .text .code-login { float: left; cursor: pointer; }
-.p-con .main .content .text .forget-pwd { float: right; cursor: pointer; }
+/* code 登录 */
+.p-con .bd .top50 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.p-con .bd .top50 img { display: block; margin: 0 auto; }
+.p-con .bd .top50 .login-btn { margin-top: 0.1rem; background: #ffffff; border-color: #ffffff; color: #000; width: 100%; }
+.p-con .bd .top50 .text { margin-top: -16px; color: #e5e5e5; font-size: 16px; line-height: 1.5; overflow: hidden; }
+.p-con .bd .top50 .text .code-login { float: left; cursor: pointer; }
+.p-con .bd .top50 .text .forget-pwd { float: right; cursor: pointer; }
 
-/* pc */
-@media (min-width: 700px) {
-  .main .logo {
-    display: none;
-  }
-  .main .content {
-    display: flex;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
-  }
-  .main .title {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 260px;
-    text-align: center;
-    background-color: #bb133e;
-    color: #fff;
-  }
-  .main .title .icon {
-    background: url('~@/assets/images/icon_video.png') no-repeat;
-    background-size: contain;
-    width: 40px;
-    height: 40px;
-    margin-bottom: 20px;
-  }
-  .main .title p {
-    font-size: 20px;
-    line-height: 28px;
-    color: #fff;
-    margin: 0;
-  }
-  .main .login {
-    flex: 1;
-    min-height: 300px;
-    padding: 44px 80px 0;
-  }
-}
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575px) { .container { position: relative; margin: 0 auto; width: 100%; } }
 
-/* mobile */
-@media (max-width: 699px) {
-  .header {
-    display: none;
-  }
-  .main .bg {
-    height: 215px;
-    background: url('~@/assets/images/bg-mobile.png') no-repeat center bottom;
-    background-size: auto 100%;
-  }
-  .main .logo {
-    height: 30px;
-    margin-bottom: 15px;
-  }
-  .main .content {
-    margin: -180px 20px 0;
-  }
-  .main .title {
-    display: flex;
-    justify-content: center;
-    padding: 10px;
-    box-sizing: border-box;
-  }
-  .main .title p {
-    font-size: 20px;
-    line-height: 28px;
-    color: #fff;
-    margin: 0;
-  }
-  .main .login {
-    padding: 15px 20px;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
-  }
-}
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767px) { .container { position: relative; margin: 0 auto; width: 576px; } }
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991px) { .container { position: relative; margin: 0 auto; width: 768px; } }
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199px) { .container { position: relative; margin: 0 auto; width: 992px; } }
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) { .container { position: relative; margin: 0 auto; width: 1200px; } }
 </style>

client/src/pages/login/forget.vue

 <template>
   <div class="p-con">
-    <div class="header">
-      <div class="logo"></div>
+    <div class="hd">
+      <img src="@/assets/images/logo.png" alt="logo">
+      <div class="txt">在线学习系统</div>
     </div>
-    <s-language></s-language>
-    <div class="main">
-      <div class="bg"></div>
-      <forget-login>
+    <div class="bd">
+      <div class="top50 container">
+        <forget-login class="content-s-self">
           <div class="go-back" slot="go-back">
             <template v-if="query.rd">
-            <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/index?rd=' + query.rd }">返回登录</router-link>
+              <router-link class="router-link-class" style="color: #000;" active-class="router-link-active-class" :to="{ path: '/login/index?rd=' + query.rd }">返回登录</router-link>
             </template>
             <template v-else>
-            <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'login-normal' }">返回登录</router-link>
+              <router-link class="router-link-class" style="color: #000;" active-class="router-link-active-class" :to="{ name: 'login-normal' }">返回登录</router-link>
             </template>
           </div>
         </forget-login>
       </div>
     </div>
+    <div class="ft">
+      <div class="num">学习平台服务电话：010-62793299</div>
+      <div class="time">服务时间：9:00-18:00</div>
+      <div class="txt">Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司 京ICP证150431号 京公网安备 11010802023681号</div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -51,96 +57,35 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.p-con { position: relative; width: 100%; height: 100%; background: #fff; }
+.p-con { position: relative; width: 100%; height: 100%; background: #981838; color: #535353; text-align: center; }
 /* 头部 */
-.header { width: 1000px; padding: 15px 0; margin: 0 auto; }
-.logo { height: 40px; background: url('~@/assets/images/logo.png') no-repeat; background-size: contain; }
+.p-con .hd { position: absolute; top: 0; left: 0; right: 0; background: #ffffff; }
+.p-con .hd img { display: block; margin: 0 auto; padding: 0.3rem 0 0.1rem 0; }
+.p-con .hd .txt { margin: 0 auto; padding: 0 0 0.2rem 0; letter-spacing: 0.05rem; font-size: 0.32rem; font-weight: 700; }
 /* 底部 */
-
+.p-con .ft { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.4rem 0 0.1rem 0; background: #e5e5e5; }
+.p-con .ft .num { font-size: 0.14rem; line-height: 1.5; }
+.p-con .ft .time { font-size: 0.14rem; line-height: 1.5; }
+.p-con .ft .txt { padding: 0.1rem; color: #898989; font-size: 0.12rem; line-height: 1.5; }
 /* 中间部分 */
-.main { position: relative; }
-.main .bg { height: 360px; background: url('~@/assets/images/bg.png') no-repeat center bottom; background-size: cover; }
-.main .content { max-width: 700px; min-width: 320px; position: relative; margin: -200px auto 0; }
-.p-con .router-link-class { color: #999; text-decoration: none; }
+.p-con .bd { position: relative; padding: 1.45rem 0 1.3rem 0; margin: 0 auto; height: 100%; min-height: 6rem; box-sizing: border-box; }
+.p-con .bd .router-link-class { color: #ffffff; text-decoration: none; }
+/* forget 登录 */
+.content-s-self { top: 50%; transform: translate(-50%, -50%); }
+.go-back { margin-top: 0.2rem; text-align: left; }
 
-.p-con .main .content .login { background-color: #fff; box-sizing: border-box; }
-.p-con .main .content .text { margin-top: -16px; color: #999; font-size: 16px; line-height: 1.5; overflow: hidden; }
-.p-con .main .content .text .code-login { float: left; cursor: pointer; }
-.p-con .main .content .text .forget-pwd { float: right; cursor: pointer; }
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575px) { .container { position: relative; margin: 0 auto; width: 100%; height: 100%; } }
 
-.go-back { margin-top: 0.2rem; text-align: left; }
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767px) { .container { position: relative; margin: 0 auto; width: 576px; height: 100%; } }
 
-/* pc */
-@media (min-width: 700px) {
-  .main .logo {
-    display: none;
-  }
-  .main .content {
-    display: flex;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
-  }
-  .main .title {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 260px;
-    text-align: center;
-    background-color: #bb133e;
-    color: #fff;
-  }
-  .main .title .icon {
-    background: url('~@/assets/images/icon_video.png') no-repeat;
-    background-size: contain;
-    width: 40px;
-    height: 40px;
-    margin-bottom: 20px;
-  }
-  .main .title p {
-    font-size: 20px;
-    line-height: 28px;
-    color: #fff;
-    margin: 0;
-  }
-  .main .login {
-    flex: 1;
-    min-height: 300px;
-    padding: 50px 80px 0;
-  }
-}
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991px) { .container { position: relative; margin: 0 auto; width: 768px; height: 100%; } }
 
-/* mobile */
-@media (max-width: 699px) {
-  .header {
-    display: none;
-  }
-  .main .bg {
-    height: 215px;
-    background: url('~@/assets/images/bg-mobile.png') no-repeat center bottom;
-    background-size: auto 100%;
-  }
-  .main .logo {
-    height: 30px;
-    margin-bottom: 15px;
-  }
-  .main .content {
-    margin: -180px 20px 0;
-  }
-  .main .title {
-    display: flex;
-    justify-content: center;
-    padding: 10px;
-    box-sizing: border-box;
-  }
-  .main .title p {
-    font-size: 20px;
-    line-height: 28px;
-    color: #fff;
-    margin: 0;
-  }
-  .main .login {
-    padding: 15px 20px;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
-  }
-}
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199px) { .container { position: relative; margin: 0 auto; width: 992px; height: 100%; } }
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) { .container { position: relative; margin: 0 auto; width: 1200px; height: 100%; } }
 </style>

client/src/pages/login/index.vue

 <template>
   <div class="p-con">
-    <div class="header">
-      <div class="logo"></div>
+    <div class="hd">
+      <img src="@/assets/images/logo.png" alt="logo">
+      <div class="txt">在线学习系统</div>
+      <!-- <s-language></s-language> -->
     </div>
-    <s-language></s-language>
-    <div class="main">
-      <div class="bg"></div>
-      <div class="content">
-        <div class="title">
-          <i class="icon"></i>
-          <p>{{$t('Login.title1')}}</p>
-          <p>{{$t('Login.title2')}}</p>
-        </div>
-        <div class="login">
-          <div class="logo"></div>
+    <div class="bd">
+      <div class="top50 container">
+        <el-row>
+          <el-col :xs="2" :sm="7" :md="3" :lg="3" :xl="3"><div style="height: 1px;"></div></el-col>
+          <el-col class="hidden-xs-only hidden-sm-only" :md="10" :lg="10" :xl="10">
+            <img src="@/assets/images/login-left-bg.png" alt="左侧-sofia logo">
+          </el-col>
+          <el-col :xs="20" :sm="10" :md="6" :lg="6" :xl="6">
             <normal-login>
               <div class="text" slot="text">
                 <span class="code-login">
@@ -25,18 +24,25 @@
                   </template>
                 </span>
                 <span class="forget-pwd">
-                <!-- <template v-if="query.rd">
+                  <template v-if="query.rd">
                     <router-link class="router-link-class" active-class="router-link-active-class" :to="{ path: '/login/forget?rd=' + query.rd }">{{$t('Login.forgetPassword')}}</router-link>
                   </template>
                   <template v-else>
                     <router-link class="router-link-class" active-class="router-link-active-class" :to="{ name: 'login-forget' }">{{$t('Login.forgetPassword')}}</router-link>
-                </template> -->
-                <div class="router-link-class" @click="dialogMsg">{{$t('Login.forgetPassword')}}</div>
+                  </template>
+                  <!-- <div class="router-link-class" @click="dialogMsg">{{$t('Login.forgetPassword')}}</div> -->
                 </span>
               </div>
             </normal-login>
+          </el-col>
+          <el-col :xs="2" :sm="7" :md="5" :lg="5" :xl="5"><div style="height: 1px;"></div></el-col>
+        </el-row>
       </div>
     </div>
+    <div class="ft">
+      <div class="num">学习平台服务电话：010-62793299</div>
+      <div class="time">服务时间：9:00-18:00</div>
+      <div class="txt">Copyright © 2017 Zijing Education. All rights reserved. 清控紫荆（北京）教育科技股份有限公司 京ICP证150431号 京公网安备 11010802023681号</div>
     </div>
   </div>
 </template>
@@ -72,94 +78,40 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.p-con { position: relative; width: 100%; height: 100%; background: #fff; }
+.p-con { position: relative; width: 100%; height: 100%; background: #981838; color: #535353; text-align: center; }
 /* 头部 */
-.header { width: 1000px; padding: 15px 0; margin: 0 auto; }
-.logo { height: 40px; background: url('~@/assets/images/logo.png') no-repeat; background-size: contain; }
+.p-con .hd { position: absolute; top: 0; left: 0; right: 0; background: #ffffff; }
+.p-con .hd img { display: block; margin: 0 auto; padding: 0.3rem 0 0.1rem 0; }
+.p-con .hd .txt { margin: 0 auto; padding: 0 0 0.2rem 0; letter-spacing: 0.05rem; font-size: 0.32rem; font-weight: 700; }
 /* 底部 */
-
+.p-con .ft { position: fixed; bottom: 0; left: 0; right: 0; padding: 0.4rem 0 0.1rem 0; background: #e5e5e5; }
+.p-con .ft .num { font-size: 0.14rem; line-height: 1.5; }
+.p-con .ft .time { font-size: 0.14rem; line-height: 1.5; }
+.p-con .ft .txt { padding: 0.1rem; color: #898989; font-size: 0.12rem; line-height: 1.5; }
 /* 中间部分 */
-.main { position: relative; }
-.main .bg { height: 360px; background: url('~@/assets/images/bg.png') no-repeat center bottom; background-size: cover; }
-.main .content { max-width: 700px; min-width: 320px; position: relative; margin: -200px auto 0; }
-.p-con .router-link-class { color: #999; text-decoration: none; }
+.p-con .bd { position: relative; padding: 1.45rem 0 1.3rem 0; margin: 0 auto; height: 100%; min-height: 6rem; box-sizing: border-box; }
+.p-con .bd .router-link-class { color: #ffffff; text-decoration: none; }
 
-.p-con .main .content .login { background-color: #fff; box-sizing: border-box; }
-.p-con .main .content .text { margin-top: -16px; color: #999; font-size: 16px; line-height: 1.5; overflow: hidden; }
-.p-con .main .content .text .code-login { float: left; cursor: pointer; }
-.p-con .main .content .text .forget-pwd { float: right; cursor: pointer; }
+/* normal 登录 */
+.p-con .bd .top50 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.p-con .bd .top50 img { display: block; margin: 0 auto; }
+.p-con .bd .top50 .login-btn { margin-top: 0.1rem; background: #ffffff; border-color: #ffffff; color: #000; width: 100%; }
+.p-con .bd .top50 .text { margin-top: -16px; color: #e5e5e5; font-size: 16px; line-height: 1.5; overflow: hidden; }
+.p-con .bd .top50 .text .code-login { float: left; cursor: pointer; }
+.p-con .bd .top50 .text .forget-pwd { float: right; cursor: pointer; }
 
-/* pc */
-@media (min-width: 700px) {
-  .main .logo {
-    display: none;
-  }
-  .main .content {
-    display: flex;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
-  }
-  .main .title {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 260px;
-    text-align: center;
-    background-color: #bb133e;
-    color: #fff;
-  }
-  .main .title .icon {
-    background: url('~@/assets/images/icon_video.png') no-repeat;
-    background-size: contain;
-    width: 40px;
-    height: 40px;
-    margin-bottom: 20px;
-  }
-  .main .title p {
-    font-size: 20px;
-    line-height: 28px;
-    color: #fff;
-    margin: 0;
-  }
-  .main .login {
-    flex: 1;
-    min-height: 300px;
-    padding: 44px 80px 0;
-  }
-}
+/* Extra small devices (portrait phones, less than 576px) */
+@media (max-width: 575px) { .container { position: relative; margin: 0 auto; width: 100%; } }
 
-/* mobile */
-@media (max-width: 699px) {
-  .header {
-    display: none;
-  }
-  .main .bg {
-    height: 215px;
-    background: url('~@/assets/images/bg-mobile.png') no-repeat center bottom;
-    background-size: auto 100%;
-  }
-  .main .logo {
-    height: 30px;
-    margin-bottom: 15px;
-  }
-  .main .content {
-    margin: -180px 20px 0;
-  }
-  .main .title {
-    display: flex;
-    justify-content: center;
-    padding: 10px;
-    box-sizing: border-box;
-  }
-  .main .title p {
-    font-size: 20px;
-    line-height: 28px;
-    color: #fff;
-    margin: 0;
-  }
-  .main .login {
-    padding: 15px 20px;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3);
-  }
-}
+/* Small devices (landscape phones, 576px and up) */
+@media (min-width: 576px) and (max-width: 767px) { .container { position: relative; margin: 0 auto; width: 576px; } }
+
+/* Medium devices (tablets, 768px and up) */
+@media (min-width: 768px) and (max-width: 991px) { .container { position: relative; margin: 0 auto; width: 768px; } }
+
+/* Large devices (desktops, 992px and up) */
+@media (min-width: 992px) and (max-width: 1199px) { .container { position: relative; margin: 0 auto; width: 992px; } }
+
+/* Extra large devices (large desktops, 1200px and up) */
+@media (min-width: 1200px) { .container { position: relative; margin: 0 auto; width: 1200px; } }
 </style>