我的名片

xiaochengxu/pages/mySet/myInfo.vue

@@ -1,65 +1,147 @@
 <template>
 	<view class="content">
-		<view class="card-list">
+		<view class="card-list content1">
 			<view class="row" v-for="(item,index) in cardList" :key="index">
 				<view class="title-name">
 					{{item.cardBusiness}}
 				</view>
-				<view class="flex card-list-item">
-					<view class="left">
-						<view class="top flex-row-center">
-							<image :src="item.headSculpture" mode="widthFix" class="img"></image>
+				<view class="card-list-item" :style="'background:url('+item.currentBackground+');background-size:100% 100%'">
+					<view class="card-content style1" v-if="item.cuttentTemplate==0">
+						<view class="left">
+							<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle"></u--image>
 						</view>
-						<view class="bottom flex flex-evenly">
-							<uni-icons type="home" size="20" @click="toHome(item)"></uni-icons>
-							<uni-icons type="home" size="20"></uni-icons>
-							<uni-icons type="redo" size="20"></uni-icons>
+						<view class="right">
+							<view class="row1">
+								<text class="name">{{item.name}}</text>
+								<text class="post">{{item.post}}</text>
+							</view>
+							<view class="row2">
+								{{item.companyName}}
+							</view>
+							<view class="row3 flex">
+								<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
+							</view>
+							<view class="row4 flex">
+								<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
+							</view>
+							<!-- <view class="">
+								备注
+							</view> -->
 						</view>
 					</view>
-					<view class="right">
-						<view class="row1 flex">
-							<text>{{item.name}}</text>
-							<text class="line"></text>
-							<text>{{item.post}}</text>
+					<view class="card-content style1 flex-between" v-if="item.cuttentTemplate==1">
+						<view class="right">
+							<view class="row1">
+								<text class="name">{{item.name}}</text>
+								<text class="post">{{item.post}}</text>
+							</view>
+							<view class="row2">
+								{{item.companyName}}
+							</view>
+							<view class="row3 flex">
+								<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
+							</view>
+							<view class="row4 flex">
+								<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
+							</view>
+							<!-- <view class="">
+								备注
+							</view> -->
 						</view>
-						<view class="row2">
-							{{item.companyName}}
+						<view class="left">
+							<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle" v-if="item.headSculpture"></u--image>
+							<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
 						</view>
-						<view class="row3" @click="toMap">
-							<uni-icons type="redo" size="20"></uni-icons>
-							<text>{{item.province}}{{item.city}}{{item.area}}{{item.detailedAddress}}</text>
+					</view>
+					<view class="card-content style2" v-if="item.cuttentTemplate==2">
+							<view class="top">
+								<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle" v-if="item.headSculpture"></u--image>
+								<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
+							</view>
+							<view class="bottom flex">
+								<view class="left">
+									<view class="row1">
+										<text class="name">{{item.name}}</text>
+										<text class="post">{{item.post}}</text>
+									</view>
+									<view class="row2">
+										{{item.companyName}}
+									</view>
+								</view>
+								<view class="right">
+									<view class="row1 flex">
+										<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
+									</view>
+									<view class="row2 flex">
+										<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
+									</view>
+								</view>
+							</view>
+					</view>
+					<view class="card-content style2" v-if="item.cuttentTemplate==3">
+							<view class="top">
+								<view class="row1">
+									<text class="name">{{item.name}}</text>
+									<text class="post">{{item.post}}</text>
+								</view>
+								<view class="row2">
+									{{item.companyName}}
+								</view>
+								
+							</view>
+							<view class="bottom flex">
+								<view class="left">
+								<u--image :showLoading="true" :src="item.headSculpture" width="66px" height="66px" shape="circle" v-if="item.headSculpture"></u--image>
+								<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
+								</view>
+								<view class="right">
+									<view class="row1 flex">
+										<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.province }}{{ item.city }}{{ item.area }}
+									</view>
+									<view class="row2 flex">
+										<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ item.phone }}
+									</view>
+								</view>
+							</view>
+					</view>
+					<view class="car-bottom flex">
+						<view class="left">
+							<image src="../../static/imgs/card/home.png" mode="widthFix" style="width: 32rpx;" @click="toHome(item)"></image>
+							<image src="../../static/imgs/card/share.png" mode="widthFix" style="width: 35rpx;" @click="share(item)"></image>
+							<image src="../../static/imgs/card/ewm.png" mode="widthFix" style="width: 32rpx;" @click="showCode(item)"></image>
 						</view>
