1.修改话费支付页面

high-unionPay/App.vue

@@ -5,23 +5,23 @@
 			// brestUrl: 'http://192.168.3.4:9302/brest',
 			// imgUrl: 'https://192.168.3.4:9301/filesystem/',
 			//正式
-			url: 'https://hsg.dctpay.com/crest',
+			// url: 'https://hsg.dctpay.com/crest',
-			v1url:'https://hsg.dctpay.com/v1',
+			// v1url:'https://hsg.dctpay.com/v1',
-			orderurl:' https://hsg.dctpay.com/order',
+			// orderurl:' https://hsg.dctpay.com/order',
-			userurl:'https://hsg.dctpay.com/user',
+			// userurl:'https://hsg.dctpay.com/user',
-			imgUrl: 'https://hsg.dctpay.com/filesystem/',
+			// imgUrl: 'https://hsg.dctpay.com/filesystem/',
-			brestUrl: 'https://hsg.dctpay.com/brest',
+			// brestUrl: 'https://hsg.dctpay.com/brest',
-			imageWxImg: 'https://hsg.dctpay.com/filesystem/wxApplets/',
+			// imageWxImg: 'https://hsg.dctpay.com/filesystem/wxApplets/',
-			imageqrImg: 'https://hsg.dctpay.com/filesystem/temporary/',
+			// imageqrImg: 'https://hsg.dctpay.com/filesystem/temporary/',
 			//测试
-			// url: 'https://hsgcs.dctpay.com/crest',
+			url: 'https://hsgcs.dctpay.com/crest',
-			// v1url: 'https://hsgcs.dctpay.com/v1',
+			v1url: 'https://hsgcs.dctpay.com/v1',
-			// orderurl:'https://hsgcs.dctpay.com/order',
+			orderurl:'https://hsgcs.dctpay.com/order',
-			// userurl:'https://hsgcs.dctpay.com/user',
+			userurl:'https://hsgcs.dctpay.com/user',
-			// brestUrl: 'https://hsgcs.dctpay.com/brest',
+			brestUrl: 'https://hsgcs.dctpay.com/brest',
-			// imgUrl: 'https://hsgcs.dctpay.com/filesystem/',
+			imgUrl: 'https://hsgcs.dctpay.com/filesystem/',
-			// imageWxImg: 'https://hsgcs.dctpay.com/filesystem/wxApplets/',
+			imageWxImg: 'https://hsgcs.dctpay.com/filesystem/wxApplets/',
-			// imageqrImg: 'https://hsgcs.dctpay.com/filesystem/temporary/',
+			imageqrImg: 'https://hsgcs.dctpay.com/filesystem/temporary/',
 			userInfo: "",
 			brestUserInfo: '',
 			openId: '',
@@ -61,4 +61,13 @@
 <style lang="scss">
 	/*每个页面公共css */
 	@import "/static/iconfont/font.scss";
+	@keyframes noticeAnimation {
+		from {
+			transform: translateX(100rpx);
+		}
+		to {
+			// transform: translateX(calc(-100% + 150px));
+			transform: translateX(-100%);
+		}
+	}
 </style>

high-unionPay/Utils/Api.js

