add 文件夹

api/audit.js

@@ -0,0 +1,34 @@
+/**
+ * 获取百度地图输入点提示词
+ * @author Seven
+ * @data 2025-3-5
+ * @param { category_parent_id }
+ * @returns { query,region }
+ * @see https://mall.gpxscs.cn/mobile/shop/merch/baidu/place/v2/suggestion
+ */
+
+export function GetBaiduSuggestion (params = {}){
+    params.isFilter = true
+    return  new Promise((resolve, reject) => {
+      http({
+        url:'/shop/merch/baidu/place/v2/suggestion',
+        method:'get',
+        data:params,
+      }).then(res=>{
+        resolve(res)
+      }).catch(e => reject(console.warn(e)))
+    })
+  }
+
+  export function GetMeritoCategory (params = {}){
+    return  new Promise((resolve, reject) => {
+      http({
+        url:'/shop/shop-base-store-category/list',
+        method:'post',
+        data:params,
+      }).then(res=>{
+        resolve(res)
+      }).catch(e => reject(console.warn(e)))
+    })
+  }
+  

api/login.js

@@ -0,0 +1,248 @@
+import http from '../utils/http'
+
+
+/**
+ * 登录/注册同一个接口
+ * @author Seven
+ * @data 2025-1-28
+ * @param number // 验证码
+ * @returns {  }
+ * @see https://mall.gpxscs.cn/mobile/account/login/doMerchSmsRegisterAndLogin
+ */
+
+export function GetLogin (params){
+  params.isFilter = true  
+  return  new Promise((resolve, reject) => {
+    http({
+      url:'/account/login/doMerchSmsRegisterAndLogin',
+      method:'post',
+      data:params,
+    }).then(res=>{
+      resolve(res)
+    }).catch(e => reject(console.warn(e)))
+  })
+}
+
+/**
+ * 获取验证码
+ * @author Seven
+ * @data 2025-1-6
+ * @returns {  }
+ * @see https://mall.gpxscs.cn/mobile/account/login/sendVerifyCode
+ */
+
+export function GetSmsCode(params){
+  params.isFilter = true 
+  return  new Promise((resolve, reject) => {
+    http({
+      url:'/account/login/sendVerifyCode',
+      method:'post',
+      data:params,
+    }).then(res=>{
+      resolve(res)
+    }).catch(e => reject(console.warn(e)))
+  })
+}
+
+/**
+ * 获取店铺分类
+ * @author Seven
+ * @date 2025-3-24
+ * @returns {  }
+ * @see https://mall.gpxscs.cn/mobile/shop/store/biz-category/list
+ */
+export function GetStoreCategories() { 
+  return new Promise((resolve, reject) => {
+    http({
+      url: 'shop/store/biz-category/list',
+      method: 'post'
+    }).then(res => {
+      resolve(res)
+    }).catch(e => reject(console.warn(e)))
+  })
+}
+/**
+ * 处理店铺分类数据，转换为 el-cascader 需要的格式
+ * @param {Array} data 原始店铺分类数据
+ * @returns {Array} 转换后的数据
+ */
+export function transformStoreCategories(data) {
+  return data.map(item => ({
+    value: item.id,
+    label: item.category_name,
+    children: item.children ? [
+      // 添加一个与一级目录同名的选项
+      {
+        value: item.id,
+        label: `${item.category_name} 分割比率(${item.split_ratio}%)`
+      },
+      ...item.children.map(child => ({
+          value: child.id,
+          label: `${child.category_name} 分割比率(${child.split_ratio}%)`
+        }))
+    ] : []
+  }));
+}
+
+export function GetPostion (params){
+  params.isFilter = true  
+  return  new Promise((resolve, reject) => {
+    http({
+      url:'/shop/merch/baidu/place/v2/suggestion',
+      method:'get',
+      params,
+    }).then(res=>{
+      resolve(res)
+    }).catch(e => reject(console.warn(e)))
+  })
+}
+export function GetBank (){
+  return  new Promise((resolve, reject) => {
+    http({
+      url:'/shop/global/banks/list',
+      method:'post',
+    }).then(res=>{
+      resolve(res)
+    }).catch(e => reject(console.warn(e)))
+  })
+}
+
+export function merchApply(params){
+  return  new Promise((resolve, reject) => {
+    const form={
+      bank_name: params.bank_name,
+      bank_branch_name: params.bank_branch_name,
+      account_number: params.account_number,
+      account_holder_name: params.account_holder_name,
+      biz_category: params.biz_category,
+      biz_license_company: params.biz_license_company,
+      biz_license_image: params.biz_license_image,
+      biz_license_number: params.biz_license_number,
+      biz_second_category: params.biz_second_category,
+      city_id: params.city_id,
+      contact_name: params.contact_name,
+      county_id: params.county_id,
+      entity_type: params.entity_type,
+      environment_image: params.environment_image,
+      front_facade_image: params.front_facade_image,
+      individual_id_images: params.individual_id_images,
+      individual_id_images2: params.individual_id_images2,
+      individual_id_number: params.individual_id_number,
+      legal_person_id_images: params.legal_person_id_images,
+      legal_person_id_images2: params.legal_person_id_images2,
+      legal_person_id_number: params.legal_person_id_number,
+      legal_person_mobile: params.legal_person_mobile,
+      legal_person_name: params.legal_person_name,
+      license_image: params.license_imageToString,
+      license_number: params.license_number,
+      license_type: params.license_type,
+      login_mobile: params.login_mobile,
+      province_id: params.province_id,
+      store_address: params.postion+params.store_address,
+      store_latitude: params.store_latitude,
+      store_longitude: params.store_longitude,
+      store_name: params.store_name,
+    }
+    console.log("这是数据",form);
+    http({
+      url:'/shop/merch/apply',
+      method:'post',
+      data:form
+    }).then(res=>{
+      resolve(res)
+    }).catch(e => reject(console.warn(e)))
+  })
+}
+
+//获取审核状态
+export function getApproval_status(){
+  const phone={
+    mobile:localStorage.getItem("mobilePhone")
+  }
+  return new Promise((resolve,reject)=>{
+    http({
+      url:'/shop/merch/fresh/approval/status',
+      method:'post',
+      data:phone
+    }).then(res=>{
+      resolve(res)
+    }).catch(e => reject(console.warn(e)))
+  })
+}
+
+//重新审核
+export function re_apply(params){
+    return new Promise((resolve,reject)=>{
+      http({
+        url:'/shop/merch/re-apply',
+        method:'post',
+        data:params
+      }).then(res=>{
+        resolve(res)
+      }).catch(e => reject(console.warn(e)))
+    })
+}
+
+
+/**
+ * 账号密码登录
+ * @author Seven
+ * @data 2025-1-6
+ * @returns {  }
+ * @see https://mall.gpxscs.cn/api/admin/account/account-user-base/doLogin
+ */
+
+export function GetAccountLogin(params){
+  return  new Promise((resolve, reject) => {
+    http({
+      url:'https://mall.gpxscs.cn/api/admin/account/account-user-base/doLogin',
+      method:'post',
+      params,
+    }).then(res=>{
+      resolve(res)
+    }).catch(e => reject(console.warn(e)))
+  })
+}
+
+/**
+ * 获取图形验证码
+ * @author Seven
+ * @data 2025-1-6
+ * @returns {  }
+ * @see https://mall.gpxscs.cn/api/admin/shop/shop-base-config/image
+ */
+
+export function GetVerifyCode(params){
+  return  new Promise((resolve, reject) => {
+    http({
+      url:'https://mall.gpxscs.cn/api/admin/shop/shop-base-config/image',
+      method:'GET',
+      params,
+    }).then(res=>{
+      resolve(res)
+    }).catch(e => reject(console.warn(e)))
+  })
+}
+//获取入驻信息
+export function GetMerchDetail(){
+return new Promise((resolve,reject)=>{
+  http({
+    url:'/shop/merch/detail',
+    method:'post',
+    data:{mobile:localStorage.getItem('mobilePhone')}
+  }).then(res=>{
+    resolve(res)
+  }).catch(e=>reject(console.warn(e)))
+})
+}
+
+export function GetAppDistrict(){
+  return new Promise((resolve,reject)=>{
+    http({
+      url:'shop/shop-base-district/getAppDistrict',
+      method:'get'
+    }).then(res=>{
+      resolve(res)
+    }).catch(e=>reject(console.warn(e)))
+  })
+}

api/upload.js

@@ -0,0 +1,33 @@
+import http from '../utils/http';
+
+/**
+ * 上传文件
+ * @author [你的名字]
+ * @data [当前日期]
+ * @param {File} file - 要上传的文件
+ * @param {Object} [params] - 其他可选参数
+ * @returns {Promise}
+ * @see https://mall.gpxscs.cn/mobile/shop/oss/upload
+ */
+export function uploadFile(file, params = {}) {
+  params.isFilter = true;
+  const formData = new FormData();
+  formData.append('upfile', file);
+  // 如果有其他参数，可以添加到 formData 中
+  for (const key in params) {
+    if (params.hasOwnProperty(key)) {
+      formData.append(key, params[key]);
+    }
+  }
+  return new Promise((resolve, reject) => {
+    http({
+      url: '/shop/oss/upload',
+      method: 'post',
+      data: formData,
+    })
+   .then(res => {
+      resolve(res);
+    })
+   .catch(e => reject(console.warn(e)));
+  });
+}

dist/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>小发同城</title>
+    <script type="module" crossorigin src="/static/js/index-B5N-wgXJ.js"></script>
+    <link rel="modulepreload" crossorigin href="/static/js/element-plus-BqRlJpKe.js">
+    <link rel="stylesheet" crossorigin href="/static/css/element-plus-DQwkloGW.css">
+    <link rel="stylesheet" crossorigin href="/static/css/index-DIoLoULI.css">
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

dist/static/css/About-jg9ZSBwJ.css

@@ -0,0 +1 @@
+.about_img img[data-v-180aa855]{width:100%;height:300px;object-fit:cover}.about_container[data-v-180aa855]{width:100%;max-width:1200px;margin:auto;display:flex;justify-content:center;align-items:center;flex-direction:column}.about_container h1[data-v-180aa855]{margin:30px 0}.about_container .el-row[data-v-180aa855]{width:100%}.about_container p[data-v-180aa855]{margin-bottom:30px;font-weight:400;font-size:20px;text-indent:2em;padding:0 15px}.about_container .brandTarget[data-v-180aa855]{display:flex;width:100%;justify-content:center;align-items:center}.about_container .brandTarget .brandTarget_one[data-v-180aa855],.about_container .brandTarget .brandTarget_two[data-v-180aa855],.about_container .brandTarget .brandTarget_three[data-v-180aa855]{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}.about_container .brandTarget img[data-v-180aa855]{width:100%;height:400px;object-fit:cover}.about_container .brandTarget p[data-v-180aa855]{text-align:center;padding:20px}.ppt[data-v-180aa855]{width:100%;margin:auto}.ppt img[data-v-180aa855]{width:100%;height:auto;object-fit:contain}

dist/static/css/FeedBack-DRpgDsCc.css

@@ -0,0 +1 @@
+.feedback-container{width:100%;max-width:1200px;display:flex;flex-direction:column;align-items:center;justify-content:start;margin:auto}.feedback-container h1{margin:30px 0}

dist/static/css/Help-CUWLVGA_.css

@@ -0,0 +1 @@
+@charset "UTF-8";.help_container{width:100%;max-width:1200px;margin:auto;display:flex;justify-content:center;align-items:center}.help_container .el-row{width:100%}.help_img img{width:100%;height:auto;object-fit:contain}

dist/static/css/check-C3ivE_fz.css

