<template> 
 | 
    <view class="content"> 
 | 
        <view class="content_search"> 
 | 
            <Search @searchInput="searchInput" @submit="submit" @reset="reset" :isShow="true" placeholder="搜索工单编码/物料编码2"> 
 | 
                <template v-slot:content> 
 | 
                    <view class="Search_item"> 
 | 
                        <view class="Search_item_label">检验日期</view> 
 | 
                        <view class="Search_item_content" @click="timeShow = true"> 
 | 
                            <view class="Search_item_content_a" :style="pageData.checkStartDate ? 'color: #000;' : ''">{{ pageData.checkStartDate ? pageData.checkStartDate : '开始日期'}}</view> 
 | 
                            <text>-</text> 
 | 
                            <view class="Search_item_content_a" :style="pageData.checkEndDate ? 'color: #000;' : ''">{{ pageData.checkEndDate ? pageData.checkEndDate : '结束日期'}}</view> 
 | 
                        </view> 
 | 
                    </view> 
 | 
                    <view class="Search_item"> 
 | 
                        <view class="Search_item_label">检验类型</view> 
 | 
                        <view class="Search_item_content"> 
 | 
                            <view class="tag"> 
 | 
                                <view class="tag_item" :class="{'tag_active': item.isActive}" v-for="(item, i) in data" :key="item.id" @click="changeTag(i)">{{item.name}}</view> 
 | 
                            </view> 
 | 
                        </view> 
 | 
                    </view> 
 | 
                    <view class="Search_item"> 
 | 
                        <view class="Search_item_label">检验工序</view> 
 | 
                        <view class="Search_item_content"> 
 | 
                            <view class="tag"> 
 | 
                                <view class="tag_item" :class="{'tag_active': item.isActive}" v-for="(item, i) in workingProcedure" :key="item.id" @click="changeTag1(i)">{{item.name}}</view> 
 | 
                            </view> 
 | 
                        </view> 
 | 
                    </view> 
 | 
                    <view class="Search_item"> 
 | 
                        <view class="Search_item_label">批次号</view> 
 | 
                        <view class="Search_item_content"> 
 | 
                            <u--input placeholder="请输入批次号" border="surround" v-model="pageData.batch"></u--input> 
 | 
                        </view> 
 | 
                    </view> 
 | 
                </template> 
 | 
            </Search> 
 | 
        </view> 
 | 
        <view class="content_total" :style="{top: top}">共{{listData.total}}条数据</view> 
 | 
        <view class="content_list"> 
 | 
            <scroll-view @scrolltolower="getLists" scroll-y :style="{height: height}"> 
 | 
                <view class="content_list_item" v-for="item in lists" :key="item.id" @click="jump(item)"> 
 | 
                    <view class="content_list_item_title"> 
 | 
                        <text>{{item.code}}</text> 
 | 
                        <text class="warning" v-if="item.checkType === 0">巡线</text> 
 | 
                        <text v-if="item.checkType === 1">巡检</text> 
 | 
                        <text class="green" v-if="item.checkType === 2">完工检</text> 
 | 
                    </view> 
 | 
                    <view class="content_list_item_nr"> 
 | 
                        <view class="content_list_item_nr_box"> 
 | 
                            <view class="label">物料信息:</view> 
 | 
                            <view class="cr" v-if="item.mmodel">{{item.mmodel.name}}丨{{item.mmodel.code}}</view> 
 | 
                        </view> 
 | 
                        <view class="content_list_item_nr_boxs"> 
 | 
                            <view class="label">生产数量:</view> 
 | 
                            <view class="cr" v-if="item.umodel">{{item.num}}{{item.umodel.name}}</view> 
 | 
                        </view> 
 | 
                        <view class="content_list_item_nr_box"> 
 | 
                            <view class="label">生产批次:</view> 
 | 
                            <view class="cr">{{item.batch}}</view> 
 | 
                        </view> 
 | 
                        <view class="content_list_item_nr_boxs"> 
 | 
                            <view class="label">生产工序:</view> 
 | 
                            <view class="cr" v-if="item.pmodel">{{item.pmodel.name}}</view> 
 | 
                        </view> 
 | 
                        <view class="content_list_item_nr_box"> 
 | 
                            <view class="label">工单编号:</view> 
 | 
                            <view class="cr">{{item.workorderCode}}</view> 
 | 
                        </view> 
 | 
                        <view class="content_list_item_nr_boxs"> 
 | 
                            <view class="label">检验人员:</view> 
 | 
                            <view class="cr">{{item.smodelRealName}}/{{item.checkUserDepartName}}</view> 
 | 
                        </view> 
 | 
                        <!-- <view class="content_list_item_nr_box"> 
 | 
                            <view class="label">检验日期:</view> 
 | 
                            <view class="cr">{{item.checkDate}}</view> 
 | 
                        </view> --> 
 | 
                        <!-- <view class="content_list_item_nr_boxs"> 
 | 
                            <view class="label">工装码:</view> 
 | 
                            <view class="cr" v-if="item.amodel">{{item.amodel.code}}</view> 
 | 
                        </view> --> 
 | 
                        <view class="content_list_item_nr_box"> 
 | 
                            <view class="label">合格数量:</view> 
 | 
                            <view class="cr" v-if="item.umodel">{{item.qualifiedNum}}{{item.umodel.name}}</view> 
 | 
                        </view> 
 | 
                        <view class="content_list_item_nr_boxs"> 
 | 
                            <view class="label">不良数量:</view> 
 | 
                            <view class="cr warning" v-if="item.umodel">{{item.unqualifiedNum}}{{item.umodel.name}}</view> 
 | 
                        </view> 
 | 
                    </view> 
 | 
                </view> 
 | 
            </scroll-view> 
 | 
        </view> 
 | 
        <!-- 选择日期 --> 
 | 
        <u-calendar :show="timeShow" mode="range" @confirm="timeConfirm"></u-calendar> 
 | 
    </view> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
    import Search from '@/components/Search.vue' 
 | 
    export default { 
 | 
        components: { Search }, 
 | 
        data() { 
 | 
            return { 
 | 
                height: '', 
 | 
                top: '', 
 | 
                listData: { 
 | 
                    capacity: 10, 
 | 
                    page: 0, 
 | 
                    total: 0, 
 | 
                    startDate: '', 
 | 
                    endDate: '', 
 | 
                    procedureIds: [], 
 | 
                    departIds: '', 
 | 
                    mixParam: '', 
 | 
                    cateIds: [] 
 | 
                }, 
 | 
                data: [        // 检验类型 
 | 
                    { id: '0', name: '巡线', isActive: false }, 
 | 
                    { id: '1', name: '巡检', isActive: false }, 
 | 
                    { id: '2', name: '完工检', isActive: false } 
 | 
                ], 
 | 
                workingProcedure: [],    // 工序 
 | 
                finished: true, 
 | 
                loading: false, 
 | 
                refreshing: false, 
 | 
                timeShow: false, 
 | 
                lists: [ 
 | 
                    { 
 | 
                        id: 1, 
 | 
                        checkType: 0, 
 | 
                        status: 0, 
 | 
                        code: '1234543223', 
 | 
                        urgent: 1, 
 | 
                        num: 100, 
 | 
                        batch: '11111', 
 | 
                        planDate: '2023-08-29', 
 | 
                        mmodel: { 
 | 
                            name: '工序计划', 
 | 
                            code: 'fbdseasafghb' 
 | 
                        }, 
 | 
                        usermodel: { 
 | 
                            realname: '计划人员' 
 | 
                        }, 
 | 
                        pmodel: { 
 | 
                            name: '工序计划' 
 | 
                        }, 
 | 
                        fmodel: { 
 | 
                            name: '工厂' 
 | 
                        } 
 | 
                    }, 
 | 
                    { 
 | 
                        id: 2, 
 | 
                        checkType: 1, 
 | 
                        code: '1234543223', 
 | 
                        status: 0, 
 | 
                        urgent: 1, 
 | 
                        num: 100, 
 | 
                        batch: '11111', 
 | 
                        planDate: '2023-08-29', 
 | 
                        mmodel: { 
 | 
                            name: '工序计划', 
 | 
                            code: 'fbdseasafghb' 
 | 
                        }, 
 | 
                        usermodel: { 
 | 
                            realname: '计划人员' 
 | 
                        }, 
 | 
                        pmodel: { 
 | 
                            name: '工序计划' 
 | 
                        }, 
 | 
                        fmodel: { 
 | 
                            name: '工厂' 
 | 
                        } 
 | 
                    }, 
 | 
                    { 
 | 
                        id: 3, 
 | 
                        checkType: 2, 
 | 
                        code: '1234543223', 
 | 
                        status: 0, 
 | 
                        urgent: 1, 
 | 
                        num: 100, 
 | 
                        batch: '11111', 
 | 
                        planDate: '2023-08-29', 
 | 
                        mmodel: { 
 | 
                            name: '工序计划', 
 | 
                            code: 'fbdseasafghb' 
 | 
                        }, 
 | 
                        usermodel: { 
 | 
                            realname: '计划人员' 
 | 
                        }, 
 | 
                        pmodel: { 
 | 
                            name: '工序计划' 
 | 
                        }, 
 | 
                        fmodel: { 
 | 
                            name: '工厂' 
 | 
                        } 
 | 
                    }, 
 | 
                    { 
 | 
                        checkType: 2, 
 | 
                        id: 4, 
 | 
                        status: 0, 
 | 
                        urgent: 1, 
 | 
                        code: '1234543223', 
 | 
                        num: 100, 
 | 
                        batch: '11111', 
 | 
                        planDate: '2023-08-29', 
 | 
                        mmodel: { 
 | 
                            name: '工序计划', 
 | 
                            code: 'fbdseasafghb' 
 | 
                        }, 
 | 
                        usermodel: { 
 | 
                            realname: '计划人员' 
 | 
                        }, 
 | 
                        pmodel: { 
 | 
                            name: '工序计划' 
 | 
                        }, 
 | 
                        fmodel: { 
 | 
                            name: '工厂' 
 | 
                        } 
 | 
                    }, 
 | 
                    { 
 | 
                        checkType: 1, 
 | 
                        id: 5, 
 | 
                        status: 0, 
 | 
                        code: '1234543223', 
 | 
                        urgent: 1, 
 | 
                        num: 100, 
 | 
                        batch: '11111', 
 | 
                        planDate: '2023-08-29', 
 | 
                        mmodel: { 
 | 
                            name: '工序计划', 
 | 
                            code: 'fbdseasafghb' 
 | 
                        }, 
 | 
                        usermodel: { 
 | 
                            realname: '计划人员' 
 | 
                        }, 
 | 
                        pmodel: { 
 | 
                            name: '工序计划' 
 | 
                        }, 
 | 
                        fmodel: { 
 | 
                            name: '工厂' 
 | 
                        } 
 | 
                    } 
 | 
                ] 
 | 
            }; 
 | 
        }, 
 | 
        onReady() { 
 | 
            var that = this 
 | 
            this.$nextTick(() => { 
 | 
                uni.createSelectorQuery().in(this).select('.content_search').boundingClientRect((rect) => { 
 | 
                    that.height = `calc(100vh - ${rect.height + 80}px)` 
 | 
                    that.top = `${rect.height}px` 
 | 
                }).exec() 
 | 
            }) 
 | 
        }, 
 | 
        methods: { 
 | 
            // 跳转 
 | 
            jump(item) { 
 | 
                uni.navigateTo({ 
 | 
                    url: `/pages/InspectionDetails/InspectionDetails?id=${item.id}` 
 | 
                }) 
 | 
            }, 
 | 
            // 获取头部组件高度 
 | 
            getHeight(height) { 
 | 
                this.height = height 
 | 
            }, 
 | 
            // 重置 
 | 
            reset() { 
 | 
                this.listData.page = 0 
 | 
                this.finished = false 
 | 
                this.lists = [] 
 | 
                this.listData.mixParam = '' 
 | 
                this.listData.startDate = '' 
 | 
                this.listData.endDate = '' 
 | 
                this.listData.procedureIds = [] 
 | 
                if (this.factoryList.length > 0) { 
 | 
                    this.listData.departIds = this.factoryList[0].id 
 | 
                } 
 | 
                if (this.data.length > 0) { 
 | 
                    this.data.forEach(item => { item.isActive = false }) 
 | 
                } 
 | 
                // this.getLists() 
 | 
                // this.pageCounts() 
 | 
            }, 
 | 
            // 日期确定 
 | 
            timeConfirm(val) { 
 | 
                this.listData.startDate = val[0] 
 | 
                this.listData.endDate = val[val.length - 1] 
 | 
                this.timeShow = false 
 | 
            }, 
 | 
            // 切换工厂 
 | 
            changeTags(i, id) { 
 | 
                this.listData.departIds = id 
 | 
                this.getWorkingProcedures(id) 
 | 
                this.factoryList.forEach((item, index) => { 
 | 
                    if (index === i) { 
 | 
                        item.isActive = true 
 | 
                    } else { 
 | 
                        item.isActive = false 
 | 
                    } 
 | 
                }) 
 | 
            }, 
 | 
            // 打开日期插件 
 | 
            openDate() { 
 | 
                this.timeShow = true 
 | 
            }, 
 | 
            // 搜索 
 | 
            searchInput(val) { 
 | 
                this.listData.mixParam = val 
 | 
                this.listData.page = 0 
 | 
                this.finished = false 
 | 
                this.lists = [] 
 | 
                this.getLists() 
 | 
            }, 
 | 
            // 点击标签搜索 
 | 
            clickTag(ids) { 
 | 
                this.listData.cateIds = ids 
 | 
                this.listData.page = 0 
 | 
                this.finished = false 
 | 
                this.lists = [] 
 | 
                // this.getLists() 
 | 
            }, 
 | 
            // 获取列表统计 
 | 
            pageCounts() { 
 | 
                pageCount({ 
 | 
                    factoryId: this.listData.departIds, 
 | 
                    procedureIdList: this.listData.procedureIds ? this.listData.procedureIds : [], 
 | 
                    startDate: this.listData.startDate, 
 | 
                    endDate: this.listData.endDate, 
 | 
                    statusList: this.listData.cateIds 
 | 
                }).then(res => { 
 | 
                    if (res.code === 200 && res.data) { 
 | 
                        this.tagList[0].num = res.data.allNum.toString() 
 | 
                        this.tagList[1].num = res.data.startNum.toString() 
 | 
                        this.tagList[2].num = res.data.ingNum.toString() 
 | 
                        this.tagList[3].num = res.data.endNum.toString() 
 | 
                    } 
 | 
                }) 
 | 
            }, 
 | 
            // 获取工厂数据 
 | 
            getOrganizations() { 
 | 
                getOrganization({ 
 | 
                    type: 1 
 | 
                }).then(res => { 
 | 
                    if (res.code === 200 && res.data && res.data.length !== 0) { 
 | 
                        res.data.forEach((item, i) => { 
 | 
                            item.isActive = i === 0; 
 | 
                        }) 
 | 
                        if (res.data.length > 0) { 
 | 
                            this.factoryList = res.data 
 | 
                            this.listData.departIds = this.factoryList[0].id 
 | 
                            this.listData.procedureIds = '' 
 | 
                            this.finished = false 
 | 
                            this.getWorkingProcedures(this.factoryList[0].id) 
 | 
                            this.getLists() 
 | 
                            this.pageCounts() 
 | 
                        } 
 | 
                    } 
 | 
                }) 
 | 
            }, 
 | 
            // 获取工序数据 
 | 
            getWorkingProcedures(orgId) { 
 | 
                this.data = [] 
 | 
                getWorkingProcedure({ orgId }) 
 | 
                    .then(res => { 
 | 
                        if (res.code === 200 && res.data && res.data.length !== 0) { 
 | 
                            res.data.forEach((item, i) => { 
 | 
                                item.isActive = false; 
 | 
                            }) 
 | 
                            this.data = res.data 
 | 
                        } 
 | 
                    }) 
 | 
            }, 
 | 
            // 搜索弹框提交 
 | 
            submit()  { 
 | 
                let pmodelOrgId = [] 
 | 
                this.data.forEach((item) => { 
 | 
                    if (item.isActive) { 
 | 
                        pmodelOrgId.push(item.id) 
 | 
                    } 
 | 
                }) 
 | 
                this.listData.procedureIds = pmodelOrgId 
 | 
                this.listData.page = 0 
 | 
                this.finished = false 
 | 
                this.lists = [] 
 | 
                // this.getLists() 
 | 
                // this.pageCounts() 
 | 
            }, 
 | 
            // 获取计划列表数据 
 | 
            getLists() { 
 | 
                console.log('getLists') 
 | 
                if (!this.finished) { 
 | 
                    this.loading = true 
 | 
                    this.listData.page = this.listData.page++ 
 | 
                    getList({ 
 | 
                        capacity: this.listData.capacity, 
 | 
                        model: { 
 | 
                            mixParam: this.listData.mixParam, 
 | 
                            startDate: this.listData.startDate, 
 | 
                            endDate: this.listData.endDate, 
 | 
                            procedureIdList: this.listData.procedureIds ? this.listData.procedureIds : [], 
 | 
                            factoryId: this.listData.departIds, 
 | 
                            statusList: this.listData.cateIds 
 | 
                        }, 
 | 
                        page: this.listData.page, 
 | 
                        sorts: [ 
 | 
                            { 
 | 
                                direction: 'ASC', 
 | 
                                property: 'publishDate' 
 | 
                            } 
 | 
                        ] 
 | 
                    }).then(res => { 
 | 
                        this.loading = false 
 | 
                        this.listData.total = res.data.total 
 | 
                        if (this.refreshing) { 
 | 
                            this.lists = [] 
 | 
                            this.refreshing = false; 
 | 
                        } 
 | 
                        if (res.code === 200 && res.data.records.length !== 0) { 
 | 
                            if (this.lists.length === 0) { 
 | 
                                this.lists = res.data.records 
 | 
                            } else { 
 | 
                                this.lists.push(...res.data.records) 
 | 
                            } 
 | 
                        } else { 
 | 
                            this.finished = true 
 | 
                        } 
 | 
                    }).catch(err => { 
 | 
                        this.loading = false 
 | 
                        this.finished = true 
 | 
                        if (this.refreshing) { 
 | 
                            this.lists = [] 
 | 
                            this.refreshing = false; 
 | 
                        } 
 | 
                    }) 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
    } 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
    .content { 
 | 
        .content_search { 
 | 
            width: 100%; 
 | 
            padding: 30rpx; 
 | 
            background: white; 
 | 
            position: sticky; 
 | 
            top: 0; 
 | 
            z-index: 999; 
 | 
            box-sizing: border-box; 
 | 
            .Search_item { 
 | 
                margin-bottom: 40rpx; 
 | 
                .Search_item_label { 
 | 
                    font-size: 30rpx; 
 | 
                    font-weight: 500; 
 | 
                    color: #222222; 
 | 
                } 
 | 
                .Search_item_content { 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: space-between; 
 | 
                    margin-top: 30rpx; 
 | 
                    input { 
 | 
                        width: 100%; 
 | 
                        height: 70rpx; 
 | 
                        border-radius: 10rpx; 
 | 
                        padding: 0 20rpx; 
 | 
                        box-sizing: border-box; 
 | 
                        border: 1rpx solid #939393; 
 | 
                        color: black; 
 | 
                        font-size: 26rpx; 
 | 
                    } 
 | 
                    input::-webkit-input-placeholder { 
 | 
                        color: #999999; 
 | 
                        font-size: 26rpx; 
 | 
                    } 
 | 
                    input:-moz-placeholder { 
 | 
                        color: #999999; 
 | 
                        font-size: 26rpx; 
 | 
                    } 
 | 
                    input::-moz-placeholder { 
 | 
                        color: #999999; 
 | 
                        font-size: 26rpx; 
 | 
                    } 
 | 
                    input:-ms-input-placeholder { 
 | 
                        color: #999999; 
 | 
                        font-size: 26rpx; 
 | 
                    } 
 | 
                    .tag { 
 | 
                        display: flex; 
 | 
                        flex-wrap: wrap; 
 | 
                        align-items: center; 
 | 
                        .tag_active { 
 | 
                            background: $nav-color !important; 
 | 
                            color: #ffffff !important; 
 | 
                        } 
 | 
                        .tag_item { 
 | 
                            width: 156rpx; 
 | 
                            height: 70rpx; 
 | 
                            box-sizing: border-box; 
 | 
                            background: #F2F2F2; 
 | 
                            border-radius: 8rpx; 
 | 
                            font-size: 26rpx; 
 | 
                            font-weight: 400; 
 | 
                            color: #333333; 
 | 
                            display: flex; 
 | 
                            align-items: center; 
 | 
                            justify-content: center; 
 | 
                            margin-right: 22rpx; 
 | 
                            margin-bottom: 22rpx; 
 | 
                            &:nth-child(4n) { 
 | 
                                margin-right: 0; 
 | 
                            } 
 | 
                        } 
 | 
                    } 
 | 
                    text { 
 | 
                        font-size: 26rpx; 
 | 
                        font-weight: 400; 
 | 
                        color: #333333; 
 | 
                    } 
 | 
                    .Search_item_content_a { 
 | 
                        width: 308rpx; 
 | 
                        height: 70rpx; 
 | 
                        background: #F7F7F7; 
 | 
                        border-radius: 8rpx; 
 | 
                        border: 1rpx solid #EEEEEE; 
 | 
                        font-size: 26rpx; 
 | 
                        font-weight: 400; 
 | 
                        color: #B2B2B2; 
 | 
                        display: flex; 
 | 
                        align-items: center; 
 | 
                        justify-content: center; 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
            .content_search_x { 
 | 
                height: 24rpx; 
 | 
            } 
 | 
        } 
 | 
        .content_list { 
 | 
            width: 100%; 
 | 
            display: flex; 
 | 
            flex-direction: column; 
 | 
            .content_list_item { 
 | 
                width: 100%; 
 | 
                box-sizing: border-box; 
 | 
                padding: 30rpx; 
 | 
                background: #ffffff; 
 | 
                margin-bottom: 20rpx; 
 | 
                .content_list_item_title { 
 | 
                    display: flex; 
 | 
                    align-items: center; 
 | 
                    justify-content: space-between; 
 | 
                    .warning { 
 | 
                        color: $nav-stateColor5 !important; 
 | 
                    } 
 | 
                    .green { 
 | 
                        color: $nav-stateColor2 !important; 
 | 
                    } 
 | 
                    text { 
 | 
                        font-size: 32rpx; 
 | 
                        font-weight: 500; 
 | 
                        color: #333333; 
 | 
                    } 
 | 
                } 
 | 
                .content_list_item_nr { 
 | 
                    padding: 24rpx 30rpx; 
 | 
                    background: #F7F7F7; 
 | 
                    border-radius: 16rpx; 
 | 
                    margin-top: 30rpx; 
 | 
                    display: flex; 
 | 
                    justify-content: space-between; 
 | 
                    flex-wrap: wrap; 
 | 
                    .content_list_item_nr_boxs { 
 | 
                        width: 45%; 
 | 
                        display: flex; 
 | 
                        margin-top: 24rpx; 
 | 
                        &:nth-child(1) { 
 | 
                            margin-top: 0; 
 | 
                        } 
 | 
                        &:nth-child(2) { 
 | 
                            margin-top: 0; 
 | 
                        } 
 | 
                        .warning { 
 | 
                            color: $nav-stateColor4 !important; 
 | 
                        } 
 | 
                        .label { 
 | 
                            flex-shrink: 0; 
 | 
                            font-size: 24rpx; 
 | 
                            font-weight: 400; 
 | 
                            color: #666666; 
 | 
                        } 
 | 
                        .cr { 
 | 
                            flex: 1; 
 | 
                            font-size: 24rpx; 
 | 
                            font-weight: 400; 
 | 
                            color: #222222; 
 | 
                            overflow: hidden; 
 | 
                            white-space: nowrap; 
 | 
                            text-overflow: ellipsis; 
 | 
                            -o-text-overflow:ellipsis; 
 | 
                        } 
 | 
                    } 
 | 
                    .content_list_item_nr_box { 
 | 
                        width: 55%; 
 | 
                        display: flex; 
 | 
                        margin-top: 24rpx; 
 | 
                        &:nth-child(1) { 
 | 
                            margin-top: 0; 
 | 
                        } 
 | 
                        &:nth-child(2) { 
 | 
                            margin-top: 0; 
 | 
                        } 
 | 
                        .label { 
 | 
                            font-size: 24rpx; 
 | 
                            font-weight: 400; 
 | 
                            color: #666666; 
 | 
                            flex-shrink: 0; 
 | 
                        } 
 | 
                        .cr { 
 | 
                            font-size: 24rpx; 
 | 
                            font-weight: 400; 
 | 
                            color: #222222; 
 | 
                        } 
 | 
                    } 
 | 
                } 
 | 
            } 
 | 
        } 
 | 
        .content_total { 
 | 
            width: 100%; 
 | 
            height: 80rpx; 
 | 
            padding: 24rpx 30rpx; 
 | 
            background: #F7F7F7; 
 | 
            font-size: 24rpx; 
 | 
            font-weight: 400; 
 | 
            box-sizing: border-box; 
 | 
            color: #666666; 
 | 
            position: sticky; 
 | 
            z-index: 99; 
 | 
        } 
 | 
    } 
 | 
</style> 
 |