From a40836ea9b82a226bf55fa2b210d8c1548002fb2 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Wed, 18 Jun 2025 18:08:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=8C=E7=BA=A7=E9=A1=B5=E9=9D=A2=E5=88=9D?=
 =?UTF-8?q?=E6=AD=A5=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/home-imgs/close.png                | Bin 0 -> 947 bytes
 src/assets/home-imgs/control-3-mk.png         | Bin 0 -> 2679 bytes
 src/assets/home-imgs/control-3-video.png      | Bin 0 -> 592 bytes
 src/assets/home-imgs/control-3-voice.png      | Bin 0 -> 641 bytes
 src/assets/home-imgs/modal-bg.png             | Bin 0 -> 25200 bytes
 src/assets/home-imgs/upload-img.png           | Bin 0 -> 410 bytes
 src/style/cssVar.scss                         |   5 +-
 src/style/naiveUi.scss                        |  88 +++++
 src/views/home/components/center-two.vue      | 171 ++++++++--
 src/views/home/components/control-deck.vue    | 260 ++++++++++++++-
 src/views/home/components/right-one.vue       | 311 +++++++++++++++---
 src/views/home/components/right-two.vue       | 155 ---------
 src/views/home/components/right-two/index.vue | 243 ++++++++++++++
 .../home/components/right-two/taps-one.vue    |  65 ++++
 .../home/components/right-two/taps-three.vue  |  86 +++++
 .../home/components/right-two/taps-two.vue    |  98 ++++++
 src/views/home/index.vue                      |  46 ++-
 17 files changed, 1291 insertions(+), 237 deletions(-)
 create mode 100644 src/assets/home-imgs/close.png
 create mode 100644 src/assets/home-imgs/control-3-mk.png
 create mode 100644 src/assets/home-imgs/control-3-video.png
 create mode 100644 src/assets/home-imgs/control-3-voice.png
 create mode 100644 src/assets/home-imgs/modal-bg.png
 create mode 100644 src/assets/home-imgs/upload-img.png
 delete mode 100644 src/views/home/components/right-two.vue
 create mode 100644 src/views/home/components/right-two/index.vue
 create mode 100644 src/views/home/components/right-two/taps-one.vue
 create mode 100644 src/views/home/components/right-two/taps-three.vue
 create mode 100644 src/views/home/components/right-two/taps-two.vue

