Skip to content

梁建民 / scm_app

Go to a project
Commit 43665c07 by liangjianmin
Options

Update tab bar colors and icons; remove unused images and skeleton styles from home page.

parent 12ee6249
Inline Side-by-side
Showing with 9 additions and 273 deletions
assets/css/home/index.scss
......@@ -3,88 +3,6 @@
padding-bottom: 158rpx;
background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-line {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 8rpx;
}
.skeleton-head {
padding: 24rpx 28rpx;
min-height: 140rpx;
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
border-radius: 0 0 24rpx 24rpx;
display: flex;
align-items: center;
.skeleton-avatar {
width: 100rpx;
height: 100rpx;
border-radius: 50%;
background: linear-gradient(90deg, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.2) 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
margin-right: 20rpx;
}
.skeleton-info {
flex: 1;
.skeleton-name {
width: 160rpx;
height: 32rpx;
margin-bottom: 12rpx;
background: linear-gradient(90deg, rgba(255,255,255,0.2) 25%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.2) 75%);
background-size: 200% 100%;
}
.skeleton-email {
width: 240rpx;
height: 24rpx;
background: linear-gradient(90deg, rgba(255,255,255,0.15) 25%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.15) 75%);
background-size: 200% 100%;
}
}
}
.skeleton-list {
margin-top: 24rpx;
padding: 0 24rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24rpx 16rpx;
.skeleton-item {
display: flex;
flex-direction: column;
align-items: center;
.skeleton-icon {
width: 100%;
height: 128rpx;
background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 16rpx;
border: 1px solid rgba(226, 232, 240, 0.6);
}
.skeleton-text {
width: 75%;
height: 24rpx;
margin-top: 16rpx;
background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
background-size: 200% 100%;
}
}
}
.head {
padding: 24rpx 28rpx;
min-height: 140rpx;
......@@ -221,110 +139,4 @@
}
}
.list {
margin-top: 24rpx;
padding: 0 24rpx;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24rpx 16rpx;
.box-li {
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
&:active {
transform: scale(0.96);
}
.box {
position: relative;
width: 100%;
height: 128rpx;
background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
border-radius: 16rpx;
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04),
0 4rpx 16rpx rgba(37, 99, 235, 0.03);
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.25s ease;
pointer-events: none;
}
image {
width: 72rpx;
height: 72rpx;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.exception-count {
position: absolute;
top: 10rpx;
right: 10rpx;
min-width: 36rpx;
height: 36rpx;
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
border-radius: 18rpx;
font-size: 20rpx;
font-weight: 600;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10rpx;
box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.35);
animation: badge-pulse 2s infinite;
}
}
.text {
margin-top: 16rpx;
font-size: 24rpx;
font-weight: 500;
color: #1e293b;
text-align: center;
letter-spacing: 0.5rpx;
line-height: 1.3;
transition: color 0.2s ease;
}
&:active .box {
border-color: rgba(37, 99, 235, 0.2);
box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.02);
&::before {
opacity: 1;
}
}
&:active .box image {
transform: scale(1.08);
}
&:active .text {
color: #2563eb;
}
}
}
@keyframes badge-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 4rpx 12rpx rgba(249, 115, 22, 0.35);
}
50% {
transform: scale(1.05);
box-shadow: 0 6rpx 16rpx rgba(249, 115, 22, 0.45);
}
}
}
\ No newline at end of file
pages.json
......@@ -28,28 +28,28 @@
}
],
"tabBar": {
"color": "#999999",
"selectedColor": "#d2a45f",
"color": "#6E767A",
"selectedColor": "#197ADB",
"backgroundColor": "#ffffff",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/home/index",
"text": "首页",
"iconPath": "static/rec-reg.png",
"selectedIconPath": "static/rec-reg.png"
"iconPath": "static/home.png",
"selectedIconPath": "static/home-sel.png"
},
{
"pagePath": "pages/apply/index",
"text": "发起申请",
"iconPath": "static/yujin.png",
"selectedIconPath": "static/yujin.png"
"iconPath": "static/apply.png",
"selectedIconPath": "static/apply-sel.png"
},
{
"pagePath": "pages/approve/index",
"text": "审批列表",
"iconPath": "static/huidanshangchuan.png",
"selectedIconPath": "static/huidanshangchuan.png"
"iconPath": "static/audit.png",
"selectedIconPath": "static/audit-sel.png"
}
]
},
......
pages/home/index.vue
......@@ -30,82 +30,7 @@
</view>
</view>
</view>
<view class="list row" v-if="!loading && info.user_info">
<navigator class="box-li column rowCenter verCenter" url="/pages/stockIn/registerGoodsReceipt" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/rec-reg.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">收货登记</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/stockIn/quickStockIn" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/rukudan.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">快捷入库</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/tally/index" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/hexianglihuotiqu.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">按箱理货</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/stockIn/tallyList" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/lidanlihuo_n.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">按单理货</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/tally/scanTally" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/saomalihuo.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">扫码理货</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/tally/abnormalTally" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/shangpinguanli.png" mode="aspectFit" lazy-load></image>
<view v-if="stock_in_task_num > 0" class="exception-count">{{ stock_in_task_num }}</view>
</view>
<text class="text">美产/商检管理</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/tally/abnormalManageList" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/yichangguanli.png" mode="aspectFit" lazy-load></image>
<view v-if="abnormal_num > 0" class="exception-count">{{ abnormal_num }}</view>
</view>
<text class="text">异常管理</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/tally/unboxing" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/kaixiang.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">重新开箱</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/tally/fixBox" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/hexiang.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">合箱</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/tally/goods" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/huopinchaxun.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">货品查询</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/stockOut/quickStockOut" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/chukuguanli.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">快捷出库</text>
</navigator>
<navigator class="box-li column rowCenter verCenter" url="/pages/stockOut/stockOutReceiptUpload" hover-class="none">
<view class="box row rowCenter verCenter">
<image src="/static/huidanshangchuan.png" mode="aspectFit" lazy-load></image>
</view>
<text class="text">快递回单上传</text>
</navigator>
</view>
</view>
</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