USER-20230908AJ\Administrator 1 tahun lalu
induk
melakukan
bc72bde566

+ 19 - 8
common/task/loan-item.vue

@@ -30,26 +30,27 @@
 							</view>
 							<text class="color-FF730E">{{(item.interest_rate*1).toFixed(2)}}%</text>
 						</view>
-						<view class="row-justify-sb center">
+						<view class="row-justify-sb center" v-if="item.status === 1">
 							<text></text>
 							<view class="row-c">
 								<button
 									class="button-backgroun en_buttond left_button sys-weight-500 button_color-008FD6 size-26 r-100 m-r20"
-									type="default" hover-class="is-hover" @click="onCalculate">核算</button>
+									type="default" hover-class="is-hover" @click="onCalculate(item,1)">核算</button>
 								<button
 									class="button-background en_button left_button right_button sys-weight-500 button_color-008FD6 size-26 r-100"
-									type="default" hover-class="is-hover">客户分类</button>
+									type="default" hover-class="is-hover" @click.stop="onCalculate(item,2)">客户分类</button>
 							</view>
 						</view>
 					</view>
-					<view class="accomplish-text" :class="{'unfinished':!is_accomplish}">
-						已完成
+					<view class="accomplish-text" :class="{'unfinished':item.status === 1}">
+            {{item.status === 2?'已完成':'未完成'}}
 					</view>
 				</view>
 			</view>
 			<view class="placeholder sys-list-background-color" v-if="is_bottom && taskList.length"></view>
 		</view>
 		<en-blank v-else></en-blank>
+
 	</view>
 </template>
 
@@ -57,9 +58,11 @@
 	import EnButton from "@/components/en-utils/en-button/en-button.vue";
 	import tools from "@/service/tools";
 	import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";