diff --git a/src/assets/home-imgs/close.png b/src/assets/home-imgs/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6e8bae35a221f2437baeeba00cf0f996f428092
GIT binary patch
literal 947
zcmV;k15EshP)<h;3K|Lk000e1NJLTq000#L000#T1^@s6sTZY|00001b5ch_0Itp)
z=>Px&ZAnByR5(wSRBdP+RTMqv%_f=IDmE>Y8l*J(qm=|TyQA>~>L&%I1q=RB5NQz=
zORG>3KS7~_VhgoJe^~?(1+}1Ju@KQpMUBqpqmn9BnksEkS}>AkXLhsi9hr3}Y_c1w
z@8`Sso_F6l=U!rwGg4LPoV$nMdPv;>Rs%Q*=?{>H=$V6sPDbs@x$rWoXf2%GP4F%N
zvw{wjJRyfFiHiaC0=x-84!}D(-#mRad8!#_9%w1iM#y~t;Jo1Wgh9v7cAZR0{<*mJ
zqJen`L?F03!=U5KEO!pH0r-ie@0SPO&Anu@7&Y1bgtRiLXb4ij;BL!+>!9hE>D-v4
z@i3noyb##Jcqz6&0qCV~E-#R0>YyWuJ1A*znQt!3I{ZcoZY1Ny9+;3i`^ah<Pdlzu
z^oyjAih*}O$Ev!{S~o1X=Q9qYNFC^NQwDgi5O@zZ1HUhMSH$)UfosCNw=#=GiQPqE
zM~-GKqr|=pVOtn@OPY(LvVDxi9s|5J5O`bCm?Se2+pj_1AmQ;a@4c4Q9Gz14Y?nI=
zW1eADwxgiVhCyz9i@nNr8;QLF-u~1#n>WUG7-T46dzkn3wQ!rbh`<y}u{{amP|^1u
zX~$ob*heY64&ZM9mx$OJ`raGuaz_&Pp_2+Js3hzQ^WOG$i7!ZIL+mC=tP*r2407uh
z6E7;;y&yKEppyU&7Xxqe!sG^rjW6q6lJ})lgn{=!JK$2{4nVq+rPzH7xJog|-O@(o
zBXv<4U(Tp#7H^)ovHcOy?~G#m6oH+~d~;Fr6qU-guRyL_C`!~2kHG$ByB(7*jT3iT
z4qG{%XiZJ-X9>H*y!XVMbrPi`JJf8OIZys;w}%V9=_l#Z`%+xn4{%H1o1Vr***7KJ
zTdSD<!KF+&{$J;Znd*Qs-gf|Y6$9_tI%s_{B<`qy>E*uZ`!CC6-cm_43TVb8CLHMI
z)ZCUDt7^d7R5bkQoW1+nC7q)eYPVF?^|0>a)W0;QQ0U^Zv}XQ3t>`K^_jx@DIADx<
z>6$K1ECe5(sfHb1?nx(YB5=G$vuV)h@hq=p^N;?erPg;l2t3zF`W4VQ$eaOP55OJ(
zs{m94yfQs)UcGe%&o@8Z0-6QKr4_S@y~BXF3tBC(*N`V5{RU~s1>R>NnT~GD`3Dgj
Vz$&?~VAcQt002ovPDHLkV1i0Xyo&$;

literal 0
HcmV?d00001

diff --git a/src/assets/home-imgs/control-3-mk.png b/src/assets/home-imgs/control-3-mk.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2e4bbdc405f2682f8012da7ed0f27d852b55a68
GIT binary patch
literal 2679
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%0D2L$!UavwYA}?d36m2@BSo0l>J3
zm+Y=L4NiyWfZ#TqQ-`UB&GwB-lk-ki<h|y_8qb~>pK9+WfZ4iU;&Jq*GVc<ozQFw|
z$k`lm_N&yp4bJF-VAAQz)hBxt#JCi@zd+aqpmPDE;H}KIcKDq0CWOqtOpv5VL(`ve
lp_h`QOX1{Y#lEU%{tNUuLw!^AdMW?_002ovPDHLkV1kZi3-ka0

literal 0
HcmV?d00001

diff --git a/src/assets/home-imgs/control-3-video.png b/src/assets/home-imgs/control-3-video.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2e0630adbe732a29fb99e9239f3d6d194c69344
GIT binary patch
literal 592
zcmV-W0<ZmvP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00001b5ch_0Itp)
z=>Px%3Q0skR7gw3mA^|HVHn51-^-gp+CQO#1;KXcAarPHOimOWx^~E5u~4B79UK%K
z^m2DPIyg93ut=#xhOQk-TXG2jaVRNtXgicr=szF`mYUonS5Jv=-pj>M@wWG#_kBOl
z&+kiI^2bZQA6F0XYBCvym;#Uka3hZRH-NfWDEoQ7?Usea2;7R?5@H*`bs;vg3Ljd3
z@hiS;Ftkvh;CZxG3dQ9dzneftfK!u6hS(8e-Y@V~HxHevJf&bwEEN4b-|2fh0I}!0
zV&RdW=f_@}z^TbNLzI<5PLHGmPzt0W#Cn?NI@qboGzGJs&HL@Pa{#9%4;f<BvpLd>
z=lY&fAYa77e0!?S0ZM_q79#Kqd}%n`i2h|Vm~lq=$>e}jm1h*>Je!YC?K<G6%3@;q
z0e=_(a`undWQYZKj0f%e+=>hd@!qp}GYN1+!GJr)W>>(8@tbG!wgyl_9C|jh{{!$@
zua#SoR6s8&YJ%7rxQ4~WyWGEMilQRd{Q_SYQuGzTpD=^jl~L{`6ge6?JF&>I?yPw>
z@ATQG4Y9D)u1}^x+ZAH7&q15h>(T*Os>^Vu`A;b$ZMle4ylE-iTh&Cbo7k0wm`jT!
zmWW8~rg{>))7;0Al%sVl*MTP2<FQ;Hv=pA`o*U=D*cm7KR7`kqc1&I;id{dQlXm9n
e-{dq8)9lA0WBD0jfGt)40000<MNUMnLSTYMArim<

literal 0
HcmV?d00001

diff --git a/src/assets/home-imgs/control-3-voice.png b/src/assets/home-imgs/control-3-voice.png
new file mode 100644
index 0000000000000000000000000000000000000000..df4b5afea89a554987f760d53f26e43bc070f09a
GIT binary patch
literal 641
zcmV-{0)G98P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00001b5ch_0Itp)
z=>Px%J4r-AR7gwhRXu1FQ5c-rJHcqc6c!P*2xx7JfCnabdmvb-h$sZn!XiZ~t1C|A
z_AikLS|}E3B|!v>6c#BIl-s>1Mr^bYv9h(WP_Q^5_eOVf8!q?5C7M*a<=gkZdEd-@
z^N4N!xXtzP4*>*AI?`yMEFugFyxmG|rKY2naE=C7ydvwZ|N2toRW&3Fa}cHgWC5)B
zHg~iZacVkCg9QMOeVgYu4B$k%K;b%oVGy^HgF?x-*>N!^(p3txA}$35&Zi)28{?ZA
z3zGnL#y=^X1aJ(%vdLm<W}F|KNG=601#lzX5wRHL`7A!;hFSt}kitkx)f#{s>NS8|
zOMBl$lq`dJugH~ny#rvi;8-?`(aJbK1vM2K2BC<HL4l8wi>3wLPy%stU^iytwOxBq
zzkG;4*Kys}fmhYAh>yQJed*gg)$HOkfOo#lGaUdTyr4k8*YLG>kQ9s*8=ypCpI78p
zH`GG_wr}&mmH_xQ9XAF~Ga2NZ3BGY7%|IxpPFqLOpLF2Ybix=cW-N?5dA{0mfVAMi
zAoiBW_}vZlph?k4SCMIOt*OC})IF&t?HYJh?HBPjwsI<}8>*+s)fl-&;4e+e?)L(4
zL&axujVwlIW1FtV$#UzkZD`Ok8B9A9eBWiz?uu9l@_f;E(7IXEi8M(i5itbf9)Nn&
zA)AkiUf%br8kB__5T=`Zx`o|o8a&x_*sY7?B^|aJNtiuvkL!eclf-pp({cT`Pio)y
b;6K1G`07O{m@~&p00000NkvXXu0mjfk8B)F

literal 0
HcmV?d00001

diff --git a/src/assets/home-imgs/modal-bg.png b/src/assets/home-imgs/modal-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3b82d9e74f8f39212ef6c38a3206775e273c45c
GIT binary patch
literal 25200
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

literal 0
HcmV?d00001

diff --git a/src/assets/home-imgs/upload-img.png b/src/assets/home-imgs/upload-img.png
new file mode 100644
index 0000000000000000000000000000000000000000..1d36d2411036302273e7c3b07f49dadaf185d35e
GIT binary patch
literal 410
zcmV;L0cHM)P)<h;3K|Lk000e1NJLTq001rk001ut1^@s6oaOkE00001b5ch_0Itp)
z=>Px$R7pfZRA@u(n7>QIP!xr~8^j_wIg69dI)$!oPL9rki$4%5IJ8bKB`$&>Z4q2u
z+{8aXT%_sb;-r%}I~Acta>b^Dg2F{!GRVyo$jiCs9=_c0o>0Wq>@Fj60c1q7Mm@d@
zT}DC+j`WhW18k1&RZcjF_d?ex#`sZsj<S)P)i#aljvF5*;E8`j!BP4B%Wza27317=
zR2&sY#h8GjVhqZsilgGF7!xQTmBX6}D${dh*}`8u{`gKLHPDsuvuiS1;k2Vi2K{Ft
zN$-KhV8W#c$?d0cEu~i2A_F1mUV*HJ)h$>}xfE1|)2B&ZU&8&2DpMVh_55^#Glp-q
zV6Du|D!cQ;aAv<c^UbnvmW`x3DvpYyVobnMF$U#R#Zhroj0rd@#-MzvI4b`gm891K
z-Ok(8V;a?cW6S1c#q2qoy(J=T1Mi4zQI8+Yj*JUG0IhQz(v<}85&!@I07*qoM6N<$
Ef>Hpt@c;k-

literal 0
HcmV?d00001

diff --git a/src/style/cssVar.scss b/src/style/cssVar.scss
index 53f6e00..98d30d5 100644
--- a/src/style/cssVar.scss
+++ b/src/style/cssVar.scss
@@ -17,5 +17,8 @@
     --bt-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0px 2px rgba(0, 0, 0, 0.9);
     --bt-box-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0px 2px rgba(0, 0, 0, 0.9);
     --box-shadow-2: 0 1px 0 hsl(0 calc(1 * 0%) 0.8% / 0.2),
-        0 1.5px 0 hsl(240 calc(1 * 7.7%) 2.5% / 0.05), 0 2px 0 hsl(0 calc(1 * 0%) 0.8% / 0.05);
+        0 1.5px 0 hsl(240 calc(1 * 7.7%) 2.5% / 0.05), 0 2px 0 hsl(0 calc(1 * 0%) 0.8% / 0.05);   
+    --n-border: 1px solid #7fc0ff;  
 }
