diff --git a/src/components/nav/Nav.vue b/src/components/nav/Nav.vue
index c3f4912..95e536c 100644
--- a/src/components/nav/Nav.vue
+++ b/src/components/nav/Nav.vue
@@ -77,7 +77,7 @@ export default {
         { text: '数据', url: '/companyIntroduction' },
         { text: '公司介绍', url: '/companyIntroduction' },
         { text: '联系我们', url: '/relation' },
-        { text: '个人中心', url: 123 },
+        { text: '个人中心', url: '/personalCenter' },
         { text: '帮助', url: 123 }
       ],
       twonav: false,
diff --git a/src/views/personalCenter/PersonalCenter.vue b/src/views/personalCenter/PersonalCenter.vue
index 88eece8..a9e0642 100644
--- a/src/views/personalCenter/PersonalCenter.vue
+++ b/src/views/personalCenter/PersonalCenter.vue
@@ -1,12 +1,501 @@
 <template>
-  <div></div>
+  <div class="personal">
+    <!-- 首页导航 -->
+    <Navs></Navs>
+    <div class="cont">
+      <!-- 全局搜索 -->
+      <search></search>
+      <div class="cont_content">
+        <div class="header">
+          <div class="left">个人中心</div>
+          <div class="right">
+            <img :src="imgurl.pos" alt />
+            <span>当前位置：</span>
+            <span @click="$router.push('/')">首页</span>
+            >
+            <span @click="$router.push('/personalCenter')">个人中心</span>
+          </div>
+        </div>
+        <div class="content">
+          <div class="left">
+            <div :class="{active:staticSelect==='基本设置'}" @click="clickStic('基本设置')">基本设置</div>
+            <div :class="{active:staticSelect==='安全设置'}" @click="clickStic('安全设置')">安全设置</div>
+            <div :class="{active:staticSelect==='我的收藏'}" @click="clickStic('我的收藏')">我的收藏</div>
+          </div>
+          <div class="right">
+            <div class="right_title">{{staticSelect}}</div>
+            <!-- 基本设置 -->
+            <div class="right_cont_basic" v-if="staticSelect==='基本设置'">
+              <div v-for="(item,index) in cont_basic" :key="index">
+                <div>{{item.keys}}</div>
+                <div>{{computedStr(item.values)}}</div>
+              </div>
+            </div>
+            <!-- 安全设置 -->
+            <div class="right_cont_fafety" v-if="staticSelect==='安全设置'">
+              <div class="conty">
+                <div class="zm">账号密码</div>
+                <div class="updata" @click="updata">修改</div>
+              </div>
+              <div class="contys">
+                <div>{{showPass?password:'********'}}</div>
+                <img :src="showPass?imgurl.openyj:imgurl.closeyj" alt @click="staticUp" />
+              </div>
+            </div>
+            <!-- 我的收藏 -->
+            <div class="right_cont_collect" v-if="staticSelect==='我的收藏'"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 页脚信息 -->
+    <FooterInfors></FooterInfors>
+    <!-- 设置密码窗口 -->
+    <section class="loginSty" v-if="showWinStatic">
+      <div class="loginSty_wcont">
+        <div class="wcont_header">
+          <div>设置密码</div>
+          <img :src="imgurl.deleteimg" alt @click="closeLoginWind(false)" />
+        </div>
+        <div class="wcont_content">
+          <div>
+            <img :src="imgurl.userpwds" alt />
+            <input type="text" placeholder="请输入密码" v-model="userpwd" />
+          </div>
+          <div>
+            <img :src="imgurl.userpwds" alt />
+            <input type="text" placeholder="请输入确认密码" v-model="userpwdQR" />
+          </div>
+          <div @click="closeLoginWind(true)">确认</div>
+        </div>
+      </div>
+    </section>
+  </div>
 </template>
 <script>
