商业帝国页面更新

src/assets/iconfont/demo_index.html

@@ -690,6 +690,18 @@
                 <div class="code-name">&amp;#xe601;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe66b;</span>
+                <div class="name">等级</div>
+                <div class="code-name">&amp;#xe66b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6ad;</span>
+                <div class="name">等级_个人</div>
+                <div class="code-name">&amp;#xe6ad;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe744;</span>
                 <div class="name">开关 switch-正确</div>
@@ -702,6 +714,12 @@
                 <div class="code-name">&amp;#xe63c;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe6e7;</span>
+                <div class="name">团队</div>
+                <div class="code-name">&amp;#xe6e7;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xeb66;</span>
                 <div class="name">数据看板</div>
@@ -714,6 +732,18 @@
                 <div class="code-name">&amp;#xeb67;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe890;</span>
+                <div class="name">90-皇冠</div>
+                <div class="code-name">&amp;#xe890;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66c;</span>
+                <div class="name">等级</div>
+                <div class="code-name">&amp;#xe66c;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe62e;</span>
                 <div class="name">邮件</div>
@@ -888,6 +918,12 @@
                 <div class="code-name">&amp;#xe612;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe66a;</span>
+                <div class="name">钱</div>
+                <div class="code-name">&amp;#xe66a;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe61a;</span>
                 <div class="name">excel</div>
@@ -954,6 +990,12 @@
                 <div class="code-name">&amp;#xe64b;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c1;</span>
+                <div class="name">用户</div>
+                <div class="code-name">&amp;#xe6c1;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe615;</span>
                 <div class="name">关  闭</div>
@@ -1044,6 +1086,12 @@
                 <div class="code-name">&amp;#xe666;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe74f;</span>
+                <div class="name">会员等级 金钻</div>
+                <div class="code-name">&amp;#xe74f;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe686;</span>
                 <div class="name">标签</div>
@@ -1116,6 +1164,12 @@
                 <div class="code-name">&amp;#xe6be;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe6dc;</span>
+                <div class="name">收益率测算</div>
+                <div class="code-name">&amp;#xe6dc;</div>
+              </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="unicode-">Unicode 引用</h2>
@@ -2156,6 +2210,24 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-dengji"></span>
+            <div class="name">
+              等级
+            </div>
+            <div class="code-name">.icon-dengji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dengji_geren"></span>
+            <div class="name">
+              等级_个人
+            </div>
+            <div class="code-name">.icon-dengji_geren
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-kaiguanswitch-zhengque"></span>
             <div class="name">
@@ -2174,6 +2246,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-tuandui"></span>
+            <div class="name">
+              团队
+            </div>
+            <div class="code-name">.icon-tuandui
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-shujukanban"></span>
             <div class="name">
@@ -2192,6 +2273,24 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon--huangguan"></span>
+            <div class="name">
+              90-皇冠
+            </div>
+            <div class="code-name">.icon--huangguan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-grade"></span>
+            <div class="name">
+              等级
+            </div>
+            <div class="code-name">.icon-grade
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-youjian"></span>
             <div class="name">
@@ -2453,6 +2552,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-qian"></span>
+            <div class="name">
+              钱
+            </div>
+            <div class="code-name">.icon-qian
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-excel"></span>
             <div class="name">
@@ -2552,6 +2660,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-yonghu"></span>
+            <div class="name">
+              用户
+            </div>
+            <div class="code-name">.icon-yonghu
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-guanbi1"></span>
             <div class="name">
@@ -2687,6 +2804,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-huiyuandengjijinzuan"></span>
+            <div class="name">
+              会员等级 金钻
+            </div>
+            <div class="code-name">.icon-huiyuandengjijinzuan
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-biaoqian1"></span>
             <div class="name">
@@ -2795,6 +2921,15 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-shouyishuaicesuan"></span>
+            <div class="name">
+              收益率测算
+            </div>
+            <div class="code-name">.icon-shouyishuaicesuan
+            </div>
+          </li>
+          
         </ul>
         <div class="article markdown">
         <h2 id="font-class-">font-class 引用</h2>