@@ -0,0 +1 @@
+.check_contain{width:100%;max-width:1200px;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.check_contain .check_tips{margin-top:40px}.check_contain .check_tips .check_pass{display:flex;flex-direction:column;justify-content:center}.check_contain .check_tips .check_pass .icon{display:flex;justify-content:center;align-items:center}.check_contain .check_tips .check_fail{display:flex;flex-direction:column;justify-content:center}.check_contain .check_tips .check_fail .icon{display:flex;justify-content:center;align-items:center}.check_contain .check_tips .check_wait{display:flex;flex-direction:column;justify-content:center}.check_contain .check_tips .check_wait .icon{display:flex;justify-content:center;align-items:center}.check_contain .check_tips i{font-size:200px}.check_contain .check_tips p{margin:10px 0;font-size:20px}.check_contain .check_re_apply{padding-top:40px;display:flex;flex-direction:column;justify-content:center;align-items:center}.auto-item p{font-size:15px;font-weight:900}.auto-item span{font-size:10px}@media (max-width: 768px){.el-cascader-menu{width:120px;min-width:120px}}

dist/static/css/index-Cfnv2MIC.css

@@ -0,0 +1 @@
+@charset "UTF-8";.slider{width:100%;background:linear-gradient(90.54deg,#7354ff .42%,#000b22 102.71%);-webkit-background:linear-gradient(90.54deg,#7354ff .42%,#000b22 102.71%);-moz-background:linear-gradient(90.54deg,#7354ff .42%,#000b22 102.71%);position:relative;padding-top:100px;padding-bottom:130px}.slider:before{content:"";position:absolute;left:0;right:0;top:0;background-position:center center;bottom:0;background:url(/static/png/slider-bg-shape-E1wbLUgd.png);background-repeat:no-repeat;background-size:100% 100%;z-index:0}.slider .slider-container{display:flex;width:100%;max-width:1200px;margin:auto;align-items:center;justify-content:center}.slider .slider-container .el-row{display:flex;width:100%;align-items:center;justify-content:center}.slider .slider-container-mobile{display:none;width:100%;max-width:1200px;margin:auto;align-items:center;justify-content:center;text-align:center}.slider .slider-container-mobile h1{color:#fff;font-size:40px;font-weight:700;margin:10px 0}.slider .slider-container-mobile p{color:#fff;font-size:20px;font-weight:400;margin:10px 0}.slider .slider-container-left{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.slider .slider-container-left h1{color:#fff;font-size:40px;font-weight:700}.slider .slider-container-left p{color:#fff;font-size:20px;font-weight:400}.slider .slider-container-right{display:flex;justify-content:center;align-self:center}.slider .slider-container-right img{width:50%;height:50%}.slider-button{display:flex;justify-content:center}.slider-button .slider-btn{margin-top:30px;padding:12px 30px;position:relative}.slider-button .service{margin-right:14px}.qr-code{display:none;position:absolute;top:100%;left:50%;transform:translate(-50%);z-index:30;background-color:#fff;padding:10px;border:1px solid #ccc;box-shadow:0 0 5px #0000004d}.slider-btn:hover .qr-code{display:block}.qr-code img{width:150px;height:150px}.counter_wrapper{position:relative;margin-top:-100px;z-index:12}.counter_wrapper .count_box{width:100%;padding:15px 0;border-radius:5px 5px 30px 30px;text-align:center;margin-bottom:40px;background:#fff;box-shadow:2px 2px 10px 1px #00000014;transition:.3s}.counter_wrapper .count_box i:before{font-size:60px;color:#353535;transition:.3s}.counter_wrapper .count_box h3{font-size:35px;font-weight:500;color:#353535;margin:15px 0;transition:.3s}.counter_wrapper .count_box p{font-size:18px;font-weight:500;color:#353535;transition:.3s}.counter_wrapper .count_box:hover i:before{color:#fff}.counter_wrapper .count_box:hover p,.counter_wrapper .count_box:hover .el-statistic__content{color:#fff}.counter_wrapper .count_box:hover{background:#7354ff}.container{width:100%;max-width:1200px;margin:auto}.container .el-row{width:100%}@media (max-width: 768px){.container{width:100%;margin:auto}.slider{padding-top:0}.container .el-row{width:100%;padding-left:20px}.slider .slider-container{display:none}.slider .slider-container-mobile{display:flex}.slider .slider-container-left p{margin-top:20px}}@media (min-width: 769px){.slider .slider-container-mobile{display:none}.slider .slider-container{display:flex}}.router-link-button{padding:3px 5px;border:none;border-radius:4px;background-color:#42b983;color:#fff;font-size:16px;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .3s ease;margin-top:25px;float:right}.router-link-button:hover{background-color:#36a675}.company-introduce p{font-size:20px;text-indent:2em}

dist/static/css/start-BaKIi4YO.css

@@ -0,0 +1 @@
+.signUp-container{display:flex;padding:30px 0;flex-direction:column;align-items:center;justify-content:center}.signUp-container .steps-container{width:60%}.signUp-container :deep(.upload-hidden .el-upload--picture-card){display:none}.signUp-container .form-submit{padding:20px 0}.auto-item p{font-size:15px;font-weight:900}.auto-item span{font-size:10px}@media (max-width: 768px){.el-cascader-menu{width:120px;min-width:120px}}

dist/static/js/About-gWTMoHSx.js

@@ -0,0 +1 @@
+import{x as i,H as d,y as t,a0 as e,z as s,A as o,I as c,E as n}from"./element-plus-BqRlJpKe.js";import{a as l}from"./index-B5N-wgXJ.js";const g="/static/jpg/ppt2-B63Md0hi.jpg",_="/static/jpg/ppt3-DJQEMBTC.jpg",m="/static/jpg/ppt4-N3gNKzlq.jpg",v="/static/jpg/ppt5-BECJkVjl.jpg",u="/static/jpg/target4-BE3ouBHH.jpg",j="/static/jpg/target5-C5BgcCif.jpg",f="/static/jpg/target3-atunhXrw.jpg",x={},B={class:"about_container"},E={class:"brandTarget"};function b(C,a){const p=c,r=n;return d(),i("div",null,[t("div",B,[a[3]||(a[3]=e('<h1 data-v-180aa855>品牌介绍</h1><p data-v-180aa855> 小发同城是2024成立的创新型同城服务企业。自成立以来，秉持着 “以用户需求为核心，用贴心服务点亮城市生活” 的使命，不断整合各类优质资源， 搭建起一个涵盖配送、生活服务、商业服务等多元领域的综合性服务网络。 </p><p data-v-180aa855> 随着城市生活节奏的不断加快和人们对生活品质要求的日益提高， 同城服务市场有着广阔的发展前景。小发同城将继续秉承创新、高效、贴心的服务理念， 不断拓展服务领域，提升服务质量，为用户创造更多价值。同时，小发同城也将积极与各类商家、合作 伙伴携手共进，共同推动同城服务行业的发展，为打造更加便捷、美好的城市生活贡献自己的力量。 </p><div class="ppt" data-v-180aa855><img src="'+g+'" data-v-180aa855><img src="'+_+'" data-v-180aa855><img src="'+m+'" data-v-180aa855><img src="'+v+'" data-v-180aa855></div><h1 data-v-180aa855>品牌主张</h1>',5)),t("div",E,[s(r,{gutter:20},{default:o(()=>[s(p,{xs:24,sm:24,md:24,lg:8,xl:8},{default:o(()=>a[0]||(a[0]=[t("div",{class:"brandTarget_one"},[t("img",{src:u}),t("p",null,"服务到位")],-1)])),_:1}),s(p,{xs:24,sm:24,md:24,lg:8,xl:8},{default:o(()=>a[1]||(a[1]=[t("div",{class:"brandTarget_two"},[t("img",{src:j}),t("p",null,"快速解决")],-1)])),_:1}),s(p,{xs:24,sm:24,md:24,lg:8,xl:8},{default:o(()=>a[2]||(a[2]=[t("div",{class:"brandTarget_three"},[t("img",{src:f}),t("p",null,"客户放心")],-1)])),_:1})]),_:1})])])])}const T=l(x,[["render",b],["__scopeId","data-v-180aa855"]]);export{T as default};

dist/static/js/FeedBack-CViox2S0.js

@@ -0,0 +1 @@
+import{j as b,a as y,r as k,x as w,y as p,z as o,A as l,P as x,Q as V,a5 as v,a6 as E,u as h,a7 as F,O as B,M as C,L as I,H as N}from"./element-plus-BqRlJpKe.js";import{s as O}from"./index-B5N-wgXJ.js";function P(c,t={}){t.isFilter=!0;const n=new FormData;n.append("upfile",c);for(const a in t)t.hasOwnProperty(a)&&n.append(a,t[a]);return new Promise((a,r)=>{O({url:"/shop/oss/upload",method:"post",data:n}).then(e=>{a(e)}).catch(e=>r(console.warn(e)))})}const U={class:"feedback-container"},g={class:"feedback-form"},D=b({__name:"FeedBack",setup(c){const t=y({describe:"",img:"",contact:""}),n=k(),a=({file:r})=>{P(r,{}).then(s=>{console.log(s)}).catch(s=>{console.error(s)})};return(r,e)=>{const s=V,u=x,i=E,m=v,f=B,_=I;return N(),w("div",U,[e[4]||(e[4]=p("h1",null,"意见反馈",-1)),p("div",g,[o(f,{model:t,"label-width":"auto",style:{"max-width":"600px"}},{default:l(()=>[o(u,{label:"描述问题"},{default:l(()=>[o(s,{modelValue:t.describe,"onUpdate:modelValue":e[0]||(e[0]=d=>t.describe=d),rows:6,type:"textarea"},null,8,["modelValue"])]),_:1}),o(u,{label:"上传图片"},{default:l(()=>[o(m,{ref_key:"uploadRef",ref:n,multiple:"",limit:3,"list-type":"picture-card","http-request":a,"auto-upload":!1},{default:l(()=>[o(i,{class:"avatar-uploader-icon"},{default:l(()=>[o(h(F))]),_:1})]),_:1},512)]),_:1}),o(u,{label:"您的联系方式"},{default:l(()=>[o(s,{modelValue:t.contact,"onUpdate:modelValue":e[1]||(e[1]=d=>t.contact=d),style:{width:"200px"}},null,8,["modelValue"])]),_:1})]),_:1},8,["model"]),o(_,{type:"primary",size:"default",onClick:e[2]||(e[2]=d=>n.value.submit())},{default:l(()=>e[3]||(e[3]=[C("提交反馈")])),_:1})])])}}});export{D as default};

dist/static/js/Help-CTCiUKYC.js

@@ -0,0 +1 @@
+import{x as l,H as a,z as t,A as o,I as _,y as s,E as r}from"./element-plus-BqRlJpKe.js";import{a as p}from"./index-B5N-wgXJ.js";const m="/static/png/help_temp-BLQ8f-Sb.png",i={},d={class:"help_container"};function f(x,e){const n=_,c=r;return a(),l("div",d,[t(c,null,{default:o(()=>[t(n,{xs:24,sm:24,md:24,lg:24,xl:24},{default:o(()=>e[0]||(e[0]=[s("div",{class:"help_img"},[s("img",{src:m})],-1)])),_:1})]),_:1})])}const h=p(i,[["render",f]]);export{h as default};

dist/xiaofa-font/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.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;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.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 {
+  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 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;
+}
+
+.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;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

dist/xiaofa-font/demo_index.html

@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xf0294;</span>
+                <div class="name">宝贝</div>
+                <div class="code-name">&amp;#xf0294;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xf012c;</span>
+                <div class="name">回到顶部</div>
+                <div class="code-name">&amp;#xf012c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">VIP</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe738;</span>
+                <div class="name">反馈</div>
+                <div class="code-name">&amp;#xe738;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63c;</span>
+                <div class="name">客服</div>
+                <div class="code-name">&amp;#xe63c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">审核通过</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe696;</span>
+                <div class="name">安装维修</div>
+                <div class="code-name">&amp;#xe696;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe897;</span>
+                <div class="name"> 订单</div>
+                <div class="code-name">&amp;#xe897;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">二手交易</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe653;</span>
+                <div class="name">企业招聘</div>
+                <div class="code-name">&amp;#xe653;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">审核不通过</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66f;</span>
+                <div class="name">加</div>
+                <div class="code-name">&amp;#xe66f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe645;</span>
+                <div class="name">店铺</div>
+                <div class="code-name">&amp;#xe645;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">租赁服务icon</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe662;</span>
+                <div class="name">家政保洁安保</div>
+                <div class="code-name">&amp;#xe662;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe569;</span>
+                <div class="name">employee1</div>
+                <div class="code-name">&amp;#xe569;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe54a;</span>
+                <div class="name">审核中</div>
+                <div class="code-name">&amp;#xe54a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe77f;</span>
+                <div class="name">审核-审核通过</div>
+                <div class="code-name">&amp;#xe77f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe50f;</span>
+                <div class="name">审核通过-copy</div>
+                <div class="code-name">&amp;#xe50f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7f7;</span>
+                <div class="name">stamp-已签署-成功-样式2</div>
+                <div class="code-name">&amp;#xe7f7;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1744876675964') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-baobei"></span>
+            <div class="name">
+              宝贝
+            </div>
+            <div class="code-name">.icon-baobei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huidaodingbu"></span>
+            <div class="name">
+              回到顶部
+            </div>
+            <div class="code-name">.icon-huidaodingbu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-vip"></span>
+            <div class="name">
+              VIP
+            </div>
+            <div class="code-name">.icon-vip
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fankui"></span>
+            <div class="name">
+              反馈
+            </div>
+            <div class="code-name">.icon-fankui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-kefu"></span>
+            <div class="name">
+              客服
+            </div>
+            <div class="code-name">.icon-kefu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-pass-2-copy"></span>
+            <div class="name">
+              审核通过
+            </div>
+            <div class="code-name">.icon-pass-2-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-anzhuangweixiu"></span>
+            <div class="name">
+              安装维修
+            </div>
+            <div class="code-name">.icon-anzhuangweixiu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dingdan"></span>
+            <div class="name">
+               订单
+            </div>
+            <div class="code-name">.icon-dingdan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ershoujiaoyi"></span>
+            <div class="name">
+              二手交易
+            </div>
+            <div class="code-name">.icon-ershoujiaoyi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qiyezhaopin"></span>
+            <div class="name">
+              企业招聘
+            </div>
+            <div class="code-name">.icon-qiyezhaopin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhebutongguo"></span>
+            <div class="name">
+              审核不通过
+            </div>
+            <div class="code-name">.icon-shenhebutongguo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jia"></span>
+            <div class="name">
+              加
+            </div>
+            <div class="code-name">.icon-jia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon-test"></span>
+            <div class="name">
+              店铺
+            </div>
+            <div class="code-name">.icon-icon-test
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zulinfuwuicon"></span>
+            <div class="name">
+              租赁服务icon
+            </div>
+            <div class="code-name">.icon-zulinfuwuicon
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiazhengbaojieanbao"></span>
+            <div class="name">
+              家政保洁安保
+            </div>
+            <div class="code-name">.icon-jiazhengbaojieanbao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-employee1"></span>
+            <div class="name">
+              employee1
+            </div>
+            <div class="code-name">.icon-employee1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhezhong"></span>
+            <div class="name">
+              审核中
+            </div>
+            <div class="code-name">.icon-shenhezhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhe-shenhetongguo"></span>
+            <div class="name">
+              审核-审核通过
+            </div>
+            <div class="code-name">.icon-shenhe-shenhetongguo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhetongguo"></span>
+            <div class="name">
+              审核通过-copy
+            </div>
+            <div class="code-name">.icon-shenhetongguo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-stamp-yiqianshu-chenggong-yangshi2"></span>
+            <div class="name">
+              stamp-已签署-成功-样式2
+            </div>
+            <div class="code-name">.icon-stamp-yiqianshu-chenggong-yangshi2
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-baobei"></use>
+                </svg>
+                <div class="name">宝贝</div>
+                <div class="code-name">#icon-baobei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huidaodingbu"></use>
+                </svg>
+                <div class="name">回到顶部</div>
+                <div class="code-name">#icon-huidaodingbu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-vip"></use>
+                </svg>
+                <div class="name">VIP</div>
+                <div class="code-name">#icon-vip</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fankui"></use>
+                </svg>
+                <div class="name">反馈</div>
+                <div class="code-name">#icon-fankui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kefu"></use>
+                </svg>
+                <div class="name">客服</div>
+                <div class="code-name">#icon-kefu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-pass-2-copy"></use>
+                </svg>
+                <div class="name">审核通过</div>
+                <div class="code-name">#icon-pass-2-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-anzhuangweixiu"></use>
+                </svg>
+                <div class="name">安装维修</div>
+                <div class="code-name">#icon-anzhuangweixiu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dingdan"></use>
+                </svg>
+                <div class="name"> 订单</div>
+                <div class="code-name">#icon-dingdan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ershoujiaoyi"></use>
+                </svg>
+                <div class="name">二手交易</div>
+                <div class="code-name">#icon-ershoujiaoyi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qiyezhaopin"></use>
+                </svg>
+                <div class="name">企业招聘</div>
+                <div class="code-name">#icon-qiyezhaopin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhebutongguo"></use>
+                </svg>
+                <div class="name">审核不通过</div>
+                <div class="code-name">#icon-shenhebutongguo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jia"></use>
+                </svg>
+                <div class="name">加</div>
+                <div class="code-name">#icon-jia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon-test"></use>
+                </svg>
+                <div class="name">店铺</div>
+                <div class="code-name">#icon-icon-test</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zulinfuwuicon"></use>
+                </svg>
+                <div class="name">租赁服务icon</div>
+                <div class="code-name">#icon-zulinfuwuicon</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiazhengbaojieanbao"></use>
+                </svg>
+                <div class="name">家政保洁安保</div>
+                <div class="code-name">#icon-jiazhengbaojieanbao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-employee1"></use>
+                </svg>
+                <div class="name">employee1</div>
+                <div class="code-name">#icon-employee1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhezhong"></use>
+                </svg>
+                <div class="name">审核中</div>
+                <div class="code-name">#icon-shenhezhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhe-shenhetongguo"></use>
+                </svg>
+                <div class="name">审核-审核通过</div>
+                <div class="code-name">#icon-shenhe-shenhetongguo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhetongguo"></use>
+                </svg>
+                <div class="name">审核通过-copy</div>
+                <div class="code-name">#icon-shenhetongguo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-stamp-yiqianshu-chenggong-yangshi2"></use>
+                </svg>
+                <div class="name">stamp-已签署-成功-样式2</div>
+                <div class="code-name">#icon-stamp-yiqianshu-chenggong-yangshi2</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <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="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

dist/xiaofa-font/iconfont.css

@@ -0,0 +1,93 @@
+@font-face {
+  font-family: "iconfont"; /* Project id  */
+  src: url('iconfont.ttf?t=1744876675964') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-baobei:before {
+  content: "\f0294";
+}
+
+.icon-huidaodingbu:before {
+  content: "\f012c";
+}
+
+.icon-vip:before {
+  content: "\e614";
+}
+
+.icon-fankui:before {
+  content: "\e738";
+}
+
+.icon-kefu:before {
+  content: "\e63c";
+}
+
+.icon-pass-2-copy:before {
+  content: "\e619";
+}
+
+.icon-anzhuangweixiu:before {
+  content: "\e696";
+}
+
+.icon-dingdan:before {
+  content: "\e897";
+}
+
+.icon-ershoujiaoyi:before {
+  content: "\e629";
+}
+
+.icon-qiyezhaopin:before {
+  content: "\e653";
+}
+
+.icon-shenhebutongguo:before {
+  content: "\e627";
+}
+
+.icon-jia:before {
+  content: "\e66f";
+}
+
+.icon-icon-test:before {
+  content: "\e645";
+}
+
+.icon-zulinfuwuicon:before {
+  content: "\e62f";
+}
+
+.icon-jiazhengbaojieanbao:before {
+  content: "\e662";
+}
+
+.icon-employee1:before {
+  content: "\e569";
+}
+
+.icon-shenhezhong:before {
+  content: "\e54a";
+}
+
+.icon-shenhe-shenhetongguo:before {
+  content: "\e77f";
+}
+
+.icon-shenhetongguo:before {
+  content: "\e50f";
+}
+
+.icon-stamp-yiqianshu-chenggong-yangshi2:before {
+  content: "\e7f7";
+}
+

dist/xiaofa-font/iconfont.json

@@ -0,0 +1,149 @@
+{
+  "id": "",
+  "name": "",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "7420",
+      "name": "宝贝",
+      "font_class": "baobei",
+      "unicode": "f0294",
+      "unicode_decimal": 983700
+    },
+    {
+      "icon_id": "82756",
+      "name": "回到顶部",
+      "font_class": "huidaodingbu",
+      "unicode": "f012c",
+      "unicode_decimal": 983340
+    },
+    {
+      "icon_id": "572591",
+      "name": "VIP",
+      "font_class": "vip",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "577336",
+      "name": "反馈",
+      "font_class": "fankui",
+      "unicode": "e738",
+      "unicode_decimal": 59192
+    },
+    {
+      "icon_id": "856395",
+      "name": "客服",
+      "font_class": "kefu",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "1029226",
+      "name": "审核通过",
+      "font_class": "pass-2-copy",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "1091294",
+      "name": "安装维修",
+      "font_class": "anzhuangweixiu",
+      "unicode": "e696",
+      "unicode_decimal": 59030
+    },
+    {
+      "icon_id": "2076282",
+      "name": " 订单",
+      "font_class": "dingdan",
+      "unicode": "e897",
+      "unicode_decimal": 59543
+    },
+    {
+      "icon_id": "4538203",
+      "name": "二手交易",
+      "font_class": "ershoujiaoyi",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "4632312",
+      "name": "企业招聘",
+      "font_class": "qiyezhaopin",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "5681169",
+      "name": "审核不通过",
+      "font_class": "shenhebutongguo",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "6056155",
+      "name": "加",
+      "font_class": "jia",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "6111872",
+      "name": "店铺",
+      "font_class": "icon-test",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "8286305",
+      "name": "租赁服务icon",
+      "font_class": "zulinfuwuicon",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "14693434",
+      "name": "家政保洁安保",
+      "font_class": "jiazhengbaojieanbao",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "15653797",
+      "name": "employee1",
+      "font_class": "employee1",
+      "unicode": "e569",
+      "unicode_decimal": 58729
+    },
+    {
+      "icon_id": "27451813",
+      "name": "审核中",
+      "font_class": "shenhezhong",
+      "unicode": "e54a",
+      "unicode_decimal": 58698
+    },
+    {
+      "icon_id": "36283876",
+      "name": "审核-审核通过",
+      "font_class": "shenhe-shenhetongguo",
+      "unicode": "e77f",
+      "unicode_decimal": 59263
+    },
+    {
+      "icon_id": "40334318",
+      "name": "审核通过-copy",
+      "font_class": "shenhetongguo",
+      "unicode": "e50f",
+      "unicode_decimal": 58639
+    },
+    {
+      "icon_id": "41601813",
+      "name": "stamp-已签署-成功-样式2",
+      "font_class": "stamp-yiqianshu-chenggong-yangshi2",
+      "unicode": "e7f7",
+      "unicode_decimal": 59383
+    }
+  ]
+}

public/xiaofa-font/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.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;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.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 {
+  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 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;
+}
+
+.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;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

public/xiaofa-font/demo_index.html

@@ -0,0 +1,644 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xf0294;</span>
+                <div class="name">宝贝</div>
+                <div class="code-name">&amp;#xf0294;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xf012c;</span>
+                <div class="name">回到顶部</div>
+                <div class="code-name">&amp;#xf012c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">VIP</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe738;</span>
+                <div class="name">反馈</div>
+                <div class="code-name">&amp;#xe738;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe63c;</span>
+                <div class="name">客服</div>
+                <div class="code-name">&amp;#xe63c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">审核通过</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe696;</span>
+                <div class="name">安装维修</div>
+                <div class="code-name">&amp;#xe696;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe897;</span>
+                <div class="name"> 订单</div>
+                <div class="code-name">&amp;#xe897;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe629;</span>
+                <div class="name">二手交易</div>
+                <div class="code-name">&amp;#xe629;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe653;</span>
+                <div class="name">企业招聘</div>
+                <div class="code-name">&amp;#xe653;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe627;</span>
+                <div class="name">审核不通过</div>
+                <div class="code-name">&amp;#xe627;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66f;</span>
+                <div class="name">加</div>
+                <div class="code-name">&amp;#xe66f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe645;</span>
+                <div class="name">店铺</div>
+                <div class="code-name">&amp;#xe645;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62f;</span>
+                <div class="name">租赁服务icon</div>
+                <div class="code-name">&amp;#xe62f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe662;</span>
+                <div class="name">家政保洁安保</div>
+                <div class="code-name">&amp;#xe662;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe569;</span>
+                <div class="name">employee1</div>
+                <div class="code-name">&amp;#xe569;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe54a;</span>
+                <div class="name">审核中</div>
+                <div class="code-name">&amp;#xe54a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe77f;</span>
+                <div class="name">审核-审核通过</div>
+                <div class="code-name">&amp;#xe77f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe50f;</span>
+                <div class="name">审核通过-copy</div>
+                <div class="code-name">&amp;#xe50f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7f7;</span>
+                <div class="name">stamp-已签署-成功-样式2</div>
+                <div class="code-name">&amp;#xe7f7;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<pre><code class="language-css"
+>@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1744876675964') format('truetype');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont icon-baobei"></span>
+            <div class="name">
+              宝贝
+            </div>
+            <div class="code-name">.icon-baobei
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huidaodingbu"></span>
+            <div class="name">
+              回到顶部
+            </div>
+            <div class="code-name">.icon-huidaodingbu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-vip"></span>
+            <div class="name">
+              VIP
+            </div>
+            <div class="code-name">.icon-vip
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fankui"></span>
+            <div class="name">
+              反馈
+            </div>
+            <div class="code-name">.icon-fankui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-kefu"></span>
+            <div class="name">
+              客服
+            </div>
+            <div class="code-name">.icon-kefu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-pass-2-copy"></span>
+            <div class="name">
+              审核通过
+            </div>
+            <div class="code-name">.icon-pass-2-copy
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-anzhuangweixiu"></span>
+            <div class="name">
+              安装维修
+            </div>
+            <div class="code-name">.icon-anzhuangweixiu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dingdan"></span>
+            <div class="name">
+               订单
+            </div>
+            <div class="code-name">.icon-dingdan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-ershoujiaoyi"></span>
+            <div class="name">
+              二手交易
+            </div>
+            <div class="code-name">.icon-ershoujiaoyi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qiyezhaopin"></span>
+            <div class="name">
+              企业招聘
+            </div>
+            <div class="code-name">.icon-qiyezhaopin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhebutongguo"></span>
+            <div class="name">
+              审核不通过
+            </div>
+            <div class="code-name">.icon-shenhebutongguo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jia"></span>
+            <div class="name">
+              加
+            </div>
+            <div class="code-name">.icon-jia
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-icon-test"></span>
+            <div class="name">
+              店铺
+            </div>
+            <div class="code-name">.icon-icon-test
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zulinfuwuicon"></span>
+            <div class="name">
+              租赁服务icon
+            </div>
+            <div class="code-name">.icon-zulinfuwuicon
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-jiazhengbaojieanbao"></span>
+            <div class="name">
+              家政保洁安保
+            </div>
+            <div class="code-name">.icon-jiazhengbaojieanbao
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-employee1"></span>
+            <div class="name">
+              employee1
+            </div>
+            <div class="code-name">.icon-employee1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhezhong"></span>
+            <div class="name">
+              审核中
+            </div>
+            <div class="code-name">.icon-shenhezhong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhe-shenhetongguo"></span>
+            <div class="name">
+              审核-审核通过
+            </div>
+            <div class="code-name">.icon-shenhe-shenhetongguo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shenhetongguo"></span>
+            <div class="name">
+              审核通过-copy
+            </div>
+            <div class="code-name">.icon-shenhetongguo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-stamp-yiqianshu-chenggong-yangshi2"></span>
+            <div class="name">
+              stamp-已签署-成功-样式2
+            </div>
+            <div class="code-name">.icon-stamp-yiqianshu-chenggong-yangshi2
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-baobei"></use>
+                </svg>
+                <div class="name">宝贝</div>
+                <div class="code-name">#icon-baobei</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huidaodingbu"></use>
+                </svg>
+                <div class="name">回到顶部</div>
+                <div class="code-name">#icon-huidaodingbu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-vip"></use>
+                </svg>
+                <div class="name">VIP</div>
+                <div class="code-name">#icon-vip</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fankui"></use>
+                </svg>
+                <div class="name">反馈</div>
+                <div class="code-name">#icon-fankui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-kefu"></use>
+                </svg>
+                <div class="name">客服</div>
+                <div class="code-name">#icon-kefu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-pass-2-copy"></use>
+                </svg>
+                <div class="name">审核通过</div>
+                <div class="code-name">#icon-pass-2-copy</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-anzhuangweixiu"></use>
+                </svg>
+                <div class="name">安装维修</div>
+                <div class="code-name">#icon-anzhuangweixiu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dingdan"></use>
+                </svg>
+                <div class="name"> 订单</div>
+                <div class="code-name">#icon-dingdan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-ershoujiaoyi"></use>
+                </svg>
+                <div class="name">二手交易</div>
+                <div class="code-name">#icon-ershoujiaoyi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qiyezhaopin"></use>
+                </svg>
+                <div class="name">企业招聘</div>
+                <div class="code-name">#icon-qiyezhaopin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhebutongguo"></use>
+                </svg>
+                <div class="name">审核不通过</div>
+                <div class="code-name">#icon-shenhebutongguo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jia"></use>
+                </svg>
+                <div class="name">加</div>
+                <div class="code-name">#icon-jia</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-icon-test"></use>
+                </svg>
+                <div class="name">店铺</div>
+                <div class="code-name">#icon-icon-test</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zulinfuwuicon"></use>
+                </svg>
+                <div class="name">租赁服务icon</div>
+                <div class="code-name">#icon-zulinfuwuicon</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jiazhengbaojieanbao"></use>
+                </svg>
+                <div class="name">家政保洁安保</div>
+                <div class="code-name">#icon-jiazhengbaojieanbao</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-employee1"></use>
+                </svg>
+                <div class="name">employee1</div>
+                <div class="code-name">#icon-employee1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhezhong"></use>
+                </svg>
+                <div class="name">审核中</div>
+                <div class="code-name">#icon-shenhezhong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhe-shenhetongguo"></use>
+                </svg>
+                <div class="name">审核-审核通过</div>
+                <div class="code-name">#icon-shenhe-shenhetongguo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shenhetongguo"></use>
+                </svg>
+                <div class="name">审核通过-copy</div>
+                <div class="code-name">#icon-shenhetongguo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-stamp-yiqianshu-chenggong-yangshi2"></use>
+                </svg>
+                <div class="name">stamp-已签署-成功-样式2</div>
+                <div class="code-name">#icon-stamp-yiqianshu-chenggong-yangshi2</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <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="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

public/xiaofa-font/iconfont.css

@@ -0,0 +1,93 @@
+@font-face {
+  font-family: "iconfont"; /* Project id  */
+  src: url('iconfont.ttf?t=1744876675964') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-baobei:before {
+  content: "\f0294";
+}
+
+.icon-huidaodingbu:before {
+  content: "\f012c";
+}
+
+.icon-vip:before {
+  content: "\e614";
+}
+
+.icon-fankui:before {
+  content: "\e738";
+}
+
+.icon-kefu:before {
+  content: "\e63c";
+}
+
+.icon-pass-2-copy:before {
+  content: "\e619";
+}
+
+.icon-anzhuangweixiu:before {
+  content: "\e696";
+}
+
+.icon-dingdan:before {
+  content: "\e897";
+}
+
+.icon-ershoujiaoyi:before {
+  content: "\e629";
+}
+
+.icon-qiyezhaopin:before {
+  content: "\e653";
+}
+
+.icon-shenhebutongguo:before {
+  content: "\e627";
+}
+
+.icon-jia:before {
+  content: "\e66f";
+}
+
+.icon-icon-test:before {
+  content: "\e645";
+}
+
+.icon-zulinfuwuicon:before {
+  content: "\e62f";
+}
+
+.icon-jiazhengbaojieanbao:before {
+  content: "\e662";
+}
+
+.icon-employee1:before {
+  content: "\e569";
+}
+
+.icon-shenhezhong:before {
+  content: "\e54a";
+}
+
+.icon-shenhe-shenhetongguo:before {
+  content: "\e77f";
+}
+
+.icon-shenhetongguo:before {
+  content: "\e50f";
+}
+
+.icon-stamp-yiqianshu-chenggong-yangshi2:before {
+  content: "\e7f7";
+}
+

public/xiaofa-font/iconfont.json

@@ -0,0 +1,149 @@
+{
+  "id": "",
+  "name": "",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "7420",
+      "name": "宝贝",
+      "font_class": "baobei",
+      "unicode": "f0294",
+      "unicode_decimal": 983700
+    },
+    {
+      "icon_id": "82756",
+      "name": "回到顶部",
+      "font_class": "huidaodingbu",
+      "unicode": "f012c",
+      "unicode_decimal": 983340
+    },
+    {
+      "icon_id": "572591",
+      "name": "VIP",
+      "font_class": "vip",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "577336",
+      "name": "反馈",
+      "font_class": "fankui",
+      "unicode": "e738",
+      "unicode_decimal": 59192
+    },
+    {
+      "icon_id": "856395",
+      "name": "客服",
+      "font_class": "kefu",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    },
+    {
+      "icon_id": "1029226",
+      "name": "审核通过",
+      "font_class": "pass-2-copy",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "1091294",
+      "name": "安装维修",
+      "font_class": "anzhuangweixiu",
+      "unicode": "e696",
+      "unicode_decimal": 59030
+    },
+    {
+      "icon_id": "2076282",
+      "name": " 订单",
+      "font_class": "dingdan",
+      "unicode": "e897",
+      "unicode_decimal": 59543
+    },
+    {
+      "icon_id": "4538203",
+      "name": "二手交易",
+      "font_class": "ershoujiaoyi",
+      "unicode": "e629",
+      "unicode_decimal": 58921
+    },
+    {
+      "icon_id": "4632312",
+      "name": "企业招聘",
+      "font_class": "qiyezhaopin",
+      "unicode": "e653",
+      "unicode_decimal": 58963
+    },
+    {
+      "icon_id": "5681169",
+      "name": "审核不通过",
+      "font_class": "shenhebutongguo",
+      "unicode": "e627",
+      "unicode_decimal": 58919
+    },
+    {
+      "icon_id": "6056155",
+      "name": "加",
+      "font_class": "jia",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "6111872",
+      "name": "店铺",
+      "font_class": "icon-test",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "8286305",
+      "name": "租赁服务icon",
+      "font_class": "zulinfuwuicon",
+      "unicode": "e62f",
+      "unicode_decimal": 58927
+    },
+    {
+      "icon_id": "14693434",
+      "name": "家政保洁安保",
+      "font_class": "jiazhengbaojieanbao",
+      "unicode": "e662",
+      "unicode_decimal": 58978
+    },
+    {
+      "icon_id": "15653797",
+      "name": "employee1",
+      "font_class": "employee1",
+      "unicode": "e569",
+      "unicode_decimal": 58729
+    },
+    {
+      "icon_id": "27451813",
+      "name": "审核中",
+      "font_class": "shenhezhong",
+      "unicode": "e54a",
+      "unicode_decimal": 58698
+    },
+    {
+      "icon_id": "36283876",
+      "name": "审核-审核通过",
+      "font_class": "shenhe-shenhetongguo",
+      "unicode": "e77f",
+      "unicode_decimal": 59263
+    },
+    {
+      "icon_id": "40334318",
+      "name": "审核通过-copy",
+      "font_class": "shenhetongguo",
+      "unicode": "e50f",
+      "unicode_decimal": 58639
+    },
+    {
+      "icon_id": "41601813",
+      "name": "stamp-已签署-成功-样式2",
+      "font_class": "stamp-yiqianshu-chenggong-yangshi2",
+      "unicode": "e7f7",
+      "unicode_decimal": 59383
+    }
+  ]
+}

src/App.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <HeadMenu @open-login-form="showLoginForm = true" @open-register-form="showRegisterForm = true" />
+    <div class="contain">
+      <router-view class="routerView" />
+      <Feedback/>
+      <Footer/>
+    </div>
+  </div>
+  <Login :isVisible="showLoginForm" @close-login-form="showLoginForm = false" />
+  <Register :isVisible="showRegisterForm" @close-register-form="showRegisterForm = false" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import HeadMenu from '@/views/HeadMenu.vue';
+import Footer from '@/views/Footer.vue';
+import Login from '@/components/login.vue';
+import Register from '@/components/register.vue'; 
+import Feedback from './components/floatingMenu.vue';
+const showLoginForm = ref(false);
+const showRegisterForm = ref(false); // 定义控制注册组件显示的变量
+</script>
+
+<style lang="scss">
+.contain {
+  min-height: calc(100vh - 70px);
+  display: flex;
+  flex-direction: column;
+ .routerView {
+    flex: 1;
+  }
+}
+</style>

src/assets/css/index.css

@@ -0,0 +1,369 @@
+/*默认清楚所有样式*/
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+:root {
+  --bgcolor: #387197;
+}
+
+
+/* 按钮样式 */
+.btn {
+  background: #7354ff;
+  border: medium none;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  margin-bottom: 0;
+  padding: 10px 30px;
+  text-align: center;
+  text-transform: capitalize;
+  touch-action: manipulation;
+  transition: 0.3s;
+  vertical-align: middle;
+  white-space: nowrap;
+  border: 1px solid transparent;
+  box-shadow: none !important;
+  border-radius: 30px;
+}
+
+.btn:hover {
+  background: #000b22;
+  color: #fff;
+  border-color: #000b22;
+}
+
+.active-btn {
+  background: #000b22;
+  color: #fff;
+  border-color: #000b22;
+}
+
+.btn:not(:disabled):not(.disabled):active,
+:focus {
+  color: #7354ff;
+}
+
+.btn:focus {
+  background: #000b22;
+  color: #7354ff;
+  border-color: #000b22;
+}
+
+.btn:active {
+  color: inherit;
+  background: inherit;
+}
+
+/* 页面头部 */
+.header {
+  height: 70px;
+}
+/* 固定定位*/
+.header-list {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 70px;
+  background-color: #fff;
+  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+.header-list .el-row{
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+}
+.header-top {
+  max-width: 1200px;
+  width: 100%;
+  height: 70px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* logo */
+.logo {
+  width: 60px;
+  padding-left: 20px;
+}
+.logo a {
+  background: url("../../assets/image/xiaofa_logo.png");
+  width: 60px;
+  height: 60px;
+  display: inline-block;
+  background-size: contain;
+  outline: none;
+  
+}
+
+/*头部导航*/
+.header-top ul {
+  flex: 1;
+  display: flex;
+  line-height: 60px;
+}
+.header-menu {
+  display: flex;
+  justify-content: center;
+}
+.header-menu li {
+  margin: 0 30px;
+  list-style: none;
+  position: relative;
+}
+
+.header-menu a {
+  text-decoration: none;
+  color: inherit;
+}
+.header-menu li span {
+  font-size: 16px;
+  font-weight: 700;
+}
+/* 伪元素添加下滑选中线 */
+.header-menu li:hover span{
+  color: var(--bgcolor);
+}
+/*TODO 记得搞一个导航active的*/
+.header-menu li::before {
+  content: "";
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  width: 0;
+  height: 100%;
+  border-bottom: 3px solid var(--bgcolor);
+  transition: all 0.2s;
+}
+
+.header-menu li:hover::before {
+  content: "";
+  left: 0;
+  width: 100%;
+}
+
+.header-right {
+  display: flex;
+}
+
+.header-right .start {
+  margin-right: 20px;
+}
+.header-right .start .start-button {
+  background-color: black;
+  border-radius: 20px;
+}
+.header-right .login{
+  margin-right: 20px;
+}
+.header-right .login .login-button {
+  border-radius: 20px;
+}
+.header-right .logout {
+  margin-right: 20px;
+}
+.header-right .logout .logout-button {
+  background-color: red;
+  border-radius: 20px;
+  border: none;
+}
+
+/*公司*/
+.company-detail {
+  display: flex;
+}
+.company-detail img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  padding-right:20px;
+}
+.company-introduce {
+  padding: 20px;
+  letter-spacing: 2px;
+  line-height: 34px;
+  padding-bottom: 0;
+}
+
+/*轮播图*/
+.banner-list {
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+  position: relative;
+}
+.banner-list .el-carousel__container {
+  width: 100%;
+  padding-bottom: 50%; /* 高度自适应宽度的一半 */
+  position: relative;
+}
+.banner-list .el-carousel__item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.banner-list .el-carousel__item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+/*服务*/
+.container-bg {
+  padding: 50px 0;
+}
+
+.index-title {
+  text-align: center;
+}
+
+.index-title h3 {
+  padding-top: 30px;
+  font-size: 42px;
+  font-weight: 700;
+}
+
+.index-title p {
+  font-size: 20px;
+  color: #666;
+  padding: 20px;
+  text-align: center;
+  font-weight: 500;
+  max-width: 580px;
+  margin: 15px auto 0px auto;
+}
+
+.service-contain {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding-top: 30px;
+}
+.service-list {
+  width: 100%;
+}
+.service-list ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+.service-list ul li {
+  list-style: none;
+  width: 30%;
+  height: 211.6px;
+  padding: 30px 20px;
+  text-align: center;
+  box-shadow: 0 15px 25px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+}
+.service-list ul li i::before {
+  font-size: 70px;
+  color: #353535;
+  transition: 0.3s;
+}
+.service-list ul li h4 {
+  font-size: 26px;
+  font-weight: 500;
+  margin-top: 10px;
+  transition: 0.3s;
+}
+.service-list ul li:hover {
+  background: linear-gradient(90.54deg, #7354ff 0.42%, #000b22 102.71%);
+}
+.service-list ul li:hover i::before {
+  color: #fff;
+}
+.service-list ul li:hover h4 {
+  color: #fff;
+}
+.service-list ul li:hover i::before p {
+  color: #fff;
+}
+
+/*页脚*/
+.footer {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  background: #000b22;
+  padding: 20px;
+}
+.footer .row .el-row{
+width: 100%;
+}
+.footer .row {
+  display: flex;
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+  justify-content: center;
+  align-items: center;
+}
+.footer .row p {
+  padding-left: 10px;
+}
+.footer .row ul {
+  padding-left: 10px;
+}
+.footer .logo_text p {
+  color: #fff;
+  font-size: 30px;
+  padding: 20px;
+  font-weight: 800;
+}
+.footer .row .about {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  line-height: 38px;
+}
+.footer .row .contact {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: start;
+  line-height: 38px;
+}
+.footer .row .contact span {
+  color: #b6b6b6;
+}
+.footer .row a {
+  color: #b6b6b6;
+  text-decoration: none;
+}
+
+.footer p {
+  color: #fff;
+}
+.footer li {
+  list-style: none;
+  color: #fff;
+}
+
+.footer .copyright {
+  margin: 10px 0px;
+}
+.footer .copyright p {
+  color: #fff;
+}
+.footer .copyright a {
+  color: #808080;
+  text-decoration: none;
+}

src/components/floatingMenu.vue

@@ -0,0 +1,211 @@
+<template>
+  <!-- <div class="floating-menu" @click="handleClick">
+    <div class="menu-item-wrapper">
+      <el-button class="menu-item" type="primary" @click="showPhone =!showPhone">官方客服</el-button>
+      <div v-show="showPhone" class="phone-popup">
+        <div class="phone-popup-content">
+          <div class="code">
+            <img src="../assets/image/xiaofa_logo.png" alt="">
+          </div>
+          <p>电话：17777525395</p>
+        </div>
+      </div>
+    </div>
+    <el-button class="menu-item" type="primary" @click="navigateTo('feedback')">意见反馈</el-button>
+  </div> -->
+  <div class="floating-menu-mobile" @click="handleClick">
+    <div class="customer-serve">
+      <i class="iconfont icon-kefu" @click="showPhone = !showPhone"></i>
+      <div v-show="showPhone" class="phone-popup">
+        <div class="phone-popup-content">
+          <div class="code">
+            <img src="../assets/image/xiaofa_logo.png" alt="">
+          </div>
+          <p>电话：17777525395</p>
+        </div>
+      </div>
+    </div>
+    <div class="feedback">
+      <i class="iconfont icon-fankui" @click="navigateTo('feedback')"></i>
+    </div>
+    <div class="backToTop" ref="backToTop">
+      <i class="iconfont icon-huidaodingbu" @click="scrollToTop"></i>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { ref, onMounted, onUnmounted } from 'vue';
+
+const router = useRouter();
+const showPhone = ref(false);
+
+const navigateTo = (routeName: string) => {
+  router.push({ name: routeName });
+};
+const backToTop = ref();
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0, //回到顶部
+    left: 0,
+    behavior: "smooth",
+  })
+};
+window.onscroll = function () {
+  // 获取浏览器卷去的高度
+  let high = document.documentElement.scrollTop || document.body.scrollTop; //兼容各浏览器
+  if (high >= 900) {
+    backToTop.value.style.display = "block";
+  } else {
+    backToTop.value.style.display = "none";
+  }
+};
+
+const handleClick = (event: MouseEvent) => {
+  const target = event.target as HTMLElement;
+  const isInside = target.closest('.menu-item-wrapper') || target.closest('.phone-popup') || target.closest('.customer-serve');
+  if (!isInside) {
+    showPhone.value = false;
+  }
+  if (!isInside) {
+    showPhone.value = false;
+  }
+};
+
+onMounted(() => {
+  document.addEventListener('click', handleClick);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClick);
+});
+</script>
+
+<style lang="scss" scoped>
+.floating-menu {
+  position: fixed;
+  right: 5px;
+  bottom: 20%;
+  padding: 10px;
+  z-index: 1000;
+
+  .menu-item {
+    display: block;
+    margin: 5px 0;
+    padding: 8px 15px;
+    border: none;
+    border-radius: 3px;
+    background-color: #007BFF;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+
+    &:hover {
+      background-color: #0056b3;
+    }
+  }
+
+  .menu-item-wrapper {
+    position: relative;
+  }
+
+  .phone-popup {
+    position: absolute;
+    background-color: white;
+    border: 1px solid #ccc;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    top: 50%;
+    left: -180px;
+    transform: translateY(-50%);
+    z-index: 1001;
+  }
+
+  .phone-popup-content {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    justify-content: center;
+    align-items: center;
+
+    .code {
+      img {
+        width: 70px;
+        height: 70px;
+      }
+    }
+  }
+}
+
+.floating-menu-mobile {
+  position: fixed;
+  right: 5px;
+  bottom: 20%;
+  padding: 10px;
+  z-index: 1000;
+  background: white;
+  border-radius: 20%;
+
+  .customer-serve {
+    width: 30px;
+    height: 30px;
+    display: block;
+
+    i {
+      font-size: 30px;
+    }
+
+    margin-bottom: 10px;
+
+    .phone-popup {
+      position: absolute;
+      background-color: white;
+      border: 1px solid #ccc;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
+      border-radius: 5px;
+      top: 50%;
+      left: -180px;
+      transform: translateY(-50%);
+      z-index: 1001;
+    }
+
+    .phone-popup-content {
+      display: flex;
+      flex-direction: column;
+      padding: 10px;
+      justify-content: center;
+      align-items: center;
+
+      .code {
+        img {
+          width: 70px;
+          height: 70px;
+        }
+      }
+    }
+  }
+
+  .feedback {
+    width: 30px;
+    height: 30px;
+    display: block;
+
+    i {
+      font-size: 30px;
+    }
+
+    margin-bottom: 10px;
+  }
+
+  .backToTop {
+    width: 30px;
+    height: 30px;
+    display: none;
+
+    i {
+      font-size: 30px;
+    }
+  }
+}
+</style>