+// 导航
+import Nav from '@/components/nav/Nav.vue'
+// 页脚信息
+import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
+// 全局搜索
+import search from '@/components/search/search.vue'
 export default {
-  name: 'personal'
+  name: 'personal',
+  components: {
+    Navs: Nav,
+    FooterInfors: FooterInfor,
+    search: search
+  },
+  data () {
+    return {
+      imgurl: {
+        pos: require('../../../static/company/posweizhi.png'),
+        openyj: require('../../../static/personalCenter/openyj.png'),
+        closeyj: require('../../../static/personalCenter/closeyj.png'),
+        userpwds: require('../../../static/nav/userpwds.png'),
+        deleteimg: require('../../../static/nav/deleteImg.png')
+      },
+      // 当前左侧选中状态
+      staticSelect: '基本设置',
+      // 基本设置数据
+      cont_basic: [
+        {
+          keys: '用户名称',
+          values: '张三'
+        },
+        {
+          keys: '邮箱',
+          values: '1234567@163.com'
+        },
+        {
+          keys: '所属部门',
+          values: '部门'
+        },
+        {
+          keys: '机构名称',
+          values: '某某机构'
+        },
+        {
+          keys: '机构地址',
+          values: '某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某'
+        }
+      ],
+      // 密码
+      password: '1234567890',
+      // 密码显示状态
+      showPass: false,
+      // 设置密码窗口状态
+      showWinStatic: false,
+      userpwd: '',
+      userpwdQR: ''
+    }
+  },
+  methods: {
+    clickStic (sta) {
+      this.staticSelect = sta
+    },
+    staticUp () {
+      this.showPass = !this.showPass
+    },
+    // 设置密码
+    closeLoginWind (status) {
+      if (status) {
+        // 调接口上传，成功后关闭窗口
+        if (this.userpwd === '') {
+          alert('密码不能为空！')
+        } else if (this.userpwdQR === '') {
+          alert('确认密码不能为空！')
+        } else if (this.userpwd !== this.userpwdQR) {
+          alert('密码与确认密码不一致！')
+        } else {
+          // 调接口判断密码是否输入正确,改变登录状态
+          this.showWinStatic = !this.showWinStatic
+        }
+      } else {
+        this.showWinStatic = !this.showWinStatic
+      }
+    },
+    // 修改
+    updata () {
+      this.showWinStatic = !this.showWinStatic
+    }
+  },
+  computed: {
+    // 计算字符串
+    computedStr () {
+      return (str) => {
+        let Strs = ''
+        str.length <= 62 ? (Strs = str) : (Strs = str.slice(0, 61) + '...')
+        return Strs
+      }
+    }
+  }
 
 }
 </script>
 <style lang="scss" scoped>
