uni-zhihuikuangshan/components/t-i-notice/t-i-notice.vue

<template>
	<view class="content">
		<view class="box">
			<!-- 文字滚动 -->
			<uni-notice-bar :speed="50" background-color="#ffffff00" color="#fff" single="true"
				:text="text_time"></uni-notice-bar>

			<!-- 文字滚动 -->
			<uni-notice-bar scrollable="true" :speed="20" background-color="#ffffff00" color="#fff" single="true"
				:text="text"></uni-notice-bar>
		</view>
	</view>
</template>

<script>
	export default {
		name: "t-i-notice",
		props: [
			"text"
		],
		data() {
			return {
				text_time:"",
			};
		},
		created() {
			this.getCurrentDate()
		},
		methods: {
			getCurrentDate() {
				var myDate = new Date();
				var year = myDate.getFullYear(); //年
				var month = myDate.getMonth() + 1; //月
				var day = myDate.getDate(); //日
				var days = myDate.getDay();
				switch (days) {
					case 1:
						days = '星期一';
						break;
					case 2:
						days = '星期二';
						break;
					case 3:
						days = '星期三';
						break;
					case 4:
						days = '星期四';
						break;
					case 5:
						days = '星期五';
						break;
					case 6:
						days = '星期六';
						break;
					case 0:
						days = '星期日';
						break;
				}
				var str = "今日 " + " " +  year + "年" + month + "月" + day + "日  " + days;
				this.text_time = str
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		height: 244rpx;

		background-image: url(./icon/bg_img.jpg);
		background-size: 750rpx 334rpx;
		background-repeat: no-repeat;
		background-position: bottom;

		box-sizing: border-box;
		padding-top: 20rpx;
	}

	.box {
		margin: 0 auto;
		width: 700rpx;
		// height: 200rpx;
		background-color: rgba(255, 255, 255, .4);
		border-radius: 20rpx;

		box-sizing: border-box;
		padding: 0 20rpx;

		/deep/.uni-noticebar {
			margin-bottom: 0;
		}
	}
</style>