<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--首页seo标题-->
<title>卖家互助团（Amzssa）_卖家互助团</title>
<link href="/css/global.css" rel="stylesheet" type="text/css">
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 必须先引入vue， 后使用element-ui -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app" ref="app">
<div class="pf shadow" v-if="page==1"></div>
<div class="pf page1" v-if="page==1">
<el-form ref="form" :model="form" label-width="80px" :rules="rules" ref="ruleForm" v-loading="loading">
<el-form-item label="仓库代码" prop="code">
<el-select v-model="form.code" placeholder="请选择">
<el-option
v-for="item in form.options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="货物属性" prop="type">
<el-select v-model="form.type" placeholder="请选择">
<el-option
v-for="item in form.types"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="物流方式" prop="stype">
<el-select v-model="form.stype" placeholder="请选择">
<el-option
v-for="item in form.stypes"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="重量(KG)" prop="weight">
<el-input v-model:number="form.weight" placeholder="请输入重量" style="max-width: 150px;"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('form')">提交查询</el-button>
<el-button @click="resetForm('form')">重填</el-button>
</el-form-item>
</el-form>
</div>
<div class="pz page2" v-if="page==2">
<section class="flexColumn typename">参数配置对比</section>
<main class="flex">
<aside class="flex">
<ul>
<li :class="asideActive==1?'active':''" @click="scrollTo('top')">仓库代码</li>
<li :class="asideActive==2?'active':''" @click="scrollTo('baseInfo')">基本信息</li>
<li :class="asideActive==3?'active':''" @click="scrollTo('expressOption')">物流属性</li>
<li :class="asideActive==4?'active':''" @click="scrollTo('totalWeight')">总重量</li>
<li :class="asideActive==5?'active':''" @click="scrollTo('expressType')">物流方式</li>
</ul>
</aside>
<section class="list">
<ul class="code lists">
<li class="flex">
<div class="flexCenter first">共<span class="red">{{list.length}}</span>种渠道</div>
<div class="flexColumn flexCenter" v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
<p class="flexJb w100">
<span class="ib sticky" :class="sticky==0?'active':''" v-if="sticky==k" @click="sticky=-1"><i class="el-icon-paperclip"></i>已订住</span>
<span class="ib sticky" v-if="sticky!=k" @click="toTop(k)"><i class="el-icon-paperclip"></i>钉在左侧</span>
<a href="javascript:void(0)" @click="deleteItem(k)"><i class="el-icon-close"></i></a>
</p>
<p class="fb">{{i.title}}</p>
<p class="flexJb">
<a href="javascript:void(0)" class="flexCenter arrow" :class="k == 0?'disabled':''" @click="up(k)"><i class="el-icon-arrow-left"></i></a>
<span class="ib compare">移动对比</span>
<a href="javascript:void(0)" class="flexCenter arrow" :class="k == list.length-1?'disabled':''" @click="down(k)"><i class="el-icon-arrow-right"></i></a>
</p>
</div>
<div class="flexCenter">
<el-button @click="page=1">重新查询</el-button>
</div>
</li>
</ul>
<!--div class="">指导价（不含附加费）/KG</div>
<div>附件费</div>
<div>时效</div>
<div>末端派送方式</div>
<div>综合时效</div>
<div>开船时间</div>
<div>目的港口</div>
<div>佩服说明</div>
<div>仓库所在地</div>
<div>截单时间</div-->
<div class="flexAc title">
<h3 class="fb ib" ref="baseInfo">基本信息</h3>
</div>
<ul class="flexColumn lists">
<li class="flex">
<div class="first">指导价（不含附加费）/KG</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[0].value}}
</div>
<div> </div>
</li>
<li class="flex">
<div class="first">附件费</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[1].value}}
</div>
<div> </div>
</li>
<li class="flex">
<div class="first">时效</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[2].value}}
</div>
<div> </div>
</li>
<li class="flex">
<div class="first">末端派送方式</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[3].value}}
</div>
<div> </div>
</li>
<li class="flex">
<div class="first">综合时效</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[4].value}}
</div>
<div> </div>
</li>
<li class="flex">
<div class="first">开船时间</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[5].value}}
</div>
<div> </div>
</li>
<li class="flex">
<div class="first">目的港口</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[6].value}}
</div>
<div> </div>
</li>
<li class="flex">
<div class="first">佩服说明</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[7].value}}
</div>
<div> </div>
</li>
<li class="flex">
<div class="first">仓库所在地</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[8].value}}
</div>
<div> </div>
</li><li class="flex">
<div class="first">仓库所在地</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[8].value}}
</div>
<div> </div>
</li><li class="flex">
<div class="first">仓库所在地</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[8].value}}
</div>
<div> </div>
</li><li class="flex">
<div class="first">仓库所在地</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
{{i.info[8].value}}
</div>
<div> </div>
</li>
</ul>
<div class="flexAc title">
<h3 class="fb ib" ref="expressOption">物流属性</h3>
</div>
<ul class="flexColumn lists">
<li class="flex">
<div class="first">物流属性</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
物流属性
</div>
<div> </div>
</li>
</ul>
<div class="flexAc title">
<h3 class="fb ib" ref="totalWeight">总重量</h3>
</div>
<ul class="flex lists">
<li class="flex">
<div class="first">总重量</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
总重量
</div>
<div> </div>
</li>
</ul>
<div class="flexAc title">
<h3 class="fb ib" ref="expressType">物流方式</h3>
</div>
<ul class="flex lists">
<li class="flex">
<div class="first">物流方式</div>
<div v-for="(i, k) in list" :class="sticky==0&&k==0?'stickDo':''">
物流方式
</div>
<div> </div>
</li>
</ul>
</section>
</main>
</div>
</div>
<script src="/js/app.js"></script>
</body>
</html>new Vue({
el: '#app',
data: {
page: 2,
loading: 0,
form: {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
code: '',
weight: '',
types: [{
value: '1',
label: '正常货物'
}, {
value: '2',
label: '敏感货物'
}, {
value: '3',
label: '其他货物'
}],
type: '',
stypes: [{
value: '1',
label: '快递派送'
}, {
value: '2',
label: '卡车派送'
}],
stype: ''
},
rules: {
code: [
{ required: true, message: '请选择仓库代码', trigger: 'change' }
],
weight: [
{ required: true, message: '请输入正确的重量' }
],
type: [
{ type: '', required: true, message: '请选择货物属性', trigger: 'change' }
],
stype: [
{ type: '', required: true, message: '请选择物流方式', trigger: 'change' }
]
},
list: [
{
title: '美国加班船',
price: 2000,
info: [
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
{ value: 'a' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
},
{
title: '美森限时达',
price: 2000,
info: [
{ value: 'a1' },
{ value: 'b2' },
{ value: 'c2' },
{ value: 'd2' },
{ value: 'e2' },
{ value: 'f2' },
{ value: 'g2' },
{ value: 'h2' },
{ value: 'i2' },
]
}
],
asideActive: 1,
sticky: -1,
baseInfoPos: 0,
expressOptionPos: 0,
totalWeightPos: 0,
expressTypePos: 0,
headerHeight: 150
},
mounted() {
this.$nextTick (
() => {
this.baseInfoPos = this.$refs.baseInfo.getBoundingClientRect().top;
this.expressOptionPos = this.$refs.expressOption.getBoundingClientRect().top;
this.totalWeightPos = this.$refs.totalWeight.getBoundingClientRect().top;
this.expressTypePos = this.$refs.expressType.getBoundingClientRect().top;
this.headerHeight = 0;
}
)
},
methods: {
submitForm: function (formName) {
var that = this;
that.$refs[formName].validate((valid) => {
if (valid) {
that.loading = 1;
that.page = 2;
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm: function (formName) {
this.$refs[formName].resetFields();
},
scrollTo: function (pos) {
var that = this;
switch (pos) {
case 'top':
document.documentElement.scrollTop = 0;
break;
case 'baseInfo':
document.documentElement.scrollTop = this.baseInfoPos - this.headerHeight;
break;
case 'expressOption':
document.documentElement.scrollTop = this.expressOptionPos - this.headerHeight;
break;
case 'totalWeight':
document.documentElement.scrollTop = this.totalWeightPos - this.headerHeight;
break;
case 'expressType':
document.documentElement.scrollTop = this.expressTypePos - this.headerHeight;
break;
}
},
deleteItem: function (k) {
this.list.splice(k, 1);
},
swapItems: function (arr, index1, index2, direction) {
if(direction == 'up'){
//置顶
arr.unshift(arr[index1]);
arr.splice(index1+1, 1);
return arr;
}
if(direction == 'down'){
//置底
arr.push(arr[index1]);
arr.splice(index1,1);
return arr;
}
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
},
toTop: function (k) {
if(k == 0) {
this.sticky = 0;
return;
}
this.sticky = 0;
this.list = this.swapItems(this.list, k, k, 'up');
var list = this.list;
list.forEach(function(e, k) {
list[k].sort_order = k;
})
document.documentElement.scrollLeft = 0;
},
up: function (k) {
if(k == 0) {
return;
}
this.list = this.swapItems(this.list, k, k - 1);
var list = this.list;
list.forEach(function(e, k) {
list[k].sort_order = k;
})
},
down(k) {
var index = this.list.length - 1;
if(k == index) {
return;
}
this.list = this.swapItems(this.list, k, k + 1);
var list = this.list;
list.forEach(function(e, k) {
list[k].sort_order = k;
})
},
}
})@charset "utf-8";
@import url('reset.min.css');
body{font-family: 微软雅黑;}
.flex{display: flex; display: -webkit-flex;}
.flexColumn{display: flex; display: -webkit-flex; flex-direction: column;}
.flexWrap{display: flex; display: -webkit-flex; flex-wrap: wrap;}
.flexCenter{display: flex; display: -webkit-flex;align-items:center;justify-content:center; flex-wrap: wrap; align-content: center;}
.flexRight{display: flex; display: -webkit-flex; justify-content: flex-end;}
.flexAc{display: flex; display: -webkit-flex; align-content: center; align-items: center;}
.flexJb{display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: space-between;}
*{outline: none;}
.pf {
position: fixed;
z-index: 999;
}
.pz {
position: relative;
z-index: 0;
}
.pa {
position: absolute;
}
.fb {
font-weight: bold;
}
.w100 {
width: 100%;
}
#app {
width: 100%;
min-height: 100vh;
background-color: #f7f8fc;
font-size: 14px;
}
:root {
--scroll-bar-width: 17px;
}
#app .shadow {
z-index: 99;
width: 100%;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.4);
}
#app .page1 {
top: 50%;
left: 50%;
max-width: 500px;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
}
#app .page2 {
width: fit-content;
min-height: 100vh;
overflow: visible;
}
#app .page2 .typename {
height: 45px;
background-color: #1f2129;
font-size: 16px;
color: #fff;
font-weight: bold;
padding: 0 15px;
position: -webkit-sticky;
position: sticky;
z-index: 1;
left: 20px;
width: calc(100vw - 40px - var(--scroll-bar-width));
}
#app .page2 .typename::after {
position: absolute;
left: 54px;
bottom: 0;
content: '';
display: block;
width: 30px;
height: 4px;
background-color: #ffcc32;
}
#app main {
margin-top: 12px;
}
#app main aside {
width: 180px;
background-color: #f7f8fc;
border-radius: 5px;
flex-grow: 0;
flex-shrink: 0;
height: 100%;
height: calc(100vh - var(--scroll-bar-width));
padding-right: 12px;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 9;
justify-content: flex-end;
}
#app main aside ul {
width: 144px;
background-color: #fff;
}
#app main aside li {
padding: 0 20px;
width: 100%;
height: 33px;
border-radius: 5px;
font-size: 14px;
color: #333;
cursor: pointer;
}
#app main aside li.active {
background-color: #ffcd38;
}
#app main .list {
position: -webkit-sticky;
position: sticky;
top: 0;
left: 180px;
z-index: 1;
}
#app main .list .title {
width: 100%;
height: 42px;
font-size: 14px;
background-color: #f2f4fa;
color: rgb(31, 33, 41);
font-weight: bold;
padding: 0 12px;
}
#app main .list .title .ib {
position: sticky;
left: 192px;
z-index: 1;
}
#app main .lists {
width: 100%;
background-color: #fff;
}
#app main .lists li {
width: 100%;
}
#app main .lists li div {
width: 210px;
min-height: 39px;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
background: linear-gradient(0deg,rgba(255,204,50,.08),rgba(255,204,50,.08));
padding: 8px 16px;
color: rgb(26, 26, 26);
}
#app main .lists li:first-child {
overflow: visible;
}
#app main .lists li div.first {
border-left: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
position: sticky;
left: 180px;
z-index: 8;
background-color: rgb(255, 255, 255);
}
#app main .lists li div.stickDo {
position: sticky;
left: 390px;
z-index: 7;
background-color: rgb(255, 255, 255);
}
#app main .lists .red {
font-size: 16px;
font-weight: bold;
color: red;
}
#app main .lists.code {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 10;
}
#app main .lists.code li {
width: 100%;
}
#app main .lists.code li>div {
background: #fff;
}
#app main .lists.code .compare {
margin: 0 8px;
}
#app main .lists.code .arrow {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #f2f4fa;
}
#app main .lists.code .arrow.disabled {
cursor: not-allowed;
background-color: rgba(247, 248, 252);
color: rgba(230, 232, 242);
}
#app main a:hover {
color: #333;
}
#app main .lists.code .el-icon-close {
opacity: .5;
font-size: 18px;
}
#app main .lists.code .el-icon-close:hover {
opacity: 1;
}
#app main .lists.code .sticky {
padding: 4px 20px 4px 6px;
background-color: rgba(255,204,50,.12);
color: rgba(179, 125, 18);
line-height: 16px;
border-radius: 0 0 24px 0;
cursor: pointer;
}
#app main .lists.code .sticky i {
margin-right: 8px;
}
#app main .lists.code .sticky.active {
background-color: rgba(242, 244, 250);
color: #333;
}
