route.vue 1015 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <div class="tishi">
  3. <div class="longen">
  4. 可以点击新手指引再次打开提示框
  5. </div>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. components: {},
  11. props: {},
  12. data() {
  13. return {};
  14. },
  15. watch: {},
  16. computed: {},
  17. created() {},
  18. mounted() {},
  19. methods: {},
  20. };
  21. </script>
  22. <style lang="scss" scoped>
  23. .tishi{
  24. position: fixed;
  25. top: 100px;
  26. left:100px;
  27. width: 150px;
  28. height: 60px;
  29. .longen {
  30. width: 100%;
  31. // height: 100%;
  32. padding:10px;
  33. border: 1px solid rgb(116, 123, 128);
  34. position: relative;
  35. background-color: #fff;
  36. }
  37. .longen:before,
  38. .longen:after {
  39. content: "";
  40. display: block;
  41. border-width: 10px;
  42. position: absolute;
  43. top: calc(50% - 8px);
  44. right: -21px;
  45. border-style: dashed dashed solid;
  46. border-color: transparent transparent transparent rgb(116, 123, 128);
  47. font-size: 0;
  48. line-height: 0;
  49. }
  50. .longen:after {
  51. right: -20px;
  52. border-color: transparent transparent transparent #fff;
  53. }
  54. }
  55. </style>