+  import ClientType from "@/pages/loan/components/clientType.vue";
 
 	export default {
 		components: {
+      ClientType,
 			EnBlank,
 			EnButton
 		},
@@ -99,12 +102,20 @@
 				leftImg: ['task-house', 'task-business', 'task-repayment'],
 				iconList: ['task-audit', 'task-do', 'task-stay'],
 				lineColor: ['#EF8F27', '#DE5847', '#0FB160'],
-				isAjax: false
+				isAjax: false,
+        item:{}
 			}
 		},
 		methods: {
-			onCalculate() {
-				this.$emit('onCalculate')
+
+      moveHandle() {
+        return false
+      },
+			onCalculate(item,type) {
+				this.$emit('onCalculate',{
+          'item':item,
+          'type':type
+        })
 			},
 			makCall(phone) {
 				tools.makingCall(phone)

+ 4 - 3
components/en-utils/en-select/en-select.vue

@@ -4,13 +4,13 @@
 			<view class="icon"></view>
 			<text class="size-30 sys-weight-600">{{title}}</text>
 			<view class="icon">
-				<uni-icons :animation="animationData" class="dropdown-icon" type="closeempty" size="16"
+				<uni-icons  class="dropdown-icon" type="closeempty" size="16"
 					color="#666"></uni-icons>
 			</view>
 		</view>
 		<view class="select">
 			<scroll-view scroll-y="true" class="scroll-Y select">
-				<view id="demo1" class="scroll-view-item" :class="item.id === current?'':'active'"
+				<view id="demo1" class="scroll-view-item" :class="item[itemKey] === current?'':'active'"
 					v-for="(item,index) in localData" @click="onSelect(index)">
 					<text class="size-28">{{item[itemText]}}</text>
 				</view>
@@ -67,7 +67,8 @@
 				this.$emit('setAffirm', type)
 			},
 			onSelect(index) {
-				this.current = index
+        console.log(index)
+				this.current = this.localData[index][this.itemKey]
 				this.newValue = this.localData[index][this.itemKey]
 				this.$emit('input', this.newValue)
 			}

+ 186 - 0
pages/loan/components/clientType.vue

@@ -0,0 +1,186 @@
+<template>
+  <view class="task-set">
+    <EnSelect title="用户分类" v-model="type" :local-data="popupData" ref="system" item-key="value" item-text="text"
+              @setAffirm="submit"></EnSelect>
+  </view>
+</template>
+
+<script>
+import {getClientType, setClientType} from "@/api/client";
+import EnSelect from "@/components/en-utils/en-select/en-select.vue";
+import tools from "@/service/tools";
+
+export default {
+  name: "clientType",
+  components: {EnSelect},
+  props: {
+    'clientId':{
+      default:''
+    }
+  },
+  data() {
+    return {
+      showExecute:false,
+      popupData:[],
+      type:'',
+      typeName:'',
+    }
+  },
+  watch: {},
+
+  mounted() {
+      this.getClientType()
+  },
+  methods: {
+    getClientType(){
+      getClientType().then((res)=>{
+        if(res.code===1){
+          this.popupData=res.data
+        }
+        console.log(this.popupData)
+      })
+    },
+
+
+    setNewExecute(e) {
+      //设置新执行人
+      console.log(e)
+      let newData = e.detail.value[0]
+      this.type = newData.value
+      this.typeName = newData.text
+    },
+    submit(){
+      setClientType({'clientId':this.clientId,'type':this.type}).then((res)=>{
+        if(res.code===1){
+          tools.success(res.msg)
+          this.$emit('endTaskSet')
+        }else {
+          tools.error(res.msg)
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.task-set {
+  width: 100%;
+  min-height: 50vh;
+  max-height: 70vh;
+  background: #F6F7FB;
+  overflow: auto;
+  border-radius: 20rpx 20rpx 0rpx 0rpx;
+  .nav {
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+    padding: 30rpx 0 15rpx;
+    background: #fff;
+  }
+  .task-tab{
+    display: flex;
+    justify-content: space-between;
+    height: 88rpx;
+    .tab-item{
+      width: 50%;
+      height: 100%;
+      font-size: 14px;
+      color: #333333;
+      line-height: 88rpx;
+      text-align: center;
+      background: #fff;
+      border: 2rpx solid #3169FA;
+      box-sizing: border-box;
+    }
+    .tab-select{
+      background: #3169FA;
+      color: #FFFFFF;
+      border:none;
+    }
+  }
+
+  .content {
+    width: 100%;
+    height: auto;
+    padding: 22rpx 0 106rpx 0;
+
+    .choose-box {
+      width: 100%;
+      height: auto;
+      padding: 34rpx 35rpx;
+      box-sizing: border-box;
+      background: #fff;
+      border-top: 1px solid #F0F0F0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .choose-box-left {
+        font-size: 16px;
+        color: #666666;
+      }
+
+      .choose-box-right {
+        display: flex;
+        align-items: center;
+
+        .choose-box-right-content {
+          font-size: 16px;
+          font-weight: 400;
+          color: #232A35;
+          margin: 0 18rpx 0 0;
+        }
+
+        .choose-box-right-img {
+          width: 12rpx;
+          height: 20rpx;
+        }
+      }
+    }
+
+    .choose-box-stage{
+      background: #fff;
+      padding: 0 22rpx;
+      margin-bottom: 22rpx;
+    }
+
+    .choose-box-two {
+      margin: 0 0 22rpx 0;
+    }
+
+
+  }
+
+  .submit-box {
+    width: 100%;
+    height: auto;
+    border-top: 1px solid #F0F0F0;
+    background: #fff;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    padding: 12rpx 32rpx;
+    box-sizing: border-box;
+
+    .submit {
+      width: 100%;
+      height: auto;
+      background: #3169FA;
+      border-radius: 4px;
+      font-size: 16px;
+      color: #FFFFFF;
+      padding: 20rpx 0;
+      text-align: center;
+    }
+  }
+  .operate-box{
+    .content-box {
+      margin-top: 20rpx;
+      height: auto;
+      padding: 0 20rpx;
+      background: #fff;
+    }
+  }
+}
+</style>

+ 0 - 71
pages/loan/components/column-item.vue

@@ -1,71 +0,0 @@
-<template>
-	<view class="" :class="is_center?'column-center':'column-box'">
-		<view class="m-t30">
-			<text class="center-text">8万</text>
-			<view class="text">贷款金额</view>
-		</view>
-		<view class="m-t30">
-			<text class="center-text">23.76%</text>
-			<view class="text">年利率</view>
-		</view>
-		<view class="m-t30">
-			<text class="center-text">8万</text>
-			<view class="text">贷款期数</view>
-		</view>
-		<view class="m-t30">
-			<text class="center-text">8万</text>
-			<view class="text">每期还款金额</view>
-		</view>
-		<view class="m-t30">
-			<text class="center-text">8万</text>
-			<view class="text">总利息</view>
-		</view>
-		<view class="m-t30">
-			<text class="center-text">8万</text>
-			<view class="text">总还款金额</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: {
-			is_center: {
-				type: Boolean,
-				default: false
-			}
-		},
-		data() {
-			return {}
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.column-box {
-		color: #333;
-		font-size: 28rpx;
-
-		.text {
-			color: #666;
-			font-size: 24rpx;
-			padding-top: 6rpx;
-		}
-	}
-
-	.column-center {
-		color: #333;
-		font-size: 28rpx;
-
-		.center-text {
-			color: #F91517;
-			font-weight: 600;
-		}
-
-		.text {
-			color: #666;
-			font-size: 24rpx;
-			padding-top: 6rpx;
-		}
-	}
-</style>

+ 50 - 17
pages/loan/loan.vue

@@ -21,25 +21,34 @@
 					<view class="row-justify-sb center p-lr30 p-t30">
 						<view class="wh-25"></view>
 						<text class="size-30 sys-weight-600">核算年利率</text>
-						<image class="wh-25" src="/page_task/static/img/task-details/close.png" mode="aspectFill"
+						<image class="wh-25" src="https://wealfavor-1257406827.cos.ap-beijing.myqcloud.com/new-xcx/task-details/close.png" mode="aspectFill"
 							@click="onClose">
 						</image>
 					</view>
 					<view class="p-30 size-28 m-b50">
 						<view class="">
-							<text>当前年利率</text><text class="sys-weight-600 color-FF730E m-l10">23.7%</text>
+							<text>当前年利率</text><text class="sys-weight-600 color-FF730E m-l10">{{(loanItem.interest_rate*1).toFixed(2)}}%</text>
 						</view>
 						<view class="row-justify-sb center r-10 sys-from-background-color p-30 m-t30">
-							<input class="flex" type="text" placeholder="请输入新年利率" />
+							<input class="flex" type="text" placeholder="请输入新年利率" v-model="loanItem.new_rate" />
 							<text class="text-color-12">%</text>
 						</view>
 					</view>
-					<EnButton text="确认核算" @onSubmit=""></EnButton>
+					<EnButton text="确认核算" @onSubmit="setComputation"></EnButton>
 				</view>
 			</uni-popup>
 		</view>
-		<EnButton :is_both="1" leftText="利率对比" rightText="完善贷后" @onLeftSubmit="onRateCompare" @onSubmit="onPerfectRate">
-		</EnButton>
+<!--		<EnButton :is_both="1" leftText="利率对比" rightText="完善贷后" @onLeftSubmit="onRateCompare" @onSubmit="onPerfectRate">-->
+<!--		</EnButton>-->
+
+    <uni-popup background-color="#fff" ref="clientPopup" type="bottom" border-radius="10px"
+               @touchmove.stop.prevent="moveHandle">
+      <view >
+        <client-type :client-id="loanItem.client_id" @endTaskSet="onClose"></client-type>
+      </view>
+
+    </uni-popup>
+
 	</view>
 
 </template>
@@ -50,9 +59,14 @@
 		getLoanList
 	} from "@/api/task";
 	import tools from "@/service/tools";
+  import loanItem from "@/common/task/loan-item.vue";
+  import EnSelect from "@/components/en-utils/en-select/en-select.vue";
+  import ClientType from "@/pages/loan/components/clientType.vue";
 
 	export default {
 		components: {
+      ClientType,
+      EnSelect,
 			LoanItem
 		},
 		data() {
@@ -62,14 +76,14 @@
 					name: '全部',
 					disabled: false
 				}, {
-					name: '已完成(6)',
+          name: '未完成(0)',
+          dot_color: 'red',
+          is_dot: false,
+          disabled: false
+        }, {
+					name: '已完成',
 					dot_color: 'red',
-					is_dot: true,
-					disabled: false
-				}, {
-					name: '未完成(6)',
-					dot_color: '#000',
-					is_dot: true,
+					is_dot: false,
 					disabled: false
 				}],
 				searchText: "",
@@ -85,6 +99,12 @@
 				},
 				total: 0,
 				list: [],
+        loanItem:{
+          interest_rate:0,
+          id:0,
+          new_rate:'',
+          client_id:'',
+        }
 			}
 		},
 		watch: {
@@ -100,6 +120,8 @@
 					if (res.code === 1) {
 						this.list = [...this.list, ...res.data.items]
 						this.total = res.data.total
+            this.tabsList[1].name='未完成('+res.data.noNum+')'
+            this.tabsList[1].is_dot = res.data.noNum > 0;
 					} else {
 						tools.error(res.msg)
 					}
@@ -135,9 +157,11 @@
 				}, 1000)
 				console.log("到底部了");
 			},
-			onRateCompare() {
+      setComputation() {
 				uni.navigateTo({
-					url: "/pages/loan/module/rate_compare"
+					url: "/pages/loan/module/rate_compare?loanId=" + this.loanItem.id
+              + '&interestRate=' + this.loanItem.interest_rate
+              + '&newInterestRate=' + this.loanItem.new_rate
 				})
 			},
 			onPerfectRate() {
@@ -145,11 +169,20 @@
 					url: "/pages/loan/module/perfect_rate"
 				})
 			},
-			onCalculate() {
-				this.$refs.popup.open('bottom')
+			onCalculate(data) {
+        this.loanItem.id=data.item.id
+        if(data.type===1){
+          this.loanItem.interest_rate=data.item.interest_rate
+          this.$refs.popup.open('bottom')
+        }else {
+          this.loanItem.client_id=data.item.client_id
+          this.$refs.clientPopup.open('bottom')
+        }
+
 			},
 			onClose() {
 				this.$refs.popup.close('bottom')
+				this.$refs.clientPopup.close('bottom')
 			},
 			moveHandle() {
 				return false

+ 196 - 14
pages/loan/module/rate_compare.vue

@@ -4,20 +4,20 @@
 		<view class="m-20 text-color-12">
 			<view class="sys-background-fff p-30 r-30">
 				<view class="center">
-					<image class="wh-60" src="/static/img/task/task-else.png" mode="aspectFill"></image>
-					<text class="size-28 sys-weight-600 m-l20">垫资还款</text>
+					<image class="wh-60" :src="businesses.product_icon" mode="aspectFill"></image>
+					<text class="size-28 sys-weight-600 m-l20">{{businesses.product_name||''}}</text>
 				</view>
 				<view class="row-justify-sb center sys-from-background-color p-tb30 p-lr40 r-30 m-t30">
 					<view class="column-c">
-						<view class="size-26 m-b10">张三</view>
+						<view class="size-26 m-b10">{{businesses.name||''}}</view>
 						<text class="size-24 text-color-666">贷款人姓名</text>
 					</view>
 					<view class="column-c">
-						<view class="size-26 m-b10">{{hidePhone('17717888888')}}</view>
+						<view class="size-26 m-b10">{{hidePhone(businesses.phone)||''}}</view>
 						<text class="size-24 text-color-666">联系方式</text>
 					</view>
 					<view class="column-c">
-						<view class="size-26 m-b10">2024-08-08</view>
+						<view class="size-26 m-b10">{{businesses.created_date||''}}</view>
 						<text class="size-24 text-color-666">申请时间</text>
 					</view>
 				</view>
@@ -26,26 +26,102 @@
 				<view class="container">
 					<view class="box left-box">
 						<text class="title">核算前年利率</text>
-						<text class="number">23.27%</text>
+						<text class="number">{{(loan.interest_rate*1).toFixed(2)}}%</text>
 					</view>
 					<view class="box middle-box">
 						<text class="title">差值</text>
-						<text class="number">5.76%</text>
+						<text class="number">{{(loan.interest_rate-newLoan.interest_rate).toFixed(2)}}%</text>
 					</view>
 					<view class="box right-box">
 						<text class="title">核算后年利率</text>
-						<text class="number">18.00%</text>
+						<text class="number">{{(newLoan.interest_rate*1).toFixed(2)}}%</text>
 					</view>
 				</view>
 				<view class="p-lr30 flex row-justify-sb">
 					<view class="list-item">
-						<ColumnItem></ColumnItem>
+            <view class="column-box" >
+              <view class="m-t30">
+                <text class="center-text">{{(loan.loans_money/10000).toFixed(2)}}万</text>
+                <view class="text">贷款金额</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(loan.interest_rate*1).toFixed(2)}}%</text>
+                <view class="text">年利率</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{loan.refund_num-loan.residue_num||0}}/{{loan.refund_num||0}}</text>
+                <view class="text">贷款期数</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(loan.repayment_money*1).toFixed(2)}}元</text>
+                <view class="text">每期还款金额</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(newLoan.repayment_money*1).toFixed(2)}}元</text>
+                <view class="text">总利息</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">	{{(loan.totalMoney>=1000?loan.totalMoney/10000:loan.totalMoney*1).toFixed(2)}}{{loan.totalMoney>=10000?'万元':'元'}}</text>
+                <view class="text">总还款金额</view>
+              </view>
+            </view>
 					</view>
 					<view class="list-item">
