baozhida-mall-applet/pages/home/productDetails.vue

<template>
	<!-- pages/home/productDetails -->
	<view>
		<u-navbar placeholder leftIconSize="22px" @leftClick="leftClick">
			<view class="u-nav-slot" slot="center">
				<view>
					<u-search v-model="keyword" height="60rpx" placeholder="请输入药品" borderColor="#4CAF50" bgColor="#fff"
						:showAction="false"></u-search>
				</view>
			</view>
		</u-navbar>
		<view style="width: 100%;">
			<u-swiper :list="list1" height="200" @change="e => currentNum = e.current" :autoplay="false"
				indicatorStyle="right: 20px" indicator circular radius="0">
				<view slot="indicator" class="indicator-num">
					<text class="indicator-num__text">{{ currentNum + 1 }}/{{ list1.length }}</text>
				</view>
			</u-swiper>
		</view>
		<view class="card_box_shop">
			<view class="space_between">
				<view class="same_row_in">
					<view class="title_money">￥{{money}}</view>
					<view class="box_specific">{{specification}}</view>
				</view>
				<view class="card_share"><u-icon size="25" name="share-square"></u-icon></view>
			</view>
			<view class="card_box_drug">{{title}}</view>
		</view>
		<view class="card_introduce">
			<view class="box_book">说明书</view>
			<view class="instruction">
				<view class="item_introduce" v-for="(item,index) in explainList" :key="index">
					<view class="name_key">{{item.type}}</view>
					<view class="name_value">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="card_bottom_purchase bottomFit">
			<view class="space_between box_bottom_fit">
				<view class="same_row_in">
					<view class="up_and_down">
						<u-icon name="bag-fill" size="30"></u-icon>
						<view class="secondary_font">店铺</view>
					</view>
					<view class="up_and_down" style="margin-left: 20rpx;">
						<u-icon name="shopping-cart" size="30"></u-icon>
						<view class="secondary_font">购物车</view>
					</view>
				</view>
				<view class="same_row_in">
					<view class="shopping_cart">加入购物车</view>
					<view class="immediately">立即购买</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list1: [
					"/static/image/swiper1.png",
					"/static/image/swiper2.png",
					"/static/image/swiper3.png",
				],
				currentNum: 0,
				money: 45,
				specification: '0.3g*24粒',
				title: '[芬必得]布洛芬缓释胶囊',
				explainList: [{
					type: '药品通用名称:',
					title: '布洛芬缓释胶囊'
				}, {
					type: '品牌:',
					title: '芬必得'
				}]
			}
		},
		methods: {
			leftClick() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss">
	.u-nav-slot {
		width: 75%;
		// width: calc(100% - 100rpx);
		display: flex;
		justify-content: flex-start;
		// margin-left: 70rpx;
	}

	::v-deep .u-navbar__content {
		justify-content: flex-end;
	}

	.indicator-num {
		padding: 4rpx 16rpx;
		background-color: rgba(0, 0, 0, .4);
		border-radius: 30rpx;
	}

	.indicator-num__text {
		color: #fff;
	}

	.card_box_shop {
		background-color: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.title_money {
		font-size: 36rpx;
		color: #fa3534;
	}

	.box_specific {
		color: #909399;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.card_share {
		padding: 4rpx 20rpx;
		border: 1rpx solid $u-border-color;
		border-radius: 30rpx;
	}

	.card_box_drug {
		font-size: 32rpx;
	}

	.card_bottom_purchase {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 20rpx 0rpx 20rpx;
		background-color: #fff;
	}

	.box_bottom_fit {
		/*#ifdef H5*/
		margin-bottom: 20rpx;
		/*#endif*/
	}

	.shopping_cart {
		padding: 14rpx 20rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #fff;
		background-color: #FFD037;
	}

	.immediately {
		padding: 14rpx 20rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #fff;
		background-color: #F93D3D;
		margin-left: 20rpx;
	}

	.secondary_font {
		font-size: 28rpx;
	}

	.card_introduce {
		background-color: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
	}

	.box_book {
		font-size: 30rpx;
		font-weight: bold;
	}

	.item_introduce {
		display: flex;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.name_key {
		flex: none;
		width: 150rpx;
		font-size: 28rpx;
		color: $u-info;
	}

	.name_value {
		flex: 1;
		font-size: 28rpx;
	}
</style>