Skip to content

O
offical_web
Commit 67090795 by qinjianhui
Options

feat: 官网

parent b615a25d
Showing with 202 additions and 11 deletions
src/views/aboutus/aboutPage.vue
......@@ -8,8 +8,28 @@
</div>
<div class="text">
<h2>辅助跨境电商企业成为变革</h2>
<hr/>
<ul>
<li>
<i class="i1"></i>
<span>与时俱进</span>
</li>
<li>
<i class="i2"></i>
<span>客户至上</span>
</li>
<li>
<i class="i3"></i>
<span>人尽奇才</span>
</li>
<li>
<i class="i4"></i>
<span>互利共赢</span>
</li>
</ul>
</div>
</div>
<div class="content-body"></div>
</div>
</template>
<script>
......@@ -41,4 +61,61 @@ export default {
.image {
height: 26vw;
}
.content-body {
height: calc(100vh - 26vw - 60px);
}
.text hr {
border: none;
width: 30%;
height: 2px;
margin: 20px auto;
background: url(../../assets/images/banner-line.png) no-repeat;
background-size: 100% 100%;
}
.text ul {
display: flex;
align-items: center;
justify-content: center;
}
.text ul li:not(:last-child) {
margin-right: 40px;
}
.text li i {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
vertical-align: top;
}
.text li span {
display: inline-block;
line-height: 24px;
vertical-align: top;
color: #fff;
}
.text li .i1 {
background: url(../../assets/images/banner-icon-01.png);
background-size: 100% 100%;
}
.text li .i2 {
background: url(../../assets/images/banner-icon-02.png);
background-size: 100% 100%;
}
.text li .i3 {
background: url(../../assets/images/banner-icon-03.png);
background-size: 100% 100%;
}
.text li .i4 {
background: url(../../assets/images/banner-icon-04.png);
background-size: 100% 100%;
}
</style>
src/views/demand/demandPage.vue
......@@ -13,6 +13,7 @@
</p>
</div>
</div>
<div class="content-body"></div>
</div>
</template>
<script>
......@@ -44,4 +45,8 @@ export default {
.image {
height: 33.33vw;
}
.content-body {
height: calc(100vh - 33.333vw - 60px);
}
</style>
\ No newline at end of file
src/views/function/functionPage.vue
<template>
<div class="function-page">
<div ref="headerBanner" class="header-banner">
<div class="image">
<!-- <div class="image">
<img
src="../../assets/images/function/function.png"
style="width: 100%; height: 100%; object-fit: cover" />
</div> -->
<div class="image">
<img
src="../../assets/images/banner-solution.jpg"
style="width: 100%; height: 100%; object-fit: cover" />
</div>
<div class="text">
<h2>核心功能</h2>
<p>
九猫拥有完整的实施和售后体系，秉承“服务为本，客户至上”的理念竭诚为您服务
</p>
</div>
<div class="feature-list" ref="feature">
<div
......@@ -22,7 +33,7 @@
<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">缺货统计</h3>
<h3 style="text-align: center; font-size: 32px; font-weight: 100;">缺货统计</h3>
<h4 style="text-align: center">
打通供应链全流程，派单统计产品缺货数量
</h4>
......@@ -79,7 +90,7 @@
<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">仓库预警</h3>
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">仓库预警</h3>
<h4 style="text-align: center">
各仓库库存状况一目了然，解决库存难管理问题
</h4>
......@@ -136,7 +147,7 @@
<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">采购管理</h3>
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">采购管理</h3>
<h4 style="text-align: center">
运营、采购、仓库等部门高效协同，实时跟踪采购需求
</h4>
......@@ -191,7 +202,7 @@
<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">生产管理</h3>
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">生产管理</h3>
<h4 style="text-align: center">
采购与供应商同页面操作，实时沟通，有效缩短收货周期
</h4>
......@@ -259,7 +270,7 @@
<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">收获管理</h3>
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">收获管理</h3>
<h4 style="text-align: center">
采购生产同路径入库，收货信息化管理
</h4>
......@@ -310,7 +321,7 @@
<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">自发货</h3>
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">自发货</h3>
<h4 style="text-align: center">
采购与供应商同页面操作，实时沟通，有效缩短收货周期
</h4>
......@@ -378,7 +389,7 @@
<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">物流管理</h3>
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">物流管理</h3>
<h4 style="text-align: center">
智能推荐优势物流商，物流轨迹实时查询
</h4>
......@@ -446,7 +457,7 @@
<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">FBA发货</h3>
<h3 style="text-align: center; font-size: 32px;font-weight: 100;">FBA发货</h3>
<h4 style="text-align: center">
一表连通装箱、发货、物流，操作流程方便快捷
</h4>
......@@ -551,6 +562,23 @@ export default {
.header-banner {
position: relative;
}
.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;
}
......
src/views/homePage/index.vue
......@@ -3,7 +3,7 @@
<div class="banner-images">
<el-carousel
class="banner-images-inner"
:interval="4000000"
:interval="5000"
height="33.333vw">
<el-carousel-item v-for="(item, index) in bannerImages" :key="index">
<img class="images" :src="item.image" style="width: 100vw" />
......
src/views/price/pricePage.vue
......@@ -8,8 +8,29 @@
</div>
<div class="text">
<h2>专业化的服务团队，让您物超所值</h2>
<hr />
<ul>
<li>
<i class="i1"></i>
<span>与时俱进</span>
</li>
<li>
<i class="i2"></i>
<span>客户至上</span>
</li>
<li>
<i class="i3"></i>
<span>人尽奇才</span>
</li>
<li>
<i class="i4"></i>
<span>互利共赢</span>
</li>
</ul>
</div>
</div>
<div class="content-body">
</div>
</div>
</template>
<script>
......@@ -33,12 +54,71 @@ export default {
}
.text h2 {
font-size: 48px;
font-size: 36px;
text-align: center;
color: #fff;
font-weight: bold;
user-select: none;
}
.image {
height: 26vw;
}
.text hr {
border: none;
width: 30%;
height: 2px;
margin: 20px auto;
background: url(../../assets/images/banner-line.png) no-repeat;
background-size: 100% 100%;
}
.text ul {
display: flex;
align-items: center;
justify-content: center;
}
.text ul li:not(:last-child) {
margin-right: 40px;
}
.text li i {
display: inline-block;
width: 24px;
height: 24px;
margin-right: 10px;
vertical-align: top;
}
.text li span {
display: inline-block;
line-height: 24px;
vertical-align: top;
color: #fff;
}
.text li .i1 {
background: url(../../assets/images/banner-icon-01.png);
background-size: 100% 100%;
}
.text li .i2 {
background: url(../../assets/images/banner-icon-02.png);
background-size: 100% 100%;
}
.text li .i3 {
background: url(../../assets/images/banner-icon-03.png);
background-size: 100% 100%;
}
.text li .i4 {
background: url(../../assets/images/banner-icon-04.png);
background-size: 100% 100%;
}
.content-body {
height: calc(100vh - 26vw - 60px);
}
</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