-						<view class="row3">
-							<uni-icons type="redo" size="20"></uni-icons>
-							<text>{{item.phone}}</text>
+						<view class="right">
+							<text class="text" @click="topMarking(item)">置顶</text>
+							<text class="text" @click="del(item.id)">删除</text>
+							<text class="text" @click="toEditCard(item)">编辑</text>
 						</view>
+						<!-- <u-button text="置顶" @click="topMarking(item)" throttle-time='1000'></u-button> -->
+						<!-- <button @click="$u.debounce(topMarking, 500)">置顶</button> -->
+						<!-- <button @click="$u.debounce(topMarking(item), 500)">置顶</button> -->
+						<!-- <u-button text="删除" @click="del(item.id)" throttle-time='1000'></u-button> -->
+						<!-- <button @click="toEditCard(item)">编辑</button> -->
 					</view>
 				</view>
-				<view class="car-bottom flex">
-					<u-button text="置顶" @click="topMarking(item)" throttle-time='1000'></u-button>
-					<!-- <button @click="$u.debounce(topMarking, 500)">置顶</button> -->
-					<!-- <button @click="$u.debounce(topMarking(item), 500)">置顶</button> -->
-					<u-button text="删除" @click="del(item.id)" throttle-time='1000'></u-button>
-					<button @click="toEditCard(item)">编辑</button>
-				</view>
+				
 			</view>
 		</view>
-		<view class="upload">
-			<view class="solids" @click="addCard">
-				<text class=''>添加新名片</text>
+		<view class="upload flex flex-all-center" @click="addCard">
+			<view class="solids flex flex-all-center">
+				<image src="../../static/imgs/card/add.png" mode="widthFix" style="width: 148rpx;"></image>
+				<text class='text'>添加新名片</text>
 			</view>
 		</view>
 		<u-toast ref="uToast"></u-toast>
 		<u-popup :show="isShowDel" @close="isShowDel=false" mode="center">
-			<view>
-				<text>删除名片自动退出关联得圈子，确定删除？</text>
+			<view class="del-style">
+				<text class="title">删除名片自动退出关联得圈子，确定删除？</text>
 				<u-radio-group v-model="radiovalue" placement="column">
 					<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
 						:label="item.name" :name="item.name" @change="radioChange">
 					</u-radio>
 				</u-radio-group>
 				<view class="flex">
-					<view class="">
+					<view class="" @click="isShowDel=false">
 						取消
 					</view>
 					<view class="" @click="delCard">
