小程序

Mr.Shi

2023-09-13 46b0b4d41a260e44e5e648d79cac60e97fe17789

小程序

 minipro_standard/pages/InOperation/InOperation.vue

@@ -22,6 +22,7 @@
                            <div class="page_content_title_top">

                                <span v-if="item.batch">{{ item.materialName + ' | ' + item.materialCode }}</span>

                                <span v-else>{{ item.materialName + ' | ' + item.materialCode }}</span>

                                <span>{{item.outActnum}}{{item.unitName}}</span>

                            </div>

                            <div class="page_content_title_bottom">

                                <span class="green" v-if="item.qualityType === 0">合格&nbsp;<span

@@ -206,6 +207,7 @@
                show: false,

                info: {},

                ids: [],

                mainOrder: '',

                location: '',

                locationName: '',

                wtransferWarehouseList: [],

@@ -253,6 +255,7 @@
                    data.wTransferType = '1'

                }

                infoAction(data).then(res => {

                    this.mainOrder = res.data.id

                    if (this.isZKD) {

                        this.info = res.data.wtransfer

                        this.wareHouseId = res.data.wtransfer.inWarehouseId


 minipro_standard/pages/OutOperation/OutOperation.vue

@@ -196,6 +196,7 @@
                info: {



                },

                mainOrder: '',

                warehouseId: '',

                ids: [],

                warehouseList: [{

@@ -245,6 +246,7 @@
                    data.wTransferType = '0'

                }
                infoAction(data).then(res => {

                    this.mainOrder = res.data.id

                    if (this.isZKD) {

                        this.info = res.data.wtransfer

                        this.warehouseList = res.data.wtransferWarehouseList
@@ -355,7 +357,7 @@
                                this.$store.dispatch('getUpcomingNum')

                                uni.$u.toast('操作成功')
                                uni.redirectTo({
                                    url: `/pages/warehousingDetails/warehousingDetails?id=${this.info.id}&dbid=${this.dbid}`
                                    url: `/pages/warehousingDetails/warehousingDetails?id=${this.id}&dbid=${this.dbid}`
                                })
                                // uni.redirectTo({
                                //     url: `/pages_adjust/pages/outboundDetails/outboundDetails?id=${this.info.id}&dbid=${this.dbid}`
@@ -370,14 +372,14 @@
                    }

                } else if (this.type === QRCodeType.CKD) {

                    wOutBoundForUpload({

                        id: info.value.woutbound.id,

                        id: this.id,

                        wOutboundType: 0

                    }).then(res => {

                        if (res.code === 200) {

                            this.$store.dispatch('getUpcomingNum')

                            uni.$u.toast('操作成功')
                            uni.redirectTo({
                                url: `/pages_adjust/pages/outboundDetails/outboundDetails?id=${this.info.id}`
                                url: `/pages_adjust/pages/outboundDetails/outboundDetails?id=${this.id}`
                            })

                            // setTimeout(() => {

                            //   // router.go(-1)


 minipro_standard/pages/index/index.vue

@@ -160,6 +160,7 @@
        },
        onReady() {
            var that = this
			
            this.$nextTick(() => {
                uni.createSelectorQuery()
                    .in(this)

 minipro_standard/pages_adjust/components/multipleMaterial.vue

@@ -12,8 +12,13 @@
                scroll-y="true"
                @scrolltolower="loadMore">
                    <view v-for="(item1, index) in list" :key="index" class="flex mb20" @click="jump(index)">
<<<<<<< HEAD
                        <view class="img36 mr20 pt10" style="position: relative;">
                            <u-checkbox-group style="display: block;" name="">
=======
                        <view class="img36 mr20 pt10">
                            <u-checkbox-group style="display: block;" name="" @change="jump(index)">
>>>>>>> 041c81a20c93a6b8238e810fe9a1adfee9c9d86f
                                <u-checkbox :checked="item1.isActive"></u-checkbox>
                            </u-checkbox-group>
                            <view style="width: 18px; height: 18px; position: absolute; top: 0; left: 0; z-index: 99;"></view>

 minipro_standard/pages_adjust/pages/manualFeed/manualFeed.vue

@@ -179,9 +179,7 @@
            getValue(item) {

                for (let i = 0; i < this.materialList.length; i++) {

                    if (item.id === this.materialList[i].id) {

                        uni.$u.toast({

                            message: '不能重复选择相同物料'

                        })

                        uni.$u.toast('不能重复选择相同物料')

                        return

                    }

                }


 minipro_standard/pages_adjust/pages/spotCheck/spotCheck.vue

@@ -21,7 +21,7 @@
                        <div class="tl_list_item_go">

                            <span

                                :style="item.attributeName ? 'color: #000;' : ''">{{ item.attributeName ? item.attributeName : '请选择'}}</span>

                            <van-icon name="arrow" color="#999999" />

                            <u-icon name="arrow-right" color="#999999" size="20"></u-icon>

                        </div>

                    </div>

                    <div class="tl_list_item" v-if="item.type === ''">

@@ -37,11 +37,6 @@
                                <u-radio v-for="(item1, i) in item.data" :key="i" activeColor="#4275FC" :name="item1" :label="item1">

                                </u-radio>

                            </u-radio-group>

                            <!-- <van-radio-group v-model="item.num" direction="horizontal">

                                <van-radio :name="item1" checked-color="#4275FC" v-for="(item1, i) in item.data" :key="i">

                                    {{item1}}

                                </van-radio>

                            </van-radio-group> -->

                        </div>

                    </div>

                    <div class="tl_list_item" v-else-if="item.type === 1">

@@ -53,17 +48,27 @@
                            </u-checkbox-group>

                        </div>

                    </div>

                    <div class="tl_list_item" v-else-if="item.type === 2 || item.type === 3">

                    <div class="tl_list_item" v-else-if="item.type === 2">

                        <div class="tl_list_item_label">属性值</div>

                        <div class="tl_list_item_go">

                            <input type="text" v-model="item.num" :placeholder="item.tips" />

                        </div>

                    </div><div class="tl_list_item" v-else-if="item.type === 3">

                        <div class="tl_list_item_label">属性值</div>

                        <div class="tl_list_item_go">
                            <u--input v-model="item.num" :placeholder="item.tips"
                                placeholder="请输入内容"
                                    type="digit"
                                border="surround"
                              ></u--input>

                            <input   />

                        </div>

                    </div>

                    <div class="tl_list_item" @click="openTimer(index)" v-else-if="item.type === 4">

                        <div class="tl_list_item_label">属性值</div>

                        <div class="tl_list_item_go">

                            <span :style="item.num ? 'color: #000;' : ''">{{item.num ? item.num : item.tips}}</span>

                            <u-icon name="arrow" color="#999999" />

                            <u-icon name="arrow-right" color="#999999" size="20"></u-icon>

                        </div>

                    </div>

                </div>

@@ -390,13 +395,15 @@
                .tl_list_item_label {

                    font-size: 30rpx;

                    font-weight: 400;

                    flex-shrink: 1;

                    color: #222222;

                }



                .tl_list_item_go {

                    display: flex;

                    align-items: center;



                    flex: 1;
                    justify-content: flex-end;

                    input {

                        text-align: right;

                        width: 450rpx;

@@ -448,4 +455,12 @@
            }

        }

    }

    /deep/ .u-checkbox-group {
        flex-wrap: wrap;
        max-width: 100%;
    }
    /deep/ .u-radio-group {
        flex-wrap: wrap;
        max-width: 100%;
    }

</style>

 minipro_standard/pages_adjust/pages/workOrder/workOrder.vue

@@ -1,7 +1,7 @@
<template>

    <view class="content p30 bbox">

        <div class="content_search">

            <v-Search @searchInput="searchForm.mixParam" @submit="search" @reset="reset" :isShow="true"

            <v-Search @searchInput="searchInput" @submit="search" @reset="reset" :isShow="true"

                placeholder="搜索工单编码/工序名称">

                <template v-slot:content>

                    <div class="Search_item">

@@ -22,8 +22,7 @@
            <v-LableSelection :TagList="tagList" :isShow="true" @change="clickTag"></v-LableSelection>

        </div>

        <div class="content_total mt20">共{{page.total}}条数据</div>
        <view class="fx1">
            <scroll-view scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered" @scrolltolower="getLists"
        <scroll-view scroll-y="true" :style="{height:height}" refresher-enabled="true" :refresher-triggered="triggered" @scrolltolower="getLists"
                @refresherrefresh="onRefresh">
                <div class="content_list">
                    <div class="content_list_item" v-for="(item, i) in list" :key="i" @click="jump(item)">
@@ -80,10 +79,12 @@
                    </div>
                </div>
            </scroll-view>
        <view class="fx1">
			
        </view>

        

        <!-- <u-calendar :show="isOpenDate" mode="range" @confirm="dateConfirm"></u-calendar> -->
        <l-calendar :lunar="false" v-model="isOpenDate" @change="onConfirm" :isRange="true" activeBgColor="#305ED5"
        <l-calendar :lunar="false" v-model="isOpenDate" @change="dateConfirm" :isRange="true" activeBgColor="#305ED5"
            rangeColor="#305ED5" rangeBgColor="rgba(48, 80, 213, 0.1)"></l-calendar>

    </view>

</template>

@@ -120,6 +121,7 @@
                        num: '0'

                    }

                ],

                height: '',

                triggered: false,

                _freshing: false,

                searchForm: {

@@ -135,6 +137,21 @@
                },

                list: [],

            }

        },
        onReady() {
            var that = this
			
            this.$nextTick(() => {
                uni.createSelectorQuery()
                    .in(this)
                    .select('.content_search')
                    .boundingClientRect((rect) => {
                        console.log('-----',rect);
                        that.height = `calc(100vh - ${rect.height + 80}px)`
                        that.top = `${rect.height}px`
                    })
                    .exec()
            })
        },

        onLoad() {

            this.pageCounts()

@@ -152,8 +169,13 @@
                this.pageCounts()
                this.loadData()
            },

            searchInput(data) {
                this.searchForm.mixParam = data
                this.page.page = 1
                this.pageCounts()
                this.loadData()
            },

            loadData() {



                getList({

                        ...this.page,

                        model: {


 minipro_standard/pages_adjust/pages/workOrderReporting/workOrderReporting.vue

@@ -125,7 +125,7 @@
                    <image src="../../../static/ic_ar@2x.png" class="img_ar" mode=""></image>

                </div>

            </div>

            <div class="bg_list_item" v-if="arrType && arrType.length > 0">

            <div class="bg_list_item" v-if="form.duration && arrType && arrType.length > 0">

                <div class="bg_list_item_top">

                    <div class="bg_list_item_top_left">

                        <div class="bg_list_item_top_left_x bg_m"></div>

@@ -223,6 +223,39 @@
                </view>

            </view>

        </u-popup>

        <u-popup :show="statistics" @close="statistics=false" :round="8" closeable zIndex="20000">

            <div class="tg">

                <div class="tg_header">请确认报工信息</div>

                <div class="tg_table">

                    <div class="tg_table_header">

                        <div class="tg_table_header_item">类型</div>

                        <div class="tg_table_header_item">物料名称</div>

                        <!-- <div class="tg_table_header_item">工装数量</div> -->

                        <div class="tg_table_header_item">物料数量</div>

                    </div>

                    <div class="nr" v-if="statisticsData.length > 0">

                        <div class="tg_table_nr" v-for="(item, index) in statisticsData" :key="index">

                            <div class="tg_table_nr_item">{{ item.name }}</div>

                            <div class="tg_table_nr_item">{{ item.materialName }}</div>

                            <!-- <div class="tg_table_nr_item">{{item.gznum}}</div> -->

                            <div class="tg_table_nr_item" :style="item.name === '工单未投料' ? 'color: #DE5243' : ''">

                                {{ item.num }}

                            </div>

                        </div>

                    </div>

                    <div class="nr" v-else>

                        <div class="tg_table_nr">

                            <div class="tg_table_nr_item1">暂无数据</div>

                        </div>

                    </div>

                </div>

                <div class="tg_footer">

                    <!-- proxy.$auth('h5:workorderoutput:confirm') &&  -->

                    <button class="tg_footer_qr" @click="submitBG" v-if="isSubmit">确认报工</button>

                    <div class="tg_footer_fh" @click="gofh" v-else-if="!isSubmit">返回修改</div>

                </div>

            </div>

        </u-popup>

    </view>

</template>



@@ -301,7 +334,10 @@
                    capacity: 10,

                    page: 1,

                    total: 0

                }

                },

                statisticsData: [],

                isSubmit: false,

                statistics: false

            };

        },

        onLoad(obj) {

@@ -444,46 +480,39 @@
                    if (unitAttribute == 0 && num != '') {

                        if (!REGULAR.positiveInteger.test(num)) {

                            obj.num = obj.ynum

                            Toast({

                                message: '只能输入正整数'

                            })

                            uni.$u.toast('只能输入正整数')

                            return

                        }

                    }

                    if (unitAttribute == 1 && num != '') {

                        if (!REGULAR.number.test(num)) {

                            Toast({

                                message: '只能输入正整数或小数（最多四位）'

                            })

                            uni.$u.toast('只能输入正整数或小数（最多四位）')

                            obj.num = obj.ynum

                            return

                        }

                    }

                    if (num > maxNum) {

                        obj.num = obj.ynum

                        Toast.fail({

                            message: '超出工装总数'

                        })

                        uni.$u.toast('超出工装总数')

                        return

                    }

                } else if (type === 'C' && num > info.value.planNum) {

                    obj.num = obj.ynum

                    Toast.fail({

                        message: '产出数量不能超过计划数量'

                    })

                    uni.$u.toast('产出数量不能超过计划数量')

                    return

                }

                // updateById({ id, num }).then(res => {

                //   if (res.code === 200 && type === 'T') {

                //     getOrocessRecords()

                //   } else if (res.code === 200 && type === 'C') {

                //     // getOrocessRecordCC()

                //   }

                // })

                updateById({

                        id,

                        num

                    })

                    .then(res => {

                        if (res.code === 200 && type === 'T') {

                            this.getOrocessRecords()

                        }

                    })

            },

            changeCC(downType, num, recordId) {

                if (!num) return

                console.log(Number(this.produceFrom.qualified) + Number(this.produceFrom.undesirable))

                if ((Number(this.produceFrom.qualified) + Number(this.produceFrom.undesirable)) > this.info.planNum) {

                    uni.showToast({

                        title: '产出数量不能大于计划数量',

@@ -519,7 +548,197 @@
                this.form.index = index

                this.form.type = item.type

            },

            getGroupNum(arr) {

                let newArry = {};

                for (let i = 0; i < arr.length; i++) {

                    if (newArry[arr[i].materialName]) {

                        newArry[arr[i].materialName].push(arr[i])

                    } else {

                        newArry[arr[i].materialName] = [arr[i]]

                    }

                }

                return newArry;

            },

            submit() {

                let res = this.getGroupNum(this.feedingData)

                if (this.info.bomType === 1) { // 拉式

                    console.log('拉式')

                    this.statisticsData = []

                    if (this.produceFrom.qualified <= 0 && this.produceFrom.undesirable <= 0) {

                        uni.$u.toast('产出明细不能为空')

                        return

                    }

                    if (this.info.hasBom === 0) {

                        console.log('无bom')

                        let arr = []

                        let tl = 0

                        for (let i in res) {

                            let num = 0

                            res[i].forEach(item => {

                                num += Number(item.num)

                            })

                            arr.push({

                                name: '工单投料',

                                materialName: i + res[i][0].procedureName,

                                num: num

                            })

                        }

                        this.feedingData.forEach(item => {

                            tl += Number(item.num)

                        })

                        this.statisticsData = [...this.statisticsData, ...arr]

                        this.statisticsData.push({

                            name: '工单合格产出',

                            materialName: this.info.mmodel.name + '-' + this.info.procedureName,

                            num: this.produceFrom.qualified

                        })

                        this.infostatisticsData.push({

                            name: '工单不良产出',

                            materialName: this.info.mmodel.name + '-' + this.info.procedureName,

                            num: this.produceFrom.undesirable

                        })

                        this.statisticsData.push({

                            name: '工单未投料',

                            materialName: '',

                            num: this.info.planNum - Number(this.produceFrom.qualified) - Number(this.produceFrom

                                .undesirable)

                        })

                        let total = this.info.planNum - (Number(this.produceFrom.qualified) + Number(this.produceFrom

                            .undesirable))

                        if (total === 0) {

                            this.isSubmit = true

                        } else {

                            this.isSubmit = false

                        }

                    } else if (this.info.hasBom === 1) { // 有bom情况

                        console.log('有bom')

                        let arr = []

                        let tl = 0

                        // let res = getGroupNum(feedingData)

                        for (let i in res) {

                            let num = 0

                            res[i].forEach(item => {

                                num += Number(item.num)

                            })

                            arr.push({

                                name: '工单投料',

                                materialName: i,

                                num: num

                            })

                        }

                        this.feedingData.forEach(item => {

                            tl += Number(item.num)

                        })

                        this.statisticsData = [...this.statisticsData, ...arr]

                        this.statisticsData.push({

                            name: '工单合格产出',

                            materialName: this.info.mmodel.name + '-' + this.info.procedureName,

                            num: this.produceFrom.qualified

                        })

                        this.statisticsData.push({

                            name: '工单不良产出',

                            materialName: this.info.mmodel.name + '-' + this.info.procedureName,

                            num: this.produceFrom.undesirable

                        })

                        this.isSubmit = Number(this.produceFrom.qualified) + Number(this.produceFrom.undesirable) <= this

                            .info.planNum;

                    }

                } else {

                    console.log('推式')

                    if (this.feedingData.length === 0) {

                        uni.$u.toast('投料明细不能为空')



                        return

                    }

                    if (this.produceFrom.qualified <= 0 && this.produceFrom.undesirable <= 0) {

                        uni.$u.toast('产出明细不能为空')



                        return

                    }

                    this.statisticsData = []

                    if (this.info.hasBom === 0) {

                        console.log('无bom')

                        let arr = []

                        let tl = 0

                        for (let i in res) {

                            let num = 0

                            res[i].forEach(item => {

                                num += Number(item.num)

                            })

                            arr.push({

                                name: '工单投料',

                                materialName: i + '-' + res[i][0].procedureName,

                                num: num

                            })

                        }

                        this.feedingData.forEach(item => {

                            tl += Number(item.num)

                        })

                        this.statisticsData = [...this.statisticsData, ...arr]

                        this.statisticsData.push({

                            name: '工单合格产出',

                            materialName: this.info.mmodel.name + '-' + this.info.procedureName,

                            num: this.produceFrom.qualified

                        })

                        this.statisticsData.push({

                            name: '工单不良产出',

                            materialName: this.info.mmodel.name + '-' + this.info.procedureName,

                            num: this.produceFrom.undesirable

                        })

                        if (Number(tl) <= this.info.planNum) {

                            let total = Number(tl) - Number(this.produceFrom.qualified) - Number(this.produceFrom

                                .undesirable) // 是否有余

                            this.statisticsData.push({

                                name: '工单未投料',

                                materialName: '',

                                num: (Number(tl) - Number(this.produceFrom.qualified) - Number(this.produceFrom

                                        .undesirable))

                                    .toFixed(2)

                            })

                            if (total === 0) {

                                this.isSubmit = true

                            } else {

                                this.isSubmit = false

                            }

                        } else {

                            this.isSubmit = false

                        }

                    } else if (this.info.hasBom === 1) { // 有bom情况

                        console.log('有bom')

                        let arr = []

                        let tl = 0

                        for (let i in res) {

                            let num = 0

                            res[i].forEach(item => {

                                num += Number(item.num)

                            })

                            arr.push({

                                name: '工单投料',

                                materialName: i,

                                num: num

                            })

                        }

                        this.feedingData.forEach(item => {

                            tl += Number(item.num)

                        })

                        this.statisticsData = [...this.statisticsData, ...arr]

                        this.statisticsData.push({

                            name: '工单合格产出',

                            materialName: this.info.mmodel.name + '-' + this.info.procedureName,

                            num: this.produceFrom.qualified

                        })

                        this.statisticsData.push({

                            name: '工单不良产出',

                            materialName: this.info.mmodel.name + '-' + this.info.procedureName,

                            num: this.produceFrom.undesirable

                        })

                        // isSubmit.value = produceFrom.qualified + produceFrom.undesirable <= info.value.planNum;

                        this.isSubmit = true

                    }

                }

                this.statistics = true

            },

            submitBG() {

                let createUnqualifiedDTOList = this.form.defective.map((item) => {

                    return {

                        categoryId: item.id,

@@ -547,6 +766,36 @@
                    }

                })

            },

            // => {

            //   // if (!from.duration || from.duration <= 0) {

            //   //     return Toast('报工时长不能为空')

            //   // }

            //   let createUnqualifiedDTOList = from.defective.map(item => {

            //     return {

            //       categoryId: item.id,

            //       unQualifiedNum: item.num

            //     }

            //   })

            //   let createWorkorderRecordDTO = {

            //     workorderId: route.query.id,

            //     duration: from.duration ? from.duration : 0,

            //     qualifiedNum: produceFrom.qualified ? produceFrom.qualified : 0,

            //     unQualifiedNum: produceFrom.undesirable ? produceFrom.undesirable : 0

            //   }

            //   // id: route.query.id

            //   comfirmDoneStandard({

            //     createUnqualifiedDTOList,

            //     createWorkorderRecordDTO

            //   }).then(res => {

            //     if (res.code === 200) {

            //       Toast.success({ message: '报工成功', forbidClick: true, duration: 2000 })

            //       setTimeout(() => {

            //         router.go(-2)

            //       }, 2000)

            //     }

            //   })

            // }



            jumpdj() {

                uni.navigateTo({

                    url: `/pages_adjust/pages/spotCheck/spotCheck?id=${this.workorderId}`

@@ -655,7 +904,6 @@
                    content: '确定删除此条记录吗？',

                    success: (res) => {

                        if (res.confirm) {

                            console.log('用户点击确定');

                            deleteCT(id)

                                .then(res => {
                                    this.getOrocessRecords()

@@ -1049,6 +1297,7 @@
        width: 100%;

        padding: 30rpx 30rpx 60rpx 30rpx;

        box-sizing: border-box;

        z-index: 9999;



        .bg_footer_submit1 {

            width: 690rpx;

@@ -1204,7 +1453,8 @@
                flex: 1;

                height: 50rpx;

                text-align: right;



                display: flex;

                justify-content: flex-end;

                input {

                    padding-left: 5rpx;

                    width: 160rpx;

@@ -1227,4 +1477,119 @@
            }

        }

    }



    .tg {

        width: 100%;

        height: 800rpx;

        padding: 30rpx;

        box-sizing: border-box;



        .tg_header {

            width: 100%;

            height: 45rpx;

            text-align: center;

            line-height: 45rpx;

            font-size: 30rpx;

            font-weight: 500;

            color: #222222;

        }



        .tg_table {

            width: 100%;

            margin-top: 40rpx;



            .tg_table_header {

                width: 100%;

                height: 72rpx;

                background: #EFF2FC;

                display: flex;

                align-items: center;



                .tg_table_header_item {

                    flex: 1;

                    font-size: 26rpx;

                    font-weight: 500;

                    color: #333333;

                    display: flex;

                    align-items: center;

                    justify-content: center;

                }

            }

        }



        .nr {

            width: 100%;

            max-height: calc(100% - 133rpx);

            overflow-x: scroll;



            .tg_table_nr {

                width: 100%;

                padding: 24rpx 10rpx;

                box-sizing: border-box;

                display: flex;

                align-items: center;

                background: white;

                box-shadow: inset 0px -2rpx 0px 0px #E5E5E5;



                .tg_table_nr_item {

                    flex: 1;

                    font-size: 26rpx;

                    font-weight: 500;

                    color: #333333;

                    display: flex;

                    align-items: center;

                    justify-content: center;

                }



                .tg_table_nr_item1 {

                    flex: 1;

                    font-size: 26rpx;

                    font-weight: 500;

                    color: #333333;

                    display: flex;

                    align-items: center;

                    justify-content: center;

                }

            }

        }

    }



    .tg_footer {

        width: calc(100% - 60rpx);

        position: fixed;

        bottom: 0;

        display: flex;

        justify-content: space-between;

        align-items: center;

        box-sizing: border-box;

        padding-bottom: 40rpx;



        .tg_footer_fh {

            width: 100%;

            height: 88rpx;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(66, 117, 252, 0.05);

            border-radius: 8rpx;

            border: 1rPX solid #4275FC;

            font-size: 32rpx;

            font-weight: 500;

            color: $nav-color;

        }



        .tg_footer_qr {

            width: 100%;

            height: 88rpx;

            border: none;

            display: flex;

            align-items: center;

            justify-content: center;

            background: $nav-color;

            border-radius: 8rpx;

            font-size: 32rpx;

            font-weight: 500;

            color: #FFFFFF;

        }

    }

</style>