@@ -495,6 +495,10 @@ export const sendUserPass = params => {
 export const getUserOrderListhuafei = params => {
 	return POST('GET', `${base}/outRechargeOrder/getUserOrderList`, params).then(res => res.data);
 }
+// 话费充值数据字典
+export const findSecConfigByType = params => {
+	return POST('GET', `${base}/common/findSecConfigByType`, params).then(res => res.data);
+}
 
 //肯德基返利
 export const getRebateIntegral = params => {

high-unionPay/pages/goods/refuel-confirm/refuel-confirm.vue

@@ -202,7 +202,7 @@
 		<wybPopup ref="popup" type="bottom" width="500" :scrollY="true" radius="6" :showCloseIcon="true">
 			<view class="fotct font18 fontwig6 fcor333 mart10 height30">优惠券选择</view>
 			<view class="width92 height110 tccs mart10 alijus" v-for="(items, index) in OrderPreList" :key="index"
-				@click="radioChanges(items,items)">
+				@click="radioChanges(items)">
 				<image mode="widthFix" :src="imageUrl+items.discountImg"></image>
 				<view class="alijus width60 margle10">
 					<view class="width80p">
@@ -396,9 +396,9 @@
 				this.$refs.popup.show();
 			},
 			//选择优惠券
-			radioChanges(item, items) {
+			radioChanges(item) {
 				this.rechangeload();
-				if (this.memDiscountId == items.id) { // 如果已经选中，则取消选中
+				if (this.memDiscountId == item.id) { // 如果已经选中，则取消选中
 					this.memDiscountId = '';
 					this.deductionPrice = '0.00';
 					this.priceCaluc(this.orderList.payPrice);
@@ -406,7 +406,7 @@
 				} else { // 否则进行选中赋值
 					if (item.discountType == 1) {
 						if (this.orderPrice >= item.discountCondition) {
-							this.memDiscountId = items.id;
+							this.memDiscountId = item.id;
 							//满减价格
 							this.deductionPrice = item.discountPrice;
 							let oldprice = this.orderPrice - this.deductionPrice;
@@ -420,14 +420,14 @@
 						}
 					}
 					if (item.discountType == 2) {
-						this.memDiscountId = items.id;
+						this.memDiscountId = item.id;
 						//抵扣价格
 						this.deductionPrice = item.discountPrice;
 						let oldprice = this.orderPrice - this.deductionPrice;
 						this.priceCaluc(oldprice);
 					}
 					if (item.discountType == 3) {
-						this.memDiscountId = items.id;
+						this.memDiscountId = item.id;
 						// 打折
 						this.deductionPrice = this.orderPrice - (this.orderPrice * item.discountPrice);
 						let oldprice = parseFloat(this.orderPrice * item.discountPrice).toFixed(2);

high-unionPay/pages/tabBar/home/home.vue

@@ -662,8 +662,7 @@
 
 	.spcarea {
 		width: 31%;
-		margin-right: auto;
+		margin-left: 2%;
-		margin-left: auto;
 		border-radius: 10px 10px 0px 0px;
 		padding-bottom: 10px;
 	}

high-unionPay/pages/unionPay/recharge-centre/recharge-centre.vue

@@ -1,150 +1,265 @@
 <template>
 	<view>
-		<view class="width100 height100p backcorf06">
+		<view class="width100 height120" style="background-color: #3267f6;">
+			<view class="alijusstart paddleft10 paddtright10" style="background-color: #2d5de5;height: 30px;">
+				<image src="../../../static/img/tongz.png" style="height: 20px;" class="icon45"></image>
+				<view class="right-left-scroll margle">
+					<view class="content font12 fontspec"
+						:style="{'animation': `noticeAnimation ${time}s linear 1s infinite`}">
+						{{notice}}
+					</view>
+				</view>
+			</view>
+
 			<view class="block">
 				<view class="content height60">
-					<input type="number" class="my flleft font18 fcorfff" maxlength="11"
+					<input type="number" class="my flleft font20 fcorfff" maxlength="11"
 						placeholder-style="color:#ffffff;" placeholder="请输入充值号码" v-model="inputPhone" />
 				</view>
 				<view class="line1 width100 backcorfff"></view>
 			</view>
 		</view>
-		<!-- <view class="mart5">
+		<view class="backcorlf5 height70"></view>
-			<QSTabs ref="tabs" :tabs="tabs" animationMode="line2" :current="current" @change="change"
+		<view class="width90 border-r backcorfff" style="margin-top: -60px;">
-				activeColor="#089bf5" lineColor="#089bf5" minWidth="374">
+			<view class="swiperHead">
-			</QSTabs>
+				<!--组件-->
-		</view> -->
+				<swiperNavBar :scrollIntoView="scrollIntoView" :swiperTabList='tabs' :swiperTabIdx='swiperTabIdx'
-		<view class="width90 font16 fcor333 fontwig6 mart20">
+					:currentSwiperWidth='currentSwiperWidth' :currentSwiperHeight='currentSwiperHeight'
-			选择金额
+					:swiperCurrentSize='swiperCurrentSize' :swiperColor='swiperColor'
+					:swiperCurrentColor='swiperCurrentColor' :currentSwiperLineShow="currentSwiperLineShow"
+					:currentSwiperLineActiveWidth="currentSwiperLineActiveWidth"
+					:currentSwiperLineActiveHeight="currentSwiperLineActiveHeight"
+					:currentSwiperLineActiveBg="currentSwiperLineActiveBg"
+					:currentSwiperLineAnimatie="currentSwiperLineAnimatie" v-if=" tabs.length > 0 "
+					@change="CurrentTab">
+				</swiperNavBar>
+				<!--组件-->
 			</view>
-		<view class="list">
+			<!--内容-->
-			<view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index"
+			<view class="swiperCont border-r">
-				@click="select(item)">
+				<swiper class="swiper border-r" :style="{ height:mainHeight + 'px' }" :current="swiperTabIdx"
-				<view class="heTitle">{{item.rechargePrice}}元</view>
+					@change="SwiperChange">
-				<view class="font13 fcoreb5 fontwig6" v-if="item.status != 2">{{item.payPrice}}元</view>
+					<swiper-item class="swiperItem border-r" v-for="(item,index) in tabs" :key='index'>
-				<view class="font13 fcor999" v-if="item.status == 2">已售空</view>
+						<view class="width90 font14 fcor333 fontwig6 mart5">
+							话费特惠充值
 						</view>
+						<view v-if="amountList == ''" class="mart10 fotct font14 fcor666">
+							<image mode="widthFix" style="width: 40vw;" :src="imagewxUrl+imgadres"></image>
+						</view>
+						<view class="list" v-else>
+							<view class="box border-r" :class="{'on':item.id == inputAmountId}"
+								v-for="(item,index) in amountList" :key="index" @click="select(item)">
+								<view class="heTitle font16 fontwig6 paddtop5">{{item.rechargePrice}}元</view>
+								<view class="font13 contcil" :class="{'on':item.id == inputAmountId}"
+									v-if="item.status != 2">售{{item.payPrice}}元</view>
+								<view class="font12 contcil" :class="{'on':item.id == inputAmountId}"
+									v-if="item.status == 2">已售空</view>
+								<view class="width100 font12  height25l boxchil"
+									:class="{'on':item.id == inputAmountId}" style="">{{explainReceiptTime}}
 								</view>
-		<view class="mart5 width90 font18 fcor333 fontwig6">
-			充值说明：
 							</view>
-		<!-- <view class="width90 mart20" v-if="current == 0">
-			<image mode="widthFix" :src="imagewxUrl+image2"></image>
-		</view> -->
-		<view class="width90 mart20">
-			<image mode="widthFix" :src="imagewxUrl+image1"></image>
 						</view>
-		<view class="height100p"></view>
+					</swiper-item>
-		<view class="bombtn width94 font16">
+				</swiper>
-			<view class="width50 flleft payem">应付: {{inputAmount}}元</view>
-			<view class="width50 flright paybtn" @click="addOrderPay">立即购买</view>
 			</view>
+
+			<view class="width90 height40 backcor008 font16 fcorfff fotct border-r" @click="addOrderPay()">¥
+				{{inputAmount}}
+				立即充值
+			</view>
+			<view class="width100 height40"></view>
+		</view>
+		<view class="width90 mart20">
+			<rich-text :nodes="textcont"></rich-text>
+		</view>
+
+		<wybPopup ref="popup" type="center" height="850" width="600" bgColor="" radius="6" :showCloseIcon="true">
+			<image class="popImg" :src="imageUrl+imgadres1"></image>
+		</wybPopup>
 	</view>
 </template>
 
 <script>
 	let app = getApp();
+	import QSTabs from '@/components/QS-tabs/QS-tabs.vue';
+	import swiperNavBar from '@/components/swiperNavBar.vue';
+	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
 	import {
 		getListOutRechargePrice,
-		addOrderPay
+		addOrderPay,
-	} from '../../../Utils/Api.js';
+		findSecConfigByType,
-	import QSTabs from '../../../components/QS-tabs/QS-tabs.vue';
+		getCmsContent
+	} from '@/Utils/Api.js';
 	export default {
 		components: {
-			QSTabs
+			QSTabs,
+			swiperNavBar,
+			wybPopup
 		},
 		data() {
 			return {
-				typeId: '',
 				inputAmountId: '',
 				inputAmount: '',
-				orderPrice: '',
 				inputPhone: '',
 				amoutType: '',
-				codesVlues: '',
 				amountList: [],
+				price: '',
 				amoutstatus: '',
-				tabs: ["5个工作日", "6小时到账"], //切换操作
+				tabs: [], //切换操作
 				current: 0, //默认
 				swiperCurrent: 2,
+				imageUrl: app.globalData.imgUrl,
 				imagewxUrl: app.globalData.imageWxImg,
-				image1:'telephone1.png',
+				imgadres: 'noorder.png',
-				image2:'telephone2.png'
+				imgadres1: '',
+				image1: 'telephone1.png',
+				image2: 'telephone2.png',
+				notice: '', //警告
+				textcont: '', // 富文本
+				explainReceiptTime: '', //时间到账 
+				time: 0,
+
+				//导航
+				scrollIntoView: 0, //设置哪个方向可滚动，则在哪个方向滚动到该元素
+				swiperTabList: [], //导航列表
+				swiperTabIdx: 0,
+				swiperCurrentSize: '26rpx', //导航的字体大小
+				swiperColor: '#333333', //导航栏字体未选中前颜色
+				swiperCurrentColor: '#1D63FF', //选中当前导航栏字体颜色
+				currentSwiperWidth: '23%', //当前导航的宽度 % upx rpx px  （导航超出可左右滑动 ）
+				currentSwiperHeight: 100, //当前导航的高度度 rpx px
+				mainHeight: 240, //全屏或者局部滑动设置的高度
+				currentSwiperLineShow: true, //是否显示导航栏的线条 （线条距离标题太近的话可自行修改.swiperLine的css）
+				currentSwiperLineActiveBg: '#1D63FF', //当前选中的导航栏线条颜色
+				currentSwiperLineActiveWidth: '30rpx', //当前选中的导航栏线条的宽度 upx rpx px
+				currentSwiperLineActiveHeight: '6rpx', //当前选中的导航栏线条的高度度 upx rpx px
+				currentSwiperLineAnimatie: 300, //当前选中的导航栏线条过渡效果
+
 			}
 		},
 		onLoad(options) {
-			this.typeId = options.id;
+			this.getCmsAactibity();
-			if (this.typeId == 1) {
+			this.getListOutRechargePrice();
-				uni.setNavigationBarTitle({
+		},
-					title: '中国移动'
+		onShow() {
-				})
+			this.findSecConfigByType();
-				this.amoutType = 2;
+			this.findSecConfigByTypewap();
-				this.getListOutRechargePrice(2);
+		},
-				return;
+		mounted() {
+			let scroll_width = 0;
+			const query = uni.createSelectorQuery().in(this);
+			query.select('.right-left-scroll').boundingClientRect(data => {
+				scroll_width = (data.width).toFixed(2);
+			}).exec();
+
+			query.select('.right-left-scroll .content').boundingClientRect(data => {
+				if (data.width - scroll_width > 0) {
+					this.time = (9 * data.width / scroll_width).toFixed(2);
 				}
-			if (this.typeId == 2) {
+			}).exec();
-				uni.setNavigationBarTitle({
+		},
-					title: '中国电信'
+		methods: {
-				})
+			//查询弹窗
-				this.amoutType = 1;
+			getCmsAactibity() {
-				this.getListOutRechargePrice(1);
+				let code;
-				return;
+				// #ifdef H5
+				code = '2'
+				// #endif
+				// #ifdef MP
+				code = '1'
+				// #endif
+				let params = {
+					companyId: app.globalData.companyId,
+					platform: code,
+					categoryCode: 'CMS_RECHARGE_POPOVER'
 				}
-			if (this.typeId == 3) {
+				getCmsContent(params).then(res => {
-				uni.setNavigationBarTitle({
+					if (res.return_code == '000000' && res.return_data.childCategory.length != 0) {
-					title: '中国联通'
+						//弹窗首页广告
-				})
+						this.imgadres1 = res.return_data.childCategory[0].imgData;
-				this.amoutType = 3;
+						this.showPopup();
-				this.getListOutRechargePrice(3);
-				return;
 					}
-
+				});
-
+			},
+			//显示弹出
+			showPopup() {
+				this.$refs.popup.show();
+			},
+			// 充值通知
+			findSecConfigByType() {
+				let datas = {
+					codeType: 'EXPLAIN_NOTIFICATIONS'
+				}
+				findSecConfigByType(datas).then(res => {
+					if (res.return_code == '000000') {
+						this.notice = res.return_data.codeValue;
+					}
+				});
+			},
+			//充值警告
+			findSecConfigByTypewap() {
+				let datas = {
+					codeType: 'EXPLAIN_WRAP '
+				}
+				findSecConfigByType(datas).then(res => {
+					if (res.return_code == '000000') {
+						this.textcont = res.return_data.codeValue;
+					}
+				});
 			},
-		methods: {
 			select(amoutinfos) {
 				this.inputAmount = amoutinfos.payPrice;
-				this.orderPrice = amoutinfos.rechargePrice;
+				this.price = amoutinfos.rechargePrice;
 				this.inputAmountId = amoutinfos.id;
 				this.amoutstatus = amoutinfos.status;
 			},
-			//筛选
-			change(index) {
-				this.$refs.tabs.setFinishCurrent(index);
-				this.current = index;
-				this.inputAmount = '';
-				this.amoutstatus = '';
-				if (index == 0) {
-					this.swiperCurrent = 2;
-					this.getListOutRechargePrice(this.amoutType);
-				} else {
-					this.swiperCurrent = 1;
-					this.getListOutRechargePrice(this.amoutType);
-				}
-			},
 			/**
 			 * 查询价格
 			 */
-			getListOutRechargePrice(item) {
+			getListOutRechargePrice() {
 				uni.showLoading({
 					title: '加载中...'
 				})
+				let showType;
+				// #ifdef H5
+				showType = 2;
+				// #endif
+				// #ifdef MP
+				showType = 1;
+				// #endif
 				let params = {
-					operatorType: item,
 					"companyId": app.globalData.companyId,
-					platformId: 3
+					platformId: showType
-					// rechargeType: this.swiperCurrent
 				}
 				getListOutRechargePrice(params).then(res => {
 					uni.hideLoading()
 					if (res.return_code == '000000' && res.return_data) {
-						this.amountList = res.return_data;
+						this.tabs = res.return_data;
+						this.amountList = res.return_data[0].priceList;
+						this.explainReceiptTime = res.return_data[0].explain_receipt_time;
+						this.amoutType = res.return_data[0].id;
 					} else {
 						this.amountList = [];
 					}
 				})
 			},
 
+			//tab点击事件 自行完善需要的代码
+			CurrentTab: function(index) {
+				this.swiperTabIdx = index;
+				this.scrollIntoView = Math.max(0, index - 1);
+				this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time;
+				this.amountList = this.tabs[this.swiperTabIdx].priceList;
+				this.amoutType = this.tabs[this.swiperTabIdx].id;
+			},
+			//滑动事件  自行完善需要的代码
+			SwiperChange: function(e) {
+				this.swiperTabIdx = e.detail.current;
+				this.scrollIntoView = Math.max(0, e.detail.current - 1);
+				this.explainReceiptTime = this.tabs[this.swiperTabIdx].explain_receipt_time;
+				this.amountList = this.tabs[this.swiperTabIdx].priceList;
+				this.amoutType = this.tabs[this.swiperTabIdx].id;
+			},
 			/**
 			 * 提交订单
 			 */
@@ -161,6 +276,7 @@
 				if (that.inputPhone == '') {
 					uni.showToast({
 						title: '请输入充值号码',
+						duration: 2000,
 						icon: "none"
 					});
 					return;
@@ -168,6 +284,7 @@
 				if (that.inputPhone.length != 11) {
 					uni.showToast({
 						title: '请输入正确充值号码',
+						duration: 2000,
 						icon: "none"
 					});
 					return;
@@ -175,9 +292,10 @@
 				if (that.inputAmount == '') {
 					uni.showToast({
 						title: '请选择价格',
+						duration: 2000,
 						icon: "none"
 					});
-					return;
+					return false;
 				}
 				uni.showToast({
 					title: '提交订单...',
@@ -185,7 +303,7 @@
 					duration: 2000,
 					success() {
 						uni.navigateTo({
-							url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.orderPrice +
+							url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.price +
 								'&payPrice=' + that.inputAmount + '&rechargeContent=' + that.inputPhone +
 								'&rechargeModel=' + that.amoutType +
 								'&objectId=' + that.inputAmountId + '&rechargeType=' + that.swiperCurrent
@@ -199,9 +317,68 @@
 </script>
 
 <style lang="scss">
+	page {
+		background-color: #f5f5f5;
+	}
+
+	.popImg {
+		width: 100%;
+		height: 430px;
+	}
+
+	.swiperHead {
+		width: 100%;
+	}
+
+	.swiperHead scroll-view {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		white-space: nowrap;
+	}
+
+	.swiperTab {
+		display: inline-flex;
+		flex-direction: column;
+		text-align: center;
+	}
+
+	.swiperCont {
+		width: 100%;
+		padding-top: 5px;
+		padding-bottom: 20px;
+		background-color: #ffffff;
+	}
+
+	/* #ifdef H5 */
+	.swiperHead {
+		top: 44px;
+		z-index: 10;
+		width: 100%;
+		background: #FFFFFF;
+	}
+
+	/* #endif */
+
+	.swiper {
+		width: 100%;
+		height: 500rpx;
+	}
+
+	.swiperItem {
+		overflow: auto;
+		background: #ffffff;
+		color: #333333;
+		font-size: 30upx;
+	}
+
+
+
+
+
 	.block {
 		width: 94%;
-		padding: 60upx 3%;
+		padding: 15px 3%;
 
 		.my {
 			width: 80%;
@@ -224,55 +401,63 @@
 		padding: 20upx 0;
 
 		.box {
-			width: 30%;
+			width: 29%;
 			margin-left: 1%;
 			margin-right: 2%;
 			margin-top: 20upx;
+			margin-bottom: 20upx;
 			float: left;
-			height: 120upx;
+			height: 150upx;
 			// line-height: 120upx;
-			display: inline-grid;
+			// display: inline-grid;
 			justify-content: center;
 			align-items: center;
 			text-align: center;
-			box-shadow: 0upx 0upx 4upx #666666;
+			border: 1px solid #f1f1f1;
 			font-size: 36upx;
-			color: #089bf5;
+			color: #333333;
 
 			&.on {
-				background-color: #089bf5;
+				background-color: #ecf5fe;
-				color: #ffffff;
+				border: 1px solid #089bf5;
+				color: #089bf5;
 			}
 		}
 
 		.heTitle {
 			width: 100%;
-			font-size: 15px;
 		}
 	}
 
-	.bombtn {
-		position: fixed;
-		height: 45px;
-		bottom: 20px;
-		border-radius: 6px;
 
-		.payem {
+	.boxchil {
-			height: 45px;
+		border-radius: 0 0 5px 5px;
-			line-height: 45px;
+		background-color: #f0f0f0;
-			text-align: center;
+		margin-top: 6px;
-			background-color: #007AFF;
+		color: #999999;
-			color: #FFFFFF;
+
-			border-radius: 6px 0 0 6px;
+		&.on {
+			background-color: #089bf5;
+			color: #ffffff;
+		}
 	}
 
-		.paybtn {
+	.contcil {
-			height: 45px;
+		color: #999999;
-			line-height: 45px;
+
-			text-align: center;
+		&.on {
-			background-color: #F8A628;
+			// background-color: #089bf5;
-			border-radius: 0 6px 6px 0;
+			color: #089bf5;
-			color: #FFFFFF;
+		}
+	}
+
+	.right-left-scroll {
+		white-space: nowrap;
+		overflow: hidden;
+
+		.content {
+			display: inline-block;
+			color: #c1b569;
 		}
 	}
 </style>

high-unionPay/uni.scss

@@ -296,6 +296,9 @@ $uni-font-size-paragraph:30upx;
 	background: linear-gradient(to bottom, #3da7e7, #6fbdee);
 }
 
+.backcorlf5{
+	background: linear-gradient(to bottom, #3267f6, #f5f5f5);
+}
 
 .backcorf06{
 	background-color: #0083f5;
@@ -552,6 +555,10 @@ $uni-font-size-paragraph:30upx;
 .height25 {
   height: 25px;
 }
+.height25l {
+  height: 25px;
+  line-height: 25px;
+}
 
 
 .height50 {