@@ -99,6 +181,13 @@
 			this.init()
 		},
 		methods: {
+			
+			showCode(val){
+				
+			},
+			share(){
+				
+			},
 			toHome(item){
 				uni.navigateTo({
 					url: "/pages/mySet/myHome?id="+item.personalHomeId
@@ -186,12 +275,161 @@
 </script>
 
 <style lang="scss" scoped>
+	.content{
+		padding-bottom: 40rpx;
+	}
+	.card-content{
+		width: 100%;
+	}
+	.content1{
+		.style1{
+			display: flex;
+			padding: 20rpx 30rpx;
+			width: 85%;
+			margin-bottom: 90rpx;
+			.left{
+				width: 132rpx;
+				height: 132rpx;
+				border-radius: 50%;
+			}
+			.right{
+				margin-left: 40rpx;
+				.row1{
+					.name{
+						font-size: 38rpx;
+						font-weight: bold;
+						color: #040000;
+						margin-right: 20rpx;
+					}
+					.post{
+						font-size: 26rpx;
+						font-weight: 500;
+						color: #666666;
+					}
+				}
+				.row2{
+					margin-top: 20rpx;
+					font-size: 24rpx;
+					font-weight: bold;
+					color: #323333;
+				}
+				.row3{
+					margin-top: 30rpx;
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #323333;
+					
+				}
+			}
+		}
+		.style2{
+				padding:30rpx;
+				margin-bottom: 100rpx;
+				.top{
+					.row1{
+						.name{
+							font-size: 38rpx;
+							font-weight: bold;
+							color: #040000;
+							margin-right: 20rpx;
+						}
+						.post{
+							font-size: 26rpx;
+							font-weight: 500;
+							color: #666666;
+						}
+					}
+					.row2{
+						margin-top: 20rpx;
+						font-size: 24rpx;
+						font-weight: bold;
+						color: #323333;
+					}
+				}
+				.bottom{
+					margin-top: 48rpx;
+					.left{
+						margin-right: 40rpx;
+						.row1{
+							.name{
+								font-size: 38rpx;
+								font-weight: bold;
+								color: #040000;
+								margin-right: 20rpx;
+							}
+							.post{
+								font-size: 26rpx;
+								font-weight: 500;
+								color: #666666;
+							}
+						}
+						.row2{
+							margin-top: 20rpx;
+							font-size: 24rpx;
+							font-weight: bold;
+							color: #323333;
+						}
+					}
+					.right{
+						.row1,.row2{
+							font-size: 24rpx;
+							font-weight: 500;
+							color: #323333;
+						}
+						.row2{
+							margin-top: 20rpx;
+						}
+					}
+				}
+				
+		}
+	}
+	.card-list{
+		padding:0 20rpx;
+		.title-name{
+			font-weight: bold;
+			color: #19191A;
+			margin: 20rpx 0;
+		}
+	}
 	.card-list-item {
-		border: 1px solid #ccc;
+		width: calc(100% + 40rpx);
+		left:-20rpx;
+		position: relative;
 		border-radius: 30rpx;
 		padding: 40rpx;
 		box-sizing: border-box;
-
+		.car-bottom{
+			position: absolute;
+			bottom: 20rpx;
+			left:20rpx;
+			width: calc(100% - 40rpx);
+			.left{
+				position: absolute;
+				padding: 20rpx 0;
+				width: 310rpx;
+				box-sizing: border-box;
+				display: flex;
+				justify-content: space-evenly;
+				background: url("../../static/imgs/card/bgc1.png") no-repeat center;
+				background-size: 100% 100%;
+			}
+			.right{
+				font-size: 26rpx;
+				padding: 20rpx 0;
+				position: relative;
+				right: -280rpx;
+				width: calc(100vw - 320rpx);
+				box-sizing: border-box;
+				display: flex;
+				justify-content: space-evenly;
+				background: url("../../static/imgs/card/bgc2.png") no-repeat center;
+				background-size: 100% 100%;
+				.text{
+					color: #fff;
+				}
+			}
+		}
 		.left {
 			width: 30%;
 
@@ -218,4 +456,20 @@
 			}
 		}
 	}
+	.upload{
+		background-color: #fff;
+		margin: 20rpx;
+		border-radius: 20rpx;
+		padding: 76rpx;
+		.solids{
+			flex-direction: column;
+			.text{
+				margin-top: 20rpx;
+				font-size: 26rpx;
+				font-weight: 500;
+				color: #666666;
+			}
+		}
+		
+	}
 </style>

xiaochengxu/pages/mySet/newCard.vue

@@ -1,113 +1,107 @@
 <template>
 	<view class="content">
-		<view class="content1 bgc0" v-show="selectIndex==0">
-			<view class="left">
-				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
+		<view class="content1 relative">
+			<view class="relative">
+				<image :src="imgList[selectIndex].dictLabel" mode="widthFix" style="width: 100%;"></image>
 			</view>
-			<view class="right">
-				<view class="row1">
-					{{cardInfo.name}}|{{cardInfo.post}}
-				</view>
-				<view class="">
-					{{cardInfo.companyName}}
-				</view>
-				<view class="">
-					地址
-				</view>
-				<view class="">
-					联系电话
-				</view>
-				<view class="">
-					备注
-				</view>
-			</view>
-		</view>
-		<view class="content1 bgc1" v-show="selectIndex==1">
-			<view class="left">
-				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
-			</view>
-			<view class="right">
-				<view class="row1">
-					{{cardInfo.name}}|{{cardInfo.post}}
-				</view>
-				<view class="">
-					{{cardInfo.companyName}}
-				</view>
-				<view class="">
-					地址
-				</view>
-				<view class="">
-					联系电话
+			<view class="absolute card-content style1" v-if="selectIndex==0">
+				<view class="left">
+					<u--image :showLoading="true" :src="cardInfo.headSculpture" width="66px" height="66px" shape="circle" v-if="cardInfo.headSculpture"></u--image>
+					<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
 				</view>
-				<view class="">
-					备注
+				<view class="right">
+					<view class="row1">
+						<text class="name">{{cardInfo.name}}</text>
+						<text class="post">{{cardInfo.post}}</text>
+					</view>
+					<view class="row2">
+						{{cardInfo.companyName}}
+					</view>
+					<view class="row3 flex">
+						<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}
+					</view>
+					<view class="row4 flex">
+						<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ cardInfo.phone }}
+					</view>
+					<!-- <view class="">
+						备注
+					</view> -->
 				</view>
 			</view>
