chatgpt/pages/home/home-bottom.vue

<template>
	<view class="bottom_container">
		<view class="info">
			<view class="info_left">
				<view class="info_left_box" v-for="(item, index) in leftList" :key="index">
					{{ item }}
				</view>
			</view>
			<view class="info_right">
				<view class="info_right_box" v-for="(item, index) in rightList" :key="index" 
				@click="clickToRight(index)">
					{{ item }}
				</view>
			</view>
		</view>
		<view class="companyDescribe">xxxx网络有限公司粤ICP备xxxxx号-1粤公网安备xxxxxxxxxxxxxxxxx号</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftList: ["地址:广东省广州市番禺区xxxxxxxxxx",
				           "邮箱:xxxxxx@163.com", 
						   "电话:xxxxxxxxxx、xxxxxxxxxx"],
				rightList:['关于我们', '服务条款', '隐私政策']
			}
		},	
		methods: {
			clickToRight(index) {
				switch (index){
					case 0:
					console.log('关于我们')
						break;
					case 1:
				    console.log('服务条款')
						break;
					case 2:
				    console.log('隐私政策')
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.bottom_container {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		width: 100%;
		height: 205px;
		background-color: #2A2832;
		padding: 25px 50px;
		.info{
			display: flex;
			width: 100%;
			height: 104px;
			justify-content: space-between;
			.info_left{
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				margin-right: 15px;
				.info_left_box{
					color: #ffffff;
					margin-top: 10px;
				}
			}
			.info_right{
				display: flex;
				flex-direction: column;
				width: 90px;
				height: 100%;
				.info_right_box{
					color: #ffffff;
					margin-top: 10px;
				}
			}
		}
		.companyDescribe{
			margin-top: 32px;
			font-size: 18px;
			font-weight: 400;
			text-align: center;
			color: #49A5E9;
		}
	}
</style>