diff --git a/code/frontend/src/components/user/HeaderBar2.vue b/code/frontend/src/components/user/HeaderBar2.vue
index e6c44b0..158f250 100644
--- a/code/frontend/src/components/user/HeaderBar2.vue
+++ b/code/frontend/src/components/user/HeaderBar2.vue
@@ -45,7 +45,7 @@ export default {
     return {
       items: [
         { icon: 'nav-tab-item_icon iconfont icon-home', label: '首页', path: '/home'},
-        { icon: 'nav-tab-item_icon iconfont icon-send-fill', label: '虚拟体验', path: '/effect'},
+        { icon: 'nav-tab-item_icon iconfont icon-send-fill', label: '虚拟体验', path: '/experience'},
         { icon: 'nav-tab-item_icon iconfont icon-shujuxianshi', label: '线下活动', path: '/big-screen'},
         { icon: 'nav-tab-item_icon iconfont icon-zhinengtuijian', label: '论坛', path: '/recommend'},
         /*{ icon: 'nav-tab-item_icon iconfont icon-project_info', label: '背景介绍', path: '/background'},
diff --git a/code/frontend/src/components/user/Pagination.vue b/code/frontend/src/components/user/Pagination.vue
index 812f1a3..f1cf684 100644
--- a/code/frontend/src/components/user/Pagination.vue
+++ b/code/frontend/src/components/user/Pagination.vue
@@ -1,12 +1,13 @@
 /**
 * 分页组件
-*/ 
+*/
 <template>
   <el-pagination class="page-box" @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="childMsg.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="childMsg.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="childMsg.total">
   </el-pagination>
 </template>
 <script>
 export default {
+  // eslint-disable-next-line vue/multi-word-component-names
   name: 'Pagination',
   props: ['childMsg'],
   data() {
diff --git a/code/frontend/src/components/user/Search.vue b/code/frontend/src/components/user/Search.vue
index 4d64647..f6a34be 100644
--- a/code/frontend/src/components/user/Search.vue
+++ b/code/frontend/src/components/user/Search.vue
@@ -1,78 +1,77 @@
 <template>
   <div>
-    <el-form :inline="true" :model="search_data" class="user-search">
-      <el-form-item label="搜索：">
-        <el-select size="medium" v-model="search_data" placeholder="请选择地区" @change="updateChart">
-          <el-option
-              v-for="item in emotionOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="">
-        <el-input size="small"
-                  v-model="search_data.searchCountry"
-                  placeholder="请输入评论所属的国家"
-                  @keypress.enter.native="search"
-                  clearable
-        >
+    <div style="margin-bottom: 20px">
+      <el-select style="width: 150px; margin-right: 10px" v-model="search_data.area" placeholder="请选择地区">
+        <el-option
+            v-for="item in options.area"
+            :key="item"
+            :label="item"
+            :value="item">
+        </el-option>
+      </el-select>
+      <el-select style="width: 180px; margin-right: 10px" v-model="search_data.releaseTime" placeholder="请选择公布时间">
+        <el-option
+            v-for="item in options.releaseTime"
+            :key="item"
+            :label="item"
+            :value="item">
+        </el-option>
+      </el-select>
+      <el-input
+                style="width: 220px; margin-right: 20px"
+                v-model="search_data.name"
+                placeholder="请输入关键词：项目名称"
+                clearable>
+      </el-input>
+      <el-button type="primary">搜索</el-button>
+    </div>
 
-        </el-input>
-      </el-form-item>
-      <el-form-item label="">
-        <el-input size="small"
-                  v-model="search_data.searchPlatform"
-                  placeholder="请输入评论所属的平台"
-                  @keypress.enter.native="search"
-                  clearable
-        >
-
-        </el-input>
-      </el-form-item>
-      <el-form-item label="">
-        <el-input size="small"
-                  v-model="search_data.searchContent"
-                  placeholder="请输入评论的内容"
-                  @keypress.enter.native="search"
-                  clearable
-        >
-
-        </el-input>
-      </el-form-item>
-    </el-form>
     <!--列表-->
-    <el-table size="small" :data="list_data" highlight-current-row v-loading="loading"
-              border element-loading-text="拼命加载中" @selection-change="handleSelectionChange" style="width: 100%;">
+    <el-table :data="list_data" highlight-current-row v-loading="loading"
+              border element-loading-text="拼命加载中"
+
+              style="width: 100%; font-size: 14px; ">
       <el-table-column sortable prop="id" label="ID" width="80">
       </el-table-column>
-      <el-table-column prop="name" label="名称" width="100">
+      <el-table-column prop="name" label="名称" width="150">
       </el-table-column>
-      <el-table-column prop="category" label="类别" width="140">
+      <el-table-column prop="category" label="类别" width="150">
       </el-table-column>
       <el-table-column prop="type" label="类型" width="140">
       </el-table-column>
-      <el-table-column prop="releaseTime" label="公布时间" width="120">
+      <el-table-column sortable prop="releaseTime" label="公布时间" width="100">
       </el-table-column>
-      <el-table-column prop="applicant" label="申报地区或单位" width="100">
+      <el-table-column prop="applicant" label="申报地区或单位" >
       </el-table-column>
-      <el-table-column prop="protectionUnit" label="保护单位" width="100">
+      <el-table-column prop="protectionUnit" label="保护单位" >
       </el-table-column>
     </el-table>
     <!-- 分页组件 -->
-<!--    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>-->
+    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
   </div>
 </template>
 
 <script>
+import Pagination from "@/components/user/Pagination";
+
 export default {
   // eslint-disable-next-line vue/multi-word-component-names
   name: "Search",
+  components: {
+    Pagination
+  },
   data() {
     return {
+      loading: false, //是显示加载
+      // 分页参数
+      pageparm: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 10
+      },
       search_data: {
-
+        name: null,
+        releaseTime: null
       },
       list_data: [
         {
@@ -83,9 +82,61 @@ export default {
           type: "新增项目",
           applicant: "湖南省湘西土家族苗族自治州",
           protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
-        }
-      ]
+        },
+        {
+          id: 1,
+          name: "土家族织锦技艺",
+          category: "传统技艺",
+          releaseTime: "2006",
+          type: "新增项目",
+          applicant: "湖南省湘西土家族苗族自治州",
+          protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
+        },
+        {
+          id: 1,
+          name: "土家族织锦技艺",
+          category: "传统技艺",
+          releaseTime: "2006",
+          type: "新增项目",
+          applicant: "湖南省湘西土家族苗族自治州",
+          protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
+        },
+        {
+          id: 1,
+          name: "土家族织锦技艺",
+          category: "传统技艺",
+          releaseTime: "2006",
+          type: "新增项目",
+          applicant: "湖南省湘西土家族苗族自治州",
+          protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
+        },
+        {
+          id: 1,
+          name: "土家族织锦技艺",
+          category: "传统技艺",
+          releaseTime: "2006",
+          type: "新增项目",
+          applicant: "湖南省湘西土家族苗族自治州",
+          protectionUnit: "湘西土家族苗族自治州非物质文化遗产保护中心"
+        },
+      ],
+      options: {
+        area: [
+
+        ],
+        releaseTime: [
+
+        ],
+      }
     }
+  },
+  methods: {
+    // 分页插件事件
+    callFather(parm) {
+      this.search_data.pageNum = parm.currentPage
+      this.search_data.pageSize = parm.pageSize
+
+    },
   }
 }
 </script>
diff --git a/code/frontend/src/router/index.js b/code/frontend/src/router/index.js
index 4d28303..4b75c02 100644
--- a/code/frontend/src/router/index.js
+++ b/code/frontend/src/router/index.js
@@ -9,6 +9,7 @@ import HomePage from "@/views/user/HomePage";
 import UserRegister from "@/views/user/UserRegister";
 import UserLogin from "@/views/user/UserLogin";
 import UserIndex from "../views/index"
+import VirtualExperience from "@/views/user/VirtualExperience";
 
 // 启用路由
 Vue.use(Router);
@@ -53,6 +54,14 @@ const router = new Router({
             requireAuth: false
           }
         },
+        {
+          path: "/experience",
+          name: "虚拟体验",
+          component: VirtualExperience,
+          meta: {
+            requireAuth: false
+          }
+        },
         {
           path: "/personal",
           name: "用户个人中心",
diff --git a/code/frontend/src/views/user/HomePage.vue b/code/frontend/src/views/user/HomePage.vue
index 40a091e..becf826 100644
--- a/code/frontend/src/views/user/HomePage.vue
+++ b/code/frontend/src/views/user/HomePage.vue
@@ -6,9 +6,9 @@
       </el-col>
     </el-row>
     <el-row style="display: flex; justify-content: center">
-      <el-col :span="16" :xs="24" align="center">
+      <el-col :span="18" :xs="24" align="center">
         <el-card class="box-card grid-content" shadow="always">
-
+          <Search></Search>
         </el-card>
       </el-col>
     </el-row>
@@ -66,12 +66,14 @@
 <script>
 import SlideShow from "@/components/user/SlideShow";
 import DistributeMap from "@/components/user/DistributeMap";
+import Search from "@/components/user/Search";
 
 export default {
   name: "HomePage",
   components: {
     SlideShow,
-    DistributeMap
+    DistributeMap,
+    Search
   },
   data() {
     return {
diff --git a/code/frontend/src/views/user/VirtualExperience.vue b/code/frontend/src/views/user/VirtualExperience.vue
new file mode 100644
index 0000000..2c3f315
--- /dev/null
+++ b/code/frontend/src/views/user/VirtualExperience.vue
@@ -0,0 +1,104 @@
+<template>
+  <div style="margin: 0 50px">
+    <el-row :gutter="20">
+      <el-col :span="6" :xs="24" align="center" style="margin-top: 20px" v-for="item in list_data" :key="item.id">
+        <el-card :body-style="{ padding: '0px' }">
+          <div class="bottom clearfix">
+            <span style="float: left; margin-left: 20px; margin-top: 10px">{{item.name}}</span>
+            <el-button style="float: right; margin-right: 20px; margin-top: 10px"
+                       size="small" type="primary" class="button" @click="handleClick(item.id)">体验</el-button>
+          </div>
+          <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
+          <div style="padding: 14px;">
+            <span class="my-icon">
+              <i class="el-icon-thumb"></i>{{item.likes}}
+            </span>
+            <i class="el-icon-chat-round my-icon"></i>
+            <i class="el-icon-more-outline"></i>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VirtualExperience",
+  data() {
+    return {
+      list_data: [
+        {
+          id: 1,
+          name: "铜官窑制作",
+          description: "",
+          imgUri: "",
+          likes: 10,
+        },
+        {
+          id: 2,
+          name: "铜官窑制作",
+          description: "",
+          imgUri: "",
+          likes: 10,
+        },
+        {
+          id: 3,
+          name: "铜官窑制作",
+          description: "",
+          imgUri: "",
+          likes: 10,
+        },
+        {
+          id: 4,
+          name: "铜官窑制作",
+          description: "",
+          imgUri: "",
+          likes: 10,
+        },
+        {
+          id: 5,
+          name: "铜官窑制作",
+          description: "",
+          imgUri: "",
+          likes: 10,
+        },
+        {
+          id: 6,
+          name: "铜官窑制作",
+          description: "",
+          imgUri: "",
+          likes: 10,
+        },
+        {
+          id: 7,
+          name: "铜官窑制作",
+          description: "",
+          imgUri: "",
+          likes: 10,
+        },
+      ]
+    }
+  },
+  methods: {
+    handleClick(id) {
+      console.log(id)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.bottom {
+  margin-bottom: 10px;
+}
+
+.image {
+  width: 100%;
+  height: 250px;
+}
+
+.my-icon {
+  margin-right: 80px;
+}
+</style>