Skip to content

梁建民 / wmsApp

Go to a project
Commit 10d96af8 by liangjianmin
Options

style(search): 优化搜索框图标显示和样式调整 

- 修改搜索框中搜索图标的样式类名，提高图标显示准确性
- 调整清除图标的显示条件，支持输入值为空时也能显示清除按钮
- 优化扫描扫码功能点击响应逻辑，确保扫码功能正常触发
- 新增理货操作区域样式，保持与 tallyReceive/operate 样式一致
- 整体样式调整，提升界面统一性和用户体验
parent 8145374b
Expand all
Inline Side-by-side
Showing with 319 additions and 2 deletions
assets/css/scanTally/index.scss
...@@ -210,6 +210,323 @@ ...@@ -210,6 +210,323 @@
} }
} }
// 理货操作区域（与 tallyReceive/operate 样式一致）
.tally-operate-section {
padding: 100rpx 15rpx 0 15rpx;
.section {
margin-top: 15rpx;
padding: 18rpx 22rpx 100px 22rpx;
background-color: #ffffff;
.field-item {
position: relative;
flex-wrap: wrap;
.is-watch {
position: absolute;
right: 0;
top: 109rpx;
width: 40rpx;
height: 40rpx;
font-size: 12rpx;
color: #000;
border: 1px solid #1969f9;
border-radius: 50%;
opacity: 0.8;
}
.item {
flex: 0 0 50%;
margin-bottom: 8rpx;
.label {
width: 98rpx;
font-size: 16rpx;
color: #919399;
}
.text {
font-size: 16rpx;
color: #1969f9;
margin-left: 6rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 176rpx;
}
.tt {
font-size: 16rpx;
color: #484b59;
margin-left: 6rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 176rpx;
}
.desc {
font-size: 16rpx;
color: #484b59;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
margin-left: 6rpx;
}
}
}
.bor {
height: 1px;
background-color: #f0f0f2;
margin-bottom: 17rpx;
}
.item-tit {
font-size: 20rpx;
color: #292b33;
margin-bottom: 18rpx;
transition: all 0.2s ease;
text:first-child {
margin-right: 32rpx;
}
.curr {
position: relative;
color: #1969f9;
font-weight: bold;
&::after {
content: '';
background-color: #1969f9;
width: 51%;
height: 2px;
position: absolute;
bottom: -10rpx;
left: 0;
right: 0;
margin: 0 auto;
}
}
}
.form-input {
.tally-tips-row {
margin-bottom: 10rpx;
}
.input-title {
margin-bottom: 10rpx;
.input-title-t1 {
font-size: 16rpx;
color: #f00;
font-weight: bold;
margin-right: 5rpx;
}
.input-title-t2 {
font-size: 16rpx;
color: #484b59;
font-weight: bold;
}
}
.input-box-wrap {
margin-bottom: 17rpx;
.input-box {
.uni-input {
width: 278rpx;
height: 43rpx;
background: #ffffff;
border-radius: 10rpx;
border: 1px solid #1969f9;
text-indent: 15rpx;
font-size: 16rpx;
}
}
.pick-box {
position: relative;
.uni-input {
width: 278rpx;
height: 43rpx;
line-height: 43rpx;
background: #ffffff;
border-radius: 10rpx;
border: 1px solid #1969f9;
text-indent: 15rpx;
font-size: 16rpx;
}
.uni-arrow {
position: absolute;
right: 13rpx;
top: 18rpx;
width: 14rpx;
height: 9rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/10/e4c72319ad41ce1425f71cc6ec35f111.png') no-repeat center;
background-size: contain;
margin-left: 12rpx;
}
}
}
}
.h2 {
font-size: 17rpx;
color: #484b59;
font-weight: bold;
margin-bottom: 10rpx;
.tt {
font-size: 17rpx;
color: #919399;
font-weight: normal;
}
.num {
.t1 {
font-size: 13rpx;
color: #1969f9;
}
.t2 {
font-size: 13rpx;
color: #919399;
}
}
}
.pic-list {
flex-wrap: wrap;
margin-bottom: 18rpx;
.default {
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
.iconfont {
font-size: 60rpx;
color: #c6c7cc;
}
}
.box {
position: relative;
width: 120rpx;
height: 120rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 15rpx;
margin-bottom: 15rpx;
image {
width: 120rpx;
height: 120rpx;
}
.iconfont {
position: absolute;
right: 0;
top: 0;
font-size: 30rpx;
color: #ff3700;
z-index: 9;
}
}
}
.print {
margin-bottom: 27rpx;
.check-box-icon {
width: 20rpx;
height: 20rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/11/0bf30da3e8ce6c476c210173b5f13d51.png') no-repeat center;
background-size: contain;
display: block;
&.curr {
background: url('https://img.ichunt.com/images/ichunt/202304/11/71a74e52e94bcf2e89f8df9817d494c6.png') no-repeat center;
background-size: contain;
}
}
.tt {
font-size: 17rpx;
color: #484b59;
margin-left: 10rpx;
}
}
.textarea-box {
width: 100%;
textarea {
width: 100%;
height: 85rpx;
padding: 10rpx 15rpx;
background: #f5f5f7;
border-radius: 10rpx;
font-size: 16rpx;
box-sizing: border-box;
}
}
}
.fix-btn {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
z-index: 999;
.btn1 {
width: 40%;
height: 75rpx;
background: #ffffff;
.check-box-icon {
width: 20rpx;
height: 20rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/11/0bf30da3e8ce6c476c210173b5f13d51.png') no-repeat center;
background-size: contain;
display: block;
&.curr {
background: url('https://img.ichunt.com/images/ichunt/202304/11/71a74e52e94bcf2e89f8df9817d494c6.png') no-repeat center;
background-size: contain;
}
}
.text {
margin-left: 10rpx;
font-size: 20rpx;
color: #484b59;
}
}
.btn2 {
width: 60%;
height: 75rpx;
background: #1969f9;
font-size: 23rpx;
color: #ffffff;
}
}
}
.popup-content-sn { .popup-content-sn {
background-color: #f1f4f6; background-color: #f1f4f6;
padding: 28rpx 24rpx 24rpx 24rpx; padding: 28rpx 24rpx 24rpx 24rpx;
......
components/SearchBoxWithPicker.vue
...@@ -13,10 +13,10 @@ ...@@ -13,10 +13,10 @@
<!-- 搜索输入框区域 --> <!-- 搜索输入框区域 -->
<view class="input-wrapper row bothSide verCenter" :class="{ 'full-width': !showPicker }"> <view class="input-wrapper row bothSide verCenter" :class="{ 'full-width': !showPicker }">
<view class="input-content row verCenter"> <view class="input-content row verCenter">
<text class="search-icon iconfont icon-juxing11" @click="handleSearchIconClick"></text> <text class="search-icon iconfont icon-juxing1" @click="handleSearchIconClick"></text>
<input class="search-input" :placeholder="placeholder" :placeholder-style="placeholderStyle" :focus="inputFocus" v-model="inputValue" @input="handleInput" maxlength="-1" /> <input class="search-input" :placeholder="placeholder" :placeholder-style="placeholderStyle" :focus="inputFocus" v-model="inputValue" @input="handleInput" maxlength="-1" />
</view> </view>
<text class="clear-icon iconfont icon-a-juxing111" @click="handleClearInput" v-if="showClearIcon"></text> <text class="clear-icon iconfont icon-a-juxing11" @click="handleClearInput" v-if="showClearIcon || !!inputValue"></text>
</view> </view>
</view> </view>
</template> </template>
......
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 sign in to comment