src/components/login.vue

@@ -0,0 +1,243 @@
+<template>
+    <div class="login-box" v-if="isVisible">
+        <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px" :hide-required-asterisk="true">
+            <div class="login-container">
+                <div class="login-close" @click="closeLoginForm">
+                    ×
+                </div>
+                <h4>登录</h4>
+                <div class="passwordLogin">
+                    <div class="login-phone">
+                        <el-form-item label="账号" prop="phoneNumber">
+                            <el-input v-model="formData.phoneNumber" placeholder="请输入账号" />
+                        </el-form-item>
+                    </div>
+                    <div class="login_password">
+                        <el-form-item label="密码" prop="password">
+                            <el-input type="password" v-model="formData.password" placeholder="请输入密码" />
+                        </el-form-item>
+                    </div>
+                    <div class="pic_verifyCode">
+                        <el-form-item label="验证码" prop="captchaCode">
+                            <el-input type="text" v-model="formData.captchaCode" placeholder="请输入验证码" maxlength="4"/>
+                            <img :src="captchaUrl" alt="验证码" @click="refreshCaptcha">
+                        </el-form-item>
+                    </div>
+                    <el-button type="primary" @click="handleLogin">登录</el-button>
+                    <p>注：未入驻的账号请开店入驻成功后再继续</p>
+                </div>
+            </div>
+        </el-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineProps, defineEmits, watch, onMounted, onUnmounted } from 'vue';
+import { useUserStore } from '@/stores/userStore';
+import { useRouter } from 'vue-router';
+import { GetLogin, GetSmsCode, GetVerifyCode, GetAccountLogin } from '../../api/login';
+import { ElMessage } from 'element-plus/es';
+
+const props = defineProps({
+    isVisible: {
+        type: Boolean,
+        default: false
+    }
+});
+const emits = defineEmits(['close-login-form']);
+
+const formData = ref({
+    phoneNumber: '',
+    password: '',
+    captchaCode: ''
+});
+
+const router = useRouter();
+const userStore = useUserStore();
+const verify_token = ref();
+const captchaUrl = ref('');
+const formRef = ref<InstanceType<typeof import('element-plus/es')['ElForm']>>();
+
+const closeLoginForm = () => {
+    emits('close-login-form');
+};
+
+const refreshCaptcha = async () => {
+    verify_token.value = new Date().getTime();
+    const res = await GetVerifyCode({ verify_token: verify_token.value });
+    if (res && res.status === 200) {
+        captchaUrl.value = `https://mall.gpxscs.cn/api/admin/shop/shop-base-config/image?verify_token=${verify_token.value}`;
+    } else {
+        console.log("获取图形验证码失败", res);
+    }
+};
+
+const initCaptcha = async () => {
+    await refreshCaptcha();
+};
+
+initCaptcha();
+
+watch(() => props.isVisible, (newValue) => {
+    if (newValue) {
+        refreshCaptcha();
+    }
+});
+
+const rules = ref({
+    phoneNumber: [
+        { required: true, message: '请输入账号', trigger: 'blur' },
+    ],
+    password: [
+        { required: true, message: '请输入密码', trigger: 'blur' }
+    ],
+    captchaCode: [
+        { required: true, message: '请输入验证码', trigger: 'blur' }
+    ]
+});
+
+const handleLogin = async () => {
+    formRef.value?.validate(async (valid) => {
+        if (valid) {
+            const params = {
+                user_account: formData.value.phoneNumber,
+                user_password: formData.value.password,
+                verify_code: formData.value.captchaCode,
+                verify_token: verify_token.value
+            };
+            const res = await GetAccountLogin(params);
+            if (res && res.data.status === 200) {
+                console.log("登录成功", res);
+                userStore.setToken(res.data.data.token);
+                userStore.setMobilePhone(formData.value.phoneNumber);
+                window.open(`https://mall.gpxscs.cn/admin/#/login?loginInfo=${JSON.parse(JSON.stringify(res.data.data))}`,'_self');
+                formData.value.phoneNumber = '';
+                formData.value.password = '';
+                formData.value.captchaCode = '';
+                console.log(res.data.data);
+                closeLoginForm();
+            } else if(res&&res.data.status===250&&res.data.msg=='用户名或密码错误!'){
+                ElMessage.error('用户名或密码错误!');
+                console.log("操作失败", res.msg);
+            }else if(res&&res.data.status===250&&res.data.msg=='验证码错误'){
+                ElMessage.error('验证码错误');
+            }
+        } else {
+            ElMessage.error('请正确填写登录信息');
+        }
+    });
+};
+
+onMounted(() => {
+    // 可以在这里添加一些初始化的逻辑
+});
+
+onUnmounted(() => {
+    // 可以在这里添加一些清理的逻辑
+});
+</script>
+
+<style lang="scss">
+$primary-color: #007BFF;
+$secondary-color: #6C757D;
+$border-radius: 8px;
+$box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+.login-box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000101;
+}
+.el-message {
+  z-index: 1000102 !important; 
+}
+.login-container {
+    padding: 35px;
+    border-radius: $border-radius;
+    box-shadow: $box-shadow;
+    background-color: #fff;
+    width: 400px;
+    transition: box-shadow 0.3s ease;
+    position: relative;
+
+    &:hover {
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    h4 {
+        color: $primary-color;
+        text-align: center;
+        margin-bottom: 30px;
+        font-size: 24px;
+    }
+
+   .el-form-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    label{
+        width: 100px !important;
+    }
+    }
+
+
+
+   .el-input {
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        padding: 2px;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: $border-radius;
+        font-size: 20px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+
+        &:hover {
+            background-color: #0056b3;
+        }
+    }
+
+   .login-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        font-size: 20px;
+        cursor: pointer;
+        color: $secondary-color;
+
+        &:hover {
+            color: $primary-color;
+        }
+    }
+
+   .passwordLogin {
+        p {
+            margin: 10px;
+            color: red;
+        }
+    }
+
+   .pic_verifyCode img {
+        cursor: pointer;
+        width: 100px;
+        height: 50px;
+        margin-left: 5px;
+    }
+    .el-input{
+        flex: 1;
+    }
+    }
+</style>

