From 4ff8fbe60a80a60c081f4fbbd0c2c9c206a4eb39 Mon Sep 17 00:00:00 2001
From: hejin <jmy13864291147@163.com>
Date: Sun, 6 Jul 2025 10:57:22 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=98=E5=88=B6=E5=AE=8C=E6=88=90=E6=96=B0?=
 =?UTF-8?q?=E9=97=BB=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E3=80=81=E5=B1=95?=
 =?UTF-8?q?=E8=A7=88=E9=A1=B5=E9=9D=A2=E3=80=81=E5=8F=8D=E9=A6=88=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/common.scss                  |  29 ++-
 assets/image/icon/Facebook-colorful.png | Bin 0 -> 555 bytes
 assets/image/icon/X-colorful.png        | Bin 0 -> 1237 bytes
 assets/image/icon/YouTube-colorful.png  | Bin 0 -> 698 bytes
 assets/image/icon/fax-colorful.png      | Bin 0 -> 1046 bytes
 assets/image/icon/google-colorful.png   | Bin 0 -> 1799 bytes
 assets/image/icon/in-colorful.png       | Bin 0 -> 671 bytes
 components/contact-footer.vue           |  64 +++++++
 components/header.vue                   |   6 +-
 locales/en.json                         |  15 +-
 locales/zh.json                         |  15 +-
 pages/exhibition.vue                    |  44 +++++
 pages/exhibition/_id.vue                | 170 +++++++++++++++++
 pages/exhibition/index.vue              |  84 +++++++++
 pages/feedback.vue                      | 240 ++++++++++++++++++++++++
 pages/news.vue                          |  30 +--
 pages/news/_id.vue                      | 150 ++++++++++++++-
 pages/news/index.vue                    |   6 +-
 plugins/main.js                         |   4 +-
 19 files changed, 816 insertions(+), 41 deletions(-)
 create mode 100644 assets/image/icon/Facebook-colorful.png
 create mode 100644 assets/image/icon/X-colorful.png
 create mode 100644 assets/image/icon/YouTube-colorful.png
 create mode 100644 assets/image/icon/fax-colorful.png
 create mode 100644 assets/image/icon/google-colorful.png
 create mode 100644 assets/image/icon/in-colorful.png
 create mode 100644 components/contact-footer.vue
 create mode 100644 pages/exhibition.vue
 create mode 100644 pages/exhibition/_id.vue
 create mode 100644 pages/exhibition/index.vue
 create mode 100644 pages/feedback.vue

diff --git a/assets/css/common.scss b/assets/css/common.scss
index dcfa6d3..63bb883 100644
--- a/assets/css/common.scss
+++ b/assets/css/common.scss
@@ -47,6 +47,33 @@
     text-align: left;
   }
 }
+.pretty-header {
+  height: 59px;
+  color: #ffffff;
+  text-indent: 1.375rem;
+  background: linear-gradient( 180deg, rgba(33,119,244,0.04) 0%, rgba(1,95,232,0.14) 100%);
+  border-bottom: 2px solid #0663ea;
+  h2 {
+    max-width: 19.125rem;
+    height: 100%;
+    position: relative;
+    line-height: 3.6875rem;
+    background: linear-gradient( 180deg, #2177F4 0%, #015FE8 100%);
+    font-size: 1rem;
+    &::after {
+      content: '';
+      width: 5.875rem;
+      height: 3.6875rem;
+      position: absolute;
+      top: 0;
+      right: -5.8125rem;
+      background: url('../image/banner/header-top-line.png') no-repeat;
+      background-size: 100% 100%;
+      z-index: 999;
+    }
+  }
+}
+
 .breadcrumb-item + .breadcrumb-item::before {
   content: '>>';
-}
\ No newline at end of file
+}
diff --git a/assets/image/icon/Facebook-colorful.png b/assets/image/icon/Facebook-colorful.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9ed599936da533527d6fa45b07a1fe9a4fd1668
GIT binary patch
literal 555
zcmV+`0@VG9P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px$<w-<AR9Hvtmp@1wVHn1L-^KjVK*TucVnGn6E`?&dT8e{%gHq}&NN7+up>8FM
zO6%6R2!&E84y}rVF1A}C6of#)p`c4jT?$DQ$t7Oylaz@4?jj+{U51cvJnruKz0dpd
ze7pj{Kd+B!8mkidTtKM&%&jBgLLiPzla<0&;FqX~CqVYOC0hNzB4e6772Og2E6C~A
zir=b<9TAA+b8g#yUvdB1(H+T4r>oZl4D>=MATUh0Do8R{P%!LDjsgsY1uK&trXG0+
z2Zf?0CG;=p=+`QQV*q2rg53oleHP*W<-&_D0R;V!iuoDrRjald?ixUJ+{3$<-kPK2
z8o=Iymx+fS1>ig<iGMRlXC&qRm(T98Ny#$uj?6&vjgQemO#zsR7dcFsHC=H8;B4LA
z|B=@^f3h|8aSh<Xvd-Vjb_D3s;PJ59?=MlWEqJEi7s=-D9MFrBWZE9Ob+;fKgx?#1
z+TL2;NSvBHdt0=9*D`?ZpC#r#SaKNZAHqf*SUWI??b~momO1e1(={J|l$vir&<E=;
z)YzSUqS511?}5*Wl5+EHem6KdcVGysO<%PjYTq2_IM8vR{Ty&&F=;dhDvL?;t68G}
tAa)#CP8$QLET`q6YIZ%Z2f(_X-vIL;9jt?2X*d7?002ovPDHLkV1jv(0rLO=

literal 0
HcmV?d00001

