邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

head.vue 1.3 KiB

2 years ago
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <div class="page">
  3. <div class="logoBox" @click="go('/')">
  4. <img src="../../assets/img/LOGO1.png" class="logo" />
  5. <div class="userInfo">
  6. <div>用户名</div>
  7. <img class="userImg" src="../../assets/img/user center.png" />
  8. </div>
  9. </div>
  10. </div>
  11. </template>
  12. <script>
  13. import Vue from "vue";
  14. import { mapState, mapActions } from "vuex";
  15. import { Toast } from "vant";
  16. import baseUrl from "../../api/baseUrl";
  17. Vue.use(Toast);
  18. export default {
  19. data() {
  20. return {};
  21. },
  22. computed: {
  23. ...mapState({
  24. characters: (state) => state.publicObj.characters,
  25. }),
  26. },
  27. methods: {
  28. ...mapActions(["setCharacters"]),
  29. go(url) {
  30. this.$router.push(url);
  31. },
  32. },
  33. created() {},
  34. };
  35. </script>
  36. <style lang="scss" scoped>
  37. .page {
  38. .logoBox {
  39. display: flex;
  40. justify-content: space-between;
  41. align-items: center;
  42. overflow: hidden;
  43. cursor: pointer;
  44. background-color: #606060;
  45. .logo {
  46. float: left;
  47. width: 140px;
  48. height: 40px;
  49. }
  50. .userInfo {
  51. display: flex;
  52. justify-content: space-between;
  53. align-items: center;
  54. color: #fff;
  55. .userImg {
  56. float: right;
  57. width: 30px;
  58. height: 30px;
  59. margin-top: 3px;
  60. margin-right: 10px;
  61. margin-left: 15px;
  62. }
  63. }
  64. }
  65. }
  66. </style>