dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端

Browse Source
This commit is contained in:
@QQNZX 2024-03-05 16:19:58 +08:00
parent d0707345f5
commit 05b5cc40b2
3 changed files with 267 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
fuintAdmin/src/api/EventMarketing/yijian.js
View File

@ -23,6 +23,32 @@ export function getCardFavorable(id) {
}) })
} }
export function updetaCardFavorable(data) {
return request({
url: 'business/marketingActivity/oneActiveOneCoupon',
method: 'put',
data:data
})
}
export function deleteCardFavorable(id) {
return request({
url: 'business/marketingActivity/oneActiveOneCoupon/delById/'+id,
method: 'delete',
})
}
export function postyijian(data) {
return request({
url: 'business/marketingActivity/cardFavorableRecord/issueCardFavorable',
method: 'post',
data:data
})
}
export function getAdaptUserList(data) { export function getAdaptUserList(data) {
return request({ return request({

31
fuintAdmin/src/views/EventMarketing/giftBlock/index.vue
View File

@ -182,27 +182,27 @@
<el-table-column <el-table-column
prop="number" prop="number"
label="电子礼品卡号" label="电子礼品卡号"
width="210"> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="cardAmount" prop="cardAmount"
label="面值" label="面值"
width="180"> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="effectiveTimeStart" prop="effectiveTimeStart"
label="使用时间" label="使用时间"
width="220"> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="sailTime" prop="sailTime"
label="售出时间" label="售出时间"
width="180"> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="status" prop="status"
label="礼品卡状态" label="礼品卡状态"
width="120"> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-switch <el-switch
@ -222,13 +222,13 @@
<el-table-column <el-table-column
prop="createTime" prop="createTime"
label="创建时间" label="创建时间"
width="220"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="effectiveTimeStart" prop="effectiveTimeStart"
label="有效期" label="有效期"
width="220"
> >
<template slot-scope="scope"> <template slot-scope="scope">
@ -239,9 +239,22 @@
<el-table-column <el-table-column
prop="createBy" prop="createBy"
label="操作员" label="操作员"
width="220"
> >
</el-table-column> </el-table-column>
<el-table-column
prop="address"
label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="yj(scope.row)"
>售卡</el-button>
</template>
</el-table-column>
<!-- <el-table-column <!-- <el-table-column
prop="remark" prop="remark"
label="备注信息" label="备注信息"
@ -410,7 +423,7 @@ import {
// 下载 // 下载
handleChange(file, fileList) { handleChange(file, fileList) {
this.uploading = true; this.uploading = true;
console.log(file,111) console.log(file)
if(file.status === 'success'){ if(file.status === 'success'){
this.uploading = false; this.uploading = false;
this.openUpload = false; this.openUpload = false;

290
fuintAdmin/src/views/EventMarketing/yijiancoupon/index.vue
View File

@ -2,15 +2,13 @@
<div class="app-container"> <div class="app-container">
<el-card style="margin-bottom: 20px"> <el-card style="margin-bottom: 20px">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
<el-form-item label="券状态" prop="name"> <el-form-item label="活动名称" prop="name">
<el-select v-model="status" clearable placeholder="请选择"> <el-input
<el-option v-model="queryParams.name"
v-for="item in options" placeholder="请输入活动名称"
:key="item.value" clearable
:label="item.label" @keyup.enter.native="handleQuery"
:value="item.value"> />
</el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
@ -81,8 +79,24 @@
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
@click="updated(scope.row)" @click="yj(scope.row)"
>一键发券</el-button>
<el-button
size="mini"
type="text"
@click="lookDetail(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text"
@click="handleUpdate(scope.row)"
>修改</el-button> >修改</el-button>
<el-button
size="mini"
type="text"
@click="handleDelete(scope.row)"
>删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -100,16 +114,16 @@
<el-form ref="form" :model="form" :rules="rules" :label-position="labelPosition" label-width="110px"> <el-form ref="form" :model="form" :rules="rules" :label-position="labelPosition" label-width="110px">
<el-form-item label="活动名称" prop="activeName"> <el-form-item label="活动名称" prop="activeName">
<el-input v-model="activeName" placeholder="请输入活动名称" /> <el-input v-model="form.activeName" placeholder="请输入活动名称" />
</el-form-item> </el-form-item>
<el-form-item label="会员等级" prop="" > <el-form-item label="会员等级" prop="" >
<el-select v-model="gradeIds" multiple clearable placeholder="会员等级" @change="change"> <el-select v-model="form.gradeIds" multiple clearable placeholder="会员等级" @change="change">
<el-option :label="item.name" :value="item.id.toString()" v-for="(item,index) in userGradeList" :key="index" > </el-option> <el-option :label="item.name" :value="item.id.toString()" v-for="(item,index) in userGradeList" :key="index" > </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="不活跃用户" prop=""> <el-form-item label="不活跃用户" prop="">
<div style="display: flex;align-items: center"> <div style="display: flex;align-items: center">
<el-input-number v-model="days" :min="1" :max="999" label="描述文字"></el-input-number> <el-input-number v-model="form.days" :min="1" :max="999" label="描述文字"></el-input-number>
<div style="margin-left: 5px">天 <span style="color: red">(查找最近N天未进行消费的用户)</span> </div> <div style="margin-left: 5px">天 <span style="color: red">(查找最近N天未进行消费的用户)</span> </div>
</div> </div>
</el-form-item> </el-form-item>
@ -150,18 +164,18 @@
border border
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
prop="giftCardName" prop="name"
label="卡券名称" label="卡券名称"
> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="giftCardType" prop="type"
label="券类型" label="券类型"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.giftCardType == 0" >油品券</span> <span v-if="scope.row.type == 0" >油品券</span>
<span v-if="scope.row.giftCardType == 1" >商品券</span> <span v-if="scope.row.type == 1" >商品券</span>
<span v-if="scope.row.giftCardType == 2" >通用券</span> <span v-if="scope.row.type == 2" >通用券</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -169,7 +183,7 @@
label="券详情" label="券详情"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.giftCardDetail}}</span> <span>{{scope.row.cardDetail}}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -182,14 +196,14 @@
<span v-if="scope.row.timeType == 2" > <el-input-number v-model="scope.row.validityTwo" controls-position="right" size="mini" :min="1" :max="9999"></el-input-number></span> <span v-if="scope.row.timeType == 2" > <el-input-number v-model="scope.row.validityTwo" controls-position="right" size="mini" :min="1" :max="9999"></el-input-number></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <!-- <el-table-column-->
prop="date" <!-- prop="date"-->
label="数量" <!-- label="数量"-->
> <!-- >-->
<template slot-scope="scope"> <!-- <template slot-scope="scope">-->
<el-input-number v-model="scope.row.giftCardTotal" controls-position="right" size="mini" :min="1" :max="9999"></el-input-number> <!-- <el-input-number v-model="scope.row.giftCardTotal" controls-position="right" size="mini" :min="1" :max="9999"></el-input-number>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
<el-table-column <el-table-column
prop="address" prop="address"
@ -216,7 +230,7 @@
border border
style="width: 100%"> style="width: 100%">
<el-table-column <el-table-column
prop="giftCardName" prop="name"
label="卡券名称" label="卡券名称"
> >
</el-table-column> </el-table-column>
@ -225,9 +239,9 @@
label="券类型" label="券类型"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.giftCardType == 0" >油品券</span> <span v-if="scope.row.type == 0" >油品券</span>
<span v-if="scope.row.giftCardType == 1" >商品券</span> <span v-if="scope.row.type == 1" >商品券</span>
<span v-if="scope.row.giftCardType == 2" >通用券</span> <span v-if="scope.row.type == 2" >通用券</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
@ -235,7 +249,7 @@
label="券详情" label="券详情"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.giftCardDetail}}</span> <span>{{scope.row.cardDetail}}</span>
<!-- <span>满{{scope.row.fullDeduction}}减 {{scope.row.discountAmount}}元 </span>--> <!-- <span>满{{scope.row.fullDeduction}}减 {{scope.row.discountAmount}}元 </span>-->
</template> </template>
</el-table-column> </el-table-column>
@ -244,22 +258,21 @@
label="有效期（天）" label="有效期（天）"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<span > <el-input-number v-model="scope.row.giftCardTime" controls-position="right" size="mini" :min="1" :max="9999"></el-input-number> </span> <span > <el-input-number v-model="scope.row.validity" controls-position="right" size="mini" :min="1" :max="9999"></el-input-number> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <!-- <el-table-column-->
prop="date" <!-- prop="date"-->
label="数量" <!-- label="数量"-->
> <!-- >-->
<template slot-scope="scope"> <!-- <template slot-scope="scope">-->
<el-input-number v-model="scope.row.giftCardTotal" controls-position="right" size="mini" :min="1" :max="9999"></el-input-number> <!-- <el-input-number v-model="scope.row.giftCardTotal" controls-position="right" size="mini" :min="1" :max="9999"></el-input-number>-->
</template> <!-- </template>-->
</el-table-column> <!-- </el-table-column>-->
<el-table-column <el-table-column
prop="address" prop="address"
label="操作" label="操作"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
@ -281,6 +294,50 @@
<!-- 最终提交--> <!-- 最终提交-->
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
</div> </div>
</el-dialog>
<el-dialog title="详情统计" :visible.sync="opendetails" width="45%" append-to-body>
<div style="display: flex;justify-content: space-between;width: 100%;">
<div class="x-box">
<div>优惠券数量统计</div>
<div>总数量: {{statisticsyou.count ||0}}</div>
<div>已使用数量: {{statisticsyou.countEd ||0}}</div>
<div>未使用数量: {{statisticsyou.countLd ||0}}</div>
</div>
<div class="x-box">
<div>兑换券数量统计</div>
<div>总数量: {{statisticsyou.counts ||0}}</div>
<div>已使用数量: {{statisticsyou.countEds ||0}}</div>
<div>未使用数量: {{statisticsyou.countLds ||0}}</div>
</div>
</div>
<el-table
:data="looklist"
style="width: 100%">
<el-table-column
prop="name"
label="昵称"
>
</el-table-column>
<el-table-column
prop="mobile"
label="联系方式"
>
</el-table-column>
<el-table-column
prop="createTime"
label="领取日期"
>
</el-table-column>
<el-table-column
prop="exchangeFrom"
label="获取方式"
>
</el-table-column>
</el-table>
</el-dialog> </el-dialog>
<el-dialog title="优惠券列表" :visible.sync="dialogTableVisible"> <el-dialog title="优惠券列表" :visible.sync="dialogTableVisible">
<div style="display: flex;align-items: center; margin-bottom: 20px "> <div style="display: flex;align-items: center; margin-bottom: 20px ">
@ -294,12 +351,12 @@
<el-table-column <el-table-column
prop="name" prop="name"
label="卡券名称" label="卡券名称"
width="100"> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="date" prop="date"
label="券类型" label="券类型"
width="100"> >
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.type == 0" >油品券</span> <span v-if="scope.row.type == 0" >油品券</span>
<span v-if="scope.row.type == 1" >商品券</span> <span v-if="scope.row.type == 1" >商品券</span>
@ -309,7 +366,7 @@
<el-table-column <el-table-column
prop="date" prop="date"
label="券详情" label="券详情"
width="100"> >
<template slot-scope="scope"> <template slot-scope="scope">
<span>满{{scope.row.satisfiedAmount}}减 {{scope.row.discountAmount}}元 </span> <span>满{{scope.row.satisfiedAmount}}减 {{scope.row.discountAmount}}元 </span>
</template> </template>
@ -317,7 +374,7 @@
<el-table-column <el-table-column
prop="date" prop="date"
label="有效期（天）" label="有效期（天）"
width="180"> >
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.timeType == 0" >{{scope.row.validityZero}} </span> <span v-if="scope.row.timeType == 0" >{{scope.row.validityZero}} </span>
<span v-if="scope.row.timeType == 1" >{{scope.row.validityOne}} </span> <span v-if="scope.row.timeType == 1" >{{scope.row.validityOne}} </span>
@ -360,12 +417,12 @@
<el-table-column <el-table-column
prop="name" prop="name"
label="卡券名称" label="卡券名称"
width="100"> >
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="date" prop="date"
label="券类型" label="券类型"
width="100"> >
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.type == 0" >油品券</span> <span v-if="scope.row.type == 0" >油品券</span>
<span v-if="scope.row.type == 1" >商品券</span> <span v-if="scope.row.type == 1" >商品券</span>
@ -375,7 +432,7 @@
<el-table-column <el-table-column
prop="date" prop="date"
label="使用说明" label="使用说明"
width="100"> >
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{scope.row.useInstructions}}</span> <span>{{scope.row.useInstructions}}</span>
</template> </template>
@ -383,7 +440,7 @@
<el-table-column <el-table-column
prop="date" prop="date"
label="有效期（天）" label="有效期（天）"
width="180"> >
<template slot-scope="scope"> <template slot-scope="scope">
<span >{{scope.row.validity}} </span> <span >{{scope.row.validity}} </span>
</template> </template>
@ -414,14 +471,29 @@
</template> </template>
<script> <script>
import { getoiltype,getoilName, listActiveConsumption,listExchange,listLJGoods, getActiveConsumption, delActiveConsumption, addActiveConsumption, updateActiveConsumption,listFavorable } from "@/api/EventMarketing/activeConsumption"; import {
import {issueCardFavorable,getCardFavorableLists,getAdaptUserList,getCardFavorable} from "@/api/EventMarketing/yijian"; getoiltype,
getoilName,
listActiveConsumption,
listExchange,
listLJGoods,
getActiveConsumption,
delActiveConsumption,
addActiveConsumption,
updateActiveConsumption,
listFavorable,
looklook, looklooklook
} from "@/api/EventMarketing/activeConsumption";
import {issueCardFavorable,getCardFavorableLists,getAdaptUserList,getCardFavorable,updetaCardFavorable,deleteCardFavorable,postyijian} from "@/api/EventMarketing/yijian";
import {listUserGrade} from "@/api/staff/user/usergrade"; import {listUserGrade} from "@/api/staff/user/usergrade";
export default { export default {
name: "ActiveConsumption", name: "ActiveConsumption",
data() { data() {
return { return {
opendetails:false,
looklist:[],
statisticsyou:{},
options:[ options:[
{ {
value: 0, value: 0,
@ -528,7 +600,7 @@ export default {
// 表单参数 // 表单参数
form: {}, form: {},
cardFavorableIds:[], cardFavorableIds:[],
activeName:'',
gradeIds:[], gradeIds:[],
days:15, days:15,
// 表单校验 // 表单校验
@ -586,6 +658,39 @@ export default {
this.listUserGrade() this.listUserGrade()
}, },
methods: { methods: {
lookDetail(row){
this.opendetails = true
let data = {
id:row.id
}
looklook(data).then(res=>{
if(res.data){
this.looklist = res.data
}
console.log('详情',res)
})
looklooklook(row.id).then(resp=>{
if( resp.data){
this.statisticsyou = resp.data
}
console.log('优惠券详情统计',resp)
})
},
// 一键发券
yj(row){
let data = {
activeId:row.id
}
postyijian(data).then(res=>{
console.log(res)
})
},
updated(row){ updated(row){
getCardFavorable(row.id).then(res=>{ getCardFavorable(row.id).then(res=>{
console.log(res) console.log(res)
@ -717,13 +822,13 @@ export default {
goodsName:"" , //商品名称 goodsName:"" , //商品名称
goodsTotal: "", //商品数量 goodsTotal: "", //商品数量
vouchersId:row.id, //券id vouchersId:row.id, //券id
giftCardName:row.name, //赠送卡券名称 name:row.name, //赠送卡券名称
giftCardType: row.type, //券类型 type: row.type, //券类型
validityZero: null, validityZero: null,
validityOne: null, validityOne: null,
validityTwo:null, validityTwo:null,
validity:row.validity, validity:row.validity,
giftCardDetail: row.useInstructions , //券详情 cardDetail: row.useInstructions , //券详情
giftCardTime: row.validity, //券有效期 giftCardTime: row.validity, //券有效期
giftCardTotal: 1 //券数量 giftCardTotal: 1 //券数量
} }
@ -734,8 +839,6 @@ export default {
// 优惠券列表选择 // 优惠券列表选择
chosedata(row){ chosedata(row){
this.dialogTableVisible = false this.dialogTableVisible = false
if( this.cardFavorableIds.indexOf(row.id)>-1 ){ if( this.cardFavorableIds.indexOf(row.id)>-1 ){
this.$message.error("该优惠卡券已存在") this.$message.error("该优惠卡券已存在")
return return
@ -748,13 +851,13 @@ export default {
goodsName:"" , //商品名称 goodsName:"" , //商品名称
goodsTotal: "", //商品数量 goodsTotal: "", //商品数量
vouchersId:row.id, //券id vouchersId:row.id, //券id
giftCardName:row.name, //赠送卡券名称 name:row.name, //赠送卡券名称
giftCardType: row.type, //券类型 type: row.type, //券类型
timeType: row.timeType, timeType: row.timeType,
validityZero: row.validityZero, validityZero: row.validityZero,
validityOne: row.validityOne, validityOne: row.validityOne,
validityTwo:row.validityTwo, validityTwo:row.validityTwo,
giftCardDetail: "满"+ row.satisfiedAmount+"减 "+row.discountAmount+"元" , //券详情 cardDetail: "满"+ row.satisfiedAmount+"减 "+row.discountAmount+"元" , //券详情
giftCardTime: "", //券有效期 giftCardTime: "", //券有效期
giftCardTotal: 1//券数量 giftCardTotal: 1//券数量
} }
@ -829,6 +932,9 @@ export default {
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.form = {
activeName : null,
gradeIds:null,
condition:null,
id: null, id: null,
chainStorId: null, chainStorId: null,
storeId: null, storeId: null,
@ -892,13 +998,25 @@ export default {
/** 修改按钮操作 */ /** 修改按钮操作 */
handleUpdate(row) { handleUpdate(row) {
this.reset(); // this.reset();
const id = row.id || this.ids const id = row.id || this.ids
getActiveConsumption(id).then(response => { getCardFavorable(id).then(response => {
this.form = response.data; this.form = response.data;
this.form.tableDatas = response.data.activeConsumptionChildList.filter(item => item.activeGift == '1') this.form.gradeIds = response.data.gradeIds
this.tableDatas = response.data.activeConsumptionChildList.filter(item => item.activeGift == '2') this.form.days = response.data.condition,
this.form.shiwudata = response.data.activeConsumptionChildList.filter(item => item.activeGift == '4') this.cardFavorableIds = response.data.cardFavorableIds
this.pddhidlist = response.data.cardExchangeIds
if(response.data.cardExchangeList){
this.tableDatas = response.data.cardExchangeList
}
if(response.data.cardFavorableList){
this.form.tableDatas = response.data.cardFavorableList
}
console.log( 'x', this.form)
// this.form.tableDatas = response.data.activeConsumptionChildList.filter(item => item.activeGift == '1')
// this.tableDatas = response.data.activeConsumptionChildList.filter(item => item.activeGift == '2')
// this.form.shiwudata = response.data.activeConsumptionChildList.filter(item => item.activeGift == '4')
this.open = true; this.open = true;
this.title = "修改一键发券"; this.title = "修改一键发券";
}); });
@ -952,13 +1070,33 @@ export default {
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
if(this.form.id){
console.log('修改',this.form.days)
this.form.activeConsumptionChildList = this.form.tableDatas.concat(this.tableDatas, this.form.shiwudata); this.form.activeConsumptionChildList = this.form.tableDatas.concat(this.tableDatas, this.form.shiwudata);
console.log(this.form.activeConsumptionChildList) console.log(this.form.activeConsumptionChildList)
let data = { let data = {
activeName : this.activeName, id:this.form.id,
gradeIds:this.gradeIds, activeName : this.form.activeName,
condition:this.days, gradeIds:this.form.gradeIds,
condition:this.form.days,
cardFavorableIds:this.cardFavorableIds,
cardExchangeIds:this.pddhidlist
}
updetaCardFavorable(data).then(response => {
this.$modal.msgSuccess("修改");
this.open = false;
this.getList()
})
}else{
console.log('新增')
this.form.activeConsumptionChildList = this.form.tableDatas.concat(this.tableDatas, this.form.shiwudata);
console.log(this.form.activeConsumptionChildList)
let data = {
activeName : this.form.activeName,
gradeIds:this.form.gradeIds,
condition:this.form.days,
cardFavorableIds:this.cardFavorableIds, cardFavorableIds:this.cardFavorableIds,
cardExchangeIds:this.pddhidlist cardExchangeIds:this.pddhidlist
@ -968,6 +1106,9 @@ export default {
this.open = false; this.open = false;
this.getList() this.getList()
}) })
}
return
// this.$refs["form"].validate(valid => { // this.$refs["form"].validate(valid => {
// if (valid) { // if (valid) {
@ -979,7 +1120,7 @@ export default {
handleDelete(row) { handleDelete(row) {
const ids = row.id || this.ids; const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除消费有礼活动编号为"' + ids + '"的数据项？').then(function() { this.$modal.confirm('是否确认删除消费有礼活动编号为"' + ids + '"的数据项？').then(function() {
return delActiveConsumption(ids); return deleteCardFavorable(ids);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.$modal.msgSuccess("删除成功"); this.$modal.msgSuccess("删除成功");
@ -1002,4 +1143,11 @@ export default {
align-items: center; align-items: center;
font-size: 18px; font-size: 18px;
} }
.x-box{
background: #f9f9f9;
border-radius: 6px;
box-sizing: border-box;
padding: 15px;
width: 45%;
}
</style> </style>