631 lines
23 KiB
Vue
631 lines
23 KiB
Vue
<template>
|
||
<div class="common-layout">
|
||
<el-container>
|
||
<div class="header">
|
||
<div class="logo">
|
||
<h1>领料系统</h1>
|
||
</div>
|
||
</div>
|
||
<el-main>
|
||
<br><br>
|
||
<el-form
|
||
ref="form"
|
||
:model="formData"
|
||
label-width="80px"
|
||
class="input-form"
|
||
>
|
||
<!-- 用户信息 -->
|
||
<div class="userInfoBox">
|
||
<h4>个人信息</h4><br><hr><br>
|
||
<el-form-item label="姓名" prop="xingming" >
|
||
<el-input v-model="formData.xingming" style="width: 145px;"></el-input>
|
||
<div style="display: flex; align-items: center" >
|
||
<el-popover placement="bottom" :width="400">
|
||
<template #reference>
|
||
<el-button type="primary" @click.once="getUserInfoMethod()" style="width: 20px;" plain>快填</el-button>
|
||
</template>
|
||
<!-- 弹出列表 -->
|
||
<el-table :data="filterTableData" style="width: 100%" height="250">
|
||
<el-table-column label="姓名" prop="xingming" width="100px"/>
|
||
<el-table-column label="联系方式" prop="dianhua" width="130px"/>
|
||
<el-table-column label="id" prop="id" v-if="false"/>
|
||
<el-table-column label="地址" prop="dizhi" v-if="false"/>
|
||
<el-table-column label="备注" prop="beizhu" v-if="false"/>
|
||
<el-table-column align="right">
|
||
<template #header>
|
||
<el-input v-model="search" size="small" placeholder="请输入姓名" />
|
||
</template>
|
||
<template #default="scope">
|
||
<el-button size="small" @click="handleConfirm(scope.$index, scope.row)"
|
||
>确认</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-popover>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="联系电话" prop="mingcheng">
|
||
<el-input v-model="formData.dianhua"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="地址" prop="mingcheng">
|
||
<el-input v-model="formData.dizhi"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="申请人ID" prop="mingcheng">
|
||
<el-input v-model="formData.id"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="备注" prop="tupianshuoming">
|
||
<el-input type="textarea" v-model="formData.beizhu"></el-input>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="是否物料申请任务" prop="mingcheng" label-width="160px">
|
||
<el-switch v-model="formData.lingliaofangshi" />
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!--工单申请物料 -->
|
||
<div class="ticketsBox" v-show="formData.lingliaofangshi">
|
||
<h4>生产工单</h4><br><hr><br>
|
||
<!-- 弹出表格 -->
|
||
<el-form-item label="任务名称" prop="xingming" >
|
||
<el-input v-model="formData.shengchangongdan.chanpingmingcheng" style="width: 145px;"></el-input>
|
||
<div style="display: flex; align-items: center" >
|
||
<el-popover placement="bottom" :width="400">
|
||
<template #reference>
|
||
<el-button type="primary" @click.once="getTicketsInfoMethod()" style="width: 20px;" plain>快填</el-button>
|
||
</template>
|
||
<!-- 弹出列表 -->
|
||
<el-table :data="filterTicketData" style="width: 100%" height="250">
|
||
<el-table-column label="产品名称" prop="chanpingmingcheng" width="100px"/>
|
||
<el-table-column label="数量" prop="shuliang" width="130px"/>
|
||
<el-table-column label="规格" prop="guige" v-if="false"/>
|
||
<el-table-column label="开始时间" prop="scsjks" v-if="false"/>
|
||
<el-table-column label="结束时间" prop="scsjjs" v-if="false"/>
|
||
<el-table-column label="备注" prop="beizhu" v-if="false"/>
|
||
<el-table-column label="id" prop="id" v-if="false"/>
|
||
|
||
<el-table-column align="right">
|
||
<template #header>
|
||
<el-input v-model="searchTicket" size="small" placeholder="请输入姓名" />
|
||
</template>
|
||
<template #default="scope">
|
||
<el-button size="small" @click="ticketHandleConfirm(scope.$index, scope.row)"
|
||
>确认</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-popover>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="数量" prop="mingcheng">
|
||
<el-input v-model="formData.shengchangongdan.shuliang"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="单据编号" prop="mingcheng">
|
||
<el-input v-model="formData.shengchangongdan.billCode"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="规格" prop="mingcheng">
|
||
<el-input v-model="formData.shengchangongdan.guige"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="开始日期" prop="mingcheng">
|
||
<div class="block">
|
||
<span class="demonstration"></span>
|
||
<el-date-picker
|
||
v-model="formData.shengchangongdan.scsjks"
|
||
type="date"
|
||
placeholder="开始日期"
|
||
:default-value="new Date(2010, 9, 1)"
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="结束日期" prop="mingcheng">
|
||
<div class="block">
|
||
<span class="demonstration"></span>
|
||
<el-date-picker
|
||
v-model="formData.shengchangongdan.scsjjs"
|
||
type="date"
|
||
placeholder="结束日期"
|
||
:default-value="new Date(2010, 9, 1)"
|
||
style="width: 100%"
|
||
/>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="任务备注" prop="tupianshuoming">
|
||
<el-input type="textarea" v-model="formData.shengchangongdan.beizhu"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="任务ID" prop="mingcheng">
|
||
<el-input v-model="formData.shengchangongdan.id"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
|
||
<!-- 物料材料展示列表 -->
|
||
<div class="materalBox">
|
||
|
||
<h4>物料领用</h4><br><hr><br>
|
||
<el-form-item label="材料" prop="cailiao">
|
||
<div class="m-4">
|
||
<el-cascader v-model="materialObj.cailiao" :options="emunValueList" @focus.once="getMateralEnum()"/>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="规格" prop="guige">
|
||
<el-input v-model="materialObj.guige"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="数量" prop="shuliang">
|
||
<el-input v-model="materialObj.shuliang"></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
|
||
</el-form-item>
|
||
|
||
<el-table :data="tableData" style="width: 100%">
|
||
<el-table-column prop="cailiaomingcheng" label="材料" width="80" />
|
||
<el-table-column prop="guige" label="规格" width="80" />
|
||
<el-table-column prop="shuliang" label="数量" width="80" />
|
||
<el-table-column fixed="right" label="操作" width="60">
|
||
<template #default="scope">
|
||
<el-button
|
||
link
|
||
type="primary"
|
||
size="small"
|
||
@click.prevent="deleteRow(scope.$index)"
|
||
style="width: 30px;"
|
||
>
|
||
删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-button @click="tableDataDddObj" round style="width: 100%;color: rgb(64, 159, 237);">添加</el-button>
|
||
</div>
|
||
<br><br>
|
||
<!-- 提交按钮 -->
|
||
<div class="buttonBox">
|
||
<el-button type="primary" style="width:100% ;border-radius:10px" @click="submitDataMethod()">提交</el-button>
|
||
</div>
|
||
</el-form>
|
||
</el-main>
|
||
<el-footer>
|
||
<footerCompoent></footerCompoent>
|
||
</el-footer>
|
||
|
||
</el-container>
|
||
</div>
|
||
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import {computed,reactive, ref, watch} from 'vue'
|
||
import { ElTable } from 'element-plus'
|
||
import callApi from '../util/apiConnectHook'
|
||
import apiConnectHook from '../util/apiConnectHook'
|
||
import headerComponet from '../components/promotionalPageComponents/header.vue'
|
||
import footerCompoent from '../components/footer.vue'
|
||
/**
|
||
* 用户姓名弹窗element-plus配置代码
|
||
* @search [参数] 用户模糊搜索的双向绑定数据
|
||
* @filterTableData [方法] 根据用户的搜索值。进行过滤
|
||
* @handleConfirm [方法] 用户点击行的确认。就把行里面的数据，映射到输入框中
|
||
* @userInfoTableData [参数]弹出窗里面的数据，就存储到这个列表中
|
||
* @getUserInfoMethod [方法]调用这个方法。从v8中调出所有用户档案的数据,把数据装入userInfoTableData，进行展示
|
||
* --------------------------------------------------------------------------______________________________________________________________
|
||
*/
|
||
|
||
interface User {
|
||
xingming: string
|
||
dianhua: string
|
||
}
|
||
const search = ref('')
|
||
const filterTableData = computed(() =>
|
||
userInfoTableData.value.filter(
|
||
(data) =>
|
||
!search.value ||
|
||
data.xingming.toLowerCase().includes(search.value.toLowerCase())
|
||
)
|
||
)
|
||
const handleConfirm = (index: number, row: User) => {
|
||
console.log(index, row)
|
||
formData.xingming = row.xingming
|
||
formData.dianhua = row.dianhua
|
||
formData.dizhi = row.dizhi
|
||
formData.id = row.id
|
||
formData.beizhu = row.beizhu
|
||
|
||
}
|
||
const userInfoTableData = ref([])
|
||
function getUserInfoMethod(){
|
||
let apiConnectHook = callApi()
|
||
const requestBody = {
|
||
"requestId": "1833161472545390812",
|
||
"params": {'renyuanfenlei':"XIUNIANG"},
|
||
"timestamp": Date.now()
|
||
}
|
||
const apiUrl = "api/wushuiyuntai3071243142359302596/Renyuandangan11AppServiceImpl/selectListByComplexConditions"
|
||
//从"人员档案"实体接口中调出数据。
|
||
const promise = apiConnectHook.callApi(apiUrl,requestBody)
|
||
promise.then((result) => {
|
||
console.log('用户数据信息',result.data);
|
||
result.data.content.forEach(element => {
|
||
const obj = {
|
||
xingming:element.xingming,
|
||
dianhua:element.dianhua,
|
||
dizhi : element.dizhi,
|
||
id : element.renyuanID,
|
||
beizhu : element.beizhu,
|
||
}
|
||
userInfoTableData.value.push(obj)
|
||
});
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
});
|
||
}
|
||
/**
|
||
* 任务名称弹窗数据获取
|
||
* @searchTicket [参数] 用户模糊搜索的双向绑定数据
|
||
* @ticketData [参数]弹出列表数据就存储到这个列表中
|
||
* @filterTicketData [方法]根据用户搜索信息，对ticketData进行模糊查询过滤
|
||
* @ticketHandleConfirm [方法]用户点击确认。就把选中的行里面的数据，映射到对应的输入框中
|
||
* @getTicketsInfoMethod [方法]用户点击“快填”，就调用方法。从v8中抽取数据。然后把数据赋值给ticketData。之后弹出列表就更新数据
|
||
* _______________________________________________________________________________________________________________________________________________
|
||
*/
|
||
const searchTicket = ref('')
|
||
const ticketData = ref([])
|
||
const filterTicketData = computed(() =>
|
||
ticketData.value.filter(
|
||
(data) =>
|
||
!searchTicket.value ||
|
||
data.chanpingmingcheng.toLowerCase().includes(searchTicket.value.toLowerCase())
|
||
)
|
||
)
|
||
const ticketHandleConfirm = (index:number,row:User)=>{
|
||
formData.shengchangongdan.chanpingmingcheng = row.chanpingmingcheng
|
||
formData.shengchangongdan.shuliang = row.shuliang
|
||
formData.shengchangongdan.guige = row.guige
|
||
formData.shengchangongdan.scsjks = row.scsjks
|
||
formData.shengchangongdan.scsjjs = row.scsjjs
|
||
formData.shengchangongdan.billCode = row.billCode
|
||
formData.shengchangongdan.beizhu = row.beizhu
|
||
formData.shengchangongdan.id = row.id
|
||
}
|
||
function getTicketsInfoMethod(){
|
||
let apiConnectHook = callApi()
|
||
const body = {
|
||
"data": {
|
||
"jinririqi": Date.now()
|
||
},
|
||
"requestId": "1836097485093732586",
|
||
"timestamp": Date.now()
|
||
}
|
||
const url = "api/wushuiyuntai3071243142359302596/MicroFlowAppServiceImpl/productiontask"
|
||
//从“生产任务”实体接口中获取数据。获取到生产任务的数据
|
||
const promise = apiConnectHook.callApi(url,body)
|
||
promise.then((result) => {
|
||
console.log("任务名称数据",result.data);
|
||
result.data.content.forEach(element => {
|
||
const obj = {
|
||
chanpingmingcheng:element.chanpinmingcheng,
|
||
shuliang:element.shuliang,
|
||
guige:element.guige,
|
||
scsjks:element.scsjks,
|
||
scsjjs:element.scsjjs,
|
||
beizhu:element.beizhu,
|
||
id:element.id,
|
||
billCode:element.billCode
|
||
}
|
||
ticketData.value.push(obj)
|
||
});
|
||
console.log("ticketDate",ticketData.value)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* @description 领料列表中有一个删除按钮。点击按钮。就触发这个方法。这个方法就是删除选中行
|
||
* ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————
|
||
*/
|
||
const deleteRow = (index: number) => {
|
||
tableData.splice(index, 1)
|
||
}
|
||
/**
|
||
* @formData [参数]个人信息、生产工单的输入框字段映射
|
||
* @materialObj [参数]物料领用输入框映射字段
|
||
* @tableData [参数]物料表的映射字段
|
||
* ___________________________________________________________________________________________________________________
|
||
*/
|
||
const formData = reactive({
|
||
xingming:'',
|
||
dianhua:'',
|
||
dizhi:'',
|
||
id:'',
|
||
beizhu:'',
|
||
lingliaofangshi:false,
|
||
shengchangongdan:{
|
||
chanpingmingcheng:'',
|
||
shuliang:'',
|
||
billCode:'',
|
||
guige:'',
|
||
scsjks:'',
|
||
scsjjs:'',
|
||
beizhu:'',
|
||
id:'',
|
||
},
|
||
})
|
||
watch(()=>formData.lingliaofangshi, (newVal, oldVal) => {
|
||
if(newVal===false){
|
||
formData.shengchangongdan = {
|
||
chanpingmingcheng:'',
|
||
shuliang:'',
|
||
billCode:'',
|
||
guige:'',
|
||
scsjks:'',
|
||
scsjjs:'',
|
||
beizhu:'',
|
||
id:'',
|
||
}
|
||
}
|
||
})
|
||
const materialObj = reactive({
|
||
cailiao:'',
|
||
guige:'',
|
||
shuliang:''
|
||
})
|
||
//物料领料列表数据。[用于数据显示][材料名称存储的是中文名称]
|
||
const tableData = reactive([
|
||
])
|
||
//物料领料列表数据。[用于数据的提交][材料名称存储的是材料id]
|
||
const tableDataSubmit = reactive([
|
||
])
|
||
/**
|
||
* 添加按钮方法。点击添加按钮，就往tableDate表中添加数据。表中的数据就会增加一行
|
||
* @descriped 对于材料列表。点击添加，就从输入框的双向绑定数据，拉取值到弹窗列表中。
|
||
* @cailiaomingchengid 这里针对。二级枚举选项框。选项框的双向绑定数据只能获取到所选枚举的id。但是我的材料列表需要的是中文名称。
|
||
* 所以这里获取了所选的二级枚举的id。通过所选二级枚举id。同所有的二级枚举做if判断。来获取二级枚举的中文名称
|
||
* 然后把这个中文名称。放到弹窗列表中。
|
||
*/
|
||
function tableDataDddObj(){
|
||
|
||
const cailiaomingchengid = materialObj.cailiao[1]
|
||
let cailiaomingcheng = ''
|
||
TwoLevelEmun.forEach(element => {
|
||
if(element.value === cailiaomingchengid){
|
||
cailiaomingcheng = element.label
|
||
}
|
||
});
|
||
const obj = {
|
||
cailiaomingcheng:cailiaomingcheng,
|
||
shuliang:materialObj.shuliang,
|
||
guige:materialObj.guige,
|
||
// createTime:Date.now()
|
||
}
|
||
const objTwoSubmit = {
|
||
cailiaomingcheng:materialObj.cailiao[1],
|
||
shuliang:materialObj.shuliang,
|
||
guige:materialObj.guige,
|
||
}
|
||
tableData.push(obj)
|
||
tableDataSubmit.push(objTwoSubmit)
|
||
materialObj.cailiao = ''
|
||
materialObj.guige = ''
|
||
materialObj.shuliang = ''
|
||
}
|
||
|
||
/**
|
||
* 提交按钮触发方法
|
||
* 提交触发方法进行提交
|
||
* @apiConnectHook [参数]导入调用接口钩子函数
|
||
* @requestInsertBody [参数]请求体
|
||
* @url [参数]api地址
|
||
*
|
||
* ————————————————————————————————————————————————————————————————————————————————————————
|
||
*/
|
||
|
||
function submitDataMethod(){
|
||
let apiConnectHook = callApi()
|
||
// const requestInsertBody = {
|
||
// "data": {
|
||
// "shifoushengchanrenwu": formData.shifou,
|
||
// "mobanbianhao": "Materialrequest",
|
||
// "faqirenID": "1709976317081944296",
|
||
// "wuliaoshenqing": {
|
||
// "mingcheng": formData.shengchangongdan.id,
|
||
// "shuliang": formData.shengchangongdan.shuliang,
|
||
// "guige": formData.shengchangongdan.guige,
|
||
// "kaishishijian": formData.shengchangongdan.scsjks,
|
||
// "jieshushijian": formData.shengchangongdan.scsjjs,
|
||
// "renwubeizhu": formData.shengchangongdan.beizhu,
|
||
// "renwuID": formData.shengchangongdan.id,
|
||
// "wuliaoDtoList": tableDataSubmit,
|
||
// "xingmingCode": formData.xingming,
|
||
// "lianxidianhua": formData.dianhua,
|
||
// "dizhi": formData.dizhi,
|
||
// "beizhu": formData.beizhu,
|
||
// "shenqingrenID": "1831623715373187904"
|
||
// }
|
||
// },
|
||
const requestInsertBody = {
|
||
"data": {
|
||
"faqirenID": "1709976317081944296",
|
||
"wuliaoshenqing": {
|
||
"lingliaofangshi": formData.lingliaofangshi,
|
||
"wuliaoDtoList": tableDataSubmit,
|
||
"renwuID": "",
|
||
"beizhu": "123",
|
||
"shenqingrenID": formData.id
|
||
},
|
||
"moban": "Materialrequest"
|
||
},
|
||
"requestId": "1843191758947614954",
|
||
"timestamp": Date.now()
|
||
}
|
||
console.log("requestInsertBody",requestInsertBody)
|
||
const url = "api/wushuiyuntai3071243142359302596/MicroFlowAppServiceImpl/materiel"
|
||
const promise = apiConnectHook.callApi(url,requestInsertBody)
|
||
promise.then((result)=>{
|
||
console.log('插入数据返回数据',result)
|
||
if(result.message === "SUCCESS"){
|
||
alert("数据提交成功")
|
||
}else{
|
||
alert("数据提交失败,请联系管理员")
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* @description 材料二级单选框
|
||
* @value [参数] 与单选框的值做双向数据绑定
|
||
* @getMateralEnum [方法]从v8获取二级枚举的值的api接口
|
||
* @emunValue [参数]二级枚举中具体的值
|
||
*/
|
||
const emunValueList = reactive([])
|
||
/**
|
||
* 1、调用接口工具，调出v8接口，获取二级联集选项框的值
|
||
* 2、根据itemLevel的值。将一级选项值放到primaryList数组中
|
||
* 3、通过嵌套循环。外层遍历一级枚举值数据。内层遍历二级数组。通过子级的parentid和父级的id。做if结合在一起
|
||
*/
|
||
const TwoLevelEmun = []
|
||
function getMateralEnum(){
|
||
const body = {
|
||
"requestId": "1840125578808656106",
|
||
"params": {'enumCode':'wuliaoguanli'},
|
||
"timestamp": Date.now()
|
||
}
|
||
const url = "api/wushuiyuntai3071243142359302596/CtpEnumItemAppService/selectChildByEnumCodeAndItemValue"
|
||
let apiConnectHook = callApi()
|
||
const responseValue = apiConnectHook.callApi(url,body)
|
||
const primaryList = []
|
||
responseValue.then((emunListResult) => {
|
||
const emunList = emunListResult.data.content
|
||
emunList.forEach((emun)=>{
|
||
//第一次遍历，遍历出一级枚举的值
|
||
if(emun.itemLevel === 1){
|
||
const emunName = JSON.parse(emun.name).zh_CN;
|
||
const emunId = emun.id
|
||
const enumObj = {
|
||
value: emunId,
|
||
label: emunName,
|
||
}
|
||
primaryList.push(enumObj)
|
||
}
|
||
})
|
||
//第二次双层遍历。遍历出二级枚举值
|
||
primaryList.forEach((oneEmun)=>{
|
||
const children = []
|
||
emunList.forEach((twoEnum)=>{
|
||
if(twoEnum.itemLevel == 2 && twoEnum.parentId == oneEmun.value){
|
||
const twoObj = {
|
||
value:twoEnum.id,
|
||
label:JSON.parse(twoEnum.name).zh_CN
|
||
}
|
||
children.push(twoObj)
|
||
TwoLevelEmun.push(twoObj)
|
||
}
|
||
})
|
||
const oneEmunObj = {
|
||
value: oneEmun.value,
|
||
label: oneEmun.label,
|
||
children: children
|
||
}
|
||
emunValueList.push(oneEmunObj)
|
||
|
||
})
|
||
|
||
}
|
||
)}
|
||
</script>
|
||
<style scoped>
|
||
.header {
|
||
text-align: center;
|
||
position: fixed;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 60px;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #a02f23;
|
||
z-index: 99999;
|
||
/* 其他样式属性... */
|
||
}
|
||
.logo {
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
|
||
.logo h1 {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin: 0;
|
||
}
|
||
.input-form {
|
||
max-width: 300px;
|
||
margin: 20px auto;
|
||
}
|
||
.common-layout header{
|
||
background-color: antiquewhite;
|
||
}
|
||
/* 日期选取样式 */
|
||
.demo-date-picker {
|
||
display: flex;
|
||
width: 100%;
|
||
padding: 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
.demo-date-picker .block {
|
||
padding: 30px 0;
|
||
text-align: center;
|
||
border-right: solid 1px var(--el-border-color);
|
||
flex: 1;
|
||
}
|
||
.demo-date-picker .block:last-child {
|
||
border-right: none;
|
||
}
|
||
.demo-date-picker .demonstration {
|
||
display: block;
|
||
color: var(--el-text-color-secondary);
|
||
font-size: 14px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* */
|
||
.userInfoBox{
|
||
padding: 20px;
|
||
border-radius: 20px;
|
||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
|
||
}
|
||
.ticketsBox{
|
||
margin-top: 20px;
|
||
padding: 20px;
|
||
border-radius: 20px;
|
||
box-shadow: 0px 0px 20px rgba(121, 121, 121, 0.3);
|
||
}
|
||
.materalBox{
|
||
margin-top: 20px;
|
||
padding: 20px;
|
||
border-radius: 20px;
|
||
box-shadow: 0px 0px 20px rgba(121, 121, 121, 0.3);
|
||
}
|
||
.buttonBox{
|
||
margin-top: -30px;
|
||
padding: 20px;
|
||
border-radius: 20px;
|
||
box-shadow: 0px 0px 20px rgba(121, 121, 121, 0.3);
|
||
}
|
||
|
||
.mandatesBox {
|
||
border: red solid 2px;
|
||
background-color: aliceblue;
|
||
width: 400px;
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 9999;
|
||
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
|
||
border-radius: 10px;
|
||
|
||
}
|
||
.iconBox{
|
||
height: 40px;
|
||
width: 40px;
|
||
float: right;
|
||
/* margin-right: 20px; */
|
||
}
|
||
</style> |