src/components/register.vue

@@ -0,0 +1,303 @@
+<template>
+    <div class="register-box" v-if="isVisible">
+        <el-form :model="formData" :rules="rules" ref="formRef" label-width="120px" :hide-required-asterisk="true">
+            <div class="register-container">
+                <!-- 关闭按钮 -->
+                <div class="register-close" @click="closeRegisterForm">
+                    ×
+                </div>
+                <!-- 标题 -->
+                <h4>注册</h4>
+                <!-- 手机号输入项 -->
+                <el-form-item label="手机号" prop="phoneNumber">
+                    <el-input v-model="formData.phoneNumber" placeholder="输入11位手机号" maxlength="11" />
+                </el-form-item>
+                <!-- 验证码输入项 -->
+                <el-form-item label="验证码" prop="verificationCode">
+                    <div class="verifyAndButton">
+                        <el-input v-model="formData.verificationCode" placeholder="输入验证码" style="flex: 1;" maxlength="4" />
+                        <!-- 获取验证码按钮 -->
+                        <button type="button" v-if="!sendCode" :style="{
+                            marginLeft: '10px',
+                            width: '80px',
+                            height: '40px',
+                            fontSize: '14px',
+                            textAlign: 'center',
+                            backgroundColor: formData.phoneNumber.length === 11? 'orange' : 'gray',
+                            cursor: formData.phoneNumber.length === 11? 'pointer' : 'not-allowed'
+                        }"
+                            :disabled="formData.phoneNumber.length!== 11" @click="getVerify_code">获取验证码</button>
+                        <!-- 倒计时按钮 -->
+                        <button v-if="sendCode" :style="{
+                            marginLeft: '10px',
+                            width: '80px',
+                            height: '40px',
+                            fontSize: '14px',
+                            textAlign: 'center',
+                            backgroundColor: 'gray',
+                            cursor: 'not-allowed'
+                        }" disabled>
+                            {{ countdown }}秒后重发
+                        </button>
+                    </div>
+                </el-form-item>
+                <!-- 注册按钮 -->
+                <el-button type="primary" @click="handleRegister">注册</el-button>
+                <p>注：未注册过的手机号将自动注册</p>
+            </div>
+        </el-form>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, defineProps, defineEmits, onMounted, onUnmounted } from 'vue';
+import { useUserStore } from '@/stores/userStore';
+import { useRouter } from 'vue-router';
+import { GetSmsCode, GetLogin } from '../../api/login';
+import { getApproval_status } from '../../api/login';
+import { ElMessage } from 'element-plus';
+
+
+
+const props = defineProps({
+    isVisible: {
+        type: Boolean,
+        default: false
+    }
+});
+const emits = defineEmits(['close-register-form']);
+const formData = ref({
+    phoneNumber: '',
+    verificationCode: ''
+});
+
+const router = useRouter();
+const userStore = useUserStore();
+const sendCode = ref(false);
+const countdown = ref(0);
+let timer: ReturnType<typeof setInterval>;
+const formRef = ref<InstanceType<typeof import('element-plus/es')['ElForm']>>();
+// 移除 verificationError 相关的 ref
+// const verificationError = ref('');
+
+const closeRegisterForm = () => {
+    emits('close-register-form');
+};
+
+const getVerify_code = async () => {
+    const params = {
+        number: formData.value.phoneNumber
+    };
+    const res = await GetSmsCode(params);
+
+    if (res && res.status === 200) {
+        const clicktime = new Date().getTime() + 60000;
+        localStorage.setItem('Countdown', JSON.stringify(clicktime));
+        sendCode.value = true;
+        countdown.value = 60;
+        startCountdown();
+    } else {
+        console.log('获取失败');
+    }
+};
+
+const startCountdown = () => {
+    timer = setInterval(() => {
+        if (countdown.value > 0) {
+            countdown.value--;
+        } else {
+            clearInterval(timer);
+            sendCode.value = false;
+            localStorage.removeItem('Countdown');
+        }
+    }, 1000);
+};
+
+const register = async () => {
+    const params = {
+        user_mobile: formData.value.phoneNumber,
+        rand_key: formData.value.phoneNumber,
+        verify_code: formData.value.verificationCode
+    };
+    const res = await GetLogin(params);
+    if (res && res.status === 200 && res.data && res.data.data) {
+        userStore.setToken(res.data.data.token);
+        userStore.setMobilePhone(formData.value.phoneNumber);
+        formData.value.phoneNumber = '';
+        formData.value.verificationCode = '';
+        closeRegisterForm();
+
+        try {
+            const approvalRes = await getApproval_status();
+            if (approvalRes.data.code === 0 && approvalRes.data.status === 200) {
+                const approvalStatus = approvalRes.data.data.approval_status;
+                localStorage.setItem('approval_status', approvalStatus);
+                if (approvalStatus == '4') {
+                    router.push({ name: 'start' });
+                } else {
+                    router.push({ name: 'check' });
+                }
+            }
+        } catch (error) {
+            console.error('获取审批状态失败:', error);
+        }
+    } else {
+        if (res.data.status === 250) {
+            // 使用 ElMessage 提示验证码错误
+            ElMessage.error('验证码错误');
+        } else {
+            console.log('操作返回的信息', res.data.msg);
+            console.log('hhhhh', res);
+        }
+    }
+};
+
+const rules = ref({
+    phoneNumber: [
+        { required: true, message: '请输入手机号', trigger: 'blur' },
+        { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的11位手机号', trigger: 'blur' }
+    ],
+    verificationCode: [
+        { required: true, message: '请输入验证码', trigger: 'blur' }
+    ]
+});
+
+const handleRegister = () => {
+    formRef.value?.validate((valid) => {
+        if (valid) {
+            register();
+        } else {
+            ElMessage.error('请正确填写注册信息！');
+        }
+    });
+};
+
+
+onMounted(() => {
+    const savedCountdown = localStorage.getItem('Countdown');
+    if (savedCountdown) {
+        const clicktime = JSON.parse(savedCountdown) as number;
+        const currentTime = new Date().getTime();
+        const remainingTime = (clicktime - currentTime) / 1000;
+        if (remainingTime > 0) {
+            sendCode.value = true;
+            countdown.value = Math.ceil(remainingTime);
+            startCountdown();
+        } else {
+            localStorage.removeItem('Countdown');
+            sendCode.value = false;
+        }
+    }
+});
+
+onUnmounted(() => {
+    if (timer) {
+        clearInterval(timer);
+    }
+});
+</script>
+
+<style lang="scss">
+$primary-color: #007BFF;
+$secondary-color: #6C757D;
+$border-radius: 8px;
+$box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+
+.register-box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.4);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000101;
+}
+.el-message {
+  z-index: 1000102 !important; // 确保这个值高于遮罩层的 z-index
+}
+.register-container {
+    padding: 35px;
+    border-radius: $border-radius;
+    box-shadow: $box-shadow;
+    background-color: #fff;
+    width: 400px;
+    transition: box-shadow 0.3s ease;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    &:hover {
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    }
+
+    h4 {
+        color: $primary-color;
+        text-align: center;
+        margin-bottom: 30px;
+        font-size: 24px;
+    }
+
+    .el-form-item {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    label{
+        width: 100px !important;
+    }
+    }
+    .el-input {
+        width: 100%;
+    }
+
+    .verifyAndButton {
+        display: flex;
+        width: 100%;
+    }
+
+    button {
+        width: 100%;
+        padding: 2px;
+        background-color: #007BFF;
+        color: #fff;
+        border: none;
+        border-radius: $border-radius;
+        font-size: 20px;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+
+        &:hover {
+            background-color: #0056b3;
+        }
+    }
+
+    .register-close {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        font-size: 20px;
+        cursor: pointer;
+        color: $secondary-color;
+
+        &:hover {
+            color: $primary-color;
+        }
+    }
+
+    .error-message {
+        // 由于已经移除相关的 div，这里的样式可以删除或保留（如果后续可能复用）
+        color: red;
+        margin-top: 5px;
+        font-size: 12px;
+    }
+
+    p {
+        color: red;
+        margin: 10px 0;
+    }
+}
+</style>

