<template>
    <view>
        <view class="header">
            <view class="navigation" :style="'height: ' + navigationHeight + 'px; top: ' + statusHeight + 'px;'">
                <image src="/static/images/work2/Header.png" class="back" @tap="back" mode="" />
                <text lines="1" class="header_text_1" :style="' top: ' + statusHeight + 'px;width: 50rpx;height: 50rpx;'">{{ agencyName }}</text>
            </view>
        </view>
        <view class="text-wrapper_8">
            <image src="https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/internal/20240412/bca77e0435014a4680679c2c77d4fa50.png" class="bg-image" />
            <text lines="1" class="text_30">数字化社区平台</text>
            <text lines="1" class="paragraph_1">
                打造社区工作新模式
                <br />
                用数据提升基层治理与服务水平
            </text>
        </view>
        <view class="group_1">
            <view class="section_1">
                <view class="image-text_1" @tap="onAddHouseLL">
                    <view class="text-group_1">
                        <text lines="1" class="text_1">房屋登记</text>
                        <text lines="1" class="text_2">登记房屋数据</text>
                    </view>
                    <image src="/static/images/index/houses.png" class="image_1"></image>
                </view>
            </view>
            <view class="section_2">
                <view class="image-text_2" @tap="onAddResident">
                    <view class="text-group_2">
                        <text lines="1" class="text_3">居民登记</text>
                        <text lines="1" class="text_4">登记居民数据</text>
                    </view>
                    <image src="/static/images/index/register.png" class="image_2"></image>
                </view>
            </view>
            <view class="section_3">
                <view class="image-text_3" @tap="toDemandCheck">
                    <view class="text-group_3">
                        <text lines="1" class="text_5">诉求上报</text>
                        <text lines="1" class="text_6">登记居民诉求</text>
                    </view>
                    <image src="/static/images/index/appeal.png" class="image_3"></image>
                </view>
            </view>
        </view>
        <view class="electron">
            <view class="door">
                <image src="/static/images/index/Door.png" class="img_door"></image>
                <text class="door-text" @tap="door">扫电子门牌</text>
            </view>
            <view class="electron_card">
                <image src="/static/images/index/IDCard.png" class="img_door"></image>
                <text class="card_text" @tap="IDCard">识别身份证</text>
            </view>
        </view>
        <view class="group_2">
            <view class="text-wrapper_1">
                <text lines="1" class="text_7">人房信息采集</text>
            </view>
            <view class="block_1">
                <view class="group_3">
                    <image src="/static/images/index/house.png" class="imge1" />
                    <view class="text-group_4">
                        <text lines="1" class="text_8">{{ collectedHouseCount ? collectedHouseCount : '--' }}</text>
                        <text lines="1" class="text_9">录入房屋</text>
                    </view>
                    <view class="text-group_5" @tap="noHouse">
                        <text lines="1" class="text_10">{{ emptyHouseNum ? emptyHouseNum : '--' }}</text>
                        <text lines="1" class="text_11">未采集居民房屋</text>
                    </view>
                </view>
                <view class="group_4">
                    <image src="/static/images/index/JM.png" class="imge2" />
                    <view class="text-group_6">
                        <text lines="1" class="text_12">{{ collectedPopulationCount ? collectedPopulationCount : '--' }}</text>
                        <text lines="1" class="text_13">录入居民</text>
                    </view>
                    <view class="text-group_7" @tap="onresno">
                        <text lines="1" class="text_14">{{ catesNonIntResiNum ? catesNonIntResiNum : '--' }}</text>
                        <text lines="1" class="text_15">居民信息不完整</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="content">
            <view class="hd_news">
                <text class="news_remind">满意度自查</text>
                <text class="more" @tap="toHistoryQuery">历史自查></text>
            </view>
            <view class="card">
                <view class="content">
                    <view class="bg_new_box">
                        <block v-if="communitySelfInspTop.monthName">
                            <!-- <block wx:if='true'> -->
                            <view>
                                <view class="new_h2" @tap="toSynthesis">{{ communitySelfInspTop.agencyName }}{{ communitySelfInspTop.monthName }}月份满意度自查</view>
                            </view>
                            <view class="new_submitt">
                                已提交
                                <b>{{ communitySelfInspTop.personQty ? communitySelfInspTop.personQty : '--' }}</b>
                                人
                            </view>
                            <view class="button_a">
                                <button class="btn_fx" @tap="handelClickShare" :data-item="communitySelfInspTop" open-type="share">一键分享</button>
                                <view class="btn_tj" @tap="toSynthesis">查看统计</view>
                            </view>
                        </block>
                        <view class="new_h2" v-else>未创建{{ curMonth }}月份满意度自查</view>
                        <view class="bg_new_right">
                            <image src="/static/images/work/map.png" mode="" style="max-height: 158rpx; width: 147rpx" />
                        </view>
                        <text class="tag" v-if="communitySelfInspTop.monthName">进行中</text>
                    </view>
                    <!--  -->
                </view>
                <view class="list">
                    <view class="list_card" :data-item="item" @tap="toDetaill" v-for="(item, index) in communitySelfInspList" :key="index">
                        <view style="height: 100%; width: 100%">
                            <view class="new_left">
                                <view class="new_hh">{{ item.agencyName }}{{ item.monthName }}月份满意度自查</view>
                                <view class="new_submit">已提交:{{ item.personQty }}人</view>
                            </view>
                            <view class="right">
                                <view style="float: right">
                                    <text>{{ item.synthesisScore }}</text>
                                    分
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="content">
            <view class="hd_news">
                <text class="news_remind">消息提醒</text>
                <text class="more" @tap="moreNews">更多</text>
            </view>
            <view class="card">
                <view
                    :class="' ' + (index == 4 ? 'Information1' : 'Information')"
                    :data-item="item"
                    :data-index="index"
                    @tap="toDetail"
                    v-for="(item, index) in tableData"
                    :key="index"
                >
                    <view class="Information_one">
                        <view class="one_one">
                            <image src="/static/images/index/Topping.png" class="Information_image" v-if="item.msgType == resident_categiry"></image>
                            <text class="Information_test">{{ item.content }}</text>
                        </view>

                        <text class="Information_test2">{{ item.readFlag != '1' ? '未读' : '已读' }}</text>
                    </view>

                    <view class="Information_two">
                        <text class="Information_test3">{{ item.typeName }}</text>
                        <text class="Information_test4">{{ item.createdTime }}</text>
                    </view>
                </view>
            </view>
        </view>
        <custom-tab-bar></custom-tab-bar>
    </view>
