<template>
    <div class="waterSurvey-container">
        <div class="survey-top section-con">
            <div class="survey-top-left">
                <img
                    class="section-title-img"
                    src="../../assets/img/title_icon.png"
                /><span class="section-title">单位介绍</span>
                <div
                    style="
                        height: calc(100% - 40px);
                        overflow-y: auto;
                        padding-top: 5px;
                    "
                >
                    <span style="line-height: 22px; font-size: 14px">
                        &emsp;&emsp;重庆市北碚区水利局成立于1995年2月12日。（1995年2月12日，经区委决定成立北碚区农机水电局，2001年8月22日，北碚区农机水利局改名为水利农机局，2009年12月9日，北碚区水利农机局更名为北碚区水利局）。北碚区水利局贯彻落实党中央、市委市政府、区委区政府关于水利工作的方针政策和决策部署，在履行职责过程中坚持和加强党对水利工作的集中统一领导。<br />
                        &emsp;
                        &emsp;局机关内设机构（5个）：办公室、财务科、水利管理科、水利规划建设科、河长制工作科；<br />
                        &emsp;&emsp;直属事业单位（事业单位9个）：参公事业单位（2个）：重庆市北碚区水行政执法大队、重庆市北碚区水旱灾害防御中心；全额拨款事业单位（7个）：重庆市北碚区移民工作事务中心、重庆市北碚区水库管理中心、重庆市北碚区水资源（水文）站、重庆市北碚区水土保持站、重庆市北碚区水利工程质量监督站、重庆市北碚区水质监测站、重庆市北碚区水利安全监督管理站。截止目前，我局共有职工73人（含非在编人员10人）。<br />
                        &emsp;&emsp;近年来，北碚区水利基础设施建设进一步加强，最严格水资源管理制度加快实施，水利改革全面推进，水利投资规模再创新高。到2020年底，全区完成各类水利投资7.89亿元，其中，市级资金5.13亿元，区级资金2.76亿元。
                    </span>
                    <p></p>
                </div>
            </div>
            <div class="survey-bottom-right">
                <div style="margin-left: 5px">
                    <video
                        id="mse"
                        autoplay
                        playsinline
                        muted
                        controls="controls"
                        style="width: 100%; height: 100%"
                    >
                        <source
                            src="http://183.230.17.146:9080/video/bbslj0121.mp4"
                            type="video/mp4"
                        />
                        你的浏览器不支持Video标签
                    </video>
                </div>
            </div>
        </div>
        <div class="survey-bottom">
            <div class="survey-top-right section-con">
                <img
                    class="section-title-img"
                    src="../../assets/img/title_icon.png"
                /><span class="section-title">工作动态</span>
                <div class="top-right-content">
                    <div class="top-right-content-item-one" ref="carouselBox">
                        <el-carousel :height="carouselHeight + 'px'">
                            <el-carousel-item
                                v-for="item in shufflings"
                                :key="item.id"
                            >
                                <img
                                    style="width: 100%; height: 100%"
                                    :src="
                                        previewUrl +
                                        item.rotatingDisplayPictures
                                    "
                                    alt=""
                                    @click="openHistory(item)"
                                />
                                <div
                                    class="survey-top-box"
                                    @click="openHistory(item)"
                                >
                                    <span style="font-size: 14px">
                                        {{ item.title }}</span
                                    >
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div class="top-right-content-item">
                        <div
                            id="realWater"
                            class="scroll-table full full-out-header padding"
                        >
                            <vue-seamless-scroll
                                class="scroll-table-body"
                                :data="tabelData"
                                :class-option="optionSingleHeightTime"
                            >
                                <div
                                    class="scroll-table-column"
                                    v-for="column in tabelData"
                                    :key="column.id"
                                    @click="openHistory(column)"
                                >
                                    <div
                                        class="column-item ellipsis"
                                        style="width: 70%; font-size: 14px"
                                        :title="column.title"
                                    >
                                        {{ column.title }}
                                    </div>
                                    <div
                                        class="column-item ellipsis"
                                        style="
                                            width: 30%;
                                            text-align: right;
                                            font-size: 14px;
                                        "
                                        :title="column.createTime"
                                    >
                                        {{ column.createTime }}
                                    </div>
                                </div>
                            </vue-seamless-scroll>
                        </div>
                    </div>
                </div>
            </div>

            <div class="survey-bottom-left">
                <div class="bottom-left section-con">
                    <img
                        class="section-title-img"
                        src="../../assets/img/title_icon.png"
                    /><span class="section-title">领导信息</span>
                    <div class="bottom-left-content">
                        <div
                            class="content-item"
                            v-for="(item, index) in leadershipList"
                            :key="index"
                            @click="toDetails(item)"
                        >
                            <div>
                                <img :src="item.img" alt="" />
                            </div>
                            <div style="font-weight: bold; line-height: 10px">
                                <p>{{ item.name }}</p>
                                <p>{{ item.position }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-right section-con">
                    <img
                        class="section-title-img"
                        src="../../assets/img/title_icon.png"
                    /><span class="section-title">科室情况</span>
                    <div class="bottom-left-box">
                        <div
                            class="bottom-left-box-item"
                            v-for="(i, ix) in organList"
                            :key="ix"
                            @click="toAgencyUnit(i)"
                        >
                            <div class="item-top" style="background: #247eeb">
                                <img :src="i.icon" alt="" width="60%" />
                            </div>
                            <p>{{ i.name }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <newsRichText ref="newsRichText" @close="closeModel"></newsRichText>
        <LedDetails ref="LedDetails" @close="closeModel"></LedDetails>
        <AgencyUnit ref="AgencyUnit" @close="closeModel"></AgencyUnit>
    </div>
</template>

<script>
import req from '@/request.js'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import VueSeamlessScroll from 'vue-seamless-scroll'
import newsRelease from '@/api/newsRelease.js'
import newsRichText from './components/newsRichText.vue'
import LedDetails from './components/LedDetails.vue'
import AgencyUnit from './components/AgencyUnit.vue'

export default {
    name: 'waterSurvey',
    components: {
        VueSeamlessScroll,
        newsRichText,
        LedDetails,
        AgencyUnit,
    },
    data() {
        return {
            previewUrl:
                window.context.portal +
                '/file/onlinePreviewController/v1/getFileById_',
            srcList: [require('../../assets/img/map.png')],
            shufflings: [],
            tabelData: [],
            queryParam: {
                pageBean: {
                    pageSize: 20,
                    page: 1,
                },
                params: {},
                querys: [],
            },
            carouselHeight: null,
            ecologicalFlowHeader: [
                {
                    key: 'title',
                    width: '50%',
                    name: '标题',
                },
                {
                    key: 'createTime',
                    width: 'calc(50% - 14px)',
                    name: '发布时间',
                },
            ],
            leadershipList: [
                {
                    img: require('../../assets/img/huangzhilin.jpg'),
                    name: '黄志林',
                    position: '党组书记、局长',
                    task: '主持全面工作',
                    resume: '黄志林，男，汉族，1979年8月生，工学硕士学位，中共党员。现任中共重庆市北碚区水利局党组书记、重庆市北碚区水利局局长。',
                },
                {
                    img: require('../../assets/img/wangli.jpg'),
                    name: '王丽',
                    position: '党组成员、副局长',
                    task: '分管工作：规划计划、招投标、工程统计、农村水利、饮水安全、行政审批、脱贫攻坚与乡村振兴有效衔接、水利行业安全管理、工程建设质量管理、爱国卫生。分管科室：水利规划建设科、水利管理科、水利工程质量监督站、水利安全监督管理站',
                    resume: '王丽，女，汉族，1970年12月生，大学、工学学士，中共党员。现任中共重庆市北碚区水利局党组成员、重庆市北碚区水利局副局长。',
                },
                {
                    img: require('../../assets/img/hujinbiao.jpg'),
                    name: '胡锦标',
                    position: '党组成员、副局长',
                    task: '分管工作：财务、大中型水库农村移民后期扶持、三峡移民、行政执法、扫黑除恶专项斗争、水文水质监测、水土保持、水资源管理与节约用水、生态文明建设、环境保护、全域旅游。分管科室：财务科、移民事务工作中心、水行政执法大队、水文水质监测站、水资源站、水土保持站。',
                    resume: '胡锦标，男，汉族，1976年12月生，大学、工学学士，中共党员。现任中共重庆市北碚区水利局党组成员、重庆市北碚区水利局副局长',
                },
                {
                    img: require('../../assets/img/libo.jpg'),
                    name: '李 波',
                    position: '党组成员、副局长',
                    task: '分管工作：党建、工会、群团、统战、党风廉政建设、意识形态、机关政务、组织人事、信息宣传、文秘、档案、保密、督查督办、政务公开、后勤管理、信访稳定、反恐怖、老干部、信息化建设、精神文明、审计工作、民营经济发展、支援巫山工作、校地合作、河道管理、水旱灾害防御、水库管理、农村水电及电气化、长江经济带小水电清理、河长制工作河长制工作。分管科室：办公室、水旱灾害防御中心、水库管理中心、河长制工作科。联系重庆市北碚区水利学会。',
                    resume: '李波，男，汉族，1982年3月生，大学、农学学士，中共党员。现任中共重庆市北碚区水利局党组成员、重庆市北碚区水利局副局长。',
                },
            ],
            organList: [
                {
                    name: '办公室',
                    icon: require('../../assets/img/office.png'),
                    color: '#247EEB',
                    content:
                        '&emsp;&emsp;协助局领导对各科室工作进行综合协调，负责机关日常运转工作，承担信息安全、政务公开工作，负责党群、党风廉政建设、纪检、机要、保密、干部人事、机构编制、劳动工资、信息化、档案、信访、新闻宣传、后勤、会务、督查督办、审计等工作。负责机关规章制度的建设、水利信息化和保卫工作等。负责组织综合性文稿材料撰写工作，组织开展水利行业重大综合性课题调研。负责水利行业人才队伍建设工作。负责水利对口支援工作。负责指导水利行业的信访稳定工作，承担来信来访接待和处理工作。负责机关和直属事业单位退休人员管理工作。 ',
                },
                {
                    name: '财务科',
                    icon: require('../../assets/img/financial.png'),
                    color: '#FF8C00',
                    content:
                        '&emsp;&emsp;负责编制部门预算并组织实施。负责监督实施水利有关财务方面的政策、法规，并拟定相关制度和办法。负责提出区级及以上水利财政资金安排建议，并统筹协调项目资金的监督管理和绩效评价。负责局机关财务及资金的管理，指导直属单位的财务管理，监督管理水利系统的国有资产，提出有关水利价格、税费、基金、信贷的建议。',
                },
                {
                    name: '水利科',
                    icon: require('../../assets/img/water.png'),
                    color: '#66CC66',
                    content:
                        '&emsp;&emsp;负责水利行政许可工作，承担行政许可、行政处罚的听证组织工作，承办行政复议工作。承担本部门行政审批制度改革工作，规范本系统行政审批工作，按照 “三集中、三到位”的要求，相对集中本部门有关行政审批事项的受理和审批工作。具体管理本部门行政审批窗口。指导实施农村饮水工程建设管理工作。组织指导节水灌溉有关工作。负责水利扶贫等工作。',
                },
                {
                    name: '规建科',
                    icon: require('../../assets/img/rulesBuild.png'),
                    color: '#669999',
                    content:
                        '&emsp;&emsp;负责编制全区水利战略规划、中长期规划、综合规划、流域规划和重大专项规划。负责重大水利改革统筹协调。负责全区水利工程建设项目合规性审查。指导水利建设项目后评价工作。承担水利统计、普查工作。指导水利工程建设管理及造价管理工作。负责水利技术工作，组织实施区级水利项目规划、可行性研究、初步设计和区级水利行政许可项目的技术审查以及建设和运行管理重大技术审查工作。',
                },
                {
                    name: '河长制工作科',
                    icon: require('../../assets/img/longRiverSystem.png'),
                    color: '#FF99FF',
                    content:
                        '&emsp;&emsp;负责全区水生态建设工作。负责全区推进河（库）长制工作的协调、督导、考核等具体工作。起草拟订河（库）长制管理制度，承办区总河长会议，落实区级总河长、副总河长确定的事项。拟订和分解全区河（库）长制年度目标任务，并监督实施。承担北碚区河长制办公室日常工作。',
                },
                {
                    name: '防御中心',
                    icon: require('../../assets/img/defense.png'),
                    color: '#25B4BE',
                    content:
                        '&emsp;&emsp;组织编制全区洪水干旱防治规划和防护标准、重要江河水库和重要水工程的防御洪水抗御旱灾调度以及应急水量调度方案并实施。组织实施全区山洪灾害治理、水利水毁工程修复工作。负责落实综合防灾减灾规划相关要求，组织实施洪水干旱灾害防治规划和防护标准；承担日常水情旱情监测预警工作；组织编制重要江河水库和重要水工程的防御洪水抗御旱灾调度和应急水量调度方案，按程序报批并组织实施。承担防御洪水应急抢险的技术支撑工作。',
                },
                {
                    name: '河道科',
                    icon: require('../../assets/img/river.png'),
                    color: '#912CEE',
                    content:
                        '&emsp;&emsp;负责全区河道及其岸线的管理与保护，组织实施河道管理范围划定工作。指导全区江河、湖泊、滩涂、河口的开发、治理和保护。监督管理河道采砂工作，负责河道采砂规划和计划的编制及河道砂石资源有偿使用制度实施。组织实施河道管理范围内工程建设方案审查和防洪论证制度。',
                },
                {
                    name: '水行政执法大队',
                    icon: require('../../assets/img/Lawenforcement.png'),
                    color: '#8B2323',
                    content:
                        '&emsp;&emsp;组织指导水政监察和水行政执法，组织查处重大涉水违法事件。',
                },
                {
                    name: '移民工作事务中心',
                    icon: require('../../assets/img/transaction.png'),
                    color: '#7FFFD4',
                    content:
                        '&emsp;&emsp;负责水利工程移民管理工作。贯彻执行水利工程移民有关政策并监督实施。负责指导监督水库移民后期扶持政策的实施。负责全区移民资金、移民项目的监督管理。承担北碚区三峡库区移民安置办公室日常工作。承担水利工程移民安置管理工作，承担新增大中型水利工程（水库）移民后期扶持人口审核、登记和申报工作。组织编制并实施全区大中型水库移民后期扶持规划，执行大中型水库移民后期扶持政策。 负责全区三峡工程后续工作规划的综合协调、组织实施和监督管理。负责全区三峡库区基金的使用管理。配合落实渝西水资源配置工程相关工作。 ',
                },
                {
                    name: '水库管理中心',
                    icon: require('../../assets/img/reservoir.png'),
                    color: '#3333FF',
                    content:
                        '&emsp;&emsp;组织实施水库及水闸的注册登记、水库大坝安全鉴定、验收和监测。组织编制水库运行调度规程。指导水库、水电站大坝、堤防等水利工程的运行管理与划界。指导水电农村电气化、农村水电增效扩容改造以及小水电代燃料等农村水能资源开发工作。',
                },
                {
                    name: '水资源站',
                    icon: require('../../assets/img/waterQuality.png'),
                    color: '#FF0000',
                    content:
                        '&emsp;&emsp;承担实施最严格水资源管理制度相关工作，组织实施取水许可、水资源论证、用水总量控制等制度。组织编制水资源保护规划。负责编制并协调实施节约用水规划。组织指导用水计划、节约用水工作。组织实施用水效率控制和定额管理制度，指导和推动节水型社会建设工作。指导城市污水处理回用等非常规水源开发利用工作。负责水利设施的管理、保护和综合利用。',
                },
                {
                    name: '水文水质监测站',
                    icon: require('../../assets/img/monitoring.png'),
                    color: '#CCC333',
                    content:
                        '&emsp;&emsp;指导水文工作。负责全区水文水资源监测、水文站网建设和管理。对江河湖库和地下水实施监测，发布水文水资源信息、情报预报和水资源公报。按规定组织开展水资源、水能资源调查评价和水资源承载能力监测预警工作。',
                },
                {
                    name: '水土保持站',
                    icon: require('../../assets/img/soilWater.png'),
                    color: '#33FF66',
                    content:
                        '&emsp;&emsp;拟订水土保持规划并监督实施，组织实施水土流失的综合防治、监测预报。负责建设项目水土保持监督管理工作，指导重点水土保持建设项目的实施。承担北碚区水土保持委员会办公室日常工作。',
                },
                {
                    name: '质监、安监站',
                    icon: require('../../assets/img/Qualityinspection.png'),
                    color: '#CCCCCC',
                    content:
                        '&emsp;&emsp;组织开展水利行业工程质量监督工作，组织实施水利行业的地方技术标准和规程规范，组织重大水利科学研究和技术推广。指导监督水利工程建设与运行管理。组织实施全区重要水利工程建设与运行管理。指导监督工程安全运行，组织工程验收有关工作。依法负责水利行业安全生产工作，组织指导水库、水电站大坝、农村水电站的安全监管。指导水利建设市场的监督管理，组织实施水利工程建设的监督。',
                },
            ],
        }
    },
    computed: {
        optionSingleHeightTime() {
            return {
                limitMoveNum: 7,
                singleHeight: 41,
                waitTime: 2500,
            }
        },
    },
    created() {
        this.getDateList()
        this.getTabelList()
    },
    mounted() {
        this.getCarousel()
        window.addEventListener(
            'resize',
            () => {
                this.carouselHeight = this.$refs.carouselBox.offsetHeight
                this.getCarousel()
            },
            false
        )
    },
    methods: {
        getCarousel() {
            this.$nextTick(() => {
                this.carouselHeight = this.$refs.carouselBox.offsetHeight
            })
        },
        //打开领导人详情
        toDetails(item) {
            this.$refs.LedDetails.open(item)
            this.$refs.AgencyUnit.close(item)
        },
        toAgencyUnit(item) {
            this.$refs.AgencyUnit.open(item)
            this.$refs.LedDetails.close(item)
        },
        getTabelList() {
            let queryParam = {
                pageBean: {
                    pageSize: 14,
                    page: 1,
                },
                params: {},
                // querys: [{
                // 	property: "type",
                // 	value: '1,2',
                // 	group: "advance",
                // 	relation: "AND",
                // 	operation: "IN"
                // }],
                sorter: [
                    {
                        direction: 'DESC',
                        property: 'createTime',
                    },
                ],
            }
            this.tabelData = []
            newsRelease.ListGet(queryParam, (res) => {
                if (res.rows) {
                    this.tabelData = res.rows
                    this.tabelData.forEach((e) => {
                        if (!e.createTime) {
                            e.createTime = ''
                        } else {
                            e.createTime = e.createTime.slice(0, 10)
                            console.log(e.createTime)
                        }
                    })
                }
            })
        },
        closeModel() {
            this.$nextTick(() => {
                // this.$refs.videoIframe.repairWindow()
            })
        },
        openHistory(val) {
            if (val.url) {
                window.open(val.url)
            } else {
                this.$refs.newsRichText.open(val)
            }
        },
        getDateList(val) {
            let queryParam = {
                pageBean: {
                    pageSize: 7,
                    page: 1,
                },
                params: {},
                querys: [
                    {
                        property: 'type',
                        value: 2,
                        group: 'advance',
                        relation: 'AND',
                        operation: 'EQUAL',
                    },
                ],
                sorter: [
                    {
                        direction: 'DESC',
                        property: 'createTime',
                    },
                ],
            }
            this.shufflings = []
            newsRelease.ListGet(queryParam, (res) => {
                if (res.rows) {
                    this.shufflings = res.rows
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.waterSurvey-container {
	display: flex;
	overflow: hidden;
	height: 100%;
	width: 100%;
	padding: 0 20px;
	background: #060f18; //#ebeef5;
	box-sizing: border-box;
	// background-image: url('./../assets/img/waterbg5.jpg'); 
	background-image: url('../../assets/img/app-bg.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #fff;
	position: relative;

}

.survey-top {
	width: 35%;
	height: 100%;

	.survey-top-left {
		width: 100%;
		height: 56%;
		padding-right: 1%;
		box-sizing: border-box;
	}

	.survey-bottom-right {
		width: 100%;
		height: 44%;
		box-sizing: border-box;
	}


}

// .survey-map {
// 	width: 33%;

// 	img {
// 		max-width: 100%;
// 	}
// }

.el-carousel__item h3 {
	color: #475669;
	font-size: 18px;
	opacity: 0.75;
	margin: 0;
}

.scroll-table {
	.scroll-table-header {
		width: 100%;
		display: flex;
		justify-content: space-around;
		background: rgba(#0574d4, 0.8);
		background: rgba(92, 88, 79, 0.6);
		height: 36px;
		line-height: 36px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.scroll-table-body {
		height: 100%;
		overflow: hidden;
	}

	.scroll-table-body.solid {
		height: 100%;
		overflow-y: auto;
	}

	.header-item,
	.column-item {
		text-align: left;
	}

	.scroll-table-column {
		cursor: pointer;
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.header-item {
		font-size: 16px;
		font-weight: 700;
		color: #d8dddd;
	}

	.scroll-table-column {
		padding: 13px 10px;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(0, 132, 251, 0.2);
	}

	.scroll-table-column:nth-of-type(2n) {
		background-color: rgba(0, 132, 251, 0.1);
	}

	.column-item {
		font-size: 12px;
		color: #dbdbdb;
		padding-right: 4px;
		box-sizing: border-box;
	}

	.column-item-icon {
		display: inline-block;
		width: 10px;
		height: 10px;
		line-height: 12px;
		background-color: #ff9a00;
		border-radius: 100%;
		margin-right: 4px;
	}
}

.section-title {
	display: inline-block;
	background: linear-gradient(to right, #c2a071, transparent, transparent);
	height: 20px;
	width: calc(100% - 35PX);
	padding: 2px 0;
	line-height: 18px;
	font-style: oblique;
	font-weight: 700;
	text-shadow: 1px 1px 2px #000;
	font-size: 21px;
	margin-top: 10px;
}

.section-title-img {
	margin-top: 10px;
	margin-left: 4px;
	margin-right: 4px;
	width: 14px;
	height: 14px;
}

.survey-bottom {
	width: 64%;
	margin-left: 1%;
	height: 100%;

	.survey-top-right {
		width: 100%;
		height: 50%;

		.top-right-content {
			width: 100%;
			height: calc(100% - 40px);
			display: flex;

			.top-right-content-item {
				width: 40%;
				height: 98%;
				box-sizing: border-box;
				padding-top: 10px;
				padding-left: 20px;
			}

			.top-right-content-item-one {
				cursor: pointer;
				width: 60%;
				height: 100%;
				box-sizing: border-box;
				padding-top: 5px;
				padding-left: 20px;
			}

		}
	}

	.survey-top-box {
		position: absolute;
		bottom: 0;
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
		width: 100%;
		height: 16%;
		text-align: center
	}

	.survey-bottom-left {
		width: 100%;
		height: 50%;
		margin-top: 10px;
		box-sizing: border-box;
		display: flex;

		.bottom-left {
			width: 50%;
			height: 100%;

			.bottom-left-content {
				cursor: pointer;
				width: 100%;
				height: calc(100% - 50px);
				display: flex;
				flex-wrap: wrap;

				.content-item {
					display: flex;
					align-items: center;
					width: 48%;
					height: 50%;

					div {
						width: 50%;
						text-align: center;

						img {
							width: 90%;
						}
					}
				}

			}
		}

		.bottom-right {
			margin-left: 5px;
			width: 50%;
			height: 100%;

			.bottom-left-box {
				cursor: pointer;
				width: 100%;
				height: calc(100% - 50PX);
				display: flex;
				flex-wrap: wrap;
				justify-content: space-evenly;

				.bottom-left-box-item {
					text-align: center;
					font-weight: bold;
					width: 19%;
					height: 33%;
					padding-top: 10px;
					box-sizing: border-box;

					.item-top {
						margin: 0 auto;
						margin-top: 10px;
						width: 50px;
						height: 50px;
						border-radius: 50%;

						img {
							margin: 20%;
						}
					}
				}
			}
		}



		.survey-top-item-content {
			width: 100%;
			height: 90%;
			margin-top: 5px;
			display: flex;
			flex-wrap: wrap;
			// border: 1px solid blueviolet;

			// flex-direction: column;
			.content-item {
				width: 50%;
				height: 50%;
				box-sizing: border-box;
				display: flex;
				// border: 1px solid red;
				overflow: hidden;

				.item-left {
					width: 25%;
					padding: 0 20px;
					text-align: center;

					// border: 1px solid goldenrod;
					img {
						width: 70%;
					}
				}

				.item-right {
					width: 75%;


					.item-right-box {
						.title {
							margin: 5px 0;
							padding-left: 10px;
							box-sizing: border-box;
							color: #0574d4;
							font-weight: bold;
							border-left: 3px solid #0574d4;
						}

						.content {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
		}
	}

	.survey-bottom-item {
		width: 100%;
		height: 50%;
	}
}

.section-con {
	background: rgba(#314351, 0.2);
	box-shadow: inset 0 0 100px rgba(#000, 0.3);
	position: relative;
}

.section-con:hover {
	box-shadow: inset -10px 10px 100px rgba(#000, 0.3), 0 0 4px rgba(#fff, 0.2);
}
</style>