src/entity/formData.ts

@@ -0,0 +1,34 @@
+export interface formData {
+    bank_name: string;
+    bank_branch_name: string;
+    account_number: string;
+    account_holder_name: string;
+    biz_category: number;
+    biz_license_company: string;
+    biz_license_image: string;
+    biz_license_number: string;
+    biz_second_category: number;
+    city_id: number;
+    contact_name: string;
+    county_id: number;
+    entity_type: number;
+    environment_image: string;
+    front_facade_image: string;
+    individual_id_images: string;
+    individual_id_images2: string;
+    individual_id_number: string;
+    legal_person_id_images: string;
+    legal_person_id_images2: string;
+    legal_person_id_number: string;
+    legal_person_mobile: string;
+    legal_person_name: string;
+    license_image: string;
+    license_number: string;
+    license_type: number;
+    login_mobile: string;
+    province_id: number;
+    store_address: string;
+    store_latitude: number;
+    store_longitude: number;
+    store_name: string;
+}

src/main.ts

@@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import router from './router/index'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css';
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import App from './App.vue'
+import '@/assets/css/index.css'
+import '../public/xiaofa-font/iconfont.css'
+
+const app = createApp(App);
+const pinia = createPinia()
+app.use(pinia)
+app.use(router)
+//启用element 国际化，并且启用element-plus
+app.use(ElementPlus,{
+    locale: zhCn,
+  })
+app.mount('#app')
+
+
+

src/router/index.ts

@@ -0,0 +1,51 @@
+import {createRouter,createWebHashHistory,createWebHistory} from 'vue-router'
+
+
+const routes=[
+    {   
+        path:'/',
+        name:'',
+        component:()=>import('../views/index/index.vue')
+    },
+    {   
+        path:'/index',
+        name:'index',
+        component:()=>import('../views/index/index.vue')
+    },
+    {   
+        path:'/help',
+        name:'help',
+        component:()=>import('../views/help/Help.vue')
+    },
+    {   
+        path:'/about',
+        name:'about',
+        component:()=>import('../views/about/About.vue')
+    },
+    {
+        path:'/start',
+        name:'start',
+        component:()=>import('../views/start/start.vue')
+    },
+    {
+        path:'/feedback',
+        name:'feedback',
+        component:()=>import('../views/feedback/FeedBack.vue')
+    },
+    {
+        path:'/check',
+        name:'check',
+        component:()=>import('../views/start/check.vue')
+    },
+];
+const router = createRouter({
+    history:createWebHistory(),
+    // history:createWebHashHistory(),
+    routes,
+    scrollBehavior(to, from, savedPosition) {
+        // 总是滚动到顶部D
+        return { top: 0 };
+      },
+})
+
+export default router;

src/stores/bank.ts

