[完成] 获取红线页面UI

components/lf-price/lf-price.vue

@@ -1,11 +1,11 @@
 <template>
-	<view>
+	<view :style="{'--color': color, 'display': 'inline-block'}">
 		<block v-if="isPoint">
-			<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice(1) }}</text>
-			<text class="lf-font-28 lf-font-bold lf-color-price">.{{ showPrice(2) }}</text>
+			<text class="price-one text-price">{{ showPrice(1) }}</text>
+			<text class="price-two">.{{ showPrice(2) }}</text>
 		</block>
 		<block v-else>
-			<text class="text-price lf-font-48 lf-font-bold lf-color-price">{{ showPrice() }}</text>
+			<text class="price-one text-price">{{ showPrice() }}</text>
 		</block>
 	</view>
 </template>
@@ -16,6 +16,10 @@
 			price: {
 				type: [Number, String],
 				default: ''
+			},
+			color: {
+				type: String,
+				default: '#FF0000'
 			}
 		},
 		computed: {
@@ -42,5 +46,21 @@
 </script>
 
 <style lang="scss" scoped="scoped">
-	
+	.price-one{
+		font-size: 32rpx;
+		font-weight: bold;
+		color: var(--color);
+	}
+	.price-two{
+		font-size: 24rpx;
+		font-weight: bold;
+		color: var(--color);
+	}
+	.text-price::before {
+		content: "¥";
+		font-size: 24rpx!important;
+		margin-right: 4rpx;
+		font-weight: bold;
+		color: var(--color);
+	}
 </style>

pages.json

@@ -270,6 +270,12 @@
 			"style": {
 				"navigationBarTitleText": "形象照"
 			}
+		},
+		{
+			"path": "pages/my/getRedLine",
+			"style": {
+				"navigationBarTitleText": "获取红线"
+			}
 		}
 	],
 	"globalStyle": {

pages/my/getRedLine.vue

@@ -0,0 +1,142 @@
+<template>
+	<view class="content">
+		<view class="card" v-for="item in 4" :key="item">
+			<view class="cover">
+				<lf-image src="https://picsum.photos/200"></lf-image>
+				<view class="tips">有效3天</view>
+			</view>
+			<view class="info">
+				<view>
+					<text class="title" v-if="item == 0">套餐一：实用</text>
+					<!-- <text class="title">套餐一：实用</text> -->
+					<text class="title" v-else>套餐一：实实用实用实用实用实用实用用</text>
+					<text class="label">6.5折</text>
+				</view>
+				<view class="lf-m-t-12 lf-font-24">
+					<text class="lf-color-777">红线数：</text>
+					<text>1根</text>
+				</view>
+				<view class="lf-m-t-16">
+					<lf-price :price="30.12" color="#E21196"></lf-price>
+					<text class="original-price">¥30.00</text>
+				</view>
+				<view class="float-btn" hover-class="lf-opacity">
+					<button>买</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import lfPrice from '@/components/lf-price/lf-price.vue'
+	export default {
+		components: { lfPrice },
+		data(){
+			return {
+				
+			}
+		},
+		onLoad(){
+			// 点击买字按钮直接调取支付
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: max-content;
+		padding: 30rpx 32rpx;
+		box-sizing: border-box;
+		display: flex;
+		flex-wrap: wrap;
+		.card{
+			width: 333rpx;
+			height: max-content;
+			background-color: #FFFFFF;
+			box-shadow: 0rpx -2rpx 20rpx 2rpx rgba(0, 0, 0, 0.07);
+			border-radius: 10rpx;
+			overflow: hidden;
+			margin-right: 20rpx;
+			&:nth-child(2n){
+				margin-right: 0;
+			}
+			&:nth-child(n+3){
+				margin-top: 20rpx;
+			}
+			.cover{
+				width: 100%;
+				height: 260rpx;
+				position: relative;
+				.tips{
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 111rpx;
+					height: 33rpx;
+					background: linear-gradient(180deg, #FE3EA5 0%, #FE7350 100%);
+					border-radius: 10rpx 0rpx 5rpx 0rpx;
+					color: #FFFFFF;
+					font-size: 24rpx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+			}
+			.info{
+				padding: 15rpx;
+				box-sizing: border-box;
+				position: relative;
+				.title{
+					font-size: 28rpx;
+					font-weight: bold;
+					color: #222222;
+					margin-right: 15rpx;
+				}
+				.label{
+					display: inline-block;
+					width: 84rpx;
+					height: 33rpx;
+					border-radius: 3rpx;
+					border: 2rpx solid #E21196;
+					font-size: 24rpx;
+					color: #E21196;
+					text-align: center;
+					line-height: 29rpx;
+				}
+				.original-price{
+					margin-left: 15rpx;
+					color: #777777;
+					font-size: 24rpx;
+					text-decoration: line-through;
+				}
+				.float-btn{
+					position: absolute;
+					width: 45rpx;
+					height: 45rpx;
+					padding: 15rpx;
+					right: 0;
+					bottom: 10rpx;
+					box-sizing: content-box;
+					button{
+						width: 100%;
+						height: 100%;
+						border-radius: 50%;
+						background: #E21196;
+						margin: 0;
+						padding: 0;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/my/index.vue

@@ -51,7 +51,7 @@
 				</view>
 			</view> -->
 		</view>
-		<view class="adv">
+		<view class="adv" @click="$url('/pages/my/getRedLine')">
 			<view>
 				<!-- <image src="../../static/logo.png" mode="widthFix" class="adv-pic"></image> -->
 				<view class="logo-my">