当前位置:   article > 正文

uniapp Uview step步骤图 写自己的样式(如图)_u-steps自定义图片

u-steps自定义图片

请添加图片描述
如下是代码:

<template>
	<view class="reportDetails">
		<view class="DetailsBox">
			<u-steps current="0" inactiveColor='#FFFFFF' :inactiveIcon="inactiveIcon" :activeIcon='activeIcon'
				direction="column">
				<u-steps-item v-for="(item,index) in stepList" :key='index'>
					<view class="descBox" slot="desc">
						<view class="stepTitle">
							<view :class="item.stat=='0'?'titText':'titTextGary'">{{item.statVal}}</view>
							<view class="titDate">{{item.date}}</view>
						</view>
						<view class="desc">
							<view class="item_row" v-if="item.workName">
								<view class="item_title">
									工作人员
								</view>
								<view class="item_cont">
									<view class="name">
										{{item.workName}}
									</view>
									<view class="phoneBox">
										{{item.phone}}
										<img class='image' src="../../../../static/faultReport/phone.png" alt="电话">
									</view>
								</view>
							</view>
							<view class="item_row" v-if="item.decs">
								<view class="item_title">
									跟进描述
								</view>
								<view class="item_cont">
									{{item.decs}}
								</view>
							</view>
							<view class="item_row" v-if="item.reportType">
								<view class="item_title">
									报修类别
								</view>
								<view class="item_cont">
									{{item.reportType}}
								</view>
							</view>
							<view class="img_row" v-if="item.imagSrc">
								<view class="textHidden">
									隐藏文字
								</view>
								<view class="item_img">
									<img class='Preview' :src="i.src" alt="图片" v-for="(i,index) in item.imagSrc"
										:key="index">
								</view>
							</view>
						</view>
					</view>
				</u-steps-item>
			</u-steps>
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				stepList: [{
						id: '0',
						stat: '0',
						statVal: '代缴费',
						date: '2022.08.13 13:20:28',
						workName: '唐小鸭',
						phone: '19996554658',
						decs: 'sdafdsdafsd',
						reportType: '电维修',
						imagSrc: [{
								src: '../../../../static/faultReport/phone.png'
							},
							{
								src: '../../../../static/faultReport/phone.png'
							},
							{
								src: '../../../../static/faultReport/phone.png'
							},
							{
								src: '../../../../static/faultReport/phone.png'
							},
						]
					},
					{
						id: '1',
						stat: '1',
						statVal: '已跟进',
						date: '2022.08.13 13:20:28',
						workName: '唐小鸭1',
						phone: '19996554228',
						decs: 'sdafdsdafsd',
						imagSrc: [{
							src: '../../../../static/faultReport/phone.png'
						}]
					},
					{
						id: '2',
						stat: '2',
						statVal: '已派单',
						date: '2022.08.13 13:20:28',
						workName: '唐小鸭2',
						phone: '19996554658',
					},
				],
				activeIcon: '../../../../static/faultReport/activation.png',
				inactiveIcon: '../../../../static/faultReport/inactive.png'
			};
		},
		methods: {

		},
	}
</script>

<style lang="scss" scoped>
	.reportDetails {
		width: 100%;
		min-height: calc(100vh - 88rpx);
		background-color: #E2E7F5;
		padding: 60rpx 40rpx 20rpx 50rpx;
		box-sizing: border-box;

		.DetailsBox {
			width: 100%;
			// height: 500rpx;
			box-sizing: border-box;


			.descBox {
				width: 100%;
				margin-bottom: 50rpx;

				.stepTitle {
					width: 100%;
					padding-left: 20rpx;
					display: flex;
					justify-content: space-between;
					box-sizing: border-box;

					.titText {
						width: 120rpx;
						height: 46rpx;
						background: #D2DFF7;
						border-radius: 0rpx 30rpx 0rpx 30rpx;
						text-align: center;
						font-size: 26rpx;
						font-weight: 400;
						line-height: 46rpx;
						color: #307AF0;
					}

					.titTextGary {
						width: 120rpx;
						height: 46rpx;
						background: #CFD5E2;
						border-radius: 0rpx 30rpx 0rpx 30rpx;
						text-align: center;
						font-size: 26rpx;
						font-weight: 400;
						line-height: 46rpx;
						color: #333333;
						;
					}

					.titDate {
						height: 46rpx;
						line-height: 46rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
					}
				}

				.desc {
					border-radius: 30rpx;
					padding: 20rpx 30rpx 40rpx 30rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					margin-top: 20rpx;

					.item_row {
						width: 100%;
						display: flex;
						font-size: 28rpx;
						margin-top: 20rpx;

						.item_title {
							font-weight: 400;
							color: #999999;
							font-size: 28rpx;
							margin-right: 20rpx;
						}


						.item_cont {
							height: 100%;
							color: #333333;
							display: flex;

							.name {
								font-weight: 600;
							}

							.phoneBox {
								height: 100%;
								font-weight: 400;
								display: flex;
								align-items: center;
								margin-left: 30rpx;

								.image {
									width: 48rpx;
									height: 48rpx;
								}
							}
						}
					}

					.img_row {
						width: 100%;
						display: flex;
						margin-top: 10rpx;

						.textHidden {
							font-weight: 400;
							color: #999999;
							font-size: 28rpx;
							margin-right: 20rpx;
							padding-top: 10rpx;
							opacity: 0;
						}

						.item_img:after {
							content: "";
							width: 30%;
						}

						.item_img {
							width: 418rpx;
							box-sizing: border-box;
							display: flex;
							justify-content: space-between;
							flex-wrap: wrap;

							.Preview {
								width: 130rpx;
								height: 130rpx;
								border: 1rpx solid;
								border-radius: 10rpx;
								margin-top: 20rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
<style>
	/deep/ .u-steps-item__wrapper {
		background-color: #E2E7F5;
	}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/251077
推荐阅读
相关标签
  

闽ICP备14008679号