</template>

<script>
import loadMore from '../../components/loadMore/loadMore';
import noData from '../../components/noData/nodata';
import customTabBar from '../../components/custom-tab-bar/index.vue';
// index.js
// 获取应用实例
const app = getApp();
import api, { getIntelligentMessage, getToken, getStaffbasicinfo, clearMessage, getSituation, overView } from '../../utils/api';
import { getInspRecord } from '../../utils/api';
import config from '../../utils/config';
export default {
    components: {
        loadMore,
        noData,
        customTabBar
    },
    // 事件处理函数
    data() {
        return {
            topDisplay: false,
            selectList: ['全部消息', '居民信息采集', '房屋信息采集', '社区满意度自查'],
            selectValue: 0,
            communitySelfInspList: [],
            pageSize: 5,
            pageNo: 1,
            tableData: [],
            lowerThreshold: '20',
            loadMoreVisible: false,
            loadMoreType: 'none',
            nodata: false,
            emptyHouseNum: '',
            catesNonIntResiNum: '',
            readFlag: '0',
            agencyName: '--',
            statusHeight: '',
            navigationHeight: '',
            share: '',

            communitySelfInspTop: {
                monthName: '',
                agencyName: '',
                personQty: false
            },

            curMonth: '',
            collectedHouseCount: '',
            collectedPopulationCount: '',
            resident_categiry: ''
        };
    },
    onLoad: async function () {
        await this.getToken();
        this.getIntelligentMessage();
        //  await this.getIntelligentMessage()
        await this.getStaffbasicinfo();
        this.setData({
            statusHeight: app.globalData.deviceInfo.statusHeight,
            navigationHeight: app.globalData.deviceInfo.navigationHeight,
            share: app.globalData.share
        });
        this.getInspRecord();
        // uni.loadFontFace({
        //     family: 'PingFangSC-regular',
        //     source: 'url("https://www.your-server.com/PingFangSC-Medium.ttf")',
        //     success: function () {
        //         console.log('Font loaded successfully');
        //     },
        //     fail: function (error) {
        //         console.error('Font loading failed', error);
        //     },
        //     complete: function () {
        //         console.log('Font loading process complete');
        //     }
        // });
    },
    onShareAppMessage() {
        return {
            title: `${this.agencyName}${this.communitySelfInspTop.monthName}月份满意度调查`,
            path: '/pages/webView/webView?url=' + encodeURIComponent(this.communitySelfInspTop.questionnaireUrl),
            imageUrl: '/static/images/work/shareBg.png'
        };
    },
    onShow() {
        this.getSituation();
        this.getInspRecord();
    },
    onPullDownRefresh() {
        this.setData({
            pageNo: 1,
            tableData: []
        });
        this.getIntelligentMessage();
        this.getStaffbasicinfo();
        this.getInspRecord();
    },
    methods: {
        door() {
           uni.navigateTo({
            url: '/pages/scanCode/scanCode'
           })
        },
        getInspRecord() {
            let parm = {
                pageSize: 1000,
                pageNo: 1
            };
            getInspRecord(parm)
                .then((res) => {
                    res.data.list = res.data.list.reverse();
                    let curMonth = new Date().getMonth() - 0 + 1;
                    let communitySelfInspTop = res.data.list.filter((item) => item.monthName - 0 === curMonth).length
                        ? res.data.list.filter((item) => item.monthName - 0 === curMonth)[0]
                        : {};
                    let communitySelfInspList = res.data.list.filter((item) => item.monthName - 0 !== curMonth).splice(0, 2);
                    this.setData({
                        communitySelfInspTop,
                        communitySelfInspList,
                        curMonth
                    });
                    // this.setData({
                    //     communitySelfInspTop:res.data.list.splice(0,1)[0],
                    //     communitySelfInspList:res.data.list.splice(0,2),
                    // })
                    app.globalData.questionnaireUrl = this.communitySelfInspTop.questionnaireUrl;
                })
                .catch((err) => {
                    uni.hideLoading();
                    console.log(err);
                });
        },

        toDetaill(e) {
            uni.navigateTo({
                url: `/subpages/communitySelfInsp/pages/synthesis/synthesis?inspRecordId=${encodeURIComponent(e.currentTarget.dataset.item.id)}&qrCodeImgUrl=${encodeURIComponent(
                    e.currentTarget.dataset.item.qrCodeImgUrl
                )}&agencyName=${encodeURIComponent(e.currentTarget.dataset.item.agencyName)}&monthName=${encodeURIComponent(
                    e.currentTarget.dataset.item.monthName
                )}&questionnaireUrl=${encodeURIComponent(e.currentTarget.dataset.item.questionnaireUrl)}&status=${encodeURIComponent(e.currentTarget.dataset.item.status)}`
            });
        },

        toSynthesis() {
            uni.navigateTo({
                url: `/subpages/communitySelfInsp/pages/synthesis/synthesis?inspRecordId=${encodeURIComponent(this.communitySelfInspTop.id)}&qrCodeImgUrl=${encodeURIComponent(
                    this.communitySelfInspTop.qrCodeImgUrl
                )}&agencyName=${encodeURIComponent(this.communitySelfInspTop.agencyName)}&monthName=${encodeURIComponent(
                    this.communitySelfInspTop.monthName
                )}&questionnaireUrl=${encodeURIComponent(this.communitySelfInspTop.questionnaireUrl)}&status=${encodeURIComponent(this.communitySelfInspTop.status)}`
            });
        },

        toHistoryQuery() {
            uni.navigateTo({
                url: '/subpages/communitySelfInsp/pages/historyQuery/historyQuery'
            });
        },

        onScrollToLower(e) {
            if (this.loadMoreType === 'more') {
                this.setData({
                    loadMoreVisible: true
                });
                this.pageNo += 1;
                this.getIntelligentMessage();
            }
        },

        getIntelligentMessage() {
            this.setData({
                loadMoreVisible: true,
                nodata: false,
                loadMoreType: 'more',
                tableData: []
            });
            const parm = {
                limit: this.pageSize,
                page: this.pageNo,
                readFlag: this.readFlag
            };
            getIntelligentMessage(parm)
                .then((res) => {
                    res.data.list.forEach((item) => {
                        if (item.msgType === 'resident_base_info') {
                            item.typeName = '居民信息采集';
                        } else if (item.msgType === 'community_house') {
                            item.typeName = '房屋信息采集';
                        } else if (item.msgType === 'resident_categiry') {
                            item.typeName = '数据更新提醒';
                        } else if (item.msgType === 'srap_confirm') {
                            item.typeName = '服务更新提醒';
                        }
                    });
                    console.log(res.data.list);
                    this.setData({
                        loadMoreType: res.data.list.length === this.pageSize ? 'more' : 'none',
                        tableData: this.tableData.concat(res.data.list)
                    });
                    console.log(this.tableData);
                    if (this.tableData.length == 0) {
                        this.setData({
                            loadMoreVisible: false,
                            nodata: true
                        });
                    }
                })
                .catch((err) => {
                    console.log(err);
                    this.setData({
                        loadMoreVisible: false,
                        nodata: true
                    });
                });
        },

        moreNews() {
            uni.navigateTo({
                url: '../../subpages/morenews/pages/morenews/morenews'
            });
        },

        getToken() {
            const parm = {
                wxCode: '',
                app: 'gov',
                client: 'wxmp',
                appId: 'wxaf87b420b87e2d79'
            };
            uni.showLoading({
                title: '加载中...'
            });
            uni.login({
                success: (res) => {
                    parm.wxCode = res.code;
                    getToken(parm)
                        .then((res) => {
                            uni.hideLoading();
                            if (res.code === 0) {
                                uni.setStorageSync('token', res.data.token);
                            } else {
                                uni.reLaunch({
                                    url: '/pages/login/login'
                                });
                            }
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                }
            });
        },

        getStaffbasicinfo() {
            getStaffbasicinfo()
                .then((res) => {
                    app.globalData.user = res.data;
                    this.setData({
                        agencyName: res.data.agencyName
                    });
                })
                .catch((err) => {
                    console.log(err);
                    uni.redirectTo({
                        url: '/pages/login/login'
                    });
                });
        },

        handleChangeFilter(e) {
            this.setData({
                selectValue: e.detail.value,
                tableData: []
            });
            this.getIntelligentMessage();
        },

        handelClickClear() {
            clearMessage()
                .then((res) => {
                    this.setData({
                        tableData: [],
                        pageNo: 1
                    });
                    this.getIntelligentMessage();
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        toDetail(e) {
            this.clearOneMessage(e.currentTarget.dataset.item.id);
            if (e.currentTarget.dataset.item.msgType == 'resident_base_info') {
                uni.navigateTo({
                    url: `/subpages/searchResult/pages/resiInfo/resiInfo?resiId=${e.currentTarget.dataset.item.targetId}`
                });
            } else if (e.currentTarget.dataset.item.msgType == 'community_house') {
                uni.navigateTo({
                    url: `/subpages/addhouse/pages/addhouse/addhouse?type=edit&houseId=${e.currentTarget.dataset.item.targetId}`
                });
            } else if (e.currentTarget.dataset.item.msgType == 'resident_category') {
                uni.navigateTo({
                    url: `/subpages/residentCategory/pages/residentCategory/residentCategory?category=${e.currentTarget.dataset.item.category}`
                });
            }
            this.setData({
                [`tableData[${e.currentTarget.dataset.index}].readFlag`]: '1'
            });
        },

        clearOneMessage(id) {
            let parm = {
                msgId: id
            };
            api.clearOneMessage(parm)
                .then((res) => {
                    console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
        },

        // 人房信息采集
        getSituation() {
            uni.showLoading({
                title: '加载中'
            });
            overView()
                .then((res) => {
                    this.setData({
                        emptyHouseNum: this.formatNumberWithCommas(res.data.emptyHouseNum),
                        catesNonIntResiNum: this.formatNumberWithCommas(res.data.catesNonIntResiNum),
                        collectedHouseCount: this.formatNumberWithCommas(res.data.totalHouseNum),
                        collectedPopulationCount: this.formatNumberWithCommas(res.data.totalResiNum)
                    });
                    uni.hideLoading();
                })
                .catch((err) => {
                    uni.hideLoading();
                    console.log(err);
                });
        },

        formatNumberWithCommas(number) {
            return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        },

        onAddResident() {
            uni.navigateTo({
                url: '../../subpages/addResi/pages/addResi/addResi'
            });
        },

        onAddHouseLL() {
            uni.navigateTo({
                url: '../../subpages/addhouse/pages/addhouse/addhouse'
            });
        },

        noHouse() {
            uni.navigateTo({
                url: '../../subpages/nohouse/pages/nohouse/nohouse'
            });
        },

        onresno() {
            uni.navigateTo({
                url: '../../subpages/resnoinformation/pages/resnoinformation/resnoinformation'
            });
        },

        toDemandCheck() {
            uni.navigateTo({
                url: '../../subpages/demandCheck/pages/dissatisfied/demandCheck/demandCheck'
            });
        },

        recognitionCard() {
            uni.navigateTo({
                url: '../../subpages/OCRCard/pages/index/index'
            });
        },

        IDCard() {
            uni.navigateTo({
                url: '../../subpages/OCRCard/pages/index/index'
            });
        },

        back() {
            console.log('占位：函数 back 未声明');
        },

        handelClickShare() {
            console.log('占位：函数 handelClickShare 未声明');
        }
    }
};
</script>
<style>
page {
    position: relative;
    width: 750rpx;
    height: auto;
    display: flex;
    flex-direction: column;
    background-color: #f7f7f7;
    /* z-index: -9999; */
    font-family: 'PingFangSC-regular', sans-serif;
}
.header {
    display: flex;
    background: #1673ee;
    width: 100%;
    height: 300rpx;
    flex-direction: column;
    border-radius: 0 0 40rpx 40rpx;
    overflow: hidden;
}
.back {
    width: 30rpx;
    height: 30rpx;
    margin-left: 20rpx;
    margin-top: 20rpx;
    border-radius: 0rpx;
    z-index: 101;
}
.header .navigation {
    width: 100%;
    display: flex;
    color: #333333;
    font-size: 32rpx;
    position: relative;
    z-index: 100;
}

.header_image {
    width: 34rpx;
    height: 31rpx;
}
.header_text_1 {
    margin-left: 20rpx;
    margin-top: 12rpx;
    /* width: 157rpx;
  height: 30rpx; */
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 32rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
    margin-left: 15rpx;
}
.text-wrapper_8 {
    position: relative;
    left: 30rpx;
    top: -120rpx;
    width: 690rpx;
    height: 300rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}
.bg-image {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1; /* 使图片位于文本内容之后 */
}
.text_30 {
    text-shadow: 0px 2px 10px rgba(85, 91, 132, 0.33);
    width: 333rpx;
    height: 44rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 46rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 46rpx;
    margin: 68rpx 0 0 49rpx;
}
.paragraph_1 {
    text-shadow: 0px 2px 5px rgba(101, 103, 114, 0.36);
    width: 400rpx;
    height: 65rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 28rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 38rpx;
    margin: 40rpx 0 0rpx 49rpx;
}
.group_1 {
    position: relative;
    width: 689rpx;
    height: 124rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: -95rpx 0 0 30rpx;
}
.section_1 {
    box-shadow: 0px 2px 20px 0px rgba(53, 100, 158, 0.2);
    background-image: linear-gradient(-90deg, rgba(188, 217, 255, 1) 0, rgba(188, 217, 255, 1) 0, rgba(207, 228, 255, 1) 100%, rgba(207, 228, 255, 1) 100%);
    border-radius: 16rpx;
    width: 216rpx;
    height: 124rpx;
    display: flex;
    flex-direction: row;
}
.image-text_1 {
    width: 188rpx;
    height: 89rpx;
    flex-direction: row;
    display: flex;
    margin: 11rpx 0 0 20rpx;
}
.text-group_1 {
    width: 131rpx;
    height: 71rpx;
    margin-top: 18rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.text_1 {
    width: 111rpx;
    height: 28rpx;
    overflow-wrap: break-word;
    color: rgba(55, 129, 199, 1);
    font-size: 28rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
}
.text_2 {
    width: 131rpx;
    height: 22rpx;
    overflow-wrap: break-word;
    color: rgba(81, 150, 214, 1);
    font-size: 22rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin-top: 21rpx;
}
.image_1 {
    width: 70rpx;
    height: 70rpx;
    margin-left: -13rpx;
}
.section_2 {
    box-shadow: 0px 2px 20px 0px rgba(160, 183, 185, 0.29);
    background-image: linear-gradient(-90deg, rgba(166, 224, 231, 1) 0, rgba(166, 224, 231, 1) 0, rgba(198, 238, 243, 1) 100%, rgba(198, 238, 243, 1) 100%);
    border-radius: 16rpx;
    width: 216rpx;
    height: 124rpx;
    margin-left: 21rpx;
    display: flex;
    flex-direction: column;
}
.image-text_2 {
    width: 190rpx;
    height: 89rpx;
    flex-direction: row;
    display: flex;
    margin: 11rpx 0 0 19rpx;
}
.text-group_2 {
    width: 132rpx;
    height: 68rpx;
    margin-top: 21rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.text_3 {
    width: 112rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(53, 147, 139, 1);
    font-size: 28rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
}
.text_4 {
    width: 131rpx;
    height: 22rpx;
    overflow-wrap: break-word;
    color: rgba(83, 166, 159, 1);
    font-size: 22rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin: 20rpx 0 0 1rpx;
}
.image_2 {
    width: 70rpx;
    height: 70rpx;
    margin-left: -12rpx;
}
.section_3 {
    box-shadow: 0px 2px 20px 0px rgba(199, 172, 165, 0.34);
    background-image: linear-gradient(-90deg, rgba(247, 210, 200, 1) 0, rgba(247, 210, 200, 1) 0, rgba(255, 230, 221, 1) 100%, rgba(255, 230, 221, 1) 100%);
    border-radius: 16rpx;
    width: 216rpx;
    height: 124rpx;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
}
.image-text_3 {
    width: 188rpx;
    height: 87rpx;
    flex-direction: row;
    display: flex;
    margin: 13rpx 0 0 20rpx;
}
.text-group_3 {
    width: 130rpx;
    height: 68rpx;
    margin-top: 19rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.text_5 {
    width: 110rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(204, 136, 74, 1);
    font-size: 28rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 28rpx;
}
.text_6 {
    width: 130rpx;
    height: 22rpx;
    overflow-wrap: break-word;
    color: rgba(199, 149, 104, 1);
    font-size: 22rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin-top: 20rpx;
}
.image_3 {
    width: 70rpx;
    height: 70rpx;
    margin-left: -12rpx;
}
.group_2 {
    position: relative;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    width: 700rpx;
    height: 412rpx;
    display: flex;
    flex-direction: column;
    margin: 20rpx 24rpx 0 24rpx;
}
.text-wrapper_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    height: 90rpx;
    display: flex;
    flex-direction: column;
    width: 700rpx;
}
.text_7 {
    width: 202rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
    margin: 30rpx 0 0 29rpx;
}
.block_1 {
    width: 700rpx;
    height: 290rpx;
    flex-direction: row;
    display: flex;
    justify-content: center;
    margin-top: 5rpx;
}
.group_3 {
    width: 309rpx;
    height: 290rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    margin-right: 30rpx;
}

.image_house {
    width: 310rpx;
    height: 290rpx;
}
.text-group_4 {
    position: absolute;
    width: 114rpx;
    height: 80rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 38rpx 0 0 57rpx;
}
.text_8 {
    width: 114rpx;
    height: 41rpx;
    overflow-wrap: break-word;
    color: rgba(58, 128, 231, 1);
    font-size: 44rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
}
.text_9 {
    width: 102rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    white-space: nowrap;
    line-height: 36rpx;
    margin-top: 14rpx;
}
.text-group_5 {
    position: absolute;
    bottom: 20rpx; /* 调整文本在图片上的垂直位置 */
    right: 75rpx; /* 调整文本在图片上的水平位置 */
    display: flex;
    flex-direction: column;
    margin: 0 0 30rpx 0;
}
.text_10 {
    width: 112rpx;
    height: 41rpx;
    overflow-wrap: break-word;
    color: rgba(255, 76, 28, 1);
    font-size: 44rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
}
.text_11 {
    width: 180rpx;
    height: 25rpx;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    white-space: nowrap;
    line-height: 36rpx;
    margin-top: 12rpx;
}
.group_4 {
    width: 309rpx;
    height: 290rpx;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
}
.image_JM {
    width: 310rpx;
    height: 290rpx;
}
.text-group_6 {
    position: absolute;
    width: 114rpx;
    height: 80rpx;
    display: flex;
    flex-direction: column;
    margin-top: 40rpx;
    margin-left: 80rpx;
}
.text_12 {
    width: 180rpx;
    height: 41rpx;
    overflow-wrap: break-word;
    color: rgba(58, 128, 231, 1);
    font-size: 44rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
    line-height: 36rpx;
}
.text_13 {
    width: 180rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    white-space: nowrap;
    line-height: 36rpx;
    text-align: right;
    margin-top: 20rpx;
}
.text-group_7 {
    box-sizing: border-box;
    position: absolute;
    bottom: 75rpx;
    display: flex;
    flex-direction: column;
    margin-left: 80rpx;
    margin-bottom: -15rpx;
}
.text_14 {
    width: 180rpx;
    height: 41rpx;
    overflow-wrap: break-word;
    color: rgba(255, 76, 28, 1);
    font-size: 44rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
    line-height: 36rpx;
}
.text_15 {
    box-sizing: border-box;
    width: 180rpx;
    height: 41rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    white-space: nowrap;
    line-height: 36rpx;
    text-align: right;
    margin-top: 15rpx;
}
.group_5 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 20rpx;
    width: 710rpx;
    height: 502rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-center;
    margin: 20rpx 0 0 20rpx;
}
.text-wrapper_2 {
    width: 649rpx;
    height: 33rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0 0 29rpx;
}
.text_16 {
    width: 134rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
}
.text_17 {
    width: 53rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(180, 180, 180, 1);
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 36rpx;
    margin-top: 6rpx;
}
.box_2 {
    width: 648rpx;
    height: 31rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 45rpx 0 0 30rpx;
}
.image-text_4 {
    width: 535rpx;
    height: 31rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}
.label_1 {
    width: 30rpx;
    height: 30rpx;
}
.text-group_8 {
    width: 490rpx;
    height: 31rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 32rpx;
}
.text_18 {
    width: 51rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 1rpx;
}
.text-wrapper_3 {
    width: 648rpx;
    height: 27rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 23rpx 0 0 30rpx;
}
.text_19 {
    width: 169rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}
.text_20 {
    width: 228rpx;
    height: 20rpx;
    overflow-wrap: break-word;
    color: rgba(193, 193, 193, 1);
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 4rpx;
}
.image_4 {
    width: 650rpx;
    height: 1rpx;
    margin: 30rpx 0 0 31rpx;
}
.text-wrapper_4 {
    width: 650rpx;
    height: 31rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0 0 30rpx;
}
.text_21 {
    width: 554rpx;
    height: 31rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
}
.text_22 {
    width: 51rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 1rpx;
}
.text-wrapper_5 {
    width: 648rpx;
    height: 26rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 24rpx 0 0 30rpx;
}
.text_23 {
    width: 168rpx;
    height: 26rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}
.text_24 {
    width: 228rpx;
    height: 20rpx;
    overflow-wrap: break-word;
    color: rgba(193, 193, 193, 1);
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 3rpx;
}
.image_5 {
    width: 650rpx;
    height: 1rpx;
    margin: 30rpx 0 0 31rpx;
}
.text-wrapper_6 {
    width: 649rpx;
    height: 31rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 29rpx 0 0 30rpx;
}
.text_25 {
    width: 546rpx;
    height: 31rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 42rpx;
}
.text_26 {
    width: 51rpx;
    height: 25rpx;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 5rpx;
}
.text-wrapper_7 {
    width: 648rpx;
    height: 27rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 23rpx 0 30rpx 30rpx;
}
.text_27 {
    width: 168rpx;
    height: 27rpx;
    overflow-wrap: break-word;
    color: rgba(153, 153, 153, 1);
    font-size: 28rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
}
.text_28 {
    width: 228rpx;
    height: 20rpx;
    overflow-wrap: break-word;
    color: rgba(193, 193, 193, 1);
    font-size: 26rpx;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 40rpx;
    margin-top: 4rpx;
}
.content {
    display: flex;
    flex-direction: column;
    width: 700rpx;
    height: auto;
    background-color: #ffffff;
    border-radius: 20rpx;
    overflow: hidden;
    margin: 20rpx 24rpx 0 24rpx;
}
.hd_news {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    margin: 30rpx 30rpx 0rpx 30rpx;
    height: 70rpx;
}
.news_remind {
    width: 202rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 34rpx;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 52rpx;
}
.more {
    font-size: 28rpx;
    color: #b4b4b4;
    line-height: 36rpx;
}
.Information {
    height: 115rpx;
    display: flex;
    flex-direction: column;
    margin: 10rpx 30rpx 0 30rpx;
    border-bottom: 2rpx solid #eaeaea;
}
.Information1 {
    height: 110rpx;
    display: flex;
    flex-direction: column;
    margin: 15rpx 30rpx 0 30rpx;
}
.Information_one {
    display: flex;
    justify-content: space-between;
    margin-top: 20rpx;
}
.Information_test {
    width: 490rpx;
    height: auto;
    font-size: 32rpx;
    color: #333333;
    line-height: 32rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.Information_test2 {
    width: 60rpx;
    height: auto;
    font-size: 26rpx;
    color: #666666;
    line-height: 40rpx;
}
.Information_two {
    display: flex;
    justify-content: space-between;
    margin: 10rpx 0 20rpx 0rpx;
}
.Information_test3 {
    width: 169rpx;
    height: auto;
    font-size: 28rpx;
    color: #999999;
    line-height: 40rpx;
}
.Information_test4 {
    width: auto;
    height: auto;
    font-size: 26rpx;
    color: #c1c1c1;
    line-height: 40rpx;
}
.one_one {
    display: flex;
    flex-direction: row;
}
.Information_image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
}
.imge1 {
    width: 309rpx;
    height: 300rpx;
}
.imge2 {
    width: 309rpx;
    height: 300rpx;
}
/* pages/work/work.wxss */

.list_card {
    font-size: 40rpx;
    font-family: DIN Alternate;
    color: #ff783c;
    /* align-items: center; */
}
.right text {
    font-size: 34rpx;
    font-family: DIN Alternate;
    color: #ff783c;
    /* align-items: center; */
}
.right {
}
.bg_new_box {
    background: #f9fbfe;
    height: 230rpx;
    width: 95%;
    margin-top: -30rpx;
    margin-left: -10rpx;
    margin-bottom: 10rpx;
    border-radius: 10px;
}
.bg_new_box {
    position: relative;
}
.bg_new_right {
    position: absolute;
    float: right;
    top: 70%;
    transform: translateY(-50%);
    right: 0;
}
.bg_new_box .tag {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    background: #ffefdb;
    border-radius: 0rpx 10rpx 0rpx 10rpx;
    padding: 10rpx 26rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff783c;
    margin-top: 20rpx;
}
.new_h2 {
    margin-top: 40rpx;
    margin-left: 40rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 52rpx;
}
.new_submitt {
    margin-top: 20rpx;
    font-size: 30rpx;
    opacity: 0.5;
    bottom: 0;
    margin-left: 30rpx;
}
.list {
    width: 650rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.list_card {
    width: 650rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* align-items: center; */
    color: #333333;
    padding: 10rpx 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 32rpx;
}

.list_card:last-child {
}

.list_card .special {
    font-size: 40rpx;
    font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
    color: #ff783c;
}
.new_left {
    float: left;
    margin-left: 32rpx;
    font-size: 36rpx;
}
.new_hh {
    margin-bottom: 12rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 52rpx;
}
.new_submit {
    margin-top: 30rpx;
    font-size: 30rpx;
    opacity: 0.5;
    bottom: 0;
    margin-top: auto;
}
.btn_fx {
    margin-left: 32rpx;
    width: 160rpx;
    font-size: 28rpx;
    height: 56rpx;
    background: #ff783c;
    border-radius: 28rpx;
    text-align: center;
    line-height: 56rpx;
    padding: 0 !important;
    color: #fff;
    margin-top: 30rpx;
}
.btn_tj {
    margin-left: 232rpx;
    margin-top: -55rpx;
    width: 160rpx;
    height: 56rpx;
    background: #13c8bd;
    border-radius: 28rpx;
    text-align: center;
    line-height: 56rpx;
    color: #fff;
    font-size: 28rpx;
}
.bg_new_left {
    margin-right: 20px;
}
.electron {
    position: relative;
    width: 690rpx;
    height: 100rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 23rpx 0 0 30rpx;
}
.door {
    display: flex;
    width: 335rpx;
    height: 100rpx;
    border-radius: 20rpx;
    justify-content: center;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 2px 20px 0px rgba(150, 161, 175, 0.15);
}
.door .door-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 32rpx;
    margin-left: 20rpx;
    font-family: PingFangSC-regular;
}
.img_door {
    height: 44rpx;
    width: 44rpx;
}
.electron_card {
    display: flex;
    width: 335rpx;
    height: 100rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 2px 20px 0px rgba(150, 161, 175, 0.15);
}
.card_text {
    margin-left: 20rpx;
    font-size: 32rpx;
}
</style>