diff --git a/assets/image/icon/X-colorful.png b/assets/image/icon/X-colorful.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fe4f9aaadc0e905a58f9db9cc6b1ca8d913e08e
GIT binary patch
literal 1237
zcmV;`1S<Q9P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px(k4Z#9R9HvtS6fKiR~-K0rQ#K*Qv^ZrHdX}nL7|$~%esfPv|#I6)6DCv@sd<K
za<QUwYC1JzraoA;-eTh|H`nUus4{ByWY#IzRXP}gmlqXXy#zHwqvM=W*)%b+Tk9V7
zd-+3>bAI3dJHPMyau@*M>gxKQt*w1EfDZw<k<Z>>tpWJnXxu8+>-E1f{%mfi0~qhT
z!KNm*-d#2tw@)$L-97pMTz<RF_qu&U0Ia?R+ReS+8Ue6-Om9!y{tv(`12S0~5)%^-
zoX*zP7C4+7Jbc)H=*h*$$DysQ6&@ZQSY2I3Mn)#I+8++AF$=)c(-VDtYJ`V}V`pav
zGcz;v>F4K%xw$!{rKRK9v!6|Z2n!2?QrQb1A0HSD2IS`EVPN1}?Cu^Mw?k(jA|e7B
zjSBAW?x?7!giO`}p^y(AkB8CGQLtESEH5wr4Madd0OaxxgocKKuvK1Ofu^Q=CYxIv
zLI#6@q@>GeZoY?=l@+krDVUg;fI`uW=;%|B%R3<yim<)CO+k2jdsEs^pJvjAb#-;9
zs;b%h-V|LHRbXRdgYxn(z~$y+c6Ju$&tHI>n;R609{BqDB0HOd{{8_tIXR)T^F9(1
z5<q~rw6vnEtPBRj?}yHcMF3>Ai;D|nvUZ$3`vHcAhH(8l2TW!R+S}W(u&@9wmxpub
zK0<zeJ_z7PkG?}rPA)b!HY{3<RRG8?K|z5~t5xv#_eWJ#73%97z~gaITzrep0b%9D
zi4)N2ene*Gr<k9gx7gg`4D8<_HZ~S2m4Z$-k9Px4o(w~+Rw5=QhW_-$i(inQo`K29
zNvoP4833V|!^wtNT#3cSMI<GCOevSk?;|iU5PZIXD#euC%ptP+2wrXA;NXD9#=F#{
zbUGcbUHb$~CKF9f4OA(qscB~Y;k8s?Y7x;op`JV?lCMx-e-~VC9*T;J@bu|V)TEY{
zmaIC4BQrpDO-oBfO-(f%9UY<9>v8kuXL$U05Dy;oAu=)&EiEl5Dft{mqtPOWBLg5(
z?C6kDX_8^Ix3{NKOi4+ln(yi9qIR8^mk+gCV{smi1Rx?J94eI(US3{UTU&!bAV7S4
z0+N%jVr*;-SFR)@Huek}8X90QY*ObWmVH=R4Inr;2t7UB2nh+n`uaL5E5+39NZ_=#
zHX}MZ8nv}jNTqim6bevSSb*oxCy<=Xq73~b6_8}??d?WXR1{4_i9~|h+B<t^Owx}~
zPolS=ppZJDQmLSspwaZvG$iX@O9jr(&gkmu1j%=@Nq2WQ_<SKvx>rTK|Ki09G_*+e
zlaze<@;7KSY6J%dqokx1jg3u5k7F|BQt8)Vu~>BR;NTFlva+zTv3cNSh#}S0Nx^2b
zF+M&HvG_}xm;wPGo12?dn#04|1MAGrfUT`9N=r*nP;i5~-N?uY($h1k1DY!@uXkx^
z5o6k4Q&Us8bSa7cvH5G61rQf^1|pFNc6N4@R*~oyrl+SZ>iXo#_i_8Sn96j2X|-BZ
zS4*q|V6oG`^n?Gz#pHOeX2*UxB}aLj*YiIBSeWu=CU{~;00000NkvXXu0mjf$!0`D

literal 0
HcmV?d00001

diff --git a/assets/image/icon/YouTube-colorful.png b/assets/image/icon/YouTube-colorful.png
new file mode 100644
index 0000000000000000000000000000000000000000..8b36fa6f2a94e261be3b8104e8bc0b43f4cb84e0
GIT binary patch
literal 698
zcmV;r0!96aP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px%bV)=(R9Hvtms>~_Q5eU6v#u+fWeG(P)Kk<$5S3_lj|$uZF?>mvz}nX^D(#{~
z*hA%u*^TI8EJ&A!=w?I@6-p0bBt#D>1xb+@VrV<9nYOxd+8Jyecg_sC&OUS=XTHnt
z{O3DozE1&&Mx%>>Q@|D=OFT>BQh}#Hm7*x`6)kxyke$S&6NT;v@&&*hpm>Ut>*?+a
zfY21ko@jrn0EjxY`#)*_1Ei<|p)fSuhgWZ*yBGRYP{Z)!Ckze4a0DVFFghA5pEMV^
z-QY<FuLq`iVdiw0JqzZ~h0S^3_kqi0C^w@5B2j)BbbOrL+AJx6TPH05oW2ef^^==i
zkM^<=@|MKKHY!kD3HO?l15mdg4(yZwtnkC@cjf?@UKkj(4_RIU=MG8$7HoshJ?6oy
zcEhs8aOf<2`eGfVv;c0#*Mad9%vcLy$?mEHaAFS(4uPnd+MwJ=VER_W<MR>)+_^BK
z9j`=t(*gAN;;2?%fW}AS-=0{J4LQ(qMFODY$R!;QAUt~eVaE|@ZcFUHZaF+}kN|jA
z!mo%q#NPnI_Tp`*xeVXFoBM6bg=d!}0NESmfpmZ;t+1~S+B@Z{35&w@&=h~i7>jUW
z5q#(}59r?-JBANhtR>d1b`?UfMxwx)0K9l(FR)eX!(~vrR{{_?4#6g?A??{+I|hLw
z34oAwdxgEgR;)A9q4Ockn<D`buPe_${f)8Tt(633Hsb2OdK5~12CKvkNmmcFwL|w;
z=nH{5Fs>hnXn=~=52R`RKt`+|$jTh+2UabO^#>EI6zz!qRdO5tDWQPlgNfs#nV5{7
g8%{;NI60pG2E_~^M!dHV+W-In07*qoM6N<$g0nU_F#rGn

literal 0
HcmV?d00001

diff --git a/assets/image/icon/fax-colorful.png b/assets/image/icon/fax-colorful.png
new file mode 100644
index 0000000000000000000000000000000000000000..efb8f59bf44ef0b1c42eb79ec0f0378cb80f5262
GIT binary patch
literal 1046
zcmV+x1nK*UP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px&&`Cr=R9HvFS7%I9Q5Ze9l&TDaPz8%p1%W1t22^lh0ErqEO>xAHTjKzOqS3el
ziSdU*6a|fn5GA4!N8<S5VhK?bkVuR~5o~Z2tcn^0OWSMi3%+1^ZC_oz|L%L=IQRR`
zxq|>ebkPhsb#h7rNIVGjCLn};|J#FtQc%(a&@04f+*2HLO-ERANTm+|1pMuUHsZa6
z!7zrz+*fB)O4j}7<Xk#R=`j*j8vl+E_&5dtv?QubZTeR|x3wt72@+ivPi+}?{qN$`
z3*mi2;qR)1m&_B4tsnHCP~WP-qfd{~YW!wTIEV(|-J>s7C>J0`J|4~zXTc-}lL7a1
z_mQhP5AFA6Q9wiinC>$PN&c%Kvyj+4Q-`Sonf0e|U3=Rm2%7*_D;Htmz}Yqf2^kc;
zzJe34&RX@g3LwsB61EKaGlizt9kW^qivU>9&x}0Em;HwJ4stZ-Fw!FgJA;!&SA?}A
zp)%1TCoBTk5tM|<{i3-<Z`$5rX;l)8)X2^A!ZM+B86X<Ot>$9vf1W95F9?81?P^3G
z&-TJM*O1ka%LkaHn2tpMm7)PKb*LXM6O^bRfN1$R>{X@k3Czhf)IAtSN9-33fElLN
zrlVL_-pxl40Mq-DfpdA|>d#M+T(g^-_mIetIeZ_2-0VBM@*4{|4w(-@09yk$V48O<
zZ%Zk~n(7qPwKkx))E)VwvfwUtv#SC(o9^Pki!5;fwg)9)N+$t-denZc!^S5&I3h-R
zMIcSJ4aAOXgIxgD4oblM0qSmOFTB2r<FC$e-=})VVspS+NF`Ekt~Yg{R9As<Ug2OQ
zHXmmjFXFVOKwJeT$|JE`wYi%y1w}^PaeiY_xdmcVz$&QR1G)0DRkGI1QN&@kA`Y%n
z7d}R6?LidlD#QU`eJ%{ofph2Tx_X(Y3E2&Kxb*fq|5?$~2XEW8zXV^YT!h7)TR7W{
zm<+!e+r$B2R=a|e5!-iyMWU7HDsZGehdYXeM#ivIgnEQ<zwF+Kn3HeM{>TkGELeq~
z3H2sD?lhO-_WKgle0jzZl=XkP-+avRoxyV>p>iXdzP}d)YV|O>7=8+JnWreZwHw><
zv7?2vmq}#2&u<?_gI)Y^I_!|B<d%%iHD1O^O}^C_7Ar7UF%#?km+{Vwd=erN1&B%V
z$e&(Fwg)D18n0@3f~uApjtfiu<{`>!EU$fYG>q*<x^hnMmU?dPWAjF2?$BH6hS7aO
zF~oH+JY^m*P$NF*Kk}DSA*op_o8zzLj(?bxs<R1k;M2_Ek5fhvM?TMg0BrEF@-{F}
Qz5oCK07*qoM6N<$f`~}s;Q#;t

literal 0
HcmV?d00001

diff --git a/assets/image/icon/google-colorful.png b/assets/image/icon/google-colorful.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f43c0f14fb73c69e9976bbe3a02c7ec69721b26
GIT binary patch
literal 1799
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

literal 0
HcmV?d00001

diff --git a/assets/image/icon/in-colorful.png b/assets/image/icon/in-colorful.png
new file mode 100644
index 0000000000000000000000000000000000000000..344fe72b56324dddd56cf25f8dbc1e5540579494
GIT binary patch
literal 671
zcmV;Q0$}}#P)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800001b5ch_0Itp)
z=>Px%SxH1eR9Hu2WME)mU{5`)#>~jj&dBiJg@J*A4<trI@aaDT<DS3&87hCyw!Os&
zvYdtS{|N>L20<EHip}WvfBrLCFmk0GUdzbvKZwqjgRT3|z_^Z)JMGX%Is`i||9t{E
z;Qv7Q9%kp@cYwAu7sHfTRR&EdZiW+gJ~3o1y2bG9!!N1@8o>}aUTespE5ie~aQ)dg
z46(DW)6W49do37*d062Vp1k{s!MW=q{Tz_tD8<kjro_O^#K`dD_dkZXS=Sl1U3y19
z2Y_r+5$9ykkmO=G|L`-z)A!Vie~{S((*QYM<>O>#kQQWT`1bQJ!^5{f@ftzU0aN2t
z84TnQiEzW&Hw@j|A2Z~-NHauOh`|lN{_Gn=`Ko&i{gKKHeug3pEX<5xxrc9mFx0QR
z&#>mq8>|i?=ztw1dJHzI{BX^44?SndUwVh3JyZ$o2pG8a;v2*7zyBGurMWRI`v3nw
zL(<%v469GS#*m|$0|-Uc^AEomG%HUr{P~Ak@KV(Q`>%gs$X#+99QR!j$_ybUqA2ci
z>AJ{p;_fFDF{(M>*Pnk3>J_ILUVr`#wm_Jhh2dV01vvY{K<1)b42zGxq>TfvKl{pH
z+ISAd@Y|hc43YxuaIva2_ZTMaeo7k$oPF?_!M^<his4sUO&JtKIN)Nn>+Uo3?|d@q
zfYA^bVj+-XFNu<pPv85*u<`s`22VX925Y1u`pLVW3^VpWL-Ad)hYW)tH=-@E^YS}}
z!?!?fU<4po5D_Y3DU}~}z`%D*2E1!F;GI)YDjvx0IRF9vgp#y1<*Wbz002ovPDHLk
FV1no|K6U^A

literal 0
HcmV?d00001

diff --git a/components/contact-footer.vue b/components/contact-footer.vue
new file mode 100644
index 0000000..6a45828
--- /dev/null
+++ b/components/contact-footer.vue
@@ -0,0 +1,64 @@
+<template>
+  <ul class="contact-footer">
+    <li class="mr-4 box_shadow" v-for="(item,index) in contactFooter" :key="index">
+      <a :href="item.link" target="_blank">
+        <b-img :src="item.icon" :alt="item.alt"></b-img>
+      </a>
+    </li>
+  </ul>
+</template>
+
+<script>
+
+export default {
+  name: 'ContactFooter',
+  data() {
+    return {
+      contactFooter: [
+        {
+          icon: require('../assets/image/icon/Facebook-colorful.png'),
+          link: 'javascript:;',
+          alt: 'Facebook'
+        },
+        {
+          icon: require('../assets/image/icon/X-colorful.png'),
+          link: 'javascript:;',
+          alt: 'X'
+        },
+        {
+          icon: require('../assets/image/icon/in-colorful.png'),
+          link: 'javascript:;',
+          alt: 'in'
+        },
+        {
+          icon: require('../assets/image/icon/google-colorful.png'),
+          link: 'javascript:;',
+          alt: 'google'
+        },
+        {
+          icon: require('../assets/image/icon/YouTube-colorful.png'),
+          link: 'javascript:;',
+          alt: 'YouTube'
+        },
+        {
+          icon: require('../assets/image/icon/fax-colorful.png'),
+          link: 'javascript:;',
+          alt: 'fax'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contact-footer {
+  height: 3.5rem;
+  margin: .625rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f0f3f8;
+  border-radius: .375rem;
+}
+</style>
diff --git a/components/header.vue b/components/header.vue
index b62fec4..71dc188 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="header-box d-flex justify-content-between align-items-center">
-    <b-navbar class="h-100 flex-grow-1 flex-sm-grow-0 pb-0" toggleable="lg">
+    <b-navbar class="h-100 pb-0" toggleable="lg">
       <b-navbar-brand href="/"  class="mr-md-5 mr-0">
         <img src="~assets/image/logo.png" width="265px" alt="">
       </b-navbar-brand>
@@ -50,9 +50,9 @@ export default {
         { name: this.$t('menu.AboutUs'), href: '/abou-us' },
         { name: this.$t('menu.Products'), href: '/' },
         { name: this.$t('menu.News'), href: '/news' },
-        { name: this.$t('menu.Exhibition'), href: '/' },
+        { name: this.$t('menu.Exhibition'), href: '/exhibition' },
         { name: this.$t('menu.ContactUs'), href: '/contact-us' },
-        { name: this.$t('menu.Feedback'), href: '/' },
+        { name: this.$t('menu.Feedback'), href: '/feedback' },
       ]
     }
   },
diff --git a/locales/en.json b/locales/en.json
index 60933a4..390ee6e 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -32,7 +32,16 @@
   "news": {
     "news": "News",
     "newsCenter": "NEWS CENTER",
-    "allNews": "ALL NEWS"
+    "allNews": "ALL NEWS",
+    "relatedNews": "Related News",
+    "relatedProducts": "Related Products"
+  },
+  "exhibition": {
+    "exhibition": "Exhibition",
+    "exhibitionCenter": "EXHIBITION CENTER",
+    "allExhibition": "ALL EXHIBITION",
+    "relatedExhibition": "Related Exhibition",
+    "relatedProducts": "Related Products"
   },
   "index": {
     "companyProfile": "COMPANY PROFILE",
@@ -65,6 +74,10 @@
     "desc": "Please fill in the form with details so we can send you a quotation correctly",
     "address": "Shangang xintiandi No8, 19 floor, Lixia district, jinan, Shandong, China"
   },
+  "feedback": {
+    "feedback": "Feedback",
+    "way": "Find us through some contact information"
+  },
   "footer": {
     "contactUs": "Contact us"
   }
diff --git a/locales/zh.json b/locales/zh.json
index 692d970..a1827db 100644
--- a/locales/zh.json
+++ b/locales/zh.json
@@ -47,7 +47,16 @@
   "news": {
     "news": "新闻",
     "newsCenter": "新闻中心",
-    "allNews": "所有新闻"
+    "allNews": "所有新闻",
+    "relatedNews": "相关新闻",
+    "relatedProducts": "相关产品"
+  },
+  "exhibition": {
+    "exhibition": "展览",
+    "exhibitionCenter": "展览中心",
+    "allExhibition": "所有展览",
+    "relatedExhibition": "相关展览",
+    "relatedProducts": "相关产品"
   },
   "aboutUs": {
     "AboutUs": "关于我们",
@@ -65,6 +74,10 @@
     "desc": "请详细填写表格，以便我们正确地向您发送报价",
     "address": "山东省济南市历下区19楼善港新天地8号"
   },
+  "feedback": {
+    "feedback": "反馈",
+    "way": "通过一些联系方式找到我们"
+  },
   "footer": {
     "contactUs": "联系我们"
   }
diff --git a/pages/exhibition.vue b/pages/exhibition.vue
new file mode 100644
index 0000000..9e71108
--- /dev/null
+++ b/pages/exhibition.vue
@@ -0,0 +1,44 @@
+<template>
+  <!-- 展览 -->
+  <div class="content">
+    <BannerTop :options="bannerTopOptions"/>
+
+    <section class="container pt-4 pb-4">
+      <div class="row">
+        <AsideTree class="col-md-3 mb-4 mb-md-0" :headerTitle="$t('exhibition.exhibitionCenter')"/>
+        <main class="col-md-9">
+          <div class="pretty-header">
+            <h2>Low Bed Trailer</h2>
+          </div>
+          <nuxt-child />
+        </main>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'exhibition',
+  data() {
+    return {
+      bannerTopOptions: {
+        title: this.$t('exhibition.exhibition'),
+        subTitle: this.$t('exhibition.exhibitionCenter'),
+        img: require('../assets/image/banner/news-banner.png')
+      },
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+}
+
+</style>
\ No newline at end of file
diff --git a/pages/exhibition/_id.vue b/pages/exhibition/_id.vue
new file mode 100644
index 0000000..d8ac751
--- /dev/null
+++ b/pages/exhibition/_id.vue
@@ -0,0 +1,170 @@
+<template>
+  <!-- 新闻详情 -->
+  <div class="exhibition-info">
+    <div class="info-top">
+      <h2 class="exhibition-title">How To Maintain The Chassis Of A Truck?</h2>
+      <p class="exhibition-date">- Oct 25, 2024-</p>
+    </div>
+
+    <div class="exhibition-content">
+      <div></div>
+      <ContactFooter />
+      <div class="guide">
+        <nuxt-link to="/">
+          Previous: How To Maintain The Chassis Of A Truck?
+        </nuxt-link>
+
+        <nuxt-link to="/">
+          Next: Flatbed Trailer Buying Guide
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="related-exhibition mb-4">
+      <div class="pretty-header">
+        <h2>{{ $t('exhibition.relatedExhibition') }}</h2>
+      </div>
+      <nuxt-link 
+        class="exhibition-related-item box_shadow" 
+        to="/" 
+        v-for="item in 6" 
+        :key="item"
+      >
+        <p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
+        <span>- Oct 25, 2024-</span>
+      </nuxt-link>
+    </div>
+
+    <div class="related-products">
+      <div class="pretty-header">
+        <h2>{{ $t('exhibition.relatedProducts') }}</h2>
+      </div>
+      <b-carousel
+        class="mt-3"
+        id="carousel-1"
+        :interval="4000"
+        controls
+        indicators
+      >
+        <b-carousel-slide v-for="item in 3" :key="item">
+          <template v-slot:img>
+            <ul class="row justify-content-around pl-0">
+              <li class="col-6 col-md-4 mb-4" v-for="son in 3" :key="son">
+                <article class="product-card box_shadow">
+                  <b-img src="~assets/image/banner/home-pord1.png" fluid alt="product"></b-img>
+                  <div class="product-card-content">
+                    <h4>SINOTRUK HOWO Tractor Truck Head</h4>
+                    <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
+                    <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
+                    <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p>
+                  </div>
+                </article>
+              </li>
+            </ul>
+          </template>
+        </b-carousel-slide>
+      </b-carousel>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'exhibition-info',
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.exhibition-info {
+  .info-top {
+    padding-bottom: .5rem;
+    border-bottom: 1px solid #d8dde1;
+    .exhibition-title {
+      margin: 1.5625rem 0;
+      margin-bottom: .9375rem;
+      color: #444444;
+      text-align: center;
+      font-size: 1.5rem;
+    }
+    .exhibition-date {
+      color: #9e9e9e;
+      text-align: center;
+      font-size: .875rem;
+    }
+  }
+  .exhibition-content {
+    margin-bottom: 2.6875rem;
+    .guide {
+      padding-top: .625rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #515760;
+      border-top: 1px solid #d8dde1;
+      font-size: .875rem;
+    }
+  }
+  .related-exhibition {
+    .exhibition-related-item {
+      padding: 1.125rem 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #d8dde1;
+      font-size: .875rem;
+      p {
+        flex: 1;
+        color: #444444;
+        -webkit-line-clamp: 1;
+      }
+      span {
+        color: #9e9e9e;
+      }
+    }
+  }
+  .related-products {
+    #carousel-1 {
+      @mixin controls {
+        width: 2.875rem;
+        height: 2.875rem;
+        background-color: #7f7f7f;
+        background-size:  1.25rem;
+      }
+      ::v-deep .carousel-control-prev-icon {
+        @include controls;
+      }
+      ::v-deep .carousel-control-next-icon {
+        @include controls;
+      }
+    }
+    .product-card {
+      border: 1px solid #e6e8ec;
+      .product-card-content {
+        padding: 1.125rem 1rem;
+        border-top: .0625rem solid #e6e8ec;
+        font-size: .875rem;
+        h4 {
+          margin-bottom: .8125rem;
+          color: #212222;
+          font-size: .875rem;
+        }
+        p {
+          color: #878b90;
+        }
+        .view-details {
+          margin: 0 auto;
+          margin-top: 2rem;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/exhibition/index.vue b/pages/exhibition/index.vue
new file mode 100644
index 0000000..18572f0
--- /dev/null
+++ b/pages/exhibition/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <!-- 新闻列表 -->
+  <section class="exhibition-list">
+    <nuxt-link 
+      class="exhibition-item box_shadow row mt-4" 
+      to="/exhibition/123123"
+      v-for="item in 6"
+      :key="item"
+    >
+      <b-img 
+        class="col-md-4"
+        src="~assets/image/banner/home-pord1.png"
+        alt="Responsive image"
+      >
+      </b-img>
+      <article class="col-md-8">
+        <h3 class="title">Advantages Of Front Shovel And Backhoe For Excavators</h3>
+        <p class="exhibition-content text-ellipsis ">
+          When many customers maintain their trucks, they mostly only pay attention to the maintenance of tires and engines and do not pay much attention to the chassis. Little do they know that if the chassis is not maintained, the truck will have big problems. So how to maintain the chassis of a truck? The following article will introduce it in detail.
+        </p>
+        <div>
+          <span>- Aug 19, 2022-</span>
+          <img src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')">
+        </div>
+      </article>
+    </nuxt-link>
+
+    <SeoPagination class="mt-4" />
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'exhibition-list',
+  data() {
+    return {
+      bannerTopOptions: {
+        
+      },
+    }
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.exhibition-list {
+  box-sizing: border-box;
+  .exhibition-item {
+    margin: 0;
+    height: min-content;
+    min-height: 12.875rem;
+    border: 1px solid #e6e8ec;
+    article {
+      padding: 1.125rem;
+      font-size: .875rem;
+      .title {
+        margin-top: .9375rem;
+        color: #212222;
+        font-size: .875rem;
+      }
+      .exhibition-content {
+        margin: 1.25rem 0;
+        height: 5rem;
+        color: #878b90;
+      	-webkit-line-clamp: 4;
+      }
+      >div {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        color: #878b90;
+        img {
+          width: 1.6875rem;
+          height: 1rem;
+        }
+      }
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/pages/feedback.vue b/pages/feedback.vue
new file mode 100644
index 0000000..3b541f4
--- /dev/null
+++ b/pages/feedback.vue
@@ -0,0 +1,240 @@
+<template>
+  <!-- 联系我们 -->
+  <div class="content">
+    <BannerTop :options="bannerTopOptions"/>
+
+    <section class="container mt-5 mb-5">
+      <div class="form-container box_shadow w-75 m-auto">
+        <article class="header">
+          <div class="title d-flex align-items-center">
+            <h2 class="d-none d-md-block">{{ $t('feedback.feedback') }}</h2>
+            <b-img class="mr-4" src="~assets/image/backGroundImg/contact-us-logo.png" fluid :alt="$t('index.corporateName')"></b-img>
+          </div>
+          <p class="row mt-3">
+            <label class="col-6 col-md-3">{{ $t('contactUs.contactUs') }}：{{ $t('contactUs.contacts') }}</label>
+            <label class="col-6">{{ $t('common.tel') }}：+86-531-6998513</label>
+          </p>
+          <p class="row">
+            <label class="col-12">{{ $t('common.addressLabel') }}：{{ $t('contactUs.address') }}</label>
+          </p>
+        </article>
+
+        <main class="form-box">
+          <ul class="way row pl-0 justify-content-center ">
+            <li class="col-4 text-center">
+              <b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.Mob/Whatsapp/Wechat')"></b-img>
+              <h5>{{ $t('common.Mob/Whatsapp/Wechat') }}</h5>
+              <p>008618253112969</p>
+            </li>
+            <li class="col-4 text-center">
+              <b-img class="mb-2" src="~assets/image//icon/fax.png" fluid :alt="$t('common.fax')"></b-img>
+              <h5>{{ $t('common.fax') }}</h5>
+              <p>+86-531-69885133</p>
+            </li>
+            <li class="col-4 text-center">
+              <b-img class="mb-2" src="~assets/image//icon/app.png" fluid :alt="$t('common.E-mail')"></b-img>
+              <h5>{{ $t('common.E-mail') }}</h5>
+              <p>alicesales@scdtrailer.com</p>
+            </li>
+          </ul>
+
+          <b-form @submit="onSubmit">
+            <b-form-group
+              id="input-name"
+              label-for="input-name"
+              :invalid-feedback="$t('contactUs.name')"
+            >
+              <template v-solt:lable>
+                <div class="mb-2 d-flex align-items-center">
+                  <b-img class="mr-1" src="~assets/image/icon/user.png" fluid :alt="$t('contactUs.name')"></b-img>
+                  <h6 class="label-text">{{ $t('contactUs.name') }}</h6>
+                </div>
+              </template>
+              <b-form-input
+                id="input-name"
+                v-model="dataForm.name"
+                required
+              >
+              </b-form-input>
+            </b-form-group>
+
+            <b-form-group
+              id="input-mail"
+              label-for="input-mail"
+              :invalid-feedback="$t('contactUs.mail')"
+            >
+              <template v-solt:lable>
+                <div class="mb-2 d-flex align-items-center">
+                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/email.png" fluid :alt="$t('contactUs.mail')"></b-img>
+                  <h6 class="label-text">{{ $t('contactUs.mail') }}</h6>
+                </div>
+              </template>
+              <b-form-input
+                id="input-mail"
+                type="email"
+                v-model="dataForm.email"
+                required
+              >
+              </b-form-input>
+            </b-form-group>
+
+            <b-form-group
+              id="input-contactWay"
+              label-for="input-contactWay"
+              :invalid-feedback="$t('contactUs.contactWay')"
+            >
+              <template v-solt:lable>
+                <div class="mb-2 d-flex align-items-center">
+                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/labl-phone.png" fluid :alt="$t('contactUs.contactWay')"></b-img>
+                  <h6 class="label-text">{{ $t('contactUs.contactWay') }}</h6>
+                </div>
+              </template>
+              <b-form-input
+                id="input-contactWay"
+                v-model="dataForm.phone"
+                required
+              >
+              </b-form-input>
+            </b-form-group>
+
+            <b-form-group
+              id="input-desc"
+              label-for="input-desc"
+              :invalid-feedback="$t('contactUs.desc')"
+            >
+              <template v-solt:lable>
+                <div class="mb-2 d-flex align-items-center">
+                  <b-img style="filter: brightness(0%);" class="mr-1" src="~assets/image/icon/msg.png" fluid :alt="$t('contactUs.desc')"></b-img>
+                  <h6 class="label-text">{{ $t('contactUs.desc') }}</h6>
+                </div>
+              </template>
+              <b-form-textarea
+                id="input-desc"
+                v-model="dataForm.message"
+                rows="3"
+              >
+              </b-form-textarea>
+            </b-form-group>
+
+            <div class="text-center">
+              <b-button class="w-25" type="submit" variant="primary" pill>
+                {{ $t('common.submit') }}
+              </b-button>
+            </div>
+          </b-form>
+        </main>
+      </div>
+    </section>
+  
+    <b-img class="footer-img" src="~assets/image/backGroundImg/contact-us-footer.png" fluid-grow :alt="$t('contactUs.contactUs')"></b-img>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'feedback',
+  data() {
+    return {
+      bannerTopOptions: {
+        title: this.$t('feedback.feedback'),
+        subTitle: this.$t('feedback.way'),
+        img: require('../assets/image/banner/aboutus-banner.png')
+      },
+      dataForm: {
+        name: '',
+        email: '',
+        phone: '',
+        message: ''
+      }
+    }
+  },
+  methods: {
+    onSubmit(e) {
+      e.preventDefault()
+      console.log(this.dataForm);
+      
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100%;
+  .form-container {
+    height: min-content;
+    border-radius: 2.125rem;
+    overflow: hidden;
+    background: linear-gradient( 180deg, #FDFEFE 0%, #F5FBFF 100%);
+    .header {
+      width: 100%;
+      height: min-content;
+      background: url('~assets/image/backGroundImg/contact-us-form-bg.png') no-repeat;
+      background-size: 100% 100%;
+      overflow: hidden;
+      .title {
+        margin-top: 2.5625rem;
+        justify-content: space-between;
+        h2 {
+          padding: .6875rem 2.75rem .6875rem 1.625rem;
+          color: #fff;
+          background: rgba(255,255,255,0.44);
+          border-radius: 0px 3.125rem 3.125rem 0px;
+          font-size: 1.125rem;
+          font-family: 'SourceHanSansCN-Heavy';
+        }
+      }
+      p {
+        padding-left: 1.875rem;
+        color: #fff;
+        font-size: .875rem;
+      }
+    }
+    .form-box {
+      padding: 2.25rem 5.375rem;
+      .way {
+        h5 {
+          color: #80818a;
+          font-size: .875rem;
+        }
+        p {
+          color: #2b2b2b;
+          font-size: .875rem;
+          word-break: break-word;
+        }
+      }
+      .label-text {
+        margin-bottom: 0;
+        color: #2b2b2b;
+        font-size: .875rem;
+      }
+    }
+  }
+
+  .footer-img {
+    margin-top: -5.625rem;
+  }
+  
+  // 特殊样式小屏幕处理
+  @media screen and (max-width:400px) {
+    .form-container {
+      width: 100% !important;
+      .header {
+        .title {
+          margin-top: .625rem;
+          justify-content: center;
+        }
+      }
+      .form-box {
+        padding: 1.25rem;
+      }
+    }
+    .footer-img {
+      margin-top: 0;
+    }
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/pages/news.vue b/pages/news.vue
index bb334e3..d194c00 100644
--- a/pages/news.vue
+++ b/pages/news.vue
@@ -7,7 +7,7 @@
       <div class="row">
         <AsideTree class="col-md-3 mb-4 mb-md-0" :headerTitle="$t('news.allNews')"/>
         <main class="col-md-9">
-          <div class="header">
+          <div class="pretty-header">
             <h2>Low Bed Trailer</h2>
           </div>
           <nuxt-child />
@@ -39,34 +39,6 @@ export default {
 .content {
   width: 100%;
   height: 100%;
-  main {
-  .header {
-    height: 59px;
-    color: #ffffff;
-    text-indent: 1.375rem;
-    background: linear-gradient( 180deg, rgba(33,119,244,0.04) 0%, rgba(1,95,232,0.14) 100%);
-    border-bottom: 2px solid #0663ea;
-      h2 {
-        max-width: 19.125rem;
-        height: 100%;
-        position: relative;
-        line-height: 3.6875rem;
-        background: linear-gradient( 180deg, #2177F4 0%, #015FE8 100%);
-        font-size: 1rem;
-        &::after {
-          content: '';
-          width: 5.875rem;
-          height: 3.6875rem;
-          position: absolute;
-          top: 0;
-          right: -5.8125rem;
-          background: url('~assets/image/banner/header-top-line.png') no-repeat;
-          background-size: 100% 100%;
-          z-index: 999;
-        }
-      }
-    }
-  }
 }
 
 </style>
\ No newline at end of file
diff --git a/pages/news/_id.vue b/pages/news/_id.vue
index b8022e5..7a026f2 100644
--- a/pages/news/_id.vue
+++ b/pages/news/_id.vue
@@ -1,7 +1,70 @@
 <template>
   <!-- 新闻详情 -->
   <div class="news-info">
-    泪飙
+    <div class="info-top">
+      <h2 class="news-title">How To Maintain The Chassis Of A Truck?</h2>
+      <p class="news-date">- Oct 25, 2024-</p>
+    </div>
+
+    <div class="news-content">
+      <div></div>
+      <ContactFooter />
+      <div class="guide">
+        <nuxt-link to="/">
+          Previous: How To Maintain The Chassis Of A Truck?
+        </nuxt-link>
+
+        <nuxt-link to="/">
+          Next: Flatbed Trailer Buying Guide
+        </nuxt-link>
+      </div>
+    </div>
+
+    <div class="related-news mb-4">
+      <div class="pretty-header">
+        <h2>{{ $t('news.relatedNews') }}</h2>
+      </div>
+      <nuxt-link 
+        class="news-related-item box_shadow" 
+        to="/" 
+        v-for="item in 6" 
+        :key="item"
+      >
+        <p class="text-ellipsis">he Importance Of Regular Maintenance For Your Flatbed Trailer</p>
+        <span>- Oct 25, 2024-</span>
+      </nuxt-link>
+    </div>
+
+    <div class="related-products">
+      <div class="pretty-header">
+        <h2>{{ $t('news.relatedProducts') }}</h2>
+      </div>
+      <b-carousel
+        class="mt-3"
+        id="carousel-1"
+        :interval="4000"
+        controls
+        indicators
+      >
+        <b-carousel-slide v-for="item in 3" :key="item">
+          <template v-slot:img>
+            <ul class="row justify-content-around pl-0">
+              <li class="col-6 col-md-4 mb-4" v-for="son in 3" :key="son">
+                <article class="product-card box_shadow">
+                  <b-img src="~assets/image/banner/home-pord1.png" fluid alt="product"></b-img>
+                  <div class="product-card-content">
+                    <h4>SINOTRUK HOWO Tractor Truck Head</h4>
+                    <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
+                    <p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
+                    <p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p>
+                  </div>
+                </article>
+              </li>
+            </ul>
+          </template>
+        </b-carousel-slide>
+      </b-carousel>
+    </div>
   </div>
 </template>
 
@@ -20,5 +83,88 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.news-info {
+  .info-top {
+    padding-bottom: .5rem;
+    border-bottom: 1px solid #d8dde1;
+    .news-title {
+      margin: 1.5625rem 0;
+      margin-bottom: .9375rem;
+      color: #444444;
+      text-align: center;
+      font-size: 1.5rem;
+    }
+    .news-date {
+      color: #9e9e9e;
+      text-align: center;
+      font-size: .875rem;
+    }
+  }
+  .news-content {
+    margin-bottom: 2.6875rem;
+    .guide {
+      padding-top: .625rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      color: #515760;
+      border-top: 1px solid #d8dde1;
+      font-size: .875rem;
+    }
+  }
+  .related-news {
+    .news-related-item {
+      padding: 1.125rem 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #d8dde1;
+      font-size: .875rem;
+      p {
+        flex: 1;
+        color: #444444;
+        -webkit-line-clamp: 1;
+      }
+      span {
+        color: #9e9e9e;
+      }
+    }
+  }
+  .related-products {
+    #carousel-1 {
+      @mixin controls {
+        width: 2.875rem;
+        height: 2.875rem;
+        background-color: #7f7f7f;
+        background-size:  1.25rem;
+      }
+      ::v-deep .carousel-control-prev-icon {
+        @include controls;
+      }
+      ::v-deep .carousel-control-next-icon {
+        @include controls;
+      }
+    }
+    .product-card {
+      border: 1px solid #e6e8ec;
+      .product-card-content {
+        padding: 1.125rem 1rem;
+        border-top: .0625rem solid #e6e8ec;
+        font-size: .875rem;
+        h4 {
+          margin-bottom: .8125rem;
+          color: #212222;
+          font-size: .875rem;
+        }
+        p {
+          color: #878b90;
+        }
+        .view-details {
+          margin: 0 auto;
+          margin-top: 2rem;
+        }
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/pages/news/index.vue b/pages/news/index.vue
index fad2d1c..df8ae42 100644
--- a/pages/news/index.vue
+++ b/pages/news/index.vue
@@ -2,8 +2,8 @@
   <!-- 新闻列表 -->
   <section class="news-list">
     <nuxt-link 
-      class="news-item row mt-4" 
-      to="/"
+      class="news-item box_shadow row mt-4" 
+      to="/news/123123"
       v-for="item in 6"
       :key="item"
     >
@@ -25,7 +25,7 @@
       </article>
     </nuxt-link>
 
-    <seoPagination class="mt-4" />
+    <SeoPagination class="mt-4" />
   </section>
 </template>
 
diff --git a/plugins/main.js b/plugins/main.js
index 06f349e..198941e 100644
--- a/plugins/main.js
+++ b/plugins/main.js
@@ -2,7 +2,9 @@ import Vue from 'vue';
 import bannerTop from '@/components/banner-top.vue';
 import asideTree from '@/components/aside-tree.vue';
 import seoPagination from '@/components/seo-pagination.vue';
+import contactFooter from '@/components/contact-footer.vue';
 
 Vue.component('AsideTree', asideTree);
 Vue.component('BannerTop', bannerTop);
-Vue.component('seoPagination', seoPagination);
\ No newline at end of file
+Vue.component('SeoPagination', seoPagination);
+Vue.component('ContactFooter', contactFooter);
\ No newline at end of file