uni-app 课程组件

uni-app 课程组件

UI给的图 - 这个用的比较多封个组件

代码

<template>
	<view
		class="MyCurriculum"
		:style="{
			filter: gray ? 'grayscale(' + hue + '%)' : ''
		}"
	>
		<view class="_new" :style="newStyle" v-if="isnew">{{ newText }}</view>
		<slot name="image">
			<view class="showImage"><image :src="img" mode="widthFix" :style="{ height: !img ? '200rpx' : '' }"></image></view>
		</slot>
		<slot name="content">
			<view class="content-container">
				<view class="title">{{ title }}</view>
				<view class="">开通时间：{{ start }}</view>
				<view class="">剩余时间：{{ surplus }}</view>
				<view class="">学习进度条：{{ plan }}</view>
			</view>
		</slot>
		<view class="_tag" v-if="tagText" :style="tagStyle">{{ tagText }}</view>
	</view>
</template>

<script>
export default {
	name: 'my-curriculum',
	data() {
		return {};
	},
	props: {
		isnew: { type: Boolean, default: false },
		newText: { type: String, default: '新课' },
		newStyle: {
			type: Object,
			default: () => {
				return {};
			}
		},
		gray: { type: Boolean, default: false },
		hue: { type: [Number,String], default: 100  },
		plan: { type: String, default: '' },
		img: { type: String, default: '' },
		tagText: { type: String, default: '' },
		tagStyle: {
			type: Object,
			default: () => {
				return {};
			}
		},
		title: { type: String, default: '' },
		start: { type: String, default: '' },
		surplus: { type: String, default: '' }
	}
};
</script>

<style lang="scss">
.MyCurriculum {
	display: flex;
	overflow: hidden;
	position: relative;
	background-color: #ffffff;
	border-radius: $uni-border-radius-base;
	._tag,
	._new {
		top: 10rpx;
		z-index: 999;
		color: #ffffff;
		font-weight: bold;
		position: absolute;
		padding: 10rpx 50rpx;
	}
	._tag {
		right: -50rpx;
		background: red;
		transform: rotate(45deg);
	}
	._new {
		left: 0;
		font-size: 16rpx;
		padding: 0rpx 10rpx;
		background: linear-gradient(90deg, #ffb90c, #ff2b17);
		border-radius: 0px $uni-border-radius-circle $uni-border-radius-circle 0px;
	}
	.showImage {
		flex-grow: 1;
		display: flex;
		overflow: hidden;
		min-width: 310rpx;
		align-items: center;
		justify-content: center;
		border-radius: $uni-border-radius-base;
		image {
			width: 100%;
		}
	}
	.content-container {
		color: #666666;
		font-size: 24rpx;
		font-weight: bold;
		margin-left: 30rpx;
		overflow: hidden;
		width: calc(100% - 30rpx);
		.title {
			color: #333333;
			overflow: hidden;
			font-size: 34rpx;
			font-weight: bold;
			white-space: nowrap;
			margin-bottom: 30rpx;
		}
	}
}
</style>

 使用

	<my-curriculum
					class="list-item"
					v-for="(item, index) in 10"
					:key="index"
					:isnew="item % 3 ? true : false"
					:gray="item % 2 ? true : false"
					:hue="item % 2 ? '100' : '20'"
					:tagText="item % 3 ? '已过期' : index % 3 ? '' : '最热'"
					img="../../static/img/1.png"
					:title="'这是标题' + item"
					start="2021/12/17"
					:surplus="item ** 5 + '天'"
					:plan="item ** 4 + '%'"
				></my-curriculum>

大概的一个效果

 这个是按照我的需求来的  你们有啥需求可以自己去修改

有什么好的建议可以留言或私信反馈谢谢