7.11 pan
Panzihang
parent
41cb4c650a
commit
a7cec33e76
10
pages.json
10
pages.json
|
|
@ -37,9 +37,15 @@
|
|||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/mixAdd",
|
||||
"path": "pages/shipWork/peopleAdd",
|
||||
"style": {
|
||||
"navigationBarTitleText": "杂项作业编辑"
|
||||
"navigationBarTitleText": "杂项作业查看(人员信息)"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/shipWork/shiftAdd",
|
||||
"style": {
|
||||
"navigationBarTitleText": "杂项作业查看(工班信息)"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@
|
|||
<view class="tabsBox" v-for="(item,index) in tabsList" :key="index" :class="{active:tabsIndex == index}"
|
||||
@click="tabsClick(item,index)">{{item}}</view>
|
||||
</view>
|
||||
<!-- 人员信息列表 -->
|
||||
<ul v-if="tabsType == 1">
|
||||
<li v-for="(item,index) in peopleInfo" :key="index">
|
||||
<li v-for="(item,index) in peopleInfo" :key="index" @click="add('look')">
|
||||
<view class="title">航次：{{item.val1}}</view>
|
||||
<p>贸易类型：{{item.val2}}</p>
|
||||
<p>进出口：{{item.val3}}</p>
|
||||
|
|
@ -15,8 +16,9 @@
|
|||
<p>状态：{{item.val6}}</p>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 工班信息列表 -->
|
||||
<ul v-if="tabsType == 2">
|
||||
<li v-for="(item,index) in shiftInfo" :key="index">
|
||||
<li v-for="(item,index) in shiftInfo" :key="index" @click="add('look')">
|
||||
<view class="title">航次：{{item.val1}}</view>
|
||||
<view class="shift">
|
||||
<p>一工班</p>
|
||||
|
|
@ -33,7 +35,7 @@
|
|||
<view class="state">状态：{{item.val6}}</view>
|
||||
</li>
|
||||
</ul>
|
||||
<view class="addBtn" @click="add">+ 新增</view>
|
||||
<view class="addBtn" @click="add('add')">+ 新增</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
|
@ -44,8 +46,9 @@
|
|||
data() {
|
||||
return {
|
||||
tabsList: ["人员信息", "工班信息"],
|
||||
tabsType: 1,
|
||||
tabsType: 1, // 1是人员信息 2是工班信息
|
||||
tabsIndex: 0,
|
||||
// 人员信息列表
|
||||
peopleInfo: [{
|
||||
val1: "JK9795799",
|
||||
val2: "内贸",
|
||||
|
|
@ -68,6 +71,7 @@
|
|||
val5: "100",
|
||||
val6: "未上传",
|
||||
}],
|
||||
// 工班信息列表
|
||||
shiftInfo: [{
|
||||
val1: "JK9795799",
|
||||
val6: "未上传",
|
||||
|
|
@ -84,10 +88,21 @@
|
|||
this.tabsType = 2;
|
||||
}
|
||||
},
|
||||
add() {
|
||||
add(state) {
|
||||
const obj = {
|
||||
state: state,
|
||||
}
|
||||
const params = encodeURIComponent(JSON.stringify(obj));
|
||||
if (this.tabsType == 1) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/mixAdd`
|
||||
url: `/pages/shipWork/peopleAdd?params=${params}`
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/shiftAdd?params=${params}`
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<view class="mixAdd">
|
||||
<view class="peopleAdd">
|
||||
<view class="container">
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -7,8 +7,10 @@
|
|||
<span>快乐号</span>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>航次：</p>
|
||||
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"></uni-data-select>
|
||||
<p><span class="required" v-if="obj.state != 'look'">*</span>航次：</p>
|
||||
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"
|
||||
v-if="obj.state != 'look'"></uni-data-select>
|
||||
<p v-else>CK98796</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>进出口：</p>
|
||||
|
|
@ -19,25 +21,37 @@
|
|||
<span>内贸</span>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>天气：</p>
|
||||
<p><span class="required" v-if="obj.state != 'look'">*</span>天气：</p>
|
||||
<span>未知</span>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>泊位：</p>
|
||||
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"></uni-data-select>
|
||||
<p><span class="required" v-if="obj.state != 'look'">*</span>泊位：</p>
|
||||
<uni-data-select v-model="bwValue" :localdata="bwList" @change="bwChange"
|
||||
v-if="obj.state != 'look'"></uni-data-select>
|
||||
<p v-else>1泊位</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>作业组数：</p>
|
||||
<uni-number-box @change="workChange" />
|
||||
<p><span class="required" v-if="obj.state != 'look'">*</span>作业组数：</p>
|
||||
<uni-number-box @change="workChange" v-if="obj.state != 'look'" />
|
||||
<p v-else>5</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>单船人数：</p>
|
||||
<uni-number-box @change="shipChange" />
|
||||
<p><span class="required" v-if="obj.state != 'look'">*</span>单船人数：</p>
|
||||
<uni-number-box @change="shipChange" v-if="obj.state != 'look'" />
|
||||
<p v-else>12</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>作业时间：</p>
|
||||
<uni-datetime-picker v-model="datetime" type="datetimerange" rangeSeparator="-" @change="changeLog"
|
||||
v-if="obj.state != 'look'" />
|
||||
<p v-else>2020-04-21 00:00 - 2020-04-21 00:00</p>
|
||||
</li>
|
||||
</ul>
|
||||
<view class="btnList">
|
||||
<van-button type="default" @click="cancel">取消</van-button>
|
||||
<van-button type="info" v-if="obj.state == 'add' || obj.state == 'edit'" @click="save">保存</van-button>
|
||||
<van-button type="info" v-if="obj.state == 'look'" @click="toGo('edit')">编辑</van-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -46,6 +60,7 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
obj: {},
|
||||
// 航次下拉框
|
||||
hcValue: "",
|
||||
hcList: [{
|
||||
|
|
@ -80,6 +95,14 @@
|
|||
workValue: 0,
|
||||
// 单船人数
|
||||
shipValue: 0,
|
||||
// 作业时间
|
||||
datetime: "",
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if ('params' in options) {
|
||||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -99,14 +122,40 @@
|
|||
shipChange(val) {
|
||||
this.shipValue = val;
|
||||
},
|
||||
// 作业时间
|
||||
changeLog(e) {
|
||||
this.datetime = e;
|
||||
console.log(e)
|
||||
},
|
||||
// 取消
|
||||
cancel() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/shipWork/mixWork'
|
||||
})
|
||||
},
|
||||
// 保存
|
||||
save() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/shipWork/mixWork'
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
toGo(state) {
|
||||
this.obj.state = state;
|
||||
const params = encodeURIComponent(JSON.stringify(this.obj));
|
||||
uni.navigateTo({
|
||||
url: `/pages/shipWork/peopleAdd?params=${params}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.mixAdd {
|
||||
.peopleAdd {
|
||||
.container {
|
||||
padding: 30px 20px;
|
||||
background-color: #fff;
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
|
|
@ -147,6 +196,17 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btnList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/deep/ .van-button {
|
||||
margin: 30px 20px;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
<template>
|
||||
<view class="shiftAdd">
|
||||
<view class="container">
|
||||
<uni-steps :options="stepList" :active="active" />
|
||||
<view class="line"></view>
|
||||
|
||||
<ul class="ul1">
|
||||
<li>
|
||||
<p>船名：</p>
|
||||
<span>快乐号</span>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>航次：</p>
|
||||
<uni-data-select v-model="hcValue" :localdata="hcList" @change="hcChange"></uni-data-select>
|
||||
</li>
|
||||
<li>
|
||||
<p>进出口：</p>
|
||||
<span>进口</span>
|
||||
</li>
|
||||
<li>
|
||||
<p>贸易类型：</p>
|
||||
<span>内贸</span>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>装卸类型：</p>
|
||||
<uni-data-select v-model="zxValue" :localdata="zxList" @change="zxChange"></uni-data-select>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<view class="ulTop"><span @click="ulAdd1">添加</span><van-icon name="arrow-down" /></view>
|
||||
<ul class="ul2" v-for="(item,index) in ulList1" :key="index">
|
||||
<li>
|
||||
<p class="liTitle"><span class="required">*</span>工班：</p>
|
||||
<uni-data-select v-model="gbValue" :localdata="gbList" @change="gbChange"></uni-data-select>
|
||||
</li>
|
||||
<li>
|
||||
<p class="liTitle"><span class="required">*</span>作业时间 ：</p>
|
||||
<uni-datetime-picker v-model="datetime" type="datetimerange" rangeSeparator="-"
|
||||
@change="changeLog" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<view class="ulTop"><span @click="ulAdd2">添加</span><van-icon name="arrow-down" /></view>
|
||||
<ul class="ul2" v-for="(item,index) in ulList2" :key="index">
|
||||
<li>
|
||||
<p class="liTitle"><span class="required">*</span>车型：</p>
|
||||
<uni-data-select v-model="cxValue" :localdata="cxList" @change="cxChange"></uni-data-select>
|
||||
</li>
|
||||
<li>
|
||||
<p><span class="required">*</span>数量：</p>
|
||||
<uni-number-box @change="numChange" />
|
||||
</li>
|
||||
<li>
|
||||
<p class="liTitle"><span class="required">*</span>装卸方式：</p>
|
||||
<uni-data-select v-model="fsValue" :localdata="fsList" @change="fsChange"></uni-data-select>
|
||||
</li>
|
||||
<li class="widthLi">
|
||||
<p class="liTitle">备注：</p>
|
||||
<uni-easyinput type="textarea" autoHeight v-model="notes" placeholder="请输入任务描述(200字以内)"
|
||||
maxlength="200"></uni-easyinput>
|
||||
</li>
|
||||
</ul>
|
||||
<view class="btnList">
|
||||
<van-button type="default" @click="cancel">取消</van-button>
|
||||
<van-button type="info">保存</van-button>
|
||||
<van-button type="info">下一步</van-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
obj: {},
|
||||
active: 0,
|
||||
stepList: [{
|
||||
title: '工班信息'
|
||||
}, {
|
||||
title: '翻舱信息'
|
||||
}, {
|
||||
title: '其他信息'
|
||||
}],
|
||||
// 航次下拉框
|
||||
hcValue: "",
|
||||
hcList: [{
|
||||
value: 0,
|
||||
text: "航次0"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "航次1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "航次2"
|
||||
},
|
||||
],
|
||||
// 装卸类型下拉框
|
||||
zxValue: "",
|
||||
zxList: [{
|
||||
value: 0,
|
||||
text: "装卸类型0"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "装卸类型1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "装卸类型2"
|
||||
},
|
||||
],
|
||||
|
||||
ulList1: [{}],
|
||||
// 工班下拉框
|
||||
gbValue: "",
|
||||
gbList: [{
|
||||
value: 0,
|
||||
text: "工班0"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "工班1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "工班2"
|
||||
},
|
||||
],
|
||||
// 作业时间
|
||||
datetime: "",
|
||||
|
||||
ulList2: [{}],
|
||||
// 车型下拉
|
||||
cxValue: "",
|
||||
cxList: [{
|
||||
value: 0,
|
||||
text: "车型0"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "车型1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "车型2"
|
||||
},
|
||||
],
|
||||
// 数量
|
||||
numValue: 0,
|
||||
// 装卸方式下拉
|
||||
fsValue: "",
|
||||
fsList: [{
|
||||
value: 0,
|
||||
text: "装卸方式0"
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
text: "装卸方式1"
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
text: "装卸方式2"
|
||||
},
|
||||
],
|
||||
// 备注
|
||||
notes: "",
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if ('params' in options) {
|
||||
// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
|
||||
this.obj = JSON.parse(decodeURIComponent(options.params))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 航次下拉
|
||||
hcChange(e) {
|
||||
this.hcValue = e;
|
||||
},
|
||||
// 装卸类型下拉
|
||||
zxChange(e) {
|
||||
this.zxValue = e;
|
||||
},
|
||||
// 点击第一个添加
|
||||
ulAdd1() {
|
||||
this.ulList1.push({})
|
||||
},
|
||||
// 工班下拉
|
||||
gbChange(e) {
|
||||
this.gbValue = e;
|
||||
},
|
||||
// 作业时间
|
||||
changeLog(e) {},
|
||||
// 点击第二个添加
|
||||
ulAdd2() {
|
||||
this.ulList2.push({})
|
||||
},
|
||||
// 车型下拉
|
||||
cxChange(e) {
|
||||
this.cxValue = e;
|
||||
},
|
||||
// 数量
|
||||
numChange(val) {
|
||||
this.numValue = val;
|
||||
},
|
||||
// 装卸方式下拉
|
||||
fsChange(e) {
|
||||
this.fsValue = e;
|
||||
},
|
||||
|
||||
// 取消
|
||||
cancel() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/shipWork/mixWork'
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.shiftAdd {
|
||||
.container {
|
||||
padding: 30px 20px;
|
||||
background-color: #fff;
|
||||
|
||||
/deep/.uni-steps__row-title {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/deep/.uni-icons {
|
||||
font-size: 20px !important;
|
||||
}
|
||||
|
||||
/deep/.uni-steps__row-container {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
background: #f2f2f2;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.ulTop {
|
||||
width: 100%;
|
||||
padding: 20px;
|
||||
text-align: right;
|
||||
border-top: 1px solid #ccc;
|
||||
|
||||
|
||||
span {
|
||||
color: #2979ff;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin: 20px 0;
|
||||
|
||||
li {
|
||||
width: 44%;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: flex;
|
||||
padding: 10px 20px;
|
||||
line-height: 35px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.required {
|
||||
color: red;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.liTitle {
|
||||
min-width: 85px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/deep/.uni-numbox {
|
||||
border: 1px solid #ccc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/deep/.uni-numbox-btns {
|
||||
border-right: 1px solid #ccc;
|
||||
border-left: 1px solid #ccc;
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/deep/.uni-numbox__value {
|
||||
width: 100px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.widthLi {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ul2 {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
|
||||
li {
|
||||
border: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btnList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
/deep/ .van-button {
|
||||
margin: 30px 20px;
|
||||
width: 120px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
## 1.1.1（2021-11-22）
|
||||
- 修复 vue3中某些scss变量无法找到的问题
|
||||
## 1.1.0（2021-11-19）
|
||||
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-steps](https://uniapp.dcloud.io/component/uniui/uni-steps)
|
||||
## 1.0.8（2021-05-12）
|
||||
- 新增 项目示例地址
|
||||
## 1.0.7（2021-05-06）
|
||||
- 修复 uni-steps 横向布局时，多行文字高度不合理的 bug
|
||||
## 1.0.6（2021-04-21）
|
||||
- 优化 添加依赖 uni-icons, 导入后自动下载依赖
|
||||
## 1.0.5（2021-02-05）
|
||||
- 优化 组件引用关系，通过uni_modules引用组件
|
||||
|
||||
## 1.0.4（2021-02-05）
|
||||
- 调整为uni_modules目录规范
|
||||
|
|
@ -0,0 +1,269 @@
|
|||
<template>
|
||||
<view class="uni-steps">
|
||||
<view :class="[direction==='column'?'uni-steps__column':'uni-steps__row']">
|
||||
<view :class="[direction==='column'?'uni-steps__column-text-container':'uni-steps__row-text-container']">
|
||||
<view v-for="(item,index) in options" :key="index"
|
||||
:class="[direction==='column'?'uni-steps__column-text':'uni-steps__row-text']">
|
||||
<text :style="{color:index === active?activeColor:deactiveColor}"
|
||||
:class="[direction==='column'?'uni-steps__column-title':'uni-steps__row-title']">{{item.title}}</text>
|
||||
<text :style="{color: deactiveColor}"
|
||||
:class="[direction==='column'?'uni-steps__column-desc':'uni-steps__row-desc']">{{item.desc}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view :class="[direction==='column'?'uni-steps__column-container':'uni-steps__row-container']">
|
||||
<view :class="[direction==='column'?'uni-steps__column-line-item':'uni-steps__row-line-item']"
|
||||
v-for="(item,index) in options" :key="index">
|
||||
<view
|
||||
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--before':'uni-steps__row-line--before']"
|
||||
:style="{backgroundColor:index<=active&&index!==0?activeColor:index===0?'transparent':deactiveColor}">
|
||||
</view>
|
||||
<view :class="[direction==='column'?'uni-steps__column-check':'uni-steps__row-check']"
|
||||
v-if="index === active">
|
||||
<uni-icons :color="activeColor" :type="activeIcon" size="14"></uni-icons>
|
||||
</view>
|
||||
<view v-else :class="[direction==='column'?'uni-steps__column-circle':'uni-steps__row-circle']"
|
||||
:style="{backgroundColor:index<active?activeColor:deactiveColor}"></view>
|
||||
<view
|
||||
:class="[direction==='column'?'uni-steps__column-line':'uni-steps__row-line',direction==='column'?'uni-steps__column-line--after':'uni-steps__row-line--after']"
|
||||
:style="{backgroundColor:index<active&&index!==options.length-1?activeColor:index===options.length-1?'transparent':deactiveColor}">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* Steps 步骤条
|
||||
* @description 评分组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=34
|
||||
* @property {Number} active 当前步骤
|
||||
* @property {String} direction = [row|column] 当前步骤
|
||||
* @value row 横向
|
||||
* @value column 纵向
|
||||
* @property {String} activeColor 选中状态的颜色
|
||||
* @property {Array} options 数据源，格式为：[{title:'xxx',desc:'xxx'},{title:'xxx',desc:'xxx'}]
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniSteps',
|
||||
props: {
|
||||
direction: {
|
||||
// 排列方向 row column
|
||||
type: String,
|
||||
default: 'row'
|
||||
},
|
||||
activeColor: {
|
||||
// 激活状态颜色
|
||||
type: String,
|
||||
default: '#2979FF'
|
||||
},
|
||||
deactiveColor: {
|
||||
// 未激活状态颜色
|
||||
type: String,
|
||||
default: '#B7BDC6'
|
||||
},
|
||||
active: {
|
||||
// 当前步骤
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
activeIcon: {
|
||||
// 当前步骤
|
||||
type: String,
|
||||
default: 'checkbox-filled'
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
} // 数据
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-border-color:#EDEDED;
|
||||
.uni-steps {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
width: 100%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
flex: 1;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__row {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__column {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.uni-steps__row-text-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.uni-steps__column-text-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-steps__row-text {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__column-text {
|
||||
padding: 6px 0px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: $uni-border-color;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__row-title {
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-steps__column-title {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.uni-steps__row-desc {
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.uni-steps__column-desc {
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.uni-steps__row-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-steps__column-container {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
width: 30px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-steps__row-line-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: inline-flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex: 1;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-steps__column-line-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-steps__row-line {
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background-color: #B7BDC6;
|
||||
}
|
||||
|
||||
.uni-steps__column-line {
|
||||
width: 1px;
|
||||
background-color: #B7BDC6;
|
||||
}
|
||||
|
||||
.uni-steps__row-line--after {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
.uni-steps__column-line--after {
|
||||
flex: 1;
|
||||
transform: translate(0px, 1px);
|
||||
}
|
||||
|
||||
.uni-steps__row-line--before {
|
||||
transform: translateX(-1px);
|
||||
}
|
||||
|
||||
.uni-steps__column-line--before {
|
||||
height: 6px;
|
||||
transform: translate(0px, -13px);
|
||||
}
|
||||
|
||||
.uni-steps__row-circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: #B7BDC6;
|
||||
margin: 0px 3px;
|
||||
}
|
||||
|
||||
.uni-steps__column-circle {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: #B7BDC6;
|
||||
margin: 4px 0px 5px 0px;
|
||||
}
|
||||
|
||||
.uni-steps__row-check {
|
||||
margin: 0px 6px;
|
||||
}
|
||||
|
||||
.uni-steps__column-check {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin: 2px 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
{
|
||||
"id": "uni-steps",
|
||||
"displayName": "uni-steps 步骤条",
|
||||
"version": "1.1.1",
|
||||
"description": "步骤条组件，提供横向和纵向两种布局格式。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"步骤条",
|
||||
"时间轴"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"前端组件",
|
||||
"通用组件"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-icons"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
|
||||
## Steps 步骤条
|
||||
> **组件名：uni-steps**
|
||||
> 代码块： `uSteps`
|
||||
|
||||
|
||||
步骤条，常用于显示进度
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-steps)
|
||||
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
|
||||
|
||||
|
||||
Loading…
Reference in New Issue