个人明细等

components/bussiness/detail-btn.vue

+<template>
+  <div :class="{fixed: isFixed}">
+    <div class="detail-btn" :class="{bt: needBT}">
+      <span @click="btnClick" :style="{width: btnWidth}">{{btnText}}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    isFixed: {
+      type: Boolean | String,
+      default: true,
+    },
+    btnWidth: {
+      type: String,
+      default: '100%'
+    },
+    btnText: {
+      tpye: String,
+      default: '获得更多勤奋分'
+    },
+    needBT: {
+      type: Boolean | String,
+      default: false
+    }
+  },
+  methods: {
+    btnClick() {
+      this.$emit('btnClick');
+    }
+  },
+}
+</script>
+<style lang="less">
+  .fixed {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+  }
+  .detail-btn {
+    display: flex;
+    flex-direction: row;
+    height: 50px;
+    line-height: 50px;
+    padding: 0 15px;
+    align-items: center;
+    text-align: center;
+    &.bt {
+      border-top: 1px solid #EDEDED;
+    }
+    span {
+      height: 40px;
+      line-height: 40px;
+      margin: 0 auto;
+      width: 100%;
+      text-align: center;
+      font-size: 15px;
+      font-weight: 700;
+      background:linear-gradient(90deg,rgba(241,104,57,1) 0%,rgba(220,49,81,1) 100%);
+      border-radius: 20px;
+      color: #fff;
+    }
+  }
+</style>
\ No newline at end of file

components/bussiness/detail-list.vue

+<template>
+  <div class="detail-list br">
+    <ul v-show="dataList.length">
+      <li class="list" v-for="(item, index) in dataList" :key="index">
+        <img src="../../assets/type-2.png" alt="">
+        <ul class="desc">
+          <li class="text">邀请居民做健康排查</li>
+          <li class="time">2019.12.15 10:35</li>
+        </ul>
+        <span class="score"><span>+5</span>勤奋分</span>
+      </li>
+    </ul>
+    <div v-show="!dataList.length" class="no-content">
+      <img src="../../assets/no-content.png" alt="">
+      <div class="text">暂无记录,您还没有参加活动</div>
+      <DetailBtn style="margin-top: 30px;" btnText="立即参加" :isFixed="isFixed" btnWidth="50%"></DetailBtn>
+    </div>
+  </div>
+</template>
+<script>
+import DetailBtn from '@/components/bussiness/detail-btn';
+export default {
+  components: {
+    DetailBtn
+  },
+  props: {
+    dataList: {
+      type: Array,
+      default: () => [0, 1, 3, 4]
+    }
+  },
+  data() {
+    return {
+      isFixed: false
+    }
+  },
+}
+</script>
+<style lang="less">
+  .detail-list {
+    font-size: 16px;
+    &.br {
+      border-radius: 20px 20px 0 0;
+      margin-top: -24px;
+      position: relative;
+      top: 0;
+      left: 0;
+      z-index: 3;
+      background: #fff;
+    }
+    .list {
+      display: flex;
+      flex-direction: row;
+      height: 79px;
+      // line-height: 79px;
+      align-content: space-between;
+      align-items: center;
+      margin: 0 15px;
+      border-bottom: 1px solid #F8F9FA;
+      img {
+        width: 50px;
+        height: 50px;
+        border-radius: 25px;
+      }
+      .desc {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        margin-left: 15px;
+        .text {
+          height: 16px;
+          line-height: 16px;
+          font-size: 16px;
+          font-weight: 700;
+          color: #373839;
+        }
+        .time {
+          margin-top: 8px;
+          height: 13px;
+          line-height: 13px;
+          font-size: 13px;
+          font-size: 13px;
+          font-weight: 400;
+          color: #676869;
+        }
+      }
+      .score {
+        height: 13px;
+        line-height: 13px;
+        font-size: 13px;
+        font-weight: 700;
+        color: #373839;
+        span {
+          color: #FD5A2F;
+        }
+      }
+    }
+    .no-content {
+      padding-top: 100px;
+      text-align: center;
+      .text {
+        font-size: 15px;
+        color: #999999;
+      }
+      img {
+        width: 150px;
+        height: 150px;
+      }
+    }
+  }
+
+</style>
\ No newline at end of file

layouts/default.vue

@@ -7,7 +7,7 @@
 <script>
 export default {
   mounted() {
-    this.$rocNative.appInit();
+    !this.$rocNative.isWeb &&this.$rocNative.appInit();
   },
 }
 </script>

pages/perdetails.vue

+<template>
+  <section class="personal-details-wrapper">
+    <article class="user">
+      <img class="user-img" src="../assets/user-header.png" alt="">
+      <div class="profile">
+        <img src="../assets/user-header.png" alt="">
+        <div class="desc">
+          <span class="score">22345</span>
+          <span class="text">我的勤奋分</span>
+        </div>
+      </div>
+    </article>
+    <DetailList></DetailList>
+    <DetailBtn needBT=true @btnClick="btnClick"></DetailBtn>
+  </section>
+</template>
+<script>
+import DetailList from '@/components/bussiness/detail-list';
+import DetailBtn from '@/components/bussiness/detail-btn';
+export default {
+  components: {
+    DetailList,
+    DetailBtn
+  },
+  data() {
+    return {
+      
+    }
+  },
+  methods: {
+    btnClick() {
+      console.log(11);
+      // alert(1);
+    }
+  },
+}
+</script>
+<style lang="less">
+  .personal-details-wrapper {
+    .user {
+      position: relative;
+      top: 0;
+      left: 0;
+      z-index: 1;
+      &-img {
+        // width: 100%;
+        height: 114px;
+      }
+      .profile {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        display: flex;
+        flex-direction: row;
+        height: 90px;
+        margin: 0 15px;
+        align-items: center;
+        img {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+        }
+        .desc {
+          // flex: 1;
+          width: 80px;
+          display: flex;
+          flex-direction: column;
+          // margin-left: 15px;
+          text-align: center;
+          .score {
+            height: 24px;
+            line-height: 24px;
+            font-size: 24px;
+            font-weight: 700;
+            color: rgba(255,232,165, 0.8);
+          }
+          .text {
+            height: 18px;
+            line-height: 18px;
+            // margin-top: 6px;
+            font-size: 12px;
+            font-weight: 400;
+            color: #FFE8A5;
+            border: 1px solid rgba(255,232,165, 0.8);
+            border-radius: 9px;
+          }
+        }
+      }
+    }
+    // .user-img {
+    //   width: 100%;
+    //   height: 114px;
+    // }
+  }
+</style>
\ No newline at end of file