Skip to content

梁建民 / wmsApp

Go to a project
Commit 1b365cc1 by liangjianmin
Options

style(scanTally, SearchBoxWithPicker): 调整样式以提升界面一致性和可读性 

- 更新 scanTally 页面中多个文本和按钮的字体大小及布局，增强视觉效果
- 修改 SearchBoxWithPicker 组件的样式，提升搜索框和选择器的可用性
- 统一调整相关元素的高度和间距，改善用户体验
parent e511c4b1
Inline Side-by-side
Showing with 90 additions and 89 deletions
assets/css/scanTally/index.scss
......@@ -18,7 +18,7 @@
border-radius: 10rpx;
.task-inhouse {
font-size: 26rpx;
font-size: 32rpx;
font-weight: 600;
color: #1969f9;
}
......@@ -32,12 +32,12 @@
background: #f0f5ff;
.task-tag-label {
font-size: 20rpx;
font-size: 26rpx;
color: #666;
}
.task-tag-value {
font-size: 24rpx;
font-size: 30rpx;
font-weight: 600;
color: #1969f9;
}
......@@ -65,7 +65,7 @@
.tip {
color: red;
font-size: 17rpx;
font-size: 24rpx;
margin-top: 28rpx;
}
......@@ -76,12 +76,12 @@
position: absolute;
left: 0;
top: 0;
font-size: 30rpx;
font-size: 36rpx;
color: #292b33;
}
.text {
font-size: 23rpx;
font-size: 30rpx;
color: #292b33;
font-weight: bold;
}
......@@ -96,13 +96,13 @@
margin-bottom: 8rpx;
.label {
font-size: 16rpx;
font-size: 24rpx;
color: #919399;
white-space: nowrap;
}
.tt {
font-size: 17rpx;
font-size: 26rpx;
color: #484b59;
margin-left: 6rpx;
white-space: nowrap;
......@@ -121,7 +121,7 @@
.label {
width: 24%;
font-size: 16rpx;
font-size: 24rpx;
color: #919399;
&.required:before {
......@@ -133,7 +133,7 @@
.select-box {
position: relative;
width: 76%;
height: 45rpx;
height: 56rpx;
.uni-arrow {
position: absolute;
......@@ -146,11 +146,11 @@
.uni-input {
width: 100%;
height: 45rpx;
height: 56rpx;
background: #ffffff;
border-radius: 10rpx;
border: 1px solid #1969f9;
font-size: 17rpx;
font-size: 26rpx;
padding-left: 18rpx;
}
}
......@@ -161,11 +161,11 @@
.uni-input {
width: 100%;
height: 45rpx;
height: 56rpx;
background: #ffffff;
border-radius: 10rpx;
border: 1px solid #1969f9;
font-size: 17rpx;
font-size: 26rpx;
padding-left: 18rpx;
}
}
......@@ -176,7 +176,7 @@
.label {
width: 24%;
font-size: 16rpx;
font-size: 24rpx;
color: #919399;
&.required:before {
......@@ -193,7 +193,7 @@
}
.uni-input {
font-size: 17rpx;
font-size: 26rpx;
}
}
......@@ -202,17 +202,17 @@
.uni-input {
width: 100%;
height: 45rpx;
height: 56rpx;
background: #ffffff;
border-radius: 10rpx;
border: 1px solid #1969f9;
font-size: 17rpx;
font-size: 26rpx;
padding-left: 18rpx;
}
.timesSymbol {
padding: 0 14rpx;
font-size: 24rpx;
font-size: 30rpx;
color: #292b33;
font-weight: bold;
}
......@@ -220,7 +220,7 @@
.unit {
margin-left: 10rpx;
color: #919399;
font-size: 25rpx;
font-size: 30rpx;
}
}
}
......@@ -238,16 +238,16 @@
width: 100%;
.btn1 {
height: 75rpx;
height: 80rpx;
background: #1969f9;
font-size: 23rpx;
font-size: 30rpx;
color: #ffffff;
}
.btn2 {
height: 75rpx;
height: 80rpx;
background: #ffe0d7;
font-size: 23rpx;
font-size: 30rpx;
color: #ff3700;
font-weight: bold;
}
......@@ -270,9 +270,9 @@
position: absolute;
right: 0;
top: 109rpx;
width: 40rpx;
height: 40rpx;
font-size: 12rpx;
width: 48rpx;
height: 48rpx;
font-size: 20rpx;
color: #000;
border: 1px solid #1969f9;
border-radius: 50%;
......@@ -284,13 +284,13 @@
margin-bottom: 8rpx;
.label {
width: 98rpx;
font-size: 16rpx;
width: 160rpx;
font-size: 24rpx;
color: #919399;
}
.text {
font-size: 16rpx;
font-size: 24rpx;
color: #1969f9;
margin-left: 6rpx;
white-space: nowrap;
......@@ -300,7 +300,7 @@
}
.tt {
font-size: 16rpx;
font-size: 24rpx;
color: #484b59;
margin-left: 6rpx;
white-space: nowrap;
......@@ -310,7 +310,7 @@
}
.desc {
font-size: 16rpx;
font-size: 24rpx;
color: #484b59;
overflow: hidden;
text-overflow: ellipsis;
......@@ -330,13 +330,14 @@
}
.item-tit {
font-size: 20rpx;
font-size: 32rpx;
color: #292b33;
margin-bottom: 18rpx;
margin-bottom: 28rpx;
padding: 10rpx 0;
transition: all 0.2s ease;
text:first-child {
margin-right: 32rpx;
margin-right: 48rpx;
}
.curr {
......@@ -367,14 +368,14 @@
margin-bottom: 10rpx;
.input-title-t1 {
font-size: 16rpx;
font-size: 24rpx;
color: #f00;
font-weight: bold;
margin-right: 5rpx;
}
.input-title-t2 {
font-size: 16rpx;
font-size: 24rpx;
color: #484b59;
font-weight: bold;
}
......@@ -386,12 +387,12 @@
.input-box {
.uni-input {
width: 278rpx;
height: 43rpx;
height: 56rpx;
background: #ffffff;
border-radius: 10rpx;
border: 1px solid #1969f9;
text-indent: 15rpx;
font-size: 16rpx;
font-size: 24rpx;
}
}
......@@ -400,13 +401,13 @@
.uni-input {
width: 278rpx;
height: 43rpx;
line-height: 43rpx;
height: 56rpx;
line-height: 56rpx;
background: #ffffff;
border-radius: 10rpx;
border: 1px solid #1969f9;
text-indent: 15rpx;
font-size: 16rpx;
font-size: 24rpx;
}
.uni-arrow {
......@@ -424,25 +425,25 @@
}
.h2 {
font-size: 17rpx;
font-size: 26rpx;
color: #484b59;
font-weight: bold;
margin-bottom: 10rpx;
.tt {
font-size: 17rpx;
font-size: 26rpx;
color: #919399;
font-weight: normal;
}
.num {
.t1 {
font-size: 13rpx;
font-size: 22rpx;
color: #1969f9;
}
.t2 {
font-size: 13rpx;
font-size: 22rpx;
color: #919399;
}
}
......@@ -494,8 +495,8 @@
margin-bottom: 27rpx;
.check-box-icon {
width: 20rpx;
height: 20rpx;
width: 28rpx;
height: 28rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/11/0bf30da3e8ce6c476c210173b5f13d51.png') no-repeat center;
background-size: contain;
display: block;
......@@ -507,7 +508,7 @@
}
.tt {
font-size: 17rpx;
font-size: 26rpx;
color: #484b59;
margin-left: 10rpx;
}
......@@ -518,11 +519,11 @@
textarea {
width: 100%;
height: 85rpx;
height: 100rpx;
padding: 10rpx 15rpx;
background: #f5f5f7;
border-radius: 10rpx;
font-size: 16rpx;
font-size: 24rpx;
box-sizing: border-box;
}
}
......@@ -541,8 +542,8 @@
background: #ffffff;
.check-box-icon {
width: 20rpx;
height: 20rpx;
width: 28rpx;
height: 28rpx;
background: url('https://img.ichunt.com/images/ichunt/202304/11/0bf30da3e8ce6c476c210173b5f13d51.png') no-repeat center;
background-size: contain;
display: block;
......@@ -555,16 +556,16 @@
.text {
margin-left: 10rpx;
font-size: 20rpx;
font-size: 28rpx;
color: #484b59;
}
}
.btn2 {
width: 60%;
height: 75rpx;
height: 80rpx;
background: #1969f9;
font-size: 23rpx;
font-size: 30rpx;
color: #ffffff;
}
}
......@@ -582,12 +583,12 @@
margin-bottom: 12rpx;
.order-sn {
font-size: 28rpx;
font-size: 32rpx;
color: #ff6600;
}
.goods-type {
font-size: 26rpx;
font-size: 30rpx;
margin-left: 24rpx;
.label {
......@@ -601,13 +602,13 @@
}
.tally-subtitle {
font-size: 26rpx;
font-size: 30rpx;
color: #333;
margin-bottom: 20rpx;
}
.tally-empty-tip {
font-size: 26rpx;
font-size: 30rpx;
color: #e64340;
line-height: 1.8;
padding: 40rpx 0 20rpx;
......@@ -628,19 +629,19 @@
.col-select {
width: 100rpx;
font-size: 24rpx;
font-size: 28rpx;
color: #6e767a;
}
.col-order {
flex: 1;
font-size: 24rpx;
font-size: 28rpx;
color: #6e767a;
}
.col-qty {
width: 150rpx;
font-size: 24rpx;
font-size: 28rpx;
color: #6e767a;
text-align: right;
}
......@@ -691,7 +692,7 @@
.col-order {
flex: 1;
font-size: 26rpx;
font-size: 30rpx;
color: #333;
&.highlight {
......@@ -702,7 +703,7 @@
.col-qty {
width: 150rpx;
font-size: 26rpx;
font-size: 30rpx;
color: #333;
text-align: right;
......@@ -722,11 +723,11 @@
.tally-btn {
flex: 1;
height: 64rpx;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-size: 32rpx;
border-radius: 8rpx;
transition: all 0.2s ease;
......
components/SearchBoxWithPicker.vue
......@@ -121,19 +121,19 @@
<style scoped lang="scss">
.search-box-container {
height: 60rpx;
height: 80rpx;
background: #ffffff;
border-radius: 10rpx;
padding: 0 18rpx;
.picker-wrapper {
width: 160rpx;
width: 180rpx;
height: 100%;
border-right: 1px solid #f0f0f2;
padding: 0 12rpx 0 0;
.picker-text {
font-size: 24rpx;
font-size: 30rpx;
color: #292b33;
font-weight: 600;
}
......@@ -141,9 +141,9 @@
.picker-arrow {
width: 0;
height: 0;
border-left: 8rpx solid transparent;
border-right: 8rpx solid transparent;
border-top: 11rpx solid #666;
border-left: 10rpx solid transparent;
border-right: 10rpx solid transparent;
border-top: 13rpx solid #666;
margin-left: 12rpx;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center 30%;
......@@ -169,7 +169,7 @@
}
.search-icon {
font-size: 30rpx;
font-size: 36rpx;
color: #919399;
margin-left: 10rpx;
margin-right: 14rpx;
......@@ -178,13 +178,13 @@
.search-input {
flex: 1;
font-size: 24rpx;
font-size: 30rpx;
color: #484b59;
height: 100%;
}
.clear-icon {
font-size: 30rpx;
font-size: 36rpx;
color: #c6c7cc;
margin-left: 10rpx;
flex-shrink: 0;
......
pages/scanTally/index.vue
......@@ -162,7 +162,7 @@
</view>
</view>
</view>
<view class="status-num row rowCenter verCenter" style="color: #1969f9;font-size: 23rpx;margin-top: 20rpx;">{{ swiperCurr + 1 }}/{{ zyGoodsData.length }}</view>
<view class="status-num row rowCenter verCenter" style="color: #1969f9;font-size: 30rpx;margin-top: 20rpx;">{{ swiperCurr + 1 }}/{{ zyGoodsData.length }}</view>
</view>
</swiper-item>
</swiper>
......@@ -243,22 +243,22 @@
</view>
<view class="item row verCenter">
<text class="label">采购员：</text>
<text class="tt">{{ tallyDetail.purchase_user }}/{{ tallyDetail.purchase_department_name }}</text>
<text class="desc" style="max-width: 491rpx;white-space: nowrap;">{{ tallyDetail.purchase_user }}/{{ tallyDetail.purchase_department_name }}</text>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;">
<text class="label">客户：</text>
<text class="text" style="font-weight: bold;max-width: 491rpx;">{{ tallyDetail.customer_name }}</text>
</view>
<view class="item row" style="flex: 0 0 100%;" v-if="tallyDetail.customer_material_number">
<text class="label" style="width: 112rpx;">客户物料编码：</text>
<text class="label" style="width: 150rpx;">客户物料编码：</text>
<text class="tt" style="max-width: 491rpx;">{{ tallyDetail.customer_material_number }}</text>
</view>
<view class="item row" style="flex: 0 0 100%;" v-if="tallyDetail.pack_requeire">
<text class="label" style="width: 112rpx;">包装要求：</text>
<text class="label" style="width: 150rpx;">包装要求：</text>
<text class="tt" style="max-width: 491rpx;color: red;">{{ tallyDetail.pack_requeire }}</text>
</view>
<view class="item row" style="flex: 0 0 100%;" v-if="tallyDetail.is_need_three_qc">
<text class="label" style="width: 112rpx;">需三方送检：</text>
<text class="label" style="width: 150rpx;">需三方送检：</text>
<text class="tt" style="max-width: 491rpx;color: red;">需三方送检</text>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;">
......@@ -277,7 +277,7 @@
<!-- 理货表单 -->
<view class="form-input">
<view class="tally-tips-row" v-if="tallyIsTips">
<text style="color: red;font-size:16rpx;">⚠注意：理货数与待理货数不一致</text>
<text style="color: red;font-size:24rpx;">⚠注意：理货数与待理货数不一致</text>
</view>
<view class="row bothSide verCenter input-box-wrap">
<view>
......@@ -346,7 +346,7 @@
</template>
<view class="default row rowCenter verCenter" @click="chooseTallyImage()" v-if="tallyImageList.length < maxImageCount"><text class="iconfont icon-a-juxing3"></text></view>
</view>
<p style="color: red;font-size: 17rpx;margin-bottom: 10rpx;" v-if="tallyDetail.is_watch == 1">选中包含有采购需看货的物料，建议上传理货照片！</p>
<p style="color: red;font-size: 24rpx;margin-bottom: 10rpx;" v-if="tallyDetail.is_watch == 1">选中包含有采购需看货的物料，建议上传理货照片！</p>
<view class="print row verCenter" @click="tallyPicFlag = !tallyPicFlag; tallyFormParams.is_mobile_default_img = tallyPicFlag ? 1 : 0;">
<text class="check-box-icon" :class="{ curr: tallyPicFlag }"></text>
<text class="tt">整单照片</text>
......@@ -379,27 +379,27 @@
<text class="tt">{{ tallyDetail.mpq }}</text>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;">
<text class="label" style="width: 128rpx;">单位长宽高：</text>
<text class="label" style="width: 180rpx;">单位长宽高：</text>
<text class="tt" style="max-width: 100%;">{{ tallyDetail.unit_length }}&nbsp;*{{ tallyDetail.unit_width }}&nbsp;*{{ tallyDetail.unit_high }}</text>
</view>
<view class="item row verCenter">
<text class="label" style="width: 113rpx;">单位净重：</text>
<text class="label" style="width: 160rpx;">单位净重：</text>
<text class="tt">{{ tallyDetail.unit_net_weight }}</text>
</view>
<view class="item row verCenter">
<text class="label" style="width: 113rpx;">单位毛重：</text>
<text class="label" style="width: 160rpx;">单位毛重：</text>
<text class="tt">{{ tallyDetail.unit_gross_weight }}</text>
</view>
<view class="item row verCenter" style="flex: 0 0 100%;">
<text class="label" style="width: 128rpx;">标准包装长宽高：</text>
<text class="label" style="width: 210rpx;">标准包装长宽高：</text>
<text class="tt" style="max-width: 100%;">{{ tallyDetail.standard_length }}&nbsp;*{{ tallyDetail.standard_width }}&nbsp;*{{ tallyDetail.standard_high }}</text>
</view>
<view class="item row verCenter">
<text class="label" style="width: 113rpx;">标准包装净重：</text>
<text class="label" style="width: 180rpx;">标准包装净重：</text>
<text class="tt">{{ tallyDetail.standard_net_weight }}</text>
</view>
<view class="item row verCenter">
<text class="label" style="width: 113rpx;">标准包装毛重：</text>
<text class="label" style="width: 180rpx;">标准包装毛重：</text>
<text class="tt">{{ tallyDetail.standard_gross_weight }}</text>
</view>
<view class="item row verCenter">
......
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