12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <template>
- <div class="back-bar border-bottom">
- <div class="arrow-icon" @click="onBack">
- <i class="el-icon-arrow-left"></i>
- </div>
- {{title}}
- <a :href="url" target="_blank" class="icon-link" v-if="url"></a>
- <slot></slot>
- </div>
- </template>
- <script>
- export default {
- name: 'backBar',
- props: {
- 'title': String,
- 'url': String
- },
- methods: {
- onBack () {
- if (this.$router) {
- this.$router.go(-1)
- } else {
- this.$emit('onBack')
- }
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .back-bar{
- height: px2rem(90);
- line-height: px2rem(90);
- text-align: center;
- font-size: px2rem(34);
- color:
- position: relative;
- background:
- padding: 0 px2rem(70) 0 px2rem(70);
- .arrow-icon{
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- height: px2rem(90);
- line-height: px2rem(90);
- text-align: center;
- width: px2rem(70);
- }
- i{
- color:
- font-size: px2rem(42);
- }
- }
- .h5-wrap{
- .back-bar{
- background-color:
- }
- .icon-link{
- display: inline-block;
- width: 18px;
- height: 18px;
- margin-left: 6px;
- vertical-align: middle;
- text-align: center;
- background: url(../../assets/h5/icon-link.png) center/100% no-repeat;
- &:hover{
- text-decoration: none;
- opacity: 0.8;
- }
- }
- }
- </style>
|