-		</view>
-		<view class="content1 bgc2" v-show="selectIndex==2">
-			<view class="left">
-				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
-			</view>
-			<view class="right">
-				<view class="row1">
-					{{cardInfo.name}}|{{cardInfo.post}}
-				</view>
-				<view class="">
-					{{cardInfo.companyName}}
-				</view>
-				<view class="">
-					地址
-				</view>
-				<view class="">
-					联系电话
+			<view class="absolute card-content style1 flex-between" v-if="selectIndex==1">
+				<view class="right">
+					<view class="row1">
+						<text class="name">{{cardInfo.name}}</text>
+						<text class="post">{{cardInfo.post}}</text>
+					</view>
+					<view class="row2">
+						{{cardInfo.companyName}}
+					</view>
+					<view class="row3 flex">
+						<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}
+					</view>
+					<view class="row4 flex">
+						<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ cardInfo.phone }}
+					</view>
+					<!-- <view class="">
+						备注
+					</view> -->
 				</view>
-				<view class="">
-					备注
+				<view class="left">
+					<u--image :showLoading="true" :src="cardInfo.headSculpture" width="66px" height="66px" shape="circle" v-if="cardInfo.headSculpture"></u--image>
+					<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
 				</view>
 			</view>
-		</view>
-		<view class="content1 bgc3" v-show="selectIndex==3">
-			<view class="left">
-				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
+			<view class="absolute card-content style2" v-if="selectIndex==2">
+					<view class="top">
+						<u--image :showLoading="true" :src="cardInfo.headSculpture" width="66px" height="66px" shape="circle" v-if="cardInfo.headSculpture"></u--image>
+						<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
+					</view>
+					<view class="bottom flex">
+						<view class="left">
+							<view class="row1">
+								<text class="name">{{cardInfo.name}}</text>
+								<text class="post">{{cardInfo.post}}</text>
+							</view>
+							<view class="row2">
+								{{cardInfo.companyName}}
+							</view>
+						</view>
+						<view class="right">
+							<view class="row1 flex">
+								<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}
+							</view>
+							<view class="row2 flex">
+								<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ cardInfo.phone }}
+							</view>
+						</view>
+					</view>
 			</view>
