aluminium-trading-uniapp-240925/pages/index/index.vue

<template>
	<view class="page">

		<!--顶部栏-->
		<topbar showRight="1"></topbar>

		<!-- 语言切换 -->
		<!--<view style="padding: 20rpx;"-->
		<!--      @click="$refs.changeLanguage.open()">-->
		<!--  {{ $t('pages.index.index.language') }}-->
		<!--</view>-->
		<!--<changeLanguage ref="changeLanguage"/>-->

		<!-- 供应商 -->
		<view class="supplier" v-if="userShop">
			<!--上面第一个-->
			<view class="topItem">
				<view class="imageFrame">
					<img src="../../static/image/index/4.png" style="width:100%;height:100%;">
				</view>
			</view>
			<!--  下面三个-->
			<view class="threeHeOne">
				<!-- 第一个-->
				<view class="oneItem">
					<view class="left">
						<!--<span>Company Profile</span>-->
						<span> {{ $t('pages.index.index.companyProfile') }}</span>
						<span class="subText"> {{ $t('other.aluminumProducts') }}</span>
					</view>
					<view class="right">
						随着全球经济的快速发展，我们这家领先的企业公司应运而生，致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年，总部位于深圳市横岗大厦，拥有广泛的业务领域和专业的团队，专注于实现客户的期望和需求。
					</view>
				</view>

				<!-- 第二个-->
				<view class="twoItem">
					<view class="left">
						<img src="../../static/image/index/2.png" style="width:100%;height:100%;">
					</view>
					<view class="right">
						<img src="../../static/image/index/3.png" style="width:100%;height:100%;">
					</view>
				</view>

				<!-- 第三个-->
				<view class="threeItem">

					<view class="right">
						随着全球经济的快速发展，我们这家领先的企业公司应运而生，致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年，总部位于深圳市横岗大厦，拥有广泛的业务领域和专业的团队，专注于实现客户的期望和需求。
					</view>
					<view class="left">
						<!--<span>Company Profile</span>-->
						<span> {{ $t('pages.index.index.companyProfile') }}</span>
						<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span>
					</view>
				</view>
			</view>

			<!--报价和挂单-->
			<view class="btns">
				<span @click="goToPage(0)" class="oneBtn">
					{{ $t('other.supplierQuotation') }}
				</span>
				<span @click="goToPage(1)" class="twoBtn">
					{{ $t('other.supplierBilLading') }}
				</span>
			</view>
		</view>

		<!-- 采购商 -->
		<view class="purchaser" v-else>
			<!--上面第一个-->
			<view class="topItem">
				<view class="imageFrame">
					<img src="../../static/image/index/4.png" style="width:100%;height:100%;">
				</view>
			</view>
			<!--  下面三个-->
			<view class="threeHeOne">
				<!-- 第一个-->
				<view class="oneItem">
					<view class="left">
						<span>Company Profile</span>
						<span> {{ $t('pages.index.index.companyProfile') }}</span>
						<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span>
					</view>
					<view class="right">
						随着全球经济的快速发展，我们这家领先的企业公司应运而生，致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年，总部位于深圳市横岗大厦，拥有广泛的业务领域和专业的团队，专注于实现客户的期望和需求。
					</view>
				</view>

				<!-- 第二个-->
				<view class="twoItem">
					<view class="left">
						<img src="../../static/image/index/2.png" style="width:100%;height:100%;">
					</view>
					<view class="right">
						<img src="../../static/image/index/3.png" style="width:100%;height:100%;">
					</view>
				</view>

				<!-- 第三个-->
				<view class="threeItem">

					<view class="right">
						随着全球经济的快速发展，我们这家领先的企业公司应运而生，致力于为客户提供卓越的服务和优质的产品。我们公司成立于2001年，总部位于深圳市横岗大厦，拥有广泛的业务领域和专业的团队，专注于实现客户的期望和需求。
					</view>
					<view class="left">
						<span>Company Profile</span>
						<span> {{ $t('pages.index.index.companyProfile') }}</span>
						<span class="subText"> {{ $t('pages.index.index.aluminiumProduct') }}</span>
					</view>
				</view>
			</view>
		</view>
		<tabber select="0" />
	</view>
</template>

