guide.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <template>
  2. <!-- 开屏广告 -->
  3. <view v-show="!isSortType">
  4. <view class="lines" :style="'padding:0 '+ lrEdge*2 +'rpx;margin-top:'+ mbConfig*2 +'rpx;'" v-if="heightConfig">
  5. <view class="item" :style="'border-bottom-width:'+ heightConfig*2 +'rpx;border-bottom-color:'+ lineColor +';border-bottom-style:'+ lineStyle +';'"></view>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. name: 'guide',
  12. props: {
  13. dataConfig: {
  14. type: Object,
  15. default: () => {}
  16. },
  17. isSortType:{
  18. type: String | Number,
  19. default:0
  20. }
  21. },
  22. data() {
  23. return {
  24. heightConfig:this.dataConfig.heightConfig.val,
  25. lineColor:this.dataConfig.lineColor.color[0].item,
  26. lineStyle:this.dataConfig.lineStyle.list[this.dataConfig.lineStyle.type].style,
  27. lrEdge:this.dataConfig.lrEdge.val,
  28. mbConfig:this.dataConfig.mbConfig.val
  29. };
  30. },
  31. created() {},
  32. methods: {
  33. }
  34. }
  35. </script>
  36. <style lang="scss">
  37. .lines{
  38. padding: 0 20rpx;
  39. margin-top: 20rpx;
  40. .item{
  41. width: 100%;
  42. box-sizing: border-box;
  43. border-bottom-color: red;
  44. border-bottom-width: 1px;
  45. // dashed
  46. border-bottom-style: dotted;
  47. }
  48. }
  49. </style>