diff --git a/front/src/api/home.js b/front/src/api/home.js
index cb9cbb7d..4ab17c15 100644
--- a/front/src/api/home.js
+++ b/front/src/api/home.js
@@ -2,7 +2,7 @@
  * @Author: hisense.wuhongjian
  * @Date: 2022-04-01 19:19:40
  * @LastEditors: Light
- * @LastEditTime: 2022-11-19 14:53:29
+ * @LastEditTime: 2022-11-21 16:35:03
  * @Description: 告诉大家这是什么
  */
 import request from '@/utils/request'
@@ -556,3 +556,19 @@ export function willApplyCameraBatchDelete(data) {
     data,
   })
 }
+// 西海岸基础设施已申请列表
+export function getApplyCameraListXha(data) {
+  return request({
+    url: '/processForm/tabilityapplication/getApplyCameraList',
+    method: 'get',
+    data,
+  })
+}
+// 西海岸基础设施已申请列表删除
+export function delApplyCamera(data) {
+  return request({
+    url: '/processForm/tabilityapplication/delApplyCamera',
+    method: 'post',
+    data,
+  })
+}
diff --git a/front/src/views/home/DetailsPageconetent.vue b/front/src/views/home/DetailsPageconetent.vue
index dcc77b9b..2f3cdf55 100644
--- a/front/src/views/home/DetailsPageconetent.vue
+++ b/front/src/views/home/DetailsPageconetent.vue
@@ -143,6 +143,7 @@
           show-size-changer
           show-less-items
           show-quick-jumper
+          :showTotal="total => `共 ${total} 项`"
           :total="resourceTotal"
           :page-size-options="pageSizeOptions"
           @change="pageChange"
diff --git a/front/src/views/home/apply.vue b/front/src/views/home/apply.vue
index 7f9d5982..33df1c19 100644
--- a/front/src/views/home/apply.vue
+++ b/front/src/views/home/apply.vue
@@ -237,6 +237,7 @@
   </div>
 </template>
 <script>
+  import { willApplyCameraBatchDelete } from '@/api/home'
   import AbilityToApplyFor from './AbilityToApplyFor.vue'
   import HomeHeader from '@/views/home/components/header'
   import { reactive, ref, watch, onBeforeUnmount } from 'vue'
@@ -656,6 +657,7 @@
         if (item.note1 && typeof item.note1 == 'string') {
           item.note1 = JSON.parse(item.note1)
         }