-			<view class="right">
-				<view class="row1">
-					{{cardInfo.name}}|{{cardInfo.post}}
-				</view>
-				<view class="">
-					{{cardInfo.companyName}}
-				</view>
-				<view class="">
-					地址
-				</view>
-				<view class="">
-					联系电话
-				</view>
-				<view class="">
-					备注
-				</view>
-			</view>
-		</view>
-		<view class="content1 bgc4" v-show="selectIndex==4">
-			<view class="left">
-				<image src="../../static/2.jpg" mode="widthFix" class="img"></image>
-			</view>
-			<view class="right">
-				<view class="row1">
-					{{cardInfo.name}}|{{cardInfo.post}}
-				</view>
-				<view class="">
-					{{cardInfo.companyName}}
-				</view>
-				<view class="">
-					地址
-				</view>
-				<view class="">
-					联系电话
-				</view>
-				<view class="">
-					备注
-				</view>
+			<view class="absolute card-content style2" v-if="selectIndex==3">
+					<view class="top">
+						<view class="row1">
+							<text class="name">{{cardInfo.name}}</text>
+							<text class="post">{{cardInfo.post}}</text>
+						</view>
+						<view class="row2">
+							{{cardInfo.companyName}}
+						</view>
+						
+					</view>
+					<view class="bottom flex">
+						<view class="left">
+						<u--image :showLoading="true" :src="cardInfo.headSculpture" width="66px" height="66px" shape="circle" v-if="cardInfo.headSculpture"></u--image>
+						<u--image :showLoading="true" src="/./../static/imgs/card/defaulthead.png" width="66px" height="66px" shape="circle" v-else></u--image>
+						</view>
+						<view class="right">
+							<view class="row1 flex">
+								<uni-icons type="map-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}
+							</view>
+							<view class="row2 flex">
+								<uni-icons type="phone-filled" size="20" style="margin-right: 20rpx;" color="#5e6d82"></uni-icons>{{ cardInfo.phone }}
+							</view>
+						</view>
+					</view>
 			</view>
 		</view>
 		<view class="change-template">
@@ -115,7 +109,7 @@
 		</view>
 		<view class="img-list">
 			<view class="img-item" v-for="(item,index) in imgList" @click="changeTemplate(index)">
-				<image :src="item.dictValue" class="img-item" :key="index"></image>
+				<image :src="item.dictLabel" class="img-item" :key="index"></image>
 				<image src="../../static/imgs/card/dh.png" class="dh" v-if="selectIndex==index"></image>
 			</view>
 		</view>
@@ -208,55 +202,63 @@
 			that = this
 			this.userInfo = uni.getStorageSync("userInfo")
 			this.cardInfo.commonId = this.userInfo.id
