MinePage.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <div class="mine-container">
  3. <div class="header">
  4. <!-- <van-image
  5. round
  6. width="2.5rem"
  7. height="2.5rem"
  8. :src="require('../../assets/img/t1.png')"
  9. /> -->
  10. <van-image
  11. round
  12. width="2.5rem"
  13. height="2.5rem"
  14. :src="imgSrc"
  15. />
  16. <h3>昵称</h3>
  17. </div>
  18. <div class="nav">
  19. <van-cell-group inset>
  20. <van-cell title="我的成绩" size="large" is-link to="/score" icon="edit"/>
  21. <van-cell title="我的地址" size="large" is-link to="/address" icon="location-o"/>
  22. </van-cell-group>
  23. </div>
  24. </div>
  25. </template>
  26. <style scoped>
  27. .mine-container {
  28. background-color: #9bb771;
  29. position: absolute;
  30. top: 1rem;
  31. left: 0;
  32. right: 0;
  33. bottom: 1rem;
  34. }
  35. .header {
  36. margin-top: 0.5rem;
  37. display: flex;
  38. flex-direction: column;
  39. align-items: center;
  40. }
  41. .header h3 {
  42. font-size: 0.6rem;
  43. }
  44. </style>
  45. <script>
  46. import img from "../../assets/img/t1.png"
  47. export default {
  48. data() {
  49. return {
  50. imgSrc:img
  51. }
  52. },
  53. mounted() {
  54. this.$emit("changePage", "1004");
  55. },
  56. };
  57. </script>