9.20 界面502

This commit is contained in:
2025-09-20 22:09:15 +08:00
parent 44ac2723a0
commit 3894cc1c57
38 changed files with 411 additions and 241 deletions

View File

@@ -113,7 +113,7 @@ const _sfc_main = {
},
goDetail() {
try {
common_vendor.index.__f__("log", "at pages/index/index.vue:176", "[index] goDetail → /pages/detail/index");
common_vendor.index.__f__("log", "at pages/index/index.vue:177", "[index] goDetail → /pages/detail/index");
} catch (e) {
}
common_vendor.index.switchTab({ url: "/pages/detail/index" });
@@ -135,15 +135,11 @@ const _sfc_main = {
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return common_vendor.e({
a: common_vendor.t($data.kpi.todaySales),
b: common_vendor.t($data.kpi.monthSales),
c: common_vendor.t($data.kpi.monthProfit),
d: common_vendor.t($data.kpi.stockCount),
e: $data.loadingNotices
a: $data.loadingNotices
}, $data.loadingNotices ? {} : $data.noticeError ? {
g: common_vendor.t($data.noticeError)
c: common_vendor.t($data.noticeError)
} : !$data.notices.length ? {} : {
i: common_vendor.f($data.notices, (n, idx, i0) => {
e: common_vendor.f($data.notices, (n, idx, i0) => {
return common_vendor.e({
a: common_vendor.t(n.text),
b: n.tag
@@ -155,8 +151,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
});
})
}, {
f: $data.noticeError,
h: !$data.notices.length,
b: $data.noticeError,
d: !$data.notices.length,
f: common_vendor.t($data.kpi.todaySales),
g: common_vendor.t($data.kpi.monthSales),
h: common_vendor.t($data.kpi.monthProfit),
i: common_vendor.t($data.kpi.stockCount),
j: common_vendor.f($data.features, (item, k0, i0) => {
return common_vendor.e({
a: item.img

View File

@@ -1 +1 @@
<view class="home"><view class="hero"><view class="hero-top"><text class="brand">五金配件管家</text><view class="cta"><text class="cta-text">咨询</text></view></view><view class="kpi"><view class="kpi-item"><text class="kpi-label">今日销售额</text><text class="kpi-value">{{a}}</text></view><view class="kpi-item"><text class="kpi-label">本月销售额</text><text class="kpi-value">{{b}}</text></view><view class="kpi-item"><text class="kpi-label">本月利润</text><text class="kpi-value">{{c}}</text></view><view class="kpi-item"><text class="kpi-label">库存商品数量</text><text class="kpi-value">{{d}}</text></view></view></view><view class="notice"><view class="notice-left">广告</view><view wx:if="{{e}}" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a">加载中...</view><view wx:elif="{{f}}" class="notice-swiper" style="display:flex;align-items:center;color:#dd524d">{{g}}</view><view wx:elif="{{h}}" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a">暂无公告</view><swiper wx:else class="notice-swiper" circular autoplay interval="4000" duration="400" vertical><swiper-item wx:for="{{i}}" wx:for-item="n" wx:key="e"><view class="notice-item" bindtap="{{n.d}}"><text class="notice-text">{{n.a}}</text><text wx:if="{{n.b}}" class="notice-tag">{{n.c}}</text></view></swiper-item></swiper></view><view class="section-title"><text class="section-text">常用功能</text></view><view class="grid-wrap"><view class="grid"><view wx:for="{{j}}" wx:for-item="item" wx:key="g" class="grid-item" bindtap="{{item.h}}"><view class="icon icon-squircle"><image wx:if="{{item.a}}" src="{{item.b}}" class="icon-img" mode="aspectFit" binderror="{{item.c}}"></image><text wx:elif="{{item.d}}" class="icon-emoji">{{item.e}}</text><view wx:else class="icon-placeholder"></view></view><text class="grid-chip">{{item.f}}</text></view></view></view></view>
<view class="home"><view class="notice"><view class="notice-left">告</view><view wx:if="{{a}}" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a">加载中...</view><view wx:elif="{{b}}" class="notice-swiper" style="display:flex;align-items:center;color:#dd524d">{{c}}</view><view wx:elif="{{d}}" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a">暂无公告</view><swiper wx:else class="notice-swiper" circular autoplay interval="4000" duration="400" vertical><swiper-item wx:for="{{e}}" wx:for-item="n" wx:key="e"><view class="notice-item" bindtap="{{n.d}}"><text class="notice-text">{{n.a}}</text><text wx:if="{{n.b}}" class="notice-tag">{{n.c}}</text></view></swiper-item></swiper></view><view class="hero"><view class="hero-top"><text class="brand">五金配件管家</text><view class="cta"><text class="cta-text">咨询</text></view></view><view class="kpi"><view class="kpi-item"><text class="kpi-label">今日销售额</text><text class="kpi-value">{{f}}</text></view><view class="kpi-item"><text class="kpi-label">本月销售额</text><text class="kpi-value">{{g}}</text></view><view class="kpi-item"><text class="kpi-label">本月利润</text><text class="kpi-value">{{h}}</text></view><view class="kpi-item"><text class="kpi-label">库存商品数量</text><text class="kpi-value">{{i}}</text></view></view></view><view class="section-title"><text class="section-text">常用功能</text></view><view class="grid-wrap"><view class="feature-grid"><view wx:for="{{j}}" wx:for-item="item" wx:key="g" class="feature-card" bindtap="{{item.h}}"><view class="fc-icon"><image wx:if="{{item.a}}" src="{{item.b}}" class="fc-img" mode="aspectFit" binderror="{{item.c}}"></image><text wx:elif="{{item.d}}" class="fc-emoji">{{item.e}}</text><view wx:else class="fc-placeholder"></view></view><view class="fc-title">{{item.f}}</view></view></view></view></view>

View File

@@ -142,13 +142,19 @@
font-weight: 700;
letter-spacing: 1rpx;
}
/* KPI 卡片化布局2×2 */
.kpi {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8rpx;
grid-template-columns: repeat(2, 1fr);
gap: 16rpx;
}
.kpi-item {
text-align: center;
background: #ffffff;
border: 2rpx solid #e5e7eb;
border-radius: 16rpx;
padding: 16rpx 8rpx;
}
.kpi-label {
opacity: 0.9;
@@ -171,6 +177,33 @@
color: #4C8DFF;
}
/* 常用功能:胶囊+阴影卡片样式的图标栅格(旧风格保留以防回退) */
.grid {
grid-row-gap: 36rpx;
grid-column-gap: 26rpx;
padding: 32rpx 24rpx 28rpx;
}
.grid-item {
position: relative;
}
.icon-squircle {
width: 140rpx;
height: 140rpx;
border-radius: 28rpx;
background: #fff;
border: 2rpx solid #e5e7eb;
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.06);
}
.grid-chip {
margin-top: 12rpx;
padding: 6rpx 14rpx;
border-radius: 999rpx;
background: rgba(76, 141, 255, 0.12);
color: #4C8DFF;
font-size: 26rpx;
font-weight: 700;
}
/* 功能容器:整体玻璃面板,增强融入感 */
.grid-wrap {
margin: 0 20rpx 32rpx;
@@ -181,77 +214,51 @@
box-shadow: none;
}
/* 功能九宫格 */
.grid {
/* 新版功能卡片宫格(更现代卡片风) */
.feature-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 64rpx;
grid-column-gap: 36rpx;
padding: 40rpx 28rpx 28rpx;
grid-template-columns: repeat(2, 1fr);
gap: 18rpx;
padding: 18rpx 18rpx 24rpx;
}
.grid-item {
.feature-card {
background: #fff;
border: 2rpx solid #e5e7eb;
border-radius: 16rpx;
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.06);
padding: 18rpx;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12rpx;
}
.icon {
.fc-icon {
width: 96rpx;
height: 96rpx;
border-radius: 16rpx;
background: #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
}
.fc-img {
width: 72rpx;
height: 72rpx;
}
.fc-emoji {
font-size: 56rpx;
}
.fc-placeholder {
width: 72rpx;
height: 72rpx;
border-radius: 12rpx;
background: #f1f1f1;
border: 2rpx solid #e5e7eb;
}
.fc-title {
margin-left: 2rpx;
font-size: 30rpx;
font-weight: 700;
color: #111;
position: relative;
}
.icon-squircle {
width: 132rpx;
height: 132rpx;
border-radius: 28rpx;
background: #f1f1f1;
border: 2rpx solid #e5e7eb;
box-shadow: none;
overflow: hidden;
}
.icon-squircle::before {
content: "";
position: absolute;
left: -30%;
top: -40%;
width: 160%;
height: 70%;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
transform: rotate(12deg);
}
.icon-img {
width: 96rpx;
height: 96rpx;
}
.icon-emoji {
font-size: 60rpx;
line-height: 1;
}
.icon-placeholder {
width: 84rpx;
height: 84rpx;
border-radius: 18rpx;
background: #f1f1f1;
border: 2rpx solid #e5e7eb;
box-shadow: none;
}
.icon-text {
font-size: 46rpx;
font-weight: 700;
}
.grid-title {
display: none;
}
.grid-chip {
margin-top: 14rpx;
padding: 8rpx 16rpx;
border-radius: 999rpx;
background: #4C8DFF;
color: #fff;
font-size: 28rpx;
font-weight: 700;
}
/* 底部操作条:浅色半透明 + 金色主按钮 */