diff --git a/package-lock.json b/package-lock.json
index e49c013..75f865c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^0.26.1",
         "core-js": "^3.6.5",
+        "dayjs": "^1.11.7",
         "vant": "^3.4.7",
         "vue": "^3.0.0",
         "vue-router": "^4.0.0-0",
@@ -5422,6 +5423,11 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -19164,6 +19170,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
diff --git a/package.json b/package.json
index a26a829..68df55f 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "axios": "^0.26.1",
     "core-js": "^3.6.5",
+    "dayjs": "^1.11.7",
     "vant": "^3.4.7",
     "vue": "^3.0.0",
     "vue-router": "^4.0.0-0",
diff --git a/public/index.html b/public/index.html
index 083249a..b6027eb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,20 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <link rel="stylesheet" href="<%= BASE_URL %>css/flex2html.css">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="stylesheet" href="<%= BASE_URL %>css/flex2html.css" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-<style>
-[v-cloak] {
-  display: none;
-}  
-</style>
+    <style>
+      [v-cloak] {
+        display: none;
+      }
+    </style>
   </head>
   <body>
     <noscript>
@@ -21,4 +24,4 @@
     <!-- built files will be auto injected -->
     <script src="<%= BASE_URL %>js/flex2html.min.js"></script>
   </body>
