<!--
  rollMessage  数据  Array
  borderColor  边款颜色 String
  bgColor      背景色 String
  bgColorGradual 背景渐变色 Array
  bgColorGradualDeg 背景渐变色变换角度  Number
  fontColor   文字颜色 String
  icon        图标 String
  iconColor   图标颜色 String
  borderRadius 圆角  最大有效值 35

  案列:
  <noticeBar :rollMessage="list" borderColor="#0024f4" bgColor="#000000" fontColor="#ffffff" icon="level" iconColor="#ffffff" />
 -->
<template>
  <view>
    <!-- 消息控件  上线预告 -->
    <view class="relative" :style="(
          !!borderRadius ? ('border-radius: ' + borderRadius + 'rpx; '):''
        ) + (
          !!borderColor ? ('border: 1rpx solid ' + borderColor + '; '):''
        ) + (
          !!bgColor ? ('background-color: ' + bgColor + '; ') : (
            bgColorGradual.length>0 ? ('background-image: linear-gradient(' + (
                !!bgColorGradualDeg ? (bgColorGradualDeg + 'deg,') : ''
            ) + bgColorGradual.join(',') + '); '):''
          ))">
      <view class="absolute" style="left: 30rpx; top: 17rpx;">
        <u-icon :name="icon" :color="iconColor" size="20" />
      </view>
      <view class="margin-left-xxl">
       <u-notice-bar icon="·" bgColor="transparent" :color="fontColor" mode="horizontal" :text="rollMessage"
          direction="column" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      rollMessage: {
        type: Array,
        default:function() {
          return [];
        },
      },
      borderColor: {
        type: String,
        default: '#f46a6c',
      },
      bgColor: {
        type: String,
        default: '',
      },
      fontColor: {
        type: String,
        default: '#666666',
      },
      icon: {
        type: String,
        default: '/static/home/icon_more/v2/cion-trumpet@3x.png',
      },
      iconColor: {
        type: String,
        default: '#000000',
      },
      bgColorGradual: {
        type: Array,
        default:function() {
          return ['#ffdcdd', '#ffffff'];
        },
      },
      bgColorGradualDeg: {
        type: Number||String,
        default: 0,
      },
      borderRadius: {
        type: Number||String,
        default: 35,
      },
    },
    data() {
      return {
      }
    },
    created() {
    },
    methods: {
    }
  }
</script>

<style lang="scss">
</style>
