diff --git a/src/assets/images/icon/password.png b/src/assets/images/icon/password.png
new file mode 100644
index 0000000..15473fa
Binary files /dev/null and b/src/assets/images/icon/password.png differ
diff --git a/src/assets/images/icon/right.png b/src/assets/images/icon/right.png
new file mode 100644
index 0000000..1533ca3
Binary files /dev/null and b/src/assets/images/icon/right.png differ
diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/src/assets/images/logo.png differ
diff --git a/src/views/mine/index.vue b/src/views/mine/index.vue
new file mode 100644
index 0000000..c02b60a
--- /dev/null
+++ b/src/views/mine/index.vue
@@ -0,0 +1,126 @@
+<template>
+    <div class='pages'>
+        <div class="heard">
+            <div class="my_top"></div>
+            <!-- <van-avatar size="large" src="../../../assets/logo.png"></van-avatar> -->
+
+            <div class="my_info">
+                <div class="my_left">
+                    <img src="@/assets/images/logo.png" class="my_img">
+                </div>
+                <div class="my_right">
+                    <div class="mmm">
+                        <div class="my_name">李某</div>
+                        <div class="intro">|某某社区</div>
+                    </div>
+                    <div class="details">表堕书、朕津单位-忆跌科技、获建单位-亿联星、社区白组织-志硕生修队</div>
+                </div>
+            </div>
+            <div class="my_card">
+                <div class="my_zzz">
+                    <div class="z_left"><img src="@/assets/images/icon/password.png" class="z_img">
+                        修改密码</div>
+                    <div class="z_right"><img src="@/assets/images/icon/right.png" class="z_img"></div>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            
+        };
+    },
+    created() { },
+    methods: {
+    },
+    components: {},
+    computed: {},
+    watch: {}
+}
+</script>
+
+<style lang='less'>
+.pages {
+    width: 100%;
+    height: 100vh;
+    background-color: #f7f7f7;
+}.heard {
+    width: 100%;
+    height: 35vh;
+    background: linear-gradient(to bottom,
+    #87BBFF 0%,
+    rgb(255, 255, 255) 100%);
+}
+
+.my_top {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-top: 30px;
+}
+.my_img{
+    width:60px;
+    border-radius: 50%;
+}
+.my_info{
+    display: flex;
+    margin: 20px 10px 0;
+}
+.my_right{
+    margin-left: 10px;
+}
+.mmm{
+    display: flex;
+    
+}
+.my_name{
+    font-size: 18px;
+    margin-right: 5px;
+}
+.intro{
+    opacity: 80%;
+    // margin-top: 14px;
+}
+.details{
+    margin-top: 8px;
+    font-size: 13px;
+    opacity: 50%;
+}
+
+.my_card{
+    background: #ffffff;
+    width: 95%;
+    height: 50px;
+    border-radius: 10px;
+    margin: 20px 10px 0;
+}
+.my_zzz{
+    display: flex;
+    height: 100%;
+    align-items: center;
+}
+.z_img{
+    width: 20px;
+    margin-right: 10px;
+    
+}
+.z_left {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    margin-left: 10px;
+
+}
+.z_right{
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+    margin-left: auto; 
+    margin-right: 10px;
+}
+</style>