@@ -0,0 +1,656 @@
+const bankList=[
+    {
+        value:'CDB',
+        text:'国家开发银行'
+    },
+    {
+        value:'ICBC',
+        text:'中国工商银行'
+    },
+    {
+        value:'ABC',
+        text:'中国农业银行'
+    },
+    {
+        value:'BOC',
+        text:'中国银行'
+    },
+    {
+        value:'CCB',
+        text:'中国建设银行'
+    },
+    {
+        value:'PSBC',
+        text:'中国邮政储蓄银行'
+    },
+    {
+        value:'COMM',
+        text:'交通银行'
+    },
+    {
+        value:'CMB',
+        text:'招商银行'
+    },
+    {
+        value:'SPDB',
+        text:'上海浦东发展银行'
+    },
+    {
+        value:'CIB',
+        text:'兴业银行'
+    },
+    {
+        value:'HXBANK',
+        text:'华夏银行'
+    },
+    {
+        value:'GDB',
+        text:'广东发展银行'
+    },
+    {
+        value:'CMBC',
+        text:'中国民生银行'
+    },
+    {
+        value:'CITIC',
+        text:'中信银行'
+    },
+    {
+        value:'CEB',
+        text:'中国光大银行'
+    },
+    {
+        value:'EGBANK',
+        text:'恒丰银行'
+    },
+    {
+        value:'CZBANK',
+        text:'浙商银行'
+    },
+    {
+        value:'BOHAIB',
+        text:'渤海银行'
+    },
+    {
+        value:'SPABANK',
+        text:'平安银行'
+    },
+    {
+        value:'SHRCB',
+        text:'上海农村商业银行'
+    },
+    {
+        value:'YXCCB',
+        text:'玉溪市商业银行'
+    },
+    {
+        value:'YDRCB',
+        text:'尧都农商行'
+    },
+    {
+        value:'BJBANK',
+        text:'北京银行'
+    },
+    {
+        value:'SHBANK',
+        text:'上海银行'
+    },
+    {
+        value:'JSBANK',
+        text:'江苏银行'
+    },
+    {
+        value:'HZCB',
+        text:'杭州银行'
+    },
+    {
+        value:'NJCB',
+        text:'南京银行'
+    },
+    {
+        value:'NBBANK',
+        text:'宁波银行'
+    },
+    {
+        value:'HSBANK',
+        text:'徽商银行'
+    },
+    {
+        value:'CSCB',
+        text:'长沙银行'
+    },
+    {
+        value:'CDCB',
+        text:'成都银行'
+    },
+    {
+        value:'CQBANK',
+        text:'重庆银行'
+    },
+    {
+        value:'DLB',
+        text:'大连银行'
+    },
+    {
+        value:'NCB',
+        text:'南昌银行'
+    },
+    {
+        value:'FJHXBC',
+        text:'福建海峡银行'
+    },
+    {
+        value:'HKB',
+        text:'汉口银行'
+    },
+    {
+        value:'WZCB',
+        text:'温州银行'
+    },
+    {
+        value:'QDCCB',
+        text:'青岛银行'
+    },
+    {
+        value:'TZCB',
+        text:'台州银行'
+    },
+    {
+        value:'JXBANK',
+        text:'嘉兴银行'
+    },
+    {
+        value:'CSRCB',
+        text:'常熟农村商业银行'
+    },
+    {
+        value:'NHB',
+        text:'南海农村信用联社'
+    },
+    {
+        value:'CZRCB',
+        text:'常州农村信用联社'
+    },
+    {
+        value:'H3CB',
+        text:'内蒙古银行'
+    },
+    {
+        value:'SXCB',
+        text:'绍兴银行'
+    },
+    {
+        value:'SDEB',
+        text:'顺德农商银行'
+    },
+    {
+        value:'WJRCB',
+        text:'吴江农商银行'
+    },
+    {
+        value:'ZBCB',
+        text:'齐商银行'
+    },
+    {
+        value:'GYCB',
+        text:'贵阳市商业银行'
+    },
+    {
+        value:'ZYCBANK',
+        text:'遵义市商业银行'
+    },
+    {
+        value:'HZCCB',
+        text:'湖州市商业银行'
+    },
+    {
+        value:'DAQINGB',
+        text:'龙江银行'
+    },
+    {
+        value:'JINCHB',
+        text:'晋城银行JCBANK'
+    },
+    {
+        value:'ZJTLCB',
+        text:'浙江泰隆商业银行'
+    },
+    {
+        value:'GDRCC',
+        text:'广东省农村信用社联合社'
+    },
+    {
+        value:'DRCBCL',
+        text:'东莞农村商业银行'
+    },
+    {
+        value:'MTBANK',
+        text:'浙江民泰商业银行'
+    },
+    {
+        value:'GCB',
+        text:'广州银行'
+    },
+    {
+        value:'LYCB',
+        text:'辽阳市商业银行'
+    },
+    {
+        value:'JSRCU',
+        text:'江苏省农村信用联合社'
+    },
+    {
+        value:'LANGFB',
+        text:'廊坊银行'
+    },
+    {
+        value:'CZCB',
+        text:'浙江稠州商业银行'
+    },
+    {
+        value:'DYCB',
+        text:'德阳商业银行'
+    },
+    {
+        value:'JZBANK',
+        text:'晋中市商业银行'
+    },
+    {
+        value:'BOSZ',
+        text:'苏州银行'
+    },
+    {
+        value:'GLBANK',
+        text:'桂林银行'
+    },
+    {
+        value:'URMQCCB',
+        text:'乌鲁木齐市商业银行'
+    },
+    {
+        value:'CDRCB',
+        text:'成都农商银行'
+    },
+    {
+        value:'ZRCBANK',
+        text:'张家港农村商业银行'
+    },
+    {
+        value:'BOD',
+        text:'东莞银行'
+    },
+    {
+        value:'LSBANK',
+        text:'莱商银行'
+    },
+    {
+        value:'BJRCB',
+        text:'北京农村商业银行'
+    },
+    {
+        value:'TRCB',
+        text:'天津农商银行'
+    },
+    {
+        value:'SRBANK',
+        text:'上饶银行'
+    },
+    {
+        value:'FDB',
+        text:'富滇银行'
+    },
+    {
+        value:'CRCBANK',
+        text:'重庆农村商业银行'
+    },
+    {
+        value:'ASCB',
+        text:'鞍山银行'
+    },
+    {
+        value:'NXBANK',
+        text:'宁夏银行'
+    },
+    {
+        value:'BHB',
+        text:'河北银行'
+    },
+    {
+        value:'HRXJB',
+        text:'华融湘江银行'
+    },
+    {
+        value:'ZGCCB',
+        text:'自贡市商业银行'
+    },
+    {
+        value:'YNRCC',
+        text:'云南省农村信用社'
+    },
+    {
+        value:'JLBANK',
+        text:'吉林银行'
+    },
+    {
+        value:'DYCCB',
+        text:'东营市商业银行'
+    },
+    {
+        value:'KLB',
+        text:'昆仑银行'
+    },
+    {
+        value:'ORBANK',
+        text:'鄂尔多斯银行'
+    },
+    {
+        value:'XTB',
+        text:'邢台银行'
+    },
+    {
+        value:'JSB',
+        text:'晋商银行'
+    },
+    {
+        value:'TCCB',
+        text:'天津银行'
+    },
+    {
+        value:'BOYK',
+        text:'营口银行'
+    },
+    {
+        value:'JLRCU',
+        text:'吉林农信'
+    },
+    {
+        value:'SDRCU',
+        text:'山东农信'
+    },
+    {
+        value:'XABANK',
+        text:'西安银行'
+    },
+    {
+        value:'HBRCU',
+        text:'河北省农村信用社'
+    },
+    {
+        value:'NXRCU',
+        text:'宁夏黄河农村商业银行'
+    },
+    {
+        value:'GZRCU',
+        text:'贵州省农村信用社'
+    },
+    {
+        value:'FXCB',
+        text:'阜新银行'
+    },
+    {
+        value:'HBHSBANK',
+        text:'湖北银行黄石分行'
+    },
+    {
+        value:'ZJNX',
+        text:'浙江省农村信用社联合社'
+    },
+    {
+        value:'XXBANK',
+        text:'新乡银行'
+    },
+    {
+        value:'HBYCBANK',
+        text:'湖北银行宜昌分行'
+    },
+    {
+        value:'LSCCB',
+        text:'乐山市商业银行'
+    },
+    {
+        value:'TCRCB',
+        text:'江苏太仓农村商业银行'
+    },
+    {
+        value:'BZMD',
+        text:'驻马店银行'
+    },
+    {
+        value:'GZB',
+        text:'赣州银行'
+    },
+    {
+        value:'WRCB',
+        text:'无锡农村商业银行'
+    },
+    {
+        value:'BGB',
+        text:'广西北部湾银行'
+    },
+    {
+        value:'GRCB',
+        text:'广州农商银行'
+    },
+    {
+        value:'JRCB',
+        text:'江苏江阴农村商业银行'
+    },
+    {
+        value:'BOP',
+        text:'平顶山银行'
+    },
+    {
+        value:'TACCB',
+        text:'泰安市商业银行'
+    },
+    {
+        value:'CGNB',
+        text:'南充市商业银行'
+    },
+    {
+        value:'CCQTGB',
+        text:'重庆三峡银行'
+    },
+    {
+        value:'XLBANK',
+        text:'中山小榄村镇银行'
+    },
+    {
+        value:'HDBANK',
+        text:'邯郸银行'
+    },
+    {
+        value:'KORLABANK',
+        text:'库尔勒市商业银行'
+    },
+    {
+        value:'BOJZ',
+        text:'锦州银行'
+    },
+    {
+        value:'QLBANK',
+        text:'齐鲁银行'
+    },
+    {
+        value:'BOQH',
+        text:'青海银行'
+    },
+    {
+        value:'YQCCB',
+        text:'阳泉银行'
+    },
+    {
+        value:'SJBANK',
+        text:'盛京银行'
+    },
+    {
+        value:'FSCB',
+        text:'抚顺银行'
+    },
+    {
+        value:'ZZBANK',
+        text:'郑州银行'
+    },
+    {
+        value:'SRCB',
+        text:'深圳农村商业银行'
+    },
+    {
+        value:'BANKWF',
+        text:'潍坊银行'
+    },
+    {
+        value:'JJBANK',
+        text:'九江银行'
+    },
+    {
+        value:'JXRCU',
+        text:'江西省农村信用'
+    },
+    {
+        value:'HNRCU',
+        text:'河南省农村信用'
+    },
+    {
+        value:'GSRCU',
+        text:'甘肃省农村信用'
+    },
+    {
+        value:'SCRCU',
+        text:'四川省农村信用'
+    },
+    {
+        value:'GXRCU',
+        text:'广西省农村信用'
+    },
+    {
+        value:'SXRCCU',
+        text:'陕西信合'
+    },
+    {
+        value:'WHRCB',
+        text:'武汉农村商业银行'
+    },
+    {
+        value:'YBCCB',
+        text:'宜宾市商业银行'
+    },
+    {
+        value:'KSRB',
+        text:'昆山农村商业银行'
+    },
+    {
+        value:'SZSBK',
+        text:'石嘴山银行'
+    },
+    {
+        value:'HSBK',
+        text:'衡水银行'
+    },
+    {
+        value:'XYBANK',
+        text:'信阳银行'
+    },
+    {
+        value:'NBYZ',
+        text:'鄞州银行'
+    },
+    {
+        value:'ZJKCCB',
+        text:'张家口市商业银行'
+    },
+    {
+        value:'XCYH',
+        text:'许昌银行'
+    },
+    {
+        value:'JNBANK',
+        text:'济宁银行'
+    },
+    {
+        value:'CBKF',
+        text:'开封市商业银行'
+    },
+    {
+        value:'WHCCB',
+        text:'威海市商业银行'
+    },
+    {
+        value:'HBC',
+        text:'湖北银行'
+    },
+    {
+        value:'BOCD',
+        text:'承德银行'
+    },
+    {
+        value:'BODD',
+        text:'丹东银行'
+    },
+    {
+        value:'JHBANK',
+        text:'金华银行'
+    },
+    {
+        value:'BOCY',
+        text:'朝阳银行'
+    },
+    {
+        value:'LSBC',
+        text:'临商银行'
+    },
+    {
+        value:'BSB',
+        text:'包商银行'
+    },
+    {
+        value:'LZYH',
+        text:'兰州银行'
+    },
+    {
+        value:'BOZK',
+        text:'周口银行'
+    },
+    {
+        value:'DZBANK',
+        text:'德州银行'
+    },
+    {
+        value:'SCCB',
+        text:'三门峡银行'
+    },
+    {
+        value:'AYCB',
+        text:'安阳银行'
+    },
+    {
+        value:'ARCU',
+        text:'安徽省农村信用社'
+    },
+    {
+        value:'HURCB',
+        text:'湖北省农村信用社'
+    },
+    {
+        value:'HNRCC',
+        text:'湖南省农村信用社'
+    },
+    {
+        value:'NYNB',
+        text:'广东南粤银行'
+    },
+    {
+        value:'LYBANK',
+        text:'洛阳银行'
+    },
+    {
+        value:'NHQS',
+        text:'农信银清算中心'
+    },
+    {
+        value:'CBBQS',
+        text:'城市商业银行资金清算中心'
+    }
+];
+
+export default bankList

src/stores/formConfig.ts

@@ -0,0 +1,304 @@
+const baseInfo = [
+  {
+    key:'store_name',
+    label:'店铺名称',
+  },
+  {
+    key:'biz_category',
+    label:'经营品类',
+  },
+  {
+    key:'contact_name',
+    label:'联系人',
+  },
+]
+
+const addressInfo = [
+  {
+    key:'mapAddress',
+    label:'地图地址',
+  },
+  {
+    key:'store_address',
+    label:'详细地址',
+  },
+  {
+    key:'storefrontImg',
+    label:'门脸图',
+  },
+  {
+    key:'surroundingsImg',
+    label:'环境图',
+  },
+]
+
+const certificate = [
+  {
+    key:'biz_license_company',
+    label:'公司名',
+  },
+  {
+    key:'biz_license_number',
+    label:'营业执照编号',
+  },
+  {
+    key:'biz_license_image',
+    label:'营业执照图片',
+  },
+  {
+    key:'license_type',
+    label:'许可证类型',
+  },
+  {
+    key:'license_number',
+    label:'许可证编号',
+  },
+  {
+    key:'license_image',
+    label:'许可证图片',
+  },
+  {
+    key:'legal_person_name',
+    label:'法人姓名',
+  },
+  {
+    key:'legal_person_mobile',
+    label:'法人手机号',
+  },
+  {
+    key:'legal_person_id_number',
+    label:'法人身份证号码',
+  },
+  {
+    key:'legal_person_id_images',
+    label:'法人身份证正面图片',
+  },
+  {
+    key:'legal_person_id_images2',
+    label:'法人身份证反面图片',
+  },
+]
+
+
+const certificate2  = [
+  {
+    key:'individual_id_number',
+    label:'身份证号码',
+    placeholder:'地图地址',
+  },
+  {
+    key:'individual_id_images',
+    label:'身份证正面图片',
+    placeholder:'地图地址',
+  },
+  {
+    key:'individual_id_images2',
+    label:'身份证反面图片',
+    placeholder:'地图地址',
+  },
+]
+
+const bankInfo = [
+  {
+    key:'bank_name',
+    label:'开户银行',
+  },
+  {
+    key:'bank_branch_name',
+    label:'开户银行的支行名称',
+  },
+  {
+    key:'account_number',
+    label:'收款账户号码',
+  },
+  {
+    key:'account_holder_name',
+    label:'收款账户姓名',
+  },
+]
+
+const formConfig =  [
+  {
+    key:'contact_name',
+    label:'联系人',
+  },
+  {
+    key:'biz_category',
+    label:'经营品类',
+  },
+  {
+    key:'store_name',
+    label:'店铺名称',
+  },
+  {
+    key:'mapAddress',
+    label:'地图地址',
+  },
+  {
+    key:'store_address',
+    label:'详细地址',
+  },
+  {
+    key:'storefrontImg',
+    label:'门脸图',
+  },
+  {
+    key:'surroundingsImg',
+    label:'环境图',
+  },
+  {
+    key:'entity_type',
+    label:'许可证类型',
+  },
+  {
+    key:'license_number',
+    label:'许可证编号',
+  },
+  {
+    key:'biz_license_number',
+    label:'营业执照编号',
+  },
+  {
+    key:'biz_license_company',
+    label:'营业执照公司名或真实的公司名',
+  },
+  {
+    key:'legal_person_name',
+    label:'法人姓名',
+  },
+  {
+    key:'legal_person_mobile',
+    label:'法人手机号',
+  },
+  {
+    key:'legal_person_id_number',
+    label:'法人身份证号码',
+  },
+  {
+    key:'biz_license_image',
+    label:'营业执照图片',
+  },
+  {
+    key:'license_type',
+    label:'许可证类型',
+  },
+  {
+    key:'license_number',
+    label:'许可证编号',
+  },
+  {
+    key:'license_image',
+    label:'许可证图片',
+  },
+  {
+    key:'legal_person_id_images',
+    label:'法人身份证正面图片',
+  },
+  {
+    key:'legal_person_id_images2',
+    label:'法人身份证反面图片',
+  },
+  {
+    key:'bank_name',
+    label:'开户银行',
+  },
+  {
+    key:'bank_branch_name',
+    label:'开户银行的支行名称',
+  },
+  {
+    key:'account_number',
+    label:'收款账户号码',
+  },
+  {
+    key:'account_holder_name',
+    label:'收款账户姓名',
+  },
+  {
+    key:'account_holder_name',
+    label:'收款账户姓名',
+  },
+]
+
+const formConfig2=[
+  {
+    key:'contact_name',
+    label:'联系人',
+    placeholder:'请输入联系人',
+  },
+  {
+    key:'biz_category',
+    label:'经营品类',
+    placeholder:'请选择经营品类',
+  },
+  {
+    key:'store_name',
+    label:'门店名称',
+    placeholder:'请输入门店名称',
+  },
+  {
+    key:'mapAddress',
+    label:'地图地址',
+    placeholder:'请在地图上选择门店地址',
+  },
+  {
+    key:'store_address',
+    label:'详细地址',
+    placeholder:'详细地址:如:人民大道205号2楼213',
+  },
+  {
+    key:'storefrontImg',
+    label:'门脸图',
+    placeholder:''
+  },
+  {
+    key:'surroundingsImg',
+    label:'环境图',
+    placeholder:'',
+  },
+  {
+    key:'individual_id_number',
+    label:'身份证号码',
+    placeholder:'地图地址',
+  },
+  {
+    key:'individual_id_images',
+    label:'身份证正面图片',
+    placeholder:'地图地址',
+  },
+  {
+    key:'individual_id_images2',
+    label:'身份证反面图片',
+    placeholder:'地图地址',
+  },
+  {
+    key:'bank_name',
+    label:'开户银行',
+  },
+  {
+    key:'bank_branch_name',
+    label:'开户银行的支行名称',
+  },
+  {
+    key:'account_number',
+    label:'收款账户号码',
+  },
+  {
+    key:'account_holder_name',
+    label:'收款账户姓名',
+  },
+  {
+    key:'account_holder_name',
+    label:'收款账户姓名',
+  },
+]
+
+export default {
+   formConfig,
+   formConfig2,
+   baseInfo,
+   addressInfo,
+   certificate,
+   certificate2,
+   bankInfo,
+}

