boying/pages/index/index.vue

<template>
	<view class="content">
		<view class="top-top"></view>
		<view class="lange"><base-nav></base-nav></view>
		<view class="top">
			<image src="../../static/img/index/index.png" mode="" class="bg"></image>
			<view class="tongz flex">
				<view>
					<view class="tongz-left flex" @click="goDetails">
						<image class="image-left" src="../../static/img/ling.png" mode=""></image>
						<u-notice-bar
							style="width: 100%;"
							mode="vertical"
							type="none"
							color="#ffffff"
							:volume-icon="false"
							:more-icon="true"
							:list="showList"
						></u-notice-bar>
					</view>
				</view>
			</view>
			<image src="../../static/img/index/yyxx.png" mode="" class="yz"></image>
		</view>
		<view class="box">
			<view v-for="(item, index) in list" :key="index">
				<view class="discounts">
					<image :src="image[index]" mode="" class="discounts1"></image>
					<view class="money">
						￥
						<text>{{ item.money * 2 }}</text>
					</view>
					<view class="baodan" @click="baodan(item.id)">{{ $t('hea.ckxq') }}</view>
				</view>
			</view>
		</view>
		<view class="index1">
			<image src="../../static/img/index/index1.png" mode=""></image>
			<view class="bottom" @click="nav('/pages/profit/fund')"><image src="../../static/img/index/bottom.png" mode=""></image></view>
		</view>
		<u-tabbar :list="tabbar" bg-color="#000" active-color="#FAD6B0" inactive-color="#71614f" change="change"></u-tabbar>
	</view>
</template>
<script>
import baseNav from '@/pages/public/nav.vue';
import { mapState, mapMutations } from 'vuex';
import { activityList } from '@/api/active.js';
import { article } from '@/api/index.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import store from '../../store/index.js';
export default {
	components: {
		baseNav
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
		...mapState(['lang'])
	},
	watch: {
		lang(val) {
			this.$set(this.tabbar[0], 'text', this.$t('hea.sy'));
			this.$set(this.tabbar[1], 'text', this.$t('hea.shlb'));
			this.$set(this.tabbar[2], 'text', this.$t('hea.wd'));
		}
	},
	data() {
		return {
			list: [],
			image: ['../../static/img/index/youhui1.png', '../../static/img/index/youhui2.png'],
			revenueList: [],
			tabbar: [
				{
					iconPath: '../../static/tabBar/home.png',
					selectedIconPath: '../../static/tabBar/home-action.png',
					text: this.$t('hea.sy'),
					pagePath: '/pages/index/index'
				},
				{
					iconPath: '../../static/tabBar/center.png',
					selectedIconPath: '../../static/tabBar/center-action.png',
					text: this.$t('hea.shlb'),
					pagePath: '/pages/user/applyList'
				},
				{
					iconPath: '../../static/tabBar/user.png',
					selectedIconPath: '../../static/tabBar/user-action.png',
					text: this.$t('hea.wd'),
					pagePath: '/pages/user/user'
				}
			],
			showList: []
		};
	},
	onShow() {
		if (this.hasLogin) {
			this.loadData();
		} else {
			let obj = this;
			uni.showModal({
				title: obj.$t('hea.login'),
				content: obj.$t('hea.logininfo'),
				success: e => {
					if (e.confirm) {
						saveUrl();
						interceptor();
					}
				},
				fail: e => {
					console.log(e);
				}
			});
		}
	},
	methods: {
		baodan(id) {
			uni.navigateTo({
				url: '/pages/index/infoDetail?id=' + id
			});
		},
		loadData() {
			activityList({}).then(({ data }) => {
				this.list = data.list;
			});
			article({
				page: 1,
				limit: 10000,
				category_id: 14
			}).then(({ data }) => {
				let arr = [];
				data.list.forEach(e => {
					arr.push(e.synopsis);
				});
				this.showList = arr;
				console.log(this.showList);
			});
		},
		change(index) {
			console.log(index);
		},
		nav(url) {
			uni.navigateTo({
				url
			});
		},
		goDetails() {
			uni.navigateTo({
				url: '/pages/index/list'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	height: auto;
}

.content {
	.top-top {
		height: var(--status-bar-height);
		width: 100%;
		background: #000;
	}
	.top {
		position: relative;
		display: flex;
		flex-direction: column;
		z-index: 10;
		.bg {
			width: 100%;
			height: 900rpx;
		}
		.yz {
			width: 90%;
			height: 700rpx;
			margin: 20rpx auto 0;
		}
	}

	.box {
		.discounts {
			margin: 20rpx 30rpx;
			display: flex;
			justify-content: center;
			position: relative;
			width: 690rpx;
			height: 890rpx;
			z-index: 30;
			.discounts1 {
				width: 100%;
				height: 100%;
			}

			.money {
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				top: 0;
				margin-top: 250rpx;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #c63535;
				line-height: 30rpx;
				position: absolute;

				text {
					font-size: 116rpx;
					font-family: Source Han Sans CN;
					font-weight: 800;
					color: #c63535;
					line-height: 115rpx;
				}
			}

			.baodan {
				position: absolute;
				top: 690rpx;
				width: 300rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				color: #ffffff;
				background: #4e2c0e;
				font-size: 40rpx;
				border-radius: 10rpx;
			}
		}

		.earnings-box {
			z-index: 100;
			position: relative;
			margin: 40rpx 30rpx;
			width: 690rpx;
			height: 1140rpx;
			.earnings {
				width: 100%;
				height: 100%;
			}
			.text-box {
				position: absolute;
				top: 184rpx;
				left: 110rpx;
				.textDetail {
					min-height: 134rpx;
					max-height: 140rpx;
					overflow: hidden;
					padding-bottom: 64rpx;
					.textDetail-title {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #4e2c0e;
						line-height: 30rpx;
						padding-bottom: 10rpx;
					}

					.textDetail-content {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #4e2c0e;
						line-height: 30rpx;
					}
				}
			}
		}
	}

	.index1 {
		margin-top: -200rpx;
		width: 100%;
		height: 713rpx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
		.bottom {
			height: 200rpx;
			width: 90%;
			margin: 0 auto;
			position: absolute;
			bottom: 250rpx;
			left: 5%;
		}
	}
}
.tongz {
	width: 690rpx;
	height: 70rpx;
	margin: 10rpx auto 0;
	padding: 18rpx 30rpx 18rpx 24rpx;
	align-items: center;
	position: relative;
	background: #1f2020;
	border-radius: 30rpx;
	.tongz-bg {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		width: 690rpx;
		height: 70rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tongz-left {
		width: 640rpx;
		.image-left {
			width: 40rpx;
			height: 34rpx;
		}
		.tongz-font {
			margin-left: 22rpx;
			font-size: 28rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
		}
	}
	.tongz-right {
		position: relative;
		z-index: 11;
		width: 12rpx;
		height: 26rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>