wx-fensisiyu/pageA/formerly.vue

<template>
	<view class="page">
		<view class="" style="position: relative;">
			<image class="img" src="../static/logo.png" mode=""></image>
			<view class="back">直播已结束</view>
			<view class="bottom">
				<u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
			</view>
			<view class="time u-flex ">
				2021-08-19 19:30:00
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss">
	::v-deep .u-type-warning-light-bg {
		background-color: rgba(255, 255, 255, 0) !important;
	}

	::v-deep .u-icon__icon--warning {
		color: #fff !important
	}

	::v-deep .u-type-warning {
		color: #fff !important
	}

	.bottom {
		width: 702rpx;
		height: 76rpx;
		background: rgba(44, 45, 48, 0.75);
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		position: absolute;
		top: 204rpx;
		left: 0
	}

	.time {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 34rpx;
		color: #7A7A7A;
		justify-content: flex-end;
	}

	.back {
		width: 158rpx;
		height: 56rpx;
		background: rgba(187, 187, 187, 1);
		border-radius: 16rpx 0rpx 22rpx 0rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 56rpx;
		color: #FFFFFF;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
	}

	.page {
		width: 750rpx;
		min-height: 100vh;
		background: rgba(246, 245, 250, 1);
		padding: 20rpx 24rpx 0;
	}

	.img {
		width: 702rpx;
		height: 280rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
	}
</style>