@@ -3704,6 +3839,22 @@
                 <div class="code-name">#icon-caigou</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dengji"></use>
+                </svg>
+                <div class="name">等级</div>
+                <div class="code-name">#icon-dengji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dengji_geren"></use>
+                </svg>
+                <div class="name">等级_个人</div>
+                <div class="code-name">#icon-dengji_geren</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-kaiguanswitch-zhengque"></use>
@@ -3720,6 +3871,14 @@
                 <div class="code-name">#icon-jiangpai-2</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-tuandui"></use>
+                </svg>
+                <div class="name">团队</div>
+                <div class="code-name">#icon-tuandui</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-shujukanban"></use>
@@ -3736,6 +3895,22 @@
                 <div class="code-name">#icon-yingyongguanli</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon--huangguan"></use>
+                </svg>
+                <div class="name">90-皇冠</div>
+                <div class="code-name">#icon--huangguan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-grade"></use>
+                </svg>
+                <div class="name">等级</div>
+                <div class="code-name">#icon-grade</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-youjian"></use>
@@ -3968,6 +4143,14 @@
                 <div class="code-name">#icon-caiwuguanli</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qian"></use>
+                </svg>
+                <div class="name">钱</div>
+                <div class="code-name">#icon-qian</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-excel"></use>
@@ -4056,6 +4239,14 @@
                 <div class="code-name">#icon-guanyu</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yonghu"></use>
+                </svg>
+                <div class="name">用户</div>
+                <div class="code-name">#icon-yonghu</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-guanbi1"></use>
@@ -4176,6 +4367,14 @@
                 <div class="code-name">#icon-zhiling1</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huiyuandengjijinzuan"></use>
+                </svg>
+                <div class="name">会员等级 金钻</div>
+                <div class="code-name">#icon-huiyuandengjijinzuan</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-biaoqian1"></use>
@@ -4272,6 +4471,14 @@
                 <div class="code-name">#icon-tianjiatupian</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouyishuaicesuan"></use>
+                </svg>
+                <div class="name">收益率测算</div>
+                <div class="code-name">#icon-shouyishuaicesuan</div>
+            </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="symbol-">Symbol 引用</h2>

src/assets/iconfont/iconfont.json

@@ -775,6 +775,20 @@
       "unicode": "e601",
       "unicode_decimal": 58881
     },
+    {
+      "icon_id": "3615321",
+      "name": "等级",
+      "font_class": "dengji",
+      "unicode": "e66b",
+      "unicode_decimal": 58987
+    },
+    {
+      "icon_id": "3643377",
+      "name": "等级_个人",
+      "font_class": "dengji_geren",
+      "unicode": "e6ad",
+      "unicode_decimal": 59053
+    },
     {
       "icon_id": "3666412",
       "name": "开关 switch-正确",
@@ -789,6 +803,13 @@
       "unicode": "e63c",
       "unicode_decimal": 58940
     },
+    {
+      "icon_id": "3843478",
+      "name": "团队",
+      "font_class": "tuandui",
+      "unicode": "e6e7",
+      "unicode_decimal": 59111
+    },
     {
       "icon_id": "3868281",
       "name": "数据看板",
@@ -803,6 +824,20 @@
       "unicode": "eb67",
       "unicode_decimal": 60263
     },
+    {
+      "icon_id": "3901489",
+      "name": "90-皇冠",
+      "font_class": "-huangguan",
+      "unicode": "e890",
+      "unicode_decimal": 59536
+    },
+    {
+      "icon_id": "3933786",
+      "name": "等级",
+      "font_class": "grade",
+      "unicode": "e66c",
+      "unicode_decimal": 58988
+    },
     {
       "icon_id": "4186486",
       "name": "邮件",
@@ -1006,6 +1041,13 @@
       "unicode": "e612",
       "unicode_decimal": 58898
     },