-  </html>
+</html>
diff --git a/src/assets/css/common.less b/src/assets/css/common.less
index bc30afa..e646397 100644
--- a/src/assets/css/common.less
+++ b/src/assets/css/common.less
@@ -19,4 +19,5 @@ p {
 :root{
     --van-nav-bar-background-color: #000;
     --van-nav-bar-title-text-color: #FFF;
+	--van-nav-bar-text-color: #fff;
 }
\ No newline at end of file
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 9291049..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="less">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/plugins/vant.js b/src/plugins/vant.js
index 9c67aab..db262eb 100644
--- a/src/plugins/vant.js
+++ b/src/plugins/vant.js
@@ -1,7 +1,7 @@
 import { 
     Locale , Button , Toast, ShareSheet , NavBar ,
     Tab, Tabs, Form, Field, CellGroup , Uploader ,
-    Dialog
+    Dialog, Popup, List, Step, Steps 
 } from 'vant'
 
 import zhTW from 'vant/es/locale/lang/zh-TW';
@@ -20,4 +20,9 @@ export function vant(app){
         .use(CellGroup)
         .use(Uploader)
         .use(Dialog)
+        .use(Popup)
+        .use(List)
+        .use(Step)
+        .use(Steps)
+
 }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 5bf5956..c72decb 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="home">
-    <van-nav-bar title="我的名片" />
+    <van-nav-bar title="我的名片"  right-text="人脈紀錄" @click-right="showUserConn = true"/>
     <div class="tab-section" v-cloak>
       <van-tabs :lazy-render="true" v-model:active="activeName" v-show="user.nc_type > 1 && cid !== '1'">
         <van-tab title="我的名片" name="0">
@@ -18,62 +18,79 @@
         </div>
       </div>
       <div class="recommend" v-if="activeName == '0'">
-        <img class="avatar" :src="user.avatar" style="display:block; margin:auto;">
-        <br />
-        <p style="text-align: center; font-size: 35px; "><strong>{{user.name}}</strong><br /></p>
-        <p style="text-align: center; font-size: 20px;">{{user.company}}<br />
-        {{user.title}}</p>
-        <hr width=85%>
-        <p style="text-align: center; font-size: 15px;" v-html="user.mark">
-        </p>
-      </div>
-    </div>
+        <div>
+          <img class="avatar" :src="user.avatar" style="display:block; margin:auto;">
+          <br />
+          <p style="text-align: center; font-size: 35px; "><strong>{{ user.name }}</strong><br /></p>
+          <p style="text-align: center; font-size: 20px;">{{ user.company }}<br />
+            {{ user.title }}</p>
+          <hr width=85%>
+          <p style="text-align: center; font-size: 15px;" v-html="user.mark">
+          </p>
+        </div>
+        <div class="btn-area" v-if="user.level > 0">
+          <dl class="dl02">
+            <a :href="`${imgUrl}/${user.user_id}/${user.user_id}.vcf`">
+              <div class="menu main">加入通訊錄</div>
+            </a>
+          </dl>
+          <dl class="dl02">
+            <a :href="`tel:${user.phone}`">
+              <div class="menu tel">
+                {{ user.phone }}
+              </div>
+            </a>
+          </dl>
+          <dl class="dl02" v-if="user.facebook" target="_blank">
+            <a :href="user.facebook">
+              <div class="menu fb">Facebook</div>
+            </a>
+          </dl>
+          <dl class="dl02" v-if="user.line">
+            <a :href="`https://line.naver.jp/ti/p/~${user.line}`">
+              <div class="menu line">LINE</div>
+            </a>
+          </dl>
+          <dl class="dl02" v-if="user.ig">
+            <a :href="`https://www.instagram.com/${user.ig}`" target="_blank">
+              <div class="menu ig">Instagram</div>
+            </a>
+          </dl>
+          <dl class="dl02" v-if="user.youtube">
+            <a :href="`${user.youtube}`" target="_blank">
+              <div class="menu yt">Youtube</div>
+            </a>
+          </dl>
+          <dl class="dl02" v-for="(link, index) in user.nfc_addon" :key="index">
+            <a :href="link.link" target="_blank">
+              <div class="menu mylink">{{ link.name }}</div>
+            </a>
+          </dl>
+        </div>
 
-    <div class="btn-area" v-if="user.level > 0">
-      <dl class="dl02">
-        <a :href="`${imgUrl}/${user.user_id}/${user.user_id}.vcf`">
-          <div class="menu main">加入通訊錄</div>
-        </a>
-      </dl>
-      <dl class="dl02">
-        <a :href="`tel:${user.phone}`">
-          <div class="menu tel">
-            {{ user.phone }}
-          </div>
-        </a>
-      </dl>
-      <dl class="dl02" v-if="user.facebook" target="_blank">
-        <a :href="user.facebook">
-        <div class="menu fb">Facebook</div>
-        </a>
-      </dl>
-      <dl class="dl02" v-if="user.line">
-        <a :href="`https://line.naver.jp/ti/p/~${user.line}`">
-        <div class="menu line">LINE</div>
-        </a>
-      </dl>
-      <dl class="dl02" v-if="user.ig">
-        <a :href="`https://www.instagram.com/${user.ig}`" target="_blank">
-        <div class="menu ig">Instagram</div>
-      </a>
-      </dl>
-      <dl class="dl02" v-if="user.youtube">
-        <a :href="`${user.youtube}`" target="_blank">
-        <div class="menu yt">Youtube</div>
-      </a>
-      </dl>
-      <dl class="dl02" v-for="(link, index) in user.nfc_addon" :key="index">
-        <a :href="link.link" target="_blank">
-        <div class="menu mylink">{{ link.name }}</div>
-      </a>
-      </dl>
+      </div>
     </div>
-
   </div>
+  <van-popup v-model:show="showUserConn" position="right" :style="{ width: '70%',height: '100%' }">
+    <van-steps direction="vertical" :active="0">
+      <van-step v-for="(v,i) in userConnections" :key="i">
+        <div class="user-conn">
+          <div class="user-conn-left">{{ v.name }}</div>
+          <div class="user-conn-right" @click="goUC(v.nfcurl)">
+            查看
+          </div>
+        </div>
+        <p>{{ v.company }}</p>
+        <p>{{ v.time }}</p>
+      </van-step>
+    </van-steps>    
+  </van-popup>
 </template>
 
 <script>
-import { nextTick, onBeforeMount, reactive, ref, toRefs, watch } from 'vue'
+import dayjs from 'dayjs'
+
+import { nextTick, onBeforeMount, reactive, ref, toRefs, watch, computed } from 'vue'
 
 import { checkUser, getCard, getCusCard, getVipCard } from '@/api'
 
@@ -109,6 +126,7 @@ export default {
     //取得user id
     let token = encodeURIComponent(new URLSearchParams(window.location.search).get('params'))
     let cardid = encodeURIComponent(new URLSearchParams(window.location.search).get('cardid'))
+    let nouc = encodeURIComponent(new URLSearchParams(window.location.search).get('nouc'))
 
     cid.value = cardid
 
@@ -141,7 +159,6 @@ export default {
 
       const card1Res = await getCard(params)
 
-      console.log('card1Res', card1Res)
       if (card1Res.code !== 200) {
         Toast('操作錯誤')
         return
@@ -149,8 +166,8 @@ export default {
       }
 
       changeMeta({
-        site_name:"Utel電子名片",
-        title: card1Res.data.name +" "+card1Res.data.company,
+        site_name: "Utel電子名片",
+        title: card1Res.data.name + " " + card1Res.data.company,
         description: card1Res.data.mark,
         image: card1Res.data.avatar
       })
@@ -170,6 +187,12 @@ export default {
         state.vip_card = []
       }
 
+      //儲存人脈
+      if(nouc != '1'){
+        saveConnection(card1Res.data)
+      }
+
+    })
 
       // activeName.value = '0'
       watch(() => activeName.value, function (newVal, oldVal) {
@@ -180,7 +203,6 @@ export default {
         }
       }, { immediate: true })
 
-    })
 
     async function showFlex(id) {
 
@@ -223,7 +245,7 @@ export default {
 
               await nextTick()
 
-              if(flexRef.value){                
+              if (flexRef.value) {
                 flexRef.value.innerHTML = ''
               }
               flex2html("flex", state.flexContent)
@@ -236,12 +258,58 @@ export default {
       }
     }
 
+    //人脈紀錄
+    const showUserConn = ref(false)
+
+    function saveConnection(data){
+      
+      let connData = {
+        userid: data.user_id,
+        name: data.name,
+        nfcurl: data.nfcurl,
+        company: data.company,
+        title: data.title,
+        avatar: data.avatar,
+        time: dayjs().format('YYYY/MM/DD HH:mm')
+      }
+
+      let n_user_conn = []
+
+      if(localStorage.getItem('user_conn')){
+        //移除加入過的資料
+        let i = 0
+        let t_connData = JSON.parse(localStorage.getItem('user_conn')).filter(item=>{
+          i++
+          return item.userid !=connData.userid && i < 5
+        })
+
+        n_user_conn = [connData,...t_connData]
+      }else{
+        n_user_conn = [connData]
+      }
+
+      localStorage.setItem('user_conn',JSON.stringify(n_user_conn)) 
+    }
+
+    
+    const userConnections = computed(()=>{
+      return JSON.parse(localStorage.getItem('user_conn'))
+    })
+
+    const goUC = (url)=>{
+      showUserConn.value = false
+      window.location.href = url + '&nouc=1'
+    }
+
     return {
       ...toRefs(state),
+      showUserConn,
       activeName,
       cid,
       flexRef,
-      isIOs
+      isIOs,
+      userConnections,
+      goUC
     }
   }
 }
@@ -334,9 +402,23 @@ export default {
 .recommend {
   width: 100%;
   padding-top: 20px;
-  .avatar{
+
+  .avatar {
     width: 50%;
     border-radius: 50%;
   }
 }
+
+.user-conn{
+  display: flex;
+  margin-bottom: 10px;
+  .user-conn-left{
+    flex: 1;
+    font-size: 18px;
+    font-weight: 500;
+  }
+  .user-conn-right{
+    width: 50px
+  }
+}
 </style>
