updated 添加移动版

style/app.css

@@ -1,60 +0,0 @@
-html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h3,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h3,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}
-html{
-    height:100%;
-}
-body{
-    height: 100%;
-    font-size: 14px;
-    font-family: Arial,Helvetica,"Microsoft Yahei";
-    background: #fdfdfd;
-    color:#757575;
-}
-a{
-  color:#333;
-  text-decoration: none;
-}
-a:hover{
-  text-decoration: underline;
-}
-
-.container{
-  width:640px;
-  margin:0 auto;
-}
-.mod-app{
-  height: 72px;
-  padding-top: 100px;
-  margin-bottom: 25px;
-}
-.mod-app .icon{
-  float:left;
-  width: 72px;
-  height: 72px;
-}
-.mod-app .info{
-  margin-left: 90px;
-  line-height: 28px;
-}
-.mod-view{
-  padding:20px 15px;
-  background: #f8f8f8;
-}
-.mod-view img{
-  height: 300px;
-  margin-right: 10px;
-}
-
-.mod-qrcode{
-    position: fixed;
-    right: 25px;
-    bottom: 25px;
-    text-align: center;
-}
-.mod-qrcode .box{
-    width: 150px;
-    height: 148px;
-    overflow: hidden;
-}
-.mod-qrcode p{
-    line-height: 30px;
-}

style/index.css

@@ -33,11 +33,42 @@ a:hover{
     margin: 0 auto;
 }
 
-.mod-head{
-    padding: 0 20px;
+.mod-head .bd{
+    padding: 10px 15px;
     line-height: 36px;
     text-align: right;
 }
+.mod-head .btn{
+    position: relative;
+    display: inline-block;
+    min-width: 90px;
+    height: 30px;
+    padding: 0 15px;
+    border: medium none;
+    background: #eee;
+    line-height: 30px;
+    text-align: center;
+    font-family: Tahoma,Arial, Helvetica,"Microsoft YaHei";
+    font-size: 15px;
+    color: #333;
+    cursor: pointer;
+    text-decoration: none;
+    border-radius: 3px;
+    box-sizing: border-box;
+    outline: none;
+    -webkit-appearance: none;
+}
+.mod-head .btn:hover{
+    background: #e4e4e4;
+}
+.mod-head .btn-blue{
+    background: #2095f2;
+    color: #fff;
+}
+.mod-head .btn-blue:hover {
+    background: #207fcc;
+}
+
 .mod-panel {
     width: 100%;
 }
@@ -166,21 +197,6 @@ a:hover{
 .mod-qrcode p{
     line-height: 30px;
 }
-
-.mod-my{
-    position: fixed;
-    left: 25px;
-    bottom: 25px;
-    text-align: center;
-}
-.mod-my .box{
-    width: 189px;
-    overflow: hidden;
-}
-.mod-my p{
-    line-height: 30px;
-}
-
 @media screen and (max-width: 800px)  {
     .mod-panel .hd{
         padding-top: 10px;
@@ -198,7 +214,7 @@ a:hover{
         height: 80px;
         box-sizing: border-box;
     }
-    .mod-panel p span{
+    .mod-panel .bd p span{
         float: left;
         width: 50%;
         text-align: center;
@@ -209,12 +225,11 @@ a:hover{
         margin-bottom: 5px;
         line-height: 24px;
     }
-
-    .mod-qrcode,.mod-my{
+    .mod-qrcode{
         position: static;
         margin-bottom: 10px;
     }
-    .mod-qrcode .box,.mod-my .box{
+    .mod-qrcode .box{
         margin: 0 auto;
     }
 }