+    {
+      "icon_id": "5923294",
+      "name": "钱",
+      "font_class": "qian",
+      "unicode": "e66a",
+      "unicode_decimal": 58986
+    },
     {
       "icon_id": "6220564",
       "name": "excel",
@@ -1083,6 +1125,13 @@
       "unicode": "e64b",
       "unicode_decimal": 58955
     },
+    {
+      "icon_id": "6753950",
+      "name": "用户",
+      "font_class": "yonghu",
+      "unicode": "e6c1",
+      "unicode_decimal": 59073
+    },
     {
       "icon_id": "6795058",
       "name": "关  闭",
@@ -1188,6 +1237,13 @@
       "unicode": "e666",
       "unicode_decimal": 58982
     },
+    {
+      "icon_id": "8436741",
+      "name": "会员等级 金钻",
+      "font_class": "huiyuandengjijinzuan",
+      "unicode": "e74f",
+      "unicode_decimal": 59215
+    },
     {
       "icon_id": "8682261",
       "name": "标签",
@@ -1271,6 +1327,13 @@
       "font_class": "tianjiatupian",
       "unicode": "e6be",
       "unicode_decimal": 59070
+    },
+    {
+      "icon_id": "10319856",
+      "name": "收益率测算",
+      "font_class": "shouyishuaicesuan",
+      "unicode": "e6dc",
+      "unicode_decimal": 59100
     }
   ]
 }

src/pages/shangye/symarket.vue

