Skip to content

O
offical_web
Commit 3d2a0dc5 by qinjianhui
Options

fix：优化

parent 4a6ea607
Showing with 713 additions and 117 deletions
src/components/head.vue
......@@ -26,7 +26,7 @@
<span class="reg-btn" @click="register">注册</span>
</div>
<el-button type="primary">免费试用</el-button>
<el-button type="primary" @click="register">免费试用</el-button>
</div>
</div>
</header>
......
src/components/product-intro.vue
......@@ -278,7 +278,7 @@
智能分析采购需求，不同类型的采购形式配置，同时合理管控供应商及整个采购流程，每一个环节都清晰明了
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
<el-button type="primary" size="small" @click="register">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -339,7 +339,7 @@
系统智能化实现自动分仓、自动审单、标记发货及监控、发货超时提醒，多种订单状态满足客户日常处理订单的所有需求
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
<el-button type="primary" size="small" @click="register">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -389,7 +389,7 @@
智能高效的仓储管理系统，集收货、入库、出库等库内作业为一体，对信息、资源更完美的管理
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
<el-button type="primary" size="small" @click="register">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -430,7 +430,7 @@
强大的数据中心，能够精准、快速地分析出各个维度、环节的利润、成本、支出。
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
<el-button type="primary" size="small" @click="register">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -471,7 +471,7 @@
通过订单审核策略自动匹配运输方式、发货仓，运费试算。包裹物流轨迹追踪，精准掌握包裹状态信息，提高效率，减少损失
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
<el-button type="primary" size="small" @click="register">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -512,7 +512,7 @@
管理所有产品信息，精细到每一张图片、每一个标题，并且实现快速批量刊登
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
<el-button type="primary" size="small" @click="register">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -553,7 +553,7 @@
采用精准严谨的财务管理流程，算清每一分钱的来龙去脉，实时掌握公司资金流
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
<el-button type="primary" size="small" @click="register">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -594,7 +594,7 @@
采用精准严谨的财务管理流程，算清每一分钱的来龙去脉，实时掌握公司资金流
</span>
<div class="free-btn">
<el-button type="primary" size="small">免费试用</el-button>
<el-button type="primary" size="small" @click="register">免费试用</el-button>
</div>
</div>
<div class="tab-pane_bottom">
......@@ -658,6 +658,9 @@ export default {
onChangeTabIndex(index) {
this.activeTab = index
},
register() {
this.$router.push('/register')
}
},
}
</script>
......
src/views/demand/demandPage.vue
......@@ -33,7 +33,9 @@
<div class="tab-pane" v-if="active === 0">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px; font-weight: 100;">缺货统计</h3>
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
缺货统计
</h3>
<h4 style="text-align: center">
打通供应链全流程，派单统计产品缺货数量
</h4>
......@@ -90,7 +92,9 @@
<div class="tab-pane" v-if="active === 1">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">仓库预警</h3>
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
仓库预警
</h3>
<h4 style="text-align: center">
各仓库库存状况一目了然，解决库存难管理问题
</h4>
......@@ -147,13 +151,15 @@
<div class="tab-pane" v-if="active === 2">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">采购管理</h3>
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
采购管理
</h3>
<h4 style="text-align: center">
运营、采购、仓库等部门高效协同，实时跟踪采购需求
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
<img src="../../assets/images/cg/01.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
......@@ -176,7 +182,7 @@
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
<img class="t1" src="../../assets/images/cg/02.png" />
</div>
</div>
</div>
......@@ -185,7 +191,7 @@
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
<img src="../../assets/images/cg/03.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
......@@ -202,17 +208,17 @@
<div class="tab-pane" v-if="active === 3">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">生产管理</h3>
<h4 style="text-align: center">
采购与供应商同页面操作，实时沟通，有效缩短收货周期
</h4>
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
生产管理
</h3>
<h4 style="text-align: center">精准发货精度，支持分批发货</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
<img src="../../assets/images/sc/01.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<h4 style="text-align: center">精准发货</h4>
<p style="text-align: center">
精准跟踪发货进度，支持分批发货
</p>
......@@ -226,12 +232,12 @@
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<h4>一体化管理</h4>
<p>生产单、交货单与财务核算一体化管理</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
<img class="t1" src="../../assets/images/sc/02.png" />
</div>
</div>
</div>
......@@ -240,11 +246,11 @@
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
<img src="../../assets/images/sc/03.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<h4 style="text-align: center">修改数量</h4>
<p style="text-align: center">支持发货前修改发货数量</p>
</div>
</div>
......@@ -256,12 +262,12 @@
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<h4>操作日志</h4>
<p>全流程日志，方便追溯和分析</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
<img class="t1" src="../../assets/images/sc/04.png" />
</div>
</div>
</div>
......@@ -270,17 +276,17 @@
<div class="tab-pane" v-if="active === 4">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">收获管理</h3>
<h4 style="text-align: center">
采购生产同路径入库，收货信息化管理
</h4>
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
收获管理
</h3>
<h4 style="text-align: center">支持收获管理</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
<img src="../../assets/images/sh/01.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<h4 style="text-align: center">双重审核</h4>
<p style="text-align: center">入库财务及仓库双重审核</p>
</div>
</div>
......@@ -292,12 +298,12 @@
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<h4>分批发货</h4>
<p>允许分批收货，收货后可进行质检</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
<img class="t1" src="../../assets/images/sh/02.png" />
</div>
</div>
</div>
......@@ -306,11 +312,11 @@
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
<img src="../../assets/images/sh/03.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<h4 style="text-align: center">快速入库</h4>
<p style="text-align: center">可用其它入库快速入库</p>
</div>
</div>
......@@ -321,19 +327,21 @@
<div class="tab-pane" v-if="active === 5">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">自发货</h3>
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
自发货
</h3>
<h4 style="text-align: center">
采购与供应商同页面操作，实时沟通，有效缩短收货周期
多平台多店铺数据链打通，库存同步，实时共享
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
<img src="../../assets/images/fh/01.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<h4 style="text-align: center">拣货方式灵活</h4>
<p style="text-align: center">
精准跟踪发货进度，支持分批发货
支持按订单拣货，批量汇总拣货
</p>
</div>
</div>
......@@ -345,12 +353,12 @@
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>生产单、交货单与财务核算一体化管理</p>
<h4>打单、验货以及称重一体化进行</h4>
<p>可一人操作，提高人效</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
<img class="t1" src="../../assets/images/fh/02.png" />
</div>
</div>
</div>
......@@ -359,12 +367,14 @@
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
<img src="../../assets/images/fh/03.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">支持发货前修改发货数量</p>
<h4 style="text-align: center">一键物流下单</h4>
<p style="text-align: center">
一键创建物流订单，获取打印面单
</p>
</div>
</div>
</div>
......@@ -375,12 +385,12 @@
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>全流程日志，方便追溯和分析</p>
<h4>多站点库存数据打通</h4>
<p>实时共享库存，灵活发货</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
<img class="t1" src="../../assets/images/fh/04.png" />
</div>
</div>
</div>
......@@ -389,85 +399,51 @@
<div class="tab-pane" v-if="active === 6">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">物流管理</h3>
<h4 style="text-align: center">
智能推荐优势物流商，物流轨迹实时查询
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">全程跟踪包裹状态</h4>
<p style="text-align: center">
精准跟踪发货进度，支持分批发货
</p>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>发货后的订单，系统自动计算最低物流运费</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
<img src="../../assets/images/fh/wl.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<p style="text-align: center">物流跟踪实时查询包裹状态</p>
<div class="content-text" style="margin-left: 40px">
<h4
style="
font-size: 32px;
font-weight: 100;
margin: 0;
">
物流管理
</h4>
<h5 style="font-size: 14px; margin-bottom: 16px; margin-top: 6px; font-weight: 100;">
智能推荐优势物流商，物流轨迹实时查询
</h5>
<div class="text-des">
<p>精准跟踪发货进度，支持分批发货</p>
<p>发货后的订单，系统自动计算最低物流运费</p>
<p>物流跟踪实时查询包裹状态</p>
<p>图表展示物流方式占比，使你更快做出决策</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-4">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<p>图表展示物流方式占比，使你更快做出决策</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" v-if="active === 7">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">FBA发货</h3>
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
FBA发货
</h3>
<h4 style="text-align: center">
一表连通装箱、发货、物流，操作流程方便快捷
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/kc.png" />
<img src="../../assets/images/fh/05.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键生成采购单</h4>
<h4 style="text-align: center">创建物流订单</h4>
<p style="text-align: center">一键装箱，一键创建物流订单</p>
</div>
</div>
......@@ -479,12 +455,12 @@
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>跨部门高效协同合作</h4>
<h4>跟踪号</h4>
<p>可分批生成跟踪号</p>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/warehouse/dd.png" />
<img class="t1" src="../../assets/images/fh/06.png" />
</div>
</div>
</div>
......@@ -493,11 +469,11 @@
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/warehouse/no.png" />
<img src="../../assets/images/fh/07.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">采购流程方便快捷</h4>
<h4 style="text-align: center">缺货自动转至待补货</h4>
<p style="text-align: center">缺货自动转至待补货</p>
</div>
</div>
......@@ -719,4 +695,8 @@ export default {
box-shadow: none;
z-index: 2;
}
.card-inner-content .content-text .text-des p {
margin-bottom: 12px;
}
</style>
src/views/function/functionPage.vue
......@@ -13,7 +13,158 @@
</p>
</div>
</div>
<div class="content-body"></div>
<div class="content-body">
<div class="tab-content">
<div class="t-row">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
POD订单
</h3>
<h4 style="text-align: center">
pod产品开发，一键合成，一键上架
</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/function/01.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">图文定制</h4>
<div class="text-des">
<p style="text-align: center">
支持客户图文定制，自动抓取客户设计的成品图和设计图
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>订单流程</h4>
<div class="text-des text-des-2">
<p>订单流程受pod生产控制，互相对应</p>
</div>
</div>
</div>
<div class="right">
<img src="../../assets/images/function/02.png" />
</div>
</div>
</div>
</div>
<div class="t-row-3">
<div class="card-inner">
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/function/03.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">方便快捷出单、装箱</h4>
<div class="text-des">
<p style="text-align: center">
生产完成扫码，单件直接出面单，多件放入周转箱等待配齐
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="t-row">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
POD 生产管理
</h3>
<h4 style="text-align: center">实时统计订单产品数据</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/function/04.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">一键创建生产单</h4>
<div class="text-des text-des-2">
<p style="text-align: center">
操作简单明了，一健创建生产单
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="t-row-2">
<div class="card-inner">
<div class="card-inner-content">
<div class="left content-text-wrap">
<div class="content-text">
<h4>批量发货一步到位</h4>
<div class="text-des">
<p>分配供应商，打印生产单，拣胚贴码</p>
<p>工厂下载生产图进行压烫</p>
<p>扫码验货进行生产完成，批量发货</p>
</div>
</div>
</div>
<div class="right">
<img class="t1" src="../../assets/images/function/05.png" />
</div>
</div>
</div>
</div>
</div>
<div class="t-row">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
智能采购系统
</h3>
<h4 style="text-align: center">实现供采双方信息互通</h4>
<div class="card-inner-content">
<div class="left">
<img src="../../assets/images/function/R-C.png" />
</div>
<div class="right content-text-wrap">
<div class="content-text">
<h4 style="text-align: center">
根据库存和销量，自动下单给供应商
</h4>
<div class="text-des">
<p>
采购数据信息自动流转给供应商，减少下单环节和沟通成本，提高采购效率
</p>
<p>开放供应商打印商品标签</p>
<p>
让供应商在系统里一键打印客户SKU标签，大大减少企业的入库工作量
</p>
<p>库存周转周期可调节，资金周转灵活</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="t-row">
<div class="t-row-1">
<div class="card-inner">
<h3 style="text-align: center; font-size: 32px; font-weight: 100">
精准可视化决策系统
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
......@@ -47,6 +198,168 @@ export default {
}
.content-body {
height: calc(100vh - 33.333vw - 60px);
}
.text {
position: absolute;
top: 30%;
left: 5%;
}
.text h2 {
color: #fff;
font-size: 48px;
margin-bottom: 20px;
}
.text p {
color: #fff;
font-size: 24px;
}
.image {
height: 33.333vw;
}
.feature-list {
display: flex;
position: absolute;
left: 50%;
bottom: -30px;
transform: translateX(-50%);
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.3);
width: 1150px;
background-color: #fff;
border-radius: 6px;
transition: all 0.3s;
}
.feature-item {
flex: 1;
text-align: center;
padding: 20px;
cursor: pointer;
}
.active {
background-color: #0089ff;
color: #fff;
}
.function-body {
}
.t-row-1 {
padding-top: 70px;
padding-bottom: 80px;
}
.t-row-2,
.t-row-4 {
padding: 75px 0;
background-color: #f7f8fa;
}
.t-row-3,
.t-row-5 {
padding: 75px 0;
}
.t-row-2 .a-img {
position: relative;
}
.t-row-2 .t1 {
width: 100%;
}
.t-row-2 .t2 {
position: absolute;
width: 150px;
left: 33px;
top: 130px;
}
.t-row-2 .t3 {
position: absolute;
width: 160px;
left: 290px;
top: 80px;
}
.card-inner {
margin: 0 auto;
width: 1150px;
}
.card-inner h4 {
color: #777;
font-weight: 100;
margin-top: 10px;
margin-bottom: 80px;
}
.card-inner-content {
display: flex;
justify-content: center;
align-items: center;
}
.card-inner-content .content-text h4 {
margin-bottom: 16px;
line-height: 48px;
font-weight: 500;
font-size: 32px;
position: relative;
}
.card-inner-content .content-text h4::before {
content: '';
position: absolute;
top: -16px;
width: 34px;
height: 6px;
background-color: #0089ff;
border-radius: 3px;
}
.left {
flex: 1;
}
.left img {
width: 100%;
}
.right img {
width: 100%;
}
.right {
flex: 1;
}
.feature-scrolling {
position: fixed;
top: 60px;
left: 0;
bottom: unset;
width: 100%;
transform: translateX(0);
border-radius: 0;
box-shadow: none;
z-index: 2;
}
.text-des {
margin-left: 34px;
}
.text-des p {
margin-bottom: 20px;
color: #4e5969;
}
.text-des-2 {
margin-left: 0;
}
</style>
\ No newline at end of file
src/views/price/pricePage.vue
......@@ -30,12 +30,209 @@
</div>
</div>
<div class="content-body">
<div class="price-container">
<div class="price-columns">
<div
v-for="(c, i) in priceColumns"
:key="i"
class="price-column"
:class="`${c.labelClass || ''} ${c.class || ''}`">
{{ c.label }}
</div>
</div>
<div class="price-items">
<div v-for="(p, i) in prices" :key="i" class="price-item">
<div
v-for="(c, j) in priceColumns"
:key="j"
class="price-value"
:class="`${c.valueClass || ''} ${c.class || ''}`"
v-html="value(c, p)"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'pricePage',
data() {
return {
priceColumns: [
{
label: '版本',
value: 'name',
class: 'h-2x',
valueClass: 'fs-20 fw-b',
},
{ label: '收费方式', value: 'chargeType' },
{
label: '价格',
value: (d) => {
d = d.price
if (d && typeof d === 'number') return d + '元'
return d
},
},
{ label: '账号数量', value: 'accountsCount' },
{ label: '充值金额', value: 'rechargeAmount' },
{ label: '部署方式', value: 'deploymentType' },
{ label: '功能定制', value: 'featureCustomization' },
{ label: '权限管理', value: 'permissionManage' },
{ label: '财务管理', value: 'financialManage' },
{ label: '统计报表', value: 'statisticalReport' },
{ label: '订单管理', value: 'orderManage' },
{ label: '物流管理', value: 'logisticsManage' },
{ label: '订单数据存储', value: 'orderStorage' },
{ label: '操作日志查看天数', value: 'logsRetainDays' },
{ label: '店铺数量', value: 'shopCount' },
{ label: '图片空间', value: 'imageStorage' },
{
label: '培训方式',
value: (d) => {
d = d.trainingType
if (Array.isArray(d)) return d.map((e) => `<p>${e}</p>`).join('')
return d
},
class: 'h-3x',
valueClass: 'list',
},
{ label: '专属产品经理', value: 'exclusivePM' },
],
prices: [
{
name: '试用版',
chargeType: '免费3个月或3000单', // 收费方式
price: 0, // 价格
accountsCount: 10, // 账号数量
rechargeAmount: '赠送', // 充值金额
deploymentType: 'SaaS', // 部署方式
featureCustomization: false, // 功能定制
permissionManage: true, // 权限管理
financialManage: true, // 财务管理
statisticalReport: true, // 统计报表
orderManage: true, // 订单管理
logisticsManage: true, // 物流管理
orderStorage: '3个月或试用套餐结束', // 订单数据存储
logsRetainDays: '3个月或试用套餐结束', // 操作日志查看天数
shopCount: 20, // 店铺数量
imageStorage: '2G', // 图片空间
trainingType: '线上培训', // 培训方式
exclusivePM: false, // 专属产品经理
},
{
name: '基础版',
chargeType: '按单收费', // 收费方式
price: '0.2元/单', // 价格
accountsCount: 100, // 账号数量
rechargeAmount: '首充10000元', // 充值金额
deploymentType: 'SaaS', // 部署方式
featureCustomization: false, // 功能定制
permissionManage: true, // 权限管理
financialManage: true, // 财务管理
statisticalReport: true, // 统计报表
orderManage: true, // 订单管理
logisticsManage: true, // 物流管理
orderStorage: '180天', // 订单数据存储
logsRetainDays: '90天', // 操作日志查看天数
shopCount: 50, // 店铺数量
imageStorage: '4G', // 图片空间
trainingType: '线上培训', // 培训方式
exclusivePM: true, // 专属产品经理
},
{
name: '进阶版',
chargeType: '按单收费', // 收费方式
price: '0.16元/单', // 价格
accountsCount: '不限', // 账号数量
rechargeAmount: '首充30000元', // 充值金额
deploymentType: 'SaaS', // 部署方式
featureCustomization: '优化', // 功能定制
permissionManage: true, // 权限管理
financialManage: true, // 财务管理
statisticalReport: true, // 统计报表
orderManage: true, // 订单管理
logisticsManage: true, // 物流管理
orderStorage: '360天', // 订单数据存储
logsRetainDays: '180天', // 操作日志查看天数
shopCount: 100, // 店铺数量
imageStorage: '10G', // 图片空间
trainingType: ['每周线上回访', '每年3次上门回访', '每年3次上门实施'], // 培训方式
exclusivePM: true, // 专属产品经理
},
{
name: '尊享版',
chargeType: '按月收费', // 收费方式
price: 9800, // 价格
accountsCount: '不限', // 账号数量
rechargeAmount: '季付', // 充值金额
deploymentType: 'SaaS', // 部署方式
featureCustomization: '优化+通用定制', // 功能定制
permissionManage: true, // 权限管理
financialManage: true, // 财务管理
statisticalReport: true, // 统计报表
orderManage: true, // 订单管理
logisticsManage: true, // 物流管理
orderStorage: '一直存储', // 订单数据存储
logsRetainDays: '360天', // 操作日志查看天数
shopCount: '不限', // 店铺数量
imageStorage: '50G', // 图片空间
trainingType: ['每周线上回访', '每年6次上门回访', '每年4次上门实施'], // 培训方式
exclusivePM: true, // 专属产品经理
},
{
name: '至尊版',
chargeType: '按月收费', // 收费方式
price: 29800, // 价格
accountsCount: '不限', // 账号数量
rechargeAmount: '季付', // 充值金额
deploymentType: 'SaaS或阿里云独立部署', // 部署方式
featureCustomization: '支持个性化定制', // 功能定制
permissionManage: true, // 权限管理
financialManage: true, // 财务管理
statisticalReport: true, // 统计报表
orderManage: true, // 订单管理
logisticsManage: true, // 物流管理
orderStorage: '一直存储', // 订单数据存储
logsRetainDays: '360天', // 操作日志查看天数
shopCount: '不限', // 店铺数量
imageStorage: '100G', // 图片空间
trainingType: ['每周线上回访', '每年3次上门回访', '每年6次上门实施'], // 培训方式
exclusivePM: true, // 专属产品经理
},
],
}
},
methods: {
value(col, val) {
if (!val) return
let value
const key = col.value
if (typeof key === 'function') value = key(val)
else value = val[key]
if (typeof value === 'boolean') {
return `<span class="${value ? 'yes' : 'no'}"></span>`
}
if (typeof value === 'string') {
value = value.replaceAll(
/((\d+)(\.\d+)?)/g,
'<span class="number">$1</span>'
)
}
return value
},
},
}
</script>
<style scoped>
......@@ -117,8 +314,110 @@ export default {
background-size: 100% 100%;
}
.content-body {
height: calc(100vh - 26vw - 60px);
width: 1400px;
margin: 0 auto;
padding: 100px 0;
}
.price-container {
display: flex;
border-radius: 8px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
user-select: none;
overflow: hidden;
font-size: 16px;
}
.price-column,
.price-value {
box-sizing: border-box;
height: 40px;
padding: 0 30px;
display: flex;
align-items: center;
white-space: nowrap;
}
.price-column {
border-right: solid 1px #eee;
color: #787878;
}
.price-value {
display: flex;
justify-content: center;
align-items: center;
line-height: 1.5;
}
.price-items {
display: flex;
flex: 1;
}
.price-item {
transition: 0.15s;
padding-bottom: 20px;
flex: 1;
}
.price-item:hover {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
border-radius: 8px;
background-color: #0085fc;
color: #fff;
border-right: none;
}
.price-item:not(:last-child) {
border-right: solid 1px #eee;
}
</style>
<style>
.price-container .fs-20 {
font-size: 20px;
}
.price-container .fw-b {
font-weight: bold;
}
.price-container .h-2x {
height: 80px;
}
.price-container .h-3x {
height: 120px;
}
.price-container .number {
font-size: 1.2em;
margin: 0 4px;
}
.price-container .list {
white-space: normal;
flex-direction: column;
}
.price-container .list p {
margin: 0;
}
.price-container .yes {
display: inline-block;
width: 24px;
height: 24px;
background-size: 100%;
background-image: url("data:image/svg+xml,%0A%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.4122 5.66876L17.2065 6.33527C17.6454 6.70315 17.7026 7.35718 17.3345 7.79587C17.3345 7.79594 17.3344 7.79602 17.3341 7.79591L10.3994 16.0559C10.031 16.4942 9.37711 16.5513 8.93832 16.1835L7.3497 14.8505L14.9512 5.79638C15.3196 5.35806 15.9734 5.30094 16.4122 5.66876Z' fill='%2334D98A'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.69383 11.1494L5.38955 10.3767C5.76669 9.95781 6.40934 9.91692 6.83653 10.2846L11.7137 14.4824L10.3868 16.0791C10.0208 16.5195 9.367 16.5798 8.92658 16.2138C8.92115 16.2093 8.91576 16.2047 8.91043 16.2001L4.78549 12.6269C4.35264 12.252 4.3057 11.5971 4.68065 11.1643C4.68499 11.1593 4.68939 11.1543 4.69383 11.1494Z' fill='%2334D98A'/%3E%3C/svg%3E%0A");
}
.price-container .no {
display: inline-block;
width: 24px;
height: 24px;
background-size: 100%;
background-image: url("data:image/svg+xml,%0A%3Csvg width='23' height='22' viewBox='0 0 23 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.1735 5.25388L17.2461 6.32649C17.5846 6.66499 17.5846 7.21382 17.2461 7.55233L13.7974 11.0004L17.2461 14.4489C17.5846 14.7874 17.5846 15.3363 17.2461 15.6748L16.1735 16.7474C15.835 17.0859 15.2862 17.0859 14.9477 16.7474L11.4983 13.2974L8.05233 16.7461C7.71382 17.0846 7.16499 17.0846 6.82649 16.7461L5.75388 15.6735C5.41537 15.335 5.41537 14.7862 5.75388 14.4477L9.19907 11.0004L5.75388 7.55358C5.41537 7.21507 5.41537 6.66625 5.75388 6.32774L6.82649 5.25513C7.16499 4.91663 7.71382 4.91663 8.05233 5.25513L11.4983 8.70123L14.9477 5.25388C15.2862 4.91537 15.835 4.91537 16.1735 5.25388Z' fill='%23FF4930'/%3E%3C/svg%3E%0A");
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment