底部优化

src/components/layout/Footer.vue

@@ -6,46 +6,59 @@
           <router-link to="/" class="app-footer-logo">
             <img src="@/assets/images/logo_white.png" />
           </router-link>
-          <p>
-            <!-- <a href="#product">产品体系</a><a href="#teacher">师资团队</a> -->
-            <!-- <a href="#apply">预约报名</a> -->
-          </p>
+          <!-- <p><a href="#product">课程介绍</a><a href="#teacher">师资团队</a><a href="#apply">认证流程</a></p> -->
         </div>
         <div class="app-footer-left__bottom">
           <div>
             <div class="tit">友情链接</div>
+            <div class="con">
               <a href="http://www.cbirc.gov.cn/cn/view/pages/index/index.html" target="_blank">
-              <div class="con">中国银行保险监督管理委员会</div>
+                <div class="con_link">中国银行保险监督管理委员会</div>
               </a>
               <a href="http://www.moe.gov.cn/" target="_blank">
-              <div class="con">中国教育部</div>
+                <div class="con_link">中国教育部</div>
               </a>
               <a href="https://www.pbcsf.tsinghua.edu.cn/" target="_blank">
-              <div class="con">清华大学五道口金融学院</div>
+                <div class="con_link">清华大学五道口金融学院</div>
               </a>
               <a href="https://www.ezijing.com/" target="_blank">
-              <div class="con">紫荆教育</div>
+                <div class="con_link">紫荆教育</div>
               </a>
               <a href="https://paa.ezijing.com/" target="_blank">
-              <div class="con">紫荆金保</div>
+                <div class="con_link">紫荆金保</div>
               </a>
             </div>
+          </div>
           <div>
             <div class="tit">项目产品</div>
+            <div class="con">
               <a href="https://prp.ezijing.com/" target="_blank">
-              <div class="con">PRP私人财务风险管理顾问</div>
+                <div class="con_link">PRP私人财务风险管理顾问</div>
               </a>
               <a href="https://paa.ezijing.com/" target="_blank">
-              <div class="con">PAA私人资产分析师</div>
+                <div class="con_link">PAA私人资产分析师</div>
               </a>
             </div>
+          </div>
           <div>
             <div class="tit">联系我们</div>
             <div class="con">
-              地址：北京清华科技园7号院
-              <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;深圳市福田区博今商务广场A座22层
+              <dl>
+                <dt>地址</dt>
+                <dd>
+                  北京市海淀区中关村东路1号院清华科技园7号楼威盛大厦5层<br />&nbsp;&nbsp;&nbsp;&nbsp;深圳市福田区博今商务广场A座22层
+                </dd>
+              </dl>
+              <dl>
+                <dt>邮箱</dt>
+                <dd><a href="mailto:THHZJFI@ezijing.com" class="mail">THHZJFI@ezijing.com</a></dd>
+              </dl>
+              <!-- <div class="con_link">
+                地 址：北京市海淀区中关村东路1号院清华科技园7号楼5层
+                <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;深圳市福田区博今商务广场A座22层
+              </div>
+              <div class="con_link">邮箱：THHZJFI@ezijing.com</div> -->
             </div>
-            <div class="con">邮箱：THHZJFI@ezijing.com</div>
           </div>
         </div>
         <!-- pc -->
@@ -56,9 +69,8 @@
           </ul>
         </div> -->
       </div>
-      <div class="app-footer-contact">
-        <!-- <a href="#contact"><h2>联系我们</h2></a> -->
-        <!-- <div class="contact_con">
+      <!-- <div class="app-footer-contact">
+        <h2>联系我们</h2>
         <dl>
           <dt>地址</dt>
           <dd>北京市海淀区中关村东路1号院清华科技园7号楼威盛大厦5层</dd>
@@ -68,7 +80,6 @@
           <dd><a href="mailto:service@ezijing.com" class="mail">service@ezijing.com</a></dd>
         </dl>
       </div> -->
-      </div>
       <div class="app-footer-qrcode">
         <img src="https://webapp-pub.ezijing.com/project_online/fi/qrcode.png" width="120" />
         <div class="app-footer-qrcode-content">
@@ -122,27 +133,54 @@
 .app-footer-left__top {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   margin-bottom: 30px;
   p {
     a {
       font-size: 16px;
       font-weight: 500;
       color: #fff;
-      margin: 0 20px;
+      margin: 0 18px;
     }
   }
 }
 .app-footer-left__bottom {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   .tit {
-    font-size: 18px;
+    font-size: 16px;
     color: #ffffff;
+    font-weight: 500;
   }
   .con {
+    margin-top: 20px;
+    .con_link {
       font-size: 14px;
-    margin-top: 15px;
+      line-height: 32px;
+      color: #ffffff;
+      font-weight: 300;
+    }
+    dl {
+      display: flex;
+      line-height: 30px;
+      font-size: 14px;
+      line-height: 32px;
+      color: #ffffff;
+      font-weight: 300;
+    }
+    dt {
+      width: 60px;
+      text-align-last: justify;
+      white-space: nowrap;
+      font-size: 14px;
+      line-height: 32px;
+      color: #ffffff;
+      font-weight: 300;
+    }
+    dd {
+      &::before {
+        content: '：';
+      }
+    }
   }
 }
 .app-footer-link {
@@ -156,7 +194,6 @@
 }
 
 .app-footer-contact {
-  margin-left: 30px;
   h2 {
     font-size: 16px;
     font-weight: 500;
@@ -164,9 +201,6 @@
     line-height: 48px;
     margin-bottom: 30px;
   }
-  .contact_con {
-    margin-top: 80px;
-  }
   dl {
     display: flex;
     line-height: 30px;
@@ -183,7 +217,8 @@
   }
 }
 .app-footer-qrcode {
-  margin-left: 80px;
+  margin-left: 99px;
+  margin-top: 72px;
 }
 .app-footer-qrcode-content {
   display: flex;