<script>
	import topbar from '@/components/base/topbar.vue'
	import tabber from '@/components/base/tabbar.vue'
	import productList from '@/components/user/productList.vue'
	import {
		mapGetters
	} from 'vuex'
	import changeLanguage from '@/components/base/changeLanguage.vue'

	export default {
		components: {
			tabber,
			topbar,
			productList,
			changeLanguage
		},
		data() {
			return {
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					title: ''
				},
			}
		},
		onShow(){
			this.getImagePhoneOther()
		},
		computed: {
			...mapGetters(['userShop']),
		},
		methods: {
			goToPage(titleIndex) {
				uni.navigateTo({
					url: '/pages_order/order/offerOrBillLading?titleIndex=' + titleIndex
				})
			},
			getImagePhoneOther(){
				this.$api('getImagePhoneOther', res => {
					
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.page {

		background-color: #2e394d;

		// 供应商
		.supplier {
			display: flex;
			flex-direction: column;
			height: calc(100vh - 120rpx - 120rpx);
			background-color: #2e394d;


			.topItem {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 30%;
				background-image: url('../../static/image/index/1.png');
				background-size: cover;

				.imageFrame {

					width: 90%;
					height: 90%;
					//padding:80rpx;
				}
			}

			.threeHeOne {
				display: flex;
				padding: 20rpx 40rpx 10rpx;
				flex-direction: column;

				height: 60%;



				.oneItem {
					display: flex;
					height: 33%;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 10rpx;
						width: 33%;
						background-color: #1e293d;
						color: white;
						font-size: 26rpx;

						.subText {
							width: 80%;
							background-color: #2e394d;
							padding: 0 20rpx;
						}
					}

					.right {
						//height: 30%;
						width: 66%;
						padding: 20rpx;
						background-image: url('../../static/image/index/1.png');
						background-size: cover;
						font-size: 20rpx;
						color: white;
					}
				}

				.twoItem {
					display: flex;
					justify-content: space-between;
					gap: 20rpx;
					height: 33%;
					margin-top: 20rpx;
					padding: 10rpx;

					.left {
						width: 60%;
						padding: 20rpx;
						background-color: #1e293d;
					}

					.right {
						width: 40%;
						padding: 20rpx;
						background-color: #1e293d;
					}
				}

				.threeItem {
					display: flex;
					//width: 100vw;
					height: 33%;


					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 20rpx;
						width: 33%;
						background-color: #1e293d;
						color: white;
						font-size: 26rpx;

						.subText {
							background-color: #2e394d;
							width: 80%;
							padding: 0 20rpx;
						}
					}

					.right {
						//height: 200rpx;
						width: 66%;
						padding: 20rpx;
						background-image: url('../../static/image/index/1.png');
						background-size: cover;
						font-size: 20rpx;
						color: white;
					}
				}
			}

			.btns {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 40rpx;

				.oneBtn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40%;
					height: 70rpx;
					border-radius: 40rpx;
					color: #1F1C39;

					font-size: 28rpx;
					margin: 20rpx 10rpx 0 0;
					background: #f2f2f2;
					//margin-top: 20rpx;
					border-radius: 40rpx;
				}

				.twoBtn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 40%;
					height: 70rpx;
					border-radius: 40rpx;
					color: #1F1C39;
					font-size: 28rpx;
					margin: 20rpx 10rpx 0 0;
					background: #f2f2f2;
					//margin-top: 20rpx;
					border-radius: 40rpx;
				}

			}
		}

		// 采购商
		.purchaser {
			display: flex;
			flex-direction: column;
			//gap: 40rpx;
			background-color: #2e394d;


			.topItem {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 280rpx;
				background-image: url('../../static/image/index/1.png');
				background-size: cover;

				.imageFrame {

					width: 90%;
					height: 90%;
					//padding:80rpx;
				}
			}

			.threeHeOne {
				display: flex;
				padding: 20rpx 40rpx 10rpx;
				flex-direction: column;


				.oneItem {
					display: flex;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 10rpx;
						width: 33%;
						background-color: #1e293d;
						color: white;
						font-size: 26rpx;

						.subText {
							background-color: #2e394d;
							padding: 0 20rpx;
						}
					}

					.right {
						height: 180rpx;
						width: 66%;
						padding: 20rpx;
						background-image: url('../../static/image/index/1.png');
						background-size: cover;
						font-size: 20rpx;
						color: white;
					}
				}

				.twoItem {
					display: flex;
					justify-content: space-between;
					gap: 20rpx;
					height: 280rpx;
					margin-top: 20rpx;
					padding: 10rpx;

					.left {
						width: 60%;
						padding: 20rpx;
						background-color: #1e293d;
					}

					.right {
						width: 40%;
						padding: 20rpx;
						background-color: #1e293d;
					}
				}

				.threeItem {
					display: flex;
					//width: 100vw;

					.left {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						gap: 20rpx;
						width: 33%;
						background-color: #1e293d;
						color: white;
						font-size: 26rpx;

						.subText {
							background-color: #2e394d;
							padding: 0 20rpx;
						}
					}

					.right {
						height: 200rpx;
						width: 66%;
						padding: 20rpx;
						background-image: url('../../static/image/index/1.png');
						background-size: cover;
						font-size: 20rpx;
						color: white;
					}
				}
			}
		}
	}
</style>