high-mini/pages/user/minePromotion/minePromotion.vue

<template>
	<view>
		<view class="promotion_bg backcorf06 width100 height90 fcorfff fotct font24 fontspec10">我的推广</view>
		<view class="promotion_dt width90 height100p backcorfff">
			<view class="width100 mart10 fcor333 font14 fontwig6 height22">
				<view class="promotion_xg flleft"></view>
				<view class="promotion_mixg flleft" style="margin-left: -6px;"></view>
				<view class="flleft promotoin_text font16" style="margin-top: -2px;">今日数据</view>
				<view class="promotion_mixg flleft"></view>
				<view class="promotion_xg flleft" style="margin-left: -6px;"></view>
			</view>
			<view class="width90 mart5 height22">
				<view class="width50 flleft font18 fcor333 fontwig6 fotlt">7</view>
				<view class="width50 flright font18 fcor333 fontwig6 fotrt">5300.00</view>
			</view>
			<view class="width90 mart10">
				<view class="width50 flleft font15 fcor666 fontwig6 fotlt">今日订单</view>
				<view class="width50 flright font15 fcor666 fontwig6 fotrt">今日流水</view>
			</view>
		</view>
		<!-- //库存管理 -->
		<view class="width100 mart80">
			<view class="width90 mart10 fcor333 font14 fontwig6 height22">
				<view class="promotion_xg flleft"></view>
				<view class="promotion_mixg flleft" style="margin-left: -6px;"></view>
				<view class="flleft promotoin_text font16" style="margin-top: -2px;">库存管理</view>
				<view class="promotion_mixg flleft"></view>
				<view class="promotion_xg flleft" style="margin-left: -6px;"></view>
			</view>
		</view>
		<view  class="promotion_kc width90 mart10" >
			<image class="flleft pro_img mart15 margle"	src="../../../static/img/wenj.png">
			</image>
			<view class="pro_cont paddtop15">
				<view class="flleft font16 fcor333 fontwig6  pro_title">
					剩余库存(24)
				</view>
				<view class="pro_price fotrt  fcor333 font15 fontwig6">
					总计 9500.00
				</view>
			</view>
			<!-- //循环:class="[index==0?'colorfe':'']" -->
			<view v-for="(mers,index) in minepros" :key="mers.id" class="pro_mok marb10 colorfe"  @click="jumpAgent">
				<view class="width100 font15 fcor333 fontwig6 fotct paddtop10">
					面额100.00
				</view>
				<view class="width100 font14 fcor999 fotct mart10">
					13张
				</view>
				<view class="width100 font15 fcor333 fontwig6 fotct mart10">
					1300.00
				</view>
			</view>
		</view>
		<!-- //销售统计 -->
		<view class="width100 mart20">
			<view class="width90 mart10 fcor333 font14 fontwig6 height22">
				<view class="promotion_xg flleft"></view>
				<view class="promotion_mixg flleft" style="margin-left: -6px;"></view>
				<view class="flleft promotoin_text font16" style="margin-top: -2px;">销售统计</view>
				<view class="promotion_mixg flleft"></view>
				<view class="promotion_xg flleft" style="margin-left: -6px;"></view>
			</view>
		</view>
		<view class="promotion_kc width90 mart10">
			<image class="flleft pro_img mart15 margle"	src="../../../static/img/wenj.png">
			</image>
			<view class="pro_cont paddtop15">
				<view class="flleft font16 fcor333 fontwig6  pro_title">
					已销售(24)
				</view>
				<view class="pro_price fotrt  fcor333 font15 fontwig6">
					总计 1129500.00
				</view>
			</view>
			<!-- //循环 -->
			<view v-for="(mers,index) in minepros" :key="mers.id" class="pro_mok marb10 colore9" @click="jumpAgent">
				<view class="width100 font15 fcor333 fontwig6 fotct paddtop10">
					面额100.00
				</view>
				<view class="width100 font14 fcor999 fotct mart10">
					13张
				</view>
				<view class="width100 font15 fcor333 fontwig6 fotct mart10">
					1300.00
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				minepros : [
					{id:1},
					{id:1},
					{id:1}
				]
			}
		},
		methods: {
			//跳转代理商卡券
			jumpAgent(){
				uni.navigateTo({
					url:'../agentCoupons/agentCoupons'
				})
			}
		}
	}
</script>

<style lang="scss">
	.promotion_bg {
		position: relative;
	}

	.promotion_dt {
		position: absolute;
		top: 50px;
		border-radius: 5px;
		box-shadow: 0px 2px 6px 2px #999999;
	}

	.promotion_xg {
		width: 15px;
		height: 2px;
		margin-top: 8px;
		background-color: #f06c7a;
		transform: rotate(100deg);
	}

	.promotoin_text {
		margin-left: 5px;
		margin-right: 5px;
	}

	.promotion_mixg {
		width: 10px;
		margin-top: 8px;
		height: 2px;
		background-color: #f06c7a;
		transform: rotate(100deg);
	}

	.promotion_kc {
		padding-bottom: 10px;
		border-radius: 5px;
		box-shadow: 0px 2px 4px 2px #999999;
	}

	.pro_img {
		width: 25px;
		height: 25px;
	}

	.pro_cont {
		height: 35px;
		margin-left: 40px;
	}

	.pro_title {
		width: 110px;
	}

	.pro_price {
		margin-right: 10px;
		margin-left: 110px;
	}

	.pro_mok {
		height: 95px;
		margin-left: 2.5%;
		width: 30%;
		display: inline-block;
	}
	.colorfe{
		background-color: #fef7e5;
	}
	.colore9{
		background-color: #e9f3ff;
	}
	.colore7{
		background-color: #e7fcf3;
	}
	
</style>