Skip to content

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

云仓官网优化

上级 a7b424df
隐藏空白字符变更
内嵌 并排
正在显示 包含 98 行增加 和 54 行删除
src/assets/image/website/setIn1.png
查看替换文件 @ a7b424df 浏览文件 @ 943ac578
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/setIn2.png
查看替换文件 @ a7b424df 浏览文件 @ 943ac578
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step1.png
查看替换文件 @ a7b424df 浏览文件 @ 943ac578
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step2.png
查看替换文件 @ a7b424df 浏览文件 @ 943ac578
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step3.png
查看替换文件 @ a7b424df 浏览文件 @ 943ac578
This image diff could not be displayed because it is too large. You can view the blob instead.
src/assets/image/website/step4.png
查看替换文件 @ a7b424df 浏览文件 @ 943ac578
This image diff could not be displayed because it is too large. You can view the blob instead.
src/views/entry/newyuncang.vue
浏览文件 @ 943ac578
......@@ -7,11 +7,13 @@
<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>
<li v-for="(item,index) in ycList" :key="item.id">
<a :href=" item.src " target="_blank">{{ item.name}}</a>
</li>
</ul>
<div class="register-login-btn">
<div class="register-btn">注 册</div>
<div class="login-btn">登 录</div>
<div class="register-btn" @click="toRegister">注 册</div>
<div class="login-btn" @click="toLogin">登 录</div>
</div>
</div>
</header>
......@@ -28,9 +30,9 @@
<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 }">
<div class="pre-advantage" @mouseover="adHover(1)" @mouseleave="adLeave(1)" :class="{ 'noBorder': indexAddom === 1 }" style="z-index: 4">
<dl class="dl-con" :class="{ 'noDlCon': indexAddom === 1 }">
<dt></dt>
<dt class="dl-con-ad1"></dt>
<dd>技术优势</dd>
</dl>
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 1 }">
......@@ -42,9 +44,9 @@
</p>
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(2)" @mouseleave="adLeave(2)" :class="{ 'noBorder': indexAddom === 2 }">
<div class="pre-advantage" @mouseover="adHover(2)" @mouseleave="adLeave(2)" :class="{ 'noBorder': indexAddom === 2 }" style="z-index: 3">
<dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 2 }">
<dt></dt>
<dt class="dl-con-ad2"></dt>
<dd>成本优势</dd>
</dl>
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 2 }">
......@@ -56,9 +58,9 @@
</p>
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(3)" @mouseleave="adLeave(3)" :class="{ 'noBorder': indexAddom === 3 }">
<div class="pre-advantage" @mouseover="adHover(3)" @mouseleave="adLeave(3)" :class="{ 'noBorder': indexAddom === 3 }" style="z-index: 2">
<dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 3 }">
<dt></dt>
<dt class="dl-con-ad3"></dt>
<dd>响应式</dd>
</dl>
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 3 }">
......@@ -77,9 +79,9 @@
</p>
</div>
</div>
<div class="pre-advantage" @mouseover="adHover(4)" @mouseleave="adLeave(4)" :class="{ 'noBorder': indexAddom === 4 }">
<div class="pre-advantage" @mouseover="adHover(4)" @mouseleave="adLeave(4)" :class="{ 'noBorder': indexAddom === 4 }" style="z-index: 1">
<dl style="text-align: center" class="dl-con" :class="{ 'noDlCon': indexAddom === 4 }">
<dt></dt>
<dt class="dl-con-ad4"></dt>
<dd>解决方案</dd>
</dl>
<div class="pre-advantage-details" :class="{ 'up-ad-details': indexAddom === 4 }">
......@@ -96,7 +98,7 @@
</section>
<!-- 入驻流程 -->
<section style="padding-bottom: 90px;background-color: #f9faff;">
<section style="padding-bottom: 90px;background-color: #f9f9fa;">
<p class="process-title">入驻流程和材料</p>
<div class="process-con">
<div class="process-steps">
......@@ -139,7 +141,7 @@
</div>
<div class="process-mater">
<div class="pro-ma">
<p class="set-in-ma">入驻必备材料</p>
<p class="set-in-ma m-bg">入驻必备材料</p>
<div class="optional">
<ul>
<li>营业执照电子版</li>
......@@ -149,7 +151,7 @@
</div>
<div class="pro-ma">
<p class="set-in-ma">入驻选填材料</p>
<p class="set-in-ma n-m-bg">入驻选填材料</p>
<div class="optional">
<ul >
<li>品牌LOGO</li>
......@@ -171,13 +173,13 @@
<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>
<span class="clothes" :class="{ 'light-word' : isLight === 0 }" @click="brandTypeChange(0)">服饰</span>
<span class="electrical" :class="{ 'light-word' : isLight === 1 }" @click="brandTypeChange(1)">电器</span>
<span class="food" :class="{ 'light-word' : isLight === 2 }" @click="brandTypeChange(2)">食品</span>
<span class="maternal" :class="{ 'light-word' : isLight === 3 }" @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 ref="cardShow" @change="brandCarChange()" :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>
......@@ -224,6 +226,7 @@
</template>
<script>
import store from '@/store';
export default {
name: "newyuncang",
data() {
......@@ -232,15 +235,14 @@
isAdHover: false,
isHasBorder: false,
indexAddom: false,
isLight: 0,
ycList: [
{ name: '首页',id:0 },
{ name: '开放平台',id:1 },
{ name: '云仓',id:2 },
{ name: '关于我们',id:3 },
{ name: '首页',id:0,src: '/' },
{ name: '开放平台',id:1,src: 'http://open.jxhh.com/doc/api.html' },
{ name: '云仓',id:2,src: 'http://scm.jxhh.com' },
{ name: '关于我们',id:3,src: 'http://www.stbz.net' },
],
clothesBrandImgs: [
// {url}
]
gwToken: ''
}
},
mounted() {
......@@ -251,6 +253,7 @@
},
methods: {
// 监听浏览器滚动
handleScroll() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
this.isScroll = scrollTop > 100 ? true : false;
......@@ -258,8 +261,13 @@
// 品牌类型切换
brandTypeChange(index) {
this.$refs.cardShow.setActiveItem(index);
this.isLight = index;
},
// 点击轮播图，切换，高点 品牌类别
brandCarChange() {
this.isLight = this.$refs.cardShow.activeIndex;
},
// 划过效果
adHover(index) {
this.isAdHover = true;
this.indexAddom = index;
......@@ -267,6 +275,17 @@
adLeave(index) {
this.isAdHover = false;
this.indexAddom = -1;
},
// 去注册
toRegister() {
store.dispatch('LogOut').then(() => {
var ssa = window.location.host;
window.location.href = 'http://sso.jxhh.com/logout?redirect=http://' + ssa
})
},
// 去登录
toLogin() {
window.location.href = 'http://sso.jxhh.com/logout?redirect=http://' + window.location.host + '/platformlogin'
}
} // methods end
......@@ -382,10 +401,10 @@
width: 268px;
height: 190px;
border: 1px solid #DCDCDC;
margin-right: 40px;
margin: 0 20px;
position: relative;
background: #FFFFFF;
z-index: 29;
z-index: 0;
border-radius: 2px;
}
.dl-con {
......@@ -393,7 +412,7 @@
height: 100%;
text-align : center;
background: #FFFFFF;
z-index: 29; /* 这个值要保证和 当前容器dom 一致 */
z-index: 0; /* 这个值要保证和 当前容器dom 一致 */
border: none;
overflow : hidden;
}
......@@ -402,18 +421,32 @@
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;
}
.dl-con > .dl-con-ad1 {
background : url("../../assets/image/website/ad1.png") no-repeat center center;
background-size : cover;
}
.dl-con > .dl-con-ad2 {
background : url("../../assets/image/website/ad2.png") no-repeat center center;
background-size : cover;
}
.dl-con > .dl-con-ad3 {
background : url("../../assets/image/website/ad3.png") no-repeat center center;
background-size : cover;
}
.dl-con > .dl-con-ad4 {
background : url("../../assets/image/website/ad4.png") no-repeat center center;
background-size : cover;
}
.pre-advantage-details {
width: 270px;
height: 420px;
height: 410px;
position: absolute;
top: -110px;
left: -1px;
......@@ -442,7 +475,10 @@
font-size: 16px;
font-weight: 400;
line-height: 28px;
text-align : center;
text-align : justify;
text-align-last : center;
-ms-text-align-last : center;
-moz-text-align-last : center;
}
/* hover 时候的效果 class */
......@@ -461,10 +497,11 @@
.up-ad-details {
display: block;
z-index: 199;
}
.mgB100 {
margin-bottom: 200px;
margin-bottom: 150px;
}
......@@ -480,19 +517,20 @@
width: 275px;
height: 315px;
background: #fff;
margin-right: 35px;
//border: 1px solid #e9e9e9;
//border-radius: 6px;
margin: 0 20px;
}
.pro-ma{
width: 585px;
width: 590px;
height: 190px;
background : #fff;
margin-right: 35px;
margin-top: 35px;
margin: 35px 20px 0;
background : #fff url("../../assets/image/website/mate-bg.png") no-repeat 100%;
}
.pro-ma:hover,.pro-step:hover{
box-shadow :0 2px 10px 0 rgba(0,0,0,0.05);
}
.step-one,.step-two,.step-three,.step-four {
width: 58px;
height: 58px;
......@@ -548,8 +586,13 @@
color: #000000;
line-height: 20px;
text-indent: 30px;
margin: 35px 0 15px 68px;
}
.m-bg {
background : url("../../assets/image/website/setIn1.png") no-repeat 0 center;
margin: 35px 0 15px 72px;
}
.n-m-bg {
background : url("../../assets/image/website/setIn2.png") no-repeat 0 center;
}
.optional{
......@@ -590,7 +633,7 @@
font-weight: 400;
color: #333333;
opacity: 0.82;
padding : 30px 0;
padding : 35px 0 20px;
}
.brand-type {
......@@ -599,7 +642,7 @@
justify-content : space-around;
align-items : center;
width: 40%;
margin: 80px auto 10px;
margin: 60px auto 12px;
}
.clothes, .electrical, .food, .maternal {
......@@ -610,8 +653,10 @@
font-weight: 400;
color: #000;
text-indent: 40px;
/*
color: #1966FF;*/
}
.light-word {
color: #1966FF;
}
.clothes {
......@@ -658,15 +703,14 @@ color: #1966FF;*/
border: 1px solid #e9e9e9;
background : #fff;
overflow : hidden;
//box-shadow : 4px 4px 4px 4px #99a9bf;
box-shadow: 0 25px 28px 10px rgba(152, 150, 150, 0.1);
}
.el-carousel__item:nth-child(2n) {
background-color: #fff;
}
//.el-carousel__item:nth-child(2n) {
// //background-color: #99a9bf;
// //box-shadow : 4px 4px 4px 4px #99a9bf;
//}
//
.el-carousel__item:nth-child(2n+1) {
background: #fff;
}
/* footer 联系我们 */
......@@ -714,7 +758,7 @@ color: #1966FF;*/
flex-direction : column;
justify-content : center;
align-items : center;
border-right: 1px solid #959BA8;
border-right: 1px solid #50555f;
padding-right: 80px;
}
......@@ -732,7 +776,7 @@ color: #1966FF;*/
height: 30px;
padding: 0 40px;
line-height : 30px;
border-right: 1px solid #959BA8;
border-right: 1px solid #50555f;
cursor: pointer;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论