<template>
    <div>
        <div class="flex selectbox">
            <div class="flex div goAreahome ai-c jc-c cursor" @click="navsAllClick">市总平台</div>
            <div class="flex flex-1 div ai-c jc-c nowrap cursor" :class="roleInfo.navsIndex==index?'active':''" @click="navsClick(item,index)" v-for="(item, index) in roleInfo.areasArr">{{item.name}}</div>
        </div>
      <div class="flex mt-3 common-box" style="padding: 40px 20px;">
        <div class="swiper-container">
            <el-carousel>
                <el-carousel-item v-for="item in roleInfo.newsImgData" :key="item">
                    <img class="max-w max-h" :src="item" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="flex flex-1 ml-2 column news-container jc-sb">
            <div>
                <div class="flex mb-2 ai-c jc-sb news-title">
                    <span class="ml-1 fw-b fz-20" style="color:#B91410">新闻动态</span>
                    <!-- <span class="cursor fz-16" @click="moreClick('4')">更多》</span> -->
                </div>
                <div style="height: 350px;overflow:auto">
                    <vue3-seamless-scroll :list="roleInfo.newsData" :hover="true" :copyNum="5"  class="scroll">
                        <div v-for="(item,index) in roleInfo.newsData">
                            <div class="flex news-li jc-sb ai-c cursor" @click="newsClick(item)">
                                <div class="flex flex-1 labelsli ai-c jc-c row">
                                    <el-icon><CaretRight /></el-icon>
                                    <span class="label">{{ item.title }}</span>
                                </div>
                                <div class="time">{{ item.date }}</div>
                            </div>
                        </div>
                    </vue3-seamless-scroll> 
                </div> 
            </div>
        </div>
      </div>

      <div class="mt-3 common-box">
        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
            <span class="commontitle" @click="supplyReload" >合作社风采</span>
            <!-- <div class="flex flex-1 ml-3">
                <div class="ml-2 cursor supplyspan" v-for="(item,index) in roleInfo.supplyArr" :class="roleInfo.supplyIndex==index?'red':''" @click="supplyClick(item,index)">
                    {{item.name}}
                </div>
            </div> -->
            <span class="more-common" @click="hzsmoreClick">更多+</span>
        </div>
        <div class="line-common"></div>
        <div class="flex wrap">
            <div class="flex jdbox jc-c column">
                <div class="flex mb-2 jdli-box fc-w" v-for="(item,index) in roleInfo.jdOptionsArr" :key="index">
                    <div class="circle fz-20">{{item.value}}</div>
                    <div class="line">{{item.name}}</div>
                </div>
            </div>
            <div class="mapimg pos-r max-h">
                <MapBox @godetails="godetailsMap"></MapBox>
            </div>
            <div class="flex-1 auto" style="height: 800px">
                <vue3-seamless-scroll :list="roleInfo.servesData" :hover="true" :copyNum="2" class="scroll">
                    <div class="flex mb-2 max-w cursor serveli" v-for="item in roleInfo.servesData" @click="godetailsMapRIght(item)">
                        <div class="auto wrap" style="height: 150px;width:150px;">
                            <el-carousel width="150px" height="150px" direction="vertical" v-if="item.srcArr">
                                <el-carousel-item  v-for="(val,num) in item.srcArr" :key="item" >
                                    <img style="width: 150px;height:150px;" :src="BaseApi + val" /> 
                                </el-carousel-item>
                            </el-carousel>
                            <div style="width: 150px;height:150px;" v-if="!item.srcArr || item.srcArr.length < 2">
                                <img class="max-w max-h" src="/public/images/serverno.png" />
                            </div>
                        </div>
                        <div class="flex flex-1 max-h column jc-sb label">
                            <p class="fz-18 fw-b ta-l">{{ item.name }}</p>
                            <p class="fz-16">{{ item.type }}</p>
                        </div>
                        <div class="viewDetail">查看详情<el-icon><Right /></el-icon></div>
                    </div>
                  </vue3-seamless-scroll>
 
            </div>           
        </div>
      </div>
      
      <div class="mt-3 common-box">
        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
            <span class="commontitle">农发优品</span>
            <spam class="more-common" @click="moreClick('1')">更多+</spam>
        </div>
        <div class="line-common"></div>
        <div class="goodsbox">
            <vue3-seamless-scroll :list="roleInfo.goodsData" direction="left" :hover="true" >
                <div class="flex jc-sb row goodsbox">
                    <div class="mb-2 goodsli-common cursor" v-for="item in roleInfo.goodsData"  @click="godetails(item, '1')">
                        <div class="img">
                            <el-carousel width="291px" height="169px" v-if="item.srcArr">
                                <el-carousel-item  v-for="(val,num) in item.srcArr" :key="item" >
                                    <img style="width: 291px;height:169px;" :src="BaseApi + val" /> 
                                </el-carousel-item>
                            </el-carousel>
                            <div style="width: 291px;height:169px;" v-if="!item.srcArr || item.srcArr.length < 1">
                                <img class="max-w max-h" src="/public/images/serverno.png" />
                            </div>
                        </div>
                        <div class="flex label fz-16 ai-c">{{ item.label }}</div>
                    </div>
                </div>
            </vue3-seamless-scroll> 
            
        </div>
      </div>

      <div class="mt-3 common-box">
        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
            <span class="commontitle" @click="supplyReload">社会化服务</span>
            <div class="flex flex-1 ml-3">
                <div class="ml-2 cursor supplyspan" v-for="(item,index) in roleInfo.supplyArr" :class="roleInfo.supplyIndex==index?'red':''" @click="supplyClick(item,index)">
                    {{item.name}}
                </div>
            </div>
            <spam class="more-common" @click="moreClick('2')">更多+</spam>
        </div>
        <div class="line-common"></div>
        <div class="flex wrap">
            <div class="flex mb-2 materialli-common cursor" v-for="item in roleInfo.societyServesData" :class="roleInfo.supplyIndex==3 ? 'managecommon':''" @click="godetails(item, '2')" >
                <div style="width: 150px;">
                    <img class="max-w max-h" v-if="item.src" :src="item.src" />
                    <img class="max-w max-h" v-else src="/public/images/serverno.png" />
                </div>
                <div class="flex flex-1 max-h column jc-sb label">
                    <p class="fz-18 fw-b ta-l">{{ item.name }}</p>
                    <p class="fz-16">{{ item.owerhzs }}</p>
                </div>
                <div class="viewDetail" v-if="roleInfo.supplyIndex!==3">查看详情<el-icon><Right /></el-icon></div>
            </div>
        </div>
      </div>
      
      <div class="mt-3 common-box">
        <div class="flex mb-2 ta-l fz-20 fw-b jc-sb ai-c">
            <span class="commontitle">金融信息</span>
            <spam class="more-common" @click="moreClick('4')">更多+</spam>
        </div>
        <div class="line-common"></div>
        <div class="flex mb-3 jrimgbox wrap jc-sb">
            <div class="financialicommon fz-18" v-for="item in roleInfo.financialData" @click="godetails(item, '4')">
                <div class="fw-b">{{item.name}}</div>
                <div class="mt-2 lilv">贷款利率</div>
                <div class="mt-2 lilvnum">{{ item.nhll }}</div>
                <div class="mt-2">担保方式：<div class="typejr">{{ item.dbfs }}</div></div>
                <div class="mt-2">额度：{{ item.rzed }}</div>
            </div>
        </div>
      </div>
 
    </div>
  </template>
  <script>
  import { defineComponent, reactive, onMounted, toRefs, ref } from "vue";
  import { postMethodCommon, getMethodCommon } from "../../api/common";
  import { BASE_API } from "/public/config/server.js";
  import MapBox from "./widget/map.vue";
  import LinYiDeptJson from "../../../public/config/临沂市行政区.json";
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
  export default defineComponent({
    name: "Index",
    components: {
        MapBox,
        Vue3SeamlessScroll
    },
    setup(props, context) {
      let data = reactive({
        BaseApi: BASE_API,
        roleInfo:{
            navsIndex: null,
            areasArr:["市总平台", "兰山区", "罗庄区", "河东区", "郯城县", "兰陵县", "莒南县", "沂水县", "蒙阴县", "平邑县", "费县", "沂南县", "临沭县", "高新区", "沂河新区"],
            goodsData:[],
            servesData:[],
            societyServesData: [],
            navsArr: [],
            areasOption: [],
            newsData:[],
            newsImgData:[],
            financialData: [],
            supplyArr: [
                { name: "农机服务", value: "1" },
                { name: "农技服务", value: "2" },
                { name: "农资服务", value: "3" },
                { name: "管理服务", value: "4" },
            ],
            supplyIndex: 0,
            supplySearch: null,
            jdOptionsArr: []
        }   
    });
      onMounted(() => {
        let depeArr = LinYiDeptJson.RECORDS
        data.roleInfo.areasArr = []
        depeArr.forEach(item =>{
            if(item.ParentId == "371300"){
                data.roleInfo.areasArr.push({
                    name: item.Name,
                    id: item.Id
                })
            }
        })
      
        
        methods.getNewsData()
        methods.getGoodsData()
        methods.getServersData()
        methods.getServersData1()
        methods.getFiancialData()
        methods.getCodeType()
        methods.getAreaCode()
        methods.getJdOptionsData()
      });
      
      let methods = {
        getJdOptionsData(){
            let param = {
                id: "401eea06-aaa0-443f-8655-239a880f2b74",
                mid: "eaebc640-0588-427d-ba9d-16522eb94648",
                paginationInputDto: {
                    page: 1,
                    rows: 999
                },
            }
            data.roleInfo.newsData = []
            data.roleInfo.newsImgData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                data.roleInfo.jdOptionsArr = rel
                
                let socketJDArr = []
                let socketData = JSON.parse(localStorage.getItem("socketJDArr"));
                if(socketData){
                    socketJDArr = socketData
                }
                if(rel.length != socketJDArr.length){
                     rel.forEach(item =>{
                        let pointArr = []
                        let keyValue = null
                        keyValue = '临沂市' + item.county + item.town
                        const myGeo = new BMap.Geocoder();
                        myGeo.getPoint(keyValue, (point) => {
                            if (point) {
                                // 地理编码成功，返回经纬度坐标对象
                                pointArr.push(point.lng,point.lat)
                                pointArr =  pointArr.filter((item, index) => {  
                                    return pointArr.indexOf(item) === index;  
                                });  
                                socketJDArr.push({
                                    latlng: pointArr,
                                    name: item.name,
                                    value: item.value
                                })
                            } else {
                                // 地理编码失败
                                console.log('地理编码失败');
                            }
                        }, '全国');
                     })
                }
                setTimeout(()=>{
                    const mapa = new Map();
                    const newArr = socketJDArr.filter(v => !mapa.has(v.name) && mapa.set(v.name, v));
                    localStorage.setItem("socketJDArr", JSON.stringify(newArr));
                },2000)

            })
        },
        supplyClick(item,index){
            data.roleInfo.supplyIndex = index
            data.roleInfo.supplySearch = item.value
            methods.getServersData1()
        },
        supplyReload(){
            if(data.roleInfo.supplySearch){
                data.roleInfo.supplyIndex = null
                data.roleInfo.supplySearch = null
                methods.getServersData1()
            }        
        },
        navsClick(item,index){   
            let depeArr = LinYiDeptJson.RECORDS         
            if(!item.pId){
                data.roleInfo.navsIndex = null
                data.roleInfo.areasArr = []
                depeArr.forEach(val =>{
                    if(val.ParentId == item.id){
                        data.roleInfo.areasArr.push({
                            name: val.Name,
                            id: val.Id,
                            pId: val.ParentId
                        })
                    }
                })
            }else{
                data.roleInfo.navsIndex = index
            }
            methods.getGoodsData(item)
            methods.getServersData(item)
            methods.getServersData1(item)
        },
        navsAllClick(){
            data.roleInfo.navsIndex = null
            let depeArr = LinYiDeptJson.RECORDS         
            data.roleInfo.areasArr = []
            depeArr.forEach(item =>{
                if(item.ParentId == "371300"){
                    data.roleInfo.areasArr.push({
                        name: item.Name,
                        id: item.Id
                    })
                }
            })
            methods.getGoodsData()
            methods.getServersData()
            methods.getServersData1()
        },
        // 获取字典
        getCodeType(){
            let param = {
            page: 1,
            limit: 100,
                code: "PRODUCT_TYPE"
            }
            data.roleInfo.navsArr = []
            getMethodCommon("/SysDataItemDetail/Load", param).then(res =>{
            let rel = res.data.result
            rel.forEach(item =>{
                data.roleInfo.navsArr.push({
                name: item.itemName,
                value: item.itemValue
                })
            })
            })
        },
        //获取地区
        getAreaCode(){
            let param = {
            page: 1,
            limit: 100,
            code: "AREA_CODE"
            }
            data.roleInfo.areasOption = []
            getMethodCommon("/SysDataItemDetail/Load", param).then(res =>{
            let rel = res.data.result
            rel.forEach(item =>{
                data.roleInfo.areasOption.push({
                label: item.itemName,
                value: item.itemValue
                })
            })
            })
        },
        //新闻动态
        getNewsData(){
            let param = {
                id: window.newsId || "6de0e31c-2fda-4c3c-8580-68997ef6d6df",
                mid: window.newsMid || "35861221-3686-47be-9703-a55c986a14f6",
                paginationInputDto: {
                    page: 1,
                    rows: 999
                },
            }
            data.roleInfo.newsData = []
            data.roleInfo.newsImgData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                rel.forEach(item =>{
                    if(item.uploadImg){
                        item.src = BASE_API + item.uploadImg.split(',')[0] || null
                        data.roleInfo.newsImgData.push(item.src)
                    }
                    if(item.time){
                        item.date = item.time.split(' ')[0]
                    }else{
                        item.date = ''
                    }
                })
                rel.sort(function(a, b) {
                    return a.sort - b.sort;
                });
                data.roleInfo.newsData = rel
            })
        },
        //产品
        getGoodsData(val){
            let serach = {}
            if(val){
                if(val.pId){
                    serach.town = val.name
                }else{
                    serach.county = val.name
                }              
            }
            let param = {
                id: window.goodsId || "37049a99-cd96-4544-9d49-176f111ff367",
                mid: window.goodsMid || "074d0217-2c28-4c32-be54-24dbe010b9b6",
                paginationInputDto: {
                    page: 1,
                    rows: 9999
                },
                queryJson: JSON.stringify(serach)
            }
            data.roleInfo.goodsData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                let imgArr
                rel.forEach(item =>{       
                     
                    if(item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53){
                        imgArr = item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53.split(',')
                      data.roleInfo.goodsData.push({
                          name: item._input_80b4fa2f7f7546fab7ef300e2efeaa7a,
                          src: BASE_API + item._image_upload_6dac9b2e6816498bafdafdc2afc0dc53.split(',')[0] || null,
                          srcArr: imgArr.slice(0, imgArr.length - 1),
                          time: item._modify_time_9fbd11b18c9d41629a55f8ff37b5109d,
                          label: item._input_83f2bb43d50d4f8facb3c8d046acfcf9,
                          details: item._input_text_area_be9296152c444608ae874a808c242d63,
                          county: item.county,
                          town: item.town,
                          price: item.price,
                          buylink: item.buylink,
                          unit: item.unit,
                          contacts: item.contacts,
                          phone: item.phone,
                          type: item._select_8f4db93a317145c788c978c1365523c5,
                          greatName: item.greatName,
                          value: item.value
                      })
                  }else{
                      data.roleInfo.goodsData.push({
                          name: item._input_80b4fa2f7f7546fab7ef300e2efeaa7a,
                          src: null,
                          time: item._modify_time_9fbd11b18c9d41629a55f8ff37b5109d,
                          label: item._input_83f2bb43d50d4f8facb3c8d046acfcf9,
                          details: item._input_text_area_be9296152c444608ae874a808c242d63,
                          county: item.county,
                          town: item.town,
                          price: item.price,
                          unit: item.unit,
                          buylink: item.buylink,
                          contacts: item.contacts,
                          phone: item.phone,
                          type: item._select_8f4db93a317145c788c978c1365523c5,
                          greatName: item.greatName,
                          value: item.value
                      })
                  }  
                })
            })
        },
        //供需
        getServersData(val){
            let serach = {
                type1: 1
            }
            if(val){
                if(val.pId){
                    serach.town = val.name
                }else{
                    serach.county = val.name
                }     
            }
            let param = {
                // id: window.supplyId || "b67f0631-8a4d-4093-99cb-54f51be9499f",
                // mid: window.supplyMid || "196514f9-ba78-47f3-b4ce-31e4ed04f488",
                id: "cf16f568-4bb8-43b9-8e49-b23105e70bda",
                mid: "9c027ef9-cc04-4006-831d-e799982f6435",
                paginationInputDto: {
                    page: 1,
                    rows: 9999
                },
                queryJson: JSON.stringify(serach)
            }
            data.roleInfo.servesData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                rel.forEach(item =>{
                    let imgArr
                    if (item.imgsrc) {
                        item.src = BASE_API + item.imgsrc.split(",")[0] || null,
                        
                        imgArr = item.imgsrc.split(',')
                
                        item.srcArr = imgArr.slice(0, imgArr.length - 1)        
                                
                    } 

                    if (item.imgsrc1) {
                        item.src1 = BASE_API + item.imgsrc1.split(",")[0] || null,
                        item.srcArr1 = item.imgsrc1.split(',')                         
                    }

                    data.roleInfo.servesData.push(item)
                })
            })
        },
        getServersData1(val){
            let serach = {
                 
            }
            if(data.roleInfo.supplyIndex !== null){
                serach.type1 = data.roleInfo.supplyIndex + 1
            }
            if(val){
                if(val.pId){
                    serach.town = val.name
                }else{
                    serach.county = val.name
                }     
            }
            let param = {
                id: window.supplyId || "9103d33b-7499-4c50-a355-42b72436c67e",
                mid: window.supplyMid || "196514f9-ba78-47f3-b4ce-31e4ed04f488",
                paginationInputDto: {
                    page: 1,
                    rows: 6
                },
                queryJson: JSON.stringify(serach)
            }
            data.roleInfo.societyServesData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                rel.forEach(item =>{
                    if (item.imagesrc) {
                        item.src = BASE_API + item.imagesrc.split(",")[0] || null,
                        item.srcArr = item.imagesrc.split(',')                         
                    } 

                    if (item.imagesrc1) {
                        item.src1 = BASE_API + item.imagesrc1.split(",")[0] || null,
                        item.srcArr1 = item.imagesrc1.split(',')                         
                    }

                    data.roleInfo.societyServesData.push(item)
                })
            })
        },
        
        //金融
        getFiancialData(){
            let param = {
                id: window.fiancialId || "0cb3dd4d-d5fa-4479-9acc-05fdb734a801",
                mid: window.fiancialMid || "45d5a21d-daa4-4e71-80cb-1476ae1a80a3",
                paginationInputDto: {
                    page: 1,
                    rows: 4
                },
            }
            data.roleInfo.financialData = []
            postMethodCommon("/FormScheme/GetFormDataPage?id=" + param.id + "&mid="+param.mid, param).then(res =>{
                let rel = res.data.result.items
                if(rel){
                    data.roleInfo.financialData = rel
                }
                
            })
        },
        moreClick(e){
            context.emit('moreclick', e)
        },
        newsClick(e){
            context.emit('newsClick', e)
        },
        // bfcgClick(){
        //     context.emit('bfcgClick')
        // },
        opWindows(){
            window.open("https://yqgj.huafeng.cloud/")
        },
        godetails(e,i){
            let emitData = e
            if(i==1){
                data.roleInfo.navsArr.forEach(item =>{
                    if(item.value == e.type){
                        emitData.typeName = item.name
                    }
                })
                window.open("https://ymzxpc.sdlcsg.com")
                return 
            }

            if( i==2 ){
                let navsType = [
                    { name: "农机", value: "1" },
                    { name: "农技", value: "2" },
                    { name: "农资", value: "3" },
                    { name: "管理", value: "4" },
                ]
                navsType.forEach(item =>{
                    if(item.value == e.type1){
                        emitData.Type1Name = item.name
                    }
                })    
                if(e.type1 == 4){
                    if(e.linksrc){
                        window.open(e.linksrc)
                    }
                    if(e.manageupload){
                        window.open(BASE_API + e.manageupload.split(',')[0])
                    }
                    return 
                }     
            }
            // if(e.buylink){
            //     window.open(e.buylink)
            //     return 
            // }
            
            let obj = {
                index: i,
                record: emitData
            }
            context.emit('godetails', obj)   
        },
        hzsmoreClick(){
            context.emit('hzsmoreClick')
        },
        godetailsMap(obj){
            context.emit('godetailsMap', obj)
        },
        godetailsMapRIght(item){
            let obj = {
                    index: '2',
                    record: item,
                }
            context.emit('godetailsMap', obj)
        }
      };
      return {
        ...methods,
        ...toRefs(data),
      };
    },
  });
  </script>
  
  <style scoped>
    .common-box{
        width: 1240px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
        border-radius: 6px;
        padding: 20px;
    } 
    .swiper-container{
        width: 40%;
        height: 350px;

        padding: 5px;
    }
    .news-container{
        width: 60%;
    }
    .news-title{
        font-size: 18px;
        height: 42px;
        background: url("/public/images/newstitle.png");
        background-size: 100% 100%;
    }
    .news-li{
        height: 70px;
        border-bottom: 1px dotted  #577086;
    }
    .news-li .time{
        font-weight: 500;
        font-size: 14px;
        width: 160px;
        text-align: right;
    }
    .news-li .labelsli{
        font-weight: 550;
        font-size: 20px;
        line-height: 30px;
    }
    .news-li .labelsli .label{
        width: 525px;
        display: inline-block;
        font-weight: 550;
        line-height: 30px;
        font-size: 18px;
        text-align: left;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        -moz-line-clamp: 2;
        -moz-box-orient: vertical;
        margin-left: 4px;
    }
    .selectbox{
        width: 1260px;
        height: 56px;
        padding: 0 10px;
        background: #FFFFFF;
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
        border-radius: 6px;
    }
    .selectbox .active{
        color: #E5150C;
    }
    .selectbox .div:hover{
        color: #E5150C;
    }
    .goodsbox{
        width: 100%;
        height: 211px;
        overflow: auto;
    }
    .goodsli-common{
        width: 291px;
        height: 211px;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 15px;
    }
    .goodsli-common .img{
        height: 169px;
    }
    .goodsli-common .label{
        display: block;
        width: calc(100% - 15px);
        height: 40px;
        line-height: 40px;
        padding-left: 15px;
        background: #FDFDFD;
        text-align: left;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        border-bottom: 1px solid #E17474;
    }
    .materialli-common{
        width: 31.8%;
        height: 150px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #DEE2E7;
        overflow: hidden;
        margin-right: 0.6%;
        margin-left: 0.6%;
    }
    .managecommon{
        width: 23.6%;
        margin-right: 0.5%;
        margin-left: 0.5%;
    }
    .managecommon:nth-child(4n){
       
    }
    .managecommon:nth-child(3n){
         
    }
    .materialli-common:nth-child(3n){
        
    }
    .materialli-common .img{
        width: 150px;
        height: 150px;
    }
    .materialli-common .label{
        align-items: flex-start;
        padding: 25px 20px;
        height: calc(100% - 50px);
    }
    .materialli-common .viewDetail{
        width: 45px;
        background: #D1241E;
        font-size: 15px;
        color: #fff;
        line-height: 45px;
        writing-mode: vertical-rl;
        letter-spacing: 8px;
    }

    .more-common{
        display: inline-block;
        width: 92px;
        height: 42px;
        background: #FFFFFF;
        box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.06);
        border-radius: 21px;
        border: 1px solid #979797;
        cursor: pointer;
        color: #1C1C1C;
        font-size: 16px;
        text-align: center;
        line-height: 42px;
    }
    .financeli-common{
        width: 599px;
        height: 92px;
        border-radius: 8px;
        border: 1px solid #DEE2E7;
        padding: 13px 55px 13px 25px;
    }
    .financeli-common .span{
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background: #0E5DF9;
        margin-right: 10px;
        margin-top: 6px;
    }
    .financeli-common .p{
        width: 575px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .map-container{
        background: #FCFBFB;
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
        border-radius: 6px;
    }
    .map-box{
        height: 1012px;
        background: #fff;
        position: relative;
    }
    .point{
        width: 10px;
        height: 10px;
        border-radius: 10px;
    }
    .jdbox{
        width: 25%;
        height: 800px;
    }
    .jdli-box{
        width: 280px;
        height: 34px;
        line-height: 34px;
        background: #007FCC;
    }
    .jdli-box .circle{
        width: 46px;
        height: 46px;
        line-height: 46px;
        border-radius: 46px;
        background: #007FCC;
        margin-top: -6px;
        margin-left: -8px;
    }
    .jdli-box .line{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
    }
    .mapimg{
        width: 44%;
        height: 800px;
        background: #fff;
        position: relative;
    }
    .cgbox{
        width: 31%;
        margin-left: 5%;
        color: #1692E4;
    }
    .cgbox .spanbf{
        border: 1px solid #6BD1E5;
        background: #F8FAFA;
        padding: 5px 15px;
        border-radius: 4px;
    }
    .jrimgbox{
        width: 100%;
        position: relative;
    }
    .financialicommon{
        width: 242px;
        height: 300px;
        background: url("/public/images/moneybg.png");
        background-size: 100% 100%;
        box-shadow: 0px 2px 10px 2px rgba(0,0,0,0.06);
        margin: 20px 0 30px;
        padding: 30px 20px;
        text-align: left;
    }
    .financialicommon .lilv{
        color: #546e7a;
    }
    .financialicommon .lilvnum{
        color: #fd6040;
        font-size: 24px;
    }
    .financialicommon .typejr{
        color: #90a4ae;
        background: #f2f3f9;
        padding: 5px 10px;
        display: inline-block
    }
    .goAreahome{
        width: 115px;
        font-size: 18px;
    }
    .color1{
        color: #F805F1;
    }
    .background1{
        background: #F805F1;
    }
    .color2{
        color: #fd6040;
    }
    .background2{
        background: #fd6040;
    }
    .color3{
        color: #F5CE06;
    }
    .background3{
        background: #F5CE06;
    }
    .commontitle{
        width: 165px;
        height: 58px;
        background: url("/public/images/commontitle.png");
        background-size: 100% 100%;
        font-weight: 500;
        font-size: 26px;
        color: #FFFFFF;
        line-height: 48px;
        text-align: center;
        margin-left: -28px;
    }
    .line-common{
        height: 2px;
        background: linear-gradient( 270deg, #EAE6E6 0%, #F6F4F4 100%);
        margin-bottom: 25px;
    }
    .red{
        color: red;
    }
    .supplyspan{
        padding: 5px 15px;
        border-radius: 8px;
        border: 1px solid #dfdfdf;
    }
    .serveli{
        height: 150px;
        background: #FFFFFF;
        border-radius: 8px;
        border: 1px solid #DEE2E7;
        overflow: hidden;
    }
    .serveli .img{
        width: 150px;
        height: 150px;
    }
    .serveli .label{
        align-items: flex-start;
        padding: 25px 20px;
        height: calc(100% - 50px);
    }
    .serveli .viewDetail{
        width: 45px;
        background: #D1241E;
        font-size: 15px;
        color: #fff;
        line-height: 45px;
        writing-mode: vertical-rl;
        letter-spacing: 8px;
    }

  </style>