You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
2.4 KiB
95 lines
2.4 KiB
<!--
|
|
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>
|
|
|