-						<ColumnItem is_center></ColumnItem>
+
+            <view class=" column-center" >
+              <view class="m-t30">
+                <text class="center-text">0.00万</text>
+                <view class="text">贷款金额</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(loan.interest_rate-newLoan.interest_rate).toFixed(2)}}%</text>
+                <view class="text">年利率</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{loan.refund_num-loan.residue_num||0}}/{{loan.refund_num||0}}</text>
+                <view class="text">贷款期数</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(loan.repayment_money-newLoan.repayment_money).toFixed(2)}}元</text>
+                <view class="text">每期还款金额</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(loan.interestMoney-newLoan.interestMoney).toFixed(2)}}元</text>
+                <view class="text">总利息</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(loan.totalMoney-newLoan.totalMoney).toFixed(2)}}元</text>
+                <view class="text">总还款金额</view>
+              </view>
+            </view>
 					</view>
 					<view class="list-item">
-						<ColumnItem></ColumnItem>
+            <view class="column-box" >
+              <view class="m-t30">
+                <text class="center-text">{{(loan.loans_money/10000).toFixed(2)}}</text>
+                <view class="text">贷款金额</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(newLoan.interest_rate*1).toFixed(2)}}%</text>
+                <view class="text">年利率</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{loan.refund_num-loan.residue_num||0}}/{{loan.refund_num||0}}</text>
+                <view class="text">贷款期数</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(newLoan.repayment_money*1).toFixed(2)}}元</text>
+                <view class="text">每期还款金额</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(newLoan.interestMoney).toFixed(2)}}元</text>
+                <view class="text">总利息</view>
+              </view>
+              <view class="m-t30">
+                <text class="center-text">{{(newLoan.totalMoney>=1000?newLoan.totalMoney/10000:newLoan.totalMoney*1).toFixed(2)}}{{newLoan.totalMoney>=10000?'万元':'元'}}</text>
+                <view class="text">总还款金额</view>
+              </view>
+            </view>
 					</view>
 				</view>
 			</view>
