index.vue

<template>
	<view>
		<view class="content">
			<view class="flex">
				<view class="search_view flex">
					<i class="search_icon"></i>
					<input type="text" class="search_input">
				</view>
				<text class="login_btn">登录</text>
			</view>
			<view class="flex tab_bar">
				<text :class="{act: tabIndex === 1}" @click="changeTab(1)">首页</text>
				<text :class="{act: tabIndex === 2}" @click="changeTab(2)">精彩活动</text>
				<text :class="{act: tabIndex === 3}" @click="changeTab(3)">谛宝白条</text>
				<text :class="{act: tabIndex === 4}" @click="changeTab(4)">采购分期</text>
			</view>
		</view>
		<view class="backimg">
			<view class="main_content">
				<view class="part_one">
					<view>
						<text class="text">白条商品</text>
						<i></i>
						<text class="text">信用支付 帐期无忧</text>
					</view>
					<view class="flex classbox">
						<view class="class_item">
							<image src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190723/goods/5d367110e1741.jpeg?x-oss-process=image/resize,m_lfit,w_750,h_750/auto-orient,0/quality,Q_85/format,jpg"></image>
							<text class="class_name">分类名称</text>
						</view>
					</view>
				</view>
				<view class="part_two">
					<image class="portrait" src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190723/goods/5d367110e1741.jpeg?x-oss-process=image/resize,m_lfit,w_750,h_750/auto-orient,0/quality,Q_85/format,jpg"></image>
					<text class="user_name">Hi, 谛宝多多</text>
					<text class="go_credit"><text>我的白条</text><i class="go_credit_icon"></i></text>
				</view>
				<view class="part_three">
					<view class="part_three_top">
						<view>
							<p>谛宝多多 帐期无忧</p>
							<p>最高可享12期免息</p>
						</view>
						<text class="go_detail">查看详情<i class="go_credit_icon"></i></text>
					</view>
					<view class="part_three_bottom">
						<view class="hot_goods">
							<image src="/static/index/28x28icon_sousuo@3x.png"></image>
							<p>DBC核磁</p>
							<text>9个月账期</text>
						</view>
					</view>
				</view>
				<view class="part_four">
					<p>白条精品 猜你需要</p>
					<view class="needs_tabs">
						<text class="tabs_item_first"><text>a</text></text>
						<text class="tabs_item"><text>a</text></text>
						<text class="tabs_item_last"><text>a</text></text>
					</view>
					<view>
						<view class="goods_info">
							<image src="https://dbc-static.oss-cn-beijing.aliyuncs.com/credit_shop/20190723/goods/5d367110e1741.jpeg?x-oss-process=image/resize,m_lfit,w_750,h_750/auto-orient,0/quality,Q_85/format,jpg"></image>
							<text class="goods_name">xxxxxxxx</text>
							<view class="goods_tag">
								<text>限时免息</text>
								<text>9个月账期</text>
							</view>
							<text class="goods_des">套餐包含：激光体厚尺1台，内窥镜仪器1台，输液泵一大萨达大多</text>
							<view class="price_view">
								<text>￥1000</text>
								<i></i>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 1, // 1:首页 2:精彩活动 3:谛宝白条 4:采购分期
			}
		},
		onLoad() {

		},
		methods: {
			changeTab(index) {
				this.tabIndex = index;
			}
		}
	};
</script>

