Skip to content

S
shop-new
提交 a7b424df authored 作者: huaxinzhu's avatar huaxinzhu
浏览文件
操作

云仓新首页

上级 dd8fc977
隐藏空白字符变更
内嵌 并排
正在显示 包含 461 行增加 和 123 行删除
src/assets/image/website/clothes.png 0 → 100644
浏览文件 @ a7b424df
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/electrical.png 0 → 100644
浏览文件 @ a7b424df
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/food.png 0 → 100644
浏览文件 @ a7b424df
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/maternal.png 0 → 100644
浏览文件 @ a7b424df
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step1.png 0 → 100644
浏览文件 @ a7b424df
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step2.png 0 → 100644
浏览文件 @ a7b424df
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step3.png 0 → 100644
浏览文件 @ a7b424df
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step4.png 0 → 100644
浏览文件 @ a7b424df
This image diff could not be displayed because it is too large. You can view the blob instead.
src/views/entry/newyuncang.vue
浏览文件 @ a7b424df
......@@ -15,25 +15,25 @@
</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 class="banner">
<!-- <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">
<section style="margin-bottom: 100px;">
<div class="advantage" :class="{ 'mgB100': isAdHover }">
<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">
<dl class="dl-con" :class="{ 'noDlCon': indexAddom === 1 }">
<dt></dt>
<dd>技术优势</dd>
</dl>
<div class="pre-advantage-details">
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 1 }">
<p class="ad-details-title">
技术优势
</p >
......@@ -47,7 +47,7 @@
<dt></dt>
<dd>成本优势</dd>
</dl>
<div class="pre-advantage-details">
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 2 }">
<p class="ad-details-title">
成本优势
</p >
......@@ -57,11 +57,11 @@
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(3)" @mouseleave="adLeave(3)" :class="{ 'noBorder': indexAddom === 3 }">
<dl style="text-align: center" class="dl-con">
<dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 3 }">
<dt></dt>
<dd>响应式</dd>
</dl>
<div class="pre-advantage-details">
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 3 }">
<p class="ad-details-title">
响应式
</p >
......@@ -78,11 +78,11 @@
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(4)" @mouseleave="adLeave(4)" :class="{ 'noBorder': indexAddom === 4 }">
<dl style="text-align: center" class="dl-con">
<dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 4 }">
<dt></dt>
<dd>解决方案</dd>
</dl>
<div class="pre-advantage-details">
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 4 }">
<p class="ad-details-title">
解决方案
</p >
......@@ -95,46 +95,130 @@
</div>
</section>
<!-- 入驻流程 -->
<section style="padding-bottom: 90px;background-color: #f9faff;">
<p class="process-title">入驻流程和材料</p>
<div class="process-con">
<div class="process-steps">
<div class="pro-step">
<dl>
<dt class="step-one"></dt>
<dd>第一步：注册账号</dd>
</dl>
<span>无需等待</span>
<p>进入云仓官网，注册账号</p>
<p>注册完成后，填写相关信息</p>
</div>
<div class="pro-step">
<dl>
<dt class="step-two"></dt>
<dd>第二步：填写信息</dd>
</dl>
<span>约20分钟</span>
<p>确认在线协议填写公司主体信息</p>
<p>填写店铺信息提交相关资质</p>
</div>
<div class="pro-step">
<dl>
<dt class="step-three"></dt>
<dd>第三步：等待审核</dd>
</dl>
<span>约1-3个工作日</span>
<p>云仓工作人员会在1-3个工作日内</p>
<p>反馈审核结果，商家可通过登录查询审核进度</p>
</div>
<div class="pro-step">
<dl>
<dt class="step-four"></dt>
<dd>第四步：发布商品</dd>
</dl>
<span>无需等待</span>
<p>审核通过，商家登录后台</p>
<p>商家发布商品并上架</p>
</div>
</div>
<div class="process-mater">
<div class="pro-ma">
<p class="set-in-ma">入驻必备材料</p>
<div class="optional">
<ul>
<li>营业执照电子版</li>
<li>法人证件电子版</li>
</ul>
</div>
</div>
<div class="pro-ma">
<p class="set-in-ma">入驻选填材料</p>
<div class="optional">
<ul >
<li>品牌LOGO</li>
<li>其它行业资质</li>
</ul>
<ul>
<li>品牌授权（代理品需提供）</li>
<li>店铺LOGO</li>
</ul>
</div>
<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>-->
</div>
</div>
</div>
</section>
<!-- 入驻品牌 -->
<section class="brand">
<p class="brands-title">这些品牌都已入驻</p>
<p class="brands-tip">我们已与各行业领域的优秀品牌达成合作</p>
<div>
<p class="brand-type">
<span class="clothes" @click="brandTypeChange(0)">服饰</span>
<span class="electrical" @click="brandTypeChange(1)">电器</span>
<span class="food" @click="brandTypeChange(2)">食品</span>
<span class="maternal" @click="brandTypeChange(3)">母婴</span>
</p>
<div class="brand-carousel">
<el-carousel ref="cardShow" :autoplay="false" arrow="never" indicator-position="none" type="card" class="card-show" height="400px" style="margin: 20px auto;">
<el-carousel-item name="1" class="pre-el-carousel-item">
<img src="../../assets/image/website/服饰.png" alt="">
</el-carousel-item>
<el-carousel-item name="2" class="pre-el-carousel-item">
<img src="../../assets/image/website/电器.png" alt="">
</el-carousel-item>
<el-carousel-item name="3" class="pre-el-carousel-item">
<img src="../../assets/image/website/食品.png" alt="">
</el-carousel-item>
<el-carousel-item name="4" class="pre-el-carousel-item">
<img src="../../assets/image/website/母婴.png" alt="">
</el-carousel-item>
</el-carousel>
</div>
</div>
</section>
<!-- 底部 -->
<footer>
<div class="contact">
<p>如果你想要更多的<span>了解</span>，请联系我们</p>
<p>4000-188-199</p>
</div>
<div class="about-con">
<div class="about-list">
<ul>
<li>企业简介</li>
<li>发展历程</li>
<li>荣誉资质</li>
<li>团队介绍</li>
<li>新闻动态</li>
</ul>
<p class="about-gs">
Copyright © 2015 - 2019 北京胜天半子科技有限公司 All Rights Reserved.  京ICP备19033223号-1   京ICP备19033223号-1
</p>
</div>
<div class="about-us">
<p class="us-title">联系我们</p>
<p>联系电话：4000-188-199</p>
<p>公司地址:北京市丰台区诺德中心一期四号楼21层</p>
</div>
</div>
</footer>
</div>
</template>
......@@ -147,18 +231,16 @@
isScroll: false,
isAdHover: false,
isHasBorder: false,
indexAddom: false,
ycList: [
{ name: '首页',id:0 },
{ name: '开发平台',id:1 },
{ name: '关于我们',id:2 },
{ name: '开放平台',id:1 },
{ name: '云仓',id:2 },
{ name: '关于我们',id:3 },
],
hh: [
"服饰11",
"电器22",
"食品33",
"母婴44",
],
a: 0
clothesBrandImgs: [
// {url}
]
}
},
mounted() {
......@@ -173,10 +255,11 @@
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.isScroll = scrollTop > 100 ? true : false;
},
// fuck(index) {
// this.$refs.cardShow.setActiveItem(index);
// }
//
// 品牌类型切换
brandTypeChange(index) {
this.$refs.cardShow.setActiveItem(index);
},
adHover(index) {
this.isAdHover = true;
this.indexAddom = index;
......@@ -202,6 +285,7 @@
.yc-content {
width: 100%;
height: 100%;
min-width: 960px;
}
/* 公用 */
......@@ -212,7 +296,6 @@
top: 0;
left: 0;
z-index: 999;
//overflow :hidden;
}
.head-scroll {
......@@ -235,10 +318,17 @@
flex-direction : row;
justify-content : start;
align-items: center;
}
.nav {
}
.register-login-btn {
}
.nav > li{
padding: 10px 25px;
cursor: pointer;
font-size: 18px;
}
.register-btn,.login-btn {
......@@ -257,7 +347,17 @@
}
/* banner图 */
.banner {
width: 100%;
height: 562px;
position : relative;
background : url("../../assets/image/website/banner.png") no-repeat center center;
background-size: cover;
}
.advantage {
margin-bottom: 0;
transition : all 0.5s;
}
.advantage-title,.process-title,.brands-title {
......@@ -265,7 +365,7 @@
font-size: 38px;
font-weight: 400;
color: #333333;
padding: 80px 0;
padding: 90px 0;
}
.advantage-con {
......@@ -276,7 +376,7 @@
justify-content : center;
align-items : center;
position: relative;
transition: 0.2s;
transition: 0.5s;
}
.pre-advantage {
width: 268px;
......@@ -285,19 +385,17 @@
margin-right: 40px;
position: relative;
background: #FFFFFF;
z-index: 59;
z-index: 29;
border-radius: 2px;
}
.dl-con {
width: 100%;
height: 100%;
text-align : center;
background: #FFFFFF;
z-index: 69; /* 这个值要保证和 当前容器dom 一致 */
z-index: 29; /* 这个值要保证和 当前容器dom 一致 */
border: none;
overflow : hidden;
//opacity : 1;
//-webkit-backface-visibility: hidden;
//-webkit-transform-style: preserve-3d;
}
.dl-con > dt{
......@@ -317,9 +415,9 @@
width: 270px;
height: 420px;
position: absolute;
top: 0;
top: -110px;
left: -1px;
z-index: 19;
z-index: 199;
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;
......@@ -349,9 +447,7 @@
/* hover 时候的效果 class */
.mgT20 {
-webkit-transform: translateY(45px);
transform: translateY(45px);
transition: 0.3s;
margin-top: 80px;
}
.noBorder {
......@@ -359,71 +455,313 @@
}
.noDlCon {
animation:disappear 0.2s ease;
-webkit-animation:disappear 0.2s ease;
-webkit-transform: scale(0, 0);
transform: scale(0, 0);
}
@keyframes disappear{
from {
opacity : 1
}
to {
opacity : 0
}
.up-ad-details {
display: block;
}
@-webkit-keyframes disappear {
from {
opacity : 1
}
to {
opacity : 0
}
.mgB100 {
margin-bottom: 200px;
}
//.pre-advantage:hover > .dl-con {
// -webkit-transform: scale(0, 0);
// transform: scale(0, 0);
//}
/* 入驻流程 */
.process-steps,.process-mater {
display: flex;
flex-direction : row;
justify-content : center;
align-items : center;
}
//.pre-advantage:hover .advantage-con {
// animation:mymove 5s infinite;
// -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
//}
//
.pro-step {
width: 275px;
height: 315px;
background: #fff;
margin-right: 35px;
//border: 1px solid #e9e9e9;
//border-radius: 6px;
}
.pro-ma{
width: 585px;
height: 190px;
background : #fff;
margin-right: 35px;
margin-top: 35px;
background : #fff url("../../assets/image/website/mate-bg.png") no-repeat 100%;
}
.step-one,.step-two,.step-three,.step-four {
width: 58px;
height: 58px;
text-align: center;
margin: 30px auto;
}
.step-one {
background : url("../../assets/image/website/step1.png") no-repeat center center;
}
.step-two {
background : url("../../assets/image/website/step2.png") no-repeat center center;
}
.step-three {
background : url("../../assets/image/website/step3.png") no-repeat center center;
}
.step-four {
background : url("../../assets/image/website/step4.png") no-repeat center center;
}
.pro-step > dl > dd {
height: 20px;
font-size: 20px;
font-weight: 400;
margin: 0 auto;
text-align: center;
}
.pro-step > span {
display: block;
width: 100px;
height: 25px;
font-size: 14px;
color: #666;
background: #F0F0F5;
border-radius: 13px;
line-height : 25px;
margin: 18px auto;
text-align : center;
}
.pro-step > p {
font-size: 14px;
font-weight: 400;
color: #666666;
line-height : 28px;
text-align : center;
padding: 0 20px;
}
.set-in-ma {
height: 20px;
font-size: 20px;
font-weight: 400;
color: #000000;
line-height: 20px;
text-indent: 30px;
background : url("../../assets/image/website/setIn1.png") no-repeat 0 center;
margin: 35px 0 15px 72px;
}
.optional{
display : flex;
justify-content : start;
flex-direction : row;
}
.optional > ul:nth-child(1){
margin: 0 50px 0 72px;
}
.optional > ul > li {
margin: 15px 0;
text-indent: 20px;
background : url("../../assets/image/website/arrow.png") no-repeat 0 center;
}
.pro-step:hover,.pro-ma:hover {
//box-shadow: 0 2px 12px 0 #ccc;
}
/* 入驻品牌 */
.brand {
padding: 0 0 90px;
background: linear-gradient(0deg, #DEE8F9 46%, #FEFEFF 100%);
}
.brands-title {
text-align: center;
font-size: 38px;
font-weight: 400;
color: #333333;
padding: 90px 0 0;
}
.brands-tip {
text-align: center;
font-size: 24px;
font-weight: 400;
color: #333333;
opacity: 0.82;
padding : 30px 0;
}
.brand-type {
display: flex;
flex-direction : row;
justify-content : space-around;
align-items : center;
width: 40%;
margin: 80px auto 10px;
}
.clothes, .electrical, .food, .maternal {
height: 30px;
line-height : 30px;
cursor: pointer;
font-size: 20px;
font-weight: 400;
color: #000;
text-indent: 40px;
/*
color: #1966FF;*/
}
.clothes {
background : url("../../assets/image/website/clothes.png") no-repeat 0 center;
}
.electrical {
background : url("../../assets/image/website/electrical.png") no-repeat 0 center;
}
.food {
background : url("../../assets/image/website/food.png") no-repeat 0 center;
}
.maternal {
background : url("../../assets/image/website/maternal.png") no-repeat 0 center;
}
.clothes:hover, .electrical:hover, .food:hover, .maternal:hover {
color: #1966FF;
}
.brand-carousel {
width:70%;
display : flex;
justify-content : center;
flex-direction : row;
margin: 0 auto;
}
/* 隐藏淡化效果 */
.card-show {
width: 100%;
}
/deep/ .el-carousel__container {
padding: 20px;
}
/deep/.pre-el-carousel-item > img {
object-fit:cover;
width:100%;
height: 100%;
//border: 1px solid #ccc;
}
/deep/.is-active {
border: 1px solid #e9e9e9;
background : #fff;
overflow : hidden;
//box-shadow : 4px 4px 4px 4px #99a9bf;
}
//.el-carousel__item:nth-child(2n) {
// background-color: #99a9bf;
//}
//
//.el-carousel__item:nth-child(2n+1) {
// background-color: #d3dce6;
// //background-color: #99a9bf;
// //box-shadow : 4px 4px 4px 4px #99a9bf;
//}
//
.el-carousel__item:nth-child(2n+1) {
}
/* footer 联系我们 */
.contact {
height: 243px;
background : url("../../assets/image/website/footer-bg.png") no-repeat center 0;
background-size: 100% 100%;
display: flex;
flex-direction : column;
justify-content : center;
align-items : center;
}
.contact > p {
letter-spacing: 2px;
text-align : center;
font-size: 26px;
font-weight: 400;
color: #FFFFFF;
line-height : 46px;
}
.contact > p > span {
color: #1966FF;
}
.about-con {
height: 200px;
color: #fff;
background: #242A37;
display: flex;
flex-direction : row;
justify-content : center;
align-items : center;
font-size: 14px;
}
.about-list,.about-us {
//margin: 52px;
}
.about-list {
height: 110px;
display: flex;
flex-direction : column;
justify-content : center;
align-items : center;
border-right: 1px solid #959BA8;
padding-right: 80px;
}
.about-list > ul {
height: 66px;
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
display: flex;
flex-direction : row;
justify-content : space-around;
}
//.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;
// }
.about-list > ul > li {
height: 30px;
padding: 0 40px;
line-height : 30px;
border-right: 1px solid #959BA8;
cursor: pointer;
}
.about-list > ul > li:last-child {
border : none;
}
.about-gs {
font-size: 14px;
font-weight: 400;
color: #959BA8;
}
.about-us {
margin-left: 80px;
}
.about-us > p {
letter-spacing: 1px;
font-weight: 400;
color: #959BA8;
line-height: 26px;
}
.about-us .us-title {
font-size: 18px;
font-weight: 400;
color: #FFFFFF;
line-height: 40px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论