finished footer

components/common/icon/src/icon.vue

 <template>
-  <i :class="'iconfont yun-icon--' + name" :style="{fontSize:size,color:nowColor,transition:'.5s ease',cursor:cursor,verticalAlign:'middle'}" @mouseenter="changeStyle1" @mouseout="changeStyle2"></i>
+  <i :class="'iconfont yun-icon--' + name" :style="{fontSize:size,color:nowColor,transition:'.5s ease',cursor:cursor,verticalAlign:vertical}" @mouseenter="changeStyle1" @mouseout="changeStyle2"></i>
 </template>
 
 <script>
@@ -11,6 +11,7 @@
       size: Number,
       color: String,
       hoverColor:String,
+      vertical: String,
       canClick:{
         type:Boolean,
         default:true,

components/pc/pageFooter.vue

@@ -3,9 +3,15 @@
     <div class="footer-center">
       <div class="footer-center-section1">
         <div class="footer-center-section1-left">
+          <div>
+            <yun-icon name="call" fontSize="12px" vertical="top"></yun-icon>
             <span>联系电话：010-6868088</span>
+          </div>
+          <div>
+            <yun-icon name="message" fontSize="10px" vertical="top"></yun-icon>
             <span>官方邮箱：yundingshuyuan@163.com</span>
           </div>
+        </div>
         <div class="footer-center-section1-center">
           <a href="">云顶书院官网</a>
           <a href="">代码托管平台官网</a>
@@ -49,8 +55,6 @@ export default {
 
 <style lang="scss" scoped>
   .bc-layout-container-footer {
-    position: absolute;
-    bottom: 0;
     width: 100%;
     background-color: #fff;
     .footer-center {
@@ -92,7 +96,8 @@ export default {
         .footer-center-section1-left {
           @extend %flex-column-spb;
           align-items: start;
-          span{
+          div{
+            vertical-align: middle;
             @include fontStyle(13, 17, 500, #8F9CA0, start);
             @extend %animate-transition;
             @extend %cursorPointer;
@@ -102,6 +107,10 @@ export default {
             &:first-child {
               padding-bottom: 26*$length;
             }
+            > span{
+              vertical-align: middle;
+              margin-left: 10*$length;
+            }
           }
         }
       }