+        let delArr = []
         item.note1 &&
           item.note1.map((jcss) => {
             if (!jcss) {
@@ -678,31 +680,39 @@
             }
             // 西海岸
             if (isXiHaiAn.value) {
+              // _itemData.resourceId = jcss.channelId
               _itemData.managementUnitName = jcss.managementUnitName
               _itemData.cameraPointTypeName = jcss.cameraPointTypeName
+              delArr.push(jcss.id)
             }
             obj.system.push(_itemData)
           })
         submitApply(obj).then((res) => {
           // applySuccess.value = false
           console.log('摄像头申请================>', res)
-          if (item.id) {
-            sgcDel({ ids: [item.id] }).then((res1) => {
-              if (res1.data.msg === 'success') {
-                if (falgNum == 0 && sxt) {
-                  message.success('申请提交成功，请到消息中心查看！')
-                  sxt = false
-                }
-                mybus.emit('getSgcNum')
+          if (res.data.msg == 'success') {
+            if (delArr.length > 0) {
+              willApplyCameraBatchDelete(delArr).then((res) => {
                 jumpToDetailsPageconetent()
+              })
+            } else if (item.id) {
+              sgcDel({ ids: [item.id] }).then((res1) => {
+                if (res1.data.msg === 'success') {
+                  if (falgNum == 0 && sxt) {
+                    message.success('申请提交成功，请到消息中心查看！')
+                    sxt = false
+                  }
+                  mybus.emit('getSgcNum')
+                  jumpToDetailsPageconetent()
+                }
+              })
+            } else {
+              if (res.data.msg === 'success' && falgNum == 0 && sxt) {
+                message.success('申请提交成功，请到消息中心查看！')
+                sxt = false
               }
-            })
-          } else {
-            if (res.data.msg === 'success' && falgNum == 0 && sxt) {
-              message.success('申请提交成功，请到消息中心查看！')
-              sxt = false
+              jumpToDetailsPageconetent()
             }
-            jumpToDetailsPageconetent()
           }
         })
       }
@@ -956,130 +966,130 @@
   }
 </script>
 <style scoped lang="less">
-#apply-container {
-  // background-color: #f5f8fc;
-  height: 100%;
-  width: 100%;
-  margin: 0.8rem auto 0;
-  display: flex;
-  justify-content: space-between;
-
-  aside {
-    width: 282px;
-    height: 96%;
-    overflow-y: auto;
-    background-color: #fff;
-    margin: 1% 0 3%;
-  }
-
-  article {
-    width: 1090px;
-    height: 99%;
-    overflow-y: auto;
-    background-color: #fff;
-    margin: 1% auto;
-  }
-
-  .form-container {
-    padding: 20px 20px 30px 20px;
-
-    .title {
-      font-size: 20px;
-      color: #000;
-      font-weight: bold;
-      margin-bottom: 20px;
-    }
-  }
-
-  .base-info {
+  #apply-container {
+    // background-color: #f5f8fc;
+    height: 100%;
+    width: 100%;
+    margin: 0.8rem auto 0;
     display: flex;
     justify-content: space-between;
-  }
 
-  .flex-row-start {
-    justify-content: flex-start;
-    align-items: center;
-  }
+    aside {
+      width: 282px;
+      height: 96%;
+      overflow-y: auto;
+      background-color: #fff;
+      margin: 1% 0 3%;
+    }
 
-  :deep(.ant-form-item-label) {
-    label {
-      color: #666;
-      font-size: 16px;
+    article {
+      width: 1090px;
+      height: 99%;
+      overflow-y: auto;
+      background-color: #fff;
+      margin: 1% auto;
+    }
 
-      &::after {
-        content: '';
+    .form-container {
+      padding: 20px 20px 30px 20px;
+
+      .title {
+        font-size: 20px;
+        color: #000;
+        font-weight: bold;
+        margin-bottom: 20px;
       }
     }
-  }
 
-  :deep(.ant-form-item-required) {
-    &::before {
-      font-size: 8px;
-      margin-right: 10px;
+    .base-info {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .flex-row-start {
+      justify-content: flex-start;
+      align-items: center;
+    }
+
+    :deep(.ant-form-item-label) {
+      label {
+        color: #666;
+        font-size: 16px;
+
+        &::after {
+          content: '';
+        }
+      }
+    }
+
+    :deep(.ant-form-item-required) {
+      &::before {
+        font-size: 8px;
+        margin-right: 10px;
+      }
+    }
+
+    :deep(.ant-input) {
+      border: 1px solid #e0e0e0;
+      border-radius: 6px;
+    }
+
+    .success {
+      div {
+        width: 100px;
+        margin: 80px auto 40px;
+      }
+
+      text-align: center;
+      font-size: 20px;
+      font-weight: bold;
+      color: #000;
     }
   }
 
-  :deep(.ant-input) {
-    border: 1px solid #e0e0e0;
+  .applicationScene {
+    :deep(.ant-select-selector) {
+      overflow-x: scroll;
+    }
+
+    :deep(.ant-select-selection-overflow) {
+      flex-wrap: nowrap;
+    }
+  }
+
+  textarea {
+    resize: none;
+    font-size: 14px;
+  }
+
+  .bottom-btn {
+    display: flex;
+    justify-content: center;
+    // position: fixed;
+  }
+
+  .cancel-apply {
+    width: 80px;
+    height: 38px;
+    margin-right: 20px;
+    background: #e1edfa;
+    color: #0087ff;
+    font-size: 14px;
     border-radius: 6px;
-  }
-
-  .success {
-    div {
-      width: 100px;
-      margin: 80px auto 40px;
-    }
-
+    border: none;
+    padding: 0;
     text-align: center;
-    font-size: 20px;
-    font-weight: bold;
-    color: #000;
-  }
-}
-
-.applicationScene {
-  :deep(.ant-select-selector) {
-    overflow-x: scroll;
   }
 
-  :deep(.ant-select-selection-overflow) {
-    flex-wrap: nowrap;
+  .confirm-apply {
+    width: 80px;
+    height: 38px;
+    background: #0087ff;
+    color: #fff;
+    font-size: 14px;
+    border-radius: 6px;
+    border: none;
+    padding: 0;
+    text-align: center;
   }
-}
-
-textarea {
-  resize: none;
-  font-size: 14px;
-}
-
-.bottom-btn {
-  display: flex;
-  justify-content: center;
-  // position: fixed;
-}
-
-.cancel-apply {
-  width: 80px;
-  height: 38px;
-  margin-right: 20px;
-  background: #e1edfa;
-  color: #0087ff;
-  font-size: 14px;
-  border-radius: 6px;
-  border: none;
-  padding: 0;
-  text-align: center;
-}
-
-.confirm-apply {
-  width: 80px;
-  height: 38px;
-  background: #0087ff;
-  color: #fff;
-  font-size: 14px;
-  border-radius: 6px;
-  border: none;
-  padding: 0;
-  text-align: center;
-}
 </style>
diff --git a/front/src/views/home/components/KnowledgeBase.vue b/front/src/views/home/components/KnowledgeBase.vue
index 74842d04..0408b64e 100644
--- a/front/src/views/home/components/KnowledgeBase.vue
+++ b/front/src/views/home/components/KnowledgeBase.vue
@@ -40,6 +40,10 @@
             :pageSize="5"
             :total="props.resourceTotal"
             show-less-items
+            show-size-changer
+            show-quick-jumper
+            :page-size-options="pageSizeOptions"
+            :showTotal="total => `共 ${total} 项`"
             @change="handleCurrentChange"
             :showSizeChanger="false"
           />
@@ -56,6 +60,7 @@
     resourceList: { type: Array, default: null },
     resourceTotal: { type: String, default: '' },
   })
+  const pageSizeOptions = ref(['5', '10', '20', '50'])
   console.log('props==========>', props)
   // 知识库
   const zskState = reactive({
diff --git a/front/src/views/home/detailsPageInfrastructureTreeXha.vue b/front/src/views/home/detailsPageInfrastructureTreeXha.vue
index 964cddf8..9387dcb6 100644
--- a/front/src/views/home/detailsPageInfrastructureTreeXha.vue
+++ b/front/src/views/home/detailsPageInfrastructureTreeXha.vue
@@ -191,7 +191,10 @@ export default defineComponent({
     mybus.on('getDeptList', () => {
       init()
     })
-
+    mybus.on('clearChoose', () => {
+      selectId.value=''
+      chooseId.value=''
+    })
     const onSelect = async (item, val, child) => {
       let res = {}
       if (whoShow1.value && !whoShow1.value.itShowXiHaiAn) {
@@ -270,7 +273,7 @@ export default defineComponent({
   },
   beforeUnmount() {
     mybus.off('getDeptList')
-    console.log('getDeptList销毁~~~~~~~~~~~~~~~~~~~')
+    mybus.off('clearChoose')
   },
   components: {
     UpOutlined,
diff --git a/front/src/views/home/infrastructureApplication.vue b/front/src/views/home/infrastructureApplication.vue
index ddb63315..33842f48 100644
--- a/front/src/views/home/infrastructureApplication.vue
+++ b/front/src/views/home/infrastructureApplication.vue
@@ -2,7 +2,7 @@
  * @Author: Light
  * @Date: 2022-11-18 11:53:43
  * @LastEditors: Light
- * @LastEditTime: 2022-11-19 17:15:15
+ * @LastEditTime: 2022-11-21 17:51:38
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -17,30 +17,46 @@
                 {{ item.channelName }}
               </a-tooltip>
             </div>
-            <a-button type="link" danger @click="delWillApplyCamera(item.id)">
-              移出
-            </a-button>
+            <a-popconfirm
+              :title="'是否移出' + item.channelName + '?'"
+              ok-text="是"
+              cancel-text="否"
+              @confirm="delWillApplyCamera(item.id)"
+            >
+              <a-button type="link" danger>移出</a-button>
+            </a-popconfirm>
           </a-list-item>
         </template>
         <template #header>
           <div class="title">待申请列表</div>
         </template>
         <template #footer>
-          <a-button type="primary">一键申请</a-button>
+          <a-button type="primary" @click="apply">一键申请</a-button>
         </template>
       </a-list>
     </div>
     <div class="bottom">
-      <a-list size="small" bordered :data-source="data">
+      <a-list size="small" bordered :data-source="dataList.requested">
         <template #renderItem="{ item }">
           <a-list-item>
             <div class="name">
               <a-tooltip>
-                <template #title>{{ item }}</template>
-                {{ item }}
+                <template #title>{{ item.cameraInfo.channelName }}</template>
+                {{ item.cameraInfo.channelName }}
               </a-tooltip>
             </div>
-            <a-button type="link" danger>删除</a-button>
+            <a-popconfirm
+              v-if="item.approveStatus == '通过'"
+              :title="'是否删除' + item.cameraInfo.channelName + '?'"
+              ok-text="是"
+              cancel-text="否"
+              @confirm="deleteApply(item)"
+            >
+              <a-button type="link" danger>删除</a-button>
+            </a-popconfirm>
+            <a-button v-else type="link" danger @click="deleteApply(item)">
+              删除
+            </a-button>
           </a-list-item>
         </template>
         <template #header>
@@ -49,20 +65,63 @@
       </a-list>
     </div>
   </div>
+  <a-modal
+    :width="800"
+    v-model:visible="visible"
+    title="删除申请"
+    @ok="handleOk"
+    @cancel="clear"
+  >
+    <p>本次申请的摄像头包含以下{{ showArr.length }}个摄像头，是否删除申请？</p>
+    <a-table :columns="columns" :data-source="showArr">
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.dataIndex === 'name'">
+          <a>{{ text }}</a>
+        </template>
+      </template>
+    </a-table>
+  </a-modal>
 </template>
 <script setup>
   import {
     willApplyCameraSelect,
     willApplyCameraBatchInsert,
     willApplyCameraBatchDelete,
+    getApplyCameraListXha,
+    delApplyCamera,
   } from '@/api/home'
+  import { endProcess } from '@/api/personalCenter.js'
   import { onBeforeUnmount, reactive, ref } from 'vue'
   import { message } from 'ant-design-vue'
   import mybus from '@/myplugins/mybus'
+  import { useRouter } from 'vue-router'
   const dataList = reactive({ toBeApplied: [], requested: [] })
   // 待办
   const addWacFlag = ref(true)
   const delWacFlag = ref(true)
+  const delApply = ref(true)
+  const visible = ref(false)
+  const instanceId = ref('')
+  const showArr = ref({})
+  const columns = [
+    {
+      title: '名称',
+      dataIndex: 'channelName',
+      key: 'channelName',
+    },
+    {
+      title: '地址',
+      dataIndex: 'managementUnitName',
+      key: 'managementUnitName',
+    },
+    {
+      title: '类型',
+      dataIndex: 'cameraPointTypeName',
+      key: 'cameraPointTypeName',
+      ellipsis: true,
+    },
+  ]
+  const router = useRouter()
   const delWillApplyCamera = (id) => {
     console.log('删除===>', id)
     if (delWacFlag.value) {
@@ -77,6 +136,86 @@
       })
     }
   }
+  const apply = () => {
+    let obj = {
+      arr: [
+        {
+          checked: true,
+          delFlag: 0,
+          id: '1593084734789996545',
+          idtCameraChannel: '790582098133127168',
+          loading: false,
+          note1: '',
+          resourceId: '1522550195055828996',
+          resourceName: '摄像头列表',
+          type: '基础设施',
+        },
+      ],
+      deptName: '西海岸新区工业和信息化局',
+      deptId: '732560225344761856',
+    }
+    dataList.toBeApplied.map((val) => {
+      val.type = '基础设施'
+      val.delFlag = 0
+      val.resourceId = val.channelId
+      val.resourceName = val.channelName
+      // obj.arr.push(val)
+    })
+    obj.arr[0].note1 = JSON.stringify(dataList.toBeApplied)
+    if (obj.arr.length > 0) {
+      console.log('一键申请===================>', obj)
+      localStorage.setItem('applyList', JSON.stringify([obj]))
+      router.push({
+        path: '/apply',
+      })
+    }
+  }
+  // 删除已申请
+  const deleteApply = (item) => {
+    console.log('删除========>', item)
+    if (delApply.value) {
+      delApply.value = false
+      switch (item.approveStatus) {
+        case '审核中':
+          visible.value = true
+          instanceId.value = item.instanceId
+          showArr.value = []
+          dataList.requested.map((val) => {
+            if (val.instanceId == item.instanceId) {
+              showArr.value.push(val.cameraInfo)
+            }
+          })
+          break
+        case '通过':
+          delApplyCamera([item.id]).then((res) => {
+            if (res.data.code == 0) {
+              message.success('删除成功')
+            } else {
+              message.warning('删除失败')
+            }
+            initApply()
+          })
+          break
+      }
+    }
+  }
+  const handleOk = () => {
+    endProcess({ instanceId: instanceId.value }).then((res) => {
+      if (res.data.code == 0) {
+        message.success('删除成功')
+      } else {
+        message.warning('删除失败')
+      }
+      initApply()
+      visible.value = false
+    })
+  }
+  const clear = () => {
+    instanceId.value = ''
+    showArr.value = []
+    visible.value = false
+    delApply.value = true
+  }
   const init = () => {
     willApplyCameraSelect().then((res) => {
       if (res.data.code == 0) {
@@ -89,10 +228,25 @@
       }
     })
   }
+  const initApply = () => {
+    getApplyCameraListXha().then((res) => {
+      if (res.data.code == 0) {
+        res.data.data.map((val) => {
+          val.cameraInfo = JSON.parse(val.cameraInfo)
+        })
+        dataList.requested = res.data.data
+        delApply.value = true
+      } else {
+        message.warning('查询失败')
+        dataList.requested = []
+      }
+    })
+  }
   init()
+  initApply()
   mybus.on('selectCamera', (obj) => {
     // 判断最多10条
-    if (dataList.toBeApplied.length + dataList.requested.length > 10) {
+    if (dataList.toBeApplied.length + dataList.requested.length >= 10) {
       message.warning('最多只能申请10个摄像头！')
       return
     }
@@ -127,19 +281,6 @@
   onBeforeUnmount(() => {
     mybus.off('selectCamera')
   })
-
-  const data = [
-    'Racing car sprays burning fuel into crowd.',
-    'Japanese princess to wed commoner.',
-    'Australian walks 100km after outback crash.',
-    'Man charged over missing wedding girl.',
-    'Los Angeles battles huge wildfires.',
-    'Racing car sprays burning fuel into crowd.',
-    'Japanese princess to wed commoner.',
-    'Australian walks 100km after outback crash.',
-    'Man charged over missing wedding girl.',
-    'Los Angeles battles huge wildfires.',
-  ]
 </script>
 <style lang="less" scoped>
   .infrastructureApplication {
@@ -168,10 +309,12 @@
       justify-content: flex-end;
     }
     :deep(.ant-list-items) {
+      width: 2.5rem;
       height: 2.45rem;
       overflow-y: scroll;
     }
     :deep(.ant-spin-nested-loading) {
+      width: 2.5rem;
       height: 2.45rem;
     }
   }
diff --git a/front/src/views/home/infrastructurePage.vue b/front/src/views/home/infrastructurePage.vue
index ea531868..a8d4616d 100644
--- a/front/src/views/home/infrastructurePage.vue
+++ b/front/src/views/home/infrastructurePage.vue
@@ -128,16 +128,21 @@
             预约
           </a-button>
         </div>
+        
+        <!-- <div class="flex-space" style="justify-content: center;display:flex;height:40px;align-items:center;"> -->
         <a-pagination
           v-model:current="roomPage"
           v-model:pageSize="roomLimit"
           show-quick-jumper
+          :showTotal="total => `共 ${total} 项`"
           :total="roomTotal"
           :page-size-options="pageSizeOptions"
           @change="onRoomChange"
           @showSizeChange="onShowSizeChange"
           show-size-changer
-        />
+        /> 
+        <!-- <el-button @click="onOkChange" class="queding" >确认</el-button>
+</div> -->
       </div>
       <div v-if="roomResult" style="display: grid">
         <a-table
@@ -1440,10 +1445,14 @@
     }
   }
   //分页
-  const onRoomChange = (pageNumber) => {
+  const onRoomChange = () => {
     roomPage.value = pageNumber
     searchData()
   }
+  const onOkChange = () => {
+    current.value = roomPage.value
+    searchData()
+  }
   const onShowSizeChange = (current, pageSize) => {
     roomLimit.value = pageSize
     searchData()
@@ -2471,6 +2480,16 @@
   })
 </script>
 <style lang="less" scoped>
+.queding{
+  margin-left: 16px;
+    cursor: pointer;
+    background: #0058e1;
+    color: #ffffff;
+    width: 56px;
+    border-radius: 2px;
+    border: 1px #0058e1 solid;
+    margin-top: 17px;
+  }
   .infrastructrueBox {
     padding: 0.2rem;
     background: #ffffff;
@@ -2803,13 +2822,11 @@
       }
     }
 
-    :deep(.ant-pagination) {
-      float: right;
-    }
 
-    :deep(.ant-pagination) {
-      text-align: end;
-    }
+
+    // :deep(.ant-pagination) {
+    //   text-align: end;
+    // }
   }
   :deep(.ant-table-thead > tr > th) {
     color: #5580f7 !important;
diff --git a/front/src/views/home/infrastructurePageXha.vue b/front/src/views/home/infrastructurePageXha.vue
index e2c75bb9..2c20db0e 100644
--- a/front/src/views/home/infrastructurePageXha.vue
+++ b/front/src/views/home/infrastructurePageXha.vue
@@ -2579,7 +2579,7 @@
     }
 
     :deep(.ant-pagination) {
-      float: right;
+      float: center;
     }
 
     :deep(.ant-pagination) {
diff --git a/front/src/views/home/videoSurveillance/index.vue b/front/src/views/home/videoSurveillance/index.vue
index df5409f5..0da6d3fa 100644
--- a/front/src/views/home/videoSurveillance/index.vue
+++ b/front/src/views/home/videoSurveillance/index.vue
@@ -41,7 +41,7 @@
             :fetch-suggestions="querySearch"
             clearable
             class="input-with-select"
-            placeholder="请输入关键词"
+            placeholder="请输入关键字"
             @select="
               (addressItem) => {
                 selectedAddress(addressItem, i)
@@ -58,7 +58,7 @@
         <el-autocomplete
           v-else-if="addressType==2"
           v-model="address"
-          placeholder="请输入地址"
+          placeholder="请输入关键字"
           :fetch-suggestions="
             (queryString, cb) => {
               searchAddressByKeyWord(queryString, cb, i)
@@ -298,6 +298,8 @@ import { ElMessage } from 'element-plus'
         }
       },
       selectedAddress(item, index) {
+        mybus.emit('clearChoose')
+        this.getCameraAllPage()
         // 跳转到相应经纬度
         console.log('跳转', item)
         const latLng = {
@@ -511,29 +513,32 @@ import { ElMessage } from 'element-plus'
       },
       //查询地址建议匹配
       async searchAddressByKeyWord(queryString, cb, indexX) {
-        console.log('queryString, cb, indexX',queryString, cb, indexX)
-        this.disasterPointIndex = indexX
-        /* const res = await bdPlaceSearch({ searchKey: queryString });
-        if (res.data) {
-          for(var i=0;i<res.data.length;i++){
-            res.data[i].value = res.data[i].name;
-          }
-          cb(res.data);
-        }*/
-        const match = function (obj) {
-          //console.log('ooooo',obj);
-          obj.result.map((item) => {
-            item.value = item.address
+        console.log('querySearch',queryString, cb,this.restaurants)
+        if(queryString){
+          getCameraByCondition({
+            pageNum: 1,
+            pageSize: 10,
+            regionId: "70be8c5b664f4bcf869d82f2e8335051",
+            type: "0",
+            name:queryString,
+          }).then(res => {
+            if(res.data.data[0]){
+              res.data.data.map( val =>{
+                val.location = {y:val.gpsY,x:val.gpsX}
+                val.value = val.channelName
+              })
+              const results = res.data.data
+              cb(results)
+            }else{
+              ElMessage({
+                showClose: true,
+                message: '未查询到点位！',
+                type: 'warning',
+              })
+            }
           })
-          cb(obj.result)
-        }
-        if (!queryString) {
+        }else{
           cb([])
-        } else {
-          var geoCodeParam = new SuperMap.GeoCodingParameter({
-            address: queryString,
-          })
-          this.addressMatchService.code(geoCodeParam, match)
         }
       },
       getCameraAllPage(page) {