businessCard/xiaochengxu/pages/circle/detail.vue

<template>
	<view class="content">
		<view class="content1">
			<view class="left">
				<image src="../../static/logo.png" mode="widthFix" class="img"></image>
			</view>
			<view class="right">
				<view class="top">
					<span class="">
						北京技术（155）
					</span>
					<span class="">
						加入
					</span>
				</view>
				<view class="bottom">
					<span>粮食贸易</span>
					<span>粮食贸易</span>
					<span>粮食贸易</span>
					<span>粮食贸易</span>
				</view>
			</view>
		</view>
		<view class="content2">
			<view class="top flex-between">
				<view class="span">
					<span>全部</span>
					<span>已交换</span>
					<span>未交换</span>
				</view>
				<view class="right">
					我的名片
				</view>
			</view>
		</view>
		<view class="content3 flex">
			<view class="left">
				<view class="top flex-row-center">
					<image src="../../static/uni.png" mode="widthFix" class="img"></image>
				</view>
				<view class="bottom flex flex-evenly">
					<uni-icons type="home" size="20"></uni-icons>
					<uni-icons type="redo" size="20" @click="changeCard"></uni-icons>
				</view>
			</view>
			<view class="right">
				<view class="row1 flex">
					<text>张三</text>
					<text class="line"></text>
					<text>总经理</text>
				</view>
				<view class="row2">
					北京xxx有限公司
				</view>
				<view class="row3" @click="toMap">
					<uni-icons type="redo" size="20"></uni-icons>
					<text>北京市朝阳区幸福大街8号</text>
				</view>
				<view class="row3">
					<uni-icons type="redo" size="20"></uni-icons>
					<text>13333333333</text>
				</view>
				<view class="row3">
					<uni-icons type="redo" size="20"></uni-icons>
					<text>我是备注</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			changeCard(){
				uni.navigateTo({
					url:"/pages/circle/changeCard"
				})
			},
		}
	}
</script>

<style lang="scss">
	.content1 {
		display: flex;
	}

	.img {
		width: 100rpx;
	}
	.content3 {
		border: 1px solid #ccc;
		border-radius: 30rpx;
		padding: 40rpx;
		box-sizing: border-box;
	
		.left {
			width: 30%;
	
			.top {
				
				margin-bottom: 20rpx;
			}
			.img {
				width: 80%;
			}
	
			.bottom {
			}
		}
	
		.right {
			.row1 {
				.line {
					width: 1px;
					height: 20px;
					margin: 0 20rpx;
					background: black;
				}
			}
		}
	}
</style>