src/stores/userStore.ts

@@ -0,0 +1,75 @@
+import { defineStore } from "pinia";
+import { ref, onMounted } from "vue";
+
+export const useUserStore = defineStore("user", () => {
+  const token = ref("");
+  const isLoggedIn = ref(false);
+
+  const setToken = (newToken: string) => {
+    token.value = newToken;
+    isLoggedIn.value = true;
+    const expiryTime = Date.now() + 31536000 * 1000; // 当前时间 + 1 年
+    localStorage.setItem("token", newToken);
+    localStorage.setItem("tokenExpiry", expiryTime.toString()); // 保存过期时间
+  };
+  const setMobilePhone = (phone: string) => {
+    localStorage.setItem("mobilePhone", phone);
+  };
+  const removeMobilePhone=()=>{
+    localStorage.removeItem("mobilePhone");
+  }
+  // const setMerchStatus=(merchStatus:string)=>{
+  //   localStorage.setItem("merchStatus",merchStatus)
+  // }
+  const clearToken = () => {
+    try {
+      token.value = "";
+      isLoggedIn.value = false;
+      localStorage.removeItem("token");
+      localStorage.removeItem("tokenExpiry"); // 删除过期时间
+    } catch (error) {
+      console.error("Error clearing token from localStorage:", error);
+    }
+  };
+
+  const isTokenExpired = () => {
+    try {
+      const expiryTime = localStorage.getItem("tokenExpiry");
+      if (!expiryTime) return true; // 如果没有过期时间，认为已过期
+      return Date.now() > parseInt(expiryTime, 10); // 当前时间是否超过过期时间
+    } catch (error) {
+      console.error("Error checking token expiry:", error);
+      return true; // 默认认为已过期
+    }
+  };
+  const setIdentity=(Identity:string)=>{
+    localStorage.setItem("Identity", Identity);
+  }
+  const removeIdentity=()=>{
+    localStorage.removeItem('Identity')
+  }
+  onMounted(() => {
+    try {
+      const storedToken = localStorage.getItem("token");
+      if (storedToken && !isTokenExpired()) {
+        token.value = storedToken;
+        isLoggedIn.value = true;
+      } else {
+        clearToken(); // 如果 token 过期，清除 token
+      }
+    } catch (error) {
+      console.error("Error retrieving token from localStorage:", error);
+    }
+  });
+
+  return {
+    token,
+    isLoggedIn,
+    setToken,
+    clearToken,
+    setMobilePhone,
+    removeMobilePhone,
+    setIdentity,
+    removeIdentity
+  };
+});

src/views/Footer.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="footer">
+   
+      <div class="row">
+        <el-row>
+        <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
+          <div class="logo_text">
+            <p>XIAOFA</p>
+          </div>
+        </el-col>
+        <el-col :xs="6" :sm="6" :md="8" :lg="8" :xl="8">
+          <div class="about">
+            <p>关于</p>
+            <ul>
+              <li v-for="a in aboutList" :key="a.id">
+                <router-link :to="{ name: 'about' }">{{ a.title }}</router-link>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+        <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8">
+          <div class="contact">
+            <p>联系我们</p>
+            <ul>
+              <li v-for="c in contactList" :key="c.id">
+                <span>{{ c.title }}</span>
+              </li>
+            </ul>
+          </div>
+        </el-col>
+      </el-row>
+      </div>
+
+    <div class="copyright">
+    <p>&copy;桂平发发网络有限公司版权所有&nbsp;
+      <a href="https://beian.miit.gov.cn" target="_blank">桂ICP备2024040484号-1</a>&nbsp;&nbsp;
+      <a href="https://beian.miit.gov.cn" target="_blank">经营许可证编号:桂B2-20240661</a>&nbsp;&nbsp;
+      <a @click.prevent="openLicenseImage">营业执照</a>
+    </p>
+  </div>
+  </div>
+
+
+</template>
+
+<script setup lang="ts">
+
+let aboutList = [
+  { id: 1, title: "关于我们" },
+  { id: 2, title: "加入我们" }
+];
+
+let contactList = [
+  { id: 1, title: "电话-17777525395" },
+  { id: 2, title: "邮箱-17777525395@163.com" },
+  { id: 3, title: "地址:广西贵港市桂平市西山镇桂南路盐业大厦对面4楼" },
+];
+
+const openLicenseImage = () => {
+  const toUrl = "https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/media/media/plantform/default/20250407/dcd90acd12634546b46a701698af30a1.png"
+  window.open()?.document.write(`<!DOCTYPE html><html><body><img src='${toUrl}'/></body></html>`);
+};
+
+</script>
+
+<style lang="scss">
+.copyright a {
+  cursor: pointer;
+}
+</style>

src/views/HeadMenu.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="header">
+    <div class="header-list">
+      <el-row>
+        <div class="header-top">
+          <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
+            <div class="logo">
+              <router-link :to="{ name: 'index' }"></router-link>
+            </div>
+          </el-col>
+          <el-col :xs="14" :sm="14" :md="14" :lg="14" :xl="14">
+            <ul class="header-menu">
+              <router-link v-for="(item, index) in headlist" :key="index" :to="item.path">
+                <li><span>{{ item.title }}</span></li>
+              </router-link>
+            </ul>
+          </el-col>
+          <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
+            <div class="header-right">
+              <!-- 免费开店按钮始终可见 -->
+              <div class="start">
+                <el-button type="primary" size="default" @click="handleOpenStartPage" class="start-button">
+                  免费开店
+                </el-button>
+              </div>
+              <!-- 根据登录状态显示不同按钮 -->
+              <div class="login">
+                <el-button type="primary" size="default" @click="openLoginForm" class="login-button">
+                  商家登录
+                </el-button>
+              </div>
+              <div v-if="isLoggedIn" class="logout">
+                <el-button type="primary" size="default" @click="logout" class="logout-button">
+                  退出登录
+                </el-button>
+              </div>
+            </div>
+          </el-col>
+        </div>
+      </el-row>
+    </div>
+    <div class="login-register-module">
+      <span @click="handleOpenStartPage">开店</span>
+      <span>|</span>
+      <span @click="openLoginForm">登录</span>
+      <span v-if="isLoggedIn" @click="logout">退出登录</span>
+    </div>
+    <!-- 汉堡菜单 -->
+    <div class="hamburger-menu" @click="toggleMenu">
+      <span :class="{ 'hamburger-icon': true, 'rotate-top': isMenuOpen, }"></span>
+      <span :class="{ 'hamburger-icon': true, 'hide-middle': isMenuOpen }"></span>
+      <span :class="{ 'hamburger-icon': true, 'rotate-bottom': isMenuOpen }"></span>
+    </div>
+    <div :class="{ 'mobile-menu': true, 'open': isMenuOpen }">
+      <ul class="mobile-menu-list">
+        <li v-for="(item, index) in headlist" :key="index">
+          <router-link :to="item.path" @click="toggleMenu">
+            <span>{{ item.title }}</span>
+          </router-link>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '@/stores/userStore';
+import { getApproval_status } from '../../api/login';
+
+const emits = defineEmits(['open-login-form', 'open-register-form']);
+
+const openLoginForm = () => {
+  emits('open-login-form');
+};
+
+const openRegisterForm = () => {
+  emits('open-register-form');
+};
+
+// 导航栏数据
+const headlist = ref([
+  { title: '首页', path: '/index' },
+  { title: '使用教程', path: '/help' },
+  { title: '关于我们', path: '/about' },
+]);
+const toRouter=(pathString:string)=>{
+  router.push({path:pathString})
+}
+const router = useRouter();
+const userStore = useUserStore();
+
+// 从 userStore 中获取登录状态
+const isLoggedIn = ref(userStore.isLoggedIn);
+
+// 每次页面加载时检查 token
+onMounted(() => {
+  const storedToken = localStorage.getItem('token');
+  if (storedToken) {
+    userStore.setToken(storedToken); // 如果有 token，设置 token 并更新登录状态
+  }
+  isLoggedIn.value = userStore.isLoggedIn; // 更新登录状态
+});
+
+// 监听 userStore.isLoggedIn 的变化
+watch(() => userStore.isLoggedIn, (newVal) => {
+  isLoggedIn.value = newVal; // 确保 isLoggedIn 始终与 userStore.isLoggedIn 保持一致
+  if (isLoggedIn.value === null) console.log("登陆过期");
+  // getApproval_status().then((res) => {
+  //   if (res.data.code === 0 && res.data.status === 200) {
+  //     localStorage.setItem('approval_status', res.data.data.approval_status);
+  //   } else {
+
+  //   }
+  // });
+});
+
+// 处理免费开店按钮点击事件
+const handleOpenStartPage = () => {
+  if (isLoggedIn.value) {
+    if (localStorage.getItem('approval_status') != null && localStorage.getItem('approval_status') === '4') {
+      router.push({ name: 'start' });
+    } else {
+      router.push({ name: 'check' }); // 已登录跳转到 check 页面
+    }
+  } else {
+    openRegisterForm(); // 未登录弹出注册组件
+  }
+};
+
+// 退出登录函数
+const logout = () => {
+  userStore.clearToken();
+  userStore.removeMobilePhone();
+  userStore.removeIdentity();
+  isLoggedIn.value = false; // 更新登录状态为未登录
+  router.push('/'); // 可以根据需求跳转到其他页面
+};
+
+// 汉堡菜单相关逻辑
+const isMenuOpen = ref(false);
+
+const toggleMenu = () => {
+  isMenuOpen.value = !isMenuOpen.value;
+};
+
+// 监听窗口 resize 事件
+let resizeHandler: () => void;
+onMounted(() => {
+  resizeHandler = () => {
+    const clientWidth = document.documentElement.clientWidth;
+    const isMobile = clientWidth <= 768;
+    if (!isMobile && isMenuOpen.value) {
+      isMenuOpen.value = false;
+    }
+  };
+  window.addEventListener('resize', resizeHandler);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', resizeHandler);
+});
+</script>
+
+<style scoped>
+
+.hamburger-menu {
+  position: fixed; /* 修改为固定定位 */
+  top: 20px; /* 调整顶部位置 */
+  right: 20px; /* 调整右侧位置 */
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  z-index: 10011; /* 设置比 header-list 更高的 z-index */
+  display: none;
+}
+
+.hamburger-icon {
+  display: block;
+  width: 100%;
+  height: 3px;
+  background-color: #303133;
+  margin: 5px 0;
+  transition: all 0.3s ease-in-out;
+  transform-origin: center;
+}
+
+.rotate-top {
+  transform: translateY(8px) rotate(45deg);
+}
+
+.hide-middle {
+  opacity: 0;
+}
+
+.rotate-bottom {
+  transform: translateY(-8px) rotate(-45deg); 
+}
+
+.mobile-menu {
+  position: fixed;
+  top: 70px; /* 移动到 header-top 下方 */
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff; /* 修改背景颜色为白色 */
+  z-index: 10010;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: all 0.3s ease-in-out;
+  opacity: 0; /* 初始设置为透明 */
+  visibility: hidden; /* 初始隐藏 */
+}
+
+.mobile-menu.open {
+  opacity: 1; /* 显示时不透明 */
+  visibility: visible; /* 显示 */
+}
+
+.mobile-menu-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 90%;
+  max-width: 300px;
+  border-radius: 10px;
+  overflow: hidden;
+  z-index: 10010;
+}
+
+.mobile-menu-list li {
+  padding: 10px;
+  line-height: 30PX;
+  border-bottom: 1px solid 	#DCDCDC;
+}
+.mobile-menu-list li a {
+  text-decoration: none;
+}
+.mobile-menu-list li:last-child {
+  border-bottom: none;
+}
+
+.login-register-module {
+  position: fixed;
+  top: 20px;
+  right: 60px;
+  z-index: 10010; 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  display: none;
+}
+
+.login-register-module span {
+  margin-right: 10px;
+  line-height: 35px;
+  cursor: pointer;
+}
+.login-register-module span:hover {
+  color: blue;
+}
+
+@media (max-width: 768px) {
+  .header-menu {
+    display: none;
+  }
+  .mobile-menu{
+    padding: 32px 24px;
+    border-top: 2px solid #DCDCDC;
+  }
+  .header-right {
+    display: none;
+  }
+
+  .hamburger-menu {
+    display: block;
+  }
+
+  .login-register-module {
+    display: flex;
+  }
+}
+</style>

