From 6084bf6f83f6ae24ed75c607be56239f9f3ec92c Mon Sep 17 00:00:00 2001 From: lzx_win <2602107437@qq.com> Date: Wed, 15 Oct 2025 17:16:03 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=A1=88=E4=BE=8B?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=A4=87?= =?UTF-8?q?=E6=A1=88=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 重构案例详情页数据结构，简化图片展示逻辑 - 添加备案徽记图标和点击跳转备案网站功能 - 调整页面样式和交互效果，提升用户体验 - 增加图片点击放大功能 --- src/App.vue | 37 +++++++++++++++- src/assets/img/hui.png | Bin 0 -> 16161 bytes src/components/PageHeader.vue | 2 +- src/views/pages/CaseDetail.vue | 93 +++++++++++++++++++++++++---------------- 4 files changed, 95 insertions(+), 37 deletions(-) create mode 100644 src/assets/img/hui.png diff --git a/src/App.vue b/src/App.vue index 15d3c50..5023ce9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -28,6 +28,11 @@ function toggleMobileNav() { isMobileNavOpen.value = !isMobileNavOpen.value; } +// 打开备案查询网站 +function openBeianSite() { + window.open('https://beian.miit.gov.cn', '_blank'); +} + // 关闭移动导航菜单 function closeMobileNav() { isMobileNavOpen.value = false; @@ -130,7 +135,8 @@ onMounted(() => { 网站地图
- {{ configParams.footer_record_number }} + 备案徽记 + {{ configParams.footer_record_number }}
@@ -311,6 +317,28 @@ main { color: #fff; } +.beian-link { + cursor: pointer; + transition: color 0.3s ease; +} + +.beian-link:hover { + color: #0056b3; + text-decoration: underline; +} + +.footer-record-number { + display: flex; + align-items: center; + gap: 8px; +} + +.beian-icon { + width: 16px; + height: 16px; + object-fit: contain; +} + /* 移动菜单按钮 */ .mobile-menu-btn { display: none; @@ -389,6 +417,7 @@ main { color: #888; word-break: break-all; text-align: center; + justify-content: center; } } @@ -416,6 +445,12 @@ main { .footer-record-number { font-size: 11px; padding: 0 5px; + justify-content: center; + } + + .beian-icon { + width: 14px; + height: 14px; } } diff --git a/src/assets/img/hui.png b/src/assets/img/hui.png new file mode 100644 index 0000000000000000000000000000000000000000..da43de10a30d847344f1f69b1acdcbea345cbcc3 GIT binary patch literal 16161 zcmeI3dsGuw9>+(8^61iPrAl?x5X7PqCX)~_F$8FWfDj6Z3Pq7&G9-Z{6OurJiuF-c zD85#FR;ydzh!!kpE8?p@up%6*mG!w4(PFVutgVVDJ4tw6VAeg`{bSFWIVZ{d?(cqo z_ukL_-CyRP$%%{zc5)oy2tkljXow`5{BQ9&xpz7h6iQf8iQM3laOJZakS|=m4%NCgK-tE zCM9}u@<^Xk&?*Q6p;r+7th>|Q@9GW8u>`ZHUm0#v_9HWUtTIa~Sa(QB=AS^U z!%+jFiy;V=$eLx59kXYM#SD*`N{x&#>cdDl}?3PkwVp+<}G(4?mYllOnw3G`is?+1)vJf`cWR>!Num^fHT0?>o?yyO;vi$Z?qn?nv8?hS%FP z>sIzWPaS2T_xTgbFhMe*Q=;jYH6F@>G~LIN?NB6LzhhKsmDxUc4J zD)ax3fUFHRk0E!SodOMg?Ngg8)FNO&S+9 zAHYlF0)SAPG%jjBfS1Mv0HHQ%T-1C3FO3TTLT%ExsQCb18W#YB+N5z&^8vgxE&vF% zN#mmC19)j%01#@E#zoBs@Y1*dAk-#}i<%GMrEvj3s7)FdH6OrB;{t$Cn=~$JK7g0T z1puKoXBZCKglOMgkY*$Iy?F_k5 zZcLV+w=2#)^{lSx7h$Xa^KJEQ{=r4+&)T@}1Z;XVGKd#xdoE4zbX4uiAo$uaudRxg z3;tPMz2V8B)?cw{M{M?lU(d>@nVEAgJ1pR!T}$Yke>epwZf*8I87~`F)bi=@IYjC2 z5xe&6th0YM{-N;cqF13e=UrNrryeA-`=j-@?WQ-wA3QUqp1-pH#)kX3GxO6%+f7{8 zSU6*@srHq}sTVuG|8Bb782_S7@yOa1n4KUfUeNYp^3u5DI?w8JUp*7~iCc~Z9le-j zI`zKip@`-ihjG<)JZW3o!}x&bzD3PHe}1IwqhVW8ntdgi{Q0?$M#Y_pTHtwUVYIDl z-A@e@gJTOmXSCGL79LG(I=$%IczD2FV&HG`vemgS{M0{{KW@JBpz^bWYbI|BIwr`g zHU2oF#AEa~EA`>_?t9j@Ja!4Y?_!v>rQ#3qj7qoq+ozD~TZV5<_x3dTOtQO6&5P#}zRl>5W%y!x;859rNJw5(gLVzy!YWR|mIEs<%uskFp{R zIen?LzUcC3dz7{6Zd}bLEjOIcET4L*g#CQ+fWy+lDcNT(#4Yg)-ZpZ;^bfZq`#0sS za1L}xtKFFEUAFnj>C3U9PCwQNv&(CcvSq7le1^`?nlSkYzHq|kabfjkE#t=>t#eDn zi;Sp`8#4ajkQ2f8clRmrngSr*7Y0?$i(7Q!^*=H=p5`$N8^q zTpH>gwsFZ%n}Y+QzI#zx81nl`+x1n&9-ob_^vn9>_$%Aus+=Kdk^9!zSFaq>__ZYE zqVn<5CGH0zjy;GdDg31V-K}nOst??`%Vqj+a| z?#e9Ns+?&XCpR+@W3DcK)RZamt2XP7+)udQa`~cjxUIXV+w*%4&|>w?eBJqN;bU%o zEpFm^>_)|$qe<`oX78wQV!HZ+M=J#xDHUgN3R`|DC;MbqA@ zY-|2-@Uq&uDZf71{q}(`9)*qiSzK^v-`4BPd3&*8kCzuLey8w*)mwM2%7{8VcK(${ zwWuyXH&;-(X43@7Z(+#z!e35)SSu4PKG?Io{YYs7`q_eb+Y61l!_oeu`sdD z!zt>T)3KqaCpp_K{ajq==w_4h<@#MMtlSZqPj|nob+fHqS9!fbkY!3txbSdO=FKw| zXL84xoKLvq-%2P+os}NkYP)auz52wNAD1m~*C##^$Gj4~o!vGs^rZ+AJhiV-b0)4Z Qzr-FI6d^hILE_?n0YJNZ`v3p{ literal 0 HcmV?d00001 diff --git a/src/components/PageHeader.vue b/src/components/PageHeader.vue index b4d55cf..1e2556d 100644 --- a/src/components/PageHeader.vue +++ b/src/components/PageHeader.vue @@ -64,7 +64,7 @@ onMounted(() => {

{{ title }}

-

{{ subtitle }}

+

{{ subtitle }}

diff --git a/src/views/pages/CaseDetail.vue b/src/views/pages/CaseDetail.vue index e4088cf..39e7b22 100644 --- a/src/views/pages/CaseDetail.vue +++ b/src/views/pages/CaseDetail.vue @@ -23,23 +23,13 @@ const defaultCaseData = { imageUrl: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', categoryName: '企业系统', categoryId: 1, - pdfUrl: '/docs/smart-campus-system.pdf', - designUrl: 'https://www.figma.com/file/smart-campus-design', - qrcodeUrl: '/images/smart-campus-qrcode.png', - gallery: [ - { - imageUrl: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - imageTitle: '系统主界面' - }, - { - imageUrl: 'https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - imageTitle: '移动端应用界面' - }, - { - imageUrl: 'https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', - imageTitle: '数据分析仪表盘' - } - ] + clientUrl: '/docs/smart-campus-system.pdf', + challengeUrl: 'https://www.figma.com/file/smart-campus-design', + solutionUrl: '/images/smart-campus-qrcode.png', + results: 'https://demo.smart-campus.com', + testimonialUrl: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80,https://images.unsplash.com/photo-1562774053-701939374585?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80,https://images.unsplash.com/photo-1577896851231-70ef18881754?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80', + content: '

项目详情

这是一个完整的智慧校园管理系统...

', + completionDate: '2024-12-01' }; // 获取案例详情 @@ -76,6 +66,11 @@ const goBackToList = () => { router.push('/cases'); }; +// 在新窗口打开图片 +const openImageInNewWindow = (imageUrl) => { + window.open(imageUrl.trim(), '_blank'); +}; + // 监听路由参数变化 watch(() => route.params.id, () => { getCaseDetail(); @@ -93,8 +88,8 @@ onMounted(() => { + :backgroundImage="(currentCase.imageUrl && currentCase.imageUrl.split(',')[0])" + height="60vh">