+// 注册窗口
+// 登陆窗口
+.loginSty {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.28);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  & > .loginSty_wcont {
+    width: 37.5rem;
+    height: 32.6875rem;
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    & > .wcont_header {
+      width: 32.8125rem;
+      height: 3.875rem;
+      border-bottom: 0.0625rem solid #dbdbdb;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      & > div {
+        margin-left: 1rem;
+        font-size: 1.375rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #333333;
+      }
+      & > img {
+        margin-right: 1rem;
+        width: 1.3125rem;
+        height: 1.3125rem;
+      }
+      & > img:hover {
+        cursor: pointer;
+      }
+    }
+    & > .wcont_content {
+      width: 30.8125rem;
+      height: 26.5rem;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
+      & > div:nth-last-child(n + 2) {
+        width: 100%;
+        height: 3.25rem;
+        border: 0.0625rem solid #dbdbdb;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        & > input {
+          width: 21.625rem;
+          height: 1.6rem;
+          border: none;
+        }
+        & > input::-webkit-input-placeholder {
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 2rem;
+          letter-spacing: 0rem;
+          color: #999999;
+        }
+        & > input::-moz-placeholder {
+          /* Mozilla Firefox 19+ */
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 2rem;
+          letter-spacing: 0rem;
+          color: #999999;
+        }
+        & > input:-moz-placeholder {
+          /* Mozilla Firefox 4 to 18 */
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 2rem;
+          letter-spacing: 0rem;
+          color: #999999;
+        }
+        & > input:-ms-input-placeholder {
+          /* Internet Explorer 10-11 */
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 2rem;
+          letter-spacing: 0rem;
+          color: #999999;
+        }
+      }
+      & > div {
+        & > img {
+          margin: 0 1.35625rem;
+          width: 1.0625rem;
+          height: 1.3125rem;
+        }
+      }
+      & > div:nth-last-child(1) {
+        width: 100%;
+        height: 3.1875rem;
+        background-color: #52b6e3;
+        border-radius: 0.3125rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #ffffff;
+      }
+      & > div:nth-last-child(1):hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+.cont {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  & > .cont_content {
+    margin-bottom: 1.875rem;
+    width: 84.25rem;
+    border: 0.0625rem solid red;
+    & > .header {
+      width: 84.25rem;
+      height: 4.25rem;
+      // border: 1px solid red;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
 
+      & > .left {
+        // margin-left: 1.5rem;
+        font-size: 1.5rem;
+        font-weight: bold;
+        font-stretch: normal;
+        letter-spacing: 0.125rem;
+        color: #000000;
+      }
+      & > .right {
+        // margin-right: 1.5rem;
+        font-size: 1.25rem;
+        font-weight: normal;
+        font-stretch: normal;
+        letter-spacing: 0rem;
+        color: #8fa3ae;
+        & > img {
+          width: 1rem;
+          height: 1.25rem;
+          margin-right: 0.45rem;
+        }
+        & > span:nth-child(n + 3):hover {
+          cursor: pointer;
+          color: #52b6e3;
+        }
+      }
+    }
+    & > .content {
+      width: 100%;
+      height: 33.75rem;
+      background-color: #fff;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      & > .left {
+        width: 14.875rem;
+        display: flex;
+        height: 30.625rem;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        border: 1px solid red;
+        border-right: 0.125rem solid #dbdbdb;
+        & > div {
+          width: 14.875rem;
+          height: 2.75rem;
+          display: flex;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          font-size: 1.25rem;
+          font-weight: normal;
+          font-stretch: normal;
+          // line-height: 22px;
+          letter-spacing: 0rem;
+          color: #333333;
+        }
+        & > .active {
+          background-color: #f5f5f5;
+          border-right: 0.125rem solid #52b6e3;
+        }
+        & > div:hover {
+          cursor: pointer;
+        }
+      }
+      & > .right {
+        margin-left: 7.5rem;
+        height: 30.625rem;
+        & > .right_title {
+          font-size: 2.125rem;
+          font-weight: normal;
+          font-stretch: normal;
+          letter-spacing: 0rem;
+          color: #333333;
+        }
+        & > .right_cont_basic {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-start;
+          & > div {
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: flex-start;
+            & > div:nth-child(1) {
+              width: 7.5rem;
+              height: 4.375rem;
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              align-items: center;
+              font-size: 1.25rem;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0rem;
+              color: #333333;
+            }
+            & > div:nth-child(2) {
+              border: 1px solid red;
+              width: 38.75rem;
+              height: 4.375rem;
+              display: flex;
+              flex-direction: row;
+              justify-content: flex-start;
+              align-items: center;
+              flex-wrap: wrap;
+              font-size: 1.25rem;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0rem;
+              color: #333333;
+            }
+          }
+        }
+        & > .right_cont_fafety {
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-start;
+          align-items: flex-start;
+          & > .conty {
+            width: 38.75rem;
+            height: 4.375rem;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+            & > div:nth-child(1) {
+              font-size: 1.25rem;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0rem;
+              color: #333333;
+            }
+            & > div:nth-child(2) {
+              font-size: 1.25rem;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0rem;
+              color: #52b6e3;
+            }
+            & > div:nth-child(2):hover {
+              cursor: pointer;
+            }
+          }
+          & > .contys {
+            width: 38.75rem;
+            height: 4.375rem;
+            display: flex;
+            flex-direction: row;
+            justify-content: flex-start;
+            align-items: center;
+            & > div {
+              font-size: 1.25rem;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0rem;
+              color: #333333;
+            }
+            & > img {
+              margin-left: 1.5rem;
+              width: 2.875rem;
+              height: 1.875rem;
+            }
+            & > img:hover {
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/static/personalCenter/closeyj.png b/static/personalCenter/closeyj.png
new file mode 100644
index 0000000..414906e
Binary files /dev/null and b/static/personalCenter/closeyj.png differ
diff --git a/static/personalCenter/openyj.png b/static/personalCenter/openyj.png
new file mode 100644
index 0000000..843de53
Binary files /dev/null and b/static/personalCenter/openyj.png differ