index.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <div class="back-bar border-bottom">
  3. <div class="arrow-icon" @click="onBack">
  4. <i class="el-icon-arrow-left"></i>
  5. </div>
  6. {{title}}
  7. <a :href="url" target="_blank" class="icon-link" v-if="url"></a>
  8. <slot></slot>
  9. </div>
  10. </template>
  11. <script>
  12. export default {
  13. name: 'backBar',
  14. props: {
  15. 'title': String,
  16. 'url': String
  17. },
  18. methods: {
  19. onBack () {
  20. if (this.$router) {
  21. this.$router.go(-1)
  22. } else {
  23. this.$emit('onBack')
  24. }
  25. }
  26. }
  27. }
  28. </script>
  29. <style lang="scss" scoped>
  30. .back-bar{
  31. height: px2rem(90);
  32. line-height: px2rem(90);
  33. text-align: center;
  34. font-size: px2rem(34);
  35. color: #333333;
  36. position: relative;
  37. background: #ffffff;
  38. padding: 0 px2rem(70) 0 px2rem(70);
  39. .arrow-icon{
  40. position: absolute;
  41. left: 0;
  42. top: 0;
  43. bottom: 0;
  44. height: px2rem(90);
  45. line-height: px2rem(90);
  46. text-align: center;
  47. width: px2rem(70);
  48. }
  49. i{
  50. color: #333333;
  51. font-size: px2rem(42);
  52. }
  53. }
  54. .h5-wrap{
  55. .back-bar{
  56. background-color: #f2f2f2;
  57. }
  58. .icon-link{
  59. display: inline-block;
  60. width: 18px;
  61. height: 18px;
  62. margin-left: 6px;
  63. vertical-align: middle;
  64. text-align: center;
  65. background: url(../../assets/h5/icon-link.png) center/100% no-repeat;
  66. &:hover{
  67. text-decoration: none;
  68. opacity: 0.8;
  69. }
  70. }
  71. }
  72. </style>