src/views/about/About.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <div class="about_container">
+      <h1>品牌介绍</h1>
+      <p>
+        小发同城是2024成立的创新型同城服务企业。自成立以来，秉持着
+        “以用户需求为核心，用贴心服务点亮城市生活” 的使命，不断整合各类优质资源，
+        搭建起一个涵盖配送、生活服务、商业服务等多元领域的综合性服务网络。
+      </p>
+      <p>
+        随着城市生活节奏的不断加快和人们对生活品质要求的日益提高，
+        同城服务市场有着广阔的发展前景。小发同城将继续秉承创新、高效、贴心的服务理念，
+        不断拓展服务领域，提升服务质量，为用户创造更多价值。同时，小发同城也将积极与各类商家、合作
+        伙伴携手共进，共同推动同城服务行业的发展，为打造更加便捷、美好的城市生活贡献自己的力量。
+      </p>
+      <div class="ppt">
+        <img src="../../assets/image/ppt/ppt2.jpg">
+        <img src="../../assets/image/ppt/ppt3.jpg">
+        <img src="../../assets/image/ppt/ppt4.jpg">
+        <img src="../../assets/image/ppt/ppt5.jpg">
+      </div>
+      <h1>品牌主张</h1>
+      <div class="brandTarget">
+        <el-row :gutter="20">
+          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+            <div class="brandTarget_one">
+              <img src="../../assets/image/about/target4.jpg">
+              <p>服务到位</p>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+            <div class="brandTarget_two">
+              <img src="../../assets/image/about/target5.jpg">
+              <p>快速解决</p>
+            </div>
+          </el-col>
+          <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
+            <div class="brandTarget_three">
+              <img src="../../assets/image/about/target3.jpg">
+              <p>客户放心</p>
+            </div>
+          </el-col>
+        </el-row> 
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+<style lang="scss" scoped>
+.about_img img {
+  width: 100%;
+  height: 300px;
+  object-fit: cover;
+}
+
+.about_container {
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+
+  h1 {
+    margin: 30px 0px;
+  }
+  .el-row{
+    width: 100%;
+  }
+  p {
+    margin-bottom: 30px;
+    font-weight: 400;
+    font-size: 20px;
+    text-indent: 2em;
+    padding: 0 15px;
+  }
+
+  .brandTarget {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+
+    .brandTarget_one {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+
+    .brandTarget_two {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+
+    .brandTarget_three {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+    }
+
+    img {
+      width: 100%;
+      height: 400px;
+      object-fit: cover;
+    }
+    p{
+      text-align: center;
+      padding: 20px;
+    }
+  }
+}
+.ppt{
+  width: 100%;
+  margin: auto;
+  img{
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
+}
+</style>

src/views/feedback/FeedBack.vue

@@ -0,0 +1,68 @@
+<template>
+    <div class="feedback-container">
+        <h1>意见反馈</h1>
+        <div class="feedback-form">
+            <el-form :model="feedbackObj" label-width="auto" style="max-width: 600px">
+                <el-form-item label="描述问题">
+                    <el-input v-model="feedbackObj.describe" :rows="6" type="textarea" />
+                </el-form-item>
+                <el-form-item label="上传图片">
+                    <el-upload ref="uploadRef" multiple :limit="3" list-type="picture-card" :http-request="uploadSubmit"
+                        :auto-upload="false">
+                        <el-icon class="avatar-uploader-icon">
+                            <Plus />
+                        </el-icon>
+                    </el-upload>
+                </el-form-item>
+                <el-form-item label="您的联系方式">
+                    <el-input v-model="feedbackObj.contact" style="width: 200px;" />
+                </el-form-item>
+            </el-form>
+            <el-button type="primary" size="default" @click="uploadRef.submit()">提交反馈</el-button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { Plus } from '@element-plus/icons-vue';
+import { uploadFile } from '../../../api/upload'; // 引入新的 API 方法
+
+const feedbackObj = reactive({
+    describe: '',
+    img: '',
+    contact: '',
+});
+
+const uploadRef = ref();
+
+const uploadSubmit = ({ file }) => {
+    const params = {
+        // 可以在这里添加其他参数
+    };
+    uploadFile(file, params)
+        .then(response => {
+            console.log(response);
+            // 处理上传成功的逻辑
+        })
+        .catch(error => {
+            console.error(error);
+            // 处理上传失败的逻辑
+        });
+};
+</script>
+
+<style lang="scss">
+.feedback-container {
+    width: 100%;
+    max-width: 1200px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: start;
+    margin: auto;
+    h1 {
+        margin: 30px 0px;
+    }
+}
+</style>

src/views/help/Help.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="help_container">
+    <el-row>
+      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+        <div class="help_img">
+          <img src="../../assets/image/help/help_temp.png">
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss">
+.help_container {
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .el-row{
+    width: 100%;
+  }
+}
+
+.help_img img {
+  width: 100%; /* 让图片宽度填充父容器 */
+  height: auto; /* 保持图片的宽高比 */
+  object-fit: contain; /* 确保图片完全显示在容器内，不会被裁剪 */
+}
+</style>

src/views/index/banner.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="banner">
+        <div class="index-title">
+            <h3>我们致力于</h3>
+            <p>让更多人享受美好生活</p>
+        </div>
+        <div class="banner-list">
+            <el-carousel>
+                <el-carousel-item>
+                    <img src="../../assets/image/banner_imgs/serve2.jpg" alt="">
+                </el-carousel-item>
+                <el-carousel-item  >
+                    <img src="../../assets/image/banner_imgs/serve3.jpg" alt="">
+                </el-carousel-item>
+                <el-carousel-item  >
+                    <img src="../../assets/image/banner_imgs/serve4.jpg" alt="">
+                </el-carousel-item>
+                <el-carousel-item  >
+                    <img src="../../assets/image/banner_imgs/serve5.jpg" alt="">
+                </el-carousel-item>
+            </el-carousel>
+        </div>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+    let bannerList =[
+        {id:2,img_url:'serve2.jpg'},
+        {id:3,img_url:'serve3.jpg'},
+        {id:4,img_url:'serve4.jpg'},
+        {id:5,img_url:'serve5.jpg'},
+    ]
+  </script>
+  <style lang="scss">
+
+  </style>
+  

src/views/index/company.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="index-title">
+        <h3>公司简介</h3>
+        <p>我们是一家专注于同城服务的公司，致力于为同城居民提供便捷、高效、优质的服务。我们拥有专业的团队和丰富的经验，为您解决生活中的各种问题。</p>
+    </div>
+    <div class="company-detail">
+        <el-row>
+            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"> <img
+                    src="../../assets/image/index/company.jpg"></el-col>
+            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+                <div class="company-introduce">
+                    <p>小发同城专注于打造本地生活服务平台，我们聚焦同城零售、企业招聘、租赁服务以及二手交易等核心业务，旨在全方位满足您的生活与工作需求。</p>
+                    <p>在同城零售领域，小发同城凭借先进的技术手段，成功打通超市数据库，给超市提供实现线上线下商品、价格、库存等信息的实时同步。独特价值在于为消费者提供无缝购物体验，让消费者无论是在线上商城浏览下单，还是在实体超市选购商品，都能享受一致的商品选择、价格体系与库存保障市场定位为本地生活服务的创新引领者，致力于解决传统零售线上线下脱节的痛点。</p>
+                    <p>对于企业招聘，我们搭建了高效的人才对接桥梁，精准匹配企业与求职者需求，助力本地企业广纳贤才，推动地方经济发展。</p>
+                    <p>在租赁服务方面，涵盖住房、办公场地、设备等多元租赁选项，为您解决生活与经营中的租赁难题。</p>
+                    <p>在二手交易板块，则为闲置物品提供了流通渠道，让资源得以循环利用，为环保助力。</p>
+                    <router-link :to="{ name: 'about' }" class="router-link-button">了解更多</router-link>
+                </div>
+            </el-col>
+        </el-row>
+    </div>
+
+</template>
+
+<script setup lang="ts">
+</script>
+<style lang="scss">
+.router-link-button {
+    padding: 3px 5px;
+    border: none;
+    border-radius: 4px;
+    background-color: #42b983;
+    color: white;
+    font-size: 16px;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    margin-top: 25px;
+    float: right;
+}
+
+.router-link-button:hover {
+    background-color: #36a675;
+}
+
+.company-introduce p {
+    font-size: 20px;
+    text-indent: 2em;
+}
+</style>

src/views/index/index.vue

@@ -0,0 +1,22 @@
+<template>
+  <Slider/>
+  <div class="container">
+      <div class="container-bg">
+          <Company/>
+          <Banner/>
+          <Service/>
+      </div>
+  </div>
+  </template>
+  
+  <script setup lang="ts">
+    import Slider from './slider.vue';
+    import Banner from './banner.vue';
+    import Service from './service.vue';
+    import Company from './company.vue';
+  </script>
+
+<style lang="scss">
+
+</style>
+  

src/views/index/service.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+
+    let serviceList=[
+        {id:1,title:"同城零售",icon:"iconfont icon-icon-test"},
+        {id:2,title:"企业招聘",icon:"iconfont icon-qiyezhaopin"},
+        {id:3,title:"租赁服务",icon:"iconfont icon-zulinfuwuicon"},
+        {id:4,title:"二手交易",icon:"iconfont icon-ershoujiaoyi"},
+        {id:5,title:"安装维修",icon:"iconfont icon-anzhuangweixiu"},
+        {id:6,title:"家政保洁",icon:"iconfont icon-jiazhengbaojieanbao"}
+    ]
+  
+</script>
+
+<template>
+        <div class="service-contain">
+            <div class="index-title">
+                <h3>我们的服务</h3>
+                <p>我们拥有专业的团队和丰富的经验，为您解决生活中的各种问题，为您提供便捷、高效、优质的服务。</p>
+            </div>
+            <div class="service-list">
+                <ul>
+                    <li v-for="s in serviceList" :key="s.id">
+                        <i :class="`${s.icon}`"></i>
+                        <h4>{{ s.title }}</h4>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        
+        <div>
+
+        </div>
+</template>
+
+<style>
+  
+</style>
+  

src/views/index/slider.vue

@@ -0,0 +1,398 @@
+clickable Avatar: undefined
+<template>
+  <div class="slider">
+    <div class="slider-container">
+      <el-row>
+        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
+          <div class="slider-container-left">
+            <div>
+              <!-- 大屏幕显示的标题 -->
+              <h1>
+                让更多人享受本地美好生活
+              </h1>
+              <p>"小发同城在手,本地生活无忧"</p>
+            </div>
+            <div class="slider-button">
+              <div class="btn slider-btn service">APP下载
+                <!-- 二维码容器 -->
+                <div class="qr-code">
+                  <img src="../../assets/image/xiaofa_logo.png" alt="APP二维码">
+                </div>
+              </div>
+              <div class="btn slider-btn active-btn">关注抖音号
+                <!-- 二维码容器 -->
+                <div class="qr-code">
+                  <img src="../../assets/image/xiaofa_logo.png" alt="抖音二维码">
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
+          <div class="slider-container-right">
+            <img src="../../assets/image/xiaofa_logo.png">
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+     <!--移动端的界面-->
+    <div class="slider-container-mobile">
+      <el-row>
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl ="24">
+            <div class="mobile-text">
+                <h1>让更多人</h1>
+                <h1>享受本地美好生活</h1>
+            </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl ="24">
+          <div class="slider-container-right">
+            <img src="../../assets/image/xiaofa_logo.png">
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl ="24">
+          <p>"小发同城在手,本地生活无忧"</p>
+          <div class="slider-button">
+              <div class="btn slider-btn service">APP下载
+                <!-- 二维码容器 -->
+                <div class="qr-code">
+                  <img src="../../assets/image/xiaofa_logo.png" alt="APP二维码">
+                </div>
+              </div>
+              <div class="btn slider-btn active-btn">关注抖音号
+                <!-- 二维码容器 -->
+                <div class="qr-code">
+                  <img src="../../assets/image/xiaofa_logo.png" alt="抖音二维码">
+                </div>
+              </div>
+            </div>
+        </el-col>
+      </el-row>
+    </div>
+
+  </div>
+
+  <div class="counter_wrapper" data-aos="fade-up">
+    <div class="container">
+      <!-- 使用 el-row 作为行容器 -->
+      <el-row :gutter="20">
+        <!-- 第一个统计项 -->
+        <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
+          <div class="count_box box_hover">
+            <i class="iconfont icon-employee1"></i>
+            <h3>
+              <el-statistic :value="businessmanValue" :formatter="formatter" :value-style="{ fontSize: '35px' }" />
+            </h3>
+            <p>商家数量</p>
+          </div>
+        </el-col>
+        <!-- 第二个统计项 -->
+        <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
+          <div class="count_box box_center">
+            <i class="iconfont icon-baobei"></i>
+            <h3>
+              <el-statistic :value="productValue" :formatter="formatter2" :value-style="{ fontSize: '35px' }" />
+            </h3>
+            <p>商品数量</p>
+          </div>
+        </el-col>
+        <!-- 第三个统计项 -->
+        <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
+          <div class="count_box box_hover">
+            <i class="iconfont icon-vip"></i>
+            <h3>
+              <el-statistic :value="memberValue" :formatter="formatter" :value-style="{ fontSize: '35px' }" />
+            </h3>
+            <p>会员数量</p>
+          </div>
+        </el-col>
+        <!-- 第四个统计项 -->
+        <el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
+          <div class="count_box box_hover">
+            <i class="iconfont icon-dingdan"></i>
+            <h3>
+              <el-statistic :value="orderValue" :formatter="formatter2" :value-style="{ fontSize: '35px' }" />
+            </h3>
+            <p>订单数量</p>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+/*slider*/
+.slider {
+  width: 100%;
+  background: linear-gradient(90.54deg, #7354ff 0.42%, #000b22 102.71%);
+  -webkit-background: linear-gradient(90.54deg, #7354ff 0.42%, #000b22 102.71%);
+  -moz-background: linear-gradient(90.54deg, #7354ff 0.42%, #000b22 102.71%);
+  position: relative;
+  padding-top: 100px;
+  padding-bottom: 130px;
+}
+
+.slider:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  background-position: center center;
+  bottom: 0;
+  background: url(../../assets/image/index/slider-bg-shape.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  z-index: 0;
+}
+
+.slider .slider-container {
+  display: flex;
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+}
+.slider .slider-container .el-row{
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+.slider .slider-container-mobile {
+  display: none;
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+.slider .slider-container-mobile h1{
+  color: #fff;
+  font-size: 40px;
+  font-weight: 700;
+  margin: 10px 0;
+}
+.slider .slider-container-mobile p {
+  color: #fff;
+  font-size: 20px;
+  font-weight: 400;
+  margin: 10px 0;
+}
+.slider .slider-container-left {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.slider .slider-container-left h1 {
+  color: #fff;
+  font-size: 40px;
+  font-weight: 700;
+}
+
+.slider .slider-container-left p {
+  color: #fff;
+  font-size: 20px;
+  font-weight: 400;
+}
+
+.slider .slider-container-right {
+  display: flex;
+  justify-content: center;
+  align-self: center;
+}
+
+.slider .slider-container-right img {
+  width: 50%;
+  height: 50%;
+}
+
+.slider-button {
+  display: flex;
+  justify-content: center;
+}
+
+.slider-button .slider-btn {
+  margin-top: 30px;
+  padding: 12px 30px;
+  position: relative;
+}
+
+.slider-button .service {
+  margin-right: 14px;
+}
+
+/* 二维码容器初始样式 */
+.qr-code {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 30;
+  background-color: white;
+  padding: 10px;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+/* 鼠标悬停时显示二维码 */
+.slider-btn:hover .qr-code {
+  display: block;
+}
+
+.qr-code img {
+  width: 150px;
+  height: 150px;
+}
+
+.counter_wrapper {
+  position: relative;
+  margin-top: -100px;
+  z-index: 12;
+}
+
+.counter_wrapper .count_box {
+  width: 100%;
+  padding: 15px 0;
+  border-radius: 5px 5px 30px 30px;
+  text-align: center;
+  margin-bottom: 40px;
+  background: #fff;
+  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.08);
+  transition: 0.3s;
+}
+
+.counter_wrapper .count_box i::before {
+  font-size: 60px;
+  color: #353535;
+  transition: 0.3s;
+}
+
+.counter_wrapper .count_box h3 {
+  font-size: 35px;
+  font-weight: 500;
+  color: #353535;
+  margin: 15px 0;
+  transition: 0.3s;
+}
+
+.counter_wrapper .count_box p {
+  font-size: 18px;
+  font-weight: 500;
+  color: #353535;
+  transition: 0.3s;
+}
+
+.counter_wrapper .count_box:hover i::before {
+  color: #ffffff;
+}
+
+.counter_wrapper .count_box:hover p {
+  color: #ffffff;
+}
+
+.counter_wrapper .count_box:hover .el-statistic__content {
+  color: #ffffff;
+  /* 悬停时数值变为白色 */
+}
+
+.counter_wrapper .count_box:hover {
+  background: #7354ff;
+}
+
+.container {
+  width: 100%;
+  max-width: 1200px;
+  margin: auto;
+}
+
+.container .el-row {
+  width: 100%;
+}
+
+/* 小屏幕样式 */
+@media (max-width: 768px) {
+  .container {
+    width: 100%;
+    margin: auto;
+  }
+  .slider{
+    padding-top: 0px;
+  }
+  .container .el-row {
+    width: 100%;
+    padding-left: 20px;
+  }
+
+  /* 大屏幕隐藏 */
+  .slider .slider-container {
+    
+    display: none;
+  }
+
+  /* 小屏幕显示 */
+  .slider .slider-container-mobile {
+    display: flex;
+
+  }
+
+  .slider .slider-container-left p {
+    margin-top: 20px;
+  }
+}
+
+/* 大屏幕样式 */
+@media (min-width: 769px) {
+
+  /* 小屏幕隐藏 */
+  .slider .slider-container-mobile {
+    display: none;
+  }
+
+  /* 大屏幕显示 */
+  .slider .slider-container {
+    display: flex;
+  }
+}
+</style>
+
+<script lang="ts" setup>
+import { useTransition } from '@vueuse/core'
+import { ref, onMounted } from 'vue';
+
+const businessman = ref(0);
+const product = ref(0);
+const member = ref(0);
+const order = ref(0);
+
+const businessmanValue = useTransition(businessman, {
+  duration: 1500,
+});
+const productValue = useTransition(product, {
+  duration: 1500,
+});
+const memberValue = useTransition(member, {
+  duration: 1500,
+});
+const orderValue = useTransition(order, {
+  duration: 1500,
+});
+
+businessman.value = 6274;
+product.value = 62400;
+member.value = 10800;
+order.value = 12000;
+
+const formatter = (value: number) => {
+  return `${Math.round(value)}+`;
+};
+const formatter2 = (value: number) => {
+  return `${Math.round(value)}k+`;
+};
+</script>