TONASPACE/PartsInquiry
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

9.20 界面502

Browse Source
This commit is contained in:
linlin
2025-09-20 22:09:15 +08:00
parent 44ac2723a0
commit 3894cc1c57
38 changed files with 411 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
frontend/pages/index/index.vue
View File

@@ -1,5 +1,20 @@
<template>
<view class="home">
<!-- 公告栏：置顶显示，可点击查看详情 -->
<view class="notice">
<view class="notice-left">公告</view>
<view v-if="loadingNotices" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a;">加载中...</view>
<view v-else-if="noticeError" class="notice-swiper" style="display:flex;align-items:center;color:#dd524d;">{{ noticeError }}</view>
<view v-else-if="!notices.length" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a;">暂无公告</view>
<swiper v-else class="notice-swiper" circular autoplay interval="4000" duration="400" vertical>
<swiper-item v-for="(n, idx) in notices" :key="idx">
<view class="notice-item" @click="onNoticeTap(n)">
<text class="notice-text">{{ n.text }}</text>
<text v-if="n.tag" class="notice-tag">{{ n.tag }}</text>
</view>
</swiper-item>
</swiper>
</view>
<!-- 顶部统计卡片 -->
<view class="hero">
<view class="hero-top">
@@ -28,21 +43,7 @@
</view>
</view>
<!-- 广告栏：自动轮播，可点击查看详情 -->
<view class="notice">
<view class="notice-left">广告</view>
<view v-if="loadingNotices" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a;">加载中...</view>
<view v-else-if="noticeError" class="notice-swiper" style="display:flex;align-items:center;color:#dd524d;">{{ noticeError }}</view>
<view v-else-if="!notices.length" class="notice-swiper" style="display:flex;align-items:center;color:#6b5a2a;">暂无公告</view>
<swiper v-else class="notice-swiper" circular autoplay interval="4000" duration="400" vertical>
<swiper-item v-for="(n, idx) in notices" :key="idx">
<view class="notice-item" @click="onNoticeTap(n)">
<text class="notice-text">{{ n.text }}</text>
<text v-if="n.tag" class="notice-tag">{{ n.tag }}</text>
</view>
</swiper-item>
</swiper>
</view>
<!-- 公告栏（已上移到顶部） -->
<!-- 分割标题：产品与功能 -->
<view class="section-title">
@@ -51,14 +52,14 @@
<!-- 功能九宫格（玻璃容器 + 圆角方形图标） -->
<view class="grid-wrap">
<view class="grid">
<view class="grid-item" v-for="item in features" :key="item.key" @click="onFeatureTap(item)">
<view class="icon icon-squircle">
<image v-if="item.img" :src="item.img" class="icon-img" mode="aspectFit" @error="onIconError(item)"></image>
<text v-else-if="item.emoji" class="icon-emoji">{{ item.emoji }}</text>
<view v-else class="icon-placeholder"></view>
<view class="feature-grid">
<view class="feature-card" v-for="item in features" :key="item.key" @click="onFeatureTap(item)">
<view class="fc-icon">
<image v-if="item.img" :src="item.img" class="fc-img" mode="aspectFit" @error="onIconError(item)"></image>
<text v-else-if="item.emoji" class="fc-emoji">{{ item.emoji }}</text>
<view v-else class="fc-placeholder"></view>
</view>
<text class="grid-chip">{{ item.title }}</text>
<view class="fc-title">{{ item.title }}</view>
</view>
</view>
</view>
@@ -271,8 +272,9 @@
.cta-text { color: #fff; font-size: 30rpx; font-weight: 700; letter-spacing: 1rpx; }
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8rpx; }
.kpi-item { text-align: center; }
/* KPI 卡片化布局：2×2 */
.kpi { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16rpx; }
.kpi-item { text-align: center; background:#ffffff; border: 2rpx solid $uni-border-color; border-radius: 16rpx; padding: 16rpx 8rpx; }
.kpi-label {
opacity: 0.9;
font-size: 26rpx;
@@ -286,6 +288,13 @@
}
.kpi-value { display: block; margin-top: 8rpx; font-size: 56rpx; font-weight: 800; color: $uni-color-primary; }
/* 常用功能：胶囊+阴影卡片样式的图标栅格（旧风格保留以防回退） */
.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 $uni-border-color; 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: $uni-color-primary; font-size: 26rpx; font-weight: 700; }
/* 功能容器：整体玻璃面板，增强融入感 */
.grid-wrap {
margin: 0 20rpx 32rpx;
@@ -296,32 +305,14 @@
box-shadow: none;
}
/* 功能九宫格 */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-row-gap: 64rpx;
grid-column-gap: 36rpx;
padding: 40rpx 28rpx 28rpx;
}
.grid-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.icon { display: flex; align-items: center; justify-content: center; color: $uni-text-color; position: relative; }
.icon-squircle {
width: 132rpx; height: 132rpx;
border-radius: 28rpx;
background: $uni-bg-color-hover;
border: 2rpx solid $uni-border-color;
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.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: $uni-bg-color-hover; border: 2rpx solid $uni-border-color; 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: $uni-color-primary; color: #fff; font-size: 28rpx; font-weight: 700; }
/* 新版功能卡片宫格（更现代卡片风） */
.feature-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18rpx; padding: 18rpx 18rpx 24rpx; }
.feature-card { background:#fff; border:2rpx solid $uni-border-color; border-radius: 16rpx; box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.06); padding: 18rpx; display:flex; align-items:center; gap: 12rpx; }
.fc-icon { width: 96rpx; height: 96rpx; border-radius: 16rpx; background: $uni-bg-color-hover; 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: $uni-bg-color-hover; border: 2rpx solid $uni-border-color; }
.fc-title { margin-left: 2rpx; font-size: 30rpx; font-weight: 700; color: $uni-text-color; }
/* 底部操作条：浅色半透明 + 金色主按钮 */
.bottom-bar {