初始化

pages/index/components/specials/index.vue

@@ -0,0 +1,182 @@
+<template>
+	<view class="index">
+		<view class="indexbox">
+			<image class="indexboximage" :src="img" mode=""></image>
+			<view class="indexbox_box">
+				<view class="indexbox_boxtop flex-between" @click="specials">
+					<view class="indexbox_boxtopone">
+						{{title}}
+					</view>
+					<view class="indexbox_boxtoptow">
+						更多<text>></text>
+					</view>
+				</view>
+				<view class="indexbox_boxitem flex-between">
+					<view class="indexbox_boxitem_item flex-colum-start" v-for="(item,index) in list" :key="index"
+						@click="mallInfoInfo(item)">
+						<view class="indexbox_boxitem_itemimage">
+							<image :src="item.host_img" mode="widthFix"></image>
+						</view>
+						<view class="indexbox_boxitem_itemone">
+							{{item.title}}
+						</view>
+						<view class="indexbox_boxitem_itemtow flex-start">
+							<text>￥</text>
+							<text>{{item.price}}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {}
+		},
+		props: {
+			list: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			title: {
+				type: String,
+				default: '每日特价'
+			},
+			img: {
+				type: String,
+				default: ''
+			},
+
+		},
+		methods: {
+			specials(e) { //查看订单详情
+				uni.pro.navigateTo('index/specials', {
+					id: e.id,
+				})
+			},
+			mallInfoInfo(e) { //查看订单详情
+				uni.pro.navigateTo('mall/mallInfo', {
+					id: e.id,
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.index {
+		.indexbox {
+			margin: 32rpx 28rpx 0 28rpx;
+			position: relative;
+			height: 378rpx;
+
+			.indexboximage {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 378rpx;
+				z-index: 1;
+			}
+
+			.indexbox_box {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				z-index: 2;
+				padding: 16rpx;
+
+				.indexbox_boxtop {
+					margin-top: 8rpx;
+					width: 100%;
+
+					.indexbox_boxtopone {
+						font-size: 28rpx;
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: bold;
+						color: #333333;
+					}
+
+					.indexbox_boxtoptow {
+						font-size: 18rpx;
+						font-family: Source Han Sans CN, Source Han Sans CN;
+						font-weight: 400;
+						color: #FD6C60;
+						background: #FFFFFF;
+						border-radius: 18rpx;
+						padding: 6rpx 16rpx;
+
+						text {
+							font-size: 16rpx;
+						}
+					}
+				}
+
+				.indexbox_boxitem {
+					margin-top: 16rpx;
+					padding: 16rpx 12rpx;
+					background: #ffffff;
+
+					.indexbox_boxitem_item {
+						.indexbox_boxitem_itemimage {
+							width: 148rpx;
+							height: 148rpx;
+							background: #F8F8F8;
+							border-radius: 8rpx;
+
+							image {
+								width: auto;
+								height: auto;
+							}
+						}
+
+						.indexbox_boxitem_itemone {
+							width: 148rpx;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+							margin-top: 8rpx;
+							font-size: 24rpx;
+							font-family: Source Han Sans CN, Source Han Sans CN;
+							font-weight: 400;
+							color: #1A1A1A;
+						}
+
+						.indexbox_boxitem_itemtow {
+							margin-top: 12rpx;
+							padding-right: 10rpx;
+							justify-content: flex-end;
+							background: url(@/static/imge/specials.png) no-repeat;
+							background-size: cover;
+							width: 148rpx;
+							height: 48rpx;
+							font-family: Roboto, Roboto;
+							font-weight: bold;
+							color: #FFFFFF;
+
+							text {
+								height: 48rpx;
+							}
+
+							text:nth-child(1) {
+								line-height: 50rpx;
+								font-size: 16rpx;
+							}
+
+							text:nth-child(2) {
+								line-height: 48rpx;
+								font-size: 22rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>