@@ -0,0 +1,276 @@
+<template>
+  <div>
+    <!-- 顶部用户信息 -->
+    <div style="padding:30px 5px 10px 5px;background-color:#c6dbee ">
+      <div style="display:flex;align-items: center">
+        <div style="color:#666;background-color:#bababa;width:50%;border-radius: 15px;overflow:hidden;height:100%;font-size:16px;
+          line-height:19px">
+
+          <div
+            style="color:#666;background-color:#0eafff;text-align:left;color:#fff;font-weight:bold;height:100%;display:flex;align-items: center"
+            :style="jdtwidth(70)">
+            <div style="margin-left:5px;font-size:16px;flex:0 0 70px;">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-grade"></use>
+              </svg>
+              学徒</div>
+            <div>210/300</div>
+          </div>
+        </div>
+
+        <div style="font-size:16px;margin-left:15%;background-color:#bababa;color:#fff;font-weight:bold;padding:0 15px 0 0 ;border-radius: 25px;
+          line-height:19px">
+          <svg class="icon" aria-hidden="true" style="font-size:16px;margin-left:2px">
+            <use xlink:href="#icon-qian"></use>
+          </svg>
+          <span style="margin-left:5px">
+            1234
+          </span>
+        </div>
+      </div>
+      <div style="display:flex;align-items: center">
+        <div style="flex:0 0 65%">
+          <div style="font-size:18px;font-weight:bold;color:#fff;text-shadow:1px 1px 0px #666">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-yonghu"></use>
+            </svg>
+            灭曱甴大队长</div>
+          <div style="font-size:13px;color:#888;margin-left:25px">ID:13600136000</div>
+        </div>
+        <div style="font-size:12px;color:#666">
+          <div> <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon--huangguan"></use>
+            </svg>
+            团队级别：50人</div>
+          <div><svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-shouyishuaicesuan"></use>
+            </svg>
+            推广收益：234</div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <img src="../../assets/symarket.jpg" class="bgpic"></img>
+    </div>
+
+<!-- 这里的margin:0 0 204px 0 只是为了截效果图时用，实际开发时请删除 -->
+    <div style="margin:0 0 200px 0">
+
+      <div class="card bgorange">
+        <div class="touxiang"><img src="../../assets/touxiang_2.jpg" class="bgpic"></img></div>
+        <div class="info">
+          <div class="info_title">主管</div>
+          <div class="info_value">预约时间：11:00~11:10</div>
+          <div class="info_value">要求经验：100~999</div>
+          <div class="info_value">职位收益：2天 / 5%</div>
+        </div>
+        <div class="book bookorange">
+          <div>$99</div>
+          <div>预约</div>
+        </div>
+      </div>
+
+
+      <div class="card bgred">
+        <div class="touxiang"><img src="../../assets/touxiang_3.jpg" class="bgpic"></img></div>
+        <div class="info">
+          <div class="info_title">经理</div>
+          <div class="info_value">预约时间：12:00~12:10</div>
+          <div class="info_value">要求经验：1000~1999</div>
+          <div class="info_value">职位收益：3天 / 20%</div>
+        </div>
+        <div class="book bookred">
+          <div>$399</div>
+          <div>预约</div>
+        </div>
+      </div>
+
+      <div class="card bgzhi">
+        <div class="touxiang"><img src="../../assets/touxiang_1.jpg" class="bgpic"></img></div>
+        <div class="info">
+          <div class="info_title">总裁</div>
+          <div class="info_value">预约时间：13:00~13:10</div>
+          <div class="info_value">要求经验：2000~9999</div>
+          <div class="info_value">职位收益：4天 / 35%</div>
+        </div>
+        <div class="book bookzhi">
+          <div>$899</div>
+          <div>预约</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="todolist-tab">
+      <div class="todolist-tab-btn todolist-tab-btn-on">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-home"></use>
+          </svg>
+        </div>
+        招聘市场
+      </div>
+      <div class="todolist-tab-btn  ">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-format-list-bulleted"></use>
+          </svg>
+        </div>
+        游戏中心
+      </div>
+
+      <div class="todolist-tab-btn ">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-account"></use>
+          </svg>
+        </div>
+        个人中心
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "symarket",
+    methods: {
+      jdtwidth: function (x) {
+        return {
+          'width': x + '%'
+        }
+      }
+    }
+
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #deeaf6;
+    font-family: "微软雅黑";
+  }
+
+  .bgpic {
+    display: inline-block;
+    height: auto;
+    max-width: 100%;
+  }
+
+
+  .card {
+    display: flex;
+    color: #fff;
+    margin: 10px 10px 0 0;
+    border-bottom-right-radius: 50px;
+    border-top-right-radius: 50px;
+    padding: 5px;
+    align-items: center
+  }
+
+  .touxiang {
+    flex: 0 0 20%;
+    margin-right: 10px;
+    border-radius: 100%;
+    overflow: hidden;
+  }
+
+  .info {
+    flex: 0 0 50%
+  }
+
+  .book {
+    flex: 0 0 20%;
+    text-align: center;
+    border-radius: 30px;
+    font-size: 15px;
+    padding: 5px 3px;
+    font-weight: bold
+  }
+
+  .bookzhi {
+    background-color: #ece3fc;
+    color: #9758ff;
+  }
+
+  .bookorange {
+    background-color: #fcebd0;
+    color: #ffa922;
+  }
+
+
+  .bookred {
+    background-color: #f8ddde;
+    color: #fa5053;
+  }
+
+  .bgorange {
+    background-color: #ffa922
+  }
+
+  .bgred {
+    background-color: #fa5053
+  }
+
+  .bgzhi {
+    background-color: #9758ff
+  }
+
+  .info_title {
+    font-weight: bold;
+  }
+
+  .info_value {
+    font-size: 12px;
+  }
+
+  /* 底部栏 */
+  .todolist-tab {
+    color: #666;
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #d2e3f3;
+    width: 100%;
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 0 2px 0;
+    /* box-shadow: 0 -1px 3px #f1f1f1 */
+  }
+
+  .todolist-tab-btn {
+    font-size: 13px;
+    width: 33%;
+    text-align: center
+  }
+
+  .todolist-tab-btn-on {
+    color: #46a4da
+  }
+
+  .todolist-tab-icon {
+    font-size: 23px;
+  }
+
+  .todolist-tab-count {
+    position: absolute;
+    margin-left: 14%;
+    bottom: 30px;
+    font-size: 12px;
+    line-height: 12px;
+    width: 12px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 50%;
+    padding: 3px;
+    text-align: center;
+    background-color: #fc4f4f
+  }
+
+</style>

