Skip to content

E
exam-commond-oldPro
Commit e43f050e by zhangzhongjie
Options

详情页面部分规范示例

parent 824fe907
Showing with 196 additions and 5 deletions
iview-admin-pro-template/src/menu/modules/details.js 0 → 100644
const pre = '/details/';
export default {
path: '/details',
title: '详情页面',
header: 'home',
icon: 'ios-list',
children: [
{
path: `${pre}details-module`,
title: '详情模块'
}
]
}
iview-admin-pro-template/src/menu/modules/list.js
...@@ -4,7 +4,7 @@ export default { ...@@ -4,7 +4,7 @@ export default {
path: '/list', path: '/list',
title: '列表页面', title: '列表页面',
header: 'home', header: 'home',
custom: 'i-icon-demo i-icon-demo-list', icon: 'ios-list-box-outline',
children: [ children: [
{ {
path: `${pre}list-search`, path: `${pre}list-search`,
......
iview-admin-pro-template/src/menu/sider.js
// 菜单，侧边栏 // 菜单，侧边栏
import dashboard from './modules/dashboard'; import dashboard from './modules/dashboard';
import list from './modules/list' import list from './modules/list';
import details from './modules/details'
// 系统 // 系统
import log from './modules/log'; import log from './modules/log';
export default [ export default [
dashboard, dashboard,
list, list,
log log,
details
]; ];
iview-admin-pro-template/src/pages/details/details-module/index.vue 0 → 100644
<template>
<div>
<div>
<p>1.详情页尽量采用这样的排版，输入框给定长度，最好统一长度，cart模板如Ebay分类处，分类题目等文字放到头部和条件筛选分隔开，左右分隔好</p>
<p>2.类似标题的输入直接用maxlength和show-word-limit显示和限制输入字数</p>
</div>
<div class="form">
<Form :model="formItem" :label-width="100">
<FormItem label="Title">
<Input v-model="formItem.input1" placeholder="主标题" style="width:500px" maxlength="80" show-word-limit></Input>
</FormItem>
<FormItem label="sub Title">
<Input v-model="formItem.input2" placeholder="副标题" style="width:500px" maxlength="80" show-word-limit></Input>
</FormItem>
<FormItem label="内部商品编码">
<Input v-model="formItem.input3" placeholder="enter something...." style="width:500px" disabled></Input>
</FormItem>
<FormItem label="环球SKU">
<Input v-model="formItem.input4" placeholder="环球SKU" style="width:500px" disabled></Input>
</FormItem>
<FormItem label="平台SKU">
<Input v-model="formItem.input5" placeholder="平台SKU" style="width:500px" disabled></Input>
</FormItem>
<FormItem label="* Ebay分类">
<Card dis-hover>
<Row>当前类目名称：Health & Beauty - > Nail Care, Manicure & Pedicure - > Gel Nails</Row>
<Row>原爬虫类目:(178961),原爬虫类目名称:()</Row>
<Row class-name="row-mar-bot">
<Col span="12">
<Cascader :data="data4" :load-data="loadData" placeholder="选择Ebay类目" style="width:300px"></Cascader>
</Col>
<Col span="12">
<div class="sort">
<Input v-model="formItem.input4" style="width:300px"></Input>
<Button>载入分类</Button>
</div>
</Col>
</row>
<row>
<Col span="12">
<Select v-model="formItem.select" style="width:300px">
<Option value="beijing">New York</Option>
<Option value="shanghai">London</Option>
<Option value="shenzhen">Sydney</Option>
</Select>
</Col>
<Col span="12">
<div class="sort">
<Input v-model="formItem.input4" placeholder="搜索类目" style="width:300px"></Input>
<Button>搜索</Button>
</div>
</Col>
</Row>
</Card>
</FormItem>
<FormItem label="UPC">
<Input v-model="formItem.input6" placeholder="UPC" style="width:500px" ></Input>
</FormItem>
<FormItem label="物品状况">
<Select v-model="formItem.select2" style="width:500px" placeholder="New">
<Option value="beijing">new</Option>
<Option value="shanghai">used</Option>
</Select>
</FormItem>
</Form>
</div>
</div>
</template>
<script>
export default {
name: 'details-details-module',
data () {
return {
formItem: {
input1: '',
input2: '',
input3: '',
input4: '',
input5: '',
input6: '',
select: '',
select2: ''
},
data4: [
{
value: 'beijing',
label: '北京',
children: [],
loading: false
},
{
value: 'hangzhou',
label: '杭州',
children: [],
loading: false
}
]
}
},
methods: {
loadData (item, callback) {
item.loading = true;
setTimeout(() => {
if (item.value === 'beijing') {
item.children = [
{
value: 'talkingdata',
label: 'TalkingData'
},
{
value: 'baidu',
label: '百度'
},
{
value: 'sina',
label: '新浪'
}
];
} else if (item.value === 'hangzhou') {
item.children = [
{
value: 'ali',
label: '阿里巴巴'
},
{
value: '163',
label: '网易'
}
];
}
item.loading = false;
callback();
}, 1000);
}
}
}
</script>
<style lang="less">
.form{
.sort{
display: flex;
}
.row-mar-bot{
margin-bottom: 10px;
}
}
</style>
iview-admin-pro-template/src/router/modules/details.js 0 → 100644
import BasicLayout from '@/layouts/basic-layout';
const meta = {
auth: true
};
const pre = 'details-'
export default {
path: '/details',
name: '/details',
redirect: {
name: `${pre}details-module`
},
meta,
component: BasicLayout,
children: [
{
path: 'details-module',
name: `${pre}details-module`,
meta: {
title: '详情模块'
},
component: () => import('@/pages/details/details-module')
}
]
}
iview-admin-pro-template/src/router/routes.js
import dashboard from './modules/dashboard'; import dashboard from './modules/dashboard';
import BasicLayout from '@/layouts/basic-layout'; import BasicLayout from '@/layouts/basic-layout';
import list from './modules/list'; import list from './modules/list';
import details from './modules/details';
/** /**
* 在主框架内显示 * 在主框架内显示
*/ */
...@@ -56,7 +57,8 @@ const frameIn = [ ...@@ -56,7 +57,8 @@ const frameIn = [
] ]
}, },
dashboard, dashboard,
list list,
details
]; ];
/** /**
......
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 to comment