<style lang="less">
	.flex {
		display: flex;
	}
	.content {
		height: 180rpx;
		background: #fff;
		justify-content: space-between;
		padding: 24rpx;
		box-sizing: border-box;
	}
	.search_view {
		width: 380rpx;
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 30rpx;
	}
	.search_icon {
		display: inline-block;
		width: 56rpx;
		height: 56rpx;
		background: url(/static/index/28x28icon_sousuo@3x.png) no-repeat;
		background-size: 100% 100%;
	}	
	.search_input {
		height: 60rpx;
	}
	.login_btn {
		width: 92rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #FFCD00;
		border-radius: 16rpx;
		color: #212121;
		font-size: 28rpx;
		text-align: center;
	}
	.tab_bar {
		padding: 0 24rpx;
		justify-content: space-between;
		margin-top: 34rpx;
	}
	.tab_bar text {
		font-size: 28rpx;
		color: #212121;
		line-height: 40rpx;
	}
	.tab_bar .act {
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		font-size: 32rpx;
		position: relative;
	}
	.tab_bar .act:after {
		position: absolute;
		width: 60rpx;
		height: 4rpx;
		background: #FFCD00;
		border-radius: 0 2rpx 2rpx 2rpx;
		content: '';
		left: 50%;
		margin-left: -30rpx;
		top: 48rpx;
	}
	.backimg {
		height: 678rpx;
		background: red;
		padding-top: 0.5px;
	}
	.main_content {
		width: 93.6%;
		margin: 308rpx auto 0;
	}
	.part_one {
		padding: 36rpx 40rpx 0;
		border-radius: 16rpx;
		background: #fff;
	}
	.part_one .text:nth-of-type(1) {
		font-size: 36rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		line-height: 50rpx;
		vertical-align: middle;
	}
	.part_one .text:nth-of-type(2) {
		color: #7c7c7c;
		font-size:24rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		line-height: 34rpx;
		vertical-align: middle;
	}
	.part_one i {
		display: inline-block;
		width: 2rpx;
		height: 20rpx;
		background: #979797;
		margin: 0 12rpx;
		vertical-align: middle;
	}
	.classbox {
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 22rpx;
		box-shadow:0px 4px 16px 0px rgba(0,0,0,0.03);
	}
	.classbox image {
		display: block;
		width: 100rpx;
		height: 96rpx;
		border-radius: 50%;
	}
	.classbox .class_name {
		font-size: 22rpx;
		line-height: 32rpx;
	}
	.part_two {
		box-shadow:0px 4px 10px 0px rgba(0,0,0,0.05);
		border-radius:16rpx;
		padding: 26rpx;
		background: #fff;
		margin-top: 20rpx;
	}
	.part_two .portrait {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		vertical-align: middle;
	}
	.part_two .user_name {
		font-size: 32rpx;
		font-weight: 600;
		vertical-align: middle;
		margin: 0 200rpx 0 16rpx;
	}
	.go_credit {
		display: inline-block;
		width: 160rpx;
		height: 56rpx;
		border-radius: 28rpx;
		background: #D6C453;
		color: #fff;
		text-align: center;
		line-height: 56rpx;
		font-size: 26rpx;
		vertical-align: middle;
		padding-left: 10rpx;
	}
	.go_credit_icon {
		display: inline-block;
		width: 32rpx;
		height: 32rpx;
		background: url(/static/common/icon_next_small%20heise@2x.png) no-repeat;
		background-size: 100% 100%;
		position: relative;
		top: 6rpx;
	}
	.part_three {
		height: 522rpx;
		border-radius:16rpx;
		padding: 0 22rpx;
		background: red;
		box-shadow:0px 12rpx 20rpx 0px rgba(0,0,0,0.05);
		margin-top: 20rpx;
		padding-top: 0.5px;
		.part_three_top {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;
			align-items: center;
			p:nth-of-type(1) {
				color: #2E344C;
				font-size: 36rpx;
				font-family:AlibabaPuHuiTiB;
				line-height: 50rpx;
				font-weight: bold;
			}
			p:nth-of-type(2) {
				font-size: 32rpx;
				line-height: 44rpx;
				color: #2E344C;
			}
			.go_detail {
				background:rgba(0,0,0,0.5);
				width: 148rpx;
				height: 46rpx;
				border-radius: 23rpx;
				color: #fff;
				font-size: 24rpx;
				line-height: 46rpx;
				text-align: center;
				padding-left: 10rpx;
			}
		}
		.part_three_bottom {
			display: flex;
			justify-content: space-between;
			.hot_goods {
				width: 212rpx;
				height: 332rpx;
				background: #fff;
				border-radius: 16rpx;
				margin-top: 44rpx;
				text-align: center;
				image {
					width: 212rpx;
					height: 212rpx;
				}
			}
			p {
				font-size: 26rpx;
				line-height: 36rpx;
				width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 8rpx auto 0;
			}
			text {
				border: 1px solid #C7B64E;
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 18rpx;
				padding: 0 12rpx;
				font-size: 22rpx;
				color: #C7B64E;
				position: relative;
				top: -10rpx;
			}
		}
	}
	.part_four {
		margin-top: 40rpx;
		> p {
			font-size: 32rpx;
			height: 44rpx;
			line-height: 44rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			margin-bottom: 24rpx;
		}
		.needs_tabs {
			height: 64rpx;
			overflow: auto;
			margin-bottom: 20rpx;
			display: flex;
			> text {
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #ECECEC;
				display: inline-block;
				width: 220rpx;
				margin-right: 20rpx;
				position: relative;
				text {
					display: block;
					transform: skew(30deg);
				}
			}
			.tabs_item_first {
				border-radius: 32rpx 16rpx 16rpx 32rpx;
				transform: skew(-30deg);
			}
			.tabs_item_first:after {
				position: absolute;
				left: 0;
				top: 0;
				content: '';
				height: 64rpx;
				width: 64rpx;
				border-radius: 32rpx 0 0 32rpx;
				background: #ECECEC;
				transform: skew(30deg);
			}
			.tabs_item {
				border-radius: 16rpx;
				transform: skew(-30deg);
			}
			.tabs_item_last {
				border-radius: 16rpx 32rpx 32rpx 16rpx;
				transform: skew(-30deg);
			}
		}
		.goods_info {
			width: 346rpx;
			height: 600rpx;
			padding: 32rpx;
			box-sizing: border-box;
			image {
				width: 280rpx;
				height: 280rpx;
			}
			.goods_name {
				width: 100%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 26rpx;
				color: #212121;
				line-height: 38rpx;
				display: block;
			}
			.goods_tag {
				display: block;
				text {
					display: inline-block;
					vertical-align: middle;
					border: 1px solid #C7B64E;
					color: #C7B64E;
					height: 36rpx;
					line-height: 36rpx;
					padding: 0 12rpx;
					border-radius: 18rpx;
					font-size: 22rpx;
					margin-right: 8rpx;
				}
			}
			.goods_des {
				height: 64rpx;
				font-size: 22rpx;
				line-height: 32rpx;
				color: #7C7C7C;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 12rpx;
			}
			.price_view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 56rpx;
				margin-top: 10rpx;
				text {
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color: #000;
					font-size: 32rpx;
					line-height: 44rpx;
				}
				i {
					display: inline-block;
					width: 56rpx;
					height: 56rpx;
					background: url(/static/common/icon_gouwuche@2x.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>