@@ -55,17 +131,96 @@
 
 <script>
 	import tools from "@/service/tools";
-	import ColumnItem from "../components/column-item.vue"
+  import {getAdjust} from "@/api/task";
 
 	export default {
 		components: {
-			ColumnItem
+
 		},
 		data() {
-			return {}
+			return {
+        loanId: '',
+        interest_rate: 0,
+        new_interest_rate: '',
+        loan: {
+          loans_money: 0,
+          repayment_money: 0,
+          interest_rate: 0,
+          residue_num: 0,
+          refund_num: 0,
+          totalMoney: 0,
+          interestMoney: 0,
+        },
+        businesses: {},
+        newLoan: {
+          loans_money: 0,
+          repayment_money: 0,
+          interest_rate: 0,
+          residue_num: 0,
+          refund_num: 0,
+          totalMoney: 0,
+          interestMoney: 0,
+        },
+      }
 		},
+    onLoad(e) {
+      this.interest_rate = e.interestRate * 1;
+      this.new_interest_rate = e.newInterestRate * 1;
+      this.loanId = e.loanId
+      getAdjust({
+        loanId: this.loanId
+      }).then((res) => {
+        if (res.code === 1) {
+          this.loan = res.data.loan
+          this.businesses = res.data.businesses
+          console.log(this.loan)
+          if (this.loan.repayment_type === 3) {
+            this.loan.totalMoney = ((this.loan.refund_num * this.loan.repayment_money + this.loan
+                .loans_money * 1).toFixed(2));
+          } else {
+            this.loan.totalMoney = (this.loan.refund_num * this.loan.repayment_money).toFixed(2);
+          }
+          this.loan.interestMoney = this.loan.totalMoney - this.loan.loans_money
+          console.log(this.loan)
+          this.setNewLoan()
+        }
+      })
+    },
 		methods: {
+      setNewLoan() {
+        console.log(this.loan)
+        let newLoan = {
+          loans_money: this.loan.loans_money,
+          totalMoney: this.loan.totalMoney,
+          interestMoney: this.loan.interestMoney,
+          interest_rate: this.new_interest_rate,
+          refund_num: this.loan.refund_num,
+          residue_num: this.loan.residue_num,
+          repayment_money: this.loan.repayment_money,
+        };
+        console.log(newLoan)
+        if (this.loan.repayment_type === 1) {
+          newLoan.repayment_money = tools.getAverageCapitalPlusInterest(newLoan.loans_money, newLoan.refund_num,newLoan.interest_rate)
+        } else if (this.loan.repayment_type === 2) {
+          newLoan.repayment_money = tools.getAverageCapital(newLoan.loans_money, newLoan.refund_num, newLoan.interest_rate)
+        } else {
+          newLoan.repayment_money = tools.getInterestFirst(newLoan.loans_money, newLoan.interest_rate)
+        }
+        newLoan.repayment_money *= 1;
+        if (this.loan.repayment_type === 3) {
+          newLoan.totalMoney = newLoan.refund_num * newLoan.repayment_money + newLoan.loans_money * 1;
+        } else {
+          console.log(newLoan.refund_num * newLoan.repayment_money)
+          newLoan.totalMoney = newLoan.refund_num * newLoan.repayment_money;
+        }
+        newLoan.interestMoney = newLoan.totalMoney - newLoan.loans_money
+        this.newLoan = newLoan
+      },
 			hidePhone(phone) {
+        console.log(phone)
+        if(!phone){
+          return ''
+        }
 				return tools.hidePhone(phone)
 			}
 		}
@@ -152,4 +307,31 @@
 	.right-box::before {
 		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
 	}
+
+  .column-box {
+    color: #333;
+    font-size: 28rpx;
+
+    .text {
+      color: #666;
+      font-size: 24rpx;
+      padding-top: 6rpx;
+    }
+  }
+
+  .column-center {
+    color: #333;
+    font-size: 28rpx;
+
+    .center-text {
+      color: #F91517;
+      font-weight: 600;
+    }
+
+    .text {
+      color: #666;
+      font-size: 24rpx;
+      padding-top: 6rpx;
+    }
+  }
 </style>