diff --git a/package-lock.json b/package-lock.json index 9b57a9e..c7558e2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "echarts": "^5.3.3", "element-plus": "2.2.27", "highlight.js": "^11.6.0", + "moment": "^2.30.1", "nprogress": "^0.2.0", "pinia": "^2.0.14", "vue": "^3.2.37", @@ -5362,6 +5363,14 @@ "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==", "dev": true }, + "node_modules/moment": { + "version": "2.30.1", + "resolved": "https://registry.npmmirror.com/moment/-/moment-2.30.1.tgz", + "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", + "engines": { + "node": "*" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", diff --git a/package.json b/package.json index 7ff83cc..9a01b37 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "echarts": "^5.3.3", "element-plus": "2.2.27", "highlight.js": "^11.6.0", + "moment": "^2.30.1", "nprogress": "^0.2.0", "pinia": "^2.0.14", "vue": "^3.2.37", diff --git a/src/api/address.ts b/src/api/address.ts index c0c0070..a0f5625 100644 --- a/src/api/address.ts +++ b/src/api/address.ts @@ -1,20 +1,20 @@ import request from '@/utils/request' export function apigetProvinceLists() { - return request.get({ url: '/geo/province' }) + return request.get({ url: '/config/province' }) } export function apicityLists(params: any) { - return request.get({ url: '/geo/city', params }) + return request.get({ url: '/config/city', params }) } export function apiAreaLists(params: any) { - return request.get({ url: '/geo/area', params }) + return request.get({ url: '/config/area', params }) } -export function apiStreetLists(params: any) { - return request.get({ url: '/geo/street', params }) +export function apiGetStore( ) { + return request.post({ url: '/config/store' }) } -export function apiVillageLists(params: any) { - return request.get({ url: '/geo/village', params }) +export function apiSaveStore(params: any) { + return request.post({ url: '/config/saveStore', params }) } diff --git a/src/api/delivery.ts b/src/api/delivery.ts new file mode 100644 index 0000000..c0dd6ad --- /dev/null +++ b/src/api/delivery.ts @@ -0,0 +1,26 @@ +import request from '@/utils/request' + +export function apiDeliveryLists(params:any) { + return request.get({ url: '/delivery/lists',params }) +} + +export function apiDeliveryAdd(params:any) { + return request.post({ url: '/delivery/add',params }) +} + +export function apiDeliveryEdit(params:any) { + return request.post({ url: '/delivery/edit',params }) +} + +export function apiDeliveryDetail(params:any) { + return request.get({ url: '/delivery/detail',params }) +} + + +export function apiDeliveryStatus(params:any) { + return request.post({ url: '/delivery/status',params }) +} + +export function apiDeliveryDelete(params:any) { + return request.post({ url: '/delivery/delete',params }) +} \ No newline at end of file diff --git a/src/api/goodsList.ts b/src/api/goodsList.ts index 11b8660..85ac250 100644 --- a/src/api/goodsList.ts +++ b/src/api/goodsList.ts @@ -28,6 +28,24 @@ export function apiStatus(params: any) { } // 店员列表 -export function apiStaffLists() { - return request.get({ url: '/staff/lists' }) +export function apiStaffLists(params:any) { + return request.get({ url: '/staff/lists',params }) } + + +export function apiStaffAdd(params:any) { + return request.post({ url: '/staff/add',params }) +} + +export function apiStaffEdit(params:any) { + return request.post({ url: '/staff/edit',params }) +} + +export function apiStaffDetail(params:any) { + return request.get({ url: '/staff/detail',params }) +} + + +export function apiStaffStatus(params:any) { + return request.post({ url: '/staff/status',params }) +} \ No newline at end of file diff --git a/src/assets/iconfont/demo.css b/src/assets/iconfont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/src/assets/iconfont/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; +} diff --git a/src/assets/iconfont/demo_index.html b/src/assets/iconfont/demo_index.html new file mode 100644 index 0000000..647dc92 --- /dev/null +++ b/src/assets/iconfont/demo_index.html @@ -0,0 +1,1476 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + + 查看项目 + +
+
+
+
    + +
  • + +
    流量
    +
    
    +
    • + +
  • + +
    供应商
    +
    
    +
    • + +
  • + +
    分销商
    +
    
    +
    • + +
  • + +
    人群
    +
    
    +
    • + +
  • + +
    人群管理
    +
    
    +
    • + +
  • + +
    分销商结算
    +
    
    +
    • + +
  • + +
    商家数据
    +
    
    +
    • + +
  • + +
    搜索
    +
    
    +
    • + +
  • + +
    协同
    +
    
    +
    • + +
  • + +
    招商
    +
    
    +
    • + +
  • + +
    商品
    +
    
    +
    • + +
  • + +
    单据
    +
    
    +
    • + +
  • + +
    工具箱
    +
    
    +
    • + +
  • + +
    券
    +
    
    +
    • + +
  • + +
    平台
    +
    
    +
    • + +
  • + +
    经销
    +
    
    +
    • + +
  • + +
    资源
    +
    
    +
    • + +
  • + +
    货
    +
    
    +
    • + +
  • + +
    用户
    +
    
    +
    • + +
  • + +
    安全
    +
    
    +
    • + +
  • + +
    数据
    +
    
    +
    • + +
  • + +
    疑问
    +
    
    +
    • + +
  • + +
    调拨
    +
    
    +
    • + +
  • + +
    用户管理
    +
    
    +
    • + +
  • + +
    商家管理
    +
    
    +
    • + +
  • + +
    分销商管理
    +
    
    +
    • + +
  • + +
    商家
    +
    
    +
    • + +
  • + +
    供应商管理
    +
    
    +
    • + +
  • + +
    商品管理
    +
    
    +
    • + +
  • + +
    商品复制
    +
    
    +
    • + +
  • + +
    采购单
    +
    
    +
    • + +
  • + +
    采购价管理
    +
    
    +
    • + +
  • + +
    定价
    +
    
    +
    • + +
  • + +
    结算报表
    +
    
    +
    • + +
  • + +
    入库
    +
    
    +
    • + +
  • + +
    库存管理
    +
    
    +
    • + +
  • + +
    出入库管理
    +
    
    +
    • + +
  • + +
    退仓管理
    +
    
    +
    • + +
  • + +
    合同
    +
    
    +
    • + +
  • + +
    商品计划
    +
    
    +
    • + +
  • + +
    销量计划
    +
    
    +
    • + +
  • + +
    销量实时看板
    +
    
    +
    • + +
  • + +
    结算效率分析
    +
    
    +
    • + +
  • + +
    营销流量配置
    +
    
    +
    • + +
  • + +
    运营工具
    +
    
    +
    • + +
  • + +
    目标管理
    +
    
    +
    • + +
  • + +
    目标制定
    +
    
    +
    • + +
  • + +
    活动协同
    +
    
    +
    • + +
  • + +
    目标监控
    +
    
    +
    • + +
  • + +
    增值服务
    +
    
    +
    • + +
  • + +
    全链路可售
    +
    
    +
    • + +
  • + +
    超级服务
    +
    
    +
    • + +
  • + +
    上门取货
    +
    
    +
    • + +
  • + +
    定位
    +
    
    +
    • + +
  • + +
    预约
    +
    
    +
    • + +
  • + +
    物流
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1717554669936') format('woff2'),
+       url('iconfont.woff?t=1717554669936') format('woff'),
+       url('iconfont.ttf?t=1717554669936') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 流量 +
    +
    .icon-RectangleCopy49 +
    +
    • + +
  • + +
    + 供应商 +
    +
    .icon-RectangleCopy50 +
    +
    • + +
  • + +
    + 分销商 +
    +
    .icon-RectangleCopy51 +
    +
    • + +
  • + +
    + 人群 +
    +
    .icon-RectangleCopy53 +
    +
    • + +
  • + +
    + 人群管理 +
    +
    .icon-RectangleCopy54 +
    +
    • + +
  • + +
    + 分销商结算 +
    +
    .icon-RectangleCopy59 +
    +
    • + +
  • + +
    + 商家数据 +
    +
    .icon-RectangleCopy60 +
    +
    • + +
  • + +
    + 搜索 +
    +
    .icon-RectangleCopy37 +
    +
    • + +
  • + +
    + 协同 +
    +
    .icon-RectangleCopy38 +
    +
    • + +
  • + +
    + 招商 +
    +
    .icon-RectangleCopy39 +
    +
    • + +
  • + +
    + 商品 +
    +
    .icon-RectangleCopy40 +
    +
    • + +
  • + +
    + 单据 +
    +
    .icon-RectangleCopy41 +
    +
    • + +
  • + +
    + 工具箱 +
    +
    .icon-RectangleCopy42 +
    +
    • + +
  • + +
    + 券 +
    +
    .icon-RectangleCopy43 +
    +
    • + +
  • + +
    + 平台 +
    +
    .icon-RectangleCopy44 +
    +
    • + +
  • + +
    + 经销 +
    +
    .icon-RectangleCopy45 +
    +
    • + +
  • + +
    + 资源 +
    +
    .icon-RectangleCopy46 +
    +
    • + +
  • + +
    + 货 +
    +
    .icon-RectangleCopy47 +
    +
    • + +
  • + +
    + 用户 +
    +
    .icon-RectangleCopy +
    +
    • + +
  • + +
    + 安全 +
    +
    .icon-RectangleCopy1 +
    +
    • + +
  • + +
    + 数据 +
    +
    .icon-RectangleCopy2 +
    +
    • + +
  • + +
    + 疑问 +
    +
    .icon-RectangleCopy3 +
    +
    • + +
  • + +
    + 调拨 +
    +
    .icon-RectangleCopy4 +
    +
    • + +
  • + +
    + 用户管理 +
    +
    .icon-RectangleCopy5 +
    +
    • + +
  • + +
    + 商家管理 +
    +
    .icon-RectangleCopy6 +
    +
    • + +
  • + +
    + 分销商管理 +
    +
    .icon-RectangleCopy7 +
    +
    • + +
  • + +
    + 商家 +
    +
    .icon-RectangleCopy8 +
    +
    • + +
  • + +
    + 供应商管理 +
    +
    .icon-RectangleCopy9 +
    +
    • + +
  • + +
    + 商品管理 +
    +
    .icon-RectangleCopy10 +
    +
    • + +
  • + +
    + 商品复制 +
    +
    .icon-RectangleCopy11 +
    +
    • + +
  • + +
    + 采购单 +
    +
    .icon-RectangleCopy12 +
    +
    • + +
  • + +
    + 采购价管理 +
    +
    .icon-RectangleCopy13 +
    +
    • + +
  • + +
    + 定价 +
    +
    .icon-RectangleCopy14 +
    +
    • + +
  • + +
    + 结算报表 +
    +
    .icon-RectangleCopy15 +
    +
    • + +
  • + +
    + 入库 +
    +
    .icon-RectangleCopy16 +
    +
    • + +
  • + +
    + 库存管理 +
    +
    .icon-RectangleCopy17 +
    +
    • + +
  • + +
    + 出入库管理 +
    +
    .icon-RectangleCopy18 +
    +
    • + +
  • + +
    + 退仓管理 +
    +
    .icon-RectangleCopy19 +
    +
    • + +
  • + +
    + 合同 +
    +
    .icon-RectangleCopy20 +
    +
    • + +
  • + +
    + 商品计划 +
    +
    .icon-RectangleCopy21 +
    +
    • + +
  • + +
    + 销量计划 +
    +
    .icon-RectangleCopy22 +
    +
    • + +
  • + +
    + 销量实时看板 +
    +
    .icon-RectangleCopy23 +
    +
    • + +
  • + +
    + 结算效率分析 +
    +
    .icon-RectangleCopy24 +
    +
    • + +
  • + +
    + 营销流量配置 +
    +
    .icon-RectangleCopy25 +
    +
    • + +
  • + +
    + 运营工具 +
    +
    .icon-RectangleCopy26 +
    +
    • + +
  • + +
    + 目标管理 +
    +
    .icon-RectangleCopy27 +
    +
    • + +
  • + +
    + 目标制定 +
    +
    .icon-RectangleCopy28 +
    +
    • + +
  • + +
    + 活动协同 +
    +
    .icon-RectangleCopy29 +
    +
    • + +
  • + +
    + 目标监控 +
    +
    .icon-RectangleCopy30 +
    +
    • + +
  • + +
    + 增值服务 +
    +
    .icon-RectangleCopy31 +
    +
    • + +
  • + +
    + 全链路可售 +
    +
    .icon-RectangleCopy32 +
    +
    • + +
  • + +
    + 超级服务 +
    +
    .icon-RectangleCopy33 +
    +
    • + +
  • + +
    + 上门取货 +
    +
    .icon-RectangleCopy34 +
    +
    • + +
  • + +
    + 定位 +
    +
    .icon-dingwei +
    +
    • + +
  • + +
    + 预约 +
    +
    .icon-RectangleCopy35 +
    +
    • + +
  • + +
    + 物流 +
    +
    .icon-RectangleCopy36 +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    流量
    +
    #icon-RectangleCopy49
    +
    • + +
  • + +
    供应商
    +
    #icon-RectangleCopy50
    +
    • + +
  • + +
    分销商
    +
    #icon-RectangleCopy51
    +
    • + +
  • + +
    人群
    +
    #icon-RectangleCopy53
    +
    • + +
  • + +
    人群管理
    +
    #icon-RectangleCopy54
    +
    • + +
  • + +
    分销商结算
    +
    #icon-RectangleCopy59
    +
    • + +
  • + +
    商家数据
    +
    #icon-RectangleCopy60
    +
    • + +
  • + +
    搜索
    +
    #icon-RectangleCopy37
    +
    • + +
  • + +
    协同
    +
    #icon-RectangleCopy38
    +
    • + +
  • + +
    招商
    +
    #icon-RectangleCopy39
    +
    • + +
  • + +
    商品
    +
    #icon-RectangleCopy40
    +
    • + +
  • + +
    单据
    +
    #icon-RectangleCopy41
    +
    • + +
  • + +
    工具箱
    +
    #icon-RectangleCopy42
    +
    • + +
  • + +
    券
    +
    #icon-RectangleCopy43
    +
    • + +
  • + +
    平台
    +
    #icon-RectangleCopy44
    +
    • + +
  • + +
    经销
    +
    #icon-RectangleCopy45
    +
    • + +
  • + +
    资源
    +
    #icon-RectangleCopy46
    +
    • + +
  • + +
    货
    +
    #icon-RectangleCopy47
    +
    • + +
  • + +
    用户
    +
    #icon-RectangleCopy
    +
    • + +
  • + +
    安全
    +
    #icon-RectangleCopy1
    +
    • + +
  • + +
    数据
    +
    #icon-RectangleCopy2
    +
    • + +
  • + +
    疑问
    +
    #icon-RectangleCopy3
    +
    • + +
  • + +
    调拨
    +
    #icon-RectangleCopy4
    +
    • + +
  • + +
    用户管理
    +
    #icon-RectangleCopy5
    +
    • + +
  • + +
    商家管理
    +
    #icon-RectangleCopy6
    +
    • + +
  • + +
    分销商管理
    +
    #icon-RectangleCopy7
    +
    • + +
  • + +
    商家
    +
    #icon-RectangleCopy8
    +
    • + +
  • + +
    供应商管理
    +
    #icon-RectangleCopy9
    +
    • + +
  • + +
    商品管理
    +
    #icon-RectangleCopy10
    +
    • + +
  • + +
    商品复制
    +
    #icon-RectangleCopy11
    +
    • + +
  • + +
    采购单
    +
    #icon-RectangleCopy12
    +
    • + +
  • + +
    采购价管理
    +
    #icon-RectangleCopy13
    +
    • + +
  • + +
    定价
    +
    #icon-RectangleCopy14
    +
    • + +
  • + +
    结算报表
    +
    #icon-RectangleCopy15
    +
    • + +
  • + +
    入库
    +
    #icon-RectangleCopy16
    +
    • + +
  • + +
    库存管理
    +
    #icon-RectangleCopy17
    +
    • + +
  • + +
    出入库管理
    +
    #icon-RectangleCopy18
    +
    • + +
  • + +
    退仓管理
    +
    #icon-RectangleCopy19
    +
    • + +
  • + +
    合同
    +
    #icon-RectangleCopy20
    +
    • + +
  • + +
    商品计划
    +
    #icon-RectangleCopy21
    +
    • + +
  • + +
    销量计划
    +
    #icon-RectangleCopy22
    +
    • + +
  • + +
    销量实时看板
    +
    #icon-RectangleCopy23
    +
    • + +
  • + +
    结算效率分析
    +
    #icon-RectangleCopy24
    +
    • + +
  • + +
    营销流量配置
    +
    #icon-RectangleCopy25
    +
    • + +
  • + +
    运营工具
    +
    #icon-RectangleCopy26
    +
    • + +
  • + +
    目标管理
    +
    #icon-RectangleCopy27
    +
    • + +
  • + +
    目标制定
    +
    #icon-RectangleCopy28
    +
    • + +
  • + +
    活动协同
    +
    #icon-RectangleCopy29
    +
    • + +
  • + +
    目标监控
    +
    #icon-RectangleCopy30
    +
    • + +
  • + +
    增值服务
    +
    #icon-RectangleCopy31
    +
    • + +
  • + +
    全链路可售
    +
    #icon-RectangleCopy32
    +
    • + +
  • + +
    超级服务
    +
    #icon-RectangleCopy33
    +
    • + +
  • + +
    上门取货
    +
    #icon-RectangleCopy34
    +
    • + +
  • + +
    定位
    +
    #icon-dingwei
    +
    • + +
  • + +
    预约
    +
    #icon-RectangleCopy35
    +
    • + +
  • + +
    物流
    +
    #icon-RectangleCopy36
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/src/assets/iconfont/iconfont.css b/src/assets/iconfont/iconfont.css new file mode 100644 index 0000000..00dc8ad --- /dev/null +++ b/src/assets/iconfont/iconfont.css @@ -0,0 +1,239 @@ +@font-face { + font-family: "iconfont"; /* Project id 4573174 */ + src: url('iconfont.woff2?t=1717554669936') format('woff2'), + url('iconfont.woff?t=1717554669936') format('woff'), + url('iconfont.ttf?t=1717554669936') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-RectangleCopy49:before { + content: "\e6bd"; +} + +.icon-RectangleCopy50:before { + content: "\e6be"; +} + +.icon-RectangleCopy51:before { + content: "\e6bf"; +} + +.icon-RectangleCopy53:before { + content: "\e6c1"; +} + +.icon-RectangleCopy54:before { + content: "\e6c4"; +} + +.icon-RectangleCopy59:before { + content: "\e6dd"; +} + +.icon-RectangleCopy60:before { + content: "\e6de"; +} + +.icon-RectangleCopy37:before { + content: "\e6a6"; +} + +.icon-RectangleCopy38:before { + content: "\e6a7"; +} + +.icon-RectangleCopy39:before { + content: "\e6a8"; +} + +.icon-RectangleCopy40:before { + content: "\e6a9"; +} + +.icon-RectangleCopy41:before { + content: "\e6aa"; +} + +.icon-RectangleCopy42:before { + content: "\e6ab"; +} + +.icon-RectangleCopy43:before { + content: "\e6ac"; +} + +.icon-RectangleCopy44:before { + content: "\e6ad"; +} + +.icon-RectangleCopy45:before { + content: "\e6ae"; +} + +.icon-RectangleCopy46:before { + content: "\e6af"; +} + +.icon-RectangleCopy47:before { + content: "\e6bb"; +} + +.icon-RectangleCopy:before { + content: "\e6a3"; +} + +.icon-RectangleCopy1:before { + content: "\e6a2"; +} + +.icon-RectangleCopy2:before { + content: "\e6a4"; +} + +.icon-RectangleCopy3:before { + content: "\e6a1"; +} + +.icon-RectangleCopy4:before { + content: "\e6a5"; +} + +.icon-RectangleCopy5:before { + content: "\e6b0"; +} + +.icon-RectangleCopy6:before { + content: "\e6b1"; +} + +.icon-RectangleCopy7:before { + content: "\e6b2"; +} + +.icon-RectangleCopy8:before { + content: "\e6b3"; +} + +.icon-RectangleCopy9:before { + content: "\e6b4"; +} + +.icon-RectangleCopy10:before { + content: "\e6b5"; +} + +.icon-RectangleCopy11:before { + content: "\e6b6"; +} + +.icon-RectangleCopy12:before { + content: "\e6b7"; +} + +.icon-RectangleCopy13:before { + content: "\e6b8"; +} + +.icon-RectangleCopy14:before { + content: "\e6b9"; +} + +.icon-RectangleCopy15:before { + content: "\e6ba"; +} + +.icon-RectangleCopy16:before { + content: "\e6c2"; +} + +.icon-RectangleCopy17:before { + content: "\e6c3"; +} + +.icon-RectangleCopy18:before { + content: "\e6c6"; +} + +.icon-RectangleCopy19:before { + content: "\e6c8"; +} + +.icon-RectangleCopy20:before { + content: "\e6d1"; +} + +.icon-RectangleCopy21:before { + content: "\e6d8"; +} + +.icon-RectangleCopy22:before { + content: "\e6da"; +} + +.icon-RectangleCopy23:before { + content: "\e6e0"; +} + +.icon-RectangleCopy24:before { + content: "\e6df"; +} + +.icon-RectangleCopy25:before { + content: "\e6e2"; +} + +.icon-RectangleCopy26:before { + content: "\e6e3"; +} + +.icon-RectangleCopy27:before { + content: "\e6e4"; +} + +.icon-RectangleCopy28:before { + content: "\e6e5"; +} + +.icon-RectangleCopy29:before { + content: "\e6e6"; +} + +.icon-RectangleCopy30:before { + content: "\e6e7"; +} + +.icon-RectangleCopy31:before { + content: "\e6e8"; +} + +.icon-RectangleCopy32:before { + content: "\e6e9"; +} + +.icon-RectangleCopy33:before { + content: "\e6ea"; +} + +.icon-RectangleCopy34:before { + content: "\e6eb"; +} + +.icon-dingwei:before { + content: "\e6ec"; +} + +.icon-RectangleCopy35:before { + content: "\e6ed"; +} + +.icon-RectangleCopy36:before { + content: "\e6ee"; +} + diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js new file mode 100644 index 0000000..b7d01ec --- /dev/null +++ b/src/assets/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4573174='',function(c){var a=(a=document.getElementsByTagName("script"))[a.length-1],h=a.getAttribute("data-injectcss"),a=a.getAttribute("data-disable-injectsvg");if(!a){var t,l,o,p,v,e=function(a,h){h.parentNode.insertBefore(a,h)};if(h&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}t=function(){var a,h=document.createElement("div");h.innerHTML=c._iconfont_svg_string_4573174,(h=h.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",h=h,(a=document.body).firstChild?e(h,a.firstChild):a.appendChild(h))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),t()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(o=t,p=c.document,v=!1,d(),p.onreadystatechange=function(){"complete"==p.readyState&&(p.onreadystatechange=null,i())})}function i(){v||(v=!0,o())}function d(){try{p.documentElement.doScroll("left")}catch(a){return void setTimeout(d,50)}i()}}(window); \ No newline at end of file diff --git a/src/assets/iconfont/iconfont.json b/src/assets/iconfont/iconfont.json new file mode 100644 index 0000000..28a0da1 --- /dev/null +++ b/src/assets/iconfont/iconfont.json @@ -0,0 +1,401 @@ +{ + "id": "4573174", + "name": "duo'men'dian", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "7549358", + "name": "流量", + "font_class": "RectangleCopy49", + "unicode": "e6bd", + "unicode_decimal": 59069 + }, + { + "icon_id": "7551129", + "name": "供应商", + "font_class": "RectangleCopy50", + "unicode": "e6be", + "unicode_decimal": 59070 + }, + { + "icon_id": "7551130", + "name": "分销商", + "font_class": "RectangleCopy51", + "unicode": "e6bf", + "unicode_decimal": 59071 + }, + { + "icon_id": "7551132", + "name": "人群", + "font_class": "RectangleCopy53", + "unicode": "e6c1", + "unicode_decimal": 59073 + }, + { + "icon_id": "7551133", + "name": "人群管理", + "font_class": "RectangleCopy54", + "unicode": "e6c4", + "unicode_decimal": 59076 + }, + { + "icon_id": "7553624", + "name": "分销商结算", + "font_class": "RectangleCopy59", + "unicode": "e6dd", + "unicode_decimal": 59101 + }, + { + "icon_id": "7553627", + "name": "商家数据", + "font_class": "RectangleCopy60", + "unicode": "e6de", + "unicode_decimal": 59102 + }, + { + "icon_id": "7549348", + "name": "搜索", + "font_class": "RectangleCopy37", + "unicode": "e6a6", + "unicode_decimal": 59046 + }, + { + "icon_id": "7549364", + "name": "协同", + "font_class": "RectangleCopy38", + "unicode": "e6a7", + "unicode_decimal": 59047 + }, + { + "icon_id": "7549373", + "name": "招商", + "font_class": "RectangleCopy39", + "unicode": "e6a8", + "unicode_decimal": 59048 + }, + { + "icon_id": "7549816", + "name": "商品", + "font_class": "RectangleCopy40", + "unicode": "e6a9", + "unicode_decimal": 59049 + }, + { + "icon_id": "7549817", + "name": "单据", + "font_class": "RectangleCopy41", + "unicode": "e6aa", + "unicode_decimal": 59050 + }, + { + "icon_id": "7549828", + "name": "工具箱", + "font_class": "RectangleCopy42", + "unicode": "e6ab", + "unicode_decimal": 59051 + }, + { + "icon_id": "7549832", + "name": "券", + "font_class": "RectangleCopy43", + "unicode": "e6ac", + "unicode_decimal": 59052 + }, + { + "icon_id": "7549842", + "name": "平台", + "font_class": "RectangleCopy44", + "unicode": "e6ad", + "unicode_decimal": 59053 + }, + { + "icon_id": "7549845", + "name": "经销", + "font_class": "RectangleCopy45", + "unicode": "e6ae", + "unicode_decimal": 59054 + }, + { + "icon_id": "7549851", + "name": "资源", + "font_class": "RectangleCopy46", + "unicode": "e6af", + "unicode_decimal": 59055 + }, + { + "icon_id": "7550034", + "name": "货", + "font_class": "RectangleCopy47", + "unicode": "e6bb", + "unicode_decimal": 59067 + }, + { + "icon_id": "7549350", + "name": "用户", + "font_class": "RectangleCopy", + "unicode": "e6a3", + "unicode_decimal": 59043 + }, + { + "icon_id": "7549351", + "name": "安全", + "font_class": "RectangleCopy1", + "unicode": "e6a2", + "unicode_decimal": 59042 + }, + { + "icon_id": "7549352", + "name": "数据", + "font_class": "RectangleCopy2", + "unicode": "e6a4", + "unicode_decimal": 59044 + }, + { + "icon_id": "7549353", + "name": "疑问", + "font_class": "RectangleCopy3", + "unicode": "e6a1", + "unicode_decimal": 59041 + }, + { + "icon_id": "7549355", + "name": "调拨", + "font_class": "RectangleCopy4", + "unicode": "e6a5", + "unicode_decimal": 59045 + }, + { + "icon_id": "7551131", + "name": "用户管理", + "font_class": "RectangleCopy5", + "unicode": "e6b0", + "unicode_decimal": 59056 + }, + { + "icon_id": "7551134", + "name": "商家管理", + "font_class": "RectangleCopy6", + "unicode": "e6b1", + "unicode_decimal": 59057 + }, + { + "icon_id": "7551135", + "name": "分销商管理", + "font_class": "RectangleCopy7", + "unicode": "e6b2", + "unicode_decimal": 59058 + }, + { + "icon_id": "7551136", + "name": "商家", + "font_class": "RectangleCopy8", + "unicode": "e6b3", + "unicode_decimal": 59059 + }, + { + "icon_id": "7551137", + "name": "供应商管理", + "font_class": "RectangleCopy9", + "unicode": "e6b4", + "unicode_decimal": 59060 + }, + { + "icon_id": "7551213", + "name": "商品管理", + "font_class": "RectangleCopy10", + "unicode": "e6b5", + "unicode_decimal": 59061 + }, + { + "icon_id": "7551217", + "name": "商品复制", + "font_class": "RectangleCopy11", + "unicode": "e6b6", + "unicode_decimal": 59062 + }, + { + "icon_id": "7551346", + "name": "采购单", + "font_class": "RectangleCopy12", + "unicode": "e6b7", + "unicode_decimal": 59063 + }, + { + "icon_id": "7551349", + "name": "采购价管理", + "font_class": "RectangleCopy13", + "unicode": "e6b8", + "unicode_decimal": 59064 + }, + { + "icon_id": "7551477", + "name": "定价", + "font_class": "RectangleCopy14", + "unicode": "e6b9", + "unicode_decimal": 59065 + }, + { + "icon_id": "7551486", + "name": "结算报表", + "font_class": "RectangleCopy15", + "unicode": "e6ba", + "unicode_decimal": 59066 + }, + { + "icon_id": "7552198", + "name": "入库", + "font_class": "RectangleCopy16", + "unicode": "e6c2", + "unicode_decimal": 59074 + }, + { + "icon_id": "7552199", + "name": "库存管理", + "font_class": "RectangleCopy17", + "unicode": "e6c3", + "unicode_decimal": 59075 + }, + { + "icon_id": "7552213", + "name": "出入库管理", + "font_class": "RectangleCopy18", + "unicode": "e6c6", + "unicode_decimal": 59078 + }, + { + "icon_id": "7552217", + "name": "退仓管理", + "font_class": "RectangleCopy19", + "unicode": "e6c8", + "unicode_decimal": 59080 + }, + { + "icon_id": "7552702", + "name": "合同", + "font_class": "RectangleCopy20", + "unicode": "e6d1", + "unicode_decimal": 59089 + }, + { + "icon_id": "7553176", + "name": "商品计划", + "font_class": "RectangleCopy21", + "unicode": "e6d8", + "unicode_decimal": 59096 + }, + { + "icon_id": "7553184", + "name": "销量计划", + "font_class": "RectangleCopy22", + "unicode": "e6da", + "unicode_decimal": 59098 + }, + { + "icon_id": "7553638", + "name": "销量实时看板", + "font_class": "RectangleCopy23", + "unicode": "e6e0", + "unicode_decimal": 59104 + }, + { + "icon_id": "7553639", + "name": "结算效率分析", + "font_class": "RectangleCopy24", + "unicode": "e6df", + "unicode_decimal": 59103 + }, + { + "icon_id": "7553644", + "name": "营销流量配置", + "font_class": "RectangleCopy25", + "unicode": "e6e2", + "unicode_decimal": 59106 + }, + { + "icon_id": "7553645", + "name": "运营工具", + "font_class": "RectangleCopy26", + "unicode": "e6e3", + "unicode_decimal": 59107 + }, + { + "icon_id": "7553649", + "name": "目标管理", + "font_class": "RectangleCopy27", + "unicode": "e6e4", + "unicode_decimal": 59108 + }, + { + "icon_id": "7553650", + "name": "目标制定", + "font_class": "RectangleCopy28", + "unicode": "e6e5", + "unicode_decimal": 59109 + }, + { + "icon_id": "7553651", + "name": "活动协同", + "font_class": "RectangleCopy29", + "unicode": "e6e6", + "unicode_decimal": 59110 + }, + { + "icon_id": "7553656", + "name": "目标监控", + "font_class": "RectangleCopy30", + "unicode": "e6e7", + "unicode_decimal": 59111 + }, + { + "icon_id": "7553662", + "name": "增值服务", + "font_class": "RectangleCopy31", + "unicode": "e6e8", + "unicode_decimal": 59112 + }, + { + "icon_id": "7553667", + "name": "全链路可售", + "font_class": "RectangleCopy32", + "unicode": "e6e9", + "unicode_decimal": 59113 + }, + { + "icon_id": "7553669", + "name": "超级服务", + "font_class": "RectangleCopy33", + "unicode": "e6ea", + "unicode_decimal": 59114 + }, + { + "icon_id": "7553918", + "name": "上门取货", + "font_class": "RectangleCopy34", + "unicode": "e6eb", + "unicode_decimal": 59115 + }, + { + "icon_id": "7562286", + "name": "定位", + "font_class": "dingwei", + "unicode": "e6ec", + "unicode_decimal": 59116 + }, + { + "icon_id": "7733536", + "name": "预约", + "font_class": "RectangleCopy35", + "unicode": "e6ed", + "unicode_decimal": 59117 + }, + { + "icon_id": "7733537", + "name": "物流", + "font_class": "RectangleCopy36", + "unicode": "e6ee", + "unicode_decimal": 59118 + } + ] +} diff --git a/src/assets/iconfont/iconfont.ttf b/src/assets/iconfont/iconfont.ttf new file mode 100644 index 0000000..ea8c5ab Binary files /dev/null and b/src/assets/iconfont/iconfont.ttf differ diff --git a/src/assets/iconfont/iconfont.woff b/src/assets/iconfont/iconfont.woff new file mode 100644 index 0000000..012daa6 Binary files /dev/null and b/src/assets/iconfont/iconfont.woff differ diff --git a/src/assets/iconfont/iconfont.woff2 b/src/assets/iconfont/iconfont.woff2 new file mode 100644 index 0000000..016b833 Binary files /dev/null and b/src/assets/iconfont/iconfont.woff2 differ diff --git a/src/components/iconfont/index.vue b/src/components/iconfont/index.vue new file mode 100644 index 0000000..1047668 --- /dev/null +++ b/src/components/iconfont/index.vue @@ -0,0 +1,47 @@ + + + + \ No newline at end of file diff --git a/src/components/material/index.vue b/src/components/material/index.vue index da01eae..c561198 100644 --- a/src/components/material/index.vue +++ b/src/components/material/index.vue @@ -4,22 +4,11 @@
- +