+
+
diff --git a/src/style/naiveUi.scss b/src/style/naiveUi.scss
index e69de29..9186c30 100644
--- a/src/style/naiveUi.scss
+++ b/src/style/naiveUi.scss
@@ -0,0 +1,88 @@
+.n-pagination .n-pagination-item,
+.n-base-selection-input__content {
+    color: #fff;
+}
+
+.n-pagination .n-pagination-item.n-pagination-item--button {
+    color: #fff;
+}
+
+.n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button {
+    color: #fff;
+}
+
+.n-pagination .n-pagination-item.n-pagination-item--disabled.n-pagination-item--active,
+.n-pagination .n-pagination-item.n-pagination-item--disabled.n-pagination-item--button {
+    background-color: #1d3861;
+}
+.n-base-selection .n-base-selection-label {
+    background-color: #1d3861;
+    color: #fff;
+}
+
+.n-base-select-menu {
+    background-color: #1d3861 !important;
+}
+
+.n-base-select-option__content {
+    color: #ffffff !important;
+}
+
+.n-base-selection--active {
+    background-color: #1d3861 !important;
+    color: #fff !important;
+    border-color: #7dd3fc !important;
+}
+
+.n-input {
+    background-color: #1d3861;
+    border: 1px solid #1090f0;
+}
+
+.n-input:not(.n-input--disabled).n-input--focus {
+    background-color: #1d3861;
+    color: #fff;
+}
+
+.n-input .n-input__input-el,
+.n-input .n-input__textarea-el {
+    color: #fff;
+}
+
+.n-input:not(.n-input--disabled):hover .n-input__state-border {
+    // border: 1px solid #7dd3fc;
+    border: none;
+}
+
+.n-input .n-input__border,
+.n-input .n-input__state-border {
+    transition: box-shadow 0.3s var(--n-bezier) !important;
+    border: none;
+}
+
+.n-input:not(.n-input--disabled).n-input--focus .n-input__state-border {
+    border: 1px solid #7dd3fc;
+}
+
+.n-data-table .n-data-table-th {
+    background-color: #14295c;
+    color: #fff;
+    border: none;
+}
+
+.n-data-table.n-data-table--bordered .n-data-table-wrapper {
+    border: none;
+}
+
+.n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td {
+    background-color: #2f5789;
+}
+
+.n-data-table .n-data-table-td {
+    background-color: #072148;
+    color: #fff;
+}
+
+.n-form-item .n-form-item-label {
+    color: #fff;
+}
\ No newline at end of file
diff --git a/src/views/home/components/center-two.vue b/src/views/home/components/center-two.vue
index df14a4d..dc80438 100644
--- a/src/views/home/components/center-two.vue
+++ b/src/views/home/components/center-two.vue
@@ -41,30 +41,77 @@
         </div>
     </div>
 
-    <!-- 抽屉内容保持不变 -->
-    <n-drawer resizable placement="bottom" :default-height="600" v-model:show="morePanelVisible">
-        现场定点巡检拍照
+    <!-- 模态框 -->
+    <n-modal v-model:show="morePanelVisible">
+        <n-card
+            :bordered="false"
+            size="huge"
+            role="dialog"
+            aria-modal="true"
+            class="more-panel-card"
+        >
+            <n-flex justify="space-between">
+                <n-gradient-text
+                    style="font-size: 20px; font-weight: 600; letter-spacing: 2px"
+                    gradient="linear-gradient(90deg, #CDF7FD 0%, #DAFAFE 20%, #CDF7FD 40%, #DAFAFE 60%, #CDF7FD 80%, #DAFAFE 100%)"
+                >
+                    现场定点巡检拍照
+                </n-gradient-text>
 
-        <n-form ref="formRef" inline :model="searchForm" :rules="rules" label-placement="left">
-            <n-form-item>
-                <n-date-picker
-                    clearable
-                    type="daterange"
-                    style="width: 280px"
-                    placeholder="时间范围"
-                    value-format="yyyy-MM-dd"
+                <img
+                    class="close-icon"
+                    src="@/assets/home-imgs/close.png"
+                    @click="morePanelVisible = false"
                 />
-            </n-form-item>
-            <n-form-item>
-                <n-input placeholder="输入途经点" style="width: 280px" />
-            </n-form-item>
+            </n-flex>
 
-            <n-form-item>
-                <n-button attr-type="button"> 查询 </n-button>
-                <n-button attr-type="button" style="margin-left: 10px"> 重置 </n-button>
-            </n-form-item>
-        </n-form>
-    </n-drawer>
+            <n-form
+                inline
+                ref="formRef"
+                size="small"
+                label-placement="left"
+                style="margin-top: 10px"
+            >
+                <n-form-item>
+                    <n-date-picker type="daterange" clearable style="width: 240px" />
+                </n-form-item>
+                <n-form-item>
+                    <n-input placeholder="输入途经点" clearable style="width: 240px" />
+                </n-form-item>
+
+                <n-button type="info"> 查询</n-button>
+                <n-button color="#6E90A9" style="margin-left: 8px"> 重置 </n-button>
+            </n-form>
+
+            <!-- 内容区域 -->
+            <div class="table-container">
+                <!-- 分页 -->
+
+                <div v-for="item in 7" :key="item" class="table-item">
+                    <n-image
+                        width="100%"
+                        object-fit="cover"
+                        class="item-image"
+                        src="https://img1.baidu.com/it/u=3294211986,2810142789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
+                    />
+                    <div class="table-item-title">
+                        <span>途经点</span>
+                        <span>2025-06-01 10:00:00</span>
+                    </div>
+                </div>
+            </div>
+
+            <div style="margin-top: 10px; display: flex; justify-content: flex-end">
+                <n-pagination
+                    v-model:page="page"
+                    v-model:page-size="pageSize"
+                    :page-count="100"
+                    show-size-picker
+                    :page-sizes="[10, 20, 30, 40]"
+                />
+            </div>
+        </n-card>
+    </n-modal>
 </template>
 
 <script setup>
@@ -77,6 +124,9 @@ const marqueeContainer = ref(null)
 const trackWidth = ref('auto')
 const imageHeight = ref('0px')
 const itemMargin = 10 // 右边距10px
