提交 dd8fc977 authored 作者: huaxinzhu's avatar huaxinzhu

云仓官网-部分;其他bug修复

上级 6fb7e418
<template>
<div class="yc-content" ref="searchBar">
<!-- 头部 -->
<header :class="{ 'head-scroll': isScroll }">
<div class="header-con">
<ul class="nav">
<li>
<img style="width:114px;height:35px;" src="../../../public/images/logo_white_sm.png" alt="">
</li>
<li v-for="(item,index) in ycList" :key="item.id">{{ item.name}}</li>
</ul>
<div class="register-login-btn">
<div class="register-btn">注 册</div>
<div class="login-btn">登 录</div>
</div>
</div>
</header>
<section class="banner" style="position: relative;">
<el-carousel height="561px" :autoplay="false" arrow="never">
<el-carousel-item v-for="item in 4" :key="item">
<img style="width:100%;" src="../../assets/image/website/banner.png" alt="">
</el-carousel-item>
</el-carousel>
</section>
<!-- 主体 -->
<section>
<div class="advantage">
<p class="advantage-title">核心优势</p>
<div class="advantage-con" :class="{ 'mgT20' : isAdHover }">
<div class="pre-advantage" @mouseover="adHover(1)" @mouseleave="adLeave(1)" :class="{ 'noBorder': indexAddom === 1 }">
<dl class="dl-con">
<dt></dt>
<dd>技术优势</dd>
</dl>
<div class="pre-advantage-details">
<p class="ad-details-title">
技术优势
</p >
<p class="ad-details">
数字化、智能化云仓系统支持商品一键导入,快速编辑上架;订单批量发货、流程简洁,实时同步物流状态; 结算流水实时同步,资金链及时回笼
</p>
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(2)" @mouseleave="adLeave(2)" :class="{ 'noBorder': indexAddom === 2 }">
<dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 2 }">
<dt></dt>
<dd>成本优势</dd>
</dl>
<div class="pre-advantage-details">
<p class="ad-details-title">
成本优势
</p >
<p class="ad-details">
云仓支持线上快速提交资料,入驻、审核简便;对接数万B端商家,流量大、出单快;接口一键导入批量发货,节省人力物力成本;多维度分析,助力数字营销和运营营销和运营
</p>
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(3)" @mouseleave="adLeave(3)" :class="{ 'noBorder': indexAddom === 3 }">
<dl style="text-align: center" class="dl-con">
<dt></dt>
<dd>响应式</dd>
</dl>
<div class="pre-advantage-details">
<p class="ad-details-title">
响应式
</p >
<p class="ad-details">
一键导入商品<br/>
一键轻松上架<br/>
一键自动结算<br/>
一键批量发货<br/>
一键对接商家<br/>
一键库存同步<br/>
一键售后响应<br/>
一键财务管理
</p>
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(4)" @mouseleave="adLeave(4)" :class="{ 'noBorder': indexAddom === 4 }">
<dl style="text-align: center" class="dl-con">
<dt></dt>
<dd>解决方案</dd>
</dl>
<div class="pre-advantage-details">
<p class="ad-details-title">
解决方案
</p >
<p class="ad-details">
商品对接供应链B端数万商家,多条渠道同时出单;对多网店的商品和订单等日常事务同时管理,提高整体效率;供应商的KPI考核,把控采购风险,提高采购效益
</p>
</div>
</div>
</div>
</div>
</section>
<section style="height: 2000px;"></section>
<!-- <section class="main" style="height: 1000px;">-->
<!-- <div>-->
<!-- <p class="process-title">入驻流程和材料</p>-->
<!-- <div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div>-->
<!-- <p class="brands-title">这些品牌都已入驻</p>-->
<!-- <p class="brands-tip">我们已与各行业领域的优秀品牌达成合作</p>-->
<!-- <div style="width: 100%;margin: 20px auto;" class="fuck">-->
<!-- <p class="flex-h" style="width: 40%;margin: 0 auto;">-->
<!-- <span @click="fuck(0)">服饰</span>-->
<!-- <span @click="fuck(1)">电器</span>-->
<!-- <span @click="fuck(2)">食品</span>-->
<!-- <span @click="fuck(3)">母婴</span>-->
<!-- </p>-->
<!-- <el-carousel ref="cardShow" :autoplay="false" arrow="never" type="card" height="400px" style="width:70%;margin: 0 auto;">-->
<!-- <el-carousel-item v-for="item in 4" name="index" :key="item">-->
<!-- <h3 class="medium">{{ item }}</h3>-->
<!-- </el-carousel-item>-->
<!-- </el-carousel>-->
<!--&lt;!&ndash; <div style="position: relative;width: 600px;margin: 0 auto;" >&ndash;&gt;-->
<!--&lt;!&ndash; <div style="position: absolute;top: 0;width: 600px;z-index: 9;height:400px;background: #baf;"></div>&ndash;&gt;-->
<!--&lt;!&ndash; <div style="position: absolute;top: 50px;left: 150px;z-index: 2;width: 600px;height:300px;background: #ccc;"></div>&ndash;&gt;-->
<!--&lt;!&ndash; <div style="position: absolute;top: 50px;right: 150px;width: 600px;z-index: 2;height:300px;background: #bfa;"></div>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash; <div style="position: absolute;top: 50px;width: 600px;z-index: 2;height:300px;background: #000;"></div>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- 底部 -->
<footer>
</footer>
</div>
</template>
<script>
export default {
name: "newyuncang",
data() {
return {
isScroll: false,
isAdHover: false,
isHasBorder: false,
ycList: [
{ name: '首页',id:0 },
{ name: '开发平台',id:1 },
{ name: '关于我们',id:2 },
],
hh: [
"服饰11",
"电器22",
"食品33",
"母婴44",
],
a: 0
}
},
mounted() {
window.addEventListener('scroll',this.handleScroll,true);
},
destroyed() {
window.removeEventListener('scroll',this.handleScroll);
},
methods: {
handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.isScroll = scrollTop > 100 ? true : false;
},
// fuck(index) {
// this.$refs.cardShow.setActiveItem(index);
// }
//
adHover(index) {
this.isAdHover = true;
this.indexAddom = index;
},
adLeave(index) {
this.isAdHover = false;
this.indexAddom = -1;
}
} // methods end
}
</script>
<style lang="scss" type="text/stylus" scoped>
header,section,footer,ul,li,p,dl,dt,dd {
margin: 0;
padding: 0;
}
ul,li {
list-style: none;
}
.yc-content {
width: 100%;
height: 100%;
}
/* 公用 */
/* header */
header {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
//overflow :hidden;
}
.head-scroll {
background-color : #070D41;
}
.header-con {
width: 80%;
margin: 0 auto;
height: 100px;
color: #fff;
display: flex;
flex-direction : row;
justify-content : space-between;
align-items : center;
}
.nav,.register-login-btn {
display: flex;
flex-direction : row;
justify-content : start;
align-items: center;
}
.nav > li{
padding: 10px 25px;
cursor: pointer;
}
.register-btn,.login-btn {
padding: 5px 20px;
border-radius: 4px;
cursor: pointer;
}
.register-btn {
border: 1px solid #fff;
}
.login-btn {
border: 1px solid #1D8EFE;
background: #1D8EFE;
margin-left: 20px;
}
/* banner图 */
.banner {
position : relative;
}
.advantage-title,.process-title,.brands-title {
text-align: center;
font-size: 38px;
font-weight: 400;
color: #333333;
padding: 80px 0;
}
.advantage-con {
width: 80%;
margin: 0 auto;
display: flex;
flex-direction : row;
justify-content : center;
align-items : center;
position: relative;
transition: 0.2s;
}
.pre-advantage {
width: 268px;
height: 190px;
border: 1px solid #DCDCDC;
margin-right: 40px;
position: relative;
background: #FFFFFF;
z-index: 59;
}
.dl-con {
width: 100%;
height: 100%;
text-align : center;
background: #FFFFFF;
z-index: 69; /* 这个值要保证和 当前容器dom 一致 */
border: none;
overflow : hidden;
//opacity : 1;
//-webkit-backface-visibility: hidden;
//-webkit-transform-style: preserve-3d;
}
.dl-con > dt{
width: 85px;
height: 88px;
margin: 25px auto;
background : url("../../assets/image/website/ad1.png") no-repeat center center;
}
.dl-con > dd {
font-size: 18px;
color: #232323;
margin: 0 auto;
}
.pre-advantage-details {
width: 270px;
height: 420px;
position: absolute;
top: 0;
left: -1px;
z-index: 19;
background :#fff url("../../assets/image/website/adfooter.png") no-repeat bottom center;
box-shadow: 0 6px 18px 1px rgba(57, 124, 255, 0.26);
overflow : hidden;
display: none;
}
.ad-details-title {
width: 100%;
height: 76px;
line-height : 76px;
text-align : center;
color: #fff;
font-weight: 400;
font-size: 20px;
background: linear-gradient(118deg, #0157FF 0%, #538DFF 100%);
overflow :hidden;
}
.ad-details {
padding: 30px;
color: #333333;
font-size: 16px;
font-weight: 400;
line-height: 28px;
text-align : center;
}
/* hover 时候的效果 class */
.mgT20 {
-webkit-transform: translateY(45px);
transform: translateY(45px);
transition: 0.3s;
}
.noBorder {
border: 0;
}
.noDlCon {
animation:disappear 0.2s ease;
-webkit-animation:disappear 0.2s ease;
}
@keyframes disappear{
from {
opacity : 1
}
to {
opacity : 0
}
}
@-webkit-keyframes disappear {
from {
opacity : 1
}
to {
opacity : 0
}
}
//.pre-advantage:hover > .dl-con {
// -webkit-transform: scale(0, 0);
// transform: scale(0, 0);
//}
//.pre-advantage:hover .advantage-con {
// animation:mymove 5s infinite;
// -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
//}
//
/* 隐藏淡化效果 */
//.el-carousel__item:nth-child(2n) {
// background-color: #99a9bf;
//}
//
//.el-carousel__item:nth-child(2n+1) {
// background-color: #d3dce6;
//}
//
//.brands-tip {
// text-align: center;
// font-size: 24px;
// font-weight: 400;
// color: #333333;
// opacity: 0.82;
//}
//
// /**/
// .flex-h {
// display: flex;
// flex-direction : row;
// justify-content : space-around;
// align-items: center;
// }
</style>
...@@ -316,7 +316,11 @@ ...@@ -316,7 +316,11 @@
this.bank = false; this.bank = false;
this.zfb = false; this.zfb = false;
this.getList(); this.getList();
}else {
this.message({type:'error',message: response.message});
} }
this.loading = true;
}); });
} }
......
...@@ -114,19 +114,18 @@ export default { ...@@ -114,19 +114,18 @@ export default {
watch:{ watch:{
'parameterdata': function(val) { 'parameterdata': function(val) {
this.orgGoodsPam = val; this.orgGoodsPam = val;
this.preTableTitle = []; //this.preTableTitle = [];
// this.orgGoodsPam.pamDataList.forEach((item)=> {
this.orgGoodsPam.pamDataList.forEach((item)=> { // let preTitle = '';
let preTitle = ''; // if (!Array.isArray(item)) {
if (!Array.isArray(item)) { // preTitle = this.orgGoodsPam.pamNameList[0].specName + ':' + item;
preTitle = this.orgGoodsPam.pamNameList[0].specName + ':' + item; // }else {
}else { // item.forEach((itemI,indexI)=> {
item.forEach((itemI,indexI)=> { // preTitle += (this.orgGoodsPam.pamNameList[indexI].specName + " " + itemI) + " ";
preTitle += (this.orgGoodsPam.pamNameList[indexI].specName + " " + itemI) + " "; // });
}); // }
} // this.preTableTitle.push(preTitle);
this.preTableTitle.push(preTitle); // });
});
}, },
}, },
......
...@@ -365,7 +365,7 @@ ...@@ -365,7 +365,7 @@
flex-direction: row; flex-direction: row;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
font-size: 18px; font-size: 16px;
color: #333; color: #333;
font-weight: 400; font-weight: 400;
height: 24px; height: 24px;
...@@ -432,7 +432,7 @@ ...@@ -432,7 +432,7 @@
border-bottom:1px solid #eee; border-bottom:1px solid #eee;
} }
.floor-nav .nav-list .nav-list-item { .floor-nav .nav-list .nav-list-item {
font-size: 18px; font-size: 16px;
font-weight: 400; font-weight: 400;
color: #333333; color: #333333;
padding: 0 25px 15px; padding: 0 25px 15px;
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论