feats

src/global_style.less

@@ -3,6 +3,10 @@
   display: flex;
 }
 
+.flex-column {
+  flex-direction: column;
+}
+
 .flex-1 {
   flex: 1;
 }

src/layout/index.vue

@@ -61,5 +61,8 @@ export default {
   components: {}
 }
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
+.layout-container {
+  height: 100%;
+}
 </style>

src/views/UserCenter.vue

@@ -1,76 +1,77 @@
 <template>
-  <div class="User-box">
-    <!-- <h1>UserCenter 个人中心</h1> -->
-    <img class="User-box-backImage" src="../assets/userImag/backImag.png" />
-    <div class="user-info">
-      <img src="../assets/userImag/userImag.jpg" v-show="divShow" />
-      <div class="info-name" v-show="divShow">
-        <div>
-          <span>{{name}}</span>
+  <div class="User-box flex flex-column">
+    <div class="user-card flex-0">
+      <div class="profile flex" v-if="divShow">
+        <img class="flex-0" src="@/assets/userImag/userImag.jpg" />
+        <div class="info-name flex-1">
+          <div class="title">
+            {{person.name}}
+          </div>
+          <div class="subtitle">
+            {{person.phone}}
+          </div>
+          <div class="userInfo-button">一期架空线路工1班</div>
         </div>
-        <div>
-          <span style="font-weight: 100;">{{phone}}</span>
-        </div>
-        <div class="userInfo-button">一期架空线路工1班</div>
       </div>
 
-      <div v-show="buttonShow" class="userInfo-button-zhuce" @click="seeUserInfo()">注册</div>
+      <div v-else class="userInfo-button-zhuce" @click="seeUserInfo()">注册</div>
     </div>
-    <div class="button-box">
-      <div class="button-box-div" @click="seeUserInfo()">
-        <img src="../assets/userImag/userInfo.png" alt />
-        <div>我的信息</div>
-        <van-icon name="arrow" />
-      </div>
-      <div class="button-box-div" @click="goMyCollection">
-        <img src="../assets/userImag/shoucang.png" alt />
-        <div>我的收藏</div>
-        <van-icon name="arrow" />
-      </div>
-      <!-- <div class="button-box-div">
-        <img src="../assets/userImag/wenjuan.png" alt />
-        <div>我的问卷</div>
-        <van-icon name="arrow" />
-      </div>-->
+
+    <div class="menu-list flex-1">
+      <van-cell-group>
+        <van-cell
+          v-for="menu in menus"
+          :key="menu.title"
+          :icon="menu.icon"
+          :title="menu.title"
+          is-link
+          :to="menu.path"
+          title-class="menu-title"
+        />
+      </van-cell-group>
     </div>
+
   </div>
 </template>
 
 <script>
