Your Name 6 年 前
コミット
7c95d1d2b3
42 ファイル変更4837 行追加16 行削除
  1. 1 1
      index.html
  2. 1 0
      package.json
  3. 27 3
      src/App.vue
  4. 3 3
      src/assets/css/base.css
  5. 370 0
      src/assets/iconfont/demo.css
  6. 724 0
      src/assets/iconfont/demo_fontclass.html
  7. 975 0
      src/assets/iconfont/demo_symbol.html
  8. 762 0
      src/assets/iconfont/demo_unicode.html
  9. 4 0
      src/assets/iconfont/iconfont.css
  10. BIN
      src/assets/iconfont/iconfont.eot
  11. 0 0
      src/assets/iconfont/iconfont.js
  12. 35 0
      src/assets/iconfont/iconfont.svg
  13. BIN
      src/assets/iconfont/iconfont.ttf
  14. BIN
      src/assets/iconfont/iconfont.woff
  15. BIN
      src/assets/img/add01.png
  16. BIN
      src/assets/img/add02.png
  17. BIN
      src/assets/img/add03.png
  18. BIN
      src/assets/img/add04.png
  19. BIN
      src/assets/img/apply-banner.png
  20. BIN
      src/assets/img/banner1.png
  21. BIN
      src/assets/img/banner2.png
  22. BIN
      src/assets/img/banner3.png
  23. BIN
      src/assets/img/coinBg.png
  24. BIN
      src/assets/img/fx66kefufu.8b7368d.jpg
  25. BIN
      src/assets/img/logo2.png
  26. BIN
      src/assets/img/mainLogo.png
  27. BIN
      src/assets/img/phone.png
  28. BIN
      src/assets/img/phoneHover.png
  29. BIN
      src/assets/img/platBg.png
  30. BIN
      src/assets/img/platBlock.png
  31. BIN
      src/assets/img/success.png
  32. BIN
      src/assets/img/weichatKefu.png
  33. BIN
      src/assets/img/wx.png
  34. BIN
      src/assets/img/wxHover.png
  35. 1 1
      src/components/HelloWorld.vue
  36. 111 0
      src/components/contact-we.vue
  37. 172 0
      src/components/header-nav.vue
  38. 559 0
      src/components/login.vue
  39. 14 5
      src/main.js
  40. 7 3
      src/router/index.js
  41. 411 0
      src/views/apply.vue
  42. 660 0
      src/views/homePage.vue

+ 1 - 1
index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>presell</title>
+    <title>fx66</title>
     <link rel="stylesheet" href="//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css">
     <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
   </head>

+ 1 - 0
package.json

@@ -14,6 +14,7 @@
     "build": "node build/build.js"
   },
   "dependencies": {
+    "element-ui": "^2.3.3",
     "postcss-import": "^11.1.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1"

+ 27 - 3
src/App.vue

@@ -1,17 +1,41 @@
 <template>
   <div id="app">
-    11 
+    <headerNav :username="uname" @quit="quit"></headerNav>
+    <router-view @chuanzhi="chuanzhi" :isquit="isquit"></router-view>
   </div>
 </template>
 
 <script>
+import headerNav from "./components/header-nav"
 export default {
-  name: 'App'
+  name: 'App',
+  data(){
+  	return{
+  		uname:"",
+  		isquit:true
+  	}
+  },
+  components:{
+  	headerNav
+  },
+  mounted(){
+  	
+  },
+  methods:{
+  	chuanzhi(data){
+  		this.uname=data
+  		this.isquit=false
+  	},
+  	quit(){
+  		this.uname=""
+  		this.isquit=true
+  	}
+  }
 }
 </script>
 
 <style>
 #app {
-  
+  background-color: #f5f8ff;
 }
 </style>

+ 3 - 3
src/assets/css/base.css

