Skip to content

O
offical_web
Commit d1c569f1 by qinjianhui
Options

feat: 首页

parent 583553b5
Showing with 812 additions and 1066 deletions
src/assets/css/common.css
html, html,
body, body {
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
button,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video,
input {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
...@@ -81,961 +12,196 @@ html, ...@@ -81,961 +12,196 @@ html,
body { body {
width: 100%; width: 100%;
height: 100%; height: 100%;
/* font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif; */
color: #222; color: #222;
} }
@media screen and (min-width: 768px) { div {
::-webkit-scrollbar { box-sizing: border-box;
width: 10px;
height: 10px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(221, 221, 221, 1);
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
}
::-webkit-scrollbar-track {
border: none;
outline: none;
background-color: rgba(0, 0, 0, 0);
}
} }
/* @font-face
{
font-family: Alibaba PuHuiTi;
src: url(../fonts/Alibaba-PuHuiTi-Light.ttf),url(../fonts/Alibaba-PuHuiTi-Heavy.ttf),url(../fonts/Alibaba-PuHuiTi-Light.ttf),url(../fonts/Alibaba-PuHuiTi-Medium.ttf),url(../fonts/Alibaba-PuHuiTi-Regular.ttf);
} */
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
margin-bottom: 10px;
}
.el-dialog__header { ul li {
padding: 8px 20px 5px 20px; list-style: none;
} }
.el-dialog__body { .mt-10 {
padding: 10px 20px 0; margin-top: 10px;
} }
.el-dialog__footer { .mt-20 {
padding: 10px 20px 10px 20px; margin-top: 20px;
text-align: center;
} }
.plTableBox .el-table--mini td, .mt-30 {
.plTableBox .el-table--mini th { margin-top: 30px;
padding: 3px 0 !important;
} }
.el-table--mini td, .mt-80 {
.el-table--mini th { margin-top: 80px;
padding: 3px 0;
} }
.el-tabs--border-card>.el-tabs__content { .mb-8 {
padding: 10px; margin-bottom: 8px;
} }
.el-tabs__header { .mb-10 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.el-table .cell { .mb-20 {
padding-left: 6px; margin-bottom: 20px;
padding-right: 6px;
white-space: nowrap;
}
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td {
background-color: #35e6dc !important;
}
.height>td {
background-color: #ff4747 !important;
color: #fff;
}
/* .el-table tr:hover>td{
background-color: #35e6dc !important;
} */
.my-table .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: #67c23a;
border-color: #67c23a;
}
.menu-disabled-view .el-dropdown-menu__item.is-disabled {
color: #303133;
font-weight: 600;
border-bottom: 1px solid #ebeef5;
}
.el-dropdown-menu--medium .el-dropdown-menu__item {
padding: 0 15px;
}
.menu-disabled-view .menu-cherd {
padding-left: 35px;
}
.el-form-item--mini .el-form-item__content,
.el-form-item--mini .el-form-item__label {
line-height: 26px;
}
.el-form-item--mini .el-form-item__label {
padding-right: 5px;
}
.el-input--mini .el-input__inner {
height: 26px;
line-height: 26px;
padding: 0 8px;
} }
.el-input--prefix .el-input__inner { .mb-30 {
padding-left: 26px; margin-bottom: 30px;
} }
/* .e .el-input__inner { .mr-10 {
padding: 0 8px ; margin-right: 10px;
} */
.el-input__suffix {
right: 2px;
} }
.el-input__icon { .mr-20 {
width: 18px; margin-right: 20px;
} }
.el-input--suffix .el-input__inner { .mr-30 {
padding-right: 18px; margin-right: 30px;
} }
.el-input-number--mini { .ml-10 {
line-height: 24px; margin-left: 10px;
} }
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before { .ml-20 {
content: '*'; margin-left: 20px;
color: #f55555;
font-size: 18px;
font-weight: 600;
} }
.el-button+.el-button, .ml-30 {
.el-button+.el-dropdown { margin-left: 30px;
margin-left: 5px;
} }
.el-button--mini, .flex {
.el-button--mini.is-round { display: flex;
padding: 6px 8px;
} }
/* 全局样式 */ .flex-center {
.image-view-c {
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.flex-column { .flex-between {
display: flex; justify-content: space-between;
flex-direction: column; align-items: center;
height: calc(100% - 10px);
}
.erp-index-container {
width: 100%;
background-color: #eff3f6;
height: calc(100vh - 120px);
box-sizing: border-box;
padding: 0 15px;
}
.footerWidth {
height: calc(100vh - 140px);
}
.footerWidth2 {
height: calc(100vh - 322px);
}
.tree-tabs-conter .el-tabs__item,
.footer-edit .el-tabs__item {
line-height: 25px;
height: 25px;
font-weight: 600;
} }
.erp-index-container-h { .items-center {
height: calc(100vh - 85px); align-items: center;
padding-top: 10px;
} }
.erp-select-item { .justify-center {
padding-top: 10px; justify-content: center;
} }
.addBtn { .justify-between {
width: 80px; justify-content: space-between;
height: 30px;
display: inline-block;
background: rgba(29, 138, 207, 1);
border-radius: 2px;
color: #ffffff;
text-align: center;
line-height: 30px;
margin-right: 20px;
cursor: pointer;
} }
.otherBtn { .flex-1 {
min-width: 80px; flex: 1;
height: 30px;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(239, 239, 239, 1);
border-radius: 2px;
color: #222222;
margin-right: 20px;
text-align: center;
line-height: 30px;
display: inline-block;
cursor: pointer;
padding: 0 15px;
} }
.otherBtn:hover { .flex-col {
background: rgba(255, 255, 255, 1); flex-direction: column
border: 1px solid rgba(29, 138, 207, 1);
color: rgba(29, 138, 207, 1);
} }
.index-tableOperate { .py-10 {
font-size: 14px; padding: 10px 0;
flex-wrap: wrap;
} }
.tableOperate { .px-10 {
font-size: 14px; padding: 0 10px;
} }
.index-tableOperate>div { .py-20 {
cursor: pointer; padding: 20px 0;
border-radius: 4px;
height: 40px;
line-height: 40px;
color: #ffffff;
font-weight: bold;
padding: 0 24px;
margin-right: 20px;
margin-bottom: 20px;
} }
ul li { .px-20 {
list-style: none; padding: 0 20px;
} }
/* 公用 */ .py-30 {
.height-100 { padding: 30px 0;
height: 100%;
} }
.my-flex { .px-30 {
display: flex; padding: 0 30px;
} }
.my-flex-1 { .py-24 {
flex: 1; padding: 24px 0;
} }
.pageinationCon { .px-24 {
position: relative; padding: 0 24px;
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: center;
margin: 0 auto;
padding: 3px 15px;
/* background-color: #eff3f6; */
height: 40px;
} }
.tree-view { .mt-16 {
padding-top: 10px; margin-top: 16px;
min-width: 168px;
max-width: 200px;
overflow: auto;
position: relative;
height: 100%;
padding-bottom: 10px;
box-sizing: border-box;
} }
.tree-view-show { .font-light {
width: 15px; font-weight: 300;
height: 30px;
margin: auto;
right: 10px;
cursor: pointer;
text-align: center;
} }
.tree-view-show i { .font-size-18 {
color: #409eff;
font-size: 18px; font-size: 18px;
line-height: 30px;
font-weight: bold;
}
.tree-view-show i:hover {
color: #1d8acf;
} }
.pop-tree-view .el-checkbox:last-of-type { .font-size-16 {
margin-right: 8px;
}
.tree-view .el-tree {
height: 100%;
overflow: auto;
border: 1px solid #e4e7ed;
box-sizing: border-box;
}
.my-table-cont {
padding: 0;
overflow: auto;
width: 100%;
position: relative;
/* user-select:none */
}
.my-flex-table {
position: relative;
overflow: auto;
width: calc(100% - 230px);
}
.my-table {
width: 99.9% !important;
}
.file-view {
width: 220px;
min-height: 440px;
padding: 20px;
background: #fff;
color: #333;
font-size: 14px;
}
.icon-view {
width: 23px;
height: 23px;
font-size: 16px; font-size: 16px;
line-height: 23px;
border-radius: 4px;
text-align: center;
display: inline-block;
color: #fff;
cursor: pointer;
vertical-align: middle;
}
.icon-view:not(:first-child) {
margin-left: 5px;
}
.icon-edit-view {
background-color: #ff9900;
}
.icon-edit-view:hover {
background-color: #ffd36a;
}
.icon-del-view {
background-color: #f56c6c;
}
.icon-del-view:hover {
background-color: #f78989;
}
.icon-tools-view {
background-color: #8cc34b;
}
.icon-tools-view:hover {
background-color: #85ce61;
}
.icon-primary-view {
background-color: #409eff;
}
.icon-primary-view:hover {
background-color: #66b1ff;
}
.text-red {
color: #d50000;
}
.menu {
z-index: 999;
width: 80px;
padding: 10px;
position: absolute;
background-color: #fff;
box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.21);
}
.menu_item {
text-align: center;
cursor: pointer;
font-size: 14px;
line-height: 25px;
color: #333333;
} }
.menu_item:hover { .font-size-14 {
background-color: #409eff;
color: #fff;
}
.pop-p {
position: relative;
min-height: 24px;
margin-top: 3px;
margin-bottom: 10px;
font-size: 14px; font-size: 14px;
line-height: 28px;
color: #333;
font-weight: bold;
text-align: center;
}
.my-table-title {
background-color: #fff;
border: 1px solid #ebeef5;
padding: 5px;
}
.picture-img-title {
line-height: 60px;
margin-right: 8px;
width: 60px;
text-align: right;
}
.footer-edit {
position: relative;
height: auto;
background-color: #fff;
}
.tree-tabs-conter {
background: #fff;
height: 280px;
}
.table-setting {
position: absolute;
left: 0;
top: 5px;
z-index: 998;
}
.tabcolounm-checkbox {
width: 500px;
}
.tabcolounm-checkbox li {
float: left;
width: 150px;
box-sizing: border-box;
}
.tabcolounm-checkbox .el-checkbox__label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 90px;
vertical-align: middle;
}
.el-button--warning:focus,
.el-button--warning:hover {
background-color: rgb(253, 183, 77);
border-color: rgb(253, 183, 77);
}
.el-button--warning:active {
background-color: rgb(250, 167, 43);
border-color: rgb(250, 167, 43);
}
.pop-form-body .el-dialog__body {
padding: 0px 20px;
}
/* .pop-form-body .el-dialog__footer {
text-align: left;
} */
.my-table .el-input__inner {
border: none;
} }
.w-full-70 {
width: 70vw;
.show-column {
position: absolute;
z-index: 5;
right: 0px;
top: 6px;
} }
.custom-tree-node { .gap-100 {
font-size: 14px; gap: 100px;
} }
.el-tree-node__content { .text-textContent {
height: 28px; --tw-text-opacity: 1;
color: rgba(92, 94, 102, var(--tw-text-opacity));
} }
.el-tree-node__content strong { .lx-title {
font-size: 36px;
color: #1a2035;
font-weight: 500; font-weight: 500;
color: #303133;
}
.el-dialog {
padding-bottom: 10px;
}
.rotate-90 {
transform: rotate(90deg);
}
.rotate-270 {
transform: rotate(270deg);
}
.router-but-view {
display: inline-block;
padding: 0 7px;
border-radius: 2px;
line-height: 23px;
cursor: pointer;
background-color: #409eff;
color: #fff;
height: 23px;
}
.router-icon {
margin-left: 1px;
margin-top: 3px;
display: inline-block;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADT0lEQVRoQ+1ZTYhOYRR+noWS/G2IiRolC1N+Itkoo/yMWMmEFArFUCIWLJgFG1OKSUSRYmSkidIwqVnYMZOIyMJPIkR+srF5dL7e+/XOO/f7/2Zud3xnee655z3P+5xzz3nfS6RcmPL4kX4Ako4BOJpSJlopSSkNPhN2DUCZ7N0B0A/gLYDVANY7P4X0XwAcBFAfrZsUA40key0ISRsBXHMBFaPfCuBS0gAmk/zqANhuvnEBlapPrAZaSJ51AA4AaHMAitHb7hsLiRfxRwB//Xx2MeXTjwIwya+7pGqgzNof/NqIA9Bata0ZWkfZyWEAAyRTMRv500MNwNBmSrz3GgNJ7Lq/5v/NgKQVAOYAaIjpornI+QCgD8Bzkj2SbPrcHRj/dhPqSwDdJH/kclY2A5IOAzheYQp1kNzkQNzI4cuGu/0ku+KelwWg2ic36zmSWgC059mQzSSvhs9LBiDJ5nWb26spR0iekHQBwPY8jutJviu7iCUtB3A/WMBGji6ST4pBJGmaCzK8PGgi2e3G6vEAlrkLhnme31sk11UCYA+AM56DTpLNgcNxAGyu9+U0ye+B3RoAdmyMpI2kHRGzImkqgMcA6pzyM8kplQA4D2Cn56CB5IvA4SwArzxdplDj2JH0HsB096yf5ILQTlIHgA2efgZJOz9npKQakHQbwFrP2QSSvwIAFoTtWiQnSR7KAeA1gJnuWS/JxhgApwDs8/SLSD4qF0B48dVMsjMAMAbAH093j+SqmMCaANz19BdJ7oixs5qz2otkLMms/1IZMCqNUl/qSH4KQNg1yXxP10rSwGdF0tIw2Oh2wtvdAbcOAJ6SnBv4yV7GFRynJY126WGd15frXt4/BGCLRIfzyK7Hui+An3HpFOiMRevwKwP9FpJXygZgL0qa7QLJFUcfyYUx9VJE3HlN2knujUmx4hnwqLXPmzW0QWngbDIpI8makjWnSuUcyV1xTkqqgRj0ltfWcJbEOL9McpukxQBscbOzJlas2KfyAYCbUYOrOgCPkYkA/I6ZXcsvTElmY7aF5BvJZ4WMXEqXnkLFOB4um4pSaLiCzLdODUDSLNQYqDFQ4Q7kTKEK/Sby+oi4Xk/3j+5EeK/ioqn4H5APb+oB/APRHiipvXbpTgAAAABJRU5ErkJggg==);
width: 16px;
height: 16px;
background-size: 100% 100%;
}
.el-table .el-image__error {
font-size: 12px;
line-height: 14px;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.calcul-tat-bar {
width: 220px;
margin-right: 6px;
border: 1px solid #e5e5e5;
border-radius: 10px 10px 0 0;
height: 100%;
box-sizing: border-box;
}
.calcul-tat-bar li {
height: 30px;
line-height: 30px;
}
.calcul-tat-bar ul {
overflow: auto;
background: #fff;
}
.tabt-bar-nav {
background-color: #cccccc;
color: #fff;
border-radius: 10px 10px 0 0;
cursor: pointer;
overflow: hidden;
width: 100%;
height: 40px;
line-height: 40px;
}
.tabt-bar-nav2 {
background-color: #ebeef5;
width: 100%;
color: #333;
height: 40px;
line-height: 40px;
}
.calcul-tat-bar .active {
background: #4267b2;
}
.calcul-tat-bar span {
text-align: center;
font-size: 14px;
}
.calcul-tat-bar-li {
cursor: pointer;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
}
.billInfo {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 20px;
background: rgba(242, 242, 242, 1);
color: #999999;
font-size: 12px;
line-height: 20px;
text-align: center; text-align: center;
--tw-text-opacity: 1;
color: rgba(26, 32, 53, var(--tw-text-opacity));
letter-spacing: 1px;
} }
.supply-list { .text-sm {
border-bottom: 1px solid #dcdfe6; font-size: 18px;
padding: 8px 0;
}
.supply-list li {
color: #303133;
font-size: 16px;
font-weight: 600;
line-height: 20px;
display: inline-block;
}
.supply-list li:not(:first-child) {
padding: 0 6px;
font-weight: 500;
font-size: 12px;
line-height: 24px;
margin-left: 8px;
background: #fff;
color: #606266;
border: 1px solid #dcdfe6;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
}
.attribute-checkbox .el-checkbox {
min-width: 110px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
border-radius: 4px;
padding-left: 5px;
padding-right: 5px;
margin-right: 10px;
margin-bottom: 10px;
}
.attribute-checkbox .el-checkbox__label {
vertical-align: middle;
display: inline-block;
width: 120px;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pop-p-but {
position: absolute;
display: inline-block;
right: 0;
top: 0;
height: 20px;
}
/* .pop-p-but .el-button--mini {
padding: 3px 5px;
} */
.my-table-column {
color: #f56c6c;
font-size: 16px;
}
.tooltip-ul li {
padding: 2px;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box .el-tabs__content {
height: calc(100% - 25px);
box-sizing: border-box;
}
.box .el-tab-pane {
height: 100%;
}
.box .el-tabs__item {
line-height: 25px;
height: 25px;
font-weight: 600;
}
.summary-but {
position: relative;
top: 2px;
margin-right: 10px;
margin-bottom: -4px;
cursor: pointer;
display: inline-block;
width: 24px;
height: 24px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAWUUlEQVR4Xu2de5Ac1XXGv9OzSBYq2xRIdkGCTQgPBQgxSIbdnp1eyUAoUDAJqRAnNlWYx8xKeJUoSUHZkEJUQYxxFdisI02PeJUdYhOXsYFCig3xamd2elc2Qg4PG2zjECWYsiUIwpaEpJ0+qUGQAEaib885d7p37v6753733N93v+memZ5ugvtzBByB/RIgx8YRcAT2T8AFxO0OR+AABFxA3PZwBFxA3B5wBNIRcEeQdNzcqB4h4ALSI0a7ZaYj4AKSjpsb1SMEXEB6xGi3zHQEXEDScXOjeoSAlYCUH1r43sK75hzG3JqHFh88E9i2yNtR4Hjrjj07t37l7Md2ZHFNF3375LlzZx08v0Xe/ALHc7PYo3FPBdpJVNjWemXXC7WzNm03Hm84QC0glzf6z/S4cDaYLwLh/YZ95aqcwY8R0T978B5eU5rY1M3mlzUGF8aIz2TmvyTQyd3sRX1uxi9A9JWYWt9eW5p6WGM+8YAMjxc/zoQRgE/XaDjzmsT30jSPVpdMbbDZ6/BY/2LuoxEwXWBz3uzMRRuJMVodat4t2ZNYQJZNFEvcij/NROdINphXLQJu2+PR39wx2PyV5houmSi+e1bMNzNwmeY8edEm5vVU8D67ZrDZkOhZJCDDdf9yBv4RwEESTc0gjR9zH59f8yef0lhTORpYQNN0H4DjNPRzrLmXgCuqQbS20zV0HJByw7+WGKs6bWQmj/daNLBmSXNKco3Lxor9cYEnJTVnmhYzrqsNRR3tzY4CUm4M/Bkx/ctMA6uznsKJYdD4oYR2pV46AWg9KaE10zWY+MJaafLradeZOiAuHIbICU+BC3/aaUheDQe1vgHGAsMOera8k5CkCsjKaGDOrmlvisEz+2NE+S11VxhEn+xEtlL37wRwcScavTaWQI/N6Yv7b/End5muPVVAhuv+lQx8znQyVw945J21pjSR6jP7ZY3BM2OOH3IczQkQcFU1iG4yHWkckPa34jRr9pMg/JbpZK4eAPMD4dDkR9OwqIwP3A+i89KM7fkxjOd4z+4TTb99Nw5IZbx4Logf7Hng6QHs5O2759fO27TTRKL8wMKD6b2ztwKYEZfqmKxdrJZpaTjUXGeiZxyQcsO/nhhXm0zyWu1LIDwL5pdSjM3cEIJ3KIOPBTDHuLmY/jBc3DQ6VapsKJ4Fj79jPBewi0A/YcQvphibvSFEh4BxFIBDTJtjwg21UnSNyTjjgFTqA2MALTaZROLzaJP5bNUOj/UfxQXvWtM3zWl4pPy+6S5qxddVl0w9a4uJrXnK4/4qIrTZG/zxhjCYXGIwAOYBGfcfB+GkxJMwauFQVElcn8PCcn3gEQItTNo6A1+rBdFfJK1v15Xr/lcJ+FjSMQzeVAsmFyWtz2NdZdwPQSgn7p3xRDgU/X7ieiBFQOr+zwEcnnQSQmGwGjSaSevzWFeuD/w1gW4x6H1zGESnGtSjUvcfBXBK0jEMXlkLJr+QtD6PdcP1UpHRmjDo/fkwiI4wqE8VkD0m11zt9eg92hfsmSxYo7ZcLx1OaLVfOJL9EXaGpcjo9xmVhr8DnPwNOqNwRC1oPJ+soXxWtS/UPCjmlw263xsG0SyD+lQBYZMJwiAyPo0z0c9KbaXuq3LR1s8KR9M+tLkYb17thkwBZaVem4u2flY4mvahzcUFxNSR/dRrG6WtL4TBuow2FxcQIUu1jdLWF8JgXUabiwuIkKXaRmnrC2GwLqPNxQVEyFJto7T1hTBYl9Hm4gIiZKm2Udr6Qhisy2hzcQERslTbKG19IQzWZbS5uIAIWaptlLa+EAbrMtpcXECELNU2SltfCIN1GW0uLiBClmobpa0vhMG6jDYXFxAhS7WN0tYXwmBdRpuLC4iQpdpGaesLYbAuo83FBUTIUm2jtPWFMFiX0ebiAiJkqbZR2vpCGKzLaHNxARGyVNsobX0hDNZltLm4gAhZqm2Utr4QBusy2lxcQIQs1TZKW18Ig3UZbS4uIEKWahulrS+EwbqMNhcXECFLtY3S1hfCYF1Gm4sLiJCl2kZp6wthsC6jzcUFRMhSbaO09YUwWJfR5uICImSptlHa+kIYrMtoc3EBEbJU2yhtfSEM1mW0ubiACFmqbZS2vhAG6zLaXFxAhCzVNkpbXwiDdRltLi4gQpZqG6WtL4TBuow2FxcQIUu1jdLWF8JgXUabiwuIkKXaRmnrC2GwLqPNxQVEyFJto7T1hTBYl9Hm4gIiZKm2Udr6Qhisy2hzcQERslTbKG19IQzWZbS5uIAIWaptlLa+EAbrMtpcXECELNU2SltfCIN1GW0uLiBClmobpa0vhMG6jDYXFxAhS7WN0tYXwmBdRpuLC4iQpdpGaesLYbAuo83FBUTIUm2jtPWFMFiX0ebiAiJkqbZR2vpCGKzLaHNxARGyVNsobX0hDNZltLm4gAhZqm2Utr4QBusy2lxcQIQs1TZKW18Ig3UZbS4uIEKWahulrS+EwbqMNhcXECFLtY3S1hfCYF1Gm4sLiJCl2kZp6wthsC6jzcUFRMhSbaO09YUwWJfR5uICImSptlHa+kIYrMtoc3EBEbJU2yhtfSEM1mW0ubiACFmqbZS2vhAG6zLaXFxAhCzVNkpbXwiDdRltLmkC8j8ADklKgvfimNoZ0TNJ6/NYNzzWv5gL3phB78+GQfQ7BvXQ3ggmvWSpVptLmoD8GMCxSSERaKQaNL+UtD6PdeVx/3YiXJK4d8a6cChamrgecAHZD6zsBaRRnABzMbG5hC3xNM5fuyT6QeIxOSq8vO5/zAO+atYyfz4MJq80GaO9EUx6yVKtNpcUR5Di5wH+O0NILzHz5+DhGW+atxqOzWQ599HhDDqOGKtMG2Tgj2pB9KDJOO2NYNJLlmq1uaQIiH8+gG9lCVLeeqEC3l8tRr806Vt7I5j0kqVabS7GAfnURPGIvTE/lyVIueqFMRkORb5pz9obwbSfrNRrczEOSBtMpe7fCmAkK5Dy1AcBn6wG0V2mPWtvBNN+slKvzSVVQJZHA8e0pmkjgEOzAioPfTD44VoweVaaXrU3QpqesjBGm0uqgLTBlBv+tWneoGYBatd6IO+jYWnigTTza2+END1lYYw2l9QBee1U618BnJ0FUFnvgYGbakF0Vdo+tTdC2r66PU6bS0cBeS0k2wG8p9ugMj7/ujAw+2LwrevR3ggZ57ff9rS5dByQdufDjeJDzHxmXiFr9k1EN1ZLzU93Oof2Rui0v26N1+YiEpBXjyQN/0YwUp9CdAuw6ryES8JSdKfEHNobQaLHbmhocxELyKshGS9eAIpHAFrcDVgZmvNupni0Vppqf9In8qe9EUSa7IKINhfRgLzOp1wvXkbEF4KR6iPNLnDufErCTmbczzF9ee3i5vrOBd+soL0RpPu1pafNRSUgr8NZPh4cGVPr/Bjx0QDNI+AwgA+2BU91HqadIPwS4K0EejTevvv+2nmbdmrNqb0RtPrW1tXmohoQbTi9pK+9EfLKUpuLC0hOdob2RsgJht9oU5uLC0hOdob2RsgJBheQvBql3bcLyNsT1ubijiDaO1tIX3sjCLVpXUabiwuIdUvTTai9EdJ11f1R2lxcQLrvcaIOtDdCoiYyWKTNxQUkg6a/XUvaGyEnGNyb9Lwapd23C4h7k669x3KtX6kXtwI8L+kiCn187Gp/8qdJ6/NYVx5bOI8Ks5PfJYewMyxFc03W6k6xTGh1sbZSL04ABvcjA1aEQTTaxZbVpx6u9xcZ3kTiiQhbwlL0wcT1AFxATGh1sdb47o3Ai2EQHdbFltWnrtQHxgyvHN8cBtGpJo25gJjQ6mJtueGvIMYXjVogPAmiKzn2NteCxvNGYzNaPFIvzd9N8fGE+GIwXWrUJtM3w6HmBSZjVAOyvOl/aDpGgBh/QETHAzje5DzaZCG2axnYSuAnwfTD2MMUeYhqRb2bdLdZtlrYbHudM2k+ApZXg2iNyZrEA7J8vP/3YvJG2rfXBHCkSTO5r2U8QR6+dtCvWqOj5258WXo9lbq/peeYCkKMY5y2dnH0fRNJsYCMrDtn9u652/+ePIyAe/smDgz8CMBozfDV6p2MG677qxlY9k517v9vR4A2hkGz35SNSECWNQaPjuP4HhAWmTYwk+sJ9PVq0LxQao3to3PL86Z6/QUoDU9i+kR1qHm36diOA1JuFAeJuWE6cc/UM/47HIrETjXL4/71RLi6Z/gJLJSY11eHJs9NI9VRQNyNrBMjfzwMopMTVx+gsH0qu2fu9gl3tE5Mc6/n0RlrBpupXsRTB2RlNDBn5zR9B8Bg4lZ7u/DmMIj+VgLBq6e0HM/ox9pJcGprEFCuBtHatHqpAzJc99cycFnaiXtxHAPLpd64u1Pbd95BzLiuNhQZP+DojcqpApLioZXvvJoeqGh/ujX7161+qY+AXzvFvccdxX9j87xCjKXVoei7nW6rVAGpNAa+ASajbyQ7bXSmjCfCNdVSdIPUetqnurum6VZ3NN9HtP2G3Oujz6wuyjwT0zggw03/JG7hcSmDe02nfRSpBdEJ0ut+9ajeRyO9+8JFG4kxmuaj3AN5YR6Q8YEKE1WlDe4lPc+jBWsGm09rrLn9AoZpLsZE7ScRLyBgPkDzATa6zFujNxFNQvvmfNvAeAHAFgIiIG5Wg6mmiP5bRIwDUq77XybgIsNmXgSwqtDH62fKbxQq9dIJzK0LiXCtIQsQ8aXV0uQdpuNcvX0CaQLyPQI+nLhVwpNhKTopcX0OC01/7QfG6nAouiKHS+25lo0DUqn7/wHgqMSkPFoaDjbXJa7PYWF53F9ldiThDWEwuSSHS+25llMEpPhrk/NZRuGImfJbhP3tjmWNwYUxx48k3T3tS+VrQfS+pPWurnsEUgTEZ5N2wyAynsNEPyu1pqdZvcIlK/6k7cN487qN8PaoHZe0WzDb41xAhPxxARECmTEZFxAhQ1xAhEBmTMYFRMgQFxAhkBmTcQERMsQFRAhkxmRcQIQMcQERApkxGRcQIUNcQIRAZkzGBUTIEBcQIZAZk3EBETIkywFpX1hJrb0z45v7Wd62ePbup2uLNu0Vsu6AMi4gQpSzEpDy2MACKtAiEC0GuB+ME4WWmDWZn4Hp34n4oVaMR0xvCJd0MS4gSUm9Q123A+J+MJWRH0x1eyMI7WdxmW5xuWSi+O5ZMd/sfnK7z9L2T26p4H027W1+3rox3BFEKCrdCEg5GlhA03QfgOOEljFTZPYScEUnt/t5HYQLiNCWsB2QykRxEWI2uhGz0FJzI9OV2/7Y3gh5ccMml+Gm/z5u4Rd5YdPNPolxRie3/3FHECH3bAVk1djivucLe74FYKlQ6zNd5pVCAQNpbwPkAiK0PWwFxN282twwqzevtrURzDF0d4QNLu7xB+k9tvb4AxsbIT2G7o20wcU9QKcTfy09QMfGRugEQ7fG2uAy3PCfY8YR3Vpj3uclxIOmN5hz70GEXNcOyHB94DQGbUzVLuM5EP8k1djMDaL2LaeS33bqDf0TcFU1iG4yWZILiAmtA9TqB6S4ksE3G7XbDgZoRTjUvNdoXMaLy43+04npRsNnpLdXdV8YRH9ssjwXEBNaXQxIpe7fCeDixO0KP/ot8bwWCyuNgduMnpVO+EFYik4xadEFxIRWFwNSrvtGt3xl8MpaMPkFoeVlUma4XioyWhOJmyM8F5ai305cv+8JVWZ/2qcSZt1kp1qbS6Xu7mj5VrfbF2oeFLPJ8+j3hkE0y2TXuICY0OriEUQ7gEIYrMtoc3EBEbJU2yhtfSEM1mW0ubiACFmqbZS2vhAG6zLaXFxAhCzVNkpbXwiDdRltLi4gQpZqG6WtL4TBuow2FxcQIUu1jdLWF8JgXUabiwuIkKXaRmnrC2GwLqPNxQVEyFJto7T1hTBYl9Hm4gIiZKm2Udr6Qhisy2hzcQERslTbKG19IQzWZbS5uIAIWaptlLa+EAbrMtpcXECELNU2SltfCIN1GW0uLiBClmobpa0vhMG6jDYXFxAhS7WN0tYXwmBdRpuLC4iQpdpGaesLYbAuo83FBUTIUm2jtPWFMFiX0ebiAiJkqbZR2vpCGKzLaHNxARGyVNsobX0hDNZltLm4gAhZqm2Utr4QBusy2lxcQIQs1TZKW18Ig3UZbS4uIEKWahulrS+EwbqMNhcXECFLtY3S1hfCYF1Gm4sLiJCl2kZp6wthsC6jzcUFRMhSbaO09YUwWJfR5mIekIa/A4yDk5Lg1u75tSWbtiWtz2Pd8mjgmNY0GdwcmraFQXO+yVor9eJWgOclHVPo42NX+5M/TVqfx7ry2MJ5VJi9NXHvhJ1hKZqbuD7VnRUb/n+C8YGkk6S55XxS7azUVer+CIBbk/dDzTBoDiavByr14gTARYMxK8IgGjWoz13pcL2/yPBMbj26JSxFHzRZqPkRpO4/CsDgBsC8IQwml5g0lbfaSt1/AcChSftmxh21oejSpPXtuvK4fzsRLjEY82IYRIcZ1OeutFIfGDO8w/vmMIhONVmoeUDGi/eC+E9MJgHx7QzvrtnsPT0aNJIfEo0msVtcrpcOJy8+Bcw3gXGiyexM+KtaKTI44gDlhr+CGF80mQeEJ0F0Jcfe5lrQeN5obEaLR+ql+bspPp4QX2x0Z/f2epi+GQ41LzBZmnFAhuv+MgZWm0ziat9MoFDAKaZPXV3e9D/UamGzY5meAAHLq0G0xkTBOCCXb/A/7Hn4nskkrvZNBP4rDKLE7+HeOLJS97cAONLxTEcgjnHa2sXR901GGwekLV6pF6cAPt1kIle7jwABa6pBtDwND/cQzzTUXh9j6SGe7emGx4sfZ+J/6qTdnhxLeLkQx/2rh6Z+lGb97jHQaai99sLE9InqUPNuU4VUR5B9IRlYx0TnmE7Yy/XMuKE2FF3TCYPyuH89Ea7uRKPXxhLz+urQ5Llp1p06IMsmiqU45n8DcFCaiXtuDOORWTveOzh67vrdnax9ZN05s/fM3T4BwqJOdHpo7F7PozPWDDYbadacOiCvHkXq/uUM1NJM3GtjPPJ+d01p4mcS617WGDw65vgZCa2ZrkFAuRpEa9Ous6OAtCctN/xribEqbQO9MI6JSrVSM/k3vgmglBvFQWJO9aqYQH5GlDDjutpQ1NHe7Dgg+96P+B9hwoMA3jUjyMotYuIgj/78S4PNn8tJ/r/SpyaKR+yN+R4ARpetaPSSMc1XiLG0OhR9t9O+RALSbqL9RVY8zf/g3rjvs4SA2+b08Ypb/MldnZp0oPEro4E5u6bpVgYu05wnL9rtN+ReH33G9IvY/a1PLCCvT7DvI2CM9Oz3JMT30jSPVpdMbbC5qYbH+hdzH42AyehSCps96s5FG4kxmuaj3AP1JR6Q/wtKvb8IeEUGfAAfAKF94dw8k0vldYF2qk47AN7KQPvasqc85ib6qFktRk90qtzJ+OGmfxKmuRgTta/8XUDAfIDmA2x0mXcnPaiOJewEsA2M9gWiWwiIgLhZDaaaGvOqBUSjWafpCNgm4AJim7ibL1cEXEByZZdr1jYBFxDbxN18uSLgApIru1yztgm4gNgm7ubLFQEXkFzZ5Zq1TcAFxDZxN1+uCLiA5Mou16xtAi4gtom7+XJFwAUkV3a5Zm0TcAGxTdzNlysC/wtcJnBuKa8IdAAAAABJRU5ErkJggg==);
/* background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADEAAAAwCAYAAAC4wJK5AAADsklEQVRoQ+1Y4VnbMBB9lwUKExQmKExQMUHpBCVO/wMTFCYA/jdJmaB0gooJGiaomaDpArl+Z8uOpMi2jGNI+eJfEJ9Penenu6dHeAUPvQIM2ILYlCxuM7GuTKgpHxDjTeGPCY96SGms/xfLhJryHhY4BeEYwF5gwzMQvgG41UOa1wFaAaHGfAHC++wjRooBLttEJSZ6Zo0vMbYAUixwrj/TXZW9A0JN+BrAqWec6oT2fQdqyooYHHLMhIdQ9NSUd8D4DkA53zH+gjCzfsuDaD+EMz2km9B6Logxz0HL2iw/IBzpIenifzVh+Xt1oeUK4ufQz6CasETzg7WRexAubN/yLgO7yMpMquJtac8Y6hFJiXn4rH/VhIORxSqIsJ0bORd4XqbLEmJc6hFd1JWUyZwAXwaMsO8H56mZkGh8qtwA4wEDqKKkzGZ+A9gxZ60RQJn1PCsahHfmN60TOnLjZWdizGcgXHmbu9cJuTVcF77AO2X7ZTzqEYW6UaXXrJMxJAj542VjtTtNWWEBBYJ8ONMjksPe6VFjlnaZR7KirpsWcM4T49ze17PMCeesEXab+n4IkBrzCQhT886pjmcHoRN60prS0sH4+SIgvHoOzpymUpL3Lwoi24DVuv/LTGQgxpyWQ8ubOTFZMIGw2cSNTuhs2axivXSw8+jMrU7opI27lTmzwEebSzURwDkGOO9KAAN93pnmTYCcIATmzLMRQDVhe8oLtxIgNukLYvFaK+BlIZ991qN6JICG1MnQKwidABHyF2Sm5r5xZe4bxS5/6ISEGDqPn4neCKBpkweGB5W3uOy+wNAYICXGjAlic+BtXia9w8dsFH4mll3EtapnpH5oahY0Eb6zCF3TkZD3t8jvE8Ebng+iFwJYSSP8+0IYjtNOQybVBDC3nq+DANaFWkQCcwGSEyrUQmi3sNyC6s90Qod1Pp7EY2Ly38XGzIU/pY/ARajyTHRZeN3felfZ2pLayExknewrH2OQiQry1BLHjQWRAbHnVg3n2mwQ7pSv5FybDUI6F+OXKam5Tmi3scVmXUHEM87ELRG6RAHsTAC7HHqHxkfqTkEF0AhhzrSsUwC7bNoXkz3JM4I7xRJAW73osuPwt456GKDxK0JDHAH06G+lUrguQL7iaAct0KViCaDoqiX3b6lqt4Um+uyxTfYMNRE5Uy5ppbJYOPZB2NpOYdNZAWyLoq19EwFMQyp020X6tt/oORELfgsiNlJ9220z0XeEY/1vMxEbqb7tXkUm/gFlj+ZA0z+8UQAAAABJRU5ErkJggg==); */
background-size: 100% 100%;
}
.summary-but.issummary {
background-image: url(data:image/png;base64,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);
}
.el-table-column1 {
font-size: 12px;
line-height: 20px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.el-table thead {
color: #666 !important;
}
.el-table th>.cell {
padding-left: 3px;
padding-right: 3px;
/* line-height: 20px; */
}
.plTableBox .el-table th>.cell {
padding-left: 3px !important;
padding-right: 3px !important;
/* line-height: 20px; */
}
.el-table .cell,
.el-table--border td:first-child .cell,
.el-table--border th:first-child .cell {
padding-left: 3px;
}
.func-btn-wrap {
display: inline-block;
padding-top: 1px;
overflow: hidden;
vertical-align: top;
}
.func-btn-wrap>div,
.func-btn-wrap>button {
margin-left: 5px;
display: inline;
}
.highlight::after {
position: absolute;
top: -2px;
right: -2px;
content: '';
background: red;
height: 10px;
width: 10px;
border-radius: 5px;
box-shadow: 1px 1px 8px 2px rgb(4, 197, 255);
}
.el-color-picker__panel .el-button--mini {
padding: 0 8px !important;
} }
.w-full {
.table_wrap {
flex: 1;
width: 100%; width: 100%;
padding: 0 10px;
box-sizing: border-box;
position: relative;
overflow-x: hidden;
overflow-y: auto;
}
.narrow_spacing .el-form-item {
margin-bottom: 5px !important;
}
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
background-color: #aad2ff;
}
.account_operation span {
display: inline-block;
text-align: center;
cursor: pointer;
}
.account_operation span:nth-of-type(1) {
width: 16px;
} }
.account_operation span:nth-of-type(2) {} @media screen and (max-width: 1100px) {
.lx-title {
.account_operation span:nth-of-type(3) { font-size: 20px;
width: 16px; }
} .text-sm {
font-size: 12px;
.el-input.is-disabled .el-input__inner { }
cursor: text;
}
.el-table th.gutter {
display: table-cell !important;
}
.el-table colgroup.gutter {
display: table-cell !important;
}
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
.statistical .el-table__footer-wrapper tbody td {
background-color: #ddd;
}
.statistical .el-table__footer-wrapper tbody td .cell {
font-weight: bolder;
font-size: 14px;
}
.el-image-viewer__close .el-icon-circle-close {
color: #efefef;
}
.reject .el-message-box__content {
padding: 5px 15px 0;
}
.reject .el-message-box__input {
padding-top: 0;
}
.reject .el-input--mini .el-input__inner {
height: 34px;
}
.vxe-header--column,
.vxe-body--column {
vertical-align: middle;
}
/* .page_content{
display: flex;
height: 100%;
flex-direction: column;
} */
.el-cascader-panel .el-cascader-menu {
width: 230px;
}
.el-message {
z-index: 7000 !important;
margin-top: 400px !important;
}
.el-select.green .el-input__inner {
color: green;
font-weight: bold;
}
.el-select.red .el-input__inner {
color: red;
font-weight: bold;
}
.status_circle {
width: 10px;
height: 10px;
display: inline-block;
/* background-color: green; */
border-radius: 5px;
margin-right: 5px;
}
.el-cascader-panel .el-cascader-menu__wrap {
height: auto;
max-height: 500px;
}
.account_popper {
box-sizing: border-box;
}
.el-input-number.is-without-controls .el-input__inner {
text-align: left;
padding: 0 8px;
}
.el-dialog__footer .el-button{
width: 100px;
}
.operate-popper{
min-width: 100px;
} }
\ No newline at end of file
src/assets/css/index.css
.container {
max-width: 1280px;
margin: 0 auto;
display: flex;
align-items: center;
}
.link { .link {
color: #2a6ffe; color: #2a6ffe;
text-decoration: none; text-decoration: none;
} }
.link:hover { .link:hover {
color: #2386ee; color: #525558;
} }
.text-center {
text-align: center;
}
\ No newline at end of file
src/components/head.vue
...@@ -59,7 +59,8 @@ export default { ...@@ -59,7 +59,8 @@ export default {
return { return {
navbar: [ navbar: [
{ name: '首页', path: '/home' }, { name: '首页', path: '/home' },
{ name: '核心功能', path: '/function' }, { name: '产品', path: '/product' },
// { name: '核心功能', path: '/function' },
// { name: '价格', path: '/price' }, // { name: '价格', path: '/price' },
{ name: '需求痛点', path: '/demand_pain_point' }, { name: '需求痛点', path: '/demand_pain_point' },
{ name: '一件定制', path: 'https://jomalls.com/custom/' }, { name: '一件定制', path: 'https://jomalls.com/custom/' },
...@@ -113,13 +114,13 @@ export default { ...@@ -113,13 +114,13 @@ export default {
</script> </script>
<style scoped> <style scoped>
.header { /* .header {
position: fixed; position: fixed;
z-index: 999; z-index: 999;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
} } */
.user-name { .user-name {
margin-right: 10px; margin-right: 10px;
...@@ -132,6 +133,13 @@ export default { ...@@ -132,6 +133,13 @@ export default {
.logout { .logout {
margin-right: 30px; margin-right: 30px;
} }
.container {
width: 70rem;
margin: 0 auto;
display: flex;
align-items: center;
}
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.header { .header {
...@@ -142,33 +150,32 @@ export default { ...@@ -142,33 +150,32 @@ export default {
.header.no-shadow { .header.no-shadow {
box-shadow: none !important; box-shadow: none !important;
} }
.logo {
float: left;
margin-top: 10px;
}
.navbar { .navbar {
float: left; flex: 1;
margin-left: 100px; overflow: hidden;
} }
.navbar_item { .navbar_item {
float: left;
position: relative; position: relative;
} }
.navbar_item_wrap {
.navbar_item:hover a { display: flex;
color: #f19240; align-items: center;
justify-content: center;
gap: 50px;
width: 100%;
overflow: hidden;
padding: 0;
} }
.navbar_item + .navbar_item { .navbar_item:hover a {
margin-left: 30px; color: #409EFF;
} }
.navbar_item a { .navbar_item a {
display: block; display: block;
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
text-decoration: none; text-decoration: none;
padding: 0 20px; color: #000;
color: #fff; font-size: 16px;
} }
.right_btn, .right_btn,
.user-info { .user-info {
...@@ -195,12 +202,12 @@ export default { ...@@ -195,12 +202,12 @@ export default {
position: relative; position: relative;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
color: #fff; font-size: 16px;
} }
.reg-btn { .reg-btn {
cursor: pointer; cursor: pointer;
color: #fff; font-size:16px;
} }
.login-btn::after { .login-btn::after {
...@@ -219,7 +226,7 @@ export default { ...@@ -219,7 +226,7 @@ export default {
} }
.active a { .active a {
color: #f19240; color: #409EFF;
font-weight: bold; font-weight: bold;
} }
...@@ -227,7 +234,7 @@ export default { ...@@ -227,7 +234,7 @@ export default {
content: ''; content: '';
width: 20px; width: 20px;
height: 2px; height: 2px;
background-color: #f19240; background-color: #409EFF;
border-radius: 4px; border-radius: 4px;
display: block; display: block;
position: absolute; position: absolute;
......
src/components/product-intro.vue
<template> <template>
<div class="product-intro"> <div class="product-intro">
<div class="function_bg"> <div class="function_bg w-full-70 fade-up-animation">
<h2 <div class="flex justify-center flex-col items-center">
:style="`text-align: center;font-weight:400;letter-spacing:4px; ${ <h3 class="text-textContent lx-title mb-8" style="text-align: center">
$isMobile 核心功能
? 'padding-bottom:30px;font-size:20px' </h3>
: 'padding-bottom: 40px;font-size:28px' <div class="text-sm font-light text-textContent text-center">
}`"> 打通跨境电商业务全流程，闭环管理业务，实现业绩增长
产品优势 </div>
</h2> </div>
<div class="product-pros"> <div class="product-pros">
<div class="product-pros-card"> <div class="product-pros-card">
<div <div
...@@ -34,9 +34,199 @@ ...@@ -34,9 +34,199 @@
</div> </div>
</div> </div>
</div> </div>
<div class="home-module-container">
<div class="home-module">
<div
class="home-module-item flex justify-center"
v-for="(item, index) in moduleItems"
:key="index">
<div class="content flex w-full-70 gap-100 fade-up-animation">
<div class="img">
<img :src="item.img" />
</div>
<div class="module-content">
<div class="title">
<span class="main-title">{{ item.title }}</span>
<span class="sub-title">{{ item.subTitle }}</span>
</div>
<div class="desc">
<div
class="desc-item"
v-for="(t, index) in item.items"
:key="index">
<div class="desc-title">
<span class="desc-main-title">{{ t.title }}</span>
<span class="desc-sub-title">{{ t.subTitle }}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section-reason w-full-70 fade-up-animation">
<div class="section-reason-title">
<div class="flex justify-center flex-col items-center">
<h3 class="text-textContent lx-title mb-8" style="text-align: center">
为什么选择九猫
</h3>
<div class="text-sm font-light text-textContent text-center">
选择九猫即选择了精细化管理的模式，全面赋能实现业务增长
</div>
</div>
</div>
<div class="reason-list flex justify-between">
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<svg
t="1733125042270"
class="icon"
viewBox="0 0 1271 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="6689"
width="80"
height="80">
<path
d="M994.998303 511.840045a359.604613 359.604613 0 0 1-679.099481 164.449956 50.482955 50.482955 0 0 1 52.004359-73.165708 375.648511 375.648511 0 0 0 53.249145 3.734356 369.286276 369.286276 0 0 0 369.424585-369.286276 28.63006 28.63006 0 0 1 44.535648-24.204157A359.604613 359.604613 0 0 1 994.998303 511.840045z"
fill="#E9F1FF"
p-id="6690"></path>
<path
d="M635.39369 188.749131h2.351261a318.111773 318.111773 0 0 1 318.111773 313.82418 25.310632 25.310632 0 0 0 25.310632 24.895704 25.310632 25.310632 0 0 0 25.034014-25.587251A368.1798 368.1798 0 0 0 637.744951 138.404485h-2.62788a25.310632 25.310632 0 0 0 0 50.621265zM355.731948 159.150905a25.172323 25.172323 0 0 0 15.214041-5.11745l10.234901-7.468711a25.310632 25.310632 0 0 0-29.321607-41.49284l-11.479686 8.436877a25.310632 25.310632 0 0 0 15.352351 45.365505z"
fill="#2C5CCB"
p-id="6691"></path>
<path
d="M1103.571234 682.098999l2.904499-1.383095 2.62788-1.244785 1.798023-0.968167 4.010974-1.936332a354.625472 354.625472 0 0 0 92.114105-64.037283 152.831961 152.831961 0 0 0 49.653099-99.721126v-6.638854A149.235914 149.235914 0 0 0 1209.239667 401.192472a345.773667 345.773667 0 0 0-82.98568-59.61138l-1.383095-0.829857c-9.266734-4.979141-18.948397-9.681663-29.044988-13.830947-1.521404-3.872665-3.042808-7.607021-4.702522-11.479686A493.073249 493.073249 0 0 0 424.195134 62.472588a25.310632 25.310632 0 1 0 21.991205 45.642124 442.590293 442.590293 0 0 1 633.457357 398.331264 25.310632 25.310632 0 0 0 25.172323 25.448942 25.448942 25.448942 0 0 0 25.310633-25.310633v-0.829856a489.615512 489.615512 0 0 0-12.862781-112.168978 268.182056 268.182056 0 0 1 55.323787 42.184387 100.689292 100.689292 0 0 1 33.74751 69.154734V517.095805a5.947307 5.947307 0 0 0 0 1.521404c0 0.968166 0 1.936333-0.691547 2.904499a13.830947 13.830947 0 0 1 0 1.936332v1.383095a38.173413 38.173413 0 0 1-1.106476 3.734356 95.571841 95.571841 0 0 1-7.74533 16.735445c-0.691547 1.383095-1.659714 2.766189-2.489571 4.149284a11.479686 11.479686 0 0 1-1.106475 1.659714 24.065847 24.065847 0 0 1-1.521405 2.48957l-2.074642 2.62788a3.457737 3.457737 0 0 1 0 0.968166c-0.968166 1.383095-2.074642 2.62788-3.181117 4.010975a167.631074 167.631074 0 0 1-11.756305 13.830946 245.914232 245.914232 0 0 1-32.779344 27.661894l-6.085616 4.149284h-0.829857l-5.25576 3.319427-1.798023 1.106476-4.840831 3.042808-2.074642 1.244785-5.11745 2.904499-1.798023 1.106476-5.808998 3.181117h-1.244785l-6.915473 3.596046c-10.37321 5.25576-21.299658 10.511519-33.055963 15.62897l-15.49066 6.500545C938.153112 695.100088 791.683387 719.304245 636.223546 719.304245s-302.621113-24.204157-412.30052-68.048258C122.265568 610.869623 64.452211 557.897097 64.452211 505.892738a100.689292 100.689292 0 0 1 33.74751-69.154733 274.95922 274.95922 0 0 1 60.441237-45.088886 497.91408 497.91408 0 0 0-13.830946 114.10531 25.310632 25.310632 0 0 0 25.310632 25.310632 25.172323 25.172323 0 0 0 25.310632-25.172323 440.79227 440.79227 0 0 1 117.839666-299.578305A25.310632 25.310632 0 1 0 276.618933 171.598757a493.349867 493.349867 0 0 0-96.816626 152.140413A385.745102 385.745102 0 0 0 61.962641 401.192472 149.235914 149.235914 0 0 0 13.830947 505.892738c0 69.154733 56.845191 131.670612 160.853909 179.802307a30.013154 30.013154 0 0 0 0.968167 3.319427 492.79663 492.79663 0 0 0 924.460475-1.106476 25.86387 25.86387 0 0 0 1.106475-4.425903h2.351261zM893.202535 878.221822a442.590293 442.590293 0 0 1-652.682373-166.662907c110.647573 37.758484 248.95704 58.366595 395.011837 58.366595 148.406058 0 288.928476-21.299658 400.267597-60.164618a441.483817 441.483817 0 0 1-142.597061 168.46093z"
fill="#2C5CCB"
p-id="6692"></path>
<path
d="M637.744951 1023.585072a506.350957 506.350957 0 0 1-474.263161-328.208365C57.951667 645.44699 0 578.366899 0 505.892738a162.513623 162.513623 0 0 1 52.142669-114.520238 394.735218 394.735218 0 0 1 117.286428-77.86823 502.201673 502.201673 0 0 1 96.816626-151.310557 38.311722 38.311722 0 0 1 27.661894-12.447852 39.00327 39.00327 0 0 1 30.151463 65.696997 427.376252 427.376252 0 0 0-114.10531 290.44988 39.141579 39.141579 0 0 1-39.141579 39.00327 39.141579 39.141579 0 0 1-39.141579-39.141579 515.617692 515.617692 0 0 1 6.638855-85.336941 235.126093 235.126093 0 0 0-30.566393 25.72556 87.688202 87.688202 0 0 0-29.736535 59.74969c0 45.365505 56.015334 94.880294 150.065771 132.500469C336.506932 681.68407 481.040325 705.473298 636.223546 705.473298s299.163376-23.789228 407.18307-67.080091l13.830947-5.808998 2.62788-1.244785c10.788138-4.702522 21.161348-9.543353 30.704701-13.830946l34.162439-19.916564 6.638854-4.425903h0.829857A219.358814 219.358814 0 0 0 1161.79952 567.163832a128.489494 128.489494 0 0 0 10.2349-11.341377l1.106476-1.244785 2.48957-3.181117 3.734356-5.39407 12.586161 5.947307-11.617995-7.468711a31.257939 31.257939 0 0 0 2.212952-3.596046A88.518059 88.518059 0 0 0 1189.461413 525.670992l3.042808-12.586162a32.087796 32.087796 0 0 0 0-4.010974 33.74751 33.74751 0 0 0 0-3.596046 88.24144 88.24144 0 0 0-29.736535-59.74969 232.221594 232.221594 0 0 0-25.725561-22.129515 512.436574 512.436574 0 0 1 6.638854 82.98568 39.141579 39.141579 0 1 1-78.283158 0A428.759347 428.759347 0 0 0 452.133646 120.562564a39.141579 39.141579 0 1 1-34.024128-70.537828 506.627576 506.627576 0 0 1 686.153264 259.33025l2.766189 6.638854c8.298568 3.872665 16.182208 7.88364 23.650919 11.894614l2.351261 1.244786a355.731948 355.731948 0 0 1 86.028488 62.23926 162.513623 162.513623 0 0 1 52.142669 114.520238v7.330402A165.97136 165.97136 0 0 1 1217.123306 622.487618a374.265417 374.265417 0 0 1-95.710151 66.526854l-4.564212 2.351261-2.62788-3.596046v2.074642l1.106476 2.351261-2.351261 1.244785A506.489267 506.489267 0 0 1 637.744951 1023.585072zM295.014092 177.269445a11.894614 11.894614 0 0 0-8.021949 3.734356A477.16766 477.16766 0 0 0 193.633253 328.99493l-2.074642 5.25576-5.11745 2.212951a372.052465 372.052465 0 0 0-114.520238 74.272184A135.819896 135.819896 0 0 0 27.661893 505.892738c0 62.23926 54.217311 121.574021 152.831961 166.939526l6.223926 2.904499 1.521404 6.638854a5.25576 5.25576 0 0 0 0 1.383095 478.827373 478.827373 0 0 0 899.011533-0.968166 10.234901 10.234901 0 0 0 0-1.936333l1.244785-7.192092 20.193182-9.681663a343.699025 343.699025 0 0 0 89.071297-61.547712A139.554252 139.554252 0 0 0 1243.402105 511.840045v-5.808997a136.096515 136.096515 0 0 0-44.259029-95.156914 325.857103 325.857103 0 0 0-78.836396-57.260119l-1.383095-0.829857c-8.851806-4.702522-18.395159-9.405044-27.661893-13.830946l-4.979141-2.351261-2.904499-4.564213-4.564212-11.894614A479.242302 479.242302 0 0 0 430.142441 74.92044a11.479686 11.479686 0 0 0 9.958282 20.74642 456.42124 456.42124 0 0 1 653.37392 410.779116 11.756305 11.756305 0 0 0 11.341376 12.309542 11.617995 11.617995 0 0 0 11.617996-11.479685 482.008491 482.008491 0 0 0-12.447852-110.647574l-7.330402-31.534558 27.661893 16.597136a287.683691 287.683691 0 0 1 58.504905 44.397339 114.520238 114.520238 0 0 1 37.620174 79.113015v4.979141a44.535648 44.535648 0 0 1 0 5.11745V521.936636l-0.829856 3.457737-1.106476 4.149284-1.244785 4.149284a116.73319 116.73319 0 0 1-8.990116 19.778254l-3.042808 4.840831-2.904499 4.425903-2.212951 3.181118-3.596046 4.702521-1.106476 1.383095c-3.734356 4.564212-7.88364 9.128425-12.309543 13.830947a254.2128 254.2128 0 0 1-34.715676 28.768369h-0.829856l-5.532379 3.872665-36.928628 21.576277c-10.788138 5.670688-21.852896 10.788138-33.194272 15.767279l-1.521404 0.691547c-5.11745 2.212951-10.37321 4.425903-15.767279 6.500545-110.647573 44.673958-259.606869 69.154733-417.55628 69.154733s-306.07885-24.480776-417.41797-69.154733C110.647573 620.827905 50.621265 564.674261 50.621265 505.892738a114.243619 114.243619 0 0 1 37.620175-79.113015A291.832975 291.832975 0 0 1 152.140413 379.339576l27.661894-15.905589-7.468712 31.11963a490.445369 490.445369 0 0 0-13.139399 110.647574 11.479686 11.479686 0 0 0 22.959372 0 454.484907 454.484907 0 0 1 121.574021-308.983349 11.617995 11.617995 0 0 0 3.042808-8.298568 11.894614 11.894614 0 0 0-11.479686-11.064757z m816.85571 507.734052h1.244785l-4.010974-5.808997zM637.744951 973.378735a452.271956 452.271956 0 0 1-262.787987-83.677227 456.42124 456.42124 0 0 1-146.884654-172.056977l-14.660803-30.013154 31.534558 10.788139c108.711241 37.205247 247.435636 57.675048 391.277481 57.675047 145.501559 0 286.023977-21.023039 395.565075-59.334761l31.534558-11.064757-13.830946 30.013154A456.42124 456.42124 0 0 1 901.224485 889.424889a451.995337 451.995337 0 0 1-263.479534 83.953846zM268.873603 735.071524a428.759347 428.759347 0 0 0 368.871348 210.645318A424.333444 424.333444 0 0 0 885.180586 866.880446 429.727513 429.727513 0 0 0 1007.446155 733.135192 1311.035434 1311.035434 0 0 1 636.223546 783.756456a1317.674288 1317.674288 0 0 1-367.349943-48.684932z"
fill="#2C5CCB"
p-id="6693"></path>
</svg>
<p class="reason-card-title">全生态产品</p>
<p class="text-textPrimary font-normal mt-10 text-sm font-size-18">
贴合跨境卖家核心使用场景
</p>
<div class="mt-16 flex flex-col items-center">
<p class="text-textPrimary mb-10 font-light font-size-14">
SaaS软件，无需下载即可使用
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
对接支付、物流等系统，全链路闭环管理
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
功能版块全，包含进销存、财务、广告等
</p>
</div>
</div>
<div class="reason-card-type flex flex-col items-center">
<p class="reason-tip">10+</p>
<p class="reason-tip-description">跨境产品模块</p>
</div>
</div>
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<svg
t="1733125115126"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="8655"
width="80"
height="80">
<path
d="M529.18 950.26a32 32 0 0 1-34.36 0l-141-89.75a424.64 424.64 0 0 1-196.68-358.22V185.14a28 28 0 0 1 28-28c1.94 0 196.79-1.17 310.39-83.78a28 28 0 0 1 31.85-0.76c127.1 83.58 309.65 84.54 311.48 84.54a28 28 0 0 1 28 28v317.15a424.64 424.64 0 0 1-196.65 358.22z m-316-738.09v290.12a368.64 368.64 0 0 0 170.71 311L512 894.81l128.15-81.55a368.64 368.64 0 0 0 170.71-311V212.08a834.14 834.14 0 0 1-89.34-10.49c-81.88-14.08-152-38.33-208.85-72.15C460 163.3 391 187.55 307.24 201.61a871.13 871.13 0 0 1-94.1 10.56z"
fill="#1F61C1"
p-id="8656"></path>
<path
d="M508.13 528.47a32 32 0 0 1-45.26 0L377.2 442.8a28 28 0 0 1 0.56-40.15c11.08-10.49 28.66-9.82 39.45 1l68.29 68.25 197.7-197.7a28 28 0 0 1 39.6 39.6z"
fill="#1F61C1"
p-id="8657"></path>
<path
d="M632 662h-36.54a28 28 0 0 1 0-56H632a28 28 0 0 1 0 56zM501 662H392a28 28 0 0 1 0-56h109a28 28 0 0 1 0 56z"
fill="#FFB640"
p-id="8658"></path>
</svg>
<p class="reason-card-title">全方位保障</p>
<p class="text-textPrimary font-normal mt-10 text-sm font-size-18">
深度开发能力与数据安全护航
</p>
<div class="mt-16 flex flex-col items-center">
<p class="text-textPrimary mb-10 font-light font-size-14">
自研亿级任务调度引擎，运行快速
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
定期检测漏洞，签署、严守保密协议
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
亚马逊SPN服务商，国家高新技术企业认定
</p>
</div>
</div>
<div class="reason-card-type flex flex-col items-center">
<p class="reason-tip">0.1s</p>
<p class="reason-tip-description">快速响应</p>
</div>
</div>
<div class="section-reason-item">
<div class="season-top flex flex-col items-center">
<svg
t="1733125190985"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="16052"
width="80"
height="80">
<path
d="M269.9028 631.604487m84.852814-84.852813l229.25816-229.258161q84.852814-84.852814 169.705628 0l94.936156 94.936156q84.852814 84.852814 0 169.705628l-229.258161 229.258161q-84.852814 84.852814-169.705627 0l-94.936156-94.936157q-84.852814-84.852814 0-169.705627Z"
fill="#E9F1FF"
p-id="16053"></path>
<path
d="M511.51 879.59a191.46 191.46 0 0 1-135.79-56.15L134.18 581.9a234.37 234.37 0 0 1 0-331.46l30.58-30.58a234.4 234.4 0 0 1 331.46 0l15.29 15.29 15.29-15.29a234.4 234.4 0 0 1 331.46 0l30.58 30.58a234.4 234.4 0 0 1 0 331.46L647.3 823.44a191.46 191.46 0 0 1-135.79 56.15z m-181-664.3A169.85 169.85 0 0 0 210 265.12l-30.57 30.57c-66.43 66.44-66.43 174.53 0 241L421 778.18c49.92 49.92 131.16 49.93 181.08 0l241.5-241.53c66.43-66.43 66.43-174.52 0-241L813 265.12c-66.44-66.43-174.53-66.43-241 0L470.86 366.31l-0.15 0.15-18.6 18.6a32 32 0 0 1-45.26-45.25l59.4-59.4L451 265.12a169.85 169.85 0 0 0-120.51-49.83z"
fill="#2C5CCB"
p-id="16054"></path>
<path
d="M510.88 643.7a198.31 198.31 0 0 1-141.15-58.46 30 30 0 0 1 42.42-42.43c54.44 54.44 143 54.44 197.45 0a30 30 0 1 1 42.4 42.43 198.33 198.33 0 0 1-141.12 58.46z"
fill="#2C5CCB"
p-id="16055"></path>
</svg>
<p class="reason-card-title">全周期服务</p>
<p class="text-textPrimary font-normal mt-10 text-sm font-size-18">
全程专业服务，满足卖家需求
</p>
<div class="mt-16 flex flex-col items-center">
<p class="text-textPrimary mb-10 font-light font-size-14">
软件顾问、实施、售后全流程服务
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
一体化专业服务，深度赋能客户
</p>
<p class="text-textPrimary mb-10 font-light font-size-14">
为软件使用负责，持续交付新功能
</p>
</div>
</div>
<div class="reason-card-type flex flex-col items-center">
<p class="reason-tip">20+</p>
<p class="reason-tip-description">服务中心</p>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import purchaseImg from '../assets/images/home/01.png'
import financesImg from '../assets/images/home/02.png'
import statementsImg from '../assets/images/home/03.png'
import adImg from '../assets/images/home/04.png'
export default { export default {
name: 'productIntro', name: 'productIntro',
data() { data() {
...@@ -50,11 +240,6 @@ export default { ...@@ -50,11 +240,6 @@ export default {
{ {
text: '自定义“补货规则”，系统结合销售周期、在途和库存数据等指标智能计算', text: '自定义“补货规则”，系统结合销售周期、在途和库存数据等指标智能计算',
}, },
{ text: '自动生成采购需求' },
{ text: '科学规避断货、滞销风险' },
{
text: '释放库存成本，建立良性库存，优化资金流结构，提高资金周转率',
},
], ],
}, },
{ {
...@@ -62,22 +247,17 @@ export default { ...@@ -62,22 +247,17 @@ export default {
title: '订单管理', title: '订单管理',
texts: [ texts: [
{ text: '订单批量审核，异常状态标识归纳，超时自动拆单发货' }, { text: '订单批量审核，异常状态标识归纳，超时自动拆单发货' },
{ ]
text: '支持自定义规则进行物流商自动匹配，智能物流推荐，科学预估包裹运费，提前把控物流成本，降低亏损风险',
},
{ text: '一键获取面单、智能打单发货、回传跟踪号到平台。' },
{ text: '订单管理与包裹管理相结合' },
],
}, },
{ {
icon: 'icon-cangku_cangchuguanli_o', icon: 'icon-cangku_cangchuguanli_o',
title: '仓储管理', title: '仓储管理',
texts: [ texts: [
{ text: '科学的批次生成逻辑及拣货路径。' }, { text: '科学的批次生成逻辑及拣货路径。' },
{ text: '支持扫码枪操作，软硬件协作，提高库内作业水平。' }, // { text: '支持扫码枪操作，软硬件协作，提高库内作业水平。' },
{ // {
text: '本地仓、海外仓、FBA仓数据及时同步，一键配货和扣减库存，扣减逻辑科学合理，杜绝库存不清、超卖等问题。', // text: '本地仓、海外仓、FBA仓数据及时同步，一键配货和扣减库存，扣减逻辑科学合理，杜绝库存不清、超卖等问题。',
}, // },
], ],
}, },
{ {
...@@ -85,7 +265,7 @@ export default { ...@@ -85,7 +265,7 @@ export default {
title: '报表分析', title: '报表分析',
texts: [ texts: [
{ text: '全局数据可视化分析，快速了解核心数据，高效进行决策。' }, { text: '全局数据可视化分析，快速了解核心数据，高效进行决策。' },
{ text: '多维数据报表，随时了解财务、经营状况，支撑业务决策。' }, // { text: '多维数据报表，随时了解财务、经营状况，支撑业务决策。' },
], ],
}, },
{ {
...@@ -95,13 +275,13 @@ export default { ...@@ -95,13 +275,13 @@ export default {
{ {
text: '与供应商、仓库高效协同，生产数据灵活追踪，一键生成交货单。', text: '与供应商、仓库高效协同，生产数据灵活追踪，一键生成交货单。',
}, },
{ // {
text: '生产周期较长的大订单可拆解，支持按批次交货，以应对企业紧急采购需求。', // text: '生产周期较长的大订单可拆解，支持按批次交货，以应对企业紧急采购需求。',
}, // },
{ // {
text: '自定义内向交货数量，企业和供应商可根据产品近期销售走向和实际产能灵活增减区间。', // text: '自定义内向交货数量，企业和供应商可根据产品近期销售走向和实际产能灵活增减区间。',
}, // },
{ text: '多供应商集中管理，建立多维度的绩效考评机制。' }, // { text: '多供应商集中管理，建立多维度的绩效考评机制。' },
], ],
}, },
{ {
...@@ -111,11 +291,11 @@ export default { ...@@ -111,11 +291,11 @@ export default {
{ {
text: '数据模型完整，采用SPU+SKU的管理模式，可从SPU维度查看产品、供应商、采购URL及所有SKU信息，增减SKU方便灵活，规格型号统一管理。', text: '数据模型完整，采用SPU+SKU的管理模式，可从SPU维度查看产品、供应商、采购URL及所有SKU信息，增减SKU方便灵活，规格型号统一管理。',
}, },
{ text: '对接刊登系统，实现整套资料一键免费刊登多独立站平台。' }, // { text: '对接刊登系统，实现整套资料一键免费刊登多独立站平台。' },
{ // {
text: '可以对重点产品添加Tag，便于快速筛选，优先进行销售数据分析。', // text: '可以对重点产品添加Tag，便于快速筛选，优先进行销售数据分析。',
}, // },
{ text: '定制设计器在线创作，POD产品一键合成，实现高效出品。' }, // { text: '定制设计器在线创作，POD产品一键合成，实现高效出品。' },
], ],
}, },
{ {
...@@ -125,12 +305,12 @@ export default { ...@@ -125,12 +305,12 @@ export default {
{ {
text: '现金流向和流量的预估功能和预算实时查询，使财务人员提前做好防备措施，掌控资金安全，提高资金利用效率。', text: '现金流向和流量的预估功能和预算实时查询，使财务人员提前做好防备措施，掌控资金安全，提高资金利用效率。',
}, },
{ // {
text: '可将由生产活动、销售活动、采购活动输入的信息自动计入财务模块生成总账、会计报表。', // text: '可将由生产活动、销售活动、采购活动输入的信息自动计入财务模块生成总账、会计报表。',
}, // },
{ // {
text: '根据企业需求，自定义营运分析指标公式，方便快捷核算每个阶段经营成果。', // text: '根据企业需求，自定义营运分析指标公式，方便快捷核算每个阶段经营成果。',
}, // },
], ],
}, },
{ {
...@@ -140,10 +320,10 @@ export default { ...@@ -140,10 +320,10 @@ export default {
{ {
text: '多平台、多店铺统一管理。', text: '多平台、多店铺统一管理。',
}, },
{ // {
text: '支持多店铺之间导入商品。', // text: '支持多店铺之间导入商品。',
}, // },
{ text: '支持商品一键发布下架'}, // { text: '支持商品一键发布下架' },
], ],
}, },
{ {
...@@ -151,18 +331,127 @@ export default { ...@@ -151,18 +331,127 @@ export default {
title: '物流管理', title: '物流管理',
texts: [ texts: [
{ text: '自定义申报报关信息，按需快速申报，避免高昂关税。' }, { text: '自定义申报报关信息，按需快速申报，避免高昂关税。' },
{ text: '物流轨迹状态实时跟踪，实现包裹一站式查询与异常提醒。' }, // { text: '物流轨迹状态实时跟踪，实现包裹一站式查询与异常提醒。' },
{ text: '统计发货、自动计算运费，方便运费核算。' }, // { text: '统计发货、自动计算运费，方便运费核算。' },
],
},
],
moduleItems: [
{
img: purchaseImg,
title: '进销存一体管理',
subTitle:
'打通采购、发货、物流等环节，1688一键下单，智能提供补货建议',
items: [
{
title: '采购业务场景全覆盖',
subTitle: '支持1688下单/委外加工/退换货等采购方式，可多维度管理',
},
{
title: '智能补货建议',
subTitle:
'自动追踪全球销量与库存情况，区分物流渠道运输时效和费用提供补货方案',
},
{
title: '物流全链条追踪管理',
subTitle: '全链条跟踪物流轨迹，对比物流价格，优化物流成本',
},
{
title: '一站式管库存',
subTitle:
'集成海外仓与物流商，统一管理本地仓/海外仓/FBA仓库存和在途库存',
},
],
},
{
img: financesImg,
title: '财务精准管理',
subTitle:
'每日实时利润统计，订单级回款跟踪，自动提现，业财一体化管理',
items: [
{
title: '实时看利润',
subTitle: '精准核算利润，实时整合提供利润报表，反哺销售决策调整',
},
{
title: '成本严控制',
subTitle: '业务成本一目了然，隐形费用自动识别，精准统计所有成本',
},
{
title: '资金流追踪',
subTitle: '全链条跟踪物流轨迹，对比物流价格，优化物流成本',
},
],
},
{
img: statementsImg,
title: '多维度数据报表',
subTitle:
'自动形成利润报表、采购报表、库存报表、业绩报表等，数据可视化',
items: [
{
title: '利润报表',
subTitle:
'实时整合平台数据，精准核算利润，每日出具利润报表，支撑财务核算所需',
},
{
title: '产品表现报表',
subTitle:
'整合Listing所有运营数据，支持同比、环比分析，快速识别爆款产品',
},
{
title: 'BI自定义数据分析',
subTitle:
'自定义经营数据驾驶舱，实时监测业务数据，可联动分析，了解业务实况',
},
],
},
{
img: adImg,
title: '全流程广告管理',
subTitle:
'投放前挖掘优质词，投中使用自动规则提效，投后溯源、对比分析广告转化率',
items: [
{
title: '投放前：挖优质词定策略',
subTitle:
'自动分析广告历史表现、行业大盘表现、挖优质词，规划广告投放结构，助力卖家抢量',
},
{
title: '投放中：自动规则提效',
subTitle:
'跨广告类型管理，分时策略、自动规则、关键词抢位等工具高效投放，实时数据优化调整',
},
{
title: '投放后：精准透视分析',
subTitle:
'全局分析广告效果，对比、细分、溯源、透视广告表现，分析词根，挖掘优质投放策略',
},
], ],
}, },
], ],
} }
}, },
methods: { mounted() {
freeTrial() { const observer = new IntersectionObserver((entries) => {
window.open('https://demo.jomalls.com') console.log(entries)
}, entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-up-visible')
} else {
entry.target.classList.remove('fade-up-visible')
}
})
})
this.$el.querySelectorAll('.fade-up-animation').forEach((item) => {
observer.observe(item)
})
this._animationObserver = observer
},
beforeDestroy() {
this._animationObserver.disconnect()
}, },
methods: {},
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
...@@ -170,7 +459,6 @@ export default { ...@@ -170,7 +459,6 @@ export default {
padding: 100px 0; padding: 100px 0;
} }
.function_bg { .function_bg {
width: 60vw;
margin: 0 auto; margin: 0 auto;
} }
...@@ -180,9 +468,9 @@ export default { ...@@ -180,9 +468,9 @@ export default {
} }
.product-pros-card { .product-pros-card {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr); gap: 20px;
gap: 10px; margin-top: 80px;
} }
.card-item { .card-item {
...@@ -223,6 +511,151 @@ export default { ...@@ -223,6 +511,151 @@ export default {
.card-text:not(:last-child) { .card-text:not(:last-child) {
margin-bottom: 6px; margin-bottom: 6px;
} }
.home-module-container {
margin-top: 100px;
}
.home-module-item {
padding: 150px 0;
margin: 0 auto;
.img {
flex: 1;
img {
width: 100%;
height: 100%;
}
}
.module-content {
flex: 1;
letter-spacing: 2px;
}
}
.home-module-item:nth-child(even) .content {
flex-direction: row-reverse;
}
.home-module-item:nth-child(odd) {
background-color: #f8f9ff;
}
.home-module-item:not(:last-child) {
margin-bottom: 18px;
}
.module-content {
.title {
display: flex;
flex-direction: column;
margin-bottom: 36px;
.main-title {
font-size: 36px;
margin-bottom: 10px;
}
.sub-title {
font-size: 16px;
color: #000;
}
}
.desc {
padding-left: 24px;
.desc-item {
position: relative;
&::before {
background-color: #2554fe;
border-radius: 50%;
position: absolute;
left: -23px;
top: 10px;
content: '';
width: 6px;
height: 6px;
box-shadow: 0 0 0 5px rgba(37, 84, 254, 0.1);
}
&:not(:last-child) {
margin-bottom: 18px;
}
.desc-title {
display: flex;
flex-direction: column;
gap: 8px;
.desc-main-title {
color: #000;
font-size: 20px;
}
.desc-sub-title {
font-size: 16px;
color: #606266;
}
}
}
}
}
.product-intro::v-deep {
.fade-up-animation {
transition: all 0.3s ease;
opacity: 0.2;
transform: translateY(100px);
}
.fade-up-visible {
opacity: 1;
transform: translateY(0);
}
}
.section-reason {
margin: 0 auto;
}
.section-reason-item {
background-color: rgba(255, 255, 255, 1);
border-radius: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-shadow: 0 0 16px 0 rgba(180, 189, 221, 1),
0 6px 14px 0 hsla(0, 0%, 100%, 0.3), 0 16px 20px 0 rgba(180, 189, 221, 0.25);
transition: all 0.4s ease-in-out;
.reason-card-type {
overflow: hidden;
padding-top: 20px;
padding-bottom: 30px;
--tw-text-opacity: 1;
color: rgba(255, 255, 255, 1);
width: 100%;
border-radius: 0 0 16px 16px;
background-image: url(../assets/images/home/05.png);
background-size: 100% 100%;
background-repeat: no-repeat;
.reason-tip {
font-family: Helvetica Neue;
font-size: 32px;
letter-spacing: 2px;
font-weight: 500;
line-height: 40px;
}
}
}
.section-reason-item:hover {
transform: translateY(-8px);
box-shadow: 10px 10px 38px 0 hsla(0, 0%, 100%, 0.3),
0 0 14px 0 rgba(202, 210, 238, 0.2),
28px 36px 50px 0 rgba(180, 189, 221, 0.46);
}
.season-top {
padding: 24px 40px 36px;
}
.reason-card-title {
font-weight: 500;
font-size: 30px;
margin-top: 16px;
--tw-text-opacity: 1;
color: rgba(26, 32, 53, 1);
}
.text-textPrimary {
color: rgba(58, 64, 87, 1);
}
.reason-list {
margin-top: 80px;
}
@media screen and (max-width: 1100px) { @media screen and (max-width: 1100px) {
.function_bg { .function_bg {
...@@ -265,5 +698,22 @@ export default { ...@@ -265,5 +698,22 @@ export default {
.card-item-name { .card-item-name {
font-size: 16px; font-size: 16px;
} }
.product-pros-card {
margin-top: 40px;
}
.home-module-container[data-v-3ba2a52e] {
margin-top: 20px;
}
.home-module-item {
padding: 10px 0;
.content {
width: 90vw;
display: block;
}
.img {
width: 100%;
}
}
} }
</style> </style>
src/main.js
...@@ -21,11 +21,12 @@ import './styles/index.scss' ...@@ -21,11 +21,12 @@ import './styles/index.scss'
const isMobile = () => window.innerWidth <= 1100 const isMobile = () => window.innerWidth <= 1100
Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile()) Vue.util.defineReactive(Vue.prototype, '$isMobile', isMobile())
document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
Vue.prototype.$isMobile = isMobile() Vue.prototype.$isMobile = isMobile()
document.querySelector('html').style.fontSize = window.innerWidth / 100 + 'px'
}) })
new Vue({ new Vue({
store, store,
router, router,
......
src/views/home.vue
<template> <template>
<div class="home-page"> <div class="jomalls-home-page">
<Head :shadow="headerShadow" /> <Head :shadow="headerShadow" />
<main class="home-main"> <main class="home-main">
...@@ -46,27 +46,46 @@ export default { ...@@ -46,27 +46,46 @@ export default {
} }
</script> </script>
<style scoped> <style scoped>
.home-page { .jomalls-home-page {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
overflow: hidden auto; overflow: hidden;
display: flex;
flex-direction: column;
} }
.home-page::-webkit-scrollbar { .home-main::-webkit-scrollbar {
width: 0; width: 6px;
} }
.home-page .header { .home-main::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(162, 161, 161, 0.2);
}
.home-main::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 0;
background: rgba(0, 0, 0, 0.1);
}
.jomalls-home-page .header {
transition: all 0.3s; transition: all 0.3s;
border: 1px solid #eee;
background: #fff;
} }
.home-page.scrolling .header { .jomalls-home-page.scrolling .header {
box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%); /* box-shadow: 0 2px 10px 0 rgb(0 39 98 / 66%);
background-color: rgba(27, 28, 29, 0.9); background-color: rgba(27, 28, 29, 0.9);
backdrop-filter: blur(10px); backdrop-filter: blur(10px); */
} }
.home-main { .home-main {
/* padding-top: 60px; */ /* padding-top: 60px; */
flex: 1;
overflow-y: auto;
/* background-color: #f5f5f5; */
} }
</style> </style>
src/views/homePage/index.vue
<template> <template>
<div class="home-page"> <div class="home-page">
<div class="banner-images"> <div class="banner-images">
<el-carousel <!-- 轮播图先注释 -->
<!-- <el-carousel
class="banner-images-inner" class="banner-images-inner"
:interval="5000" :interval="5000"
arrow="always" arrow="always"
...@@ -12,39 +13,72 @@ ...@@ -12,39 +13,72 @@
:src="item.image" :src="item.image"
style="width: 100vw; height: 100%; object-fit: cover" /> style="width: 100vw; height: 100%; object-fit: cover" />
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel> -->
<div class="banner-container">
<div class="left-content">
<h3 class="left-content-title">在以亚马逊为主的跨境电商ERP中</h3>
<h2 class="left-content-title-high-light">九猫ERP市占率第一</h2>
<p class="left-content-description">
<span class="high-light">60万+</span>
<span>跨境卖家的一致选择，支持</span>
<span class="high-light">20+</span>
<span>主流跨境平台，助力卖家全球出海</span>
</p>
</div>
<div class="right-content">
<video
width="100%"
class="video"
src="../../assets/video/home-video.mp4"
autoplay
loop
muted></video>
</div>
</div>
</div> </div>
<product-intro /> <product-intro />
<div class="docking-platform"> <div class="docking-platform flex justify-center">
<h2 <div>
:style="`text-align: center; padding: 20px; font-size: ${ <div class="flex justify-center flex-col items-center">
$isMobile ? '18px' : '24px' <h3 class="text-textContent lx-title mb-8" style="text-align: center">
}`"> 对接平台
对接平台 </h3>
</h2> <div class="text-sm font-light text-textContent text-center">
<div class="platforms"> 国家权威机构及亚马逊多重实力认证
<div class="platform-item"><img src="../../assets/logo1.jpg" /></div> </div>
<div class="platform-item"><img src="../../assets/logo2.jpg" /></div> </div>
<div class="platform-item"><img src="../../assets/logo3.jpg" /></div> <div class="platforms mt-30">
<div class="platform-item"><img src="../../assets/logo4.jpg" /></div> <div class="platform-item"><img src="../../assets/logo1.jpg" /></div>
<div class="platform-item"> <div class="platform-item"><img src="../../assets/logo2.jpg" /></div>
<a href="https://hubs.ly/Q02Y1gQR0" target="_blank"> <div class="platform-item"><img src="../../assets/logo3.jpg" /></div>
<img src="../../assets/logo19.png" /> <div class="platform-item"><img src="../../assets/logo4.jpg" /></div>
</a> <div class="platform-item">
<a href="https://hubs.ly/Q02Y1gQR0" target="_blank">
<img src="../../assets/logo19.png" />
</a>
</div>
<div class="platform-item"><img src="../../assets/logo6.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo7.png" /></div>
<div class="platform-item"><img src="../../assets/logo8.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo9.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo10.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo11.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo12.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo13.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo14.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo15.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo16.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo17.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo18.jpg" /></div>
</div> </div>
<div class="platform-item"><img src="../../assets/logo6.jpg" /></div> </div>
<div class="platform-item"><img src="../../assets/logo7.png" /></div> </div>
<div class="platform-item"><img src="../../assets/logo8.jpg" /></div> <div class="footer-bg">
<div class="platform-item"><img src="../../assets/logo9.jpg" /></div> <div class="footer-banner">
<div class="platform-item"><img src="../../assets/logo10.jpg" /></div> <p class="footer-title">人效全面提升、业绩翻倍增长，从此刻开始！</p>
<div class="platform-item"><img src="../../assets/logo11.jpg" /></div> <p class="footer-description">
<div class="platform-item"><img src="../../assets/logo12.jpg" /></div> 九猫ERP将帮助您提升每一个人员效率，快速实现业务增长
<div class="platform-item"><img src="../../assets/logo13.jpg" /></div> </p>
<div class="platform-item"><img src="../../assets/logo14.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo15.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo16.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo17.jpg" /></div>
<div class="platform-item"><img src="../../assets/logo18.jpg" /></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -76,25 +110,64 @@ export default { ...@@ -76,25 +110,64 @@ export default {
</script> </script>
<style scoped> <style scoped>
.banner-images { .banner-images {
font-size: 48px; /* font-size: 48px; */
width: 100%; width: 70vw;
display: flex; margin: 0 auto;
height: 30vw;
padding-top: 40px;
/* display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9); background: linear-gradient(to bottom, #0089ff 0%, #0089ff 20%, #e8eef9); */
} }
.banner-images-inner { /* .banner-images-inner {
width: 100%; width: 100%;
} */
.banner-container {
display: flex;
align-items: center;
height: 100%;
}
.left-content {
width: 30%;
display: flex;
flex-direction: column;
gap: 20px;
}
.right-content {
width: 70%;
height: 100%;
border-radius: 20px;
.video {
width: 100%;
height: 100%;
object-fit: fill;
}
}
.left-content-title {
font-size: 24px;
}
.left-content-title-high-light {
font-size: 40px;
color: #2253fd;
}
.left-content-description {
font-size: 18px;
color: #777;
}
.high-light {
color: #2253fd;
font-weight: bold;
} }
.docking-platform { .docking-platform {
background: url(../../assets/footer.jpg) center / cover no-repeat; background: #ebf1fc;
padding: 0 100px 70px; padding: 100px 0;
} }
.docking-platform h2 { .docking-platform h2 {
color: #fff; color: #000;
font-weight: 500;
} }
.platforms { .platforms {
...@@ -102,7 +175,37 @@ export default { ...@@ -102,7 +175,37 @@ export default {
gap: 10px; gap: 10px;
grid-template-columns: repeat(9, 1fr); grid-template-columns: repeat(9, 1fr);
} }
.footer-bg {
background: linear-gradient(180deg, #2554fe, #3572ff);
}
.footer-banner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 15px;
background-image: url(../../assets/images/home/06.png);
background-position-y: bottom;
background-repeat: no-repeat;
background-size: 100% 90px;
.footer-title {
font-weight: 500;
font-size: 36px;
margin-bottom: 20px;
max-width: 70vw;
text-align: center;
color: rgba(255, 255, 255, 1);
letter-spacing: 2px;
}
.footer-description {
font-weight: 300;
font-size: 18px;
margin-top: 8px;
margin-bottom: 40px;
color: rgba(255, 255, 255, 1);
}
}
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
.platforms { .platforms {
grid-template-columns: repeat(6, 1fr); grid-template-columns: repeat(6, 1fr);
......
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