+import { mapState } from 'vuex'
 // import {SetUser} from '../util/api'
 export default {
   data() {
     return {
-      register: require('../assets/icon/register.svg'),
-      name: '',
-      phone: '',
-      divShow: false,
-      buttonShow: true
+      register: require('@/assets/icon/register.svg'),
+      buttonShow: true,
+      menus: [
+        {
+          icon: require('@/assets/userImag/userInfo.png'),
+          title: '我的信息',
+          path: '/SetUser',
+        },
+        {
+          icon: require('@/assets/userImag/shoucang.png'),
+          title: '我的收藏',
+          path: '/MyCollection',
+        },
+        {
+          icon: require('@/assets/userImag/wenjuan.png'),
+          title: '我的问卷',
+          path: '',
+        }
+      ]
     }
   },
-  mounted() {
-    this.name = this.$store.state.user.name
-    this.phone = this.$store.state.user.phone
-    if (this.$store.state.user.phone) {
-      this.divShow = true
-      this.buttonShow = false
-    } else {
-      this.divShow = false
-      this.buttonShow = true
+  computed: {
+    ...mapState({
+      person: s => s.user,
+    }),
+    divShow() {
+      return false; // !!this.person?.phone
     }
   },
+  mounted() {
+  },
   methods: {
-    seeUserInfo() {
-      this.$router.push('/SetUser')
-      // this.$store.commit('SET_USER_INFO', { code: this.code })
-    },
-    goMyCollection() {
-      this.$router.push('/MyCollection')
-
-      // this.$store.commit('SET_USER_INFO', { code: this.code })
-    },
-
-    handGetUserInfo() {}
   }
 }
 </script>
@@ -80,96 +81,101 @@ export default {
   width: 100%;
   height: 100%;
   background-color: #fff;
+  background-image: url('~@/assets/userImag/backImag.png');
+  background-size: 100%;
+  background-repeat: no-repeat;
 
-  &-backImage {
-    width: 100%;
-  }
-  .user-info {
-    margin-bottom: 10px;
+  .user-card {
     display: flex;
-    height: 20%;
-    padding-left: 24px;
+    align-items: center;
+    width: 100vw;
+    box-sizing: border-box;
+    padding: 2em;
     position: relative;
-    top: -25vh;
-    > img {
-      width: 70px;
-      height: 70px;
-      border-radius: 50%;
-      position: relative;
-      top: 5vh;
-      box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);
-    }
-    .info-name {
-      font-weight: 600;
-      top: 5vh;
-      left: 6vw;
-      position: relative;
-      font-size: 17px;
-      height: 20%;
-      > div {
-        margin-top: 10px;
-        color: #fff;
+    min-height: 136px;
+
+    .profile {
+      width: 100%;
+      
+      > img {
+        width: 70px;
+        height: 70px;
+        border-radius: 50%;
+        position: relative;
+        box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.2);
       }
-      .userInfo-button {
-        // border: 1px solid red;
-        width: 120px;
-        color: rgb(255, 255, 255);
-        font-weight: 100;
-        border-top-left-radius: 20px; /* 左上角 */
-        border-bottom-left-radius: 20px; /* 左下角 */
-        position: absolute;
-        padding: 8px 0;
-        right: -41vw;
-        top: 0vh;
-        font-size: 5px;
-        text-align: center;
-        background-color: #2cb698;
+      .info-name {
+        margin-left: 1em;
+        position: relative;
+
+        > div {
+          margin-top: 10px;
+          color: #fff;
+        }
+
+        .title {
+          font-size: 17px;
+          font-weight: 700;
+        }
+
+        .subtitle {
+          font-size: 16px;
+          letter-spacing: 1px;
+        }
+
+        .userInfo-button {
+          color: rgb(255, 255, 255);
+          font-weight: 100;
+          border-top-left-radius: 20px; /* 左上角 */
+          border-bottom-left-radius: 20px; /* 左下角 */
+          position: absolute;
+          padding: 8px 10px;
+          right: -3em;
+          top: 1em;
+          font-size: 10px;
+          letter-spacing: 1px;
+          background-color: #2cb698;
+        }
+
       }
+
     }
     .userInfo-button-zhuce {
       width: 80px;
       letter-spacing: 4px;
-      position: relative;
-      top: 5vh;
-      text-align: center;
       color: #fff;
-      font-weight: 700;
-      margin: 0 auto;
       border-radius: 20px;
       line-height: 30px;
-      height: 30px;
       background-color: #2cb798;
+      margin: 0 auto;
+      text-align: center;
     }
   }
-  .button-box {
+  .menu-list {
     width: 90%;
     border-radius: 20px;
     margin: 0 auto;
-    box-shadow: 0px 8px 38px 0px rgba(0, 0, 0, 0.12);
+    box-shadow: 0px 0 2px 2px rgba(0, 0, 0, 0.12);
     background-color: #fff;
+    overflow: hidden;
 
-    height: 80vh;
     position: relative;
-    top: -28vh;
-    display: flex;
 
-    flex-direction: column;
+    .menu-title {
+      margin-left: 1em;
+      font-size: 18px;
+    }
 
-    &-div {
-      display: flex;
-      margin: 20px auto;
+    .van-cell {
+      padding-top: 28px;
+      padding-bottom: 28px;
+    }
 
-      width: 80%;
-      padding-bottom: 30px;
-      align-items: center;
-      border-bottom: 1px solid rgb(235, 235, 235);
-      > img {
-        width: 22px;
-        margin-right: 2em;
-      }
-      .van-icon {
-        position: absolute;
-        right: 20px;
+    .van-icon {
+      font-size: 20px;
+      
+      & > img {
+        padding-top: 2px;
       }
     }
   }