Skip to content

梁建民 / h5

Go to a project
Commit adab98d2 by 梁建民
Options

js

parent cef99ec5
Expand all
Inline Side-by-side
Showing with 123 additions and 22 deletions
src/assets/css/supplier/index.min.css
......@@ -28,11 +28,22 @@
.supplier .content .wrap { padding: 0 0.267rem; border-bottom: 0.267rem solid #f6f6f6; background: #fff; }
.supplier .content .wrap .tit { display: flex; align-items: center; padding: 0.373rem 0 0.667rem 0; }
.supplier .content .wrap .tit b { width: 5px; height: 20px; background-color: #1080d0; }
.supplier .content .wrap .tit span { margin-left: 0.28rem; font-size: 13px; color: #000000; font-weight: bold; }
.supplier .content .wrap .tit span { margin-left: 0.28rem; font-size: 18px; color: #000000; font-weight: bold; }
.supplier .content .wrap.wrap-1 { padding-bottom: 0.5rem; }
.supplier .content .wrap.wrap-1 .supplier-slide { padding-bottom: 0.5rem; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box { width: 50%; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box img { width: 100%; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box { width: 50%; text-align: center; padding-top: 7px; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box .t1 { font-size: 14px; color: #333333; text-align: center; margin-bottom: 8px; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box .t2 { padding-left: 0.187rem; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box .t2 p { font-size: 12px; color: #666666; line-height: 15px; white-space: nowrap; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box .t2 p span { width: 95%; white-space: normal; text-align: left; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box .iconfont { font-size: 40px; color: #666666; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box.slide-box-1 { height: 180px; background: url("../../images/supplier/1.png") no-repeat center; background-size: contain; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box.slide-box-2 { height: 180px; background: url("../../images/supplier/2.png") no-repeat center; background-size: contain; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box.slide-box-3 { height: 180px; background: url("../../images/supplier/3.png") no-repeat center; background-size: contain; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box.slide-box-4 { height: 180px; background: url("../../images/supplier/4.png") no-repeat center; background-size: contain; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box.slide-box-5 { height: 180px; background: url("../../images/supplier/5.png") no-repeat center; background-size: contain; }
.supplier .content .wrap.wrap-1 .supplier-slide .slide-box.slide-box-6 { height: 180px; background: url("../../images/supplier/6.png") no-repeat center; background-size: contain; }
.supplier .content .wrap.wrap-1 .supplier-slide .van-swipe__indicators { bottom: 2px !important; }
.supplier .content .wrap.wrap-1 .supplier-slide .van-swipe__indicator { width: 8px !important; height: 8px !important; background-color: #cccccc !important; }
.supplier .content .wrap.wrap-1 .supplier-slide .van-swipe__indicator--active { background-color: #1080d0 !important; }
.supplier .content .wrap.wrap-2 { padding-bottom: 0.667rem; }
......
src/assets/css/supplier/index.scss
......@@ -60,7 +60,7 @@
z-index: 9;
&.f-orange {
color: #ffa200 !important;
span{
span {
color: #ffa200 !important;
}
}
......@@ -114,14 +114,14 @@
}
}
}
.btn-wrap{
.btn-wrap {
position: relative;
.error{
.error {
position: absolute;
left: 0;
top: -25px;
font-size: 12px;
color: #ffa200!important;
color: #ffa200 !important;
}
.submit {
height: 40px;
......@@ -155,7 +155,7 @@
}
span {
margin-left: 0.28rem;
font-size: 13px;
font-size: 18px;
color: #000000;
font-weight: bold;
}
......@@ -166,9 +166,65 @@
padding-bottom: 0.5rem;
.slide-box {
width: 50%;
img {
width: 100%;
text-align: center;
padding-top: 7px;
.t1 {
font-size: 14px;
color: #333333;
text-align: center;
margin-bottom: 8px;
}
.t2 {
padding-left: 0.187rem;
p {
font-size: 12px;
color: #666666;
line-height: 15px;
white-space: nowrap;
span {
width: 95%;
white-space: normal;
text-align: left;
}
}
}
.iconfont {
font-size: 40px;
color: #666666;
}
&.slide-box-1 {
height: 180px;
background: url("../../images/supplier/1.png") no-repeat center;
background-size: contain;
}
&.slide-box-2 {
height: 180px;
background: url("../../images/supplier/2.png") no-repeat center;
background-size: contain;
}
&.slide-box-3 {
height: 180px;
background: url("../../images/supplier/3.png") no-repeat center;
background-size: contain;
}
&.slide-box-4 {
height: 180px;
background: url("../../images/supplier/4.png") no-repeat center;
background-size: contain;
}
&.slide-box-5 {
height: 180px;
background: url("../../images/supplier/5.png") no-repeat center;
background-size: contain;
}
&.slide-box-6 {
height: 180px;
background: url("../../images/supplier/6.png") no-repeat center;
background-size: contain;
}
}
.van-swipe__indicators{
bottom: 2px !important;
}
.van-swipe__indicator {
width: 8px !important;
......
src/assets/images/supplier/1.png
src/assets/images/supplier/1.png

18.4 KB | W: | H:

src/assets/images/supplier/1.png

2.67 KB | W: | H:

src/assets/images/supplier/1.png
src/assets/images/supplier/1.png
src/assets/images/supplier/1.png
src/assets/images/supplier/1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/supplier/2.png
src/assets/images/supplier/2.png

17 KB | W: | H:

src/assets/images/supplier/2.png

3.09 KB | W: | H:

src/assets/images/supplier/2.png
src/assets/images/supplier/2.png
src/assets/images/supplier/2.png
src/assets/images/supplier/2.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/supplier/3.png
src/assets/images/supplier/3.png

30.5 KB | W: | H:

src/assets/images/supplier/3.png

3.24 KB | W: | H:

src/assets/images/supplier/3.png
src/assets/images/supplier/3.png
src/assets/images/supplier/3.png
src/assets/images/supplier/3.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/supplier/4.png
src/assets/images/supplier/4.png

24 KB | W: | H:

src/assets/images/supplier/4.png

2.9 KB | W: | H:

src/assets/images/supplier/4.png
src/assets/images/supplier/4.png
src/assets/images/supplier/4.png
src/assets/images/supplier/4.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/supplier/5.png
src/assets/images/supplier/5.png

25.7 KB | W: | H:

src/assets/images/supplier/5.png

3.18 KB | W: | H:

src/assets/images/supplier/5.png
src/assets/images/supplier/5.png
src/assets/images/supplier/5.png
src/assets/images/supplier/5.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/supplier/6.png
src/assets/images/supplier/6.png

25.3 KB | W: | H:

src/assets/images/supplier/6.png

3.27 KB | W: | H:

src/assets/images/supplier/6.png
src/assets/images/supplier/6.png
src/assets/images/supplier/6.png
src/assets/images/supplier/6.png
  • 2-up
  • Swipe
  • Onion skin
src/views/supplier/Index.vue
......@@ -52,27 +52,61 @@
</p>
<van-swipe :autoplay="3000000" indicator-color="#ffffff" class="supplier-slide">
<van-swipe-item>
<div class="lineBlock slide-box">
<img src="../../assets/images/supplier/1.png">
<div class="lineBlock slide-box slide-box-1 boxsiz">
<i class="iconfont icon-kehuqunti-"></i>
<p class="t1">庞大精准的客户群体</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">13万+精准用户，每月2000+新用户注入</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">上千个元器件采购活跃社群</span></p>
</div>
</div>
<div class="lineBlock slide-box slide-box-2 boxsiz">
<i class="iconfont icon-cangchuwuliufuwu-"></i>
<p class="t1">免费仓储物流服务</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">恒温恒湿，10000+平米超大仓库现货存放</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">自营商品3小时内发货</span></p>
</div>
<div class="lineBlock slide-box">
<img src="../../assets/images/supplier/2.png">
</div>
</van-swipe-item>
<van-swipe-item>
<div class="lineBlock slide-box">
<img src="../../assets/images/supplier/3.png">
<div class="lineBlock slide-box slide-box-3 boxsiz">
<i class="iconfont icon-dashuju-"></i>
<p class="t1">大数据分析及营销服务</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">海量物料及价格分析，快速响应采购市场变化</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">订单数据及用户画像分析，精准营销参考</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">超千家知名品牌深度合作，源头了解市场动向</span></p>
</div>
</div>
<div class="lineBlock slide-box slide-box-4 boxsiz">
<i class="iconfont icon-shangcheng-"></i>
<p class="t1">多终端在线商城</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">PC电脑端，满足工作时间采购需求</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">H5端/小程序，8小时之外随时查看</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">微信公众号，热门资讯推送提升用户粘性</span></p>
</div>
<div class="lineBlock slide-box">
<img src="../../assets/images/supplier/4.png">
</div>
</van-swipe-item>
<van-swipe-item>
<div class="lineBlock slide-box">
<img src="../../assets/images/supplier/5.png">
<div class="lineBlock slide-box slide-box-5 boxsiz">
<i class="iconfont icon-yunwei-"></i>
<p class="t1">专业运营推广团队</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">SEM高付费投放，成交率超过50%</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">多家专业展会合作方，高曝光高知名度</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">高频度营销活动，持续拉动销量上涨</span></p>
</div>
</div>
<div class="lineBlock slide-box slide-box-6 boxsiz">
<i class="iconfont icon-kehuqunti-"></i>
<p class="t1">一对一专属客服跟进成单</p>
<div class="t2">
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">从询价到成单，每位客户均有专属客服跟进</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">CRM系统管理，提升客服跟进效率</span></p>
<p><em class="lineBlock va-t">•</em><span class="lineBlock va-t">工作日内响应时间不超过半小时</span></p>
</div>
<div class="lineBlock slide-box">
<img src="../../assets/images/supplier/6.png">
</div>
</van-swipe-item>
</van-swipe>
......
view/3.js
This diff could not be displayed because it is too large.
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 sign in to comment