Merge branch 'master' of http://git.zthymaoyi.com/wangchao/businessCard

# Conflicts:
#	xiaochengxu/pages/mySet/mySet.vue

xiaochengxu/pages/mySet/editCard.vue

@@ -1,14 +1,15 @@
-
 <template>
 	<view class="content">
 		<view class="content1 relative">
 			<view class="relative">
-				<image :src="imgList[cardInfo.cuttentTemplate-1].dictLabel" mode="widthFix" style="width: 100%;height: auto;"></image>
+				<image :src="imgList[selectIndex].dictLabel" mode="widthFix" style="width: 100%;height: auto;"></image>
 			</view>
-			<view class="absolute card-content style1" v-if="cardInfo.cuttentTemplate==1">
+			<view class="absolute card-content style1" v-if="imgList[layoutSelectIndex].dictSort==1">
 				<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>
+					<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">
@@ -19,23 +20,27 @@
 						{{cardInfo.companyName}}
 					</view>
 					<view class="row3 flex">
-						<u--image :showLoading="true" src="/static/imgs/card/address1.png" width="13px"
+						<u--image
+							:src="'/static/imgs/card/address'+colorList[colorSelectIndex].index+'.png'" width="13px"
 							height="16px"></u--image>
-						<view class='icon-text'>{{ cardInfo.province?cardInfo.province:'-' }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
+						<view class='icon-text'>
+							{{ cardInfo.province?cardInfo.province:'-' }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
 					</view>
 					<view class="row4 flex">
-						<u--image :showLoading="true" src="/static/imgs/card/phone1.png" width="12px"
+						<u--image
+							:src="'/static/imgs/card/phone'+colorList[colorSelectIndex].index+'.png'" width="12px"
 							height="13px"></u--image>
 						<view class='icon-text'>{{ cardInfo.phone?cardInfo.phone:'-' }}</view>
 					</view>
 					<view class="row4 flex">
-						<u--image :showLoading="true" src="/static/imgs/card/remark1.png" width="10px"
+						<u--image
+							:src="'/static/imgs/card/remark'+colorList[colorSelectIndex].index+'.png'" width="10px"
 							height="12px"></u--image>
 						<view class='icon-text'>{{cardInfo.remark?cardInfo.remark:'-'}}</view>
 					</view>
 				</view>
 			</view>
-			<view class="absolute card-content style1 flex-between" v-if="cardInfo.cuttentTemplate==2">
+			<view class="absolute card-content style1 flex-between" v-if="imgList[layoutSelectIndex].dictSort==2">
 				<view class="right">
 					<view class="row1">
 						<text class="name">{{cardInfo.name}}</text>
@@ -45,62 +50,41 @@
 						{{cardInfo.companyName}}
 					</view>
 					<view class="row3 flex">
-						<u--image :showLoading="true" src="/static/imgs/card/address3.png" width="13px"
+						<u--image
+							:src="'/static/imgs/card/address'+colorList[colorSelectIndex].index+'.png'" width="13px"
 							height="16px"></u--image>
-						<view class='icon-text'>{{ cardInfo.province?cardInfo.province:'-' }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
+						<view class='icon-text'>
+							{{ cardInfo.province?cardInfo.province:'-' }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
 					</view>
 					<view class="row4 flex">
-						<u--image :showLoading="true" src="/static/imgs/card/phone3.png" width="12px"
+						<u--image
+							:src="'/static/imgs/card/phone'+colorList[colorSelectIndex].index+'.png'" width="12px"
 							height="13px"></u--image>
 						<view class='icon-text'>{{ cardInfo.phone?cardInfo.phone:'-' }}</view>
 					</view>
 					<view class="row4 flex">
-						<u--image :showLoading="true" src="/static/imgs/card/remark3.png" width="10px"
+						<u--image
+							:src="'/static/imgs/card/remark'+colorList[colorSelectIndex].index+'.png'" width="10px"
 							height="12px"></u--image>
 						<view class='icon-text'>{{cardInfo.remark?cardInfo.remark:'-'}}</view>
 					</view>
 				</view>
 				<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>
+					<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 class="absolute card-content style2" v-if="cardInfo.cuttentTemplate==3">
-					<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">
-								<u--image :showLoading="true" src="/static/imgs/card/address1.png" width="13px"
-									height="16px"></u--image>
-								<view class='icon-text'>{{ cardInfo.province?cardInfo.province:'-' }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
-							</view>
-							<view class="row2 flex">
-								<u--image :showLoading="true" src="/static/imgs/card/phone1.png" width="12px"
-									height="13px"></u--image>
-								<view class='icon-text'>{{ cardInfo.phone?cardInfo.phone:'-' }}</view>
-							</view>
-							<view class="row4 flex">
-								<u--image :showLoading="true" src="/static/imgs/card/remark1.png" width="10px"
-									height="12px"></u--image>
-								<view class='icon-text'>{{cardInfo.remark?cardInfo.remark:'-'}}</view>
-							</view>
-						</view>
-					</view>
-			</view>
-			<view class="absolute card-content style2" v-if="cardInfo.cuttentTemplate==4">
-					<view class="top">
+			<view class="absolute card-content style2" v-if="imgList[layoutSelectIndex].dictSort==3">
+				<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>
@@ -108,40 +92,103 @@
 						<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">
-								<u--image :showLoading="true" src="/static/imgs/card/address2.png" width="13px"
-									height="16px"></u--image>
-								<view class='icon-text'>{{ cardInfo.province?cardInfo.province:'-' }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
+					<view class="right">
+						<view class="row1 flex">
+							<u--image
+								:src="'/static/imgs/card/address'+colorList[colorSelectIndex].index+'.png'" width="13px"
+								height="16px"></u--image>
+							<view class='icon-text'>
+								{{ cardInfo.province?cardInfo.province:'-' }}{{ cardInfo.city }}{{ cardInfo.area }}
 							</view>
-							<view class="row2 flex">
-								<u--image :showLoading="true" src="/static/imgs/card/phone2.png" width="12px"
-									height="13px"></u--image>
-								<view class='icon-text'>{{ cardInfo.phone?cardInfo.phone:'-' }}</view>
-							</view>
-							<view class="row4 flex">
-								<u--image :showLoading="true" src="/static/imgs/card/remark2.png" width="10px"
-									height="12px"></u--image>
-								<view class='icon-text'>{{cardInfo.remark?cardInfo.remark:'-'}}</view>
+						</view>
+						<view class="row2 flex">
+							<u--image
+								:src="'/static/imgs/card/phone'+colorList[colorSelectIndex].index+'.png'" width="12px"
+								height="13px"></u--image>
+							<view class='icon-text'>{{ cardInfo.phone?cardInfo.phone:'-' }}</view>
+						</view>
+						<view class="row4 flex">
+							<u--image
+								:src="'/static/imgs/card/remark'+colorList[colorSelectIndex].index+'.png'" width="10px"
+								height="12px"></u--image>
+							<view class='icon-text'>{{cardInfo.remark?cardInfo.remark:'-'}}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="absolute card-content style2" v-if="imgList[layoutSelectIndex].dictSort==4">
+				<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">
+							<u--image
+								:src="'/static/imgs/card/address'+colorList[colorSelectIndex].index+'.png'" width="13px"
+								height="16px"></u--image>
+							<view class='icon-text'>
+								{{ cardInfo.province?cardInfo.province:'-' }}{{ cardInfo.city }}{{ cardInfo.area }}
 							</view>
 						</view>
+						<view class="row2 flex">
+							<u--image
+								:src="'/static/imgs/card/phone'+colorList[colorSelectIndex].index+'.png'" width="12px"
+								height="13px"></u--image>
+							<view class='icon-text'>{{ cardInfo.phone?cardInfo.phone:'-' }}</view>
+						</view>
+						<view class="row4 flex">
+							<u--image
+								:src="'/static/imgs/card/remark'+colorList[colorSelectIndex].index+'.png'" width="10px"
+								height="12px"></u--image>
+							<view class='icon-text'>{{cardInfo.remark?cardInfo.remark:'-'}}</view>
+						</view>
 					</view>
+				</view>
 			</view>
 		</view>
-		<view class="change-template">
-			切换模板
+		<view class="flex">
+			<view class="change-template" :class="selectConfig==1?'active-style':''" @click="changeTab(1)">
+				背景配置
+			</view>
+			<view class="change-template" :class="selectConfig==2?'active-style':''" @click="changeTab(2)">
+				图标颜色
+			</view>
+			<view class="change-template" :class="selectConfig==3?'active-style':''" @click="changeTab(3)">
+				布局配置
+			</view>
 		</view>
-		<view class="img-list">
+
+		<view class="img-list" v-if="selectConfig==1">
 			<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="../../static/imgs/card/dh.png" class="dh" v-if="cardInfo.cuttentTemplate==(index+1)"></image>
+				<image src="@/static/imgs/card/dh.png" class="dh" v-if="selectIndex==index"></image>
+			</view>
+		</view>
+		<view class="font-color flex" v-if="selectConfig==2">
+			<view v-for="(item,index) in colorList"
+				:style="'background:'+item.color+';width:100rpx;height:100rpx;border-radius:50%;margin-right:20rpx'"
+				class="relative" @click="changeIconColor(index)">
+				<image src="@/static/imgs/card/dh.png" class="icon-dh" v-if="colorSelectIndex==index"></image>
+			</view>
+		</view>
+		<view class="font-color img-list" v-if="selectConfig==3">
+			<view class="img-item" v-for="(item,index) in layoutImgList" @click="layoutChangeTemplate(index)">
+				<image :src="item.dictValue" class="img-item" :key="index"></image>
+				<image src="@/static/imgs/card/dh.png" class="dh" v-if="layoutSelectIndex==index"></image>
 			</view>
 		</view>
 		<view class="change-template">
@@ -153,7 +200,8 @@
 				<view class="left">
 					名片标识
 				</view>
-				<u--input v-model="cardInfo.cardBusiness" border="none" placeholder="输入名片标识" inputAlign='right'></u--input>
+				<u--input v-model="cardInfo.cardBusiness" border="none" placeholder="输入名片标识"
+					inputAlign='right'></u--input>
 			</view>
 			<view class="flex flex-between align-item-center row">
 				<view class="left">
@@ -165,13 +213,15 @@
 				<view class="left">
 					职务
 				</view>
-				<u--input v-model="cardInfo.post" border="none" placeholder="输入职务,不超过8个字符" inputAlign='right'></u--input>
+				<u--input v-model="cardInfo.post" border="none" placeholder="输入职务,不超过8个字符"
+					inputAlign='right'></u--input>
 			</view>
 			<view class="flex flex-between align-item-center row">
 				<view class="left">
 					公司/机构名称
 				</view>
-				<u--input v-model="cardInfo.companyName" border="none" placeholder="输入公司/机构名称" inputAlign='right'></u--input>
+				<u--input v-model="cardInfo.companyName" border="none" placeholder="输入公司/机构名称"
+					inputAlign='right'></u--input>
 			</view>
 			<view class="flex flex-between align-item-center row" @click="placeSelect();hideKeyboard()">
 				<view class="left">
@@ -180,21 +230,24 @@
 				<view v-if="cardInfo.province">{{ cardInfo.province }}{{ cardInfo.city }}{{ cardInfo.area }}</view>
 				<view class="" v-else>
 					<text>选择地址 </text>
-					<image src="../../static/imgs/card/yjt.png" mode="" style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image>
+					<image src="@/static/imgs/card/yjt.png" mode=""
+						style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image>
 				</view>
-				
+
 			</view>
 			<view class="flex flex-between align-item-center row">
 				<view class="left">
 					详细地址
 				</view>
-				<u--input v-model="cardInfo.detailedAddress" border="none" placeholder="输入详细地址,不超过15个字" inputAlign='right'></u--input>
+				<u--input v-model="cardInfo.detailedAddress" border="none" placeholder="输入详细地址,不超过15个字"
+					inputAlign='right'></u--input>
 			</view>
 			<view class="flex flex-between align-item-center row">
 				<view class="left">
 					联系电话
 				</view>
-				<u--input v-model="cardInfo.phone" maxlength='15' border="none" placeholder="输入联系电话" inputAlign='right'></u--input>
+				<u--input v-model="cardInfo.phone" maxlength='15' border="none" placeholder="输入联系电话"
+					inputAlign='right'></u--input>
 			</view>
 			<!-- 		<u-form-item label="地址" prop="userInfo.name" borderBottom>
 						<view @click="showPicker">选择地址</view>
@@ -230,31 +283,66 @@
 	import uploadImage from '@/components/ossutil/uploadFile.js';
 	export default {
 		onLoad(options) {
+			that = this
+			this.userInfo = uni.getStorageSync("userInfo")
 			this.cardInfo = JSON.parse(options.itemVal)
-			console.log(this.cardInfo)
+			// this.cardInfo.cardBusiness ="名片标识"+ options.cardIndex
 			this.fileList1 = [
 				{
 					url:this.cardInfo.headSculpture
 				}
 			]
 			that = this
-			this.userInfo = uni.getStorageSync("userInfo")
-			this.getList()	
+			this.getList()
 		},
 		data() {
 			return {
-				selectIndex: 1,
-				imgList:[],
+				layoutSelectIndex: 0,
+				layoutImgList: [{
+						dictValue: '/static/imgs/card/1.png',
+						dictSort: 1
+					},
+					{
+						dictValue: '/static/imgs/card/2.png',
+						dictSort: 2
+					},
+					{
+						dictValue: '/static/imgs/card/3.png',
+						dictSort: 3
+					},
+					{
+						dictValue: '/static/imgs/card/4.png',
+						dictSort: 4
+					}
+				],
+				colorSelectIndex: 0,
+				colorList: [{
+						"color": "rgba(196, 196, 196, 1)",
+						index: 1
+					},
+					{
+						"color": "rgba(96, 148, 196, 1)",
+						index: 2
+					},
+					{
+						"color": "rgba(168, 135, 98, 1)",
+						index: 3
+					}
+
+				],
+				selectConfig: 1,
+				selectIndex: 0,
+				imgList: [],
 				isSubmit: false,
 				content: '确定提交名片信息？',
 				userInfo: {},
 				fileList1: [],
 				cardInfo: {
-					city:'',
-					area:'',
-					province:'',
+					city: '',
+					area: '',
+					province: '',
 					commonId: '',
-					cardBusiness: '名片标识',
+					cardBusiness: '',
 					name: '',
 					post: '',
 					companyName: '',
@@ -262,16 +350,28 @@
 					detailedAddress: '',
 					phone: '',
 					headSculpture: '',
-					currentBackground:'',
-					cuttentTemplate:''
+					currentBackground: '',
+					cuttentTemplate: '',
+					icon: '',
 				}
 			};
 		},
 		methods: {
+			layoutChangeTemplate(index) {
+				this.layoutSelectIndex = index
+				this.cardInfo.cuttentTemplate = this.layoutImgList[index].dictSort
+			},
+			changeIconColor(index) {
+				this.colorSelectIndex = index
+				this.cardInfo.icon = this.colorList[index].index
+			},
+			changeTab(index) {
+				this.selectConfig = index
+			},
 			changeTemplate(index) {
-				this.selectIndex = (index+1)
+				this.selectIndex = index
 				this.cardInfo.currentBackground = this.imgList[index].dictLabel
-				this.cardInfo.cuttentTemplate = this.imgList[index].dictSort
+
 			},
 			getList() {
 				this.$request.baseRequest('admin.dictData', 'list', {
@@ -280,16 +380,30 @@
 					console.log('res+++++', failres.errmsg)
 					uni.hideLoading()
 					uni.showToast({
-					  icon:"none",
-					  title: failres.errmsg,
-					  duration: 3000
+						icon: "none",
+						title: failres.errmsg,
+						duration: 3000
 					});
+
 				}).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
+					for(var i=0;i<this.imgList.length;i++){
+						if(this.cardInfo.currentBackground==this.imgList[i].dictLabel){
+							this.selectIndex=i
+						}
+					}
+					
+					for(var i=0;i<this.layoutImgList.length;i++){
+						if(this.cardInfo.cuttentTemplate==this.layoutImgList[i].dictSort){
+							this.layoutSelectIndex=i
+						}
+					}
+					
+					for(var i=0;i<this.colorList.length;i++){
+						if(this.cardInfo.icon==this.colorList[i].index){
+							this.colorSelectIndex=i
+						}
 					}
 				})
 			},
@@ -347,23 +461,29 @@
 				})
 			},
 			confirmSubmit() {
+				uni.showLoading({
+					title: '加载中',
+					mask: true
+				})
 				this.$request.baseRequest('admin.unimall.cardManagementInfo', 'update', {
 					cardManagementInfo: JSON.stringify(this.cardInfo)
 				}, failres => {
-					uni.hideLoading()
 					uni.showToast({
-					  icon:"none",
-					  title: failres.errmsg,
-					  duration: 3000
+						icon: "none",
+						title: failres.errmsg,
+						duration: 3000
 					});
+
+					uni.hideLoading()
 				}).then(res => {
 					this.isSubmit = false
 					uni.showToast({
-					  icon:"success",
-					  title: '编辑成功！',
-					  duration: 2000
+						icon: "success",
+						title: '编辑成功！',
+						duration: 2000
 					});
 					uni.navigateBack()
+
 				})
 			},
 			submit() {
@@ -414,10 +534,11 @@
 	}
 
 	.change-template {
-		margin: 46rpx 0 30rpx 0;
+		margin: 30rpx 0 50rpx 0;
 		font-size: 32rpx;
 		font-weight: bold;
 		color: #19191A;
+		margin-right: 20rpx;
 	}
 
 	.img-list {
@@ -433,6 +554,7 @@
 			bottom: 8rpx;
 		}
 
+
 		.img-item {
 			position: relative;
 			width: 186rpx;
@@ -448,131 +570,193 @@
 	.content2 {
 		background-color: #fff;
 		border-radius: 20rpx;
-		padding:0 20rpx 0 20rpx;
-		.row{
+		padding: 0 20rpx 0 20rpx;
+
+		.row {
 			padding: 20rpx;
 			border-bottom: 1px solid #E6E5E5;
 		}
 	}
-	.button{
+
+	.button {
 		color: #fff;
 		background-color: #112253;
 		border-radius: 20rpx;
 		margin: 40rpx 0;
 	}
-	.card-content{
+
+	.card-content {
 		top: 20rpx;
 		left: 20rpx;
 	}
-	.content1{
-		.icon-text{
-			margin-left:10rpx;
+
+	.content1 {
+		.icon-text {
+			margin-left: 10rpx;
 		}
-		.style1{
+
+		.style1 {
 			display: flex;
 			padding: 20rpx 30rpx;
 			width: 85%;
-			.left{
+
+			.left {
 				width: 132rpx;
 				height: 132rpx;
 				border-radius: 50%;
 			}
-			.right{
+
+			.right {
 				margin-left: 40rpx;
-				.row1{
-					.name{
+
+				.row1 {
+					.name {
 						font-size: 38rpx;
 						font-weight: bold;
 						color: #040000;
 						margin-right: 20rpx;
 					}
-					.post{
+
+					.post {
 						font-size: 26rpx;
 						font-weight: 500;
 						color: #666666;
 					}
 				}
-				.row2{
+
+				.row2 {
 					margin-top: 20rpx;
 					font-size: 24rpx;
 					font-weight: bold;
 					color: #323333;
 				}
-				.row3{
+
+				.row3 {
 					margin-top: 30rpx;
 					font-size: 24rpx;
 					font-weight: 500;
 					color: #323333;
 				}
-				.row2,.row3,.row4{
+
+				.row2,
+				.row3,
+				.row4 {
 					margin-top: 20rpx;
 				}
 			}
 		}
-		.style2{
-				padding:30rpx;
-				.top{
-					.row1{
-						.name{
+
+		.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{
+
+						.post {
 							font-size: 26rpx;
 							font-weight: 500;
 							color: #666666;
 						}
 					}
-					.row2{
+
+					.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;
 					}
-					.right{
-						.row1,.row2{
-							font-size: 24rpx;
-							font-weight: 500;
-							color: #323333;
-						}
-						.row2,.row3,.row4{
-							margin-top: 20rpx;
-						}
+
+					.row2,
+					.row3,
+					.row4 {
+						margin-top: 20rpx;
 					}
 				}
-				
+			}
+
 		}
 	}
-	.content2{
-		.left{
-			margin-right:10rpx;
+
+	.content2 {
+		.left {
+			margin-right: 10rpx;
 		}
 	}
+
+	.active-style {
+		color: '#112253';
+		font-size: 36rpx;
+		font-weight: bold;
+		position: relative;
+	}
+
+	.active-style::after {
+		position: absolute;
+		bottom: -20rpx;
+		content: "";
+		width: 70rpx;
+		height: 8rpx;
+		border-radius: 4rpx;
+		background: #112253;
+		left: 0;
+		right: 0;
+		margin: auto;
+	}
+
+	.font-color {
+		position: relative;
+	}
+
+	.icon-dh {
+		width: 32rpx;
+		height: 32rpx;
+		position: absolute;
+		right: 20rpx;
+		bottom: 20rpx;
+	}
 </style>