diff --git a/sub-government-affairs-service/src/layouts/component/Header/index.vue b/sub-government-affairs-service/src/layouts/component/Header/index.vue index 3ad7fdb..3f80024 100644 --- a/sub-government-affairs-service/src/layouts/component/Header/index.vue +++ b/sub-government-affairs-service/src/layouts/component/Header/index.vue @@ -1,10 +1,3 @@ - @@ -41,6 +118,8 @@ import { getAssetsFile } from '@/utils/index.js'; import { getMonitorList } from '@/apis/brand'; const activeTab = ref('onSale'); +const dialogVisible = ref(false); +const traceData = ref(null); const tabLabels = { onSale: '在售中', @@ -83,10 +162,52 @@ const products = ref([ // 根据当前 Tab 过滤 const filteredProducts = computed(() => products.value.filter((p) => p.status === activeTab.value)); -// 操作回调 -const onInspect = (p) => { - console.log('抽查商品', p); -}; +// 点击抽查后,根据 id 单独拉取或赋值 traceData +function onInspect(id) { + console.log('查看产品:', id); + // 这里用硬编码模拟请求,实际中可换成接口调用:getTraceById(id).then(res=> traceData.value = res) + const mock = { + productName: '无土栽培土豆', + quantity: '200KG', + producer: '北大荒技术有限公司', + origin: '耿马县孟定镇下坝村', + productionDate: '2025-1-2', + traceCode: '10.5487542154785XSE254.1040201', + traceCount: 30, + base: { + address: '耿马县孟定镇下坝村', + location: '东经102° · 北纬24°', + area: 12000, + climate: '亚热带高原季风型,温和多雨', + soil: '红壤', + }, + farmingRecords: [ + { date: '2024/1/2', operation: '播种 20250102批土豆种', operator: '张小东' }, + { date: '2024/2/2', operation: '施肥 氮肥', operator: '张小东' }, + { date: '2024/3/2', operation: '浇水', operator: '张小东' }, + { date: '2024/4/2', operation: '采摘', operator: '张小东' }, + ], + packaging: { + company: '瑞禾农产品包装公司', + type: '纸箱', + person: '王大福', + time: '2025-1-2 14:00:47', + }, + logistics: { + storageType: '冷藏', + temperature: '2°C', + shipFrom: '北京市朝阳区解放路24号', + shipTo: '上海市黄浦区南京路36号', + }, + trade: { + time: '2025-1-2 14:00:47', + buyer: '刘小花', + }, + img: 'images/brand/product6.png', + }; + traceData.value = mock; + dialogVisible.value = true; +} const onRevoke = (p) => { console.log('取消授权', p); }; @@ -191,5 +312,31 @@ const statusClass = (tab) => { } } } + + .trace-record { + position: relative; + padding-right: 160px; /* 给图片预留空间 */ + } + .trace-record .section { + margin-bottom: 16px; + } + .trace-record h3 { + margin-bottom: 8px; + font-size: 18px; + color: #409eff; + border-left: 4px solid #409eff; + padding-left: 8px; + } + .trace-img { + position: absolute; + top: 16px; + right: 16px; + width: 128px; + text-align: center; + } + .trace-img img { + width: 100%; + border-radius: 4px; + } } diff --git a/sub-operation-service/src/views/brand/index.vue b/sub-operation-service/src/views/brand/index.vue index 70ff13e..99fefad 100644 --- a/sub-operation-service/src/views/brand/index.vue +++ b/sub-operation-service/src/views/brand/index.vue @@ -3,16 +3,20 @@ - + 申请图标 使用申请 - - - 授权管理 - + + + 授权记录 + 品牌制度 + @@ -29,23 +33,30 @@ @@ -60,39 +71,40 @@ function handleSelect(index) { width: $width-main; margin: auto; .brand-aside-menu { - width: 240px; - background-color: $color-fff; - border-radius: 8px; - .aside-menu { - border-right: none; + background-color: #fff; + border-radius: 16px; + border-right: 0; + :deep(.el-menu-item), + :deep(.el-sub-menu__title) { + font-size: 18px !important; + margin: 8px 12px; + span { + margin-left: 8px; + } + .menu-icon { + width: 24px; + height: 24px; + } + } + + :deep(.el-sub-menu) { .el-menu-item { - height: 48px; - line-height: 48px; - margin: 4px 8px; - border-radius: 4px; - font-size: 20px; - font-weight: 400; - text-align: left; - &:hover { - background-color: #f5f7fa; - } - .el-icon { - color: #666; - margin-right: 12px; - font-size: 18px; - vertical-align: middle; - } - .menu-icon { - width: 1.5em; - height: 1.5em; - margin-right: 8px; - vertical-align: -0.15em; - } + font-size: 16px !important; + margin: 4px 12px; + line-height: 40px; span { - vertical-align: middle; + margin-left: 12px; } } } + + :deep(.is-active) { + > .el-sub-menu__title, + &.el-menu-item { + color: #409eff !important; + background-color: #f5f7fa; + } + } } .brand-main { width: calc(100% - 240px - 16px); diff --git a/sub-operation-service/yarn.lock b/sub-operation-service/yarn.lock index 19fc669..ff96f07 100644 --- a/sub-operation-service/yarn.lock +++ b/sub-operation-service/yarn.lock @@ -4188,6 +4188,11 @@ markdown-table@^1.1.0: resolved "https://registry.npmmirror.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60" integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q== +marked@^15.0.12: + version "15.0.12" + resolved "https://registry.npmmirror.com/marked/-/marked-15.0.12.tgz#30722c7346e12d0a2d0207ab9b0c4f0102d86c4e" + integrity sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA== + math-intrinsics@^1.1.0: version "1.1.0" resolved "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"