newEdition/pages/mine/daily/dailyList.vue

<template>
	<view class="dailyList">
		<view class="listItem">
			<view class="tit">
				<view class="notRead">
					<view class="red"></view>
				</view>
				<text>
					01月27日接待指标概览
				</text>
			</view>
			<view class="Introduction">
				指标总计9个，其中3个明显上涨，2个明显下单，5个小幅波动。
			</view>
			<view class="tag">
				<u-tag text="最大波动指标" plain type="warning"></u-tag>
			</view>
			<view class="details">
				<view class="statusIcon down"></view>
				<text class="textInfo">
					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
				</text>
			</view>
			<view class="goDetail">
				详细报告
			</view>
		</view>
		<view class="listItem">
			<view class="tit">
				<!-- <view class="notRead">
					<view class="red"></view>
				</view> -->
				<text>
					01月27日接待指标概览
				</text>
			</view>
			<view class="Introduction">
				指标总计9个，其中3个明显上涨，2个明显下单，5个小幅波动。
			</view>
			<view class="tag">
				<u-tag text="最大波动指标" plain type="warning"></u-tag>
			</view>
			<view class="details">
				<view class="statusIcon up"></view>
				<text class="textInfo">
					01月27日接待的平均执行率明显上涨，环比26日上涨<text class="upText">120%</text>，同比上周上涨<text class="downText">10%</text>
				</text>
			</view>
			<view class="goDetail" @click="goDetail">
				详细报告
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"dailyList",
		data() {
			return {
				
			}
		},
		methods: {
			goDetail(){
				uni.navigateTo({
					url:"./dailyDetail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.dailyList{
	padding: 0 20rpx;
	.listItem{
		border: 0.5px solid #868686;
		border-radius: 16rpx;
		padding: 22rpx;
		margin-bottom: 20rpx;
		.tit{
			display: flex;
			align-items: center;
			.notRead{
				width: 14rpx;
				height: 14rpx;
				margin-right: 10rpx;
				.red{
					background: #FF0000;
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
			text{
				font-size: 36rpx;
				font-weight: bold;
			}
			margin-bottom: 20rpx;
		}
		.Introduction{
			font-size: 28rpx;
			font-weight: bold;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.tag{
			margin: 10rpx 0 20rpx;
		}
		.details{
			display: flex;
			.statusIcon{
				width: 70rpx;
				height: 40rpx;
			}
			.up{
				background: url(img/up.png) no-repeat;
				background-size: 100%;
			}
			.down{
				background: url(img/down.png) no-repeat;
				background-size: 100%;
			}
			.textInfo{
				font-size: 26rpx;
				.upText{
					color: red;
				}
				.downText{
					color: green;
				}
			}
		}
		.goDetail{
			font-size: 28rpx;
			color: #3A8EED;
			text-align: right;
		}
	}
}
</style>