-			// this.getList()
+			this.getList()
 		},
 		data() {
 			return {
 				selectIndex: 0,
-				imgList: [{
-						dictLabel: '/./../static/1.jpg',
-						dictValue: '/./../static/1.jpg'
+				imgList:[],
+				// imgList: [{
+				// 		dictLabel: '/./../static/1.jpg',
+				// 		dictValue: '/./../static/1.jpg'
 
-					},
-					{
-						dictLabel: '/./../static/2.jpg',
-						dictValue: '/./../static/2.jpg'
+				// 	},
+				// 	{
+				// 		dictLabel: '/./../static/2.jpg',
+				// 		dictValue: '/./../static/2.jpg'
 
-					},
-					{
-						dictLabel: '/./../static/3.jpg',
-						dictValue: '/./../static/3.jpg'
+				// 	},
+				// 	{
+				// 		dictLabel: '/./../static/3.jpg',
+				// 		dictValue: '/./../static/3.jpg'
 
-					}, {
-						dictLabel: '/./../static/4.jpg',
-						dictValue: '/./../static/4.jpg'
+				// 	}, {
+				// 		dictLabel: '/./../static/4.jpg',
+				// 		dictValue: '/./../static/4.jpg'
 
-					}, {
-						dictLabel: '/./../static/5.jpg',
-						dictValue: '/./../static/5.jpg'
+				// 	}, {
+				// 		dictLabel: '/./../static/5.jpg',
+				// 		dictValue: '/./../static/5.jpg'
 
-					}
-				],
+				// 	}
+				// ],
 				isSubmit: false,
 				content: '确定提交名片信息？',
 				userInfo: {},
 				fileList1: [],
 				cardInfo: {
+					city:'',
+					area:'',
+					province:'',
 					commonId: '',
-					cardBusiness: '名片标识-1',
+					cardBusiness: '名片标识',
 					name: '',
 					post: '',
 					companyName: '',
 					location: '',
 					detailedAddress: '',
 					phone: '',
-					headSculpture: ''
+					headSculpture: '',
+					currentBackground:'',
+					cuttentTemplate:''
 				}
 			};
 		},
 		methods: {
 			changeTemplate(index) {
 				this.selectIndex = index
+				this.cardInfo.currentBackground = this.imgList[index].dictLabel
+				this.cardInfo.cuttentTemplate = this.imgList[index].dictSort
 			},
 			getList() {
 				this.$request.baseRequest('admin.dictData', 'list', {
@@ -271,6 +273,10 @@
 				}).then(res => {
 					console.log("img", res)
 					this.imgList = res.data.items
+					if(!this.cardInfo.currentBackground&&!this.cardInfo.cuttentTemplate){
+						this.cardInfo.currentBackground = this.imgList[0].dictLabel
+						this.cardInfo.cuttentTemplate = this.imgList[0].dictSort
+					}
 				})
 			},
 			placeSelect() {
@@ -432,7 +438,6 @@
 		}
 
 		.img-item {
-
 			position: relative;
 			width: 186rpx;
 			height: 120rpx;
@@ -459,4 +464,109 @@
 		border-radius: 20rpx;
 		margin: 40rpx 0;
 	}
+	.card-content{
+		top: 20rpx;
+		left: 20rpx;
+	}
+	.content1{
+		.style1{
+			display: flex;
+			padding: 20rpx 30rpx;
+			width: 85%;
+			.left{
+				width: 132rpx;
+				height: 132rpx;
+				border-radius: 50%;
+			}
+			.right{
+				margin-left: 40rpx;
+				.row1{
+					.name{
+						font-size: 38rpx;
+						font-weight: bold;
+						color: #040000;
+						margin-right: 20rpx;
+					}
+					.post{
+						font-size: 26rpx;
+						font-weight: 500;
+						color: #666666;
+					}
+				}
+				.row2{
+					margin-top: 20rpx;
+					font-size: 24rpx;
+					font-weight: bold;
+					color: #323333;
+				}
+				.row3{
+					margin-top: 30rpx;
+					font-size: 24rpx;
+					font-weight: 500;
+					color: #323333;
+					
+				}
+			}
+		}
+		.style2{
+				padding:30rpx;
+				.top{
+					.row1{
+						.name{
+							font-size: 38rpx;
+							font-weight: bold;
+							color: #040000;
+							margin-right: 20rpx;
+						}
+						.post{
+							font-size: 26rpx;
+							font-weight: 500;
+							color: #666666;
+						}
+					}
+					.row2{
+						margin-top: 20rpx;
+						font-size: 24rpx;
+						font-weight: bold;
+						color: #323333;
+					}
+				}
+				.bottom{
+					margin-top: 48rpx;
+					.left{
+						margin-right: 40rpx;
+						.row1{
+							.name{
+								font-size: 38rpx;
+								font-weight: bold;
+								color: #040000;
+								margin-right: 20rpx;
+							}
+							.post{
+								font-size: 26rpx;
+								font-weight: 500;
+								color: #666666;
+							}
+						}
+						.row2{
+							margin-top: 20rpx;
+							font-size: 24rpx;
+							font-weight: bold;
+							color: #323333;
+						}
+					}
+					.right{
+						.row1,.row2{
+							font-size: 24rpx;
+							font-weight: 500;
+							color: #323333;
+						}
+						.row2{
+							margin-top: 20rpx;
+						}
+					}
+				}
+				
+		}
+	}
 </style>