diff --git a/public/images/home/home-view/comprehensive-active.png b/public/images/home/home-view/comprehensive-active.png
deleted file mode 100644
index 40fed6eb..00000000
Binary files a/public/images/home/home-view/comprehensive-active.png and /dev/null differ
diff --git a/public/images/home/home-view/comprehensive.png b/public/images/home/home-view/comprehensive.png
index f43dcf56..f0158d6b 100644
Binary files a/public/images/home/home-view/comprehensive.png and b/public/images/home/home-view/comprehensive.png differ
diff --git a/public/images/home/home-view/device-active.png b/public/images/home/home-view/device-active.png
deleted file mode 100644
index 20f6e922..00000000
Binary files a/public/images/home/home-view/device-active.png and /dev/null differ
diff --git a/public/images/home/home-view/device.png b/public/images/home/home-view/device.png
index 7dd611e7..1c06d12b 100644
Binary files a/public/images/home/home-view/device.png and b/public/images/home/home-view/device.png differ
diff --git a/public/images/home/home-view/ops-active.png b/public/images/home/home-view/ops-active.png
deleted file mode 100644
index 5dc0fbfb..00000000
Binary files a/public/images/home/home-view/ops-active.png and /dev/null differ
diff --git a/public/images/home/home-view/ops.png b/public/images/home/home-view/ops.png
index fc20c1da..d4b882c2 100644
Binary files a/public/images/home/home-view/ops.png and b/public/images/home/home-view/ops.png differ
diff --git a/src/views/account/Center/components/HomeView/index.vue b/src/views/account/Center/components/HomeView/index.vue
index a0a3c74f..ddc4d8d4 100644
--- a/src/views/account/Center/components/HomeView/index.vue
+++ b/src/views/account/Center/components/HomeView/index.vue
@@ -4,23 +4,17 @@
             <div
                 :span="8"
                 class="select-item"
-                @click="currentView = 'device'"
+                v-for="item in list"
+                :key="item.id"
+                @click="currentView = item.id"
+                :class="{
+                    active: currentView === item.id,
+                }"
             >
-                <img :src="getImage(`/home/home-view/device${currentView === 'device' ? '-active' : ''}.png`)" alt="" />
-            </div>
-            <div
-                :span="8"
-                class="select-item"
-                @click="currentView = 'ops'"
-            >
-                <img :src="getImage(`/home/home-view/ops${currentView === 'ops' ? '-active' : ''}.png`)" alt="" />
-            </div>
-            <div
-                :span="8"
-                class="select-item"
-                @click="currentView = 'comprehensive'"
-            >
-                <img :src="getImage(`/home/home-view/comprehensive${currentView === 'comprehensive' ? '-active' : ''}.png`)" alt="" />
+                <div class="select-item-box">
+                    <div class="title">{{ item.name }}</div>
+                </div>
+                <img :src="getImage(`/home/home-view/${item.id}.png`)" alt="" />
             </div>
         </div>
         <div class="btn">
@@ -35,6 +29,20 @@ import { getImage, onlyMessage } from '@/utils/comm';
 
 const currentView = ref<string>('');
 const isApiUser = ref<boolean>();
+const list = [
+    {
+        id: 'device',
+        name: '设备接入视图',
+    },
+    {
+        id: 'ops',
+        name: '运营管理视图',
+    },
+    {
+        id: 'comprehensive',
+        name: '综合管理视图',
+    },
+];
 
 function getViews() {
     // 判断是否是api用户 不是则获取选中的视图
@@ -82,11 +90,37 @@ onMounted(() => {
         .select-item {
             cursor: pointer;
             width: 30%;
+            border-radius: 14px;
+            overflow: hidden;
+            color: #333333;
+
+            .select-item-box {
+                position: relative;
+                width: 100%;
+                .title {
+                    position: absolute;
+                    top: 36px;
+                    left: 36px;
+                    font-size: 24px;
+                }
+            }
 
             img {
                 width: 100%;
+                height: 100%;
                 background-size: cover;
             }
+
+            &.active {
+                border: 1px solid @primary-color-active;
+                color: @primary-color-active;
+            }
+
+            &:hover {
+                box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),
+                    0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+                    0px 9px 16px 8px rgba(0, 0, 0, 0.1);
+            }
         }
     }
 
diff --git a/src/views/home/components/InitHome/index.vue b/src/views/home/components/InitHome/index.vue
index 143dec54..2df4dbd9 100644
--- a/src/views/home/components/InitHome/index.vue
+++ b/src/views/home/components/InitHome/index.vue
@@ -7,23 +7,20 @@
                 <div
                     :span="8"
                     class="select-item"
-                    @click="selectValue = 'device'"
+                    v-for="item in list"
+                    :key="item.id"
+                    @click="selectValue = item.id"
+                    :class="{
+                        active: selectValue === item.id,
+                    }"
                 >
-                    <img :src="getImage(`/home/home-view/device${selectValue === 'device' ? '-active' : ''}.png`)" alt="" />
-                </div>
-                <div
-                    :span="8"
-                    class="select-item"
-                    @click="selectValue = 'ops'"
-                >
-                    <img :src="getImage(`/home/home-view/ops${selectValue === 'ops' ? '-active' : ''}.png`)" alt="" />
-                </div>
-                <div
-                    :span="8"
-                    class="select-item"
-                    @click="selectValue = 'comprehensive'"
-                >
-                    <img :src="getImage(`/home/home-view/comprehensive${selectValue === 'comprehensive' ? '-active' : ''}.png`)" alt="" />
+                    <div class="select-item-box">
+                        <div class="select-title">{{ item.name }}</div>
+                    </div>
+                    <img
+                        :src="getImage(`/home/home-view/${item.id}.png`)"
+                        alt=""
+                    />
                 </div>
             </div>
             <div class="btn">
@@ -38,6 +35,21 @@ import { setView_api } from '@/api/home';
 import { getImage } from '@/utils/comm';
 import { useUserInfo } from '@/store/userInfo';
 
+const list = [
+    {
+        id: 'device',
+        name: '设备接入视图',
+    },
+    {
+        id: 'ops',
+        name: '运营管理视图',
+    },
+    {
+        id: 'comprehensive',
+        name: '综合管理视图',
+    },
+];
+
 const user = useUserInfo();
 const emits = defineEmits(['refresh']);
 const selectValue = ref('device');
@@ -89,11 +101,37 @@ watch(
             .select-item {
                 cursor: pointer;
                 width: 30%;
+                border-radius: 14px;
+                overflow: hidden;
+                color: #333333;
+
+                .select-item-box {
+                    position: relative;
+                    width: 100%;
+                    .select-title {
+                        position: absolute;
+                        top: 36px;
+                        left: 36px;
+                        font-size: 24px;
+                    }
+                }
 
                 img {
                     width: 100%;
+                    height: 100%;
                     background-size: cover;
                 }
+
+                &.active {
+                    border: 1px solid @primary-color-active;
+                    color: @primary-color-active;
+                }
+
+                &:hover {
+                    box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),
+                        0px 6px 16px 0px rgba(0, 0, 0, 0.08),
+                        0px 9px 16px 8px rgba(0, 0, 0, 0.1);
+                }
             }
         }