邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.
 
 
 
 

117 wiersze
2.3 KiB

  1. <template>
  2. <div class="pages">
  3. <div class="logoBox">
  4. <img src="../../assets/img/logoh.png" class="logo" @click="go('/')" />
  5. <div class="userInfo">
  6. <div class="nickName" @click="go('/myPage')">用户名</div>
  7. <div class="userModel">
  8. <img
  9. class="userImg"
  10. src="../../assets/img/user_black.png"
  11. @click="go('/myPage')"
  12. />
  13. <img
  14. class="userImg"
  15. src="../../assets/img/loginOut.png"
  16. @click="loginOut()"
  17. />
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </template>
  23. <script>
  24. import Vue from "vue";
  25. import { mapState, mapActions } from "vuex";
  26. import { Toast, Dialog } from "vant";
  27. import { doLoginOut } from "../../api/login";
  28. Vue.use(Toast);
  29. export default {
  30. data() {
  31. return {};
  32. },
  33. computed: {
  34. ...mapState({
  35. characters: (state) => state.publicObj.characters,
  36. }),
  37. },
  38. methods: {
  39. ...mapActions(["setCharacters"]),
  40. go(url) {
  41. this.$router.push(url);
  42. },
  43. loginOut() {
  44. Dialog.confirm({
  45. title: "退出登录",
  46. message: "您确定要退出登录吗?",
  47. })
  48. .then(() => {
  49. this.goLoginOut();
  50. })
  51. .catch(() => {
  52. return;
  53. });
  54. },
  55. async goLoginOut() {
  56. try {
  57. const res = await doLoginOut();
  58. this.$router.push("/login");
  59. } catch (error) {
  60. console.log(error, "error");
  61. Toast.fail(error.message);
  62. }
  63. },
  64. },
  65. created() {},
  66. };
  67. </script>
  68. <style lang="scss" scoped>
  69. .pages {
  70. position: sticky;
  71. top: 0;
  72. background-color: #fff;
  73. z-index: 99;
  74. .logoBox {
  75. display: flex;
  76. justify-content: space-between;
  77. align-items: center;
  78. overflow: hidden;
  79. cursor: pointer;
  80. background-color: #fff;
  81. .logo {
  82. float: left;
  83. width: 140px;
  84. height: 40px;
  85. }
  86. .userInfo {
  87. display: flex;
  88. justify-content: space-between;
  89. align-items: center;
  90. color: #000000;
  91. .nickName {
  92. position: relative;
  93. top: 1px;
  94. font-weight: 600;
  95. font-size: 13px;
  96. margin-right: 15px;
  97. }
  98. .userModel {
  99. position: relative;
  100. top: 3px;
  101. margin-right: 10px;
  102. .userImg {
  103. width: 30px;
  104. height: 30px;
  105. margin-right: 2px;
  106. }
  107. }
  108. }
  109. }
  110. }
  111. </style>