src/pages/shangye/symy.vue

@@ -0,0 +1,530 @@
+<template>
+  <div>
+    <!-- 顶部用户信息 -->
+    <div style="padding:30px 5px 10px 5px; background-color:#c6dbee">
+      <div style="display:flex;align-items: center">
+        <div style="color:#666;background-color:#bababa;width:50%;border-radius: 15px;overflow:hidden;height:100%;font-size:16px;
+          line-height:19px">
+
+          <div
+            style="color:#666;background-color:#0eafff;text-align:left;color:#fff;font-weight:bold;height:100%;display:flex;align-items: center"
+            :style="jdtwidth(70)">
+            <div style="margin-left:5px;font-size:16px;flex:0 0 70px;">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-grade"></use>
+              </svg>
+              学徒</div>
+            <div>210/300</div>
+          </div>
+        </div>
+
+        <div style="font-size:16px;margin-left:15%;background-color:#bababa;color:#fff;font-weight:bold;padding:0 15px 0 0 ;border-radius: 25px;
+          line-height:19px">
+          <svg class="icon" aria-hidden="true" style="font-size:16px;margin-left:2px">
+            <use xlink:href="#icon-qian"></use>
+          </svg>
+          <span style="margin-left:5px">
+            1234
+          </span>
+        </div>
+      </div>
+      <div style="display:flex;align-items: center">
+        <div style="flex:0 0 65%">
+          <div style="font-size:18px;font-weight:bold;color:#fff;text-shadow:1px 1px 0px #666">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-yonghu"></use>
+            </svg>
+            灭曱甴大队长</div>
+          <div style="font-size:13px;color:#888;margin-left:25px">ID:13600136000</div>
+        </div>
+        <div style="font-size:12px;color:#666">
+          <div> <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon--huangguan"></use>
+            </svg>
+            团队级别：50人</div>
+          <div><svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-shouyishuaicesuan"></use>
+            </svg>
+            推广收益：234</div>
+        </div>
+      </div>
+    </div>
+
+
+    <div style="margin:20px 0 100px 0;">
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_blue">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-yitihuachuxing"></use>
+          </svg>
+        </div>
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">正在学习</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_green">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-format-list-bulleted"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">学习历史</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_orange">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-renwu"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">应聘历史</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_red">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-face"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">实名认证</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_green">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-caiwuguanli"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">收款方式</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_blue">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-xiaozu-"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">我的团队</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_orange">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-huaban"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">邀请好友</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_red">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-shouzhiliushui"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">M币转让</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_green">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-weiwaifaliao"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">奖品转赠</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_orange">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-shouzhiguanli"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">兑换经验</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_red">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-xiugaimima"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">安全中心</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_blue">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-guanyu"></use>
+          </svg>
+        </div>
+
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">服务中心</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <div class="setting_relogin">退出当前帐号</div>
+
+    </div>
+
+    <!-- 底部按钮 -->
+    <div class="todolist-tab">
+      <div class="todolist-tab-btn ">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-home"></use>
+          </svg>
+        </div>
+        招聘市场
+      </div>
+      <div class="todolist-tab-btn  ">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-format-list-bulleted"></use>
+          </svg>
+        </div>
+        游戏中心
+      </div>
+
+      <div class="todolist-tab-btn todolist-tab-btn-on">
+        <div class="todolist-tab-icon">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-account"></use>
+          </svg>
+        </div>
+        个人中心
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "symarket",
+    methods: {
+      jdtwidth: function (x) {
+        return {
+          'width': x + '%'
+        }
+      }
+    }
+
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #deeaf6;
+    font-family: "微软雅黑";
+  }
+
+  .setting_relogin {
+    /* background-color: #ffffff; */
+    font-size: 18px;
+    font-weight: bold;
+    color: #e14123;
+    /* padding: 18px; */
+    text-align: center;
+    margin: 30px 0;
+  }
+
+  .setting_liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+  }
+
+  .setting_list_item_text {
+    display: flex;
+    flex: 0 0 78%;
+    margin: 0 0 0 15px;
+  }
+
+  .setting_list_item_border {
+    border-bottom: 1px solid #d0dcea;
+  }
+
+  .setting_list_item_right {
+    color: #9b9b9b;
+    font-size: 15px;
+    position: absolute;
+    right: 20px;
+  }
+
+  .setting_list_item {
+    display: flex;
+    color: #606060;
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 55px;
+    padding: 0 0 0 20px;
+    align-items: center;
+  }
+
+  .setting_list_item_icon {
+    flex: 0 0 35px;
+    /* width: 35px;
+    height: 35px; */
+    font-size: 20px;
+    line-height: 35px;
+
+    color: #fff;
+    border-radius: 50%;
+    text-align: center;
+  }
+
+
+  .setting_icon_bg_blue {
+    background-color: #00aaee;
+  }
+
+  .setting_icon_bg_green {
+    background-color: #47cc47;
+  }
+
+  .setting_icon_bg_orange {
+    background-color: #ff9800;
+  }
+
+  .setting_icon_bg_red {
+    background-color: #ff6f61;
+  }
+
+
+
+
+
+  .setting_liubai {
+    width: 100%;
+    height: 10px;
+    background-color: rgb(246, 246, 246);
+  }
+
+  .setting_list_item_text {
+    display: flex;
+    flex: 0 0 78%;
+    margin: 0 0 0 15px;
+  }
+
+  .setting_list_item_border {
+    border-bottom: 1px solid #d0dcea;
+  }
+
+  .bgpic {
+    display: inline-block;
+    height: auto;
+    max-width: 100%;
+  }
+
+
+  .card {
+    display: flex;
+    color: #fff;
+    margin: 10px 10px 0 0;
+    border-bottom-right-radius: 50px;
+    border-top-right-radius: 50px;
+    padding: 5px;
+    align-items: center
+  }
+
+  .touxiang {
+    flex: 0 0 20%;
+    margin-right: 10px;
+    border-radius: 100%;
+    overflow: hidden;
+  }
+
+  .info {
+    flex: 0 0 50%
+  }
+
+  .book {
+    flex: 0 0 20%;
+    text-align: center;
+    border-radius: 30px;
+    font-size: 15px;
+    padding: 5px 3px;
+    font-weight: bold
+  }
+
+  .bookzhi {
+    background-color: #ece3fc;
+    color: #9758ff;
+  }
+
+  .bookorange {
+    background-color: #fcebd0;
+    color: #ffa922;
+  }
+
+
+  .bookred {
+    background-color: #f8ddde;
+    color: #fa5053;
+  }
+
+  .bgorange {
+    background-color: #ffa922
+  }
+
+  .bgred {
+    background-color: #fa5053
+  }
+
+  .bgzhi {
+    background-color: #9758ff
+  }
+
+  .info_title {
+    font-weight: bold;
+  }
+
+  .info_value {
+    font-size: 12px;
+  }
+
+  /* 底部栏 */
+  .todolist-tab {
+    color: #666;
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    background-color: #d2e3f3;
+    width: 100%;
+    z-index: 9999;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 0 2px 0;
+    /* box-shadow: 0 -1px 3px #f1f1f1 */
+  }
+
+  .todolist-tab-btn {
+    font-size: 13px;
+    width: 33%;
+    text-align: center
+  }
+
+  .todolist-tab-btn-on {
+    color: #46a4da
+  }
+
+  .todolist-tab-icon {
+    font-size: 23px;
+  }
+
+  .todolist-tab-count {
+    position: absolute;
+    margin-left: 14%;
+    bottom: 30px;
+    font-size: 12px;
+    line-height: 12px;
+    width: 12px;
+    font-weight: bold;
+    color: #fff;
+    border-radius: 50%;
+    padding: 3px;
+    text-align: center;
+    background-color: #fc4f4f
+  }
+
+</style>