@@ -124,9 +124,9 @@ a:focus,*:focus {
     overflow:hidden;
 }
 .el-loading-mask{
-        background-color: rgba(255,255,255,1);
-        z-index: 10;
-    }
+    background-color: rgba(255,255,255,1);
+    z-index: 10;
+}
 /* 设置显示和隐藏,通常用来与 js 配合 */
 .hide {
     display:none;

+ 370 - 0
src/assets/iconfont/demo.css

@@ -0,0 +1,370 @@
+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。
+特色:1. 适应中文;2. 基于最新主流浏览器。
+维护:玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注:optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

+ 724 - 0
src/assets/iconfont/demo_fontclass.html

@@ -0,0 +1,724 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <link rel="stylesheet" href="iconfont.css">
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont icon-user"></i>
+                    <div class="name">用户</div>
+                    <div class="fontclass">.icon-user</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tuichu"></i>
+                    <div class="name">退出</div>
+                    <div class="fontclass">.icon-tuichu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-keyboard"></i>
+                    <div class="name">键盘</div>
+                    <div class="fontclass">.icon-keyboard</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-iconfontcaidan"></i>
+                    <div class="name">菜单</div>
+                    <div class="fontclass">.icon-iconfontcaidan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kefu"></i>
+                    <div class="name">客服</div>
+                    <div class="fontclass">.icon-kefu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-weixin1"></i>
+                    <div class="name">微信</div>
+                    <div class="fontclass">.icon-weixin1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-phonedateicon26"></i>
+                    <div class="name">问题反馈</div>
+                    <div class="fontclass">.icon-phonedateicon26</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-phone"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-phone</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-lianxiwomendianhua"></i>
+                    <div class="name">联系我们  电话</div>
+                    <div class="fontclass">.icon-lianxiwomendianhua</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-weixin3"></i>
+                    <div class="name">微信</div>
+                    <div class="fontclass">.icon-weixin3</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yonghu"></i>
+                    <div class="name">用户</div>
+                    <div class="fontclass">.icon-yonghu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-facebook"></i>
+                    <div class="name">facebook</div>
+                    <div class="fontclass">.icon-facebook</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xitong"></i>
+                    <div class="name">系统</div>
+                    <div class="fontclass">.icon-xitong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kefu3"></i>
+                    <div class="name">客服</div>
+                    <div class="fontclass">.icon-kefu3</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shandianpeisong"></i>
+                    <div class="name">闪电</div>
+                    <div class="fontclass">.icon-shandianpeisong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ai-eye"></i>
+                    <div class="name">眼睛</div>
+                    <div class="fontclass">.icon-ai-eye</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yuefeilv"></i>
+                    <div class="name">月费率</div>
+                    <div class="fontclass">.icon-yuefeilv</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-choosehandle"></i>
+                    <div class="name">选择-勾选</div>
+                    <div class="fontclass">.icon-choosehandle</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-youxiang"></i>
+                    <div class="name">邮箱</div>
+                    <div class="fontclass">.icon-youxiang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiantou"></i>
+                    <div class="name">箭头</div>
+                    <div class="fontclass">.icon-jiantou</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-pingtaigonggao"></i>
+                    <div class="name">平台公告</div>
+                    <div class="fontclass">.icon-pingtaigonggao</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-chongzhi"></i>
+                    <div class="name">充值</div>
+                    <div class="fontclass">.icon-chongzhi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-xuzhi"></i>
+                    <div class="name">须知</div>
+                    <div class="fontclass">.icon-xuzhi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-iconfontanquan"></i>
+                    <div class="name">安全</div>
+                    <div class="fontclass">.icon-iconfontanquan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-icon_location"></i>
+                    <div class="name">mfcd_微店_当前位置</div>
+                    <div class="fontclass">.icon-icon_location</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tixian"></i>
+                    <div class="name">提现</div>
+                    <div class="fontclass">.icon-tixian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiantou1-copy-copy"></i>
+                    <div class="name">箭头-下</div>
+                    <div class="fontclass">.icon-jiantou1-copy-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-bty1"></i>
+                    <div class="name">BTY1</div>
+                    <div class="fontclass">.icon-bty1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiaoyiguanli"></i>
+                    <div class="name">交易管理</div>
+                    <div class="fontclass">.icon-jiaoyiguanli</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tixian1"></i>
+                    <div class="name">提现</div>
+                    <div class="fontclass">.icon-tixian1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shandian"></i>
+                    <div class="name">闪电</div>
+                    <div class="fontclass">.icon-shandian</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-tubiao01"></i>
+                    <div class="name">邮箱</div>
+                    <div class="fontclass">.icon-tubiao01</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-qq"></i>
+                    <div class="name">qq</div>
+                    <div class="fontclass">.icon-qq</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ego-caidan"></i>
+                    <div class="name">菜单</div>
+                    <div class="fontclass">.icon-ego-caidan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-meiyuan"></i>
+                    <div class="name">美元</div>
+                    <div class="fontclass">.icon-meiyuan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-arrow-down"></i>
+                    <div class="name">arrow-down</div>
+                    <div class="fontclass">.icon-arrow-down</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-arrow-up"></i>
+                    <div class="name">arrow-up</div>
+                    <div class="fontclass">.icon-arrow-up</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-zhuanyejineng"></i>
+                    <div class="name">专业技能</div>
+                    <div class="fontclass">.icon-zhuanyejineng</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-mima"></i>
+                    <div class="name">密码</div>
+                    <div class="fontclass">.icon-mima</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jisutuikuan"></i>
+                    <div class="name">急速退款</div>
+                    <div class="fontclass">.icon-jisutuikuan</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-weibiaoti"></i>
+                    <div class="name">安全设置</div>
+                    <div class="fontclass">.icon-weibiaoti</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shouji1"></i>
+                    <div class="name">手机</div>
+                    <div class="fontclass">.icon-shouji1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-chenggong"></i>
+                    <div class="name">成功</div>
+                    <div class="fontclass">.icon-chenggong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETH"></i>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">.icon-ETH</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTY2"></i>
+                    <div class="name">BTY</div>
+                    <div class="fontclass">.icon-BTY2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETC"></i>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">.icon-ETC</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTC"></i>
+                    <div class="name">BTC</div>
+                    <div class="fontclass">.icon-BTC</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTC1"></i>
+                    <div class="name">BTC</div>
+                    <div class="fontclass">.icon-BTC1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-weixin2"></i>
+                    <div class="name">微信</div>
+                    <div class="fontclass">.icon-weixin2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-QQqun1"></i>
+                    <div class="name">QQ群</div>
+                    <div class="fontclass">.icon-QQqun1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kefuQQ"></i>
+                    <div class="name">客服QQ</div>
+                    <div class="fontclass">.icon-kefuQQ</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-QQqun"></i>
+                    <div class="name">QQ群</div>
+                    <div class="fontclass">.icon-QQqun</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiazhipinggu-"></i>
+                    <div class="name">价值评估-01</div>
+                    <div class="fontclass">.icon-jiazhipinggu-</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-dianhua"></i>
+                    <div class="name">电话</div>
+                    <div class="fontclass">.icon-dianhua</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fuwu"></i>
+                    <div class="name">服务</div>
+                    <div class="fontclass">.icon-fuwu</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-asset"></i>
+                    <div class="name">机构资产</div>
+                    <div class="fontclass">.icon-asset</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-M-zichanmianban-bitebi"></i>
+                    <div class="name">M-资产面板-比特币</div>
+                    <div class="fontclass">.icon-M-zichanmianban-bitebi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shouji"></i>
+                    <div class="name">手机</div>
+                    <div class="fontclass">.icon-shouji</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-nav-asset-manage"></i>
+                    <div class="name">nav-资产管理</div>
+                    <div class="fontclass">.icon-nav-asset-manage</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-jiaoyi"></i>
+                    <div class="name">交易</div>
+                    <div class="fontclass">.icon-jiaoyi</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-bizhong"></i>
+                    <div class="name">币种</div>
+                    <div class="fontclass">.icon-bizhong</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-weixin"></i>
+                    <div class="name">微信</div>
+                    <div class="fontclass">.icon-weixin</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kefu1"></i>
+                    <div class="name">客服</div>
+                    <div class="fontclass">.icon-kefu1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTS3"></i>
+                    <div class="name">BTS1</div>
+                    <div class="fontclass">.icon-BTS3</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTS"></i>
+                    <div class="name">BTS</div>
+                    <div class="fontclass">.icon-BTS</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-SC"></i>
+                    <div class="name">SC</div>
+                    <div class="fontclass">.icon-SC</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ZEC"></i>
+                    <div class="name">ZEC</div>
+                    <div class="fontclass">.icon-ZEC</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-SC3"></i>
+                    <div class="name">SC1</div>
+                    <div class="fontclass">.icon-SC3</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-LTC"></i>
+                    <div class="name">LTC</div>
+                    <div class="fontclass">.icon-LTC</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETC1"></i>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">.icon-ETC1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETH1"></i>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">.icon-ETH1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fengxiant"></i>
+                    <div class="name">风险提示</div>
+                    <div class="fontclass">.icon-fengxiant</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BCC"></i>
+                    <div class="name">BCC</div>
+                    <div class="fontclass">.icon-BCC</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BCC1"></i>
+                    <div class="name">BCC1</div>
+                    <div class="fontclass">.icon-BCC1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-shandian1"></i>
+                    <div class="name">闪电</div>
+                    <div class="fontclass">.icon-shandian1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fenxiang"></i>
+                    <div class="name">分享</div>
+                    <div class="fontclass">.icon-fenxiang</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-hotphone"></i>
+                    <div class="name">热线电话图标</div>
+                    <div class="fontclass">.icon-hotphone</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-yirenzheng"></i>
+                    <div class="name">账户设置-已认证</div>
+                    <div class="fontclass">.icon-yirenzheng</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-feiji-"></i>
+                    <div class="name">飞机-01</div>
+                    <div class="fontclass">.icon-feiji-</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ltc"></i>
+                    <div class="name">ltc</div>
+                    <div class="fontclass">.icon-ltc</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-kefu2"></i>
+                    <div class="name">在线客服</div>
+                    <div class="fontclass">.icon-kefu2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ZEC1"></i>
+                    <div class="name">ZEC1</div>
+                    <div class="fontclass">.icon-ZEC1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fanhui"></i>
+                    <div class="name">返回</div>
+                    <div class="fontclass">.icon-fanhui</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-DCR3"></i>
+                    <div class="name">dcr</div>
+                    <div class="fontclass">.icon-DCR3</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fx"></i>
+                    <div class="name">fx66</div>
+                    <div class="fontclass">.icon-fx</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-logo--1"></i>
+                    <div class="name">logo-1-19</div>
+                    <div class="fontclass">.icon-logo--1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ZEC2"></i>
+                    <div class="name">ZEC</div>
+                    <div class="fontclass">.icon-ZEC2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTS1"></i>
+                    <div class="name">BTS</div>
+                    <div class="fontclass">.icon-BTS1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETCUSDT"></i>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">.icon-ETCUSDT</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BCC2"></i>
+                    <div class="name">BCC</div>
+                    <div class="fontclass">.icon-BCC2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-LTC1"></i>
+                    <div class="name">LTC</div>
+                    <div class="fontclass">.icon-LTC1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTC2"></i>
+                    <div class="name">BTC</div>
+                    <div class="fontclass">.icon-BTC2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETH2"></i>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">.icon-ETH2</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-M-zichanmianban-bitebi1"></i>
+                    <div class="name">M-资产面板-比特币</div>
+                    <div class="fontclass">.icon-M-zichanmianban-bitebi1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-SC1"></i>
+                    <div class="name">SC</div>
+                    <div class="fontclass">.icon-SC1</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTCUSDT-copy"></i>
+                    <div class="name">BTC</div>
+                    <div class="fontclass">.icon-BTCUSDT-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BCCUSDT-copy"></i>
+                    <div class="name">BCC</div>
+                    <div class="fontclass">.icon-BCCUSDT-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETHUSDT-copy"></i>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">.icon-ETHUSDT-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETCUSDT-copy"></i>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">.icon-ETCUSDT-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ZECUSDT-copy"></i>
+                    <div class="name">ZEC</div>
+                    <div class="fontclass">.icon-ZECUSDT-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-LTCUSDT-copy"></i>
+                    <div class="name">LTC</div>
+                    <div class="fontclass">.icon-LTCUSDT-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTSUSDT-copy"></i>
+                    <div class="name">BTS</div>
+                    <div class="fontclass">.icon-BTSUSDT-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-SCUSDT-copy"></i>
+                    <div class="name">SC</div>
+                    <div class="fontclass">.icon-SCUSDT-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BCCBTC-copy"></i>
+                    <div class="name">BCC</div>
+                    <div class="fontclass">.icon-BCCBTC-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETHBTC-copy"></i>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">.icon-ETHBTC-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ETCBTC-copy"></i>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">.icon-ETCBTC-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-ZECBTC-copy"></i>
+                    <div class="name">ZEC</div>
+                    <div class="fontclass">.icon-ZECBTC-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-LTCBTC-copy"></i>
+                    <div class="name">LTC</div>
+                    <div class="fontclass">.icon-LTCBTC-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTY"></i>
+                    <div class="name">BTY</div>
+                    <div class="fontclass">.icon-BTY</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTYUSDT-copy"></i>
+                    <div class="name">BTY</div>
+                    <div class="fontclass">.icon-BTYUSDT-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-BTYBTC-copy"></i>
+                    <div class="name">BTY</div>
+                    <div class="fontclass">.icon-BTYBTC-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-fengxiant-copy"></i>
+                    <div class="name">风险提示</div>
+                    <div class="fontclass">.icon-fengxiant-copy</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-DCR"></i>
+                    <div class="name">DCR</div>
+                    <div class="fontclass">.icon-DCR</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont icon-DCRUSDT-copy"></i>
+                    <div class="name">DCR</div>
+                    <div class="fontclass">.icon-DCRUSDT-copy</div>
+                </li>
+            
+        </ul>
+
+        <h2 id="font-class-">font-class引用</h2>
+        <hr>
+
+        <p>font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。</p>
+        <p>与unicode使用方式相比,具有如下特点:</p>
+        <ul>
+        <li>兼容性良好,支持ie8+,及所有现代浏览器。</li>
+        <li>相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。</li>
+        <li>因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。</li>
+        <li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li>
+        </ul>
+        <p>使用步骤如下:</p>
+        <h3 id="-fontclass-">第一步:引入项目下面生成的fontclass代码:</h3>
+
+
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
+        <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
+        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+</body>
+</html>

+ 975 - 0
src/assets/iconfont/demo_symbol.html

@@ -0,0 +1,975 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+    <script src="iconfont.js"></script>
+
+    <style type="text/css">
+        .icon {
+          /* 通过设置 font-size 来改变图标大小 */
+          width: 1em; height: 1em;
+          /* 图标和文字相邻时,垂直对齐 */
+          vertical-align: -0.15em;
+          /* 通过设置 color 来改变 SVG 的颜色/fill */
+          fill: currentColor;
+          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+             normalize.css 中也包含这行 */
+          overflow: hidden;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-user"></use>
+                    </svg>
+                    <div class="name">用户</div>
+                    <div class="fontclass">#icon-user</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tuichu"></use>
+                    </svg>
+                    <div class="name">退出</div>
+                    <div class="fontclass">#icon-tuichu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-keyboard"></use>
+                    </svg>
+                    <div class="name">键盘</div>
+                    <div class="fontclass">#icon-keyboard</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-iconfontcaidan"></use>
+                    </svg>
+                    <div class="name">菜单</div>
+                    <div class="fontclass">#icon-iconfontcaidan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kefu"></use>
+                    </svg>
+                    <div class="name">客服</div>
+                    <div class="fontclass">#icon-kefu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-weixin1"></use>
+                    </svg>
+                    <div class="name">微信</div>
+                    <div class="fontclass">#icon-weixin1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-phonedateicon26"></use>
+                    </svg>
+                    <div class="name">问题反馈</div>
+                    <div class="fontclass">#icon-phonedateicon26</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-phone"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-phone</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-lianxiwomendianhua"></use>
+                    </svg>
+                    <div class="name">联系我们  电话</div>
+                    <div class="fontclass">#icon-lianxiwomendianhua</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-weixin3"></use>
+                    </svg>
+                    <div class="name">微信</div>
+                    <div class="fontclass">#icon-weixin3</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yonghu"></use>
+                    </svg>
+                    <div class="name">用户</div>
+                    <div class="fontclass">#icon-yonghu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-facebook"></use>
+                    </svg>
+                    <div class="name">facebook</div>
+                    <div class="fontclass">#icon-facebook</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xitong"></use>
+                    </svg>
+                    <div class="name">系统</div>
+                    <div class="fontclass">#icon-xitong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kefu3"></use>
+                    </svg>
+                    <div class="name">客服</div>
+                    <div class="fontclass">#icon-kefu3</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shandianpeisong"></use>
+                    </svg>
+                    <div class="name">闪电</div>
+                    <div class="fontclass">#icon-shandianpeisong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ai-eye"></use>
+                    </svg>
+                    <div class="name">眼睛</div>
+                    <div class="fontclass">#icon-ai-eye</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yuefeilv"></use>
+                    </svg>
+                    <div class="name">月费率</div>
+                    <div class="fontclass">#icon-yuefeilv</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-choosehandle"></use>
+                    </svg>
+                    <div class="name">选择-勾选</div>
+                    <div class="fontclass">#icon-choosehandle</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-youxiang"></use>
+                    </svg>
+                    <div class="name">邮箱</div>
+                    <div class="fontclass">#icon-youxiang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiantou"></use>
+                    </svg>
+                    <div class="name">箭头</div>
+                    <div class="fontclass">#icon-jiantou</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-pingtaigonggao"></use>
+                    </svg>
+                    <div class="name">平台公告</div>
+                    <div class="fontclass">#icon-pingtaigonggao</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-chongzhi"></use>
+                    </svg>
+                    <div class="name">充值</div>
+                    <div class="fontclass">#icon-chongzhi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-xuzhi"></use>
+                    </svg>
+                    <div class="name">须知</div>
+                    <div class="fontclass">#icon-xuzhi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-iconfontanquan"></use>
+                    </svg>
+                    <div class="name">安全</div>
+                    <div class="fontclass">#icon-iconfontanquan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-icon_location"></use>
+                    </svg>
+                    <div class="name">mfcd_微店_当前位置</div>
+                    <div class="fontclass">#icon-icon_location</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tixian"></use>
+                    </svg>
+                    <div class="name">提现</div>
+                    <div class="fontclass">#icon-tixian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiantou1-copy-copy"></use>
+                    </svg>
+                    <div class="name">箭头-下</div>
+                    <div class="fontclass">#icon-jiantou1-copy-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-bty1"></use>
+                    </svg>
+                    <div class="name">BTY1</div>
+                    <div class="fontclass">#icon-bty1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiaoyiguanli"></use>
+                    </svg>
+                    <div class="name">交易管理</div>
+                    <div class="fontclass">#icon-jiaoyiguanli</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tixian1"></use>
+                    </svg>
+                    <div class="name">提现</div>
+                    <div class="fontclass">#icon-tixian1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shandian"></use>
+                    </svg>
+                    <div class="name">闪电</div>
+                    <div class="fontclass">#icon-shandian</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-tubiao01"></use>
+                    </svg>
+                    <div class="name">邮箱</div>
+                    <div class="fontclass">#icon-tubiao01</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-qq"></use>
+                    </svg>
+                    <div class="name">qq</div>
+                    <div class="fontclass">#icon-qq</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ego-caidan"></use>
+                    </svg>
+                    <div class="name">菜单</div>
+                    <div class="fontclass">#icon-ego-caidan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-meiyuan"></use>
+                    </svg>
+                    <div class="name">美元</div>
+                    <div class="fontclass">#icon-meiyuan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-arrow-down"></use>
+                    </svg>
+                    <div class="name">arrow-down</div>
+                    <div class="fontclass">#icon-arrow-down</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-arrow-up"></use>
+                    </svg>
+                    <div class="name">arrow-up</div>
+                    <div class="fontclass">#icon-arrow-up</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-zhuanyejineng"></use>
+                    </svg>
+                    <div class="name">专业技能</div>
+                    <div class="fontclass">#icon-zhuanyejineng</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-mima"></use>
+                    </svg>
+                    <div class="name">密码</div>
+                    <div class="fontclass">#icon-mima</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jisutuikuan"></use>
+                    </svg>
+                    <div class="name">急速退款</div>
+                    <div class="fontclass">#icon-jisutuikuan</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-weibiaoti"></use>
+                    </svg>
+                    <div class="name">安全设置</div>
+                    <div class="fontclass">#icon-weibiaoti</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shouji1"></use>
+                    </svg>
+                    <div class="name">手机</div>
+                    <div class="fontclass">#icon-shouji1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-chenggong"></use>
+                    </svg>
+                    <div class="name">成功</div>
+                    <div class="fontclass">#icon-chenggong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETH"></use>
+                    </svg>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">#icon-ETH</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTY2"></use>
+                    </svg>
+                    <div class="name">BTY</div>
+                    <div class="fontclass">#icon-BTY2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETC"></use>
+                    </svg>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">#icon-ETC</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTC"></use>
+                    </svg>
+                    <div class="name">BTC</div>
+                    <div class="fontclass">#icon-BTC</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTC1"></use>
+                    </svg>
+                    <div class="name">BTC</div>
+                    <div class="fontclass">#icon-BTC1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-weixin2"></use>
+                    </svg>
+                    <div class="name">微信</div>
+                    <div class="fontclass">#icon-weixin2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-QQqun1"></use>
+                    </svg>
+                    <div class="name">QQ群</div>
+                    <div class="fontclass">#icon-QQqun1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kefuQQ"></use>
+                    </svg>
+                    <div class="name">客服QQ</div>
+                    <div class="fontclass">#icon-kefuQQ</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-QQqun"></use>
+                    </svg>
+                    <div class="name">QQ群</div>
+                    <div class="fontclass">#icon-QQqun</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiazhipinggu-"></use>
+                    </svg>
+                    <div class="name">价值评估-01</div>
+                    <div class="fontclass">#icon-jiazhipinggu-</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-dianhua"></use>
+                    </svg>
+                    <div class="name">电话</div>
+                    <div class="fontclass">#icon-dianhua</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fuwu"></use>
+                    </svg>
+                    <div class="name">服务</div>
+                    <div class="fontclass">#icon-fuwu</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-asset"></use>
+                    </svg>
+                    <div class="name">机构资产</div>
+                    <div class="fontclass">#icon-asset</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-M-zichanmianban-bitebi"></use>
+                    </svg>
+                    <div class="name">M-资产面板-比特币</div>
+                    <div class="fontclass">#icon-M-zichanmianban-bitebi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shouji"></use>
+                    </svg>
+                    <div class="name">手机</div>
+                    <div class="fontclass">#icon-shouji</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-nav-asset-manage"></use>
+                    </svg>
+                    <div class="name">nav-资产管理</div>
+                    <div class="fontclass">#icon-nav-asset-manage</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-jiaoyi"></use>
+                    </svg>
+                    <div class="name">交易</div>
+                    <div class="fontclass">#icon-jiaoyi</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-bizhong"></use>
+                    </svg>
+                    <div class="name">币种</div>
+                    <div class="fontclass">#icon-bizhong</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-weixin"></use>
+                    </svg>
+                    <div class="name">微信</div>
+                    <div class="fontclass">#icon-weixin</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kefu1"></use>
+                    </svg>
+                    <div class="name">客服</div>
+                    <div class="fontclass">#icon-kefu1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTS3"></use>
+                    </svg>
+                    <div class="name">BTS1</div>
+                    <div class="fontclass">#icon-BTS3</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTS"></use>
+                    </svg>
+                    <div class="name">BTS</div>
+                    <div class="fontclass">#icon-BTS</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-SC"></use>
+                    </svg>
+                    <div class="name">SC</div>
+                    <div class="fontclass">#icon-SC</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ZEC"></use>
+                    </svg>
+                    <div class="name">ZEC</div>
+                    <div class="fontclass">#icon-ZEC</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-SC3"></use>
+                    </svg>
+                    <div class="name">SC1</div>
+                    <div class="fontclass">#icon-SC3</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-LTC"></use>
+                    </svg>
+                    <div class="name">LTC</div>
+                    <div class="fontclass">#icon-LTC</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETC1"></use>
+                    </svg>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">#icon-ETC1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETH1"></use>
+                    </svg>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">#icon-ETH1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fengxiant"></use>
+                    </svg>
+                    <div class="name">风险提示</div>
+                    <div class="fontclass">#icon-fengxiant</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BCC"></use>
+                    </svg>
+                    <div class="name">BCC</div>
+                    <div class="fontclass">#icon-BCC</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BCC1"></use>
+                    </svg>
+                    <div class="name">BCC1</div>
+                    <div class="fontclass">#icon-BCC1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-shandian1"></use>
+                    </svg>
+                    <div class="name">闪电</div>
+                    <div class="fontclass">#icon-shandian1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fenxiang"></use>
+                    </svg>
+                    <div class="name">分享</div>
+                    <div class="fontclass">#icon-fenxiang</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-hotphone"></use>
+                    </svg>
+                    <div class="name">热线电话图标</div>
+                    <div class="fontclass">#icon-hotphone</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-yirenzheng"></use>
+                    </svg>
+                    <div class="name">账户设置-已认证</div>
+                    <div class="fontclass">#icon-yirenzheng</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-feiji-"></use>
+                    </svg>
+                    <div class="name">飞机-01</div>
+                    <div class="fontclass">#icon-feiji-</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ltc"></use>
+                    </svg>
+                    <div class="name">ltc</div>
+                    <div class="fontclass">#icon-ltc</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-kefu2"></use>
+                    </svg>
+                    <div class="name">在线客服</div>
+                    <div class="fontclass">#icon-kefu2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ZEC1"></use>
+                    </svg>
+                    <div class="name">ZEC1</div>
+                    <div class="fontclass">#icon-ZEC1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fanhui"></use>
+                    </svg>
+                    <div class="name">返回</div>
+                    <div class="fontclass">#icon-fanhui</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-DCR3"></use>
+                    </svg>
+                    <div class="name">dcr</div>
+                    <div class="fontclass">#icon-DCR3</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fx"></use>
+                    </svg>
+                    <div class="name">fx66</div>
+                    <div class="fontclass">#icon-fx</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-logo--1"></use>
+                    </svg>
+                    <div class="name">logo-1-19</div>
+                    <div class="fontclass">#icon-logo--1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ZEC2"></use>
+                    </svg>
+                    <div class="name">ZEC</div>
+                    <div class="fontclass">#icon-ZEC2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTS1"></use>
+                    </svg>
+                    <div class="name">BTS</div>
+                    <div class="fontclass">#icon-BTS1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETCUSDT"></use>
+                    </svg>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">#icon-ETCUSDT</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BCC2"></use>
+                    </svg>
+                    <div class="name">BCC</div>
+                    <div class="fontclass">#icon-BCC2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-LTC1"></use>
+                    </svg>
+                    <div class="name">LTC</div>
+                    <div class="fontclass">#icon-LTC1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTC2"></use>
+                    </svg>
+                    <div class="name">BTC</div>
+                    <div class="fontclass">#icon-BTC2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETH2"></use>
+                    </svg>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">#icon-ETH2</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-M-zichanmianban-bitebi1"></use>
+                    </svg>
+                    <div class="name">M-资产面板-比特币</div>
+                    <div class="fontclass">#icon-M-zichanmianban-bitebi1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-SC1"></use>
+                    </svg>
+                    <div class="name">SC</div>
+                    <div class="fontclass">#icon-SC1</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTCUSDT-copy"></use>
+                    </svg>
+                    <div class="name">BTC</div>
+                    <div class="fontclass">#icon-BTCUSDT-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BCCUSDT-copy"></use>
+                    </svg>
+                    <div class="name">BCC</div>
+                    <div class="fontclass">#icon-BCCUSDT-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETHUSDT-copy"></use>
+                    </svg>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">#icon-ETHUSDT-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETCUSDT-copy"></use>
+                    </svg>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">#icon-ETCUSDT-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ZECUSDT-copy"></use>
+                    </svg>
+                    <div class="name">ZEC</div>
+                    <div class="fontclass">#icon-ZECUSDT-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-LTCUSDT-copy"></use>
+                    </svg>
+                    <div class="name">LTC</div>
+                    <div class="fontclass">#icon-LTCUSDT-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTSUSDT-copy"></use>
+                    </svg>
+                    <div class="name">BTS</div>
+                    <div class="fontclass">#icon-BTSUSDT-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-SCUSDT-copy"></use>
+                    </svg>
+                    <div class="name">SC</div>
+                    <div class="fontclass">#icon-SCUSDT-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BCCBTC-copy"></use>
+                    </svg>
+                    <div class="name">BCC</div>
+                    <div class="fontclass">#icon-BCCBTC-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETHBTC-copy"></use>
+                    </svg>
+                    <div class="name">ETH</div>
+                    <div class="fontclass">#icon-ETHBTC-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ETCBTC-copy"></use>
+                    </svg>
+                    <div class="name">ETC</div>
+                    <div class="fontclass">#icon-ETCBTC-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-ZECBTC-copy"></use>
+                    </svg>
+                    <div class="name">ZEC</div>
+                    <div class="fontclass">#icon-ZECBTC-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-LTCBTC-copy"></use>
+                    </svg>
+                    <div class="name">LTC</div>
+                    <div class="fontclass">#icon-LTCBTC-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTY"></use>
+                    </svg>
+                    <div class="name">BTY</div>
+                    <div class="fontclass">#icon-BTY</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTYUSDT-copy"></use>
+                    </svg>
+                    <div class="name">BTY</div>
+                    <div class="fontclass">#icon-BTYUSDT-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-BTYBTC-copy"></use>
+                    </svg>
+                    <div class="name">BTY</div>
+                    <div class="fontclass">#icon-BTYBTC-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-fengxiant-copy"></use>
+                    </svg>
+                    <div class="name">风险提示</div>
+                    <div class="fontclass">#icon-fengxiant-copy</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-DCR"></use>
+                    </svg>
+                    <div class="name">DCR</div>
+                    <div class="fontclass">#icon-DCR</div>
+                </li>
+            
+                <li>
+                    <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-DCRUSDT-copy"></use>
+                    </svg>
+                    <div class="name">DCR</div>
+                    <div class="fontclass">#icon-DCRUSDT-copy</div>
+                </li>
+            
+        </ul>
+
+
+        <h2 id="symbol-">symbol引用</h2>
+        <hr>
+
+        <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+        这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:</p>
+        <ul>
+          <li>支持多色图标了,不再受单色限制。</li>
+          <li>通过一些技巧,支持像字体那样,通过<code>font-size</code>,<code>color</code>来调整样式。</li>
+          <li>兼容性较差,支持 ie9+,及现代浏览器。</li>
+          <li>浏览器渲染svg的性能一般,还不如png。</li>
+        </ul>
+        <p>使用步骤如下:</p>
+        <h3 id="-symbol-">第一步:引入项目下面生成的symbol代码:</h3>
+        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
+        <h3 id="-css-">第二步:加入通用css代码(引入一次就行):</h3>
+        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
+.icon {
+   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
+   vertical-align: <span class="hljs-number">-0.15</span>em;
+   fill: currentColor;
+   overflow: hidden;
+}
+&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
+        <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
+        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
+  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
+</span>&lt;<span class="hljs-regexp">/svg&gt;
+        </span></code></pre>
+    </div>
+</body>
+</html>

+ 762 - 0
src/assets/iconfont/demo_unicode.html

@@ -0,0 +1,762 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>IconFont</title>
+    <link rel="stylesheet" href="demo.css">
+
+    <style type="text/css">
+
+        @font-face {font-family: "iconfont";
+          src: url('iconfont.eot'); /* IE9*/
+          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
+          url('iconfont.woff') format('woff'), /* chrome, firefox */
+          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
+        }
+
+        .iconfont {
+          font-family:"iconfont" !important;
+          font-size:16px;
+          font-style:normal;
+          -webkit-font-smoothing: antialiased;
+          -webkit-text-stroke-width: 0.2px;
+          -moz-osx-font-smoothing: grayscale;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="main markdown">
+        <h1>IconFont 图标</h1>
+        <ul class="icon_lists clear">
+            
+                <li>
+                <i class="icon iconfont">&#xe61a;</i>
+                    <div class="name">用户</div>
+                    <div class="code">&amp;#xe61a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe620;</i>
+                    <div class="name">退出</div>
+                    <div class="code">&amp;#xe620;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe653;</i>
+                    <div class="name">键盘</div>
+                    <div class="code">&amp;#xe653;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe610;</i>
+                    <div class="name">菜单</div>
+                    <div class="code">&amp;#xe610;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe618;</i>
+                    <div class="name">客服</div>
+                    <div class="code">&amp;#xe618;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61d;</i>
+                    <div class="name">微信</div>
+                    <div class="code">&amp;#xe61d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe635;</i>
+                    <div class="name">问题反馈</div>
+                    <div class="code">&amp;#xe635;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe619;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe619;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe629;</i>
+                    <div class="name">联系我们  电话</div>
+                    <div class="code">&amp;#xe629;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe695;</i>
+                    <div class="name">微信</div>
+                    <div class="code">&amp;#xe695;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe652;</i>
+                    <div class="name">用户</div>
+                    <div class="code">&amp;#xe652;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe65e;</i>
+                    <div class="name">facebook</div>
+                    <div class="code">&amp;#xe65e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6a6;</i>
+                    <div class="name">系统</div>
+                    <div class="code">&amp;#xe6a6;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe65a;</i>
+                    <div class="name">客服</div>
+                    <div class="code">&amp;#xe65a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe601;</i>
+                    <div class="name">闪电</div>
+                    <div class="code">&amp;#xe601;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe669;</i>
+                    <div class="name">眼睛</div>
+                    <div class="code">&amp;#xe669;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe65b;</i>
+                    <div class="name">月费率</div>
+                    <div class="code">&amp;#xe65b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62c;</i>
+                    <div class="name">选择-勾选</div>
+                    <div class="code">&amp;#xe62c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe64d;</i>
+                    <div class="name">邮箱</div>
+                    <div class="code">&amp;#xe64d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe65f;</i>
+                    <div class="name">箭头</div>
+                    <div class="code">&amp;#xe65f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe614;</i>
+                    <div class="name">平台公告</div>
+                    <div class="code">&amp;#xe614;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe636;</i>
+                    <div class="name">充值</div>
+                    <div class="code">&amp;#xe636;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60c;</i>
+                    <div class="name">须知</div>
+                    <div class="code">&amp;#xe60c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe633;</i>
+                    <div class="name">安全</div>
+                    <div class="code">&amp;#xe633;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60a;</i>
+                    <div class="name">mfcd_微店_当前位置</div>
+                    <div class="code">&amp;#xe60a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60d;</i>
+                    <div class="name">提现</div>
+                    <div class="code">&amp;#xe60d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe7a6;</i>
+                    <div class="name">箭头-下</div>
+                    <div class="code">&amp;#xe7a6;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe606;</i>
+                    <div class="name">BTY1</div>
+                    <div class="code">&amp;#xe606;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe66d;</i>
+                    <div class="name">交易管理</div>
+                    <div class="code">&amp;#xe66d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe68a;</i>
+                    <div class="name">提现</div>
+                    <div class="code">&amp;#xe68a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe648;</i>
+                    <div class="name">闪电</div>
+                    <div class="code">&amp;#xe648;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe600;</i>
+                    <div class="name">邮箱</div>
+                    <div class="code">&amp;#xe600;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe630;</i>
+                    <div class="name">qq</div>
+                    <div class="code">&amp;#xe630;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62f;</i>
+                    <div class="name">菜单</div>
+                    <div class="code">&amp;#xe62f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8a4;</i>
+                    <div class="name">美元</div>
+                    <div class="code">&amp;#xe8a4;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe604;</i>
+                    <div class="name">arrow-down</div>
+                    <div class="code">&amp;#xe604;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe611;</i>
+                    <div class="name">arrow-up</div>
+                    <div class="code">&amp;#xe611;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe66f;</i>
+                    <div class="name">专业技能</div>
+                    <div class="code">&amp;#xe66f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6c5;</i>
+                    <div class="name">密码</div>
+                    <div class="code">&amp;#xe6c5;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe638;</i>
+                    <div class="name">急速退款</div>
+                    <div class="code">&amp;#xe638;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe654;</i>
+                    <div class="name">安全设置</div>
+                    <div class="code">&amp;#xe654;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe621;</i>
+                    <div class="name">手机</div>
+                    <div class="code">&amp;#xe621;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe617;</i>
+                    <div class="name">成功</div>
+                    <div class="code">&amp;#xe617;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe686;</i>
+                    <div class="name">ETH</div>
+                    <div class="code">&amp;#xe686;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe687;</i>
+                    <div class="name">BTY</div>
+                    <div class="code">&amp;#xe687;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe688;</i>
+                    <div class="name">ETC</div>
+                    <div class="code">&amp;#xe688;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe689;</i>
+                    <div class="name">BTC</div>
+                    <div class="code">&amp;#xe689;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe615;</i>
+                    <div class="name">BTC</div>
+                    <div class="code">&amp;#xe615;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60b;</i>
+                    <div class="name">微信</div>
+                    <div class="code">&amp;#xe60b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe714;</i>
+                    <div class="name">QQ群</div>
+                    <div class="code">&amp;#xe714;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6ae;</i>
+                    <div class="name">客服QQ</div>
+                    <div class="code">&amp;#xe6ae;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe609;</i>
+                    <div class="name">QQ群</div>
+                    <div class="code">&amp;#xe609;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe847;</i>
+                    <div class="name">价值评估-01</div>
+                    <div class="code">&amp;#xe847;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe649;</i>
+                    <div class="name">电话</div>
+                    <div class="code">&amp;#xe649;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe660;</i>
+                    <div class="name">服务</div>
+                    <div class="code">&amp;#xe660;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6a7;</i>
+                    <div class="name">机构资产</div>
+                    <div class="code">&amp;#xe6a7;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe65d;</i>
+                    <div class="name">M-资产面板-比特币</div>
+                    <div class="code">&amp;#xe65d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe634;</i>
+                    <div class="name">手机</div>
+                    <div class="code">&amp;#xe634;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6ef;</i>
+                    <div class="name">nav-资产管理</div>
+                    <div class="code">&amp;#xe6ef;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe63b;</i>
+                    <div class="name">交易</div>
+                    <div class="code">&amp;#xe63b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe68c;</i>
+                    <div class="name">币种</div>
+                    <div class="code">&amp;#xe68c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f2;</i>
+                    <div class="name">微信</div>
+                    <div class="code">&amp;#xe6f2;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe637;</i>
+                    <div class="name">客服</div>
+                    <div class="code">&amp;#xe637;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6a2;</i>
+                    <div class="name">BTS1</div>
+                    <div class="code">&amp;#xe6a2;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe69f;</i>
+                    <div class="name">BTS</div>
+                    <div class="code">&amp;#xe69f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6a5;</i>
+                    <div class="name">SC</div>
+                    <div class="code">&amp;#xe6a5;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6a0;</i>
+                    <div class="name">ZEC</div>
+                    <div class="code">&amp;#xe6a0;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6a3;</i>
+                    <div class="name">SC1</div>
+                    <div class="code">&amp;#xe6a3;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6a1;</i>
+                    <div class="name">LTC</div>
+                    <div class="code">&amp;#xe6a1;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe607;</i>
+                    <div class="name">ETC</div>
+                    <div class="code">&amp;#xe607;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe608;</i>
+                    <div class="name">ETH</div>
+                    <div class="code">&amp;#xe608;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6ed;</i>
+                    <div class="name">风险提示</div>
+                    <div class="code">&amp;#xe6ed;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6b0;</i>
+                    <div class="name">BCC</div>
+                    <div class="code">&amp;#xe6b0;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6b2;</i>
+                    <div class="name">BCC1</div>
+                    <div class="code">&amp;#xe6b2;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60e;</i>
+                    <div class="name">闪电</div>
+                    <div class="code">&amp;#xe60e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe66c;</i>
+                    <div class="name">分享</div>
+                    <div class="code">&amp;#xe66c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe628;</i>
+                    <div class="name">热线电话图标</div>
+                    <div class="code">&amp;#xe628;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe627;</i>
+                    <div class="name">账户设置-已认证</div>
+                    <div class="code">&amp;#xe627;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe616;</i>
+                    <div class="name">飞机-01</div>
+                    <div class="code">&amp;#xe616;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe605;</i>
+                    <div class="name">ltc</div>
+                    <div class="code">&amp;#xe605;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62e;</i>
+                    <div class="name">在线客服</div>
+                    <div class="code">&amp;#xe62e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6d9;</i>
+                    <div class="name">ZEC1</div>
+                    <div class="code">&amp;#xe6d9;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6e5;</i>
+                    <div class="name">返回</div>
+                    <div class="code">&amp;#xe6e5;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe6f6;</i>
+                    <div class="name">dcr</div>
+                    <div class="code">&amp;#xe6f6;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe60f;</i>
+                    <div class="name">fx66</div>
+                    <div class="code">&amp;#xe60f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61b;</i>
+                    <div class="name">logo-1-19</div>
+                    <div class="code">&amp;#xe61b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61c;</i>
+                    <div class="name">ZEC</div>
+                    <div class="code">&amp;#xe61c;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61e;</i>
+                    <div class="name">BTS</div>
+                    <div class="code">&amp;#xe61e;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe61f;</i>
+                    <div class="name">ETC</div>
+                    <div class="code">&amp;#xe61f;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe622;</i>
+                    <div class="name">BCC</div>
+                    <div class="code">&amp;#xe622;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe623;</i>
+                    <div class="name">LTC</div>
+                    <div class="code">&amp;#xe623;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe624;</i>
+                    <div class="name">BTC</div>
+                    <div class="code">&amp;#xe624;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe625;</i>
+                    <div class="name">ETH</div>
+                    <div class="code">&amp;#xe625;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe626;</i>
+                    <div class="name">M-资产面板-比特币</div>
+                    <div class="code">&amp;#xe626;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62a;</i>
+                    <div class="name">SC</div>
+                    <div class="code">&amp;#xe62a;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8a6;</i>
+                    <div class="name">BTC</div>
+                    <div class="code">&amp;#xe8a6;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8a7;</i>
+                    <div class="name">BCC</div>
+                    <div class="code">&amp;#xe8a7;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8a8;</i>
+                    <div class="name">ETH</div>
+                    <div class="code">&amp;#xe8a8;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8a9;</i>
+                    <div class="name">ETC</div>
+                    <div class="code">&amp;#xe8a9;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8aa;</i>
+                    <div class="name">ZEC</div>
+                    <div class="code">&amp;#xe8aa;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8ab;</i>
+                    <div class="name">LTC</div>
+                    <div class="code">&amp;#xe8ab;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8ac;</i>
+                    <div class="name">BTS</div>
+                    <div class="code">&amp;#xe8ac;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8ad;</i>
+                    <div class="name">SC</div>
+                    <div class="code">&amp;#xe8ad;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8ae;</i>
+                    <div class="name">BCC</div>
+                    <div class="code">&amp;#xe8ae;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8af;</i>
+                    <div class="name">ETH</div>
+                    <div class="code">&amp;#xe8af;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8b0;</i>
+                    <div class="name">ETC</div>
+                    <div class="code">&amp;#xe8b0;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8b1;</i>
+                    <div class="name">ZEC</div>
+                    <div class="code">&amp;#xe8b1;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8b2;</i>
+                    <div class="name">LTC</div>
+                    <div class="code">&amp;#xe8b2;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62b;</i>
+                    <div class="name">BTY</div>
+                    <div class="code">&amp;#xe62b;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8b3;</i>
+                    <div class="name">BTY</div>
+                    <div class="code">&amp;#xe8b3;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8b4;</i>
+                    <div class="name">BTY</div>
+                    <div class="code">&amp;#xe8b4;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8b5;</i>
+                    <div class="name">风险提示</div>
+                    <div class="code">&amp;#xe8b5;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe62d;</i>
+                    <div class="name">DCR</div>
+                    <div class="code">&amp;#xe62d;</div>
+                </li>
+            
+                <li>
+                <i class="icon iconfont">&#xe8b6;</i>
+                    <div class="name">DCR</div>
+                    <div class="code">&amp;#xe8b6;</div>
+                </li>
+            
+        </ul>
+        <h2 id="unicode-">unicode引用</h2>
+        <hr>
+
+        <p>unicode是字体在网页端最原始的应用方式,特点是:</p>
+        <ul>
+        <li>兼容性最好,支持ie6+,及所有现代浏览器。</li>
+        <li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
+        <li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li>
+        </ul>
+        <blockquote>
+        <p>注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式</p>
+        </blockquote>
+        <p>unicode使用步骤如下:</p>
+        <h3 id="-font-face">第一步:拷贝项目下面生成的font-face</h3>
+        <pre><code class="lang-js hljs javascript">@font-face {
+  font-family: <span class="hljs-string">'iconfont'</span>;
+  src: url(<span class="hljs-string">'iconfont.eot'</span>);
+  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
+  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
+  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
+  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
+}
+</code></pre>
+        <h3 id="-iconfont-">第二步:定义使用iconfont的样式</h3>
+        <pre><code class="lang-js hljs javascript">.iconfont{
+  font-family:<span class="hljs-string">"iconfont"</span> !important;
+  font-size:<span class="hljs-number">16</span>px;font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+        <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
+        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
+
+        <blockquote>
+        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p>
+        </blockquote>
+    </div>
+
+
+</body>
+</html>

ファイルの差分が大きいため隠しています
+ 4 - 0
src/assets/iconfont/iconfont.css


BIN
src/assets/iconfont/iconfont.eot


ファイルの差分が大きいため隠しています
+ 0 - 0
src/assets/iconfont/iconfont.js


ファイルの差分が大きいため隠しています
+ 35 - 0
src/assets/iconfont/iconfont.svg


BIN
src/assets/iconfont/iconfont.ttf


BIN
src/assets/iconfont/iconfont.woff


BIN
src/assets/img/add01.png


BIN
src/assets/img/add02.png


BIN
src/assets/img/add03.png


BIN
src/assets/img/add04.png


BIN
src/assets/img/apply-banner.png


BIN
src/assets/img/banner1.png


BIN
src/assets/img/banner2.png


BIN
src/assets/img/banner3.png


BIN
src/assets/img/coinBg.png


BIN
src/assets/img/fx66kefufu.8b7368d.jpg


BIN
src/assets/img/logo2.png


BIN
src/assets/img/mainLogo.png


BIN
src/assets/img/phone.png


BIN
src/assets/img/phoneHover.png


BIN
src/assets/img/platBg.png


BIN
src/assets/img/platBlock.png


BIN
src/assets/img/success.png


BIN
src/assets/img/weichatKefu.png


BIN
src/assets/img/wx.png


BIN
src/assets/img/wxHover.png


+ 1 - 1
src/components/HelloWorld.vue

@@ -9,7 +9,7 @@ export default {
   name: 'HelloWorld',
   data () {
     return {
-      msg: 'Welcome to Your Vue.js App'
+      msg: ''
     }
   }
 }

+ 111 - 0
src/components/contact-we.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="contact-we">
+    <div class="btn" v-on:click='show()'>
+    	<i class="iconfont icon-kefu3"></i>
+    	<span>联<br>系<br>客<br>服</span>
+    </div>
+		<div class="content" v-show='isActive'>
+			<div class="wechat">
+				<img src="../assets/img/weichatKefu.png">
+			</div>
+			<div class="phone">
+				<p>电话咨询</p>
+				<i class="iconfont icon-dianhua"></i>
+				<p>+8617354718363</p>
+			</div>
+		</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'contactWe',
+  data () {
+    return {
+      isActive: false
+    }
+  },
+  methods:{
+  	show(){
+  		this.isActive=!this.isActive
+  	}
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.contact-we{
+		position: fixed;
+		top: 28%;
+		right: 0;
+		z-index: 999;
+		.btn{
+			width: 36px;
+			height: 120px;
+	    background: #20a0ff;
+	    position: absolute;
+	    margin-left: -36px;
+	    border-top-left-radius: 10px;
+	    border-bottom-left-radius: 10px;
+	    cursor: pointer;
+	    margin-top: 108px;
+	    text-align: center;
+	    i{
+	    	font-size: 24px;
+	    	color: white;
+	    }
+	    span{
+	    	color: yellow;
+	    	font-size: 14px;
+	    	line-height: 1;
+	    }
+		}
+		.content{
+			box-shadow: 0 3px 5px 2px rgba(26,0,0,.4);
+	    width: 150px;
+	    background: #20a0ff;
+	    border-top-left-radius: 10px;
+	    border-bottom-left-radius: 10px;
+	    padding-top: 10px;
+	    padding-bottom: 10px;
+	    .wechat{
+	    	background: white;
+	    	width: 130px;
+	    	margin: 0 auto;
+	    	border-radius: 10px;
+	    	overflow: hidden;
+	    	height: 140px;
+	    }
+	    .phone{
+	    	height: 130px;
+	    	width: 130px;
+	    	margin: 0 auto;
+	    	border-radius: 10px;
+	    	padding: 10px 5px;
+	    	margin-top: 10px;
+	    	background: white;
+	    	text-align: center;
+	    	p:nth-child(1){
+					border-bottom: 1px solid #e5e5e5;
+					font-size: 14px;
+			    color: #333;
+			    font-weight: 700;
+			    line-height: 30px;
+			    text-align: left;
+    			margin-left: 10px;
+	    	}
+	    	i{
+	    		font-size: 32px;
+	    		color: #1eb8ff;
+	    	}
+	    	p:nth-child(3){
+					color: #333;
+					font-weight: 700;
+					font-size: 13px;
+					line-height: 30px;
+	    	}
+	    }
+		}
+	}
+</style>

+ 172 - 0
src/components/header-nav.vue

@@ -0,0 +1,172 @@
+<template>
+  <div class="header-nav" :class="{'scroll':isscroll}">
+    <div class="nav-content">
+    	<div class="logo">
+    		<img src="../assets/img/mainLogo.png" v-show='!isscroll'>
+    		<img src="../assets/img/logo2.png" v-show='isscroll'>
+    	</div>
+			<ul class="nav-line clearfix">
+				<li v-on:click='cut("/")' :class="{'active':'/'==isActive}"><span>首页</span></li>
+				<li v-on:click='cut("/apply")' :class="{'active':'/apply'==isActive}">
+					<span>申请经纪商</span>
+					<i class="badge">HOT</i>
+				</li>
+			</ul>
+			<div class="usermsg" v-show="username!=''">
+				<div class="item" :class="{'scroll':isscroll}">
+					<i class="iconfont icon-user"></i>
+					<span>{{username}}</span>
+				</div>
+				<div class="item" :class="{'scroll':isscroll}">
+					<i class="iconfont icon-tuichu"></i>
+					<span @click="quit()">退出</span>
+				</div>
+			</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'header-nav',
+  data () {
+    return {
+      isActive:'/',
+      isscroll:false
+    }
+  },
+  props:['username'],
+  methods:{
+  	cut(e){
+  		if (!window.localStorage.username) {
+  			alert('请先登陆')
+  		}else{
+  			this.$router.push(e)
+  			this.isActive=e
+  		}
+  	},
+  	scrollFunc(){
+  		let t = document.documentElement.scrollTop || document.body.scrollTop
+  		if (t===0&&this.$route.path=='/') {
+  			this.isscroll=false
+  		}else {
+  			this.isscroll=true
+  		}
+  	},
+  	quit(){
+  		window.localStorage.clear()
+  		this.$router.push('/')
+  		this.$emit('quit')
+  		this.isActive='/'
+  	}
+  },
+  mounted(){
+  		window.addEventListener('scroll',this.scrollFunc,false)
+  		this.isActive=this.$route.path
+  },
+  updated(){
+  	this.scrollFunc()
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.header-nav{
+		width: 100%;
+		height: 75px;
+		background-color: rgba(0, 0, 0, .2);
+		position: fixed;
+		top: 0;
+		z-index: 999;
+		.nav-content{
+			width: 1200px;
+			margin: 0 auto;
+			height: 100%;
+			display: flex;
+			justify-content: space-between;
+			.logo{
+				height: 100%;
+				line-height: 75px;
+				width: 98px;
+				float: left;
+				margin-right: 55px;
+				display: flex;
+				align-items: center;
+				img{
+					height: 33px;
+				}
+			}
+			.nav-line{
+				flex-grow: 1;
+				li{
+					float: left;
+					width: 118px;
+					height: 75px;
+					font-size: 14px;
+					line-height: 75px;
+					text-align: center;
+					color: #fff;
+					&.active{
+						background: white;
+						color: #1a6fa6;
+					}
+					.badge{
+						background: #ff4e00;
+						color: #fff;
+						display: block;
+						width: 38px;
+						height: 18px;
+						line-height: 18px;
+						font-size: 12px;
+						border-radius: 2px;
+						position: absolute;
+						top: 8px;
+						right: 0;
+					}
+					.badge::after{
+						content: '';
+						position: absolute;
+						width: 0;
+						height: 0;
+						left: 30%;
+						bottom: 0;
+						border-left: 5px solid transparent;
+						border-right: 5px solid transparent;
+						border-top: 14px solid #ff4e00;
+						margin-bottom: -8px;
+						transform: rotate(30deg);
+						z-index: -1;
+					}
+				}
+				li:nth-child(2){
+					position: relative;
+				}
+			}
+			.usermsg{
+				float: right;
+				color: white;
+				line-height: 72px;
+				.item{
+					float: left;
+					font-size: 14px;
+					cursor: pointer;
+				}
+				.item:nth-child(1){
+					margin-right: 25px;
+				}
+			}
+		}
+	}
+	.scroll{
+		background-color: white;
+		color: #333;
+	}
+	.scroll .nav-line li.active{
+		color: #fff!important;
+		background-color: #1a6fa6!important;
+	}
+	.scroll .nav-line li{
+		color: #333!important;
+	}
+</style>

+ 559 - 0
src/components/login.vue

@@ -0,0 +1,559 @@
+<template>
+  <div class="login-wrap">
+    <div class="login">
+      <div class="contain">
+        <template v-if="isquit">
+          <div class="tab">
+            <span :class="{active:phone}" @click="alter('phone')" v-show="!forget&&!register">手机登陆</span>
+            <span :class="{active:!phone}" @click="alter('email')" v-show="!forget&&!register">邮箱登陆</span>
+            <span :class="{active:phone}" @click="alter('phone')" v-show="forget&&!register">手机找回</span>
+            <span :class="{active:!phone}" @click="alter('email')" v-show="forget&&!register">邮箱找回</span>
+            <span :class="{active:phone}" @click="alter('phone')" v-show="!forget&&register">手机注册</span>
+            <span :class="{active:!phone}" @click="alter('email')" v-show="!forget&&register">邮箱注册</span>
+          </div>
+          <div class="input-line">
+            <span class="country" v-show="phone">
+              <el-select v-model="areavalue" @change="codechange()">
+                <el-option
+                  v-for="item in options"
+                  :value="item.ch_name"
+                  :key="item.ch_name">
+                </el-option>
+              </el-select>
+            </span>
+            <span class="icon-email" v-show="!phone"><i class="iconfont icon-tubiao01"></i></span>
+            <input type="text" placeholder="请输入您的手机号码" class="input" v-show="phone" v-model="form.mobile">
+            <input type="text" placeholder="请输入您的邮箱" class="input" v-show="!phone" v-model="form.email">
+          </div>
+
+          <div class="verification-line" v-show="(forget&&phone)||register">
+            <input type="text" placeholder="请输入验证码" class="input" v-model="form.code">
+            <button @click="verify()">发送验证码</button>
+          </div>
+
+          <div class="input-line" v-show="!forget">
+            <span class="icon-password"><i class="iconfont icon-mima"></i></span>
+            <input type="password" placeholder="请输入您的密码" class="input" v-model="form.password">
+          </div>
+
+          <div class="input-line" v-show="forget&&phone">
+            <span class="icon-password"><i class="iconfont icon-mima"></i></span>
+            <input type="password" placeholder="请输入您的新密码" class="input" v-model="form.newpassword">
+          </div>
+
+          <div class="input-line" v-show="forget&&phone">
+            <span class="icon-password"><i class="iconfont icon-mima"></i></span>
+            <input type="password" placeholder="请再次输入您的新密码" class="input" v-model="form.againpassword">
+          </div>
+
+          <div class="forget-register">
+            <span class="cursor blue right" @click="alter('forget')" v-show="forget">返回登陆!</span>
+            <span class="cursor" @click="alter('forget')" v-show="!forget&&!register">忘记密码?</span>
+            <span class="cursor blue" @click="alter('register')" v-show="!forget&&!register">立即注册!</span>
+            <div v-show="!forget&&register">
+              <input type="checkbox" id="tip" class="input" v-model="isRead">
+              <span>
+                我已了解
+                <i class="blue cursor" @click="centerDialogVisible = true">风险提示</i>
+                !
+              </span>
+            </div>
+            <span class="cursor blue" @click="alter('register')" v-show="!forget&&register">立即登陆!</span>
+          </div>
+          <div class="submit-line">
+            <el-button type="primary" class="btn" v-show="!forget&&!register" @click="login()">登陆</el-button>
+            <el-button type="primary" class="btn" v-show="!phone&&forget" @click="sendmail()">发送邮件</el-button>
+            <el-button type="primary" class="btn" v-show="phone&&forget" @click="mobileFind()">修改密码</el-button>
+            <el-button type="primary" class="btn" v-show="register" @click="reg()">注册</el-button>
+          </div>
+        </template>
+        <template v-else>
+          <p class="LS">欢迎您,{{username}}!</p>
+          <button class="LS" @click="apply">申请经纪商</button>
+        </template>
+      </div>
+    </div>
+    <el-dialog
+      title="提示"
+      :visible.sync="centerDialogVisible"
+      width="70%"
+      center>
+      <span slot="title" class="dialog-title">
+        FX66平台风险提示及免责声明
+      </span>
+      <span>尊敬的FX66平台用户:<br/>
+由于数字资产具有极高的投资风险,实行7*24小时连续交易,它没有像中国股市有涨跌停限制,且易受外界因素影响,价格波动较大! 比特币不由货币当局发行,不具有法偿性与强制性,请务必在了解数字资产市场风险与风险自担的前提下谨慎、理性投资。<br/>
+
+一、风险提示:
+1 、数字资产市场是全新的、未经确认的,而且可能不会增长。目前,数字资产主要由投机者大量使用,零售和商业市场使用相对较少。因此,数字资产价格易产生波动,并进而对数字资产投资产生不利影响。<br/>
+
+2、因各国法律、法规和规范性文件的制定或者修改,数字资产交易随时可能被暂停、或被禁止。因此造成的经济损失全部由用户自行承担。<br/>
+
+3、用户参与数字资产交易,需承受较高风险。用户应了解和理解此投资有可能导致部分损失或全部损失,所以用户应该以能承受的损失程度来决定投资的金额。用户应了解和理解数字资产会产生衍生风险,所以如有任何疑问,建议先寻求理财顾问的协助。此外,除了上述提及过的风险以外,还会有未能预测的风险存在。<br/>
+
+4 、用户应慎重考虑并用清晰的判断能力去评估自己的财政状况及上述各项风险而作出任何买卖数字资产的决定,并承担由此产生的全部损失,FX66对此不承担任何责任。<br/>
+
+5 、用户了解FX66仅作为用户获取数字资产信息、寻找交易方、就数字资产的交易进行协商及开展交易的场所,FX66不参与用户的任何交易,故用户应自行谨慎判断确定相关数字资产及/或信息的真实性、合法性和有效性,并自行承担因此产生的责任与损失。<br/>
+
+6、 FX66的任何意见、消息、探讨、分析、价格、建议和其他资讯均是一般的市场评论,并不构成投资建议。FX66不承担任何因依赖该资讯直接或间接而产生的损失,包括但不限于任何利润损失。<br/>
+
+7、FX66的内容会随时更改并不作另行通知,FX66已采取合理措施确保网站资讯的准确性,但并不能保证其准确性程度,亦不会承担任何因FX66的资讯或因未能链结互联网、传送或接收任何通知和信息时的延误或失败而直接或间接产生的损失。
+<br/>
+8、使用互联网形式的交易系统亦存有风险,包括但不限于软件,硬件和互联网链结的失败等。由于FX66不能控制互联网的可靠性和可用性,FX66不会对失真,延误和链结失败而承担任何责任。<br/>
+
+二、反洗钱:<br/>
+为了维护金融稳定,防范洗钱风险。FX66将严格遵循相关法律,严格实行账户实名制,防范可能存在的金融风险。<br/>
+
+1、FX66遵守和执行反洗钱法的规定,对用户进行身份识别、客户身份资料和交易记录保存制度,以及大额的和可疑交易报告的制度。<br/>
+
+2、用户注册、挂失交易密码或者资金密码时,应当提供并上传身份证复印件,FX66对用户提供的身份证信息进行识别和比对。FX66有合理的理由怀疑用户使用虚假身份注册时,有权拒绝注册或者注销已经注册的账户。<br/>
+
+3、FX66参照《金融机构大额交易和可疑交易报告管理办法》的规定,保存大额交易和有洗钱嫌疑的交易记录,在监管机构要求提供大额交易和可疑交易的记录时,向监管机构提供。<br/>
+
+4、FX66对用户身份信息以及大额交易、可疑交易记录进行保存,依法协助、配合司法机关和行政执法机关打击洗钱活动,依照法律法规的规定协助司法机关、海关、税务等部门查询、冻结和扣划客户存款。<br/>
+
+5、用户需要承诺在FX66注册的账户为本人操作,提供的所有证件,信息均真实有效。若在验证账户时发现提供的信息为虚假, 伪造或拒绝,虚假陈述资金来源及去向等,FX66有权在不通知用户的情况下冻结账户,并向公安机关举报。<br/>
+
+三、免责声明:<br/>
+1、FX66提供的信息(包括且不限于币种介绍、投资分析报告、预测文章信息及其他评论、数据、图表、指标、理论、直接的或暗示的指示)等仅供参考,FX66力求但不保证信息的准确性、完整。FX66不对因使用本网站全部或部分内容产生的或因依赖本网站内容而引致的任何损失承担任何责任。<br/>
+
+2、FX66可能提供部分与其他网站的链接,前述链接仅为方便您的使用,FX66不对所链接网站的信息的真实性、有效性、合法性承担任何责任。<br/>
+
+3、通过FX66服务购买或获取任何数据、信息或进行交易等行为或替代行为产生的费用及损失,包括但不限于收入损失,交易利润或合同损失,业务中断,预期可节省的货币的损失, 信息的损失,机会、商誉或声誉的损失,数据的损坏或损失,购买替代产品或服务的成本,数字资产消亡或退出市场,任何由于侵权(包括过失)、违约或其他任何原因产生的间接的、特殊的或附带性的损失或损害。<br/>
+
+4、不论在何种情况下,FX66均不对由于信息网络正常的设备维护,信息网络连接故障,电脑、通讯或其他系统的故障,电力故障,罢工,劳动争议,暴乱,起义,骚乱,生产力或生产资料不足,火灾,洪水,风暴,爆炸,战争,政府行为,司法行政机关的命令或第三方的不作为而造成的不能服务或延迟服务承担责任。<br/>
+
+5、基于互联网的特殊性,FX66不担保服务不会受中断,对服务的及时性、安全性都不作担保。FX66力图使用户能对本网站进行安全访问和使用,但FX66不能保证FX66包含的全部信息、程序、文本等完全安全,不受任何病毒、木马等恶意程序的干扰和破坏,故用户登陆、使用FX66任何服务或下载及使用该下载的任何程序、信息、数据等均是用户个人的决定并自行承担风险及可能产生的损失。
+<br/>
+6、基于区块链交易平台的特殊性,FX66力图确保平台 365*24 小时保持在线。但FX66不能保证因 DDoS 攻击、服务器供应商暂停服务、网络供应商暂停服务或其他不可抗力等原因造成网站无法访问,交易大厅无法正常挂单、撤单,已挂单交易未能正常成交,区块链资产充提币长时间未到账等情况。由于以上原因造成用户资产损失的情况,FX66不承担任何责任。<br/>
+
+7、用户有义务妥善保管好用户名和密码。通过用户的用户名和密码编辑、发布的任何信息或做出的任何行为都将被视为是用户自己的行为,对因此产生的任何损失FX66不承担任何责任。<br/>
+
+8、任何非因FX66的原因而引起的与FX66服务有关的其它损失。<br/>
+
+数字货币可能存在矿工预挖、庄家操控、团队解散、技术缺陷等问题,其价格波动较大,可能发生资产归零的风险。因此我们强烈建议您在自身能承受的风险范围内参与数字货币交易。请注意止盈止损,合理评估风险,请勿投入高于个人承受能力的金额! 最终解释权归FX66所有。FX66感谢有您的陪伴!</span>
+      <span slot="footer" class="dialog-footer">
+        
+        <el-button type="primary" @click="centerDialogVisible = false">我已阅读</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+
+
+<script>
+export default {
+  name: 'login',
+  data () {
+    return {
+      options: [],
+      areavalue:'中国',
+      phone:true,
+      forget:false,
+      register:false,
+      enterID:"请输入您的手机号码",
+      centerDialogVisible: false,
+      username:'',
+      isRead:false,
+      form:{
+        mobile:'',
+        email:'',
+        password:'',
+        redirect_uri:'http://33.cn',
+        os:'web',
+        type:'sms',
+        area:'86',
+        platform:'fx66',
+        code:'',
+        newpasswoord:'',
+        againpassword:''
+      }
+    }
+  },
+  props:['isquit'],
+  created(){
+    this.$http.get('https://dev407.33.cn/api/data/country')
+    .then(response=> {
+      this.options=response.data.data
+    })
+    .catch(function (error) {
+      console.log(error);
+    })
+    if (window.localStorage.username) {
+      this.username=window.localStorage.username
+      this.$emit('chuanzhi',this.username)
+    }
+  },
+  methods:{
+    empty(){
+      this.form.mobile=''
+      this.form.email=''
+      this.form.password=''
+    },
+    alter(e){
+      this.empty()
+      if (e=="phone") {
+        this.phone=true
+      }else if (e=="email") {
+        this.phone=false
+      }else if (e=="forget") {
+        this.forget=!this.forget
+      }else if (e=="register") {
+        this.register=!this.register
+      }
+    },
+    apply(){
+      this.$router.push("apply")
+    },
+    codechange(){
+      for(let i in this.options){
+        if (i.ch_name==this.areavalue) {
+          this.form.area=i.code
+        }
+      }
+    },
+    login(){
+      if (this.phone) {
+        let parm = new URLSearchParams()
+        parm.append('mobile',this.form.mobile)
+        parm.append('password',this.form.password)
+        parm.append('redirect_uri',this.form.redirect_uri)
+        parm.append('os',this.form.os)
+        parm.append('type','sms')
+        parm.append('area',this.form.area)
+        parm.append('platform',this.form.platform)
+        this.$http.post('https://dev407.33.cn/api/broker/login',parm)
+        .then(response => {
+          console.log(response);
+          if (response.data.code==200) {
+            this.loginSucceed(response.data.data)
+          }
+          
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+      }else {
+        let parm = new URLSearchParams()
+        parm.append('email',this.form.email)
+        parm.append('password',this.form.password)
+        parm.append('redirect_uri',this.form.redirect_uri)
+        parm.append('os',this.form.os)
+        parm.append('type','email')
+        parm.append('platform',this.form.platform)
+        this.$http.post('https://dev407.33.cn/api/broker/login',parm)
+        .then(response=> {
+          console.log(response);
+          if (response.data.code==200) {
+            this.loginSucceed(response.data.data)
+          }
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+      }
+    },
+    verify(){
+      if(!this.phone&&this.register) {
+        let parm = new URLSearchParams();
+        parm.append('param',"FzmDateTime|FzmRandom")
+        parm.append('email',this.form.email)
+        parm.append('codetype',"validate")
+        parm.append('platkey',"zhaobi")
+        this.$http.post("https://dev407.33.cn/api/send/newmail",parm)
+        .then(response=>{
+          console.log(response);
+        })
+        .catch(error=>{
+          console.log(error)
+        })
+      }else if(this.phone&&this.register){
+        let parm = new URLSearchParams();
+        parm.append('param',"FzmRandom")
+        parm.append('mobile',this.form.mobile)
+        parm.append('codetype',"validate")
+        parm.append('area',this.form.area)
+        parm.append('platkey',"zhaobi")
+        this.$http.post("https://dev407.33.cn/api/send/newsms",parm)
+        .then(response=>{
+          console.log(response)
+        })
+        .catch(error=>{
+          console.log(error)
+        })
+      }else if (this.phone&&this.forget) {
+        let parm = new URLSearchParams();
+        parm.append('codetype',"validate")
+        parm.append('param',"FzmRandom")
+        parm.append('mobile',this.form.mobile)
+        parm.append('area',this.form.area)
+        parm.append('platkey',"zhaobi")
+        this.$http.post("https://dev407.33.cn/api/send/newsms",parm)
+        .then(response=>{
+          console.log(response)
+        })
+        .catch(error=>{
+          console.log(error)
+        })
+      }
+    },
+    reg(){
+      if (this.isRead==false) {
+        alert('请先阅读风险提示')
+      }else{
+        if (!this.phone) {
+          let parm = new URLSearchParams()
+          parm.append('email',this.form.email)
+          parm.append('password',this.form.password)
+          parm.append('code',this.form.code)
+          parm.append('type','email')
+          this.$http.post("https://dev407.33.cn/api/broker/register",parm)
+          .then(response=>{
+            console.log(response);
+          })
+          .catch(error=>{
+            console.log(error)
+          })
+        }else{
+          let parm = new URLSearchParams()
+          parm.append('mobile',this.form.mobile)
+          parm.append('password',this.form.password)
+          parm.append('code',this.form.code)
+          parm.append('type','sms')
+          parm.append('area',this.form.area)
+          this.$http.post("https://dev407.33.cn/api/broker/register",parm)
+          .then(response=>{
+            console.log(response);
+          })
+          .catch(error=>{
+            console.log(error)
+          })
+        }
+      }
+      
+    },
+    sendmail(){
+      let parm = new URLSearchParams()
+      parm.append('email',this.form.email)
+      parm.append('type','email')
+      parm.append('platCode','04031632e48cd96e')
+      parm.append('ticket','')
+      parm.append('businessId','')
+      this.$http.post("https://dev407.33.cn/api/member/brokernewresetpassword",parm)
+      .then(response=>{
+        console.log(response);
+      })
+      .catch(error=>{
+        console.log(error)
+      })
+    },
+    mobileFind(){
+      let parm = new URLSearchParams()
+      parm.append('area',this.form.area)
+      parm.append('mobile',this.form.mobile)
+      parm.append('type','sms')
+      parm.append('broker_code','04031632e48cd96e')
+      parm.append('password',this.form.newpassword)
+      parm.append('password2',this.form.againpassword)
+      parm.append('code',this.form.code)
+      parm.append('os',this.form.os)
+      this.$http.post("https://dev407.33.cn/api/member/brokernewresetpassword",parm)
+      .then(response=>{
+        console.log(response);
+      })
+      .catch(error=>{
+        console.log(error)
+      })
+    },
+    loginSucceed(e){
+      let sto=window.localStorage
+      sto.userid=e.userid
+      sto.username=e.username
+      sto.token=e.access_token
+      this.username=e.username
+      this.$emit('chuanzhi',e.username)
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+	.login-wrap[data-v-b25dc27c]{
+    width: 1200px;
+    margin: 0 auto;
+    position: absolute;
+    left: 50%;
+    top: 0;
+    margin-left: -600px;
+    .login{
+      width: 390px;
+      background-color: rgba(255,255,255,0.4);
+      padding: 15px;
+      position: absolute;
+      right: 0;
+      top: 188px;
+      z-index:50;
+      .contain{
+        background: white;
+        padding: 50px 20px 0;
+        color: #333;
+        .tab{
+          border-bottom: 2px solid #e5e5e5;
+          margin-bottom: 30px;
+          text-align: center;
+          span{
+            display: inline-block;
+            font-size: 20px;
+            color: #333;
+            width: 110px;
+            padding-bottom: 20px;
+            cursor: pointer;
+          }
+          span.active{
+            border-bottom: 2px solid #1a6fa6;
+            margin-bottom: -2px;
+            color: #1a6fa6;
+          }
+        }
+        .input-line{
+          position: relative;
+          width: 310px;
+          height: 50px;
+          line-height: 50px;
+          margin: 0 auto;
+          border:1px solid #dcdcdc;
+          text-align: left;
+          margin-bottom: 10px;
+          .icon-email{
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            text-align: center;
+            border-right: 1px solid #dcdcdc;
+            i{
+              font-size: 24px;
+              color: #ccc;
+            }
+          }
+          .country{
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            text-align: center;
+            border-right: 1px solid #dcdcdc;
+            .el-input__inner{
+              padding-left: 2px;
+              height: 100%;
+              border: none;
+              padding-right: 14px;
+              font-size: 12px;
+            }
+            .el-input__prefix, .el-input__suffix{
+              right: 4px;
+              width: 14px;
+            }
+          }
+          .input{
+            position: absolute;
+            margin-top: 10px;
+            padding-left: 10px;
+            line-height: 30px;
+            border: none;
+            font-size: 14px;
+            width: 250px;
+          }
+          .icon-password{
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            text-align: center;
+            border-right: 1px solid #dcdcdc;
+            i{
+              font-size: 24px;
+              color: #ccc;
+            }
+          }
+        }
+        .verification-line{
+          width: 310px;
+          height: 50px;
+          line-height: 50px;
+          margin: 0 auto 10px;
+          text-align: left;
+          input{
+            border: 1px solid #dcdcdc;
+            height: 50px;
+            padding-left: 10px;
+            line-height: 30px;
+            font-size: 14px;
+          }
+          button{
+            width: 130px;
+            height: 50px;
+            background: #ffe366;
+            border: 0;
+            position: absolute;
+            margin-left: 10px;
+            font-size: 14px;
+            color: #666;
+            cursor: pointer;
+          }
+        }
+        .forget-register{
+          width: 310px;
+          margin: 10px auto 26px;
+          line-height: 1;
+          text-align: left;
+          font-size: 14px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          .cursor{
+            cursor: pointer;
+          }
+          .blue{
+            color: #1a6fa6;
+          }
+          .right{
+            width: 100%;
+            text-align: right;
+          }
+        }
+        .submit-line{
+          padding-bottom: 30px;
+          text-align: center;
+          .btn{
+            width: 150px;
+            height: 50px;
+            font-size: 18px;
+            background: #1a6fa6;
+            color: white;
+            border-radius: 0;
+          }
+        }
+        p.LS{
+          font-size: 25px;
+          color: #1a6fa6;
+          text-align: center;
+        }
+        button.LS{
+          width: 100%;
+          height: 50px;
+          line-height: 50px;
+          border: 1px solid #d2d2d2;
+          background-color: transparent;
+          margin-bottom: 20px;
+          font-size: 18px;
+          margin: 50px 0 65px;
+          cursor: pointer;
+        }
+      }
+    }
+    .dialog-title{
+      font-size: 24px;
+      color: #165e8d;
+    }
+  }
+</style>

+ 14 - 5
src/main.js

@@ -1,17 +1,26 @@
-// The Vue build version to load with the `import` command
-// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+
 import Vue from 'vue'
 import App from './App'
+
 import router from './router'
 import './assets/css/base.css'
-// import  '//at.alicdn.com/t/font_587947_4e7wxdmocu3anhfr.css'
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
+
+import './assets/iconfont/iconfont.css'
+
+import axios from 'axios'
+Vue.prototype.$http = axios;
 
 Vue.config.productionTip = false
 
-/* eslint-disable no-new */
+
 new Vue({
   el: '#app',
   router,
   components: { App },
-  template: '<App/>'
+  template: '<App/>',
+  render: h => h(App)
 })

+ 7 - 3
src/router/index.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
-import hello from '../components/HelloWorld.vue'
-
+import homePage from '../views/homePage.vue'
+import apply from '../views/apply.vue'
 
 Vue.use(Router)
 
@@ -10,7 +10,11 @@ export default new Router({
   routes: [
     {
     	path: '/',
-    	component: hello
+    	component: homePage
+    },
+    {
+    	path: '/apply',
+    	component: apply
     }
   ]
 })

+ 411 - 0
src/views/apply.vue

@@ -0,0 +1,411 @@
+<template>
+  <div class="apply">
+    <div class="banner">
+    	<img src="../assets/img/apply-banner.png">
+    </div>
+		<div class="tab">
+			<el-steps :active="active" finish-status="success" align-center space="306px">
+			  <el-step title="填写申请信息"></el-step>
+			  <el-step title="审核中"></el-step>
+			  <el-step title="审核通过"></el-step>
+			</el-steps>
+		</div>
+		<div class="apply-content">
+			<div class="content-tab">
+				<h2>经纪商申请</h2>
+			</div>
+
+			<template v-if="active!=2">
+				<div class="from-box">
+					<div class="left">
+						<h4>经纪商申请标准:</h4>
+						<h5>经纪商是具有一定资源并能独立运营的公司、机构或团体。</h5>
+						<p>1.经纪商所辖客户交易手续费的一部分作为返佣;</p>
+						<p>2.经纪商可自行设置客户的提款手续费标准;</p>
+						<p>3.经纪商可招募代理商,并在经纪商后台调整代理商返佣标准;</p>
+						<p>4.经纪商所辖客户有不当得利的行为(恶意刷单、利用BUG等),手续费不返还;</p>
+						<p>5.经纪商可在后台查看直发客户及代理客户的交易统计表;</p>
+					</div>
+					<div class="right">
+						<el-form ref="form" :model="applyForm" label-width="138px">
+							<el-form-item label="公司/机构名称:" sizi="small">
+						    <el-input v-model="applyForm.company" placeholder="请输入您所在的公司或者机构名称"></el-input>
+						  </el-form-item>
+
+						  <el-form-item label="姓名:">
+						    <el-input v-model="applyForm.name" placeholder="请输入您的姓名"></el-input>
+						  </el-form-item>
+
+							<el-form-item label="手机号:">
+						    <el-col :span="9">
+						      <el-select v-model="applyForm.region" placeholder="请选择" >
+							      <el-option v-for="item in contury" :label="item.ch_name" :value="item.code" :key="item.code"></el-option>
+							    </el-select>
+							  </el-col>
+								<el-col :span="15">
+							    <el-input v-model="applyForm.phoneNumber" placeholder="请输入您的手机号码"></el-input>
+						    </el-col>
+						  </el-form-item>
+							<el-form-item label="其他联系方式:">
+								<el-input type="textarea" :rows="2" placeholder="请输入您的其他联系方式 如:微信、邮箱等" v-model="applyForm.other">
+								</el-input>
+							</el-form-item>
+							
+							<el-form-item label="所在地:">
+								<el-col :span="9">
+						      <el-select v-model="applyForm.contury" placeholder="所属国家" @change="conturyChange">
+							      <el-option v-for="item in contury" :label="item.ch_name" :value="item.code" :key="item.code"></el-option>
+							    </el-select>
+							  </el-col>
+							  <el-col :span="15">
+						      <el-select v-model="applyForm.province" placeholder="所属省份" :disabled='citydis'>
+							      <el-option v-for="item in city" :label="item.name" :value="item.id" :key="item.id"></el-option>
+							    </el-select>
+							  </el-col>
+							</el-form-item>
+							<el-form-item>
+								<el-button type="primary" @click="apply" :disable='applydis'>立即申请</el-button>
+							</el-form-item>
+						</el-form>
+						<p>
+	            *您好,我们尊重每一个客户的隐私。
+	            一旦提交了以上内容则表明您同意FX66使用以上提供的信息与您联系,为您解答您所咨询的产品及服务。
+	          </p>
+					</div>
+				</div>
+				<div class="contact">
+					<div class="contact-title">
+						<hr>
+						<h3>联系我们 快速申请</h3>
+						<hr>
+					</div>
+					<h4>Feel Free to Contact Us</h4>
+					<ul>
+						<li>
+							<img src="../assets/img/phone.png">
+							<img src="../assets/img/phoneHover.png">
+							<p class="goleft">86-17354718363</p>
+						</li>
+						<li>
+							<img src="../assets/img/wx.png">
+							<img src="../assets/img/wxHover.png">
+							<p>fx66kefu</p>
+							<img class="ewm" src="../assets/img/fx66kefufu.8b7368d.jpg" width="120">
+						</li>
+					</ul>
+				</div>
+			</template>
+			
+			<div class="apply-success" v-else>
+				<img src="../assets/img/success.png" height="46px">
+				<h2>恭喜您,已经成功申请成为经纪商!</h2>
+				<p>您可用现在的账号和密码登录后台!如有疑问,可联系我们!</p>
+				<el-button round>登陆后台</el-button>
+			</div>
+				
+			
+			
+		</div>
+		<contactWe/>
+  </div>
+</template>
+
+<script>
+import contactWe from '../components/contact-we.vue'
+export default {
+  name: 'apply',
+  data () {
+    return {
+      active: 0,
+      contury:[],
+      city:[],
+      citydis:true,
+      applydis:false,
+      applyForm: {
+      	company:'',
+        name: '',
+        region: '',
+        phoneNumber: '',
+        other: '',
+        contury:'',
+        province:''
+      }
+    }
+  },
+  components:{
+  	contactWe
+  },
+  mounted(){
+  	if (!window.localStorage.username) {
+  		alert('请先登陆')
+  		this.$router.push('/')
+  	}else{
+  		this.$http.get("https://dev407.33.cn/api/broker/applystatus",{
+  			headers:{
+  				Authorization:'Bearer '+window.localStorage.token
+  			}
+  		})
+  		.then(response=>{
+  			if (response.data.data.isApplyed==0) {
+  				this.active=0
+  			}else if (response.data.data.isApplyed==1&&response.data.data.info.status==0) {
+  				this.active=1
+  				this.applyForm.company=response.data.data.info.company
+  				this.applyForm.name=response.data.data.info.contacts
+  				this.applyForm.region=response.data.data.info.mobile_area
+  				this.applyForm.phoneNumber=response.data.data.info.mobile
+  				this.applyForm.other=response.data.data.info.other
+  				this.applyForm.contury=response.data.data.info.contury
+  				this.applyForm.province=response.data.data.info.area
+  				this.applydis=true
+  			}else if (response.data.data.isApplyed==1&&response.data.data.info.status==1) {
+  				this.active=2
+  			}else if(response.data.data.isApplyed==1&&response.data.data.info.status==-1) {
+  				this.active=0
+  			}
+  		})
+  		this.$http.get('https://dev407.33.cn/api/data/country')
+  		.then(response=>{
+  			this.contury=response.data.data
+  		})
+  		this.$http.get('https://dev407.33.cn/api/data/city')
+  		.then(response=>{
+  			this.city=response.data.data
+  		})
+  	}
+  },
+  methods:{
+  	conturyChange(){
+  		if (this.applyForm.contury=='86') {
+  			this.citydis=false
+  		}else {
+  			this.citydis=true
+  			this.applyForm.province=''
+  		}
+  	},
+  	apply(){
+  		let parm = new URLSearchParams()
+  		parm.append('company',this.applyForm.company)
+  		parm.append('contacts',this.applyForm.name)
+  		parm.append('mobile',this.applyForm.phoneNumber)
+  		parm.append('other',this.applyForm.other)
+  		parm.append('country',this.applyForm.contury)
+  		parm.append('area',this.applyForm.province)
+  		parm.append('mobile_area',this.applyForm.region)
+  		this.$http.post('https://dev407.33.cn/api/broker/apply',{
+  			headers:{
+  				Authorization:'Bearer '+window.localStorage.token
+  			},
+  			data:parm
+  		})	
+  		.then(response=>{
+  			if (response.data.code='200') {
+  				alert('申请成功')
+  				this.active=1
+  				this.applydis=true
+  			}
+  		})
+  	}
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+	.apply{
+		padding-top: 75px;
+		.banner{
+			height: 400px;
+			overflow: hidden;
+			img{
+				height: 100%;
+				position: relative;
+				left: 50%;
+				transform: translateX(-50%);
+			}
+		}
+		.tab{
+			width: 1200px;
+			background: #fff;
+			margin: 0 auto 10px;
+			height: 110px;
+			padding-left: 130px;
+			padding-top: 20px;
+
+		}
+		.apply-content{
+			width: 1200px;
+			margin: 0 auto 20px;
+			background: white;
+			.content-tab{
+				border-bottom: 1px solid #e5e5e5;
+				margin-bottom: 50px;
+				height: 80px;
+				h2{
+					font-size: 24px;
+					line-height: 80px;
+					font-weight: 700;
+					text-align: center;
+				}
+			}
+			.from-box{
+				margin: 0 75px;
+				color: #333;
+				display: flex;
+				.left{
+					height: 320px;
+					width: 530px;
+					border: 1px solid #e5e5e5;
+					padding: 20px;
+					position: relative;
+					h4{
+						font-size: 16px;
+						line-height: 1;
+					}
+					h5{
+						font-size: 14px;
+						margin-top: 20px;
+						color: #0176c3;
+					}
+					p{
+						margin-top: 20px;
+    				font-size: 14px;
+					}
+					&::after{
+						content: "";
+				    position: absolute;
+				    top: 50%;
+				    right: -8px;
+				    transform: translateY(-50%);
+				    display: block;
+				    border-left: 8px solid #fff;
+				    border-top: 8px solid transparent;
+				    border-bottom: 8px solid transparent;
+				    z-index: 99;
+					}
+					&::before{
+						content: "";
+				    position: absolute;
+				    top: 50%;
+				    right: -10px;
+				    transform: translateY(-50%);
+				    display: block;
+				    border-left: 10px solid #e5e5e5;
+				    border-top: 10px solid transparent;
+				    border-bottom: 10px solid transparent;
+					}
+				}
+				.right{
+					width: 480px;
+					margin-left: 40px;
+					.el-input__inner{
+						height: 36px!important;
+					}
+					.el-form-item__label{
+						line-height: 36px;
+					}
+					.el-form-item__content{
+						line-height: 36px;
+					}
+					.el-button--primary{
+						width: 100%;
+						color: white;
+						background: #0176c3;
+						border: none;
+						border-radius: 0;
+						height: 40px;
+					}
+					p{
+					  padding-left: 28px;
+				    color: #3884d3;
+				    font-size: 14px;
+					}
+				}
+			}
+			.contact{
+			  position: relative;
+		    width: 1200px;
+		    margin: 0 auto;
+		    padding-top: 50px;
+		    text-align: center;
+		    .contact-title{
+					display: flex;
+			    align-items: center;
+			    justify-content: space-between;
+			    hr{
+			    	width: 420px;
+				    height: 1px;
+				    background-color: #e5e5e5;
+				    border: 0;
+			    }
+			    h3{
+			    	font-size: 25px;
+				    font-weight: 700;
+				    line-height: 1;
+			    }
+		    }
+		    h4{
+		    	font-size: 16px;
+			    color: #999;
+			    margin-top: 12px;
+		    }
+		    ul{
+		    	margin-top: 50px;
+			    padding: 0 400px 70px;
+			    display: flex;
+			    justify-content: space-between;
+			    li{
+			    	width: 120px;
+			    	img{
+				    	margin-bottom: 20px;
+				    }
+				    p{
+				    	font-size: 20px;
+				    	line-height: 1;
+				    	white-space:nowrap;
+				    }
+				    .goleft{
+				    	margin-left: -15px;
+				    }
+				    img:nth-child(2){
+							display: none;
+				    }
+				    &:hover img:nth-child(2){
+							display: inline-block;
+				    }
+				    &:hover img:nth-child(1){
+							display: none;
+				    }
+				    .ewm{
+				    	display: none;
+				    	position: absolute;
+					    top: 150px;
+					    right: 240px;
+				    }
+			    }
+			    li:nth-child(2):hover .ewm{
+			    	display: inline-block;
+			    }
+		    }
+			}
+			.apply-success{
+				width: 1200px;
+				margin: 30px auto 0;
+				text-align: center;
+				h2{
+					font-size: 25px;
+					margin-top: 30px;
+				}
+				p{
+					font-size: 14px;
+					color: #999999;
+					margin-top: 30px;
+					margin-bottom: 30px;
+				}
+				.el-button{
+					font-weight: 700;
+				}
+			}
+		}
+	}
+</style>

+ 660 - 0
src/views/homePage.vue

@@ -0,0 +1,660 @@
+<template>
+  <div class="homePage">
+    <div class="banner">
+    	<el-carousel height="900px" arrow='never' indicator-position='none'>
+        <el-carousel-item v-for="item in 3" :key="item">
+          <div v-bind:class="{'banner1':item==1,'banner2':item==2,'banner3':item==3}">
+            
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+      <div class="bottom-line">
+        <span class="btn" @click="apply">申请代理</span>
+        <span class="tel">热线电话:4001-566-899</span>
+      </div>
+      <login @chuanzhi="chuanzhi" :isquit='isquit'></login>
+    </div>
+
+    <div class="coin-block">
+      <div class="coin-title">
+        <h1>主流交易币种</h1>
+        <h2>Mainstream Trading Crypto-currency</h2>
+        <div class="underline"></div>
+      </div>
+      <div class="coin-content">
+        <ul>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-BTC1 icon"></div>
+              <p>BTC( 比特币 )</p>
+            </div>
+          </li>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-bty1 icon"></div>
+              <p>BTY( 比特元 )</p>
+            </div>
+          </li>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-BCC1 icon"></div>
+              <p>BCC( 比特现金 )</p>
+            </div>
+          </li>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-ETH1 icon"></div>
+              <p>ETH( 以太坊 )</p>
+            </div>
+          </li>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-ETC1 icon"></div>
+              <p>ETC( 以太坊经典 )</p>
+            </div>
+          </li>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-ZEC1 icon"></div>
+              <p>ZEC( 零币 )</p>
+            </div>
+          </li>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-LTC1 icon"></div>
+              <p>LTC( 莱特币 )</p>
+            </div>
+          </li>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-BTS1 icon"></div>
+              <p>BTS( 比特股 )</p>
+            </div>
+          </li>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-SC1 icon"></div>
+              <p>SC( 云储币 )</p>
+            </div>
+          </li>
+          <li>
+            <div class="smallBox">
+              <div class="iconfont icon-DCR3 icon"></div>
+              <p>DCR( 德信币 )</p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="join">
+      <div class="title">
+        <hr>
+        <h1>加入我们,可以获得</h1>
+        <hr>
+      </div>
+      <h2>To join our agent you will gain the following advantages</h2>
+      <div class="content">
+        <div class="line">
+          <div class="line-item">
+            <h4>超高返佣</h4>
+            <h5>High commission</h5>
+            <p>推荐FX66给他人,可以获取被推荐人等比例的交易手续费做为佣金。</p>
+            <img src="../assets/img/add01.png">
+            <div class="apply-btn">
+              <span>立即申请经纪商</span>
+              <i class="el-icon-arrow-right"></i>
+            </div>
+          </div>
+          <div class="line-item">
+            <h4>VIP奖励</h4>
+            <h5>VIP rewards</h5>
+            <p>每个经纪商都会有相应的业绩排名,凡是每个月业绩排名靠前者,均可以得到我们平台的VIP级别奖励。</p>
+            <img src="../assets/img/add02.png">
+            <div class="apply-btn">
+              <span>立即申请经纪商</span>
+              <i class="el-icon-arrow-right"></i>
+            </div>
+          </div>
+        </div>
+
+        <div class="line">
+          <div class="line-item">
+            <h4>市场支持</h4>
+            <h5>Marketing support</h5>
+            <p>FX66经纪商可以使用我们所可以提供的全部交易工具和交易资源,并且会在市场宣传方面给予相应的支持!</p>
+            <img src="../assets/img/add03.png">
+            <div class="apply-btn">
+              <span>立即申请经纪商</span>
+              <i class="el-icon-arrow-right"></i>
+            </div>
+          </div>
+          <div class="line-item">
+            <h4>技术支持</h4>
+            <h5>Technical support</h5>
+            <p>我们拥有强大的技术开发团队,可以制定符合客户营销特点的网站,只收成本费。</p>
+            <img src="../assets/img/add04.png">
+            <div class="apply-btn">
+              <span>立即申请经纪商</span>
+              <i class="el-icon-arrow-right"></i>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="plat">
+      <div class="plat-back">
+        <div class="word-box">
+          <img src="../assets/img/platBlock.png">
+          <div class="left">
+            <p class="word1">专业严谨</p>
+            <p class="word2">的交易平台</p>
+            <p class="word3">
+              Professional and rigorous trading<br>
+              platform
+            </p>
+            <hr>
+          </div>
+          <p class="right">
+            <span>FX66是基于区块链底层技术的数字资产交易所,</span>
+            <span>拥有撮合交易系统低延迟、高并发的核心技术</span>
+            <span>勇于突破传统交易所的局限,</span>
+            <span>把交易、资产写入区块链当中。</span>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="service">
+      <div class="title">
+        <hr>
+        <h3>全方位 一站式服务</h3>
+        <hr>
+      </div>
+      <h4>All-around one-stop service</h4>
+      <ul class="service-list">
+        <li>
+          <div class="item">
+            <i class="iconfont icon-shandian"></i>
+          </div>
+          <div class="item2">
+            FX66具备一键交易功能,<br>闪电交易,专业快捷!
+          </div>
+        </li>
+        <li>
+          <div class="item">
+            <i class="iconfont icon-shouji"></i>
+          </div>
+          <div class="item2">
+            手机客户端,<br>随时随地,紧跟市场!
+          </div>
+        </li>
+        <li>
+          <div class="item">
+            <i class="iconfont icon-jiazhipinggu-"></i>
+          </div>
+          <div class="item2">
+            专业分析指导,<br>价值评估市场!
+          </div>
+        </li>
+        <li>
+          <div class="item">
+            <i class="iconfont icon-kefu1"></i>
+          </div>
+          <div class="item2">
+           新手帮帮帮,<br>一小时教您炒币入门
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div class="bottom-shadow" v-bind:class="{flex:isFlex}">
+      <div class="btn" @click='apply'>申请经纪商</div>
+      <span>热线电话:+86 173 5471 8363</span>
+    </div>
+
+    <contactWe/>
+  </div>
+</template>
+
+<script>
+import login from '../components/login.vue'
+import contactWe from '../components/contact-we.vue'
+export default {
+  name: 'homePage',
+  data () {
+    return {
+      isFlex: false
+    }
+  },
+  props:['isquit'],
+  components:{
+    login,contactWe
+  },
+  methods:{
+    bottomShadow(){
+      let t = document.documentElement.scrollTop || document.body.scrollTop
+      if (t>850) {
+        this.isFlex=true
+      }else {
+        this.isFlex=false
+      }
+    },
+    chuanzhi(data){
+      this.$emit('chuanzhi',data)
+    },
+    apply(){
+      if (window.localStorage.username) {
+        this.$router.push('/apply')
+      }else{
+        alert('请先登陆')
+      }
+    }
+  },
+  mounted(){
+    window.addEventListener('scroll',this.bottomShadow, false)
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.homePage{
+    .banner{
+      position: relative;
+      .banner1{
+        background: url('../assets/img/banner1.png');
+        background-size:auto 100%;
+        height: 900px;
+        background-position: center;
+      }
+      .banner2{
+        background: url('../assets/img/banner2.png');
+        background-size:auto 100%;
+        height: 900px;
+        background-position: center;
+      }
+      .banner3{
+        background: url('../assets/img/banner3.png');
+        background-size:auto 100%;
+        height: 900px;
+        background-position: center;
+      }
+      .bottom-line{
+        height: 100px;
+        background-color: rgba(0,0,0,.5);
+        width: 100%;
+        line-height: 100px;
+        margin: 0 auto;
+        position: absolute;
+        top: 800px;
+        z-index: 99;
+        text-align: center;
+        .btn{
+          display: inline-block;
+          width: 140px;
+          height: 40px;
+          line-height: 40px;
+          border-radius: 20px;
+          font-size: 18px;
+          font-weight: bold;
+          margin-right: 60px;
+          color: white;
+          background: #1a6fa6;
+          cursor: pointer;
+        }
+        .tel{
+          color: #fff;
+          font-size: 25px;
+          font-weight: bold;
+        }
+      }
+    }
+    .coin-block{
+      height: 900px;
+      background: url('../assets/img/coinBg.png') no-repeat bottom;
+
+      .coin-title{
+        padding-top: 78px;
+        text-align: center;
+        h1{
+          font-size: 35px;
+          font-weight: 700;
+          color: #333;
+        }
+        h2{
+          font-size: 20px;
+          color: hsla(0,0%,60%,.8);
+          margin-top: 12px;
+        }
+        .underline{
+          width: 60px;
+          height: 2px;
+          margin: 20px auto 0;
+          background-color: #1a6fa6;
+        }
+      }
+      .coin-content{
+        width: 1200px;
+        margin: 80px auto 0;
+        ul{
+          width: 915px;
+          height:363px;
+          margin: 0 auto;
+          li{
+            width: 180px;
+            height: 180px;
+            background-color: #fff;
+            display: inline-block;
+            float: left;
+            margin-right: 3px;
+            margin-bottom: 3px;
+            .smallBox{
+              height: 100%;
+              width: 100%;
+              text-align: center; 
+              .icon{
+                font-size: 62px;
+                margin-top: 30px;
+                margin-bottom: 30px;
+                color: #1a6fa6;
+              }
+              p{
+                font-size: 20px;
+                color: #999;
+              }
+            }
+          }
+        }
+      }
+    }
+    .join{
+      width: 1200px;
+      margin: 0 auto;
+      padding-top: 60px;
+      height: 900px;
+      .title{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        hr{
+          width: 420px;
+          height: 1px;
+          background-color: #e5e5e5;
+          border: 0;
+        }
+        h1{
+          font-size: 35px;
+          font-weight: 700;
+          line-height: 35px;
+        }
+      }
+      h2{
+        font-size: 20px;
+        color: #999;
+        margin-top: 12px;
+        text-align: center;
+        font-weight: 500;
+      }
+      .content{
+        .line{
+          margin-top: 80px;
+          display: flex;
+          .line-item{
+            position: relative;
+            text-align: left;
+            width: 430px;
+            height: 250px;
+            border:1px solid #eee;
+            color: #333;
+            padding: 32px 0 0 20px;
+            background-color: #fff;
+            &:first-child{
+              margin-right: 200px;
+            }
+            &:hover{
+              border:1px solid #1a6fa6;
+              border-left:3px solid #1a6fa6;
+              box-shadow: 0 0 20px 1px #e5e5e5;
+            }
+            &:hover .apply-btn{
+              display: block;
+            }
+            h4{
+              font-size: 25px;
+              font-weight: bold;
+              line-height: 1;
+            }
+            h5{
+              font-size: 20px;
+              line-height: 1;
+              color: #999;
+              font-weight: 500;
+              margin-top: 10px;
+              margin-bottom: 40px;
+            }
+            p{
+              width: 255px;
+              font-size: 15px;
+            }
+            img{
+              position: absolute;
+              top:20px;
+              right: -135px;
+              width: 270px;
+            }
+            .apply-btn{
+              display: none;
+              position: absolute;
+              bottom:-22px;
+              width: 170px;
+              height: 45px;
+              background-color: #1a6fa6;
+              color: #fff;
+              padding-left: 18px;
+              cursor: pointer;
+              span{
+                line-height: 45px;
+                font-size: 15px;
+              }
+              i{
+                display: inline-block;
+                width: 45px;
+                height: 45px;
+                text-align: center;
+                line-height: 45px;
+                font-size: 16px;
+                position: absolute;
+                right: 0;
+                top: 0;
+                background-color: #2580bb;
+              }
+            }
+          }
+        }
+      }
+    }
+    .plat{
+      height: 900px;
+      background: url('../assets/img/platBg.png') no-repeat center;
+      background-size: auto 100%;
+      min-width: 1200px;
+      position: relative;
+      .plat-back{
+        width: 100%;
+        height: 458px;
+        position: absolute;
+        bottom: 0;
+        .word-box{
+          width: 1200px;
+          height: 250px;
+          position: absolute;
+          left:50%;
+          transform: translateX(-50%);
+          bottom: 85px;
+          background-color:rgba(2,134,219,0.83);
+          padding-left: 195px;
+          text-align: left;
+          color: #fff;
+        }
+        img{
+          position: absolute;
+          top: -37px;
+          left: 158px;
+        }
+        .left{
+          line-height: 1;
+          .word1{
+            font-size: 35px;
+            margin-top: 30px;
+            font-weight: 700;
+          }
+          .word2{
+            font-size: 24px;
+            margin-left: 80px;
+            margin-top: 10px;
+            font-weight: 700;
+          }
+          .word3{
+            margin-top: 16px;
+            font-size: 12px;
+            line-height: 1.5;
+          }
+          hr{
+            width: 45px;
+            height: 2px;
+            background: #fff;
+            margin-top: 20px;
+            border: none;
+          }
+        }
+        .right{
+          position: absolute;
+          width: 400px;
+          right: 250px;
+          top:56px;
+          font-size: 18px;
+          text-align: center;
+          line-height: 1.6;
+          span{
+            display: block;
+            padding: 5px 0;
+          }
+        }
+      }
+    }
+    .service{
+      width: 1200px;
+      height: 600px;
+      margin: 0 auto;
+      padding-top: 68px;
+      .title{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        hr{
+          width: 420px;
+          height: 1px;
+          background-color: #e5e5e5;
+          border: none;
+        }
+        h3{
+          font-size: 35px;
+          font-weight: 700;
+          line-height: 1;
+        }
+      }
+      h4{
+        font-size: 20px;
+        color: #999;
+        margin-top: 12px;
+        text-align: center;
+      }
+      .service-list{
+        margin-top: 80px;
+        display: -webkit-flex;
+        display: -moz-flex;
+        display: -ms-flex;
+        display: -o-flex;
+        display: flex;
+        justify-content: center;
+        li{
+          border: 1px solid #dcdcdc;
+          width: 176px;
+          height: 176px;
+          transform: rotate(45deg);
+          margin-right: 72px;
+          background-color: #fff;
+          .item{
+            width: 100%;
+            height: 100%;
+            line-height: 176px;
+            text-align: center;
+            transform: rotate(-45deg);
+            i{
+              font-size: 60px;
+              color: #2580bb;
+            }
+          }
+          .item2{
+            width: 100%;
+            height: 100%;
+            display: none;
+            justify-content: center;
+            align-items: center;
+            transform: rotate(-45deg);
+            color: #fff;
+            font-size: 15px;
+          }
+          &:hover .item2{
+            display: flex;
+          }
+          &:hover .item{
+            display: none;
+          }
+          &:hover{
+            background: #1a6fa6;
+          }
+        }
+        
+      }
+    }
+    .bottom-shadow {
+      position: fixed;
+      bottom: -1px;
+      height: 80px;
+      background-color: rgba(0,0,0,0.6);
+      z-index: 11;
+      width: 100%;
+      margin: 0 auto;
+      justify-content: center;
+      align-items: center;
+      display: none;
+      &.flex{
+        display: flex;
+      }
+      .btn{
+        width: 140px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 20px;
+        border: 0;
+        font-size: 18px;
+        font-weight: 700;
+        margin-right: 60px;
+        cursor: pointer;
+        background-color: #1a6fa6;
+        color: #fff;
+      }
+      span{
+        line-height: 80px;
+        color: #fff;
+        font-size: 25px;
+        font-weight: 700;
+      }
+    }
+	}
+</style>

この差分においてかなりの量のファイルが変更されているため、一部のファイルを表示していません