Back.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <template>
  2. <div class="yse-events back_main" style="height: 100%;display: flex;flex-direction: column;justify-content: flex-end">
  3. <div style="width:250px;">
  4. <div class="label cursor-pointer" @click="goBack"><div class=" front-icon back" ></div>{{title}}</div>
  5. </div>
  6. </div>
  7. </template>
  8. <script setup>
  9. import {inject, ref} from "vue"
  10. import {useRouter} from "vue-router";
  11. const router = useRouter();
  12. const emit = defineEmits(["goBack"]);
  13. let props = defineProps({title:{type:String,value:""},menuType:{type:String,value:""}})
  14. function goBack(){
  15. emit("goBack",props.menuType)
  16. }
  17. defineExpose({})
  18. </script>
  19. <style lang="scss" scoped>
  20. .back_main{
  21. background-image: url(@/assets/img/input_bg1.png);
  22. background-repeat: no-repeat;
  23. background-size: 100% 13px;
  24. background-position: 0 100%;
  25. padding-bottom: 5px;
  26. padding-left: 20px;
  27. box-sizing: border-box;
  28. .label{
  29. display: flex;
  30. align-items: center;
  31. color: #FFFFFF;
  32. font-size: 16px;
  33. .front-icon{
  34. background-size: 100% 100%;
  35. width: 20px;
  36. height: 20px;
  37. }
  38. .back{
  39. background-image: url('@/assets/img/back.png');
  40. margin-right: 5px;
  41. }
  42. }
  43. }
  44. </style>