+const page = ref(1)
+const pageSize = ref(10)
+const itemCount = ref(100)
 
 // 模拟数据
 const items = ref([
@@ -293,4 +343,83 @@ onUnmounted(() => {
 }
 
 /* 抽屉样式保持不变 */
+
+.more-panel-card {
+    width: 80%;
+    height: 80vh;
+    background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
+    background-size: 100% 100%;
+}
+
+.close-icon {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.table-container {
+    height: 75%;
+    display: flex;
+    flex-wrap: wrap;
+    color: #fff;
+
+    .table-item {
+        flex-shrink: 0;
+        width: calc((100% - 30px) / 4);
+        height: calc((100% - 20px) / 2);
+        margin-right: 10px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        overflow: hidden;
+
+        .item-image {
+            // width: 100%;
+            height: 150px;
+            flex-shrink: 0;
+
+            /* 确保Naive UI的n-image组件完全填充 */
+            :deep(.n-image) {
+                // width: 100%;
+                display: block;
+
+                img {
+                    // width: 100%;
+                    // height: v-bind(imageHeight);
+                    object-fit: cover;
+                }
+            }
+        }
+
+        .table-item-title {
+            width: 100%;
+            height: 42px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 14px;
+            background: url('@/assets/home-imgs/center-two-bg.png') no-repeat center center;
+            background-size: 100% 100%;
+
+            & span:nth-child(1) {
+                margin-left: 6px;
+                font-size: 16px;
+                color: #37e7ff;
+            }
+
+            & span:nth-child(2) {
+                margin-right: 6px;
+                color: #fff;
+                font-size: 14px;
+            }
+        }
+    }
+
+    .table-item:nth-child(4n) {
+        margin-right: 0;
+    }
+}
 </style>
diff --git a/src/views/home/components/control-deck.vue b/src/views/home/components/control-deck.vue
index ab50c28..ba1c847 100644
--- a/src/views/home/components/control-deck.vue
+++ b/src/views/home/components/control-deck.vue
@@ -41,10 +41,26 @@
             <n-grid-item :span="4">
                 <div class="row-3-item-1">
                     <!-- 上下左右控制按钮 -->
-                    <img class="arrow-top" src="@/assets/home-imgs/control-2-arrow.png" alt="" />
-                    <img class="arrow-right" src="@/assets/home-imgs/control-2-arrow.png" alt="" />
-                    <img class="arrow-bottom" src="@/assets/home-imgs/control-2-arrow.png" alt="" />
-                    <img class="arrow-left" src="@/assets/home-imgs/control-2-arrow.png" alt="" />
+                    <img
+                        class="arrow-top hand-direction"
+                        src="@/assets/home-imgs/control-2-arrow.png"
+                        alt=""
+                    />
+                    <img
+                        class="arrow-right hand-direction"
+                        src="@/assets/home-imgs/control-2-arrow.png"
+                        alt=""
+                    />
+                    <img
+                        class="arrow-bottom hand-direction"
+                        src="@/assets/home-imgs/control-2-arrow.png"
+                        alt=""
+                    />
+                    <img
+                        class="arrow-left hand-direction"
+                        src="@/assets/home-imgs/control-2-arrow.png"
+                        alt=""
+                    />
 
                     <!-- 中间的按钮 -->
                     <div class="row-3-item-1-center">
@@ -102,6 +118,127 @@
                 </div>
             </n-grid-item>
         </n-grid>
+        <!-- 第四行 -->
+        <n-grid :cols="12" class="row-4">
+            <n-grid-item :span="3">
+                <div>警灯</div>
+            </n-grid-item>
+            <n-grid-item :span="3">
+                <div>
+                    <n-radio
+                        :checked="checkedValue === '关'"
+                        value="关"
+                        name="basic-demo"
+                        @change="handleChange1"
+                    >
+                        关
+                    </n-radio>
+                </div>
+            </n-grid-item>
+            <n-grid-item :span="3">
+                <div>
+                    <n-radio
+                        :checked="checkedValue === '闪烁'"
+                        value="闪烁"
+                        name="basic-demo"
+                        @change="handleChange2"
+                    >
+                        闪烁
+                    </n-radio>
+                </div>
+            </n-grid-item>
+            <n-grid-item :span="3">
+                <div class="row-4-item">
+                    <n-radio
+                        :checked="checkedValue === '运动时闪烁'"
+                        value="运动时闪烁"
+                        name="basic-demo"
+                        @change="handleChange3"
+                    >
+                        运动时闪烁
+                    </n-radio>
+                </div>
+            </n-grid-item>
+        </n-grid>
+        <!-- 第五行 -->
+        <n-grid :cols="12" class="row-5">
+            <n-grid-item :span="3">
+                <div>录音播放</div>
+            </n-grid-item>
+            <n-grid-item :span="3">
+                <div>
+                    <div>
+                        <!-- <n-select
+                            size="tiny"
+                            v-model:value="selectValue"
+                            :options="selectOptions"
+                        /> -->
+
+                        <!-- <n-select
+                            size="small"
+                            v-model:value="selectValue"
+                            :options="selectOptions"
+                        /> -->
+
+                        <n-select
+                            :options="selectOptions"
+                            size="small"
+                            :dropdown-style="{
+                                borderRadius: '4px',
+                                boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
+                                color: '#fff',
+                            }"
+                        />
+                    </div>
+                    <div style="margin-top: 16px">
+                        <n-radio
+                            :checked="checkedValue === '循环播放'"
+                            value="循环播放"
+                            name="basic-demo"
+                            @change="handleChange4"
+                        >
+                            循环播放
+                        </n-radio>
+                    </div>
+                </div>
+            </n-grid-item>
+            <n-grid-item :span="6">
+                <div class="row-5-item">
+                    <div class="row-5-item-1">
+                        <img src="@/assets/home-imgs/control-3-voice.png" alt="" />
+                        <div style="width: 60%">
+                            <n-slider
+                                :default-value="50"
+                                :step="10"
+                                :format-tooltip="formatTooltip"
+                            />
+                        </div>
+                    </div>
+                    <div class="row-5-item-1" style="margin-top: 16px">
+                        <img src="@/assets/home-imgs/control-3-video.png" alt="" />
+                        <div style="width: 60%">
+                            <n-slider
+                                :default-value="50"
+                                :step="10"
+                                :format-tooltip="formatTooltip"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </n-grid-item>
+        </n-grid>
+
+        <!-- 第六行 -->
+        <n-grid :cols="10" class="row-6">
+            <n-grid-item :span="4">
+                <div class="row-6-item">回桩充电</div>
+            </n-grid-item>
+            <n-grid-item :span="3">
+                <div class="row-6-item-1">
+                    <img src="@/assets/home-imgs/control-3-mk.png" alt="" />
+                </div>
+            </n-grid-item>
+        </n-grid>
     </div>
 </template>
 
@@ -115,6 +252,18 @@ const isDragging = ref(false)
 const currentTop = ref(0)
 const startY = ref(0)
 const startTop = ref(0)
+const checkedValue = ref('')
+const selectValue = ref('')
+const selectOptions = ref([
+    {
+        label: '录音1',
+        value: '录音1',
+    },
+    {
+        label: '录音2',
+        value: '录音2',
+    },
+])
 
 // 计算当前高度百分比(0-100)
 const currentHeight = computed(() => {
@@ -165,8 +314,30 @@ onMounted(() => {
     const maxTop = containerHeight - draggableHeight - 20
     currentTop.value = maxTop * (1 - upDownHeight.value / 100)
 })
+
+const handleChange1 = (e) => {
+    console.log(e)
+    checkedValue.value = e.target.value
+}
+const handleChange2 = (e) => {
+    console.log(e)
+    checkedValue.value = e.target.value
+}
+const handleChange3 = (e) => {
+    checkedValue.value = e.target.value
+}
+const handleChange4 = (e) => {
+    checkedValue.value = e.target.value
+}
+
+const formatTooltip = (value) => {
+    return `${value}%`
+}
 </script>
 <style lang="scss" scoped>
+.control-deck {
+    justify-content: space-between;
+}
 .row-1-item,
 .row-2-item {
     width: 100px;
@@ -214,6 +385,12 @@ onMounted(() => {
         object-fit: contain;
     }
 
+    // // 增加一个移入时的放大平滑动画效果
+    // .hand-direction:hover {
+    //     transform: scale(1.1);
+    //     transition: transform 0.3s ease-in-out;
+    // }
+
     .arrow-top {
         position: absolute;
         top: 6px;
@@ -373,4 +550,79 @@ onMounted(() => {
         touch-action: none;
     }
 }
+.row-4 {
+    margin: 24px 0;
+    .row-4-item {
+        text-align: center;
+    }
+}
+
+.row-5-item-1 {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    > img {
+        width: 20px;
+        height: 20px;
+        margin-right: 10px;
+        object-fit: contain;
+    }
+}
+
+.row-6 {
+    margin-top: 20px;
+    display: flex;
+    align-items: center;
+}
+
+.row-6-item {
+    padding: 4px 12px;
+    display: inline-block;
+    background-color: #005db6;
+    border: 1px solid #7fc0ff;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.row-6-item-1 {
+    text-align: center;
+    img {
+        width: 40px;
+        height: 60px;
+        object-fit: contain;
+        cursor: pointer;
+    }
+}
+
+:deep(.n-radio__label) {
+    color: #fff !important;
+}
+
+:deep(.n-radio__dot) {
+    background: transparent;
+    border: 1px solid #7fc0ff;
+    box-shadow: none;
+}
+
+:deep(.n-radio__dot::before) {
+    background: #7fc0ff;
+}
+
+// :deep(.n-base-selection .n-base-selection-label) {
+//     background-color: #054a92;
+//     color: #fff;
+// }
+
+:deep(.n-slider .n-slider-rail .n-slider-rail__fill) {
+    background-color: #7fc0ff;
+}
+:deep(.n-slider .n-slider-handles .n-slider-handle-wrapper .n-slider-handle) {
+    background-color: #7fc0ff;
+}
+
+:deep(.n-slider .n-slider-rail) {
+    background-color: #2d6098;
+}
 </style>
diff --git a/src/views/home/components/right-one.vue b/src/views/home/components/right-one.vue
index cfc5f93..7c55974 100644
--- a/src/views/home/components/right-one.vue
+++ b/src/views/home/components/right-one.vue
@@ -57,54 +57,232 @@
         </div>
     </div>
 
-    <!-- drawer内容保持不变 -->
+    <!-- 弹框内容 更多数据 -->
+    <n-modal v-model:show="morePanelVisible">
+        <n-card
+            :bordered="false"
+            size="huge"
+            role="dialog"
+            aria-modal="true"
+            class="more-panel-card"
+        >
+            <n-flex justify="space-between">
+                <n-gradient-text
+                    style="font-size: 20px; font-weight: 600; letter-spacing: 2px"
+                    gradient="linear-gradient(90deg, #CDF7FD 0%, #DAFAFE 20%, #CDF7FD 40%, #DAFAFE 60%, #CDF7FD 80%, #DAFAFE 100%)"
+                >
+                    人员动态
+                </n-gradient-text>
 
-    <n-drawer resizable placement="bottom" :default-height="600" v-model:show="morePanelVisible">
-        现场定点巡检拍照
-        <n-form ref="formRef" inline :model="searchForm" :rules="rules" label-placement="left">
-            <n-form-item>
-                <n-date-picker
-                    clearable
-                    type="daterange"
-                    style="width: 280px"
-                    placeholder="时间范围"
-                    value-format="yyyy-MM-dd"
+                <img
+                    class="close-icon"
+                    src="@/assets/home-imgs/close.png"
+                    @click="morePanelVisible = false"
                 />
-            </n-form-item>
-            <n-form-item>
-                <n-input placeholder="输入姓名" style="width: 280px" />
-            </n-form-item>
-            <n-form-item>
-                <n-select placeholder="选择类型" style="width: 280px" />
-            </n-form-item>
+            </n-flex>
 
-            <n-form-item>
-                <n-button attr-type="button"> 查询 </n-button>
-                <n-button attr-type="button" style="margin-left: 10px"> 重置 </n-button>
-            </n-form-item>
-        </n-form>
+            <n-form inline ref="formRef" size="small" label-placement="left">
+                <n-form-item>
+                    <n-date-picker type="daterange" clearable style="width: 240px" />
+                </n-form-item>
+                <n-form-item>
+                    <n-input placeholder="输入途经点" clearable style="width: 240px" />
+                </n-form-item>
+                <n-form-item>
+                    <n-input placeholder="类型" clearable style="width: 240px" />
+                </n-form-item>
 
-        <n-data-table :columns="columns" :data="data" title-align="center" />
-        <div class="pagination-container">
-            <n-pagination
-                v-model:page="page"
-                :page-count="100"
-                size="medium"
-                show-quick-jumper
-                show-size-picker
-            />
-        </div>
-    </n-drawer>
+                <n-button type="info"> 查询</n-button>
+                <n-button color="#6E90A9" style="margin-left: 8px"> 重置 </n-button>
+                <n-button type="info" style="margin-left: 10px" @click="onHandleAddPerson">
+                    新增项目部人员
+                </n-button>
+            </n-form>
+
+            <!-- 内容区域 -->
+            <n-data-table :columns="columns" :data="data" />
+            <div style="margin-top: 10px; display: flex; justify-content: flex-end">
+                <n-pagination
+                    v-model:page="page"
+                    v-model:page-size="pageSize"
+                    :page-count="100"
+                    show-size-picker
+                    :page-sizes="[10, 20, 30, 40]"
+                />
+            </div>
+        </n-card>
+    </n-modal>
+
+    <!-- 弹框内容 新增项目部人员 -->
+    <n-modal v-model:show="addPersonPanelVisible">
+        <n-card
+            :bordered="false"
+            size="huge"
+            role="dialog"
+            aria-modal="true"
+            class="add-person-panel-card"
+        >
+            <n-flex justify="space-between">
+                <n-gradient-text
+                    style="font-size: 20px; font-weight: 600; letter-spacing: 2px"
+                    gradient="linear-gradient(90deg, #CDF7FD 0%, #DAFAFE 20%, #CDF7FD 40%, #DAFAFE 60%, #CDF7FD 80%, #DAFAFE 100%)"
+                >
+                    新增项目部人员
+                </n-gradient-text>
+
+                <img
+                    class="close-icon"
+                    src="@/assets/home-imgs/close.png"
+                    @click="addPersonPanelVisible = false"
+                />
+            </n-flex>
+
+            <n-form
+                ref="addPersonFormRef"
+                label-placement="left"
+                size="small"
+                label-width="80"
+                style="margin-top: 10px"
+            >
+                <n-form-item label="姓名">
+                    <n-input placeholder="姓名" clearable />
+                </n-form-item>
+
+                <n-form-item label="联系方式">
+                    <n-input placeholder="联系方式" clearable />
+                </n-form-item>
+                <div class="name-phone-photo">
+                    <!-- <div class="name">
+                        <n-form-item>
+                            <n-input placeholder="姓名" clearable />
+                        </n-form-item>
+                    </div>
+                    <div class="phone">
+                        <n-form-item>
+                            <n-input placeholder="姓名" clearable />
+                        </n-form-item>
+                    </div>
+                    <div class="photo">
+                        <n-form-item>
+                            <n-input placeholder="姓名" clearable />
+                        </n-form-item>
+                    </div> -->
+
+                    <!-- <div class="left">
+                      
+                    </div>
+
+                    <div class="right">
+                       
+                    </div> -->
+                </div>
+
+                <n-form-item label="岗位工种">
+                    <n-input placeholder="岗位工种" clearable />
+                </n-form-item>
+                <n-form-item label="年龄">
+                    <n-input placeholder="年龄" clearable />
+                </n-form-item>
+
+                <n-form-item label="人脸照片">
+                    <!-- <n-upload
+                        action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+                        :headers="{
+                            'naive-info': 'hello!',
+                        }"
+                        :data="{
+                            'naive-data': 'cool! naive!',
+                        }"
+                    >
+                        <img src="@/assets/home-imgs/upload-img.png" alt="" />
+                    </n-upload> -->
+
+                    <n-upload
+                        action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+                        :default-file-list="previewFileList"
+                        list-type="image-card"
+                        @preview="handlePreview"
+                    />
+                    <n-modal
+                        preset="card"
+                        v-model:show="showModal"
+                        style="width: 600px"
+                        title="一张很酷的图片"
+                    >
+                        <img :src="previewImageUrl" style="width: 100%" />
+                    </n-modal>
+
+                    <n-button type="info" style="width: 20%"> 保存 </n-button>
+                </n-form-item>
+            </n-form>
+        </n-card>
+    </n-modal>
 </template>
 
 <script setup>
+import { NTag } from 'naive-ui'
 import TitleBackground from '@/components/TitleBackground/index.vue'
-import { ref, onMounted, onUpdated, nextTick } from 'vue'
+import { ref, onMounted, onUpdated, nextTick, h } from 'vue'
 
-const morePanelVisible = ref(false)
-const contentContainer = ref(null)
-const shouldScroll = ref(false)
+const morePanelVisible = ref(false) // 更多数据弹框
+const addPersonPanelVisible = ref(false) // 新增项目部人员弹框
+const addPersonFormRef = ref(null) // 新增项目部人员表单
+const contentContainer = ref(null) // 人员动态内容区域
+const shouldScroll = ref(false) // 是否需要滚动
 const page = ref(1)
+const pageSize = ref(10)
+
+const columns = ref([
+    {
+        title: '日期时间',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '图片',
+        key: 'tags',
+        align: 'center',
+        render(row) {
+            const tags = row.tags.map((tagKey) => {
+                return h(
+                    NTag,
+                    {
+                        style: {
+                            marginRight: '6px',
+                        },
+                        type: 'info',
+                        bordered: false,
+                    },
+                    {
+                        default: () => tagKey,
+                    },
+                )
+            })
+            return tags
+        },
+    },
+    {
+        title: '姓名',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '年龄',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '工种',
+        key: 'age',
+        align: 'center',
+    },
+])
+const data = ref([
+    {
+        age: '2025-06-01 10:00:00',
+        tags: ['nice'],
+    },
+])
 
 // 计算是否需要滚动
 const checkIfShouldScroll = () => {
@@ -137,6 +315,12 @@ onUpdated(() => {
 const onHandleMore = () => {
     morePanelVisible.value = true
 }
+
+// 新增项目部人员
+const onHandleAddPerson = () => {
+    console.log('新增项目部人员')
+    addPersonPanelVisible.value = true
+}
 </script>
 
 <style lang="scss" scoped>
@@ -225,4 +409,55 @@ const onHandleMore = () => {
         transform: translateY(var(--scroll-distance, -100%));
     }
 }
+
+.more-panel-card {
+    width: 70%;
+    height: 75vh;
+    background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
+    background-size: 100% 100%;
+}
+
+.close-icon {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.add-person-panel-card {
+    width: 40%;
+    height: 50vh;
+    background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
+    background-size: 100% 100%;
+}
+
+.name-phone-photo {
+    display: flex;
+    justify-content: space-between;
+
+    .right {
+        width: 40%;
+        height: 97px;
+        display: flex;
+        align-items: center;
+        background-color: #1d3861;
+        border: 1px solid #1090f0;
+    }
+
+    .left {
+        width: 58%;
+    }
+}
+
+.n-upload-trigger {
+    // display: flex;
+    // flex-direction: column;
+    // align-items: center;
+    // justify-content: center;
+
+    img {
+        width: 28px;
+        height: 28px;
+        cursor: pointer;
+    }
+}
 </style>
diff --git a/src/views/home/components/right-two.vue b/src/views/home/components/right-two.vue
deleted file mode 100644
index a55ed92..0000000
--- a/src/views/home/components/right-two.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-    <!-- 右二 ---- 智能对比 -->
-    <div class="right-two child-container">
-        <div class="title-container">
-            <TitleBackground :title="`智能对比`" />
-            <div class="more-btn">更多</div>
-        </div>
-
-        <!-- 内容区域 -->
-        <div class="content-container">
-            <div class="content-item" v-for="item in 4" :key="item" :class="`item-${item}`">
-                <div>
-                    <span style="padding-left: 10px; font-size: 16px"> 巡检次数 </span>
-                    <span style="padding-left: 10px; font-size: 14px"> 总数： </span>
-                    <span> 100 </span>
-                </div>
-                <div>
-                    <span style="padding-left: 10px; font-size: 18px; font-weight: bold"> 26 </span>
-                    <span style="font-size: 14px"> 次 </span>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <n-drawer resizable placement="bottom" :default-height="600" v-model:show="morePanelVisible">
-        现场定点巡检拍照
-
-        <n-form ref="formRef" inline :model="searchForm" :rules="rules" label-placement="left">
-            <n-form-item>
-                <n-date-picker
-                    clearable
-                    type="daterange"
-                    style="width: 280px"
-                    placeholder="时间范围"
-                    value-format="yyyy-MM-dd"
-                />
-            </n-form-item>
-            <n-form-item>
-                <n-input placeholder="输入姓名" style="width: 280px" />
-            </n-form-item>
-            <n-form-item>
-                <n-select placeholder="选择类型" style="width: 280px" />
-            </n-form-item>
-
-            <n-form-item>
-                <n-button attr-type="button"> 查询 </n-button>
-                <n-button attr-type="button" style="margin-left: 10px"> 重置 </n-button>
-            </n-form-item>
-        </n-form>
-
-        <n-data-table :columns="columns" :data="data" title-align="center" />
-        <div class="pagination-container">
-            <n-pagination
-                v-model:page="page"
-                :page-count="100"
-                size="medium"
-                show-quick-jumper
-                show-size-picker
-            />
-        </div>
-    </n-drawer>
-</template>
-
-<script setup>
-import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3'
-
-const morePanelVisible = ref(false)
-const searchForm = ref({})
-const page = ref(1)
-
-const data = ref([
-    {
-        name: '2025-06-16 10:00:00',
-        age: '1',
-        address: '1',
-        tags: '1',
-        actions: '1',
-    },
-])
-const columns = ref([
-    {
-        title: '日期时间',
-        key: 'name',
-    },
-    {
-        title: '图片',
-        key: 'age',
-    },
-    {
-        title: '姓名',
-        key: 'address',
-    },
-    {
-        title: '性别',
-        key: 'tags',
-    },
-    {
-        title: '工种',
-        key: 'actions',
-    },
-])
-
-const onHandleMore = () => {
-    console.log('更多')
-    morePanelVisible.value = true
-}
-</script>
-
-<style lang="scss" scoped>
-.right-two {
-    .title-container {
-        position: relative;
-
-        .more-btn {
-            position: absolute;
-            right: 0;
-            top: 0;
-        }
-    }
-}
-
-.content-container {
-    flex: 1;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: repeat(4, 1fr);
-    gap: 10px;
-    padding: 20px 2px;
-
-    .content-item {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-around;
-        border: 1px solid #00deff;
-        color: #b9e8fe;
-    }
-
-    .item-1 {
-        grid-column: 1 / 3;
-        grid-row: 1 / 3;
-    }
-    .item-2 {
-        grid-column: 3 / 5;
-        grid-row: 1 / 3;
-    }
-    .item-3 {
-        grid-column: 1 / 3;
-        grid-row: 3 / 5;
-    }
-    .item-4 {
-        grid-column: 3 / 5;
-        grid-row: 3 / 5;
-    }
-}
-</style>
diff --git a/src/views/home/components/right-two/index.vue b/src/views/home/components/right-two/index.vue
new file mode 100644
index 0000000..d702d34
--- /dev/null
+++ b/src/views/home/components/right-two/index.vue
@@ -0,0 +1,243 @@
+<template>
+    <!-- 右二 ---- 智能对比 -->
+    <div class="right-two child-container">
+        <div class="title-container">
+            <TitleBackground :title="`智能对比`" />
+            <div class="more-btn" @click="onHandleMore">更多</div>
+        </div>
+
+        <!-- 内容区域 -->
+        <div class="content-container">
+            <div class="content-item" v-for="item in 4" :key="item" :class="`item-${item}`">
+                <div>
+                    <span style="padding-left: 10px; font-size: 16px"> 巡检次数 </span>
+                    <span style="padding-left: 10px; font-size: 14px"> 总数： </span>
+                    <span> 100 </span>
+                </div>
+                <div>
+                    <span style="padding-left: 10px; font-size: 18px; font-weight: bold"> 26 </span>
+                    <span style="font-size: 14px"> 次 </span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 弹框内容 -->
+    <n-modal v-model:show="morePanelVisible">
+        <n-card
+            :bordered="false"
+            size="huge"
+            role="dialog"
+            aria-modal="true"
+            class="more-panel-card"
+        >
+            <n-flex justify="space-between">
+                <n-gradient-text
+                    style="font-size: 20px; font-weight: 600; letter-spacing: 2px"
+                    gradient="linear-gradient(90deg, #CDF7FD 0%, #DAFAFE 20%, #CDF7FD 40%, #DAFAFE 60%, #CDF7FD 80%, #DAFAFE 100%)"
+                >
+                    人员动态
+                </n-gradient-text>
+
+                <img
+                    class="close-icon"
+                    src="@/assets/home-imgs/close.png"
+                    @click="morePanelVisible = false"
+                />
+            </n-flex>
+
+            <div class="tabs-btns">
+                <div
+                    class="tabs-btn"
+                    :key="item.name"
+                    v-for="(item, index) in tapsBtns"
+                    :class="{ active: activeIndex === index }"
+                    @click="onHandleTabs(item.component, index)"
+                >
+                    {{ item.name }}
+                </div>
+            </div>
+
+            <component :is="componentMap[currentComponent]" />
+        </n-card>
+    </n-modal>
+</template>
+
+<script setup>
+import { NTag } from 'naive-ui'
+import { ref, onMounted, onUpdated, nextTick, h } from 'vue'
+import TapsOne from './taps-one.vue'
+import TapsTwo from './taps-two.vue'
+import TapsThree from './taps-three.vue'
+
+const morePanelVisible = ref(false)
+const contentContainer = ref(null)
+const shouldScroll = ref(false)
+const page = ref(1)
+const pageSize = ref(10)
+const activeIndex = ref(0)
+const currentComponent = ref('comp-a')
+const componentMap = {
+    'comp-a': TapsOne,
+    'comp-b': TapsTwo,
+    'comp-c': TapsThree,
+}
+
+const tapsBtns = ref([
+    {
+        name: '巡检次数',
+        component: 'comp-a',
+    },
+    {
+        name: '巡检照片',
+        component: 'comp-b',
+    },
+    {
+        name: '比对结果',
+        component: 'comp-c',
+    },
+])
+
+const columns = ref([
+    {
+        title: '日期时间',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '图片',
+        key: 'tags',
+        align: 'center',
+        render(row) {
+            const tags = row.tags.map((tagKey) => {
+                return h(
+                    NTag,
+                    {
+                        style: {
+                            marginRight: '6px',
+                        },
+                        type: 'info',
+                        bordered: false,
+                    },
+                    {
+                        default: () => tagKey,
+                    },
+                )
+            })
+            return tags
+        },
+    },
+    {
+        title: '姓名',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '年龄',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '工种',
+        key: 'age',
+        align: 'center',
+    },
+])
+const data = ref([
+    {
+        age: '2025-06-01 10:00:00',
+        tags: ['nice'],
+    },
+])
+
+const onHandleMore = () => {
+    console.log('更多')
+    morePanelVisible.value = true
+}
+
+const onHandleTabs = (component, index) => {
+    activeIndex.value = index
+    currentComponent.value = component
+}
+</script>
+
+<style lang="scss" scoped>
+.right-two {
+    .title-container {
+        position: relative;
+
+        .more-btn {
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+    }
+}
+
+.content-container {
+    flex: 1;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: repeat(4, 1fr);
+    gap: 10px;
+    padding: 20px 2px;
+
+    .content-item {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-around;
+        border: 1px solid #00deff;
+        color: #b9e8fe;
+    }
+
+    .item-1 {
+        grid-column: 1 / 3;
+        grid-row: 1 / 3;
+    }
+    .item-2 {
+        grid-column: 3 / 5;
+        grid-row: 1 / 3;
+    }
+    .item-3 {
+        grid-column: 1 / 3;
+        grid-row: 3 / 5;
+    }
+    .item-4 {
+        grid-column: 3 / 5;
+        grid-row: 3 / 5;
+    }
+}
+
+.more-panel-card {
+    width: 80%;
+    height: 80vh;
+    background: url('@/assets/home-imgs/modal-bg.png') no-repeat center center;
+    background-size: 100% 100%;
+}
+
+.close-icon {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.tabs-btns {
+    display: flex;
+    margin: 20px 0;
+
+    .tabs-btn {
+        width: 100px;
+        height: 42px;
+        background-color: #1b4589;
+        color: #fff;
+        text-align: center;
+        line-height: 42px;
+        cursor: pointer;
+    }
+
+    .active {
+        background-color: #1090f0;
+        border-radius: 8px;
+    }
+}
+</style>
diff --git a/src/views/home/components/right-two/taps-one.vue b/src/views/home/components/right-two/taps-one.vue
new file mode 100644
index 0000000..fe0ac17
--- /dev/null
+++ b/src/views/home/components/right-two/taps-one.vue
@@ -0,0 +1,65 @@
+<template>
+    <n-form inline ref="formRef" size="small" label-placement="left">
+        <n-form-item>
+            <n-date-picker type="daterange" clearable style="width: 240px" />
+        </n-form-item>
+
+        <n-form-item>
+            <n-button type="info"> 查询 </n-button>
+            <n-button color="#6E90A9" style="margin-left: 10px"> 重置 </n-button>
+        </n-form-item>
+    </n-form>
+
+    <!-- 内容区域 -->
+    <n-data-table :columns="columns" :data="data" />
+    <div style="margin-top: 10px; display: flex; justify-content: flex-end">
+        <n-pagination
+            v-model:page="page"
+            v-model:page-size="pageSize"
+            :page-count="100"
+            show-size-picker
+            :page-sizes="[10, 20, 30, 40]"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const page = ref(1)
+const pageSize = ref(10)
+
+const columns = ref([
+    {
+        title: '巡检日期',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '巡检开始时间',
+        key: 'tags',
+        align: 'center',
+    },
+    {
+        title: '巡检结束时间',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '巡检照片',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '巡检时长',
+        key: 'age',
+        align: 'center',
+    },
+])
+const data = ref([
+    {
+        age: '2025-06-01 10:00:00',
+        tags: ['nice'],
+    },
+])
+</script>
diff --git a/src/views/home/components/right-two/taps-three.vue b/src/views/home/components/right-two/taps-three.vue
new file mode 100644
index 0000000..c8182a0
--- /dev/null
+++ b/src/views/home/components/right-two/taps-three.vue
@@ -0,0 +1,86 @@
+<template>
+    <n-form inline ref="formRef" size="small" label-placement="left">
+        <n-form-item>
+            <n-date-picker type="daterange" clearable style="width: 240px" />
+        </n-form-item>
+        <n-form-item>
+            <n-input placeholder="输入途经点" clearable style="width: 240px" />
+        </n-form-item>
+        <n-form-item>
+            <n-input placeholder="类型" clearable style="width: 240px" />
+        </n-form-item>
+
+        <n-form-item>
+            <n-button type="info"> 查询 </n-button>
+            <n-button color="#6E90A9" style="margin-left: 10px"> 重置 </n-button>
+        </n-form-item>
+    </n-form>
+
+    <!-- 内容区域 -->
+    <n-data-table :columns="columns" :data="data" />
+    <div style="margin-top: 10px; display: flex; justify-content: flex-end">
+        <n-pagination
+            v-model:page="page"
+            v-model:page-size="pageSize"
+            :page-count="100"
+            show-size-picker
+            :page-sizes="[10, 20, 30, 40]"
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const page = ref(1)
+const pageSize = ref(10)
+
+const columns = ref([
+    {
+        title: '途经点',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '比对时间',
+        key: 'tags',
+        align: 'center',
+    },
+    {
+        title: '第一张巡检照片',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '上一次巡检照片',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '比对结果',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '第一张巡检照片拍摄时间',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '上一次巡检照片拍摄时间',
+        key: 'age',
+        align: 'center',
+    },
+    {
+        title: '相似度',
+        key: 'age',
+        align: 'center',
+    },
+])
+const data = ref([
+    {
+        age: '2025-06-01 10:00:00',
+        tags: ['nice'],
+    },
+])
+</script>
diff --git a/src/views/home/components/right-two/taps-two.vue b/src/views/home/components/right-two/taps-two.vue
new file mode 100644
index 0000000..b063ff9
--- /dev/null
+++ b/src/views/home/components/right-two/taps-two.vue
@@ -0,0 +1,98 @@
+<template>
+    <div class="table-container">
+        <!-- 分页 -->
+
+        <div v-for="item in 7" :key="item" class="table-item">
+            <n-image
+                width="100%"
+                object-fit="cover"
+                class="item-image"
+                src="https://img1.baidu.com/it/u=3294211986,2810142789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
+            />
+            <div class="table-item-title">
+                <span>途经点</span>
+                <span>2025-06-01 10:00:00</span>
+            </div>
+        </div>
+    </div>
+
+    <div style="margin-top: 10px; display: flex; justify-content: flex-end">
+        <n-pagination
+            v-model:page="page"
+            v-model:page-size="pageSize"
+            :page-count="100"
+            show-size-picker
+            :page-sizes="[10, 20, 30, 40]"
+        />
+    </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.table-container {
+    height: 75%;
+    display: flex;
+    flex-wrap: wrap;
+    color: #fff;
+
+    .table-item {
+        flex-shrink: 0;
+        width: calc((100% - 30px) / 4);
+        height: calc((100% - 20px) / 2);
+        margin-right: 10px;
+        margin-bottom: 10px;
+        border-radius: 5px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-between;
+        overflow: hidden;
+
+        .item-image {
+            // width: 100%;
+            height: 120px;
+            flex-shrink: 0;
+
+            /* 确保Naive UI的n-image组件完全填充 */
+            :deep(.n-image) {
+                // width: 100%;
+                display: block;
+
+                img {
+                    // width: 100%;
+                    // height: v-bind(imageHeight);
+                    object-fit: cover;
+                }
+            }
+        }
+
+        .table-item-title {
+            width: 100%;
+            height: 42px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 14px;
+            background: url('@/assets/home-imgs/center-two-bg.png') no-repeat center center;
+            background-size: 100% 100%;
+
+            & span:nth-child(1) {
+                margin-left: 6px;
+                font-size: 16px;
+                color: #37e7ff;
+            }
+
+            & span:nth-child(2) {
+                margin-right: 6px;
+                color: #fff;
+                font-size: 14px;
+            }
+        }
+    }
+
+    .table-item:nth-child(4n) {
+        margin-right: 0;
+    }
+}
+</style>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 6935a38..85a2ad8 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -58,14 +58,12 @@
     </div>
 
     <!-- 操作面板 -->
-    <n-drawer
-        resizable
-        placement="right"
-        :default-width="502"
-        v-model:show="operationPanelVisible"
-        class="operation-panel"
-    >
-        这里是机器人的操作面板
+    <n-drawer resizable placement="right" :default-width="502" v-model:show="operationPanelVisible">
+        <div class="operation-panel-container">
+            <div class="operation-panel-content">
+                <ControlDeck />
+            </div>
+        </div>
     </n-drawer>
 </template>
 
@@ -77,11 +75,11 @@ import LeftTwo from './components/left-two.vue'
 import CenterOne from './components/center-one.vue'
 import CenterTwo from './components/center-two.vue'
 import RightOne from './components/right-one.vue'
-import RightTwo from './components/right-two.vue'
+import RightTwo from './components/right-two/index.vue'
 import ControlDeck from './components/control-deck.vue'
 
 const appRef = ref(null) // 获取 DOM 引用
-const fullScreenVisible = ref(true) // 全屏状态
+const fullScreenVisible = ref(false) // 全屏状态
 
 // 使用 useScale Hook（直接调用，无需在 setup() 里）
 const { baseWidth, baseHeight, scale } = useScale(appRef)
@@ -146,20 +144,14 @@ const onHandleFullScreenToggle = (visible) => {
     }
     .full-screen-right1 {
         grid-column: 9 / 13;
-        grid-row: 1 / 7;
+        grid-row: 1 / 6;
     }
     .full-screen-right2 {
         grid-column: 9 / 13;
-        grid-row: 7 / 13;
+        grid-row: 6 / 13;
     }
 }
 
-.n-drawer.n-drawer--right-placement {
-    top: 50% !important;
-    bottom: 10px !important;
-    right: 10px !important;
-}
-
 .pagination-container {
     display: flex;
     justify-content: flex-end;
@@ -186,4 +178,22 @@ const onHandleFullScreenToggle = (visible) => {
     line-height: 24px;
     cursor: pointer;
 }
+
+.n-drawer {
+    background-color: rgba(0, 0, 0, 0.8);
+}
+
+.operation-panel-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    .operation-panel-content {
+        width: 90%;
+        background-color: rgba(0, 112, 190, 0.3);
+        color: #fff;
+        border: 1px solid #0070be;
+    }
+}
 </style>