update

src/app.js

@@ -35,9 +35,28 @@ var shareOption = {
   title: "NutUI - 基于Vue2.0的移动端开源组件库",
   desc: '一套拥有电商基因的基于Vue2.0的轻量级移动端开源组件库'
 };
+function printJoinUsInfo() {
+var joinUsHtml =  `我不知道你来自哪里？亦不知道你将去何方？
+但当你打开这个页面之时，我知道，
+一定是代码的缘分将你我拉近！
 
+金鳞岂是池中物，一遇风云便化龙。
+少年！我看你骨骼惊奇，一定是敲代码的奇才！
+加入我们，加入JDC-前端开发部！你，必将改变亿万人民的生活！
 
-
+欢迎点击 http://jdc.jd.com ， 或者关注公众号“全栈探索”来了解我们，
+还犹豫什么？欢迎将简历投至： yfzhoutao@jd.com  (请注明来自console)
+我们在这里等你哦！`
+    if (window.console && console.log && navigator.userAgent.toLowerCase().match(/chrome\/([\d.]+)/)) {
+        joinUsHtml = joinUsHtml.replace(/%c/g, '');
+        joinUsHtml = '%c' + joinUsHtml;
+        var weightSize = 'color: #e2231a; font-family: "Microsoft Yahei"';
+        console.log(joinUsHtml, weightSize);
+        //var normalSize = 'color: #666; font-family: "Microsoft Yahei"';
+        //console.log(joinUsHtml, normalSize, weightSize, normalSize, weightSize, normalSize, weightSize);
+    }
+}
+printJoinUsInfo();
 try {
   /*初始化分享*/
   window.share.shareInit(shareOption);

src/view/cases.vue

@@ -264,8 +264,8 @@ p{
         margin-bottom:0px;
         font-weight:bold;
         background: #B1C07B;
-        height: 90px;
-        line-height: 90px;
+        height: 75px;
+        line-height: 75px;
         border-radius: 10px;
         color: #fff;
         text-align: center;
@@ -279,7 +279,7 @@ p{
             position: relative;
             &:before{
                 content: '';
-                width: 200px;
+                width: 180px;
                 position: absolute;
                 top: 3px;
                 left: -209px;
@@ -297,7 +297,7 @@ p{
             position: relative;
             &:after{
                 content: '';
-                width: 200px;
+                width: 180px;
                 position: absolute;
                 top: 3px;
                 left: 20px;
@@ -317,10 +317,9 @@ p{
     }
     .box-entry{
         color:#2d336a;
-        margin-bottom:10px;
         display: flex;
         align-items: center;
-        height: 80px;
+        height: 70px;
         font-size: 18px;
         .entry-icon{
            display: inline-block;
@@ -358,24 +357,29 @@ p{
     }
     .introduce-title{
         border-bottom: 1px solid #dfd9e7;
+        font-size:15px;
+    }
+    .introduce-content{
+        font-size:14px;
     }
     .box-image{
-        //background: red;
         width: 391px;
-        padding: 130px 26px 0 0;
+    padding: 108px 0px 0 19px;
+
         img{
             float: right;
             display:block;
-            box-shadow: 0px 15px 38px 1px #eee;
+            //box-shadow: 0px 15px 38px 1px #eee;
         }
         .images{
-            width:311px
+            width: 277px
         }
     }
     .box-info{
         flex: 1;
         display: flex;
-        padding-left: 50px;
+        padding-left: 100px;
+        padding-right:100px;
         align-items: center;
         .info{
             //height: 410px;
@@ -387,14 +391,17 @@ p{
         }
     }
     .phone-bg{
-        position: absolute;
-        width: 377px;
-        height: 800px;
-        background: url('../asset/img/cases/phone_ui.png') no-repeat;
-        background-size: 100% 100%;
-        left: 48px;
-        top: 10px;
+            position: absolute;
+            width: 312px;
+            height: 589px;
+            background: url(/img/phone_bg.png) no-repeat;
+            background-size: 100% 100%;
+            left: 114px;
+            top: 72px;
+            z-index: -1;
     }
+
+
 }
 .logos{
     padding:0px;
@@ -499,7 +506,7 @@ p{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    left: 50px;
+    left: 57px;
     width: 65px;
     height: 80px;
     background:rgba(0,0,0,0.1);
@@ -527,7 +534,7 @@ p{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    right: 0px;
+    right: 35px;
     width: 65px;
     height: 80px;
     background:rgba(0,0,0,0.1);
@@ -552,20 +559,18 @@ p{
     };
 }
 .intro-part{
-    display: none;
-    width: 315px;
-    background:rgba(0,0,0,0.5);
+        display: none;
+    width: 275px;
+    background: rgba(0, 0, 0, 0.6);
     position: absolute;
-    bottom: 0;
+    bottom: 165px;
     left: 50%;
+    -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     z-index: 101;
     padding: 15px;
     height: 176px;
-    //padding-bottom: 25px;
     box-sizing: border-box;
-    border-bottom-left-radius: 46px;
-    border-bottom-right-radius: 46px;
     h2{
         color: #fff;
         font-size: 18px;
@@ -596,24 +601,25 @@ p{
 //swiper
 
 .nut-swiper{
-    height:800px;
+    height:750px;
     border-bottom: 2px solid #eee;
-    padding-bottom: 87px;
+    //padding-bottom: 87px;
 }
 @media (max-width: 450px) {
     .box .box-info{
         display: none;
     }
     .box .phone-bg{
-        width: 325px;
-        height: 620px;
-        top: 5px;
-        left: 50%;
-        transform:translateX(-50%); 
+        width: 302px;
+    height: 561px;
+    top: 10px;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
     }
     .box .box-image .images{
-        width: 281px;
-        height: 430px;
+        width: 255px;
+    height: 454px;
     }
     .nut-swiper .nut-swiper-silde{
         display: flex;
@@ -621,12 +627,12 @@ p{
     }
     .box .box-image{
         width: 100%;
-        padding: 95px 0 0 0;
+        padding: 79px 0 0 0;
         display: flex;
         justify-content: center;
     }
     .nut-swiper{
-        height: 580px;
+        height: 660px;
     }
     .next-btn{
         display: none;
@@ -636,6 +642,7 @@ p{
     }
     .intro-part{
         display: block;
+
     }
 }
 </style>