src/pages/shangye/syopen.vue

@@ -0,0 +1,122 @@
+<template>
+  <div>
+
+    <div class="titlepic_w">
+      <img src="../../assets/sytitle_4.jpg" class="bgpic"></img>
+    </div>
+
+    <div class="btn" v-if="iflogin==0">
+      <div style="margin-right:10px;">登录</div>
+      <div>注册</div>
+    </div>
+
+    <div class="login" v-if="iflogin==1">
+      <div class="loginfrom">
+        <span style="font-size:20px"> <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-account"></use>
+          </svg></span>
+        请输入手机号</div>
+      <div class="loginfrom">
+        <span style="font-size:18px"> <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-lock"></use>
+          </svg></span>
+        请输入密码</div>
+      <div class="loginbtn">登录</div>
+      <div style="display:flex;padding:5px 0">
+        <div style="flex:0 0 50%;color: #888;font-size: 14px;">用户注册</div>
+        <div style="flex:0 0 50%" class="forgetpsw">忘记密码</div>
+      </div>
+    </div>
+
+    <div class="bgpic_w">
+      <img src="../../assets/syopen_3.jpg" class="bgpic"></img>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: "syopen",
+    data() {
+      return {
+        iflogin: 1
+      }
+    }
+
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #64C1C8;
+    font-family: "微软雅黑";
+  }
+
+  .login {
+    background-color: #ffffff;
+    border-radius: 20px;
+    margin: 0px 20px 0% 20px;
+    padding: 10px;
+    z-index: 9999;
+    /* position:absolute; */
+    /* width:80% */
+  }
+
+  .loginfrom {
+    margin: 10px 0;
+    padding: 10px;
+    z-index: 9999;
+    border: 1px solid #e5e5e5;
+    color: #888
+  }
+
+  .loginbtn {
+    margin: 10px 0;
+    padding: 10px;
+    color: #fff;
+    background-color: #8dc026;
+    text-align: center;
+    z-index: 9999;
+  }
+
+  .forgetpsw {
+    color: #888;
+    font-size: 14px;
+    text-align: right;
+    margin-right: 20px
+  }
+
+  .titlepic_w {
+    margin: 20px 40px 10px 40px;
+    z-index: 9999;
+  }
+
+  .btn {
+    display: flex;
+    margin: 30% auto 100px auto;
+    justify-content: center;
+    font-weight: bold;
+    color: #888
+  }
+
+  .btn div {
+    padding: 10px 50px;
+    background: #ffffff;
+    border-radius: 30px;
+    z-index: 9999;
+  }
+
+  /* .bgpic_w {
+    position:fixed;
+    bottom: 0px;
+  } */
+
+  .bgpic {
+    display: inline-block;
+    height: auto;
+    max-width: 100%;
+
+  }
+
+</style>

src/router/index.js

@@ -50,6 +50,9 @@ import Wkpmxlist from '@/pages/wkpmxlist'
 import Equipment from '@/pages/equipment'
 import Eqfixedit from '@/pages/eqfixedit'
 import Eqfixview from '@/pages/eqfixview'
+import Syopen from '@/pages/shangye/syopen'
+import Symarket from '@/pages/shangye/symarket'
+import Symy from '@/pages/shangye/symy'
 
 Vue.use(Router)
 
@@ -65,6 +68,21 @@ export default new Router({
       name: 'Wkpmxlist',
       component: Wkpmxlist
     },
+    {
+      path: '/symarket',
+      name: 'Symarket',
+      component: Symarket
+    },
+    {
+      path: '/symy',
+      name: 'Symy',
+      component: Symy
+    },
+    {
+      path: '/syopen',
+      name: 'Syopen',
+      component: Syopen
+    },
     {
       path: '/buyreport',
       name: 'BuyReport',