index.vue 149 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153315431553156315731583159316031613162316331643165316631673168316931703171317231733174317531763177317831793180318131823183318431853186318731883189319031913192319331943195319631973198319932003201320232033204320532063207320832093210321132123213321432153216321732183219322032213222322332243225322632273228322932303231323232333234323532363237323832393240324132423243324432453246324732483249325032513252325332543255325632573258325932603261326232633264326532663267326832693270327132723273327432753276327732783279328032813282328332843285328632873288328932903291329232933294329532963297329832993300330133023303330433053306330733083309331033113312331333143315331633173318331933203321332233233324332533263327332833293330333133323333333433353336333733383339334033413342334333443345334633473348334933503351335233533354335533563357335833593360336133623363336433653366336733683369337033713372337333743375337633773378337933803381338233833384338533863387338833893390339133923393339433953396339733983399340034013402340334043405340634073408340934103411341234133414341534163417341834193420342134223423342434253426342734283429343034313432343334343435343634373438343934403441344234433444344534463447344834493450345134523453345434553456345734583459346034613462346334643465346634673468346934703471347234733474347534763477347834793480348134823483348434853486348734883489349034913492349334943495349634973498349935003501350235033504350535063507350835093510351135123513351435153516351735183519352035213522352335243525352635273528352935303531353235333534353535363537353835393540354135423543354435453546354735483549355035513552355335543555355635573558355935603561356235633564356535663567356835693570357135723573357435753576357735783579358035813582358335843585358635873588358935903591359235933594359535963597359835993600360136023603360436053606360736083609361036113612361336143615361636173618361936203621362236233624362536263627362836293630363136323633363436353636363736383639364036413642364336443645364636473648364936503651365236533654365536563657365836593660366136623663366436653666366736683669367036713672367336743675367636773678367936803681368236833684368536863687368836893690369136923693369436953696369736983699370037013702370337043705370637073708370937103711371237133714371537163717371837193720372137223723372437253726372737283729373037313732373337343735373637373738373937403741374237433744374537463747374837493750375137523753375437553756375737583759376037613762376337643765376637673768376937703771377237733774377537763777377837793780378137823783378437853786378737883789379037913792379337943795379637973798379938003801380238033804380538063807380838093810381138123813381438153816381738183819382038213822382338243825382638273828382938303831383238333834383538363837383838393840384138423843384438453846384738483849385038513852385338543855385638573858385938603861386238633864386538663867386838693870387138723873387438753876387738783879388038813882388338843885388638873888388938903891389238933894389538963897389838993900390139023903390439053906390739083909391039113912391339143915391639173918391939203921392239233924392539263927392839293930393139323933393439353936393739383939394039413942394339443945394639473948394939503951395239533954395539563957395839593960396139623963396439653966396739683969397039713972397339743975397639773978397939803981398239833984398539863987398839893990399139923993399439953996399739983999400040014002400340044005400640074008400940104011401240134014401540164017401840194020402140224023402440254026402740284029403040314032403340344035403640374038403940404041404240434044404540464047404840494050405140524053405440554056405740584059406040614062406340644065406640674068406940704071407240734074407540764077407840794080408140824083408440854086408740884089409040914092409340944095409640974098409941004101410241034104410541064107410841094110411141124113411441154116411741184119412041214122412341244125412641274128412941304131413241334134413541364137413841394140414141424143414441454146414741484149415041514152415341544155415641574158415941604161416241634164416541664167416841694170417141724173417441754176417741784179418041814182418341844185418641874188418941904191419241934194419541964197419841994200420142024203420442054206420742084209421042114212421342144215421642174218421942204221422242234224422542264227422842294230423142324233423442354236423742384239424042414242424342444245424642474248424942504251425242534254425542564257425842594260426142624263426442654266426742684269427042714272427342744275427642774278427942804281428242834284428542864287428842894290429142924293429442954296429742984299430043014302430343044305430643074308430943104311431243134314431543164317431843194320432143224323432443254326432743284329433043314332433343344335433643374338433943404341434243434344434543464347434843494350435143524353435443554356435743584359436043614362436343644365436643674368436943704371437243734374437543764377437843794380438143824383438443854386438743884389439043914392439343944395439643974398439944004401440244034404440544064407440844094410441144124413441444154416441744184419442044214422442344244425442644274428442944304431443244334434443544364437443844394440444144424443444444454446444744484449445044514452445344544455445644574458445944604461446244634464446544664467446844694470447144724473447444754476447744784479448044814482448344844485448644874488448944904491449244934494449544964497449844994500450145024503450445054506450745084509451045114512451345144515451645174518451945204521452245234524452545264527452845294530453145324533453445354536453745384539454045414542454345444545454645474548454945504551455245534554455545564557455845594560456145624563456445654566456745684569457045714572457345744575457645774578457945804581458245834584458545864587458845894590459145924593459445954596459745984599460046014602460346044605460646074608460946104611461246134614461546164617461846194620462146224623462446254626462746284629463046314632463346344635463646374638463946404641
  1. <template>
  2. <div>
  3. <!--logo-->
  4. <HomePageHead></HomePageHead>
  5. <!--导航-->
  6. <HomePageNavigation></HomePageNavigation>
  7. <main class="index_main">
  8. <div class="index_1">
  9. <div class="new_banner">
  10. <swiper :modules="modules" :slides-per-view="1" :space-between="0" navigation
  11. :pagination="{ clickable: true }" :scrollbar="{ draggable: true }" class="mySwiper mySwiper1"
  12. :loop="true" :autoplay="{
  13. delay: 3333,
  14. disableOnInteraction: false,
  15. }">
  16. <!-- 幻灯片 1 -->
  17. <swiper-slide v-for="(per_obj, per_index) in 5">
  18. <NuxtLink to="/">
  19. <div class="new_imgCon">
  20. <img src="/public/index/news.png" title="全区各级法院深入基层宣讲党的二十届四中全会精神" data-isloaded="1">
  21. </div>
  22. <span>全区各级法院深入基层宣讲党的二十届四中全会精神</span>
  23. </NuxtLink>
  24. </swiper-slide>
  25. </swiper>
  26. </div>
  27. <div class="new_rightCon">
  28. <div class="new_Contlt clearfix">
  29. <h3>
  30. <NuxtLink to="/">法制资讯</NuxtLink>
  31. </h3>
  32. </div>
  33. <ul class="new_newList">
  34. <li v-for="(per_obj, per_index) in 9">
  35. <NuxtLink to="/" title="全区各级法院深入基层宣讲党的二十届四中全会精神">全区各级法院深入基层宣讲党的二十届四中全会精神</NuxtLink>
  36. </li>
  37. </ul>
  38. </div>
  39. </div>
  40. <div class="index_2">
  41. <div class="index_2_in new_conview">
  42. <div class="new_swiper_tlt">
  43. <span>滚 动 新 闻</span>
  44. </div>
  45. <div class="new_swiper_con" id="main_js">
  46. <div class="new_swiper_con_long" id="demo_js">
  47. <div class="new_swiper_con_in" id="demo1_js">
  48. <div class="new_swiper_per" v-for="(per_obj, per_index) in 11">
  49. <NuxtLink to="/">
  50. <div class="">
  51. <img src="/public/index/news.png" title="全区各级法院深入基层宣讲党的二十届四中全会精神"
  52. data-isloaded="1">
  53. </div>
  54. <span>中央军委举行晋升上将军衔仪式 习近平颁发命令状并向晋衔的军官表示祝贺</span>
  55. </NuxtLink>
  56. </div>
  57. </div>
  58. <div class="new_swiper_con_in" id="demo2_js"></div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. </main>
  64. <div class="index_3 new_conview_bg">
  65. <main class="index_main index_3_in">
  66. <div class="new_con_item">
  67. <div class="new_con_tlt1">
  68. <NuxtLink to="/">各地动态</NuxtLink>
  69. </div>
  70. <ul>
  71. <li v-for="(per_obj, per_index) in 8">
  72. <NuxtLink to="/">走进基层 | 牦牛踩踏起纷争 多元共治暖民心</NuxtLink>
  73. </li>
  74. </ul>
  75. </div>
  76. <div class="new_con_item">
  77. <div class="new_con_tlt1">
  78. <NuxtLink to="/">政策法规</NuxtLink>
  79. </div>
  80. <ul>
  81. <li v-for="(per_obj, per_index) in 8">
  82. <NuxtLink to="/">李强签署国务院令 公布《商事调解条例》</NuxtLink>
  83. </li>
  84. </ul>
  85. </div>
  86. <div class="new_con_item">
  87. <div class="new_con_tlt1">
  88. <NuxtLink to="/">政策解读</NuxtLink>
  89. </div>
  90. <ul>
  91. <li v-for="(per_obj, per_index) in 8">
  92. <NuxtLink to="/">辟谣!2026年私发“带颜色”信息就违法?真相是这样</NuxtLink>
  93. </li>
  94. </ul>
  95. </div>
  96. </main>
  97. </div>
  98. <main class="index_main">
  99. <div class="index_4">
  100. <div class="new_conleft">
  101. <div class="new_conleft_tlt">
  102. <NuxtLink to="/">重点播报</NuxtLink>
  103. </div>
  104. <div class="new_con_box" v-for="(per_obj, per_index) in 3">
  105. <NuxtLink to="/">
  106. <div class="new_img_box">
  107. <img src="http://img.fazdyzx.org.cn/202511/00bb6ae6ebf4040.png"
  108. data-src="http://img.fazdyzx.org.cn/202511/00bb6ae6ebf4040.png"
  109. title="习近平会见主要国际经济组织负责人" data-isloaded="1">
  110. </div>
  111. <h3>习近平会见主要国际经济组织负责人</h3>
  112. <p>  新华社北京12月10日电&ensp;12月10日上午,国家主席习近平在北京人民大会堂会见来华出席“1+10”对话会的主要国际经济组织负责人。  习近平同主要国际经济组织负责人合影留念,感......
  113. </p>
  114. </NuxtLink>
  115. </div>
  116. </div>
  117. <div class="new_conright">
  118. <ul class="new_tabtlt">
  119. <li :class="{ new_tabtlt_select: activeIndex === 0 }" @mouseenter="activeIndex = 0">
  120. <NuxtLink to="/">今日说法</NuxtLink>
  121. </li>
  122. <li :class="{ new_tabtlt_select: activeIndex === 1 }" @mouseenter="activeIndex = 1">
  123. <NuxtLink to="/">法制宣传</NuxtLink>
  124. </li>
  125. </ul>
  126. <div class="new_tab_con">
  127. <div class="new_tab_item" v-show="activeIndex === 0">
  128. <div class="new_tab_img">
  129. <NuxtLink to="/">
  130. <img src="http://img.fazdyzx.org.cn/202407/3889f335d70e972.jpg"
  131. data-src="http://img.fazdyzx.org.cn/202407/3889f335d70e972.jpg"
  132. title="《吉林省实施〈中华人民共和国反恐怖主义法〉办法》新闻发布会实录" data-isloaded="1">
  133. <span>《吉林省实施〈中华人民共和国反恐怖主义法〉办法》新...</span>
  134. </NuxtLink>
  135. </div>
  136. <ul class="new_tab_list">
  137. <li v-for="(per_obj, per_index) in 4">
  138. <NuxtLink to="/">法治日报:“立审执破”一体化的渝水实践:畅通企业“生”与“死...</NuxtLink>
  139. </li>
  140. </ul>
  141. </div>
  142. <div class="new_tab_item" v-show="activeIndex === 1">
  143. <div class="new_tab_img">
  144. <NuxtLink to="/">
  145. <img src="/public/index/1.jpg"
  146. data-src="http://img.fazdyzx.org.cn/202408/5037fab176ee44.jpg"
  147. title="严查领导干部违规插手干预 推动压实招标人责任" data-isloaded="1">
  148. <span>严查领导干部违规插手干预 推动压实招标人责任</span>
  149. </NuxtLink>
  150. </div>
  151. <ul class="new_tab_list">
  152. <li v-for="(per_obj, per_index) in 4">
  153. <NuxtLink to="/">【“枫桥式人民法庭”创建】这封来自当事人的感谢信中这样写道</NuxtLink>
  154. </li>
  155. </ul>
  156. </div>
  157. </div>
  158. </div>
  159. </div>
  160. <div class="index_5">
  161. <div class="new_conleft_tlt">
  162. <NuxtLink to="/">法治建设</NuxtLink>
  163. </div>
  164. <ul class="new_con_card">
  165. <li v-for="(per_obj, per_index) in 3">
  166. <NuxtLink to="/">
  167. <div class="new_img_box2">
  168. <img src="http://img.fazdyzx.org.cn/202407/6ee566db94555.jpg"
  169. data-src="http://img.fazdyzx.org.cn/202407/6ee566db94555.jpg"
  170. title="广东举办首届行政审判行政复议同堂培训班" data-isloaded="1">
  171. </div>
  172. <h3>广东举办首届行政审判行政复议同堂培训班</h3>
  173. <p>  7月9日,广东省高级人民法院、省司法厅在广州联合举办首届行政审判行政复议同堂培训班,广东高院党组......</p>
  174. </NuxtLink>
  175. </li>
  176. </ul>
  177. </div>
  178. </main>
  179. <div class="index_6 new_conview_bg">
  180. <main class="index_main index_6_in">
  181. <div class="new_conview">
  182. <div class="new_conitems">
  183. <div class="new_itemstlt">
  184. <NuxtLink to="/">政务公开</NuxtLink>
  185. </div>
  186. <div class="new_itemsimg">
  187. <NuxtLink to="/">
  188. <img src="http://img.fazdyzx.org.cn/202511/f84a1d61ef700b9.png"
  189. data-src="http://img.fazdyzx.org.cn/202511/f84a1d61ef700b9.png"
  190. title="最高检调研组在陕西榆林调研" data-isloaded="1">
  191. <span>最高检调研组在陕西榆林调研</span>
  192. </NuxtLink>
  193. </div>
  194. <ul class="new_items_list">
  195. <li v-for="(per_obj, per_index) in 4">
  196. <NuxtLink to="/">杨晋柏在海口专题调研禁毒工作时指出 全力打造共建共治的禁毒工</NuxtLink>
  197. </li>
  198. </ul>
  199. </div>
  200. <div class="new_conitems">
  201. <div class="new_itemstlt">
  202. <NuxtLink to="/">内参纪要</NuxtLink>
  203. </div>
  204. <div class="new_itemsimg">
  205. <NuxtLink to="/">
  206. <img src="http://img.fazdyzx.org.cn/202407/32b174570ba75ba.jpg"
  207. data-src="http://img.fazdyzx.org.cn/202407/32b174570ba75ba.jpg"
  208. title="中央军委举行荣誉称号颁授仪式 习近平向获得荣誉称号的单位颁授奖旗" data-isloaded="1">
  209. <span>中央军委举行荣誉称号颁授仪式 习近平向获得荣誉称号...</span>
  210. </NuxtLink>
  211. </div>
  212. <ul class="new_items_list">
  213. <li v-for="(per_obj, per_index) in 4">
  214. <NuxtLink to="/">省司法厅召开学习宣传贯彻《中华人民共和国仲裁法》座谈会</NuxtLink>
  215. </li>
  216. </ul>
  217. </div>
  218. <div class="new_conitems">
  219. <div class="new_itemstlt">
  220. <NuxtLink to="/">执法在线</NuxtLink>
  221. </div>
  222. <div class="new_itemsimg">
  223. <NuxtLink to="/">
  224. <img src="http://img.fazdyzx.org.cn/202407/f420d3d6483cf0c.jpg"
  225. data-src="http://img.fazdyzx.org.cn/202407/f420d3d6483cf0c.jpg"
  226. title="【实战大练兵】三所:以“四训”促“四强”,扎实推进实战大练兵走深走实" data-isloaded="1">
  227. <span>【实战大练兵】三所:以“四训”促“四强”,扎实推进...</span>
  228. </NuxtLink>
  229. </div>
  230. <ul class="new_items_list">
  231. <li v-for="(per_obj, per_index) in 4">
  232. <NuxtLink to="/">忠县法院召开百日执行攻坚暨涉民生执行案件“2026·迅雷行动</NuxtLink>
  233. </li>
  234. </ul>
  235. </div>
  236. <div class="new_conitems">
  237. <div class="new_itemstlt">
  238. <NuxtLink to="/">法制技术</NuxtLink>
  239. </div>
  240. <div class="new_itemsimg">
  241. <NuxtLink to="/">
  242. <img src="http://img.fazdyzx.org.cn/202405/a95fa57c32d5780.jpg"
  243. data-src="http://img.fazdyzx.org.cn/202405/a95fa57c32d5780.jpg"
  244. title="参与数据合规治理 推动数字检察高质量发展" data-isloaded="1">
  245. <span>参与数据合规治理 推动数字检察高质量发展</span>
  246. </NuxtLink>
  247. </div>
  248. <ul class="new_items_list">
  249. <li v-for="(per_obj, per_index) in 4">
  250. <NuxtLink to="/">镜头丨持续提升基层纪检监察监督质效</NuxtLink>
  251. </li>
  252. </ul>
  253. </div>
  254. </div>
  255. <div class="new_conview index_6_in_foot">
  256. <div class="new_con_item1">
  257. <div class="new_item1_tlt">
  258. <NuxtLink to="/">监督调查</NuxtLink>
  259. </div>
  260. <ul class="new_items1_list">
  261. <li v-for="(per_obj, per_index) in 6">
  262. <NuxtLink to="/">国家级调研成果20篇、省级调研成果44篇 许昌法院高质量调研</NuxtLink>
  263. </li>
  264. </ul>
  265. </div>
  266. <div class="new_con_item1">
  267. <div class="new_item1_tlt">
  268. <NuxtLink to="/">法制时评</NuxtLink>
  269. </div>
  270. <ul class="new_items1_list">
  271. <li v-for="(per_obj, per_index) in 6">
  272. <NuxtLink to="/">百色:开展2025“红城聚势 反诈同行” 宣传活动</NuxtLink>
  273. </li>
  274. </ul>
  275. </div>
  276. </div>
  277. </main>
  278. </div>
  279. <main class="index_main">
  280. <div class="index_7">
  281. <div class="new_wylytlt">
  282. <NuxtLink to="/">网友留言</NuxtLink>
  283. <NuxtLink to="/">我要留言</NuxtLink>
  284. </div>
  285. <div>
  286. <ul class="post_nr liuyan">
  287. <li>
  288. <span class="name">熊先生:<b>网站名称问题</b> 2025-12-29 16:18:48</span>
  289. <p class="nr">内容:看你们的介绍,政讯通•全国法制调研中心,网站名称不让用全国,你们怎么可以用啊?</p>
  290. <p class="hfnr">
  291. <span style="color:#f00;">回复:</span>
  292. 工信部不审批带全国的网站。我们所有带全国字样的名称前都加了“政讯通”,意思是北京政讯通法律咨询有限公司在全国范围内开展的法制调研工作。网站显示没有全国字样,在文字资料或者口头表述时会有加全国,使用名称都是政讯通·全国法制资讯发布中心、政讯通•全国法制调研中心、政讯通•全国法制舆情监测中心和政讯通•全国法制发展促进中心。
  293. </p>
  294. </li>
  295. <li>
  296. <span class="name">zhang:<b>我从网上搜搜到你们这个网站,我看了下网站没看明白你们主要是做什么的?能简单介绍下吗?</b> 2025-12-26
  297. 17:43:46</span>
  298. <p class="nr">内容:我从网上搜搜到你们这个网站,我看了下网站没看明白你们主要是做什么的?能简单介绍下吗?</p>
  299. <p class="hfnr">
  300. <span style="color:#f00;">回复:</span>不知道您看到的是我们的哪个网站,我们法制调研项目有200多个网站。主要业务分四大部分:
  301. 资讯与信息化业务:面向全国党政机关、企事业单位及相关经济组织发展法制信息化会员为主的网络资讯信息服务,提供200个网站资讯发布平台。同步为法制领域提供信息交流与沟通的平台,可以实现一对一、一对多和多对多的沟通交流。
  302. 法制与调研业务:依法开展法制领域的课题调研、法制宣传、法律援助、法律咨询和公益活动等服务。
  303. 舆情服务业务:面向全国法制党政机关、企事业单位等法人单位或组织依法提供网络舆情方面的监测、处理、公关等服务。
  304. 行业与发展业务:综合管理与辅助各地市级中心的运营、面向社会提供法制领域的活动策划与企业发展定制服务。
  305. </p>
  306. </li>
  307. <li>
  308. <span class="name">李先生:<b>我是郑州市调研员,能去商丘工作吗?</b> 2025-12-15 17:53:13</span>
  309. <p class="nr">内容:我是郑州市调研员,能去商丘工作吗?
  310. </p>
  311. <p class="hfnr">
  312. <span style="color:#f00;">回复:</span>不可以跨区域工作。
  313. </p>
  314. </li>
  315. <li>
  316. <span class="name">冯:<b>你们中心的调研员申请有年龄限制吗?</b> 2025-12-11 18:15:35</span>
  317. <p class="nr">内容:调研员申请有年龄限制吗?</p>
  318. <p class="hfnr">
  319. <span style="color:#f00;">回复:</span>调研员申请年龄在25-65之间均可。
  320. </p>
  321. </li>
  322. <li>
  323. <span class="name">汪先生:<b>因为一些原因没能及时去政府单位,介绍信时间过期了还能用吗?</b> 2025-12-03 15:30:46</span>
  324. <p class="nr">内容:我因为一些原因没能及时去政府单位,导致介绍信时间过期了还能用吗?</p>
  325. <p class="hfnr">
  326. <span style="color:#f00;">回复:</span>
  327. 不能在进行使用,介绍信使用必须在开具有限期内使用。如果是中心,有空白介绍信的需重新开具,过期介绍信作废存档;如果是个人,重新向总部申请开具新的介绍信,并将已过期介绍信寄回总部换领新的介绍信。
  328. </p>
  329. </li>
  330. </ul>
  331. <ul class="post_nr liuyan">
  332. </ul>
  333. </div>
  334. </div>
  335. </main>
  336. <!--首页顶部滚动新闻-->
  337. <div class="swiper-container" v-if="imagelist && imagelist.length > 0">
  338. <Swiper :slides-per-view="5" :space-between="20" :loop="true" :autoplay="{
  339. delay: 3000,
  340. disableOnInteraction: false,
  341. pauseOnMouseEnter: true,
  342. stopOnLastSlide: false,
  343. waitForTransition: true
  344. }" :speed="600" :modules="modules" @slide-change="swiperHandleSlideChange" @swiper="onSwiper"
  345. class="custom-swiper" :navigation="true">
  346. <SwiperSlide v-for="(item, index) in imagelist" :key="index">
  347. <NuxtLink :to="`/${item.pinyin}/${item.id}.html`" :title="item.title" class="slide-link"
  348. :data-index="index">
  349. <div class="image-container">
  350. <img src="/public/index/news.png" :alt="item.title" class="slide-image" loading="lazy" />
  351. <span class="image-title">{{ item.title }}</span>
  352. </div>
  353. </NuxtLink>
  354. </SwiperSlide>
  355. </Swiper>
  356. </div>
  357. <!--底部-->
  358. <HomeFoot></HomeFoot>
  359. </div>
  360. </template>
  361. <script setup>
  362. // 选项卡
  363. const activeIndex = ref(0);
  364. //页面是否已经加载完毕
  365. const pageLoading = ref(false)
  366. //1.加载页面必备组件 start---------------------------------------->
  367. import { ref, onMounted } from 'vue';
  368. import { ElRadio, ElRadioGroup, ElCheckbox, ElCheckboxGroup, ElMessage, ElInput } from 'element-plus';
  369. import { useSeoMeta } from '#imports';
  370. //格式化跳转路径 - 标题
  371. //首页分类栏目标题,不需要考虑外链
  372. const getLinkPath = (item) => {
  373. if (item.children_count == 0) {
  374. //return `/newsList/${item.cid}?page=1`;
  375. return `/${item.aLIas_pinyin}/list-1.html`;
  376. } else {
  377. //return `/primaryNavigation/${item.cid}`;
  378. return `/${item.aLIas_pinyin}/index.html`;
  379. }
  380. }
  381. //首页跳转到详情,这里需要考虑外链
  382. const getLinkPathDetail = (item) => {
  383. if (item.islink == 1) {
  384. return `${item.linkurl}`;
  385. } else {
  386. return `/${item.pinyin}/${item.id}.html`;
  387. }
  388. }
  389. //1.加载页面必备组件 end---------------------------------------->
  390. //2.交互方法 start---------------------------------------->
  391. //2.1 新闻图片切换
  392. const hoverStatus = ref(1)
  393. const qhPic = function (num) {
  394. hoverStatus.value = num;
  395. }
  396. //2.交互方法 end---------------------------------------->
  397. //3.投票 start---------------------------------------->
  398. //3.1 投票选择的值
  399. const radio1 = ref(''); //单选
  400. const check1 = ref([]); //多选
  401. const isDisabled = ref(false);//是否禁用提交按钮
  402. const isRadio = ref(true);//是否渲染单选
  403. const userSurId = ref('');//投票属于哪一篇文章
  404. const userChoice = ref('');//用于判断用户选择了其他选项以后,输入的值
  405. const userIsChoice = ref('');//用于判断其他选项目前是什么值
  406. const showUserChoice = ref(false);//是否显示其他输入框
  407. const websiteSurveyData = ref([]);//投票结果
  408. //3.2获得投票列表
  409. let voteList = ref([]);
  410. //3.2当用户选择了选项,判断是否展示其他输入框
  411. const handleRadioChange = (value) => {
  412. if (value == userIsChoice.value) {
  413. showUserChoice.value = true;
  414. } else {
  415. showUserChoice.value = false;
  416. }
  417. }
  418. const handleCheckboxChange = (value) => {
  419. if (value.includes(userIsChoice.value)) {
  420. showUserChoice.value = true;
  421. } else {
  422. showUserChoice.value = false;
  423. }
  424. }
  425. //3.2发起投票
  426. async function addWebsiteSurvey() {
  427. //判断当前是单选还是多选
  428. console.log(isRadio.value)
  429. if (isRadio.value) {
  430. console.log("用户单选!")
  431. if (radio1.value != '') {
  432. //先判断一下是否使用了其他选项
  433. if (showUserChoice.value) {
  434. if (userChoice.value != '') {
  435. //文章id
  436. // console.log(userSurId.value)
  437. // 用户输入的值
  438. // console.log(userChoice.value)
  439. //如果使用了其他,其他的选项需要增加进去
  440. const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
  441. method: 'GET',
  442. query: {
  443. 'sur_id': userSurId.value,//投票的新闻id
  444. 'choice_name': userChoice.value,//投票的选项id
  445. }
  446. });
  447. if (ChoiceData.code == 200) {
  448. //提交完其他选项以后,再正式发起投票
  449. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
  450. method: 'GET',
  451. query: {
  452. 'sur_id': userSurId.value,
  453. 'choice_id': ChoiceData.data
  454. }
  455. });
  456. if (mkData.code == 200) {
  457. ElMessage.success('投票成功!')
  458. //把投票结果显示到页面上 禁用投票按钮
  459. isDisabled.value = true;
  460. websiteSurveyData.value = mkData.data;
  461. //遍历一下,把用户选中的那个设置status为1
  462. let data = mkData.data;
  463. //遍历一下,把用户选中的那个设置status为1
  464. for (let item of data.data) {
  465. for (let i of data.choice) {
  466. if (item.id == i) {
  467. console.log(item.id)
  468. item.status = 1;
  469. }
  470. }
  471. }
  472. websiteSurveyData.value = data;
  473. } else {
  474. ElMessage.error(mkData.message)
  475. }
  476. } else {
  477. ElMessage.error('其他投票失败!')
  478. }
  479. } else {
  480. ElMessage.error('请输入选项内容!')
  481. }
  482. } else {
  483. //如果没选择其他,直接提交选择的内容
  484. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
  485. method: 'GET',
  486. query: {
  487. 'sur_id': userSurId.value,
  488. 'choice_id': radio1.value
  489. }
  490. });
  491. if (mkData.code == 200) {
  492. ElMessage.success('投票成功!')
  493. //把投票结果显示到页面上 禁用投票按钮
  494. isDisabled.value = true;
  495. let data = mkData.data;
  496. //遍历一下,把用户选中的那个设置status为1
  497. for (let item of data.data) {
  498. for (let i of data.choice) {
  499. if (item.id == i) {
  500. item.status = 1;
  501. }
  502. }
  503. }
  504. websiteSurveyData.value = data;
  505. } else {
  506. ElMessage.error('投票失败!')
  507. }
  508. }
  509. } else {
  510. ElMessage.error('请选择一个选项')
  511. }
  512. } else {
  513. console.log("多选!")
  514. //多选
  515. if (check1.value != []) {
  516. //先判断一下是否使用了其他选项
  517. if (showUserChoice.value) {
  518. if (userChoice.value != '') {
  519. //判断用户是否只选择了一个其他
  520. if (check1.value.length == 1) {
  521. const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
  522. method: 'GET',
  523. query: {
  524. 'sur_id': userSurId.value,//投票的新闻id
  525. 'choice_name': userChoice.value,//用户输入的其他选项文字
  526. }
  527. });
  528. if (ChoiceData.code == 200) {
  529. //提交完其他选项以后,再正式发起投票
  530. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
  531. method: 'GET',
  532. query: {
  533. 'sur_id': userSurId.value,
  534. 'choice_id': ChoiceData.data
  535. }
  536. });
  537. if (mkData.code == 200) {
  538. ElMessage.success('投票成功!')
  539. //把投票结果显示到页面上 禁用投票按钮
  540. isDisabled.value = true;
  541. websiteSurveyData.value = mkData.data;
  542. //遍历一下,把用户选中的那个设置status为1
  543. let data = mkData.data;
  544. //遍历一下,把用户选中的那个设置status为1
  545. for (let item of data.data) {
  546. for (let i of data.choice) {
  547. if (item.id == i) {
  548. console.log(item.id)
  549. item.status = 1;
  550. }
  551. }
  552. }
  553. websiteSurveyData.value = data;
  554. } else {
  555. ElMessage.error(mkData.message)
  556. }
  557. } else {
  558. ElMessage.error('其他投票失败!')
  559. }
  560. } else {
  561. //用户选择了除了其他以外,还包括别的选项
  562. const ChoiceData = await requestDataPromise('/web/addWebsiteSurveyOption', {
  563. method: 'GET',
  564. query: {
  565. 'sur_id': userSurId.value,//投票的新闻id
  566. 'choice_name': userChoice.value,//用户输入的其他选项文字
  567. }
  568. });
  569. if (ChoiceData.code == 200) {
  570. let data = check1.value;
  571. //找到多选的数组,把其他默认值给替换掉
  572. for (let i = 0; i < data.length; i++) {
  573. if (data[i] == userIsChoice.value) {
  574. data[i] = ChoiceData.data;
  575. }
  576. }
  577. let jsonArray = JSON.stringify(data);
  578. //提交完其他选项以后,再正式发起投票
  579. const mkData = await requestDataPromise('/web/addWebsiteSurveyVote', {
  580. method: 'GET',
  581. query: {
  582. 'sur_id': userSurId.value,
  583. 'choice_id': jsonArray
  584. }
  585. });
  586. if (mkData.code == 200) {
  587. ElMessage.success('投票成功!')
  588. //把投票结果显示到页面上 禁用投票按钮
  589. isDisabled.value = true;
  590. websiteSurveyData.value = mkData.data;
  591. //遍历一下,把用户选中的那个设置status为1
  592. let data = mkData.data;
  593. //遍历一下,把用户选中的那个设置status为1
  594. for (let item of data.data) {
  595. for (let i of data.choice) {
  596. if (item.id == i) {
  597. //console.log(item.id)
  598. item.status = 1;
  599. }
  600. }
  601. }
  602. websiteSurveyData.value = data;
  603. } else {
  604. ElMessage.error(mkData.message)
  605. }
  606. } else {
  607. ElMessage.error('其他投票失败!')
  608. }
  609. }
  610. } else {
  611. ElMessage.error('请输入选项内容!')
  612. }
  613. } else {
  614. let jsonArray = JSON.stringify(check1.value);
  615. //如果没选择其他,直接提交选择的内容
  616. const mkData = await requestHome('/web/addWebsiteSurveyVote', {
  617. method: 'GET',
  618. query: {
  619. 'sur_id': userSurId.value,
  620. 'choice_id': jsonArray
  621. }
  622. });
  623. if (mkData.code == 200) {
  624. ElMessage.success('投票成功!')
  625. //把投票结果显示到页面上 禁用投票按钮
  626. isDisabled.value = true;
  627. websiteSurveyData.value = mkData.data;
  628. //遍历一下,把用户选中的那个设置status为1
  629. let data = mkData.data;
  630. //遍历一下,把用户选中的那个设置status为1
  631. for (let item of data.data) {
  632. for (let i of data.choice) {
  633. if (item.id == i) {
  634. console.log(item.id)
  635. item.status = 1;
  636. }
  637. }
  638. }
  639. websiteSurveyData.value = data;
  640. } else {
  641. ElMessage.error('投票失败!')
  642. }
  643. }
  644. } else {
  645. ElMessage.error('请选择一个选项')
  646. }
  647. }
  648. }
  649. //3.投票 end---------------------------------------->
  650. //4.广告 start---------------------------------------->
  651. //获得所有广告
  652. let adImg1 = ref({})
  653. let adImg2 = ref({})
  654. let adImg3 = ref({})
  655. let adImg4 = ref({})
  656. onMounted(async () => {
  657. //从客户端获取行政职能部门 加快打开速度//从客户端获取行政职能部门 加快打开速度
  658. const { $webUrl, $CwebUrl } = useNuxtApp();
  659. //从客户端启动投票
  660. //获得投票列表
  661. let voteUrl = `${$webUrl}/web/getWebsiteSurvey`
  662. const responseVote = await fetch(voteUrl, {
  663. headers: {
  664. 'Content-Type': 'application/json',
  665. 'Userurl': $CwebUrl,
  666. 'Origin': $CwebUrl
  667. }
  668. });
  669. const voteData = await responseVote.json();
  670. if (voteData.code == 200) {
  671. voteList.value = voteData.data;
  672. //判断显示单选还是多选
  673. //survey_type 0是单选 1是多选
  674. if (voteData.data[0].survey_type == 0) {
  675. isRadio.value = true;
  676. } else {
  677. isRadio.value = false;
  678. }
  679. for (let item of voteData.data) {
  680. //如果含有其他
  681. if (item.is_other == 1) {
  682. userIsChoice.value = item.id;
  683. }
  684. }
  685. //用户投票属于哪一篇文章
  686. userSurId.value = voteData.data[0].sur_id;
  687. } else {
  688. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  689. // console.log("错误位置:首页投票")
  690. // console.log("后端错误反馈:",voteData.message)
  691. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  692. }
  693. //从客户端启动广告
  694. //广告1
  695. let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_index_0001`
  696. const responseAd1 = await fetch(url, {
  697. headers: {
  698. 'Content-Type': 'application/json',
  699. 'Userurl': $CwebUrl,
  700. 'Origin': $CwebUrl
  701. }
  702. });
  703. const resultAd1 = await responseAd1.json();
  704. adImg1.value = resultAd1.data[0];
  705. //广告2
  706. let url2 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_index_0002`
  707. const responseAd2 = await fetch(url2, {
  708. headers: {
  709. 'Content-Type': 'application/json',
  710. 'Userurl': $CwebUrl,
  711. 'Origin': $CwebUrl
  712. }
  713. });
  714. const resultAd2 = await responseAd2.json();
  715. adImg2.value = resultAd2.data[0];
  716. //广告3
  717. let url3 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_index_0003`
  718. const responseAd3 = await fetch(url3, {
  719. headers: {
  720. 'Content-Type': 'application/json',
  721. 'Userurl': $CwebUrl,
  722. 'Origin': $CwebUrl
  723. }
  724. });
  725. const resultAd3 = await responseAd3.json();
  726. adImg3.value = resultAd3.data[0];
  727. //广告4
  728. let url4 = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=snzxw_index_0004`
  729. const responseAd4 = await fetch(url4, {
  730. headers: {
  731. 'Content-Type': 'application/json',
  732. 'Userurl': $CwebUrl,
  733. 'Origin': $CwebUrl
  734. }
  735. });
  736. const resultAd4 = await responseAd4.json();
  737. adImg4.value = resultAd4.data[0];
  738. // js跑马灯
  739. const main = document.getElementById("main_js");
  740. const demo = document.getElementById("demo_js");
  741. const demo1 = document.getElementById("demo1_js");
  742. const demo2 = document.getElementById("demo2_js");
  743. const speed = 22;    //数值越大滚动速度越慢
  744. demo2.innerHTML = demo1.innerHTML;
  745. function Marquee() {
  746. if (demo2.offsetWidth - main.scrollLeft <= 0) { main.scrollLeft -= demo1.offsetWidth }
  747. else { main.scrollLeft++ }
  748. }
  749. var MyMar = setInterval(Marquee, speed);
  750. demo.onmouseover = function () {
  751. clearInterval(MyMar)
  752. }
  753. demo.onmouseout = function () {
  754. MyMar = setInterval(Marquee, speed)
  755. }
  756. })
  757. //4.交互方法 end---------------------------------------->
  758. //5.页面基本信息 start---------------------------------------->
  759. //5.1 导航信息
  760. const pageData = ref([
  761. // { cid: "", title: "", data: [] ,children_count:""},
  762. ]);
  763. //5.2 模块数据
  764. //注意前置变量 在nuxt3的ssr模式中,并不存在变量提升。
  765. //模块1
  766. const boxData1 = ref([])
  767. const boxData1data2 = ref([])
  768. //模块2
  769. const boxData2 = ref([]);
  770. //模块3 - 该数据已经在模块中请求
  771. //const boxData3 = ref([]);
  772. //模块4
  773. const boxData4 = ref([]);
  774. //模块5
  775. const boxData5 = ref([]);
  776. const boxData5data2 = ref([]);
  777. //模块6
  778. const boxData6 = ref([]);
  779. //模块7
  780. const boxData7 = ref([]);
  781. //模块8
  782. const boxData8 = ref([]);
  783. const boxData88 = ref([]);
  784. //模块9 模块10 切换
  785. const tabsData1 = ref(1)
  786. //模块9
  787. const boxData9 = ref([]);
  788. const boxData9data2 = ref([]);
  789. //模块10
  790. const boxData10 = ref([]);
  791. const boxData10data2 = ref([]);
  792. //模块11
  793. const boxData11 = ref([]);
  794. const boxData11data2 = ref([]);
  795. //模块12 模块13 切换
  796. const tabsData2 = ref(1)
  797. //模块12
  798. const boxData12 = ref([]);
  799. //模块13 - 该模块只有一个入口
  800. const boxData13 = ref([]);
  801. //模块14 模块15 切换
  802. const tabsData3 = ref(1)
  803. //模块14 - 该模块含有子导航
  804. const boxData14 = ref([]);
  805. const boxData14data2 = ref([]);
  806. const boxData14menu = ref([]);
  807. const boxData14childpinyin = ref([]);
  808. const boxData14mainData = ref([]);
  809. //模块15
  810. const boxData15 = ref([]);
  811. const boxData15data2 = ref([]);
  812. const boxData15menu = ref([]);
  813. const boxData15childpinyin = ref([]);
  814. const boxData15mainData = ref([]);
  815. //模块16 模块17 切换
  816. const tabsData4 = ref(1)
  817. //模块16 - 该模块含有子导航
  818. const boxData16 = ref([]);
  819. const boxData16data2 = ref([]);
  820. const boxData16menu = ref([]);
  821. const boxData16childpinyin = ref([]);
  822. const boxData16mainData = ref([]);
  823. //模块17 - 政策法规 本来这个是模块3 原来是单独放到一个模块中的,现在提出来了
  824. const boxData17 = ref({})
  825. //3.2获得导航数据
  826. try {
  827. const navigateData = await requestDataPromise('/web/getWebsiteModelCategory', {
  828. method: 'GET',
  829. query: {
  830. 'placeid': 1,
  831. 'pid': 0,
  832. 'num': 30
  833. },
  834. });
  835. if (navigateData.code == 200) {
  836. // 遍历可用的导航池放到页面中
  837. for (let index in navigateData.data) {
  838. let data = {
  839. title: navigateData.data[index].name,
  840. cid: navigateData.data[index].category_id,
  841. children_count: navigateData.data[index].children_count,
  842. alias: navigateData.data[index].alias,
  843. aLIas_pinyin: navigateData.data[index].aLIas_pinyin
  844. };
  845. //主体渲染 第一层
  846. //新农村11
  847. if (navigateData.data[index].category_id == 11) { pageData.value[0] = data }
  848. //农民工317
  849. if (navigateData.data[index].category_id == 317) { pageData.value[1] = data }
  850. //第二层
  851. //政策法规1
  852. if (navigateData.data[index].category_id == 2) { pageData.value[2] = data }
  853. //三农之窗2
  854. if (navigateData.data[index].category_id == 1) { pageData.value[3] = data }
  855. //第三层
  856. //区域经济5
  857. if (navigateData.data[index].category_id == 5) { pageData.value[4] = data }
  858. //三农投资6
  859. if (navigateData.data[index].category_id == 12) { pageData.value[5] = data }
  860. //农贸信息13
  861. if (navigateData.data[index].category_id == 13) { pageData.value[6] = data }
  862. //书刊信息24三农调查28
  863. if (navigateData.data[index].category_id == 28) { pageData.value[7] = data }
  864. //第四层
  865. //三农科教14
  866. if (navigateData.data[index].category_id == 14) { pageData.value[8] = data }
  867. //文化生活15
  868. if (navigateData.data[index].category_id == 15) { pageData.value[9] = data }
  869. //三农服务27
  870. if (navigateData.data[index].category_id == 27) { pageData.value[10] = data }
  871. //第五层
  872. //三农探索16
  873. if (navigateData.data[index].category_id == 16) { pageData.value[11] = data }
  874. //三农人物18
  875. if (navigateData.data[index].category_id == 18) { pageData.value[12] = data }
  876. //第六层
  877. //农资购销21
  878. if (navigateData.data[index].category_id == 21) { pageData.value[13] = data }
  879. //农产购销153
  880. if (navigateData.data[index].category_id == 153) { pageData.value[14] = data }
  881. //第七层
  882. //打假维权26
  883. if (navigateData.data[index].category_id == 26) { pageData.value[15] = data }
  884. }
  885. } else {
  886. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  887. console.log("错误位置:首页导航池")
  888. console.log("后端错误反馈:", navigateData.message)
  889. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  890. }
  891. } catch (error) {
  892. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  893. console.log("错误位置:首页导航渲染阶段")
  894. console.log("错误:导航池渲染执行接口出错!请检查首页的14的模块的具体执行方法!")
  895. console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  896. }
  897. let getJson = [
  898. { "parent": "11,2,8", "child": "" },//模块1新农村
  899. { "parent": "317,0,8", "child": "" },//模块2农民工
  900. { "parent": "1,0,5", "child": "" },//模块4三农之窗
  901. { "parent": "5,1,1", "child": "" },//模块5区域经济
  902. { "parent": "12,0,3", "child": "" },//模块6三农投资
  903. { "parent": "13,0,4", "child": "" },//模块7农贸信息
  904. { "parent": "28,2,7", "child": "" },//模块8书刊信息=三农调查
  905. { "parent": "14,2,8", "child": "" },//模块9三农科教
  906. { "parent": "15,2,8", "child": "" },//模块10文化生活
  907. { "parent": "27,2,4", "child": "" },//模块11三农服务27
  908. { "parent": "16,0,14", "child": "" },//模块12三农探索16
  909. { "parent": "18,0,14", "child": "" },//模块13三农人物18
  910. { "parent": "21,2,8", "child": "188,0,5" },//模块14农资购销
  911. { "parent": "153,2,8", "child": "258,0,5" },//模块15农产购销
  912. { "parent": "26,4,8", "child": "191,0,5" },//模块16打假维权
  913. { "parent": "2,4,8", "child": "" },//模块3政策法规
  914. ]
  915. let jsonString = JSON.stringify(getJson);
  916. async function getPageAllData() {
  917. const mkdata = await requestDataPromise('/web/getWebsiteAllArticle', {
  918. method: 'GET',
  919. query: {
  920. 'id': jsonString
  921. },
  922. });
  923. console.log("makdata:", mkdata);
  924. if (mkdata.code == 200) {
  925. //模块1新农村
  926. boxData1.value = mkdata.data[0].imgnum;
  927. boxData1data2.value = mkdata.data[0].textnum;
  928. //模块2农名工
  929. boxData2.value = mkdata.data[1].textnum;
  930. //模块4三农之窗
  931. boxData4.value = mkdata.data[2].textnum;
  932. //模块5区域经济
  933. boxData5.value = mkdata.data[3].imgnum;
  934. boxData5data2.value = mkdata.data[3].textnum;
  935. //模块6三农投资
  936. boxData6.value = mkdata.data[4].textnum;
  937. //模块7农贸信息
  938. boxData7.value = mkdata.data[5].textnum;
  939. //模块8书刊信息
  940. boxData8.value = mkdata.data[6].imgnum;
  941. boxData88.value = mkdata.data[6].textnum;
  942. //模块9三农科教
  943. boxData9.value = mkdata.data[7].imgnum;
  944. boxData9data2.value = mkdata.data[7].textnum;
  945. //模块10文化生活
  946. boxData10.value = mkdata.data[8].imgnum;
  947. boxData10data2.value = mkdata.data[8].textnum;
  948. //模块11三农服务
  949. boxData11.value = mkdata.data[9].imgnum;
  950. boxData11data2.value = mkdata.data[9].textnum;
  951. //模块12三农探索
  952. boxData12.value = mkdata.data[10].textnum;
  953. //模块13三农人物
  954. boxData13.value = mkdata.data[11].textnum;
  955. //模块14农资购销 该栏目含有子导航
  956. boxData14.value = mkdata.data[12].imgnum;
  957. boxData14data2.value = mkdata.data[12].textnum;
  958. boxData14menu.value = mkdata.data[12].child.all_childcat;
  959. boxData14childpinyin.value = mkdata.data[12].child.pinyin;
  960. boxData14mainData.value = mkdata.data[12].child.textnum;
  961. //模块14农产购销
  962. boxData15.value = mkdata.data[13].imgnum;
  963. boxData15data2.value = mkdata.data[13].textnum;
  964. boxData15menu.value = mkdata.data[13].child.all_childcat;
  965. boxData15childpinyin.value = mkdata.data[13].child.pinyin;
  966. boxData15mainData.value = mkdata.data[13].child.textnum;
  967. //模块15打假维权
  968. boxData16.value = mkdata.data[14].imgnum;
  969. boxData16data2.value = mkdata.data[14].textnum;
  970. boxData16menu.value = mkdata.data[14].child.all_childcat;
  971. boxData16childpinyin.value = mkdata.data[14].child.pinyin;
  972. boxData16mainData.value = mkdata.data[14].child.textnum;
  973. //模块17政策法规
  974. boxData17.value = mkdata.data[15];
  975. } else {
  976. ElMessage.error(mkdata.message)
  977. }
  978. }
  979. getPageAllData();
  980. //5.页面基本信息 end---------------------------------------->
  981. //6.设置seo数据 start---------------------------------------->
  982. //获取seo数据
  983. const setData = await requestDataPromise('/web/getWebsiteFootInfo', {
  984. method: 'GET',
  985. query: {},
  986. });
  987. if (setData.code == 200) {
  988. let seoTitle = setData.data.website_head.title;
  989. let seoDescription = setData.data.website_head.description;
  990. let seoKeywords = setData.data.website_head.keywords;
  991. let seoSuffix = setData.data.website_head.suffix;
  992. let seoName = setData.data.website_head.website_name;
  993. useSeoMeta({
  994. title: seoTitle + "_" + seoSuffix,
  995. meta: [
  996. { name: 'description', content: seoDescription + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  997. { name: 'keywords', content: seoKeywords + "_" + seoName + "_" + seoSuffix, tagPriority: 10 },
  998. { name: 'viewport', content: "width=device-width,initial-scale=1,user-scalable=no" }
  999. ]
  1000. });
  1001. } else {
  1002. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  1003. // console.log("错误位置:设置首页SEO数据")
  1004. // console.log("后端错误反馈:",setData.message)
  1005. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  1006. }
  1007. //6.设置seo数据 start---------------------------------------->
  1008. //7.官网新增 start---------------------------------------->
  1009. //swiper焦点图start---------------------------------------->
  1010. const imagelist = ref("")
  1011. async function getModelData1() {
  1012. const mkdata = await requestDataPromise('/web/getWebsiteArticlett', {
  1013. method: 'GET',
  1014. query: {
  1015. 'imgnum': 10,
  1016. 'textnum': 0,
  1017. 'level': 2,
  1018. 'placeid': 0,
  1019. 'id': ''
  1020. },
  1021. });
  1022. if (mkdata.code == 200) {
  1023. imagelist.value = mkdata.data.img;
  1024. } else {
  1025. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  1026. // console.log("错误位置:获取首页轮播图")
  1027. // console.log("后端错误反馈:",mkdata.message)
  1028. // console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
  1029. }
  1030. }
  1031. getModelData1()
  1032. //使用swiper
  1033. import { computed } from 'vue'
  1034. // Swiper12.x的导入方式
  1035. import { Swiper, SwiperSlide } from 'swiper/vue'
  1036. import { Autoplay, Navigation } from 'swiper/modules' // 增加 Navigation
  1037. // 导入 Swiper 样式
  1038. import 'swiper/css'
  1039. import 'swiper/css/navigation' // 增加导航样式
  1040. const props = defineProps({
  1041. imagelist: {
  1042. type: Array,
  1043. default: () => []
  1044. }
  1045. })
  1046. const emit = defineEmits(['slide-change'])
  1047. const swiperCurrentIndex = ref(0)
  1048. const swiperInstance = ref(null)
  1049. // 使用哪些模块
  1050. const modules = [Autoplay, Navigation] // 添加 Navigation
  1051. // 响应式断点设置(可选)
  1052. const breakpoints = computed(() => ({
  1053. // 当屏幕宽度 >= 320px
  1054. 320: {
  1055. slidesPerView: 1,
  1056. spaceBetween: 10
  1057. },
  1058. // 当屏幕宽度 >= 768px
  1059. 768: {
  1060. slidesPerView: 3,
  1061. spaceBetween: 15
  1062. },
  1063. // 当屏幕宽度 >= 1024px
  1064. 1024: {
  1065. slidesPerView: 5,
  1066. spaceBetween: 20
  1067. },
  1068. // 当屏幕宽度 >= 1440px
  1069. 1440: {
  1070. slidesPerView: 6,
  1071. spaceBetween: 25
  1072. }
  1073. }))
  1074. const swiperHandleSlideChange = (swiper) => {
  1075. swiperCurrentIndex.value = swiper.activeIndex
  1076. emit('swiperSlideChange', swiper.activeIndex)
  1077. }
  1078. const goToSlide = (index) => {
  1079. console.log(index)
  1080. if (swiperInstance.value) {
  1081. swiperInstance.value.slideTo(index, 500) // 500ms 动画时间
  1082. }
  1083. }
  1084. const onSwiper = (swiper) => {
  1085. swiperInstance.value = swiper
  1086. console.log('Swiper实例已初始化:', swiper)
  1087. }
  1088. // 如果需要手动控制自动播放
  1089. const pauseAutoplay = () => {
  1090. if (swiperInstance.value && swiperInstance.value.autoplay) {
  1091. swiperInstance.value.autoplay.pause()
  1092. }
  1093. }
  1094. const startAutoplay = () => {
  1095. if (swiperInstance.value && swiperInstance.value.autoplay) {
  1096. swiperInstance.value.autoplay.resume()
  1097. }
  1098. }
  1099. //swiper焦点图 end---------------------------------------->
  1100. //轮播图 start---------------------------------------->
  1101. import { ElCarousel, ElCarouselItem } from 'element-plus'
  1102. let currentIndex = ref(0)
  1103. let handleIndicatorChange = (val) => {
  1104. currentIndex.value = val
  1105. }
  1106. //轮播图 end---------------------------------------->
  1107. //选项卡 start---------------------------------------->
  1108. //1.首页顶部新闻-中央选项卡
  1109. const indexTabs = ref(1)
  1110. //2.首页中央新闻2-左侧选项卡
  1111. const indexTabs2 = ref(1)
  1112. //3.首页中央新闻2-右侧选项卡
  1113. const indexTabs3 = ref(1)
  1114. //3.首页中央新闻3-左侧选项卡
  1115. const indexTabs4 = ref(1)
  1116. //选项卡 end---------------------------------------->
  1117. //7.官网新增 end---------------------------------------->
  1118. </script>
  1119. <style lang="less" scoped>
  1120. @media screen and (min-width: 1401px) {
  1121. //swiper轮播图 start---------------------------------------->
  1122. .swiper-container {
  1123. width: 100%;
  1124. padding: 20px 0;
  1125. position: relative;
  1126. max-width: 1400PX;
  1127. margin: 0 auto;
  1128. }
  1129. .custom-swiper {
  1130. width: 100%;
  1131. height: 100%;
  1132. padding: 10PX 5PX; //给两侧留出空间
  1133. }
  1134. .custom-swiper :deep(.swiper-wrapper) {
  1135. align-items: stretch; //使所有幻灯片高度一致
  1136. }
  1137. .custom-swiper :deep(.swiper-slide) {
  1138. height: auto;
  1139. transition: transform 0.3s ease;
  1140. }
  1141. //悬停效果
  1142. .custom-swiper :deep(.swiper-slide:hover) {
  1143. transform: translateY(-5px);
  1144. z-index: 10;
  1145. }
  1146. .slide-link {
  1147. display: block;
  1148. text-decoration: none;
  1149. color: inherit;
  1150. height: 100%;
  1151. width: 100%;
  1152. }
  1153. .image-container {
  1154. position: relative;
  1155. width: 100%;
  1156. height: 118PX; //根据需求调整
  1157. overflow: hidden;
  1158. box-shadow: 0 4PX 12PX rgba(0, 0, 0, 0.1);
  1159. transition: all 0.3s ease;
  1160. background: #f5f5f5; //加载时的背景色
  1161. }
  1162. .image-container:hover {
  1163. box-shadow: 0 8PX 24PX rgba(0, 0, 0, 0.15);
  1164. }
  1165. .slide-image {
  1166. // width: 100%;
  1167. // height: 100%;
  1168. width: 264PX;
  1169. height: 118PX;
  1170. object-fit: cover;
  1171. transition: transform 0.5s ease;
  1172. }
  1173. .image-container:hover .slide-image {
  1174. transform: scale(1.05);
  1175. }
  1176. .image-title {
  1177. position: absolute;
  1178. bottom: 0;
  1179. left: 0;
  1180. right: 0;
  1181. color: white;
  1182. padding: 12PX 15PX;
  1183. font-size: 14PX;
  1184. line-height: 1.4;
  1185. text-align: center;
  1186. overflow: hidden;
  1187. text-overflow: ellipsis;
  1188. white-space: nowrap;
  1189. background: rgba(0, 0, 0, .6)
  1190. }
  1191. .custom-indicators {
  1192. display: flex;
  1193. justify-content: center;
  1194. gap: 8PX;
  1195. margin-top: 25PX;
  1196. padding: 15PX 10PX;
  1197. flex-wrap: wrap;
  1198. background: rgba(255, 255, 255, 0.9);
  1199. border-radius: 50PX;
  1200. max-width: 90%;
  1201. margin-left: auto;
  1202. margin-right: auto;
  1203. }
  1204. .indicator-btn {
  1205. width: 36PX;
  1206. height: 36PX;
  1207. border-radius: 50%;
  1208. border: 2PX solid #e0e0e0;
  1209. background: white;
  1210. color: #333;
  1211. cursor: pointer;
  1212. transition: all 0.3s ease;
  1213. font-size: 14PX;
  1214. font-weight: 500;
  1215. display: flex;
  1216. align-items: center;
  1217. justify-content: center;
  1218. outline: none;
  1219. }
  1220. .indicator-btn:hover {
  1221. background: #f0f9ff;
  1222. border-color: #409eff;
  1223. transform: scale(1.1);
  1224. }
  1225. .indicator-btn.active-indicator {
  1226. background: #409eff;
  1227. color: white;
  1228. border-color: #409eff;
  1229. box-shadow: 0 4PX 12PX rgba(64, 158, 255, 0.3);
  1230. }
  1231. //swiper加载动画
  1232. .image-container:empty::before {
  1233. content: '';
  1234. position: absolute;
  1235. top: 0;
  1236. left: 0;
  1237. width: 100%;
  1238. height: 100%;
  1239. background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  1240. background-size: 200% 100%;
  1241. animation: loading 1.5s infinite;
  1242. border-radius: 12PX;
  1243. }
  1244. @keyframes loading {
  1245. 0% {
  1246. background-position: 200% 0;
  1247. }
  1248. 100% {
  1249. background-position: -200% 0;
  1250. }
  1251. }
  1252. //swiper箭头颜色
  1253. .custom-swiper :deep(.swiper-button-prev),
  1254. .custom-swiper :deep(.swiper-button-next) {
  1255. color: white !important; //箭头颜色改为白色
  1256. }
  1257. .custom-swiper :deep(.swiper-button-prev):after,
  1258. .custom-swiper :deep(.swiper-button-next):after {
  1259. color: white !important; //确保箭头图标也是白色
  1260. }
  1261. //swiper轮播图 end---------------------------------------->
  1262. //轮播图 start---------------------------------------->
  1263. .nuxt-swiper {
  1264. width: 100%;
  1265. height: 300PX;
  1266. position: relative;
  1267. img {
  1268. width: 100%;
  1269. height: 300PX;
  1270. }
  1271. span {
  1272. display: inline-block;
  1273. width: 100%;
  1274. height: 40PX;
  1275. line-height: 40PX;
  1276. padding-left: 20PX;
  1277. box-sizing: border-box;
  1278. position: absolute;
  1279. bottom: 0;
  1280. left: 0;
  1281. font-family: Source Han Sans, Source Han Sans;
  1282. font-size: 16PX;
  1283. color: #FFFFFF;
  1284. //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  1285. background: rgba(0, 0, 0, .6);
  1286. }
  1287. }
  1288. .el-carousel {
  1289. // 左右箭头按钮
  1290. .el-carousel__arrow--right :deep(.class-name),
  1291. .el-carousel__arrow--left :deep(.class-name) {
  1292. width: 68PX;
  1293. height: 68PX;
  1294. }
  1295. //左右箭头图片
  1296. /deep/.el-icon svg {
  1297. height: 1em;
  1298. width: 1em;
  1299. background-color: transparent;
  1300. }
  1301. /deep/.el-carousel__arrow {
  1302. border-radius: 0;
  1303. background-color: transparent;
  1304. }
  1305. /deep/.el-carousel__arrow i {
  1306. font-size: 68PX !important;
  1307. }
  1308. /deep/ .el-carousel__indicators {
  1309. // 指示器
  1310. left: unset;
  1311. transform: unset;
  1312. right: 41%;
  1313. }
  1314. /deep/ .el-carousel__button {
  1315. // 指示器按钮
  1316. width: 15PX;
  1317. height: 15PX;
  1318. border-radius: 50%;
  1319. border: none;
  1320. opacity: 1;
  1321. background-color: #FFFFFF;
  1322. bottom: 30PX;
  1323. }
  1324. /deep/ .is-active .el-carousel__button {
  1325. // 指示器激活按钮
  1326. background: #158d91;
  1327. }
  1328. /deep/.custom-indicators {
  1329. position: absolute;
  1330. bottom: 10PX;
  1331. left: 50%;
  1332. transform: translateX(-50%);
  1333. }
  1334. /deep/ .el-carousel__indicators {
  1335. right: 3%;
  1336. bottom: 10%;
  1337. }
  1338. /deep/ .el-carousel__arrow {
  1339. top: 50%;
  1340. }
  1341. }
  1342. //轮播图 end---------------------------------------->
  1343. //第一层 start---------------------------------------->
  1344. .index—layer-1 {
  1345. width: 1400PX;
  1346. height: auto;
  1347. overflow: hidden;
  1348. margin: 20PX auto;
  1349. display: flex;
  1350. align-items: flex-start;
  1351. justify-content: space-between;
  1352. .index—layer-1-left {
  1353. width: 31%;
  1354. border: 1PX solid #ccc;
  1355. }
  1356. .index-layer-1-middle {
  1357. width: 31%;
  1358. border: 1PX solid #ccc;
  1359. box-sizing: border-box;
  1360. padding: 0 10PX;
  1361. padding-bottom: 5PX;
  1362. .tabtlt {
  1363. width: 100%;
  1364. height: auto;
  1365. outline: hidden;
  1366. border-bottom: 1PX solid #f0f0f0;
  1367. margin: 7PX 0 18PX;
  1368. overflow: hidden;
  1369. display: flex;
  1370. align-self: center;
  1371. justify-content: space-between;
  1372. a {
  1373. color: #337ab7;
  1374. text-decoration: none;
  1375. }
  1376. div {
  1377. width: 50%;
  1378. text-align: center;
  1379. width: 100%;
  1380. height: 50PX;
  1381. line-height: 50PX;
  1382. font-size: 20PX;
  1383. color: #000;
  1384. background: #f3f3f3;
  1385. text-align: center;
  1386. cursor: pointer;
  1387. }
  1388. div.intabtltbg {
  1389. background: url(public/index/current.gif) no-repeat center bottom !important;
  1390. }
  1391. }
  1392. .coninfoitem {
  1393. width: 100%;
  1394. overflow: hidden;
  1395. margin: 0px auto;
  1396. >div {
  1397. &.coninfoitem_img {
  1398. height: 86PX;
  1399. overflow: hidden;
  1400. margin-bottom: 5PX;
  1401. display: flex;
  1402. align-items: flex-start;
  1403. justify-content: space-between;
  1404. }
  1405. h3 {
  1406. line-height: 0;
  1407. a {
  1408. font-size: 13PX;
  1409. color: #333;
  1410. font-weight: bold;
  1411. width: 100%;
  1412. height: 26PX;
  1413. line-height: 26PX;
  1414. overflow: hidden;
  1415. }
  1416. }
  1417. img {
  1418. width: 120PX;
  1419. height: 86PX;
  1420. float: left;
  1421. margin-right: 11PX;
  1422. }
  1423. p {
  1424. line-height: 0;
  1425. a {
  1426. color: #333;
  1427. font-size: 13PX;
  1428. line-height: 20PX;
  1429. }
  1430. }
  1431. }
  1432. .coninfoitem_title {
  1433. width: 100%;
  1434. height: 28PX;
  1435. line-height: 28PX;
  1436. overflow: hidden;
  1437. position: relative;
  1438. list-style-position: inside;
  1439. color: #000;
  1440. display: block;
  1441. font-size: 13PX;
  1442. display: flex;
  1443. align-items: center;
  1444. justify-content: space-between;
  1445. span:nth-child(1) {
  1446. width: 70%;
  1447. height: 28PX;
  1448. text-align: left;
  1449. overflow: hidden;
  1450. display: block;
  1451. font-size: 14PX;
  1452. }
  1453. span:nth-child(2) {
  1454. width: 30%;
  1455. height: 28PX;
  1456. text-align: right;
  1457. display: block;
  1458. font-size: 12PX;
  1459. }
  1460. }
  1461. }
  1462. }
  1463. .index-layer-1-right {
  1464. width: 31%;
  1465. border: 1PX solid #ccc;
  1466. box-sizing: border-box;
  1467. padding: 0 10PX;
  1468. padding-bottom: 16PX;
  1469. .imgtlt {
  1470. width: 100%;
  1471. height: 43PX;
  1472. border-bottom: 1PX solid #e7e7e7;
  1473. a {
  1474. display: block;
  1475. width: 92PX;
  1476. height: 42PX;
  1477. line-height: 42PX;
  1478. text-align: center;
  1479. font-size: 20PX;
  1480. color: #333;
  1481. border-bottom: 2PX solid #158d91;
  1482. }
  1483. }
  1484. .con_img_list {
  1485. display: flex;
  1486. flex-wrap: wrap;
  1487. a {
  1488. width: 48%;
  1489. float: left;
  1490. overflow: hidden;
  1491. height: 100PX;
  1492. margin: 20PX auto 0;
  1493. display: block;
  1494. position: relative;
  1495. img {
  1496. display: block;
  1497. width: 100%;
  1498. height: 100%;
  1499. }
  1500. .con_img_list_rgba {
  1501. position: absolute;
  1502. width: 100%;
  1503. height: 22PX;
  1504. line-height: 21PX;
  1505. box-sizing: border-box;
  1506. padding: 0PX 10PX;
  1507. text-align: center;
  1508. bottom: 0PX;
  1509. left: 0PX;
  1510. color: #fff;
  1511. font-size: 16PX;
  1512. z-index: 11;
  1513. background: rgba(0, 0, 0, .6);
  1514. display: block;
  1515. word-break: keep-all;
  1516. white-space: nowrap;
  1517. overflow: hidden;
  1518. text-overflow: ellipsis;
  1519. }
  1520. }
  1521. }
  1522. }
  1523. }
  1524. //第一层 end---------------------------------------->
  1525. //第二层 start---------------------------------------->
  1526. .index—layer-2 {
  1527. width: 1400PX;
  1528. height: auto;
  1529. overflow: hidden;
  1530. margin: 20PX auto;
  1531. display: flex;
  1532. align-items: flex-start;
  1533. justify-content: space-between;
  1534. .index—layer-2-left,
  1535. .index—layer-2-right {
  1536. width: 49%;
  1537. border: 1PX solid #ddd;
  1538. height: auto;
  1539. overflow: hidden;
  1540. .index—layer-2-title {
  1541. display: flex;
  1542. align-items: center;
  1543. justify-content: flex-start;
  1544. background: #fff;
  1545. >div {
  1546. &.active {
  1547. background: #158d91;
  1548. color: #fff;
  1549. a {
  1550. color: #fff;
  1551. }
  1552. }
  1553. width: 118PX;
  1554. height: 44PX;
  1555. line-height: 44PX;
  1556. background: #fff;
  1557. text-align: center;
  1558. color: #808080;
  1559. font-size: 16PX;
  1560. font-weight: bold;
  1561. border-bottom: 2PX solid #158d91;
  1562. a {
  1563. font-size: 20PX;
  1564. color: #808080;
  1565. }
  1566. }
  1567. }
  1568. .index-tabs2-top {
  1569. background: #f8f8f8;
  1570. padding: 20PX 20PX;
  1571. box-sizing: border-box;
  1572. display: flex;
  1573. border-bottom: 1PX dashed #ddd;
  1574. >a {
  1575. margin-right: 11PX;
  1576. img {
  1577. display: block;
  1578. width: 120PX;
  1579. height: 86PX;
  1580. }
  1581. }
  1582. h3 {
  1583. width: 100%;
  1584. height: 26PX;
  1585. line-height: 0;
  1586. overflow: hidden;
  1587. a {
  1588. font-size: 13PX;
  1589. color: #333;
  1590. font-weight: bold;
  1591. }
  1592. }
  1593. p {
  1594. width: 100%;
  1595. height: 60PX;
  1596. line-height: 20PX;
  1597. overflow: hidden;
  1598. a {
  1599. color: #333;
  1600. font-size: 13PX;
  1601. }
  1602. }
  1603. }
  1604. .index-tabs2-bottom {
  1605. padding: 20PX;
  1606. margin: 0;
  1607. a {
  1608. display: block;
  1609. width: 100%;
  1610. overflow: hidden;
  1611. position: relative;
  1612. list-style-position: inside;
  1613. color: #333;
  1614. line-height: 28PX;
  1615. display: flex;
  1616. align-items: center;
  1617. justify-content: space-between;
  1618. span:nth-child(1) {
  1619. width: 70%;
  1620. height: 28PX;
  1621. text-align: left;
  1622. overflow: hidden;
  1623. display: block;
  1624. font-size: 14PX;
  1625. }
  1626. span:nth-child(2) {
  1627. width: 30%;
  1628. height: 28PX;
  1629. text-align: right;
  1630. display: block;
  1631. font-size: 12PX;
  1632. }
  1633. }
  1634. }
  1635. }
  1636. }
  1637. //第二层 end---------------------------------------->
  1638. //第三层 start---------------------------------------->
  1639. .index—layer-3 {
  1640. .index—layer-3-line {
  1641. width: 1400PX;
  1642. display: flex;
  1643. align-items: center;
  1644. justify-content: space-between;
  1645. margin: 0 auto;
  1646. box-sizing: border-box;
  1647. //选项卡类型
  1648. .index—layer-3-tabs-box {
  1649. width: 31%;
  1650. height: auto;
  1651. border: 1PX solid #ddd;
  1652. border-top: 2PX solid #158d91;
  1653. margin: 1%;
  1654. padding: 0 10PX;
  1655. box-sizing: border-box;
  1656. .index—layer-3-tabs-box-title {
  1657. display: flex;
  1658. align-items: center;
  1659. width: 100%;
  1660. border-bottom: 1PX solid #f0f0f0;
  1661. >div {
  1662. &.active {
  1663. background: url(../public/index/current2.png) no-repeat center bottom;
  1664. }
  1665. width: 87PX;
  1666. height: 54PX;
  1667. line-height: 55PX;
  1668. overflow: hidden;
  1669. float: left;
  1670. margin-right: 10PX;
  1671. text-align: center;
  1672. font-size: 20PX;
  1673. color: #333;
  1674. font-weight: bold;
  1675. a {
  1676. color: #333;
  1677. }
  1678. }
  1679. }
  1680. .index—layer-3-news-body-main {
  1681. margin-bottom: 20PX;
  1682. a {
  1683. width: 100%;
  1684. height: 26PX;
  1685. line-height: 26PX;
  1686. list-style-position: inside;
  1687. font-size: 13PX;
  1688. color: #333;
  1689. display: flex;
  1690. align-items: center;
  1691. justify-content: space-between;
  1692. span:nth-child(1) {
  1693. width: 70%;
  1694. height: 28PX;
  1695. text-align: left;
  1696. overflow: hidden;
  1697. display: block;
  1698. font-size: 14PX;
  1699. }
  1700. span:nth-child(2) {
  1701. width: 30%;
  1702. height: 28PX;
  1703. text-align: right;
  1704. display: block;
  1705. font-size: 12PX;
  1706. }
  1707. }
  1708. }
  1709. }
  1710. //常规类型
  1711. .index—layer-3-news-box {
  1712. width: 31%;
  1713. height: auto;
  1714. border: 1PX solid #ddd;
  1715. border-top: 2PX solid #158d91;
  1716. margin: 1%;
  1717. padding: 0 10PX;
  1718. box-sizing: border-box;
  1719. .index—layer-3-news-box-title {
  1720. display: flex;
  1721. align-items: center;
  1722. width: 100%;
  1723. border-bottom: 1PX solid #f0f0f0;
  1724. >div {
  1725. &.active {
  1726. background: url(../public/index/current2.png) no-repeat center bottom;
  1727. }
  1728. width: 87PX;
  1729. height: 54PX;
  1730. line-height: 55PX;
  1731. overflow: hidden;
  1732. float: left;
  1733. margin-right: 10PX;
  1734. text-align: center;
  1735. font-size: 20PX;
  1736. color: #333;
  1737. font-weight: bold;
  1738. a {
  1739. color: #333;
  1740. }
  1741. }
  1742. }
  1743. .index—layer-3-news-body-main {
  1744. margin-bottom: 20PX;
  1745. a {
  1746. width: 100%;
  1747. height: 26PX;
  1748. line-height: 26PX;
  1749. list-style-position: inside;
  1750. font-size: 13PX;
  1751. color: #333;
  1752. display: flex;
  1753. align-items: center;
  1754. justify-items: center;
  1755. span:nth-child(1) {
  1756. width: 70%;
  1757. height: 28PX;
  1758. text-align: left;
  1759. overflow: hidden;
  1760. display: block;
  1761. font-size: 14PX;
  1762. }
  1763. span:nth-child(2) {
  1764. width: 30%;
  1765. height: 28PX;
  1766. text-align: right;
  1767. display: block;
  1768. font-size: 12PX;
  1769. }
  1770. }
  1771. }
  1772. }
  1773. }
  1774. .index—layer-3-news-body-title {
  1775. display: flex;
  1776. align-items: center;
  1777. justify-content: flex-start;
  1778. margin: 20PX 0 14PX;
  1779. padding-bottom: 20PX;
  1780. border-bottom: 1PX dashed #e1e1e1;
  1781. >div {
  1782. &.news-body-left {
  1783. margin-right: 11PX;
  1784. img {
  1785. display: block;
  1786. width: 120PX;
  1787. height: 86PX;
  1788. }
  1789. }
  1790. &.news-body-right {
  1791. >a {
  1792. display: block;
  1793. width: 100%;
  1794. height: 40PX;
  1795. line-height: 40PX;
  1796. font-size: 16PX;
  1797. font-weight: bold;
  1798. overflow: hidden;
  1799. color: #000;
  1800. text-decoration: none;
  1801. }
  1802. p {
  1803. width: 100%;
  1804. height: 46PX;
  1805. line-height: 23PX;
  1806. overflow: hidden;
  1807. font-size: 14PX;
  1808. color: #333;
  1809. a {
  1810. color: #333;
  1811. }
  1812. }
  1813. }
  1814. }
  1815. }
  1816. }
  1817. //第三层 end---------------------------------------->
  1818. //第四层 start---------------------------------------->
  1819. .index-layer-4 {
  1820. width: 1400PX;
  1821. border: 1PX solid #ccc;
  1822. border-radius: 20PX;
  1823. padding: 10PX 20PX;
  1824. box-sizing: border-box;
  1825. margin: 20PX auto;
  1826. .index-layer-4-title {
  1827. display: flex;
  1828. align-items: center;
  1829. justify-content: space-between;
  1830. width: 100%;
  1831. height: 40PX;
  1832. line-height: 40PX;
  1833. border-bottom: 1PX solid #ccc;
  1834. a {
  1835. &:first-child {
  1836. font-size: 22PX;
  1837. color: #1476bd;
  1838. }
  1839. &:last-child {
  1840. font-size: 16PX;
  1841. color: #f00;
  1842. border: none;
  1843. float: right;
  1844. }
  1845. display: block;
  1846. }
  1847. }
  1848. .index-layer-4-body {
  1849. .post_nr {
  1850. width: 100%;
  1851. height: auto;
  1852. margin: 20PX auto;
  1853. border: 1PX solid #ccc;
  1854. border-radius: 10PX;
  1855. padding: 20PX !important;
  1856. box-sizing: border-box;
  1857. .name {
  1858. display: block;
  1859. width: 100%;
  1860. height: auto;
  1861. line-height: 40PX;
  1862. font-size: 16PX;
  1863. color: #333;
  1864. }
  1865. b {
  1866. font-size: 17PX;
  1867. margin: 0 10PX;
  1868. }
  1869. li {
  1870. border-bottom: 1PX solid #ccc;
  1871. padding-bottom: 15PX;
  1872. margin-bottom: 10PX;
  1873. box-sizing: border-box;
  1874. p {
  1875. margin: 0;
  1876. height: auto;
  1877. line-height: 25PX;
  1878. font-size: 15PX;
  1879. color: #000;
  1880. &.hfnr {
  1881. font-weight: bold;
  1882. span {
  1883. color: #f00;
  1884. }
  1885. }
  1886. }
  1887. }
  1888. }
  1889. }
  1890. }
  1891. //第四层 end---------------------------------------->
  1892. }
  1893. @media screen and (min-width: 801px) and (max-width: 1400px) {
  1894. //swiper轮播图 start---------------------------------------->
  1895. .swiper-container {
  1896. width: 100%;
  1897. padding: 20PX 0;
  1898. position: relative;
  1899. margin: 0 auto;
  1900. box-sizing: border-box;
  1901. }
  1902. .custom-swiper {
  1903. width: 100%;
  1904. height: 100%;
  1905. padding: 10px 5px; //给两侧留出空间
  1906. box-sizing: border-box;
  1907. }
  1908. .custom-swiper :deep(.swiper-wrapper) {
  1909. align-items: stretch; //使所有幻灯片高度一致
  1910. }
  1911. .custom-swiper :deep(.swiper-slide) {
  1912. height: auto;
  1913. transition: transform 0.3s ease;
  1914. }
  1915. //悬停效果
  1916. .custom-swiper :deep(.swiper-slide:hover) {
  1917. transform: translateY(-5px);
  1918. z-index: 10;
  1919. }
  1920. .slide-link {
  1921. display: block;
  1922. text-decoration: none;
  1923. color: inherit;
  1924. height: 100%;
  1925. width: 100%;
  1926. }
  1927. .image-container {
  1928. position: relative;
  1929. width: 100%;
  1930. height: 80PX; //根据需求调整
  1931. overflow: hidden;
  1932. box-shadow: 0 4PX 12PX rgba(0, 0, 0, 0.1);
  1933. transition: all 0.3s ease;
  1934. background: #f5f5f5; //加载时的背景色
  1935. }
  1936. .image-container:hover {
  1937. box-shadow: 0 8PX 24PX rgba(0, 0, 0, 0.15);
  1938. }
  1939. .slide-image {
  1940. // width: 100%;
  1941. // height: 100%;
  1942. width: 264PX;
  1943. height: 118PX;
  1944. object-fit: cover;
  1945. transition: transform 0.5s ease;
  1946. }
  1947. .image-container:hover .slide-image {
  1948. transform: scale(1.05);
  1949. }
  1950. .image-title {
  1951. position: absolute;
  1952. bottom: 0;
  1953. left: 0;
  1954. right: 0;
  1955. color: white;
  1956. padding: 12PX 15PX;
  1957. font-size: 14PX;
  1958. line-height: 1.4;
  1959. text-align: center;
  1960. overflow: hidden;
  1961. text-overflow: ellipsis;
  1962. white-space: nowrap;
  1963. background: rgba(0, 0, 0, .6)
  1964. }
  1965. .custom-indicators {
  1966. display: flex;
  1967. justify-content: center;
  1968. gap: 8PX;
  1969. margin-top: 25PX;
  1970. padding: 15PX 10PX;
  1971. flex-wrap: wrap;
  1972. background: rgba(255, 255, 255, 0.9);
  1973. border-radius: 50PX;
  1974. max-width: 90%;
  1975. margin-left: auto;
  1976. margin-right: auto;
  1977. }
  1978. .indicator-btn {
  1979. width: 36PX;
  1980. height: 36PX;
  1981. border-radius: 50%;
  1982. border: 2PX solid #e0e0e0;
  1983. background: white;
  1984. color: #333;
  1985. cursor: pointer;
  1986. transition: all 0.3s ease;
  1987. font-size: 14PX;
  1988. font-weight: 500;
  1989. display: flex;
  1990. align-items: center;
  1991. justify-content: center;
  1992. outline: none;
  1993. }
  1994. .indicator-btn:hover {
  1995. background: #f0f9ff;
  1996. border-color: #409eff;
  1997. transform: scale(1.1);
  1998. }
  1999. .indicator-btn.active-indicator {
  2000. background: #409eff;
  2001. color: white;
  2002. border-color: #409eff;
  2003. box-shadow: 0 4PX 12PX rgba(64, 158, 255, 0.3);
  2004. }
  2005. //swiper加载动画
  2006. .image-container:empty::before {
  2007. content: '';
  2008. position: absolute;
  2009. top: 0;
  2010. left: 0;
  2011. width: 100%;
  2012. height: 100%;
  2013. background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  2014. background-size: 200% 100%;
  2015. animation: loading 1.5s infinite;
  2016. border-radius: 12PX;
  2017. }
  2018. @keyframes loading {
  2019. 0% {
  2020. background-position: 200% 0;
  2021. }
  2022. 100% {
  2023. background-position: -200% 0;
  2024. }
  2025. }
  2026. //swiper箭头颜色
  2027. .custom-swiper :deep(.swiper-button-prev),
  2028. .custom-swiper :deep(.swiper-button-next) {
  2029. color: white !important; //箭头颜色改为白色
  2030. }
  2031. .custom-swiper :deep(.swiper-button-prev):after,
  2032. .custom-swiper :deep(.swiper-button-next):after {
  2033. color: white !important; //确保箭头图标也是白色
  2034. }
  2035. //swiper轮播图 end---------------------------------------->
  2036. //轮播图 start---------------------------------------->
  2037. .nuxt-swiper {
  2038. width: 100%;
  2039. height: 300PX;
  2040. position: relative;
  2041. img {
  2042. width: 100%;
  2043. height: 100%;
  2044. }
  2045. span {
  2046. display: inline-block;
  2047. width: 100%;
  2048. height: 40PX;
  2049. line-height: 40PX;
  2050. padding-left: 20PX;
  2051. box-sizing: border-box;
  2052. position: absolute;
  2053. bottom: 0;
  2054. left: 0;
  2055. font-family: Source Han Sans, Source Han Sans;
  2056. font-size: 16PX;
  2057. color: #FFFFFF;
  2058. //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  2059. background: rgba(0, 0, 0, .6);
  2060. }
  2061. }
  2062. .el-carousel {
  2063. // 左右箭头按钮
  2064. .el-carousel__arrow--right :deep(.class-name),
  2065. .el-carousel__arrow--left :deep(.class-name) {
  2066. width: 68PX;
  2067. height: 68PX;
  2068. }
  2069. //左右箭头图片
  2070. /deep/.el-icon svg {
  2071. height: 1em;
  2072. width: 1em;
  2073. background-color: transparent;
  2074. }
  2075. /deep/.el-carousel__arrow {
  2076. border-radius: 0;
  2077. background-color: transparent;
  2078. }
  2079. /deep/.el-carousel__arrow i {
  2080. font-size: 68PX !important;
  2081. }
  2082. /deep/ .el-carousel__indicators {
  2083. // 指示器
  2084. left: unset;
  2085. transform: unset;
  2086. right: 41%;
  2087. }
  2088. /deep/ .el-carousel__button {
  2089. // 指示器按钮
  2090. width: 15PX;
  2091. height: 15PX;
  2092. border-radius: 50%;
  2093. border: none;
  2094. opacity: 1;
  2095. background-color: #FFFFFF;
  2096. bottom: 30PX;
  2097. }
  2098. /deep/ .is-active .el-carousel__button {
  2099. // 指示器激活按钮
  2100. background: #158d91;
  2101. }
  2102. /deep/.custom-indicators {
  2103. position: absolute;
  2104. bottom: 10PX;
  2105. left: 50%;
  2106. transform: translateX(-50%);
  2107. }
  2108. /deep/ .el-carousel__indicators {
  2109. right: 3%;
  2110. bottom: 10%;
  2111. }
  2112. /deep/ .el-carousel__arrow {
  2113. top: 50%;
  2114. }
  2115. }
  2116. //轮播图 end---------------------------------------->
  2117. //第一层 start---------------------------------------->
  2118. .index—layer-1 {
  2119. width: 100%;
  2120. height: auto;
  2121. overflow: hidden;
  2122. margin: 20PX auto;
  2123. display: flex;
  2124. align-items: flex-start;
  2125. justify-content: space-between;
  2126. .index—layer-1-left {
  2127. width: 31%;
  2128. border: 1PX solid #ccc;
  2129. }
  2130. .index-layer-1-middle {
  2131. width: 31%;
  2132. border: 1PX solid #ccc;
  2133. box-sizing: border-box;
  2134. padding: 0 10PX;
  2135. padding-bottom: 5PX;
  2136. .tabtlt {
  2137. width: 100%;
  2138. height: auto;
  2139. outline: hidden;
  2140. border-bottom: 1PX solid #f0f0f0;
  2141. margin: 7PX 0 18PX;
  2142. overflow: hidden;
  2143. display: flex;
  2144. align-self: center;
  2145. justify-content: space-between;
  2146. a {
  2147. color: #337ab7;
  2148. text-decoration: none;
  2149. }
  2150. div {
  2151. width: 50%;
  2152. text-align: center;
  2153. width: 100%;
  2154. height: 50PX;
  2155. line-height: 50PX;
  2156. font-size: 20PX;
  2157. color: #000;
  2158. background: #f3f3f3;
  2159. text-align: center;
  2160. cursor: pointer;
  2161. }
  2162. div.intabtltbg {
  2163. background: url(public/index/current.gif) no-repeat center bottom !important;
  2164. }
  2165. }
  2166. .coninfoitem {
  2167. width: 100%;
  2168. overflow: hidden;
  2169. margin: 0PX auto;
  2170. >div {
  2171. &.coninfoitem_img {
  2172. height: 86PX;
  2173. overflow: hidden;
  2174. margin-bottom: 5PX;
  2175. display: flex;
  2176. align-items: flex-start;
  2177. }
  2178. h3 {
  2179. line-height: 26PX;
  2180. a {
  2181. font-size: 13PX;
  2182. color: #333;
  2183. font-weight: bold;
  2184. width: 100%;
  2185. height: 26PX;
  2186. line-height: 26PX;
  2187. overflow: hidden;
  2188. display: block;
  2189. }
  2190. }
  2191. img {
  2192. width: 120PX;
  2193. height: 86PX;
  2194. float: left;
  2195. margin-right: 11PX;
  2196. }
  2197. p {
  2198. line-height: 0;
  2199. a {
  2200. line-height: 20PX;
  2201. color: #333;
  2202. font-size: 13PX;
  2203. text-indent: 2em;
  2204. display: block;
  2205. }
  2206. }
  2207. }
  2208. .coninfoitem_title {
  2209. width: 100%;
  2210. height: 28PX;
  2211. line-height: 28PX;
  2212. overflow: hidden;
  2213. position: relative;
  2214. list-style-position: inside;
  2215. color: #000;
  2216. display: flex;
  2217. align-items: center;
  2218. justify-content: space-between;
  2219. span:nth-child(1) {
  2220. width: 70%;
  2221. height: 28PX;
  2222. text-align: left;
  2223. overflow: hidden;
  2224. display: block;
  2225. font-size: 14PX;
  2226. }
  2227. span:nth-child(2) {
  2228. width: 30%;
  2229. height: 28PX;
  2230. text-align: right;
  2231. display: block;
  2232. font-size: 12PX;
  2233. color: #666;
  2234. }
  2235. }
  2236. }
  2237. }
  2238. .index-layer-1-right {
  2239. width: 31%;
  2240. border: 1PX solid #ccc;
  2241. box-sizing: border-box;
  2242. padding: 0 10PX;
  2243. padding-bottom: 16PX;
  2244. .imgtlt {
  2245. width: 100%;
  2246. height: 43PX;
  2247. border-bottom: 1PX solid #e7e7e7;
  2248. a {
  2249. display: block;
  2250. width: 92PX;
  2251. height: 42PX;
  2252. line-height: 42PX;
  2253. text-align: center;
  2254. font-size: 20PX;
  2255. color: #333;
  2256. border-bottom: 2PX solid #158d91;
  2257. }
  2258. }
  2259. .con_img_list {
  2260. display: flex;
  2261. flex-wrap: wrap;
  2262. a {
  2263. width: 48%;
  2264. float: left;
  2265. overflow: hidden;
  2266. height: 100PX;
  2267. margin: 20PX auto 0;
  2268. display: block;
  2269. position: relative;
  2270. img {
  2271. display: block;
  2272. width: 100%;
  2273. height: 100%;
  2274. }
  2275. .con_img_list_rgba {
  2276. position: absolute;
  2277. width: 100%;
  2278. height: 22PX;
  2279. line-height: 21PX;
  2280. box-sizing: border-box;
  2281. padding: 0PX 10PX;
  2282. text-align: center;
  2283. bottom: 0PX;
  2284. left: 0PX;
  2285. color: #fff;
  2286. font-size: 16PX;
  2287. z-index: 11;
  2288. background: rgba(0, 0, 0, .6);
  2289. display: block;
  2290. word-break: keep-all;
  2291. white-space: nowrap;
  2292. overflow: hidden;
  2293. text-overflow: ellipsis;
  2294. }
  2295. }
  2296. }
  2297. }
  2298. }
  2299. //第一层 end---------------------------------------->
  2300. //第二层 start---------------------------------------->
  2301. .index—layer-2 {
  2302. width: 100%;
  2303. height: auto;
  2304. overflow: hidden;
  2305. margin: 20PX auto;
  2306. display: flex;
  2307. align-items: flex-start;
  2308. justify-content: space-between;
  2309. .index—layer-2-left,
  2310. .index—layer-2-right {
  2311. width: 49%;
  2312. border: 1PX solid #ddd;
  2313. height: auto;
  2314. overflow: hidden;
  2315. .index—layer-2-title {
  2316. display: flex;
  2317. align-items: center;
  2318. justify-content: flex-start;
  2319. background: #fff;
  2320. >div {
  2321. &.active {
  2322. background: #158d91;
  2323. color: #fff;
  2324. a {
  2325. color: #fff;
  2326. }
  2327. }
  2328. width: 118PX;
  2329. height: 44PX;
  2330. line-height: 44PX;
  2331. background: #fff;
  2332. text-align: center;
  2333. color: #808080;
  2334. font-size: 16PX;
  2335. font-weight: bold;
  2336. border-bottom: 2PX solid #158d91;
  2337. a {
  2338. font-size: 20PX;
  2339. color: #808080;
  2340. }
  2341. }
  2342. }
  2343. .index-tabs2-top {
  2344. background: #f8f8f8;
  2345. padding: 20PX 20PX;
  2346. box-sizing: border-box;
  2347. display: flex;
  2348. border-bottom: 1PX dashed #ddd;
  2349. >a {
  2350. margin-right: 11PX;
  2351. img {
  2352. display: block;
  2353. width: 120PX;
  2354. height: 86PX;
  2355. }
  2356. }
  2357. h3 {
  2358. width: 100%;
  2359. height: 26PX;
  2360. line-height: 26PX;
  2361. overflow: hidden;
  2362. a {
  2363. font-size: 13PX;
  2364. color: #333;
  2365. font-weight: bold;
  2366. }
  2367. }
  2368. p {
  2369. width: 100%;
  2370. height: 60PX;
  2371. line-height: 18PX;
  2372. overflow: hidden;
  2373. a {
  2374. color: #333;
  2375. font-size: 13PX;
  2376. }
  2377. }
  2378. }
  2379. .index-tabs2-bottom {
  2380. padding: 20PX;
  2381. margin: 0;
  2382. a {
  2383. display: block;
  2384. width: 100%;
  2385. height: 28PX;
  2386. line-height: 28PX;
  2387. color: #333;
  2388. font-size: 13PX;
  2389. display: flex;
  2390. align-items: center;
  2391. justify-content: space-between;
  2392. span:nth-child(1) {
  2393. width: 70%;
  2394. height: 28PX;
  2395. text-align: left;
  2396. overflow: hidden;
  2397. display: block;
  2398. font-size: 14PX;
  2399. }
  2400. span:nth-child(2) {
  2401. width: 30%;
  2402. height: 28PX;
  2403. text-align: right;
  2404. display: block;
  2405. font-size: 12PX;
  2406. }
  2407. }
  2408. }
  2409. }
  2410. }
  2411. //第二层 end---------------------------------------->
  2412. //第三层 start---------------------------------------->
  2413. .index—layer-3 {
  2414. .index—layer-3-line {
  2415. width: 100%;
  2416. display: flex;
  2417. align-items: center;
  2418. justify-content: space-between;
  2419. margin: 0 auto;
  2420. box-sizing: border-box;
  2421. //选项卡类型
  2422. .index—layer-3-tabs-box {
  2423. width: 31%;
  2424. height: auto;
  2425. border: 1PX solid #ddd;
  2426. border-top: 2PX solid #158d91;
  2427. margin: 1%;
  2428. padding: 0 10PX;
  2429. box-sizing: border-box;
  2430. .index—layer-3-tabs-box-title {
  2431. display: flex;
  2432. align-items: center;
  2433. width: 100%;
  2434. border-bottom: 1PX solid #f0f0f0;
  2435. >div {
  2436. &.active {
  2437. background: url(../public/index/current2.png) no-repeat center bottom;
  2438. }
  2439. width: 87PX;
  2440. height: 54PX;
  2441. line-height: 55PX;
  2442. overflow: hidden;
  2443. float: left;
  2444. margin-right: 10PX;
  2445. text-align: center;
  2446. font-size: 20PX;
  2447. color: #333;
  2448. font-weight: bold;
  2449. a {
  2450. color: #333;
  2451. }
  2452. }
  2453. }
  2454. .index—layer-3-news-body-main {
  2455. margin-bottom: 20PX;
  2456. a {
  2457. width: 100%;
  2458. height: 26PX;
  2459. line-height: 26PX;
  2460. list-style-position: inside;
  2461. font-size: 13PX;
  2462. color: #333;
  2463. display: block;
  2464. word-break: keep-all;
  2465. white-space: nowrap;
  2466. overflow: hidden;
  2467. text-overflow: ellipsis;
  2468. width: 66%;
  2469. }
  2470. }
  2471. }
  2472. //常规类型
  2473. .index—layer-3-news-box {
  2474. width: 31%;
  2475. height: auto;
  2476. border: 1PX solid #ddd;
  2477. border-top: 2PX solid #158d91;
  2478. margin: 1%;
  2479. padding: 0 10PX;
  2480. box-sizing: border-box;
  2481. .index—layer-3-news-box-title {
  2482. display: flex;
  2483. align-items: center;
  2484. width: 100%;
  2485. border-bottom: 1PX solid #f0f0f0;
  2486. >div {
  2487. &.active {
  2488. background: url(../public/index/current2.png) no-repeat center bottom;
  2489. }
  2490. width: 87PX;
  2491. height: 54PX;
  2492. line-height: 55PX;
  2493. overflow: hidden;
  2494. float: left;
  2495. margin-right: 10PX;
  2496. text-align: center;
  2497. font-size: 20PX;
  2498. color: #333;
  2499. font-weight: bold;
  2500. a {
  2501. color: #333;
  2502. }
  2503. }
  2504. }
  2505. .index—layer-3-news-body-main {
  2506. margin-bottom: 20PX;
  2507. a {
  2508. width: 100%;
  2509. height: 26PX;
  2510. line-height: 26PX;
  2511. list-style-position: inside;
  2512. font-size: 13PX;
  2513. color: #333;
  2514. display: flex;
  2515. align-items: center;
  2516. justify-content: space-between;
  2517. span:nth-child(1) {
  2518. width: 70%;
  2519. height: 28PX;
  2520. text-align: left;
  2521. overflow: hidden;
  2522. display: block;
  2523. font-size: 14PX;
  2524. }
  2525. span:nth-child(2) {
  2526. width: 30%;
  2527. height: 28PX;
  2528. text-align: right;
  2529. display: block;
  2530. font-size: 12PX;
  2531. }
  2532. }
  2533. }
  2534. }
  2535. }
  2536. .index—layer-3-news-body-title {
  2537. display: flex;
  2538. align-items: center;
  2539. justify-content: flex-start;
  2540. margin: 20PX 0 14PX;
  2541. padding-bottom: 20PX;
  2542. border-bottom: 1PX dashed #e1e1e1;
  2543. >div {
  2544. &.news-body-left {
  2545. margin-right: 11PX;
  2546. img {
  2547. display: block;
  2548. width: 120PX;
  2549. height: 86PX;
  2550. }
  2551. }
  2552. &.news-body-right {
  2553. >a {
  2554. display: block;
  2555. width: 100%;
  2556. height: 40PX;
  2557. line-height: 40PX;
  2558. font-size: 16PX;
  2559. font-weight: bold;
  2560. overflow: hidden;
  2561. color: #000;
  2562. text-decoration: none;
  2563. }
  2564. p {
  2565. width: 100%;
  2566. height: 46PX;
  2567. line-height: 23PX;
  2568. overflow: hidden;
  2569. font-size: 14PX;
  2570. color: #333;
  2571. a {
  2572. color: #333;
  2573. }
  2574. }
  2575. }
  2576. }
  2577. }
  2578. }
  2579. //第三层 end---------------------------------------->
  2580. //第四层 start---------------------------------------->
  2581. .index-layer-4 {
  2582. width: 100%;
  2583. border: 1PX solid #ccc;
  2584. border-radius: 20PX;
  2585. padding: 10PX 20PX;
  2586. box-sizing: border-box;
  2587. margin: 20PX auto;
  2588. .index-layer-4-title {
  2589. display: flex;
  2590. align-items: center;
  2591. justify-content: space-between;
  2592. width: 100%;
  2593. height: 40PX;
  2594. line-height: 40PX;
  2595. border-bottom: 1PX solid #ccc;
  2596. a {
  2597. &:first-child {
  2598. font-size: 22PX;
  2599. color: #1476bd;
  2600. }
  2601. &:last-child {
  2602. font-size: 16PX;
  2603. color: #f00;
  2604. border: none;
  2605. float: right;
  2606. }
  2607. display: block;
  2608. }
  2609. }
  2610. .index-layer-4-body {
  2611. .post_nr {
  2612. width: 100%;
  2613. height: auto;
  2614. margin: 20PX auto;
  2615. border: 1PX solid #ccc;
  2616. border-radius: 10PX;
  2617. padding: 20PX !important;
  2618. box-sizing: border-box;
  2619. .name {
  2620. display: block;
  2621. width: 100%;
  2622. height: auto;
  2623. line-height: 40PX;
  2624. font-size: 16PX;
  2625. color: #333;
  2626. }
  2627. b {
  2628. font-size: 17PX;
  2629. margin: 0 10PX;
  2630. }
  2631. li {
  2632. border-bottom: 1PX solid #ccc;
  2633. padding-bottom: 15PX;
  2634. margin-bottom: 10PX;
  2635. box-sizing: border-box;
  2636. p {
  2637. margin: 0;
  2638. height: auto;
  2639. line-height: 25PX;
  2640. font-size: 15PX;
  2641. color: #000;
  2642. &.hfnr {
  2643. font-weight: bold;
  2644. span {
  2645. color: #f00;
  2646. }
  2647. }
  2648. }
  2649. }
  2650. }
  2651. }
  2652. }
  2653. //第四层 end---------------------------------------->
  2654. }
  2655. @media screen and (max-width: 800px) {
  2656. //swiper轮播图 start---------------------------------------->
  2657. .swiper-container {
  2658. width: 100%;
  2659. padding: 20px 0;
  2660. position: relative;
  2661. max-width: 1400PX;
  2662. margin: 0 auto;
  2663. display: none;
  2664. }
  2665. .custom-swiper {
  2666. width: 100%;
  2667. height: 100%;
  2668. padding: 10PX 5PX; //给两侧留出空间
  2669. }
  2670. .custom-swiper :deep(.swiper-wrapper) {
  2671. align-items: stretch; //使所有幻灯片高度一致
  2672. }
  2673. .custom-swiper :deep(.swiper-slide) {
  2674. height: auto;
  2675. transition: transform 0.3s ease;
  2676. }
  2677. //悬停效果
  2678. .custom-swiper :deep(.swiper-slide:hover) {
  2679. transform: translateY(-5px);
  2680. z-index: 10;
  2681. }
  2682. .slide-link {
  2683. display: block;
  2684. text-decoration: none;
  2685. color: inherit;
  2686. height: 100%;
  2687. width: 100%;
  2688. }
  2689. .image-container {
  2690. position: relative;
  2691. width: 100%;
  2692. height: 118PX; //根据需求调整
  2693. overflow: hidden;
  2694. box-shadow: 0 4PX 12PX rgba(0, 0, 0, 0.1);
  2695. transition: all 0.3s ease;
  2696. background: #f5f5f5; //加载时的背景色
  2697. }
  2698. .image-container:hover {
  2699. box-shadow: 0 8PX 24PX rgba(0, 0, 0, 0.15);
  2700. }
  2701. .slide-image {
  2702. // width: 100%;
  2703. // height: 100%;
  2704. width: 264PX;
  2705. height: 118PX;
  2706. object-fit: cover;
  2707. transition: transform 0.5s ease;
  2708. }
  2709. .image-container:hover .slide-image {
  2710. transform: scale(1.05);
  2711. }
  2712. .image-title {
  2713. position: absolute;
  2714. bottom: 0;
  2715. left: 0;
  2716. right: 0;
  2717. color: white;
  2718. padding: 12PX 15PX;
  2719. font-size: 14PX;
  2720. line-height: 1.4;
  2721. text-align: center;
  2722. overflow: hidden;
  2723. text-overflow: ellipsis;
  2724. white-space: nowrap;
  2725. background: rgba(0, 0, 0, .6)
  2726. }
  2727. .custom-indicators {
  2728. display: flex;
  2729. justify-content: center;
  2730. gap: 8PX;
  2731. margin-top: 25PX;
  2732. padding: 15PX 10PX;
  2733. flex-wrap: wrap;
  2734. background: rgba(255, 255, 255, 0.9);
  2735. border-radius: 50PX;
  2736. max-width: 90%;
  2737. margin-left: auto;
  2738. margin-right: auto;
  2739. }
  2740. .indicator-btn {
  2741. width: 36PX;
  2742. height: 36PX;
  2743. border-radius: 50%;
  2744. border: 2PX solid #e0e0e0;
  2745. background: white;
  2746. color: #333;
  2747. cursor: pointer;
  2748. transition: all 0.3s ease;
  2749. font-size: 14PX;
  2750. font-weight: 500;
  2751. display: flex;
  2752. align-items: center;
  2753. justify-content: center;
  2754. outline: none;
  2755. }
  2756. .indicator-btn:hover {
  2757. background: #f0f9ff;
  2758. border-color: #409eff;
  2759. transform: scale(1.1);
  2760. }
  2761. .indicator-btn.active-indicator {
  2762. background: #409eff;
  2763. color: white;
  2764. border-color: #409eff;
  2765. box-shadow: 0 4PX 12PX rgba(64, 158, 255, 0.3);
  2766. }
  2767. //swiper加载动画
  2768. .image-container:empty::before {
  2769. content: '';
  2770. position: absolute;
  2771. top: 0;
  2772. left: 0;
  2773. width: 100%;
  2774. height: 100%;
  2775. background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  2776. background-size: 200% 100%;
  2777. animation: loading 1.5s infinite;
  2778. border-radius: 12PX;
  2779. }
  2780. @keyframes loading {
  2781. 0% {
  2782. background-position: 200% 0;
  2783. }
  2784. 100% {
  2785. background-position: -200% 0;
  2786. }
  2787. }
  2788. //swiper箭头颜色
  2789. .custom-swiper :deep(.swiper-button-prev),
  2790. .custom-swiper :deep(.swiper-button-next) {
  2791. color: white !important; //箭头颜色改为白色
  2792. }
  2793. .custom-swiper :deep(.swiper-button-prev):after,
  2794. .custom-swiper :deep(.swiper-button-next):after {
  2795. color: white !important; //确保箭头图标也是白色
  2796. }
  2797. //swiper轮播图 end---------------------------------------->
  2798. //轮播图 start---------------------------------------->
  2799. .nuxt-swiper {
  2800. width: 100%;
  2801. height: 220PX;
  2802. position: relative;
  2803. img {
  2804. width: 100%;
  2805. height: 300PX;
  2806. }
  2807. span {
  2808. display: inline-block;
  2809. width: 100%;
  2810. height: 40PX;
  2811. line-height: 40PX;
  2812. padding-left: 20PX;
  2813. box-sizing: border-box;
  2814. position: absolute;
  2815. bottom: 0;
  2816. left: 0;
  2817. font-family: Source Han Sans, Source Han Sans;
  2818. font-size: 16PX;
  2819. color: #FFFFFF;
  2820. //background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  2821. background: rgba(0, 0, 0, .6);
  2822. }
  2823. }
  2824. .el-carousel {
  2825. // 左右箭头按钮
  2826. .el-carousel__arrow--right :deep(.class-name),
  2827. .el-carousel__arrow--left :deep(.class-name) {
  2828. width: 68PX;
  2829. height: 68PX;
  2830. }
  2831. //左右箭头图片
  2832. /deep/.el-icon svg {
  2833. height: 1em;
  2834. width: 1em;
  2835. background-color: transparent;
  2836. }
  2837. /deep/.el-carousel__arrow {
  2838. border-radius: 0;
  2839. background-color: transparent;
  2840. }
  2841. /deep/.el-carousel__arrow i {
  2842. font-size: 68PX !important;
  2843. }
  2844. /deep/ .el-carousel__indicators {
  2845. // 指示器
  2846. left: unset;
  2847. transform: unset;
  2848. right: 41%;
  2849. }
  2850. /deep/ .el-carousel__button {
  2851. // 指示器按钮
  2852. width: 15PX;
  2853. height: 15PX;
  2854. border-radius: 50%;
  2855. border: none;
  2856. opacity: 1;
  2857. background-color: #FFFFFF;
  2858. bottom: 30PX;
  2859. }
  2860. /deep/ .is-active .el-carousel__button {
  2861. // 指示器激活按钮
  2862. background: #158d91;
  2863. }
  2864. /deep/.custom-indicators {
  2865. position: absolute;
  2866. bottom: 10PX;
  2867. left: 50%;
  2868. transform: translateX(-50%);
  2869. }
  2870. /deep/ .el-carousel__indicators {
  2871. right: 3%;
  2872. bottom: 10%;
  2873. }
  2874. /deep/ .el-carousel__arrow {
  2875. top: 50%;
  2876. }
  2877. /deep/ .el-carousel__container {
  2878. height: 220PX;
  2879. }
  2880. }
  2881. //轮播图 end---------------------------------------->
  2882. //第一层 start---------------------------------------->
  2883. .index—layer-1 {
  2884. width: 100%;
  2885. height: auto;
  2886. overflow: hidden;
  2887. margin: 20PX auto;
  2888. display: flex;
  2889. align-items: flex-start;
  2890. justify-content: space-between;
  2891. flex-wrap: wrap;
  2892. box-sizing: border-box;
  2893. padding: 0 10PX;
  2894. .index—layer-1-left {
  2895. width: 100%;
  2896. margin: 10PX 0;
  2897. border: 1PX solid #ccc;
  2898. }
  2899. .index-layer-1-middle {
  2900. width: 100%;
  2901. border: 1PX solid #ccc;
  2902. box-sizing: border-box;
  2903. padding: 0 10PX;
  2904. padding-bottom: 5PX;
  2905. margin: 10PX 0;
  2906. .tabtlt {
  2907. width: 100%;
  2908. height: auto;
  2909. outline: hidden;
  2910. border-bottom: 1PX solid #f0f0f0;
  2911. margin: 7PX 0 18PX;
  2912. overflow: hidden;
  2913. display: flex;
  2914. align-self: center;
  2915. justify-content: space-between;
  2916. a {
  2917. color: #337ab7;
  2918. text-decoration: none;
  2919. }
  2920. div {
  2921. width: 50%;
  2922. text-align: center;
  2923. width: 100%;
  2924. height: 50PX;
  2925. line-height: 50PX;
  2926. font-size: 20PX;
  2927. color: #000;
  2928. background: #f3f3f3;
  2929. text-align: center;
  2930. cursor: pointer;
  2931. }
  2932. div.intabtltbg {
  2933. background: url(public/index/current.gif) no-repeat center bottom !important;
  2934. }
  2935. }
  2936. .coninfoitem {
  2937. width: 100%;
  2938. overflow: hidden;
  2939. margin: 0px auto;
  2940. >div {
  2941. &.coninfoitem_img {
  2942. height: 120PX;
  2943. overflow: hidden;
  2944. margin-bottom: 5PX;
  2945. display: flex;
  2946. align-items: flex-start;
  2947. justify-content: space-between;
  2948. }
  2949. h3 {
  2950. line-height: 0;
  2951. a {
  2952. font-size: 30px;
  2953. color: #333;
  2954. font-weight: bold;
  2955. width: 100%;
  2956. height: 26PX;
  2957. line-height: 26PX;
  2958. overflow: hidden;
  2959. display: block;
  2960. }
  2961. }
  2962. img {
  2963. width: 130PX;
  2964. height: 120PX;
  2965. float: left;
  2966. margin-right: 11PX;
  2967. }
  2968. p {
  2969. line-height: 0;
  2970. a {
  2971. color: #333;
  2972. font-size: 30px;
  2973. line-height: 30PX;
  2974. display: block;
  2975. text-indent: 2em;
  2976. }
  2977. }
  2978. }
  2979. .coninfoitem_title {
  2980. width: 100%;
  2981. height: 70px;
  2982. line-height: 70px;
  2983. color: #333;
  2984. display: block;
  2985. font-weight: normal;
  2986. display: flex;
  2987. align-items: center;
  2988. justify-content: space-between;
  2989. span:nth-child(1) {
  2990. width: 70%;
  2991. height: 50px;
  2992. text-align: left;
  2993. overflow: hidden;
  2994. display: block;
  2995. font-size: 28px;
  2996. }
  2997. span:nth-child(2) {
  2998. width: 30%;
  2999. height: 50px;
  3000. text-align: right;
  3001. display: block;
  3002. font-size: 24px;
  3003. color: #666;
  3004. }
  3005. }
  3006. }
  3007. }
  3008. .index-layer-1-right {
  3009. width: 100%;
  3010. border: 1PX solid #ccc;
  3011. box-sizing: border-box;
  3012. padding-bottom: 16PX;
  3013. padding: 10PX;
  3014. .imgtlt {
  3015. width: 100%;
  3016. height: 43PX;
  3017. border-bottom: 1PX solid #e7e7e7;
  3018. a {
  3019. display: block;
  3020. width: 92PX;
  3021. height: 42PX;
  3022. line-height: 42PX;
  3023. text-align: center;
  3024. font-size: 20PX;
  3025. color: #333;
  3026. border-bottom: 2PX solid #158d91;
  3027. }
  3028. }
  3029. .con_img_list {
  3030. display: flex;
  3031. flex-wrap: wrap;
  3032. a {
  3033. width: 48%;
  3034. float: left;
  3035. overflow: hidden;
  3036. height: 100PX;
  3037. margin: 20PX auto 0;
  3038. display: block;
  3039. position: relative;
  3040. img {
  3041. display: block;
  3042. width: 100%;
  3043. height: 100%;
  3044. }
  3045. .con_img_list_rgba {
  3046. position: absolute;
  3047. width: 100%;
  3048. height: 22PX;
  3049. line-height: 21PX;
  3050. box-sizing: border-box;
  3051. padding: 0 10PX;
  3052. text-align: center;
  3053. bottom: 0PX;
  3054. left: 0PX;
  3055. color: #fff;
  3056. font-size: 16PX;
  3057. z-index: 11;
  3058. background: rgba(0, 0, 0, .6);
  3059. display: block;
  3060. word-break: keep-all;
  3061. white-space: nowrap;
  3062. overflow: hidden;
  3063. text-overflow: ellipsis;
  3064. }
  3065. }
  3066. }
  3067. }
  3068. }
  3069. //第一层 end---------------------------------------->
  3070. //第二层 start---------------------------------------->
  3071. .index—layer-2 {
  3072. width: 100%;
  3073. height: auto;
  3074. overflow: hidden;
  3075. margin: 20PX auto;
  3076. display: flex;
  3077. align-items: flex-start;
  3078. justify-content: space-between;
  3079. flex-wrap: wrap;
  3080. padding: 0 10PX;
  3081. box-sizing: border-box;
  3082. .index—layer-2-left,
  3083. .index—layer-2-right {
  3084. width: 100%;
  3085. border: 1PX solid #ddd;
  3086. height: auto;
  3087. overflow: hidden;
  3088. margin: 10PX 0;
  3089. .index—layer-2-title {
  3090. display: flex;
  3091. align-items: center;
  3092. justify-content: flex-start;
  3093. background: #fff;
  3094. >div {
  3095. &.active {
  3096. background: #158d91;
  3097. color: #fff;
  3098. a {
  3099. color: #fff;
  3100. }
  3101. }
  3102. width: 118PX;
  3103. height: 44PX;
  3104. line-height: 44PX;
  3105. background: #fff;
  3106. text-align: center;
  3107. color: #808080;
  3108. font-size: 16PX;
  3109. font-weight: bold;
  3110. border-bottom: 2PX solid #158d91;
  3111. a {
  3112. font-size: 20PX;
  3113. color: #808080;
  3114. }
  3115. }
  3116. }
  3117. .index-tabs2-top {
  3118. background: #f8f8f8;
  3119. padding: 20PX 20PX;
  3120. box-sizing: border-box;
  3121. display: flex;
  3122. border-bottom: 1PX dashed #ddd;
  3123. >a {
  3124. margin-right: 11PX;
  3125. img {
  3126. display: block;
  3127. width: 130PX;
  3128. height: 120PX;
  3129. }
  3130. }
  3131. h3 {
  3132. width: 100%;
  3133. height: 40PX;
  3134. line-height: 40PX;
  3135. line-height: 0;
  3136. overflow: hidden;
  3137. a {
  3138. display: block;
  3139. width: 100%;
  3140. height: 40PX;
  3141. line-height: 40PX;
  3142. font-size: 16PX;
  3143. font-weight: bold;
  3144. overflow: hidden;
  3145. color: #000;
  3146. text-decoration: none;
  3147. }
  3148. }
  3149. p {
  3150. width: 100%;
  3151. height: 60PX;
  3152. line-height: 20PX;
  3153. overflow: hidden;
  3154. a {
  3155. color: #333;
  3156. font-size: 13PX;
  3157. }
  3158. }
  3159. }
  3160. .index-tabs2-bottom {
  3161. padding: 20PX;
  3162. margin: 0;
  3163. box-sizing: border-box;
  3164. a {
  3165. display: block;
  3166. width: 100%;
  3167. height: 28PX;
  3168. line-height: 28PX;
  3169. overflow: hidden;
  3170. position: relative;
  3171. list-style-position: inside;
  3172. color: #333;
  3173. font-size: 32px;
  3174. display: flex;
  3175. align-items: center;
  3176. justify-content: space-between;
  3177. span:nth-child(1) {
  3178. width: 70%;
  3179. height: 50px;
  3180. text-align: left;
  3181. overflow: hidden;
  3182. display: block;
  3183. font-size: 28px;
  3184. }
  3185. span:nth-child(2) {
  3186. width: 30%;
  3187. height: 50px;
  3188. text-align: right;
  3189. display: block;
  3190. font-size: 24px;
  3191. color: #666;
  3192. }
  3193. }
  3194. }
  3195. }
  3196. }
  3197. //第二层 end---------------------------------------->
  3198. //第三层 start---------------------------------------->
  3199. .index—layer-3 {
  3200. .index—layer-3-line {
  3201. width: 100%;
  3202. display: flex;
  3203. align-items: center;
  3204. justify-content: space-between;
  3205. margin: 0 auto;
  3206. box-sizing: border-box;
  3207. flex-wrap: wrap;
  3208. padding: 0 10PX;
  3209. //选项卡类型
  3210. .index—layer-3-tabs-box {
  3211. width: 100%;
  3212. height: auto;
  3213. border: 1PX solid #ddd;
  3214. border-top: 2PX solid #158d91;
  3215. margin: 1%;
  3216. padding: 0 10PX;
  3217. box-sizing: border-box;
  3218. margin: 10PX 0;
  3219. .index—layer-3-tabs-box-title {
  3220. display: flex;
  3221. align-items: center;
  3222. width: 100%;
  3223. border-bottom: 1PX solid #f0f0f0;
  3224. >div {
  3225. &.active {
  3226. background: url(../public/index/current2.png) no-repeat center bottom;
  3227. }
  3228. width: 87PX;
  3229. height: 54PX;
  3230. line-height: 55PX;
  3231. overflow: hidden;
  3232. float: left;
  3233. margin-right: 10PX;
  3234. text-align: center;
  3235. font-size: 20PX;
  3236. color: #333;
  3237. font-weight: bold;
  3238. a {
  3239. color: #333;
  3240. }
  3241. }
  3242. }
  3243. .index—layer-3-news-body-main {
  3244. margin-bottom: 20PX;
  3245. a {
  3246. width: 100%;
  3247. height: 26PX;
  3248. line-height: 26PX;
  3249. font-size: 13PX;
  3250. color: #333;
  3251. display: flex;
  3252. align-items: center;
  3253. justify-content: space-between;
  3254. span:nth-child(1) {
  3255. width: 70%;
  3256. height: 50px;
  3257. text-align: left;
  3258. overflow: hidden;
  3259. display: block;
  3260. font-size: 28px;
  3261. }
  3262. span:nth-child(2) {
  3263. width: 30%;
  3264. height: 50px;
  3265. text-align: right;
  3266. display: block;
  3267. font-size: 24px;
  3268. color: #666;
  3269. }
  3270. }
  3271. }
  3272. }
  3273. //常规类型
  3274. .index—layer-3-news-box {
  3275. width: 100%;
  3276. height: auto;
  3277. border: 1PX solid #ddd;
  3278. border-top: 2PX solid #158d91;
  3279. margin: 1%;
  3280. padding: 0 10PX;
  3281. box-sizing: border-box;
  3282. margin: 10PX 0;
  3283. .index—layer-3-news-box-title {
  3284. display: flex;
  3285. align-items: center;
  3286. width: 100%;
  3287. border-bottom: 1PX solid #f0f0f0;
  3288. >div {
  3289. &.active {
  3290. background: url(../public/index/current2.png) no-repeat center bottom;
  3291. }
  3292. width: 87PX;
  3293. height: 54PX;
  3294. line-height: 55PX;
  3295. overflow: hidden;
  3296. float: left;
  3297. margin-right: 10PX;
  3298. text-align: center;
  3299. font-size: 20PX;
  3300. color: #333;
  3301. font-weight: bold;
  3302. a {
  3303. color: #333;
  3304. }
  3305. }
  3306. }
  3307. .index—layer-3-news-body-main {
  3308. margin-bottom: 20PX;
  3309. a {
  3310. width: 100%;
  3311. height: 26PX;
  3312. line-height: 26PX;
  3313. font-size: 13PX;
  3314. color: #333;
  3315. display: flex;
  3316. align-items: center;
  3317. justify-content: space-between;
  3318. span:nth-child(1) {
  3319. width: 70%;
  3320. height: 50px;
  3321. text-align: left;
  3322. overflow: hidden;
  3323. display: block;
  3324. font-size: 28px;
  3325. }
  3326. span:nth-child(2) {
  3327. width: 30%;
  3328. height: 50px;
  3329. text-align: right;
  3330. display: block;
  3331. font-size: 24px;
  3332. color: #666;
  3333. }
  3334. }
  3335. }
  3336. }
  3337. }
  3338. .index—layer-3-news-body-title {
  3339. display: flex;
  3340. align-items: center;
  3341. justify-content: flex-start;
  3342. margin: 20PX 0 14PX;
  3343. padding-bottom: 20PX;
  3344. border-bottom: 1PX dashed #e1e1e1;
  3345. >div {
  3346. &.news-body-left {
  3347. margin-right: 11PX;
  3348. img {
  3349. display: block;
  3350. width: 120PX;
  3351. height: 86PX;
  3352. }
  3353. }
  3354. &.news-body-right {
  3355. >a {
  3356. display: block;
  3357. width: 100%;
  3358. height: 40PX;
  3359. line-height: 40PX;
  3360. font-size: 16PX;
  3361. font-weight: bold;
  3362. overflow: hidden;
  3363. color: #000;
  3364. text-decoration: none;
  3365. }
  3366. p {
  3367. width: 100%;
  3368. height: 46PX;
  3369. line-height: 23PX;
  3370. overflow: hidden;
  3371. font-size: 14PX;
  3372. color: #333;
  3373. a {
  3374. color: #333;
  3375. }
  3376. }
  3377. }
  3378. }
  3379. }
  3380. }
  3381. //第三层 end---------------------------------------->
  3382. //第四层 start---------------------------------------->
  3383. .index-layer-4 {
  3384. width: 100%;
  3385. border: 1PX solid #ccc;
  3386. border-radius: 20PX;
  3387. padding: 10PX 20PX;
  3388. box-sizing: border-box;
  3389. display: none;
  3390. .index-layer-4-title {
  3391. display: flex;
  3392. align-items: center;
  3393. justify-content: space-between;
  3394. width: 100%;
  3395. height: 40PX;
  3396. line-height: 40PX;
  3397. border-bottom: 1PX solid #ccc;
  3398. a {
  3399. &:first-child {
  3400. font-size: 22PX;
  3401. color: #1476bd;
  3402. }
  3403. &:last-child {
  3404. font-size: 16PX;
  3405. color: #f00;
  3406. border: none;
  3407. float: right;
  3408. }
  3409. display: block;
  3410. }
  3411. }
  3412. .index-layer-4-body {
  3413. .post_nr {
  3414. width: 100%;
  3415. height: auto;
  3416. margin: 20PX auto;
  3417. border: 1PX solid #ccc;
  3418. border-radius: 10PX;
  3419. padding: 20PX !important;
  3420. box-sizing: border-box;
  3421. .name {
  3422. display: block;
  3423. width: 100%;
  3424. height: auto;
  3425. line-height: 40PX;
  3426. font-size: 16PX;
  3427. color: #333;
  3428. }
  3429. b {
  3430. font-size: 17PX;
  3431. margin: 0 10PX;
  3432. }
  3433. li {
  3434. border-bottom: 1PX solid #ccc;
  3435. padding-bottom: 15PX;
  3436. margin-bottom: 10PX;
  3437. box-sizing: border-box;
  3438. p {
  3439. margin: 0;
  3440. height: auto;
  3441. line-height: 25PX;
  3442. font-size: 15PX;
  3443. color: #000;
  3444. &.hfnr {
  3445. font-weight: bold;
  3446. span {
  3447. color: #f00;
  3448. }
  3449. }
  3450. }
  3451. }
  3452. }
  3453. }
  3454. }
  3455. //第四层 end---------------------------------------->
  3456. }
  3457. .index—layer-1 {
  3458. display: none;
  3459. }
  3460. .index—layer-2 {
  3461. display: none;
  3462. }
  3463. .index—layer-3 {
  3464. display: none;
  3465. }
  3466. .index—layer-4 {
  3467. display: none;
  3468. }
  3469. .index_main {
  3470. width: 1400PX;
  3471. margin: 0px auto;
  3472. overflow: hidden;
  3473. display: block;
  3474. }
  3475. .index_1 {
  3476. overflow: hidden;
  3477. margin: 20PX auto;
  3478. }
  3479. .new_rightCon {
  3480. width: 40%;
  3481. height: auto;
  3482. overflow: hidden;
  3483. float: right;
  3484. background: #fff;
  3485. padding: 10PX;
  3486. border: 1PX solid #ccc;
  3487. border-top: 3PX solid #1642ff;
  3488. box-sizing: border-box;
  3489. }
  3490. .new_Contlt {
  3491. width: 100%;
  3492. height: 50PX;
  3493. border-bottom: 1PX solid #ccc;
  3494. }
  3495. .new_Contlt h3 {
  3496. text-align: center;
  3497. margin: 0 10PX;
  3498. padding: 0 20PX;
  3499. float: left;
  3500. height: 50PX;
  3501. line-height: 50PX;
  3502. text-align: center;
  3503. font-weight: normal;
  3504. }
  3505. .new_Contlt a {
  3506. font-size: 24PX;
  3507. color: #0049ee;
  3508. }
  3509. .new_newList {
  3510. width: 100%;
  3511. height: auto;
  3512. overflow: hidden;
  3513. margin-top: 10PX;
  3514. }
  3515. .new_newList li {
  3516. width: 100%;
  3517. height: 45PX;
  3518. line-height: 45PX;
  3519. overflow: hidden;
  3520. text-overflow: ellipsis;
  3521. white-space: nowrap;
  3522. list-style: none;
  3523. }
  3524. .new_newList li a {
  3525. font-size: 16PX;
  3526. color: #747474;
  3527. }
  3528. .new_con_tlt {
  3529. width: 100%;
  3530. height: 40PX;
  3531. line-height: 40PX;
  3532. overflow: hidden;
  3533. border-bottom: 2PX solid #cccccc;
  3534. padding: 0 10PX;
  3535. }
  3536. .new_con_tlt a {
  3537. font-size: 22PX;
  3538. color: #0b7000;
  3539. font-weight: bold;
  3540. }
  3541. .new_banner {
  3542. width: 58%;
  3543. height: auto;
  3544. overflow: hidden;
  3545. float: left;
  3546. }
  3547. .mySwiper1 {
  3548. position: relative;
  3549. }
  3550. .mySwiper1 .swiper-slide {
  3551. width: 100%;
  3552. height: auto;
  3553. overflow: hidden;
  3554. }
  3555. .mySwiper1 .swiper-slide .new_imgCon {
  3556. width: 100%;
  3557. height: 490PX;
  3558. overflow: hidden;
  3559. }
  3560. .mySwiper1 .swiper-slide .new_imgCon img {
  3561. display: block;
  3562. width: 100%;
  3563. height: 100%;
  3564. object-fit: cover;
  3565. }
  3566. .mySwiper1 .swiper-slide span {
  3567. display: block;
  3568. width: 100%;
  3569. height: 40PX;
  3570. line-height: 40PX;
  3571. overflow: hidden;
  3572. text-overflow: ellipsis;
  3573. white-space: nowrap;
  3574. background: rgba(0, 0, 0, .7);
  3575. color: #fff;
  3576. font-size: 20PX;
  3577. padding: 0 20PX;
  3578. position: absolute;
  3579. bottom: 0;
  3580. left: 0;
  3581. box-sizing: border-box;
  3582. }
  3583. .mySwiper1 .swiper-button-white {
  3584. width: 50PX;
  3585. height: 50PX;
  3586. border: 100%;
  3587. text-align: center;
  3588. line-height: 50PX;
  3589. font-size: 30PX;
  3590. color: #fff;
  3591. }
  3592. .mySwiper1 .swiper-button-next {
  3593. background: url(../images/right.png) no-repeat;
  3594. background-size: 100%
  3595. }
  3596. .mySwiper1 .swiper-button-prev {
  3597. background: url(../images/left.png) no-repeat;
  3598. background-size: 100%
  3599. }
  3600. .new_banner:deep(.swiper-button-prev) {
  3601. width: 50PX;
  3602. height: 50PX;
  3603. background: url(public/index/left.png);
  3604. background-size: 100% 100%;
  3605. }
  3606. .new_banner:deep(.swiper-button-next) {
  3607. width: 50PX;
  3608. height: 50PX;
  3609. background: url(public/index/right.png);
  3610. background-size: 100% 100%;
  3611. }
  3612. .new_banner:deep(.swiper-navigation-icon) {
  3613. display: none;
  3614. }
  3615. .index_2 {}
  3616. .index_2_in {}
  3617. /*2*/
  3618. .new_content {
  3619. width: 100%;
  3620. height: auto;
  3621. overflow: hidden;
  3622. }
  3623. .index_2_in {
  3624. width: 100%;
  3625. height: auto;
  3626. overflow: hidden;
  3627. margin: 20PX auto;
  3628. border: 1PX solid #ccc;
  3629. }
  3630. .new_swiper_tlt {
  3631. width: 14%;
  3632. height: auto;
  3633. overflow: hidden;
  3634. float: left;
  3635. text-align: center;
  3636. padding: 40PX;
  3637. line-height: 70PX;
  3638. background: url(public/index/bg1.png) no-repeat;
  3639. box-sizing: border-box;
  3640. }
  3641. .new_swiper_tlt span {
  3642. font-size: 40PX;
  3643. color: #fff;
  3644. }
  3645. .new_imgCon1 {
  3646. width: 100%;
  3647. height: 180PX;
  3648. overflow: hidden;
  3649. }
  3650. .new_imgCon1 img {
  3651. display: block;
  3652. width: 100%;
  3653. height: 100%;
  3654. object-fit: cover;
  3655. }
  3656. .mySwiper2 .swiper-slide span {
  3657. display: block;
  3658. width: 100%;
  3659. height: 40PX;
  3660. line-height: 40PX;
  3661. overflow: hidden;
  3662. text-overflow: ellipsis;
  3663. white-space: nowrap;
  3664. font-size: 18PX;
  3665. color: #333;
  3666. box-sizing: border-box;
  3667. }
  3668. .new_swiper_con {
  3669. width: 86%;
  3670. height: auto;
  3671. overflow: hidden;
  3672. float: right;
  3673. height: 240PX;
  3674. }
  3675. .new_swiper_con_long {
  3676. width: 999999%;
  3677. }
  3678. .new_swiper_con_in {
  3679. float: left;
  3680. height: 220PX;
  3681. margin-top: 10PX;
  3682. overflow: hidden;
  3683. }
  3684. .new_swiper_per {
  3685. float: left;
  3686. height: 100%;
  3687. width: 270PX;
  3688. margin: 0PX 12PX;
  3689. }
  3690. .new_swiper_per img {
  3691. display: block;
  3692. width: 100%;
  3693. height: 180PX;
  3694. }
  3695. .new_swiper_per a {
  3696. display: block;
  3697. width: 100%;
  3698. height: 100%;
  3699. }
  3700. .new_swiper_per span {
  3701. display: block;
  3702. width: 100%;
  3703. height: 40PX;
  3704. line-height: 40PX;
  3705. overflow: hidden;
  3706. text-overflow: ellipsis;
  3707. white-space: nowrap;
  3708. font-size: 18PX;
  3709. color: #333;
  3710. }
  3711. /*3*/
  3712. .index_3 {
  3713. width: 100%;
  3714. height: auto;
  3715. overflow: hidden;
  3716. margin: 0 auto;
  3717. max-width: 1920PX;
  3718. padding: 10PX 0;
  3719. }
  3720. .new_conview_bg {
  3721. background: #f1f1f1;
  3722. box-sizing: border-box;
  3723. border-top: solid 1PX #f1f1f1;
  3724. border-bottom: solid 1PX #f1f1f1;
  3725. }
  3726. .new_con_item {
  3727. width: 32%;
  3728. height: auto;
  3729. overflow: hidden;
  3730. padding: 10PX;
  3731. background: #fff;
  3732. float: left;
  3733. box-sizing: border-box;
  3734. }
  3735. .new_con_item:nth-child(2) {
  3736. margin: 0 1.9%;
  3737. }
  3738. .new_con_tlt1 {
  3739. width: 100%;
  3740. height: auto;
  3741. overflow: hidden;
  3742. }
  3743. .new_con_tlt1 a {
  3744. float: left;
  3745. height: 50PX;
  3746. line-height: 50PX;
  3747. border-bottom: 2PX solid #ccc;
  3748. font-size: 22PX;
  3749. color: #1642ff;
  3750. }
  3751. .new_con_item ul {
  3752. width: 100%;
  3753. height: auto;
  3754. overflow: hidden;
  3755. margin: 10PX 0;
  3756. }
  3757. .new_con_item ul li {
  3758. width: 100%;
  3759. height: 40PX;
  3760. line-height: 40PX;
  3761. overflow: hidden;
  3762. text-overflow: ellipsis;
  3763. white-space: nowrap;
  3764. font-size: 18PX;
  3765. color: #333;
  3766. }
  3767. .new_con_item ul li a {
  3768. font-style: 18PX;
  3769. color: #333;
  3770. }
  3771. /*4*/
  3772. .index_4 {
  3773. overflow: hidden;
  3774. margin: 10PX auto;
  3775. }
  3776. .new_conleft {
  3777. width: 65%;
  3778. height: auto;
  3779. overflow: hidden;
  3780. float: left;
  3781. border: 1PX solid #ccc;
  3782. padding: 0 20PX;
  3783. box-sizing: border-box;
  3784. }
  3785. .new_conleft_tlt {
  3786. width: 100%;
  3787. height: 50PX;
  3788. line-height: 50PX;
  3789. overflow: hidden;
  3790. border-bottom: 1PX solid #ccc;
  3791. }
  3792. .new_conleft_tlt a {
  3793. font-size: 22PX;
  3794. color: #1642ff;
  3795. }
  3796. .new_con_box {
  3797. width: 100%;
  3798. height: auto;
  3799. overflow: hidden;
  3800. margin: 20PX auto;
  3801. background: #f1f1f1;
  3802. }
  3803. .new_img_box {
  3804. width: 33%;
  3805. height: 160PX;
  3806. overflow: hidden;
  3807. float: left;
  3808. margin-right: 20PX;
  3809. }
  3810. .new_img_box img {
  3811. display: block;
  3812. width: 100%;
  3813. height: 100%;
  3814. object-fit: cover;
  3815. }
  3816. .new_con_box h3 {
  3817. height: 50PX;
  3818. line-height: 50PX;
  3819. overflow: hidden;
  3820. text-overflow: ellipsis;
  3821. white-space: nowrap;
  3822. font-size: 18PX;
  3823. color: #333;
  3824. margin-top: 10PX;
  3825. padding-right: 10PX;
  3826. }
  3827. .new_con_box p {
  3828. height: 90PX;
  3829. line-height: 30PX;
  3830. overflow: hidden;
  3831. font-size: 16PX;
  3832. color: #777;
  3833. margin: 0;
  3834. padding-right: 10PX;
  3835. }
  3836. .new_conright {
  3837. width: 33%;
  3838. height: auto;
  3839. overflow: hidden;
  3840. float: right;
  3841. background: #fff;
  3842. }
  3843. .new_tabtlt {
  3844. width: 100%;
  3845. height: auto;
  3846. overflow: hidden;
  3847. background: #fff;
  3848. }
  3849. .new_tabtlt li {
  3850. float: left;
  3851. padding: 0 20PX;
  3852. background: #f1f1f1;
  3853. height: 50PX;
  3854. line-height: 50PX;
  3855. width: 50%;
  3856. text-align: center;
  3857. box-sizing: border-box;
  3858. }
  3859. .new_tabtlt li a {
  3860. font-size: 22PX;
  3861. color: #333;
  3862. }
  3863. .new_tabtlt li.new_tabtlt_select {
  3864. background: #1642ff;
  3865. }
  3866. .new_tabtlt li.new_tabtlt_select a {
  3867. color: #fff;
  3868. }
  3869. .new_tab_con {
  3870. width: 100%;
  3871. height: auto;
  3872. overflow: hidden;
  3873. }
  3874. .new_tab_item {
  3875. width: 100%;
  3876. height: auto;
  3877. overflow: hidden;
  3878. box-sizing: border-box;
  3879. padding: 0 20PX;
  3880. border: 1PX solid #ccc;
  3881. border-top: 2PX solid #1642ff;
  3882. }
  3883. .new_tab_img {
  3884. width: 100%;
  3885. height: 300PX;
  3886. margin: 20PX 0;
  3887. overflow: hidden;
  3888. position: relative;
  3889. }
  3890. .new_tab_img img {
  3891. display: block;
  3892. width: 100%;
  3893. height: 100%;
  3894. object-fit: cover;
  3895. }
  3896. .new_tab_img span {
  3897. display: block;
  3898. width: 100%;
  3899. height: 50PX;
  3900. line-height: 50PX;
  3901. overflow: hidden;
  3902. text-overflow: ellipsis;
  3903. white-space: nowrap;
  3904. font-size: 18PX;
  3905. color: #fff;
  3906. background: rgba(0, 0, 0, .5);
  3907. position: absolute;
  3908. bottom: 0;
  3909. left: 0;
  3910. padding: 0 10PX;
  3911. box-sizing: border-box;
  3912. }
  3913. .new_tab_list {
  3914. width: 100%;
  3915. height: auto;
  3916. overflow: hidden;
  3917. margin-bottom: 20PX;
  3918. }
  3919. .new_tab_list li {
  3920. width: 100%;
  3921. height: 50PX;
  3922. line-height: 50PX;
  3923. overflow: hidden;
  3924. text-overflow: ellipsis;
  3925. white-space: nowrap;
  3926. box-sizing: border-box;
  3927. }
  3928. .new_tab_list li a {
  3929. font-size: 18PX;
  3930. color: #333;
  3931. }
  3932. /*5*/
  3933. .index_5 {
  3934. margin: 10PX auto;
  3935. }
  3936. .new_con_card {
  3937. width: 100%;
  3938. height: auto;
  3939. overflow: hidden;
  3940. margin: 20PX auto;
  3941. }
  3942. .new_con_card li {
  3943. width: 32%;
  3944. height: auto;
  3945. overflow: hidden;
  3946. border-bottom: 1PX solid #ccc;
  3947. float: left;
  3948. }
  3949. .new_con_card li:nth-child(2) {
  3950. margin: 0 2%;
  3951. }
  3952. .new_img_box2 {
  3953. width: 100%;
  3954. height: 230PX;
  3955. overflow: hidden;
  3956. }
  3957. .new_img_box2 img {
  3958. display: block;
  3959. width: 100%;
  3960. height: 100%;
  3961. object-fit: cover;
  3962. }
  3963. .new_con_card li h3 {
  3964. width: 100%;
  3965. height: 50PX;
  3966. line-height: 50PX;
  3967. overflow: hidden;
  3968. text-overflow: ellipsis;
  3969. white-space: nowrap;
  3970. font-size: 18PX;
  3971. color: #333;
  3972. font-weight: bold;
  3973. }
  3974. .new_con_card li p {
  3975. width: 100%;
  3976. height: 90PX;
  3977. line-height: 30PX;
  3978. overflow: hidden;
  3979. font-size: 16PX;
  3980. color: #777;
  3981. margin-bottom: 10PX;
  3982. }
  3983. /*6*/
  3984. .index_6 {}
  3985. .index_6_in {
  3986. overflow: hidden;
  3987. margin: 20PX auto;
  3988. }
  3989. .new_conitems {
  3990. width: 24%;
  3991. height: auto;
  3992. overflow: hidden;
  3993. float: left;
  3994. margin-right: 1.1%;
  3995. border: 1PX solid #ccc;
  3996. }
  3997. .new_conitems:last-child {
  3998. margin-right: 0;
  3999. }
  4000. .new_itemstlt {
  4001. width: 100%;
  4002. height: 50PX;
  4003. line-height: 50PX;
  4004. overflow: hidden;
  4005. text-align: center;
  4006. border-bottom: 1PX solid #ccc;
  4007. }
  4008. .new_itemstlt a {
  4009. font-size: 22PX;
  4010. color: #1642ff;
  4011. }
  4012. .new_itemsimg {
  4013. width: 90%;
  4014. height: 170PX;
  4015. overflow: hidden;
  4016. margin: 20PX auto;
  4017. position: relative;
  4018. }
  4019. .new_itemsimg span {
  4020. display: block;
  4021. width: 100%;
  4022. height: 30PX;
  4023. line-height: 30PX;
  4024. overflow: hidden;
  4025. box-sizing: border-box;
  4026. text-overflow: ellipsis;
  4027. white-space: nowrap;
  4028. font-size: 18PX;
  4029. color: #fff;
  4030. background: rgba(0, 0, 0, .5);
  4031. position: absolute;
  4032. bottom: 0;
  4033. left: 0;
  4034. padding: 0 10PX;
  4035. }
  4036. .new_itemsimg img {
  4037. display: block;
  4038. width: 100%;
  4039. height: 100%;
  4040. object-fit: cover;
  4041. }
  4042. .new_items_list {
  4043. width: 100%;
  4044. height: auto;
  4045. overflow: hidden;
  4046. padding: 0 20PX;
  4047. margin-bottom: 20PX;
  4048. box-sizing: border-box;
  4049. }
  4050. .new_items_list li {
  4051. width: 100%;
  4052. height: 40PX;
  4053. line-height: 40PX;
  4054. overflow: hidden;
  4055. text-overflow: ellipsis;
  4056. white-space: nowrap;
  4057. }
  4058. .new_items_list li a {
  4059. font-size: 18PX;
  4060. color: #333;
  4061. }
  4062. .new_con_item1 {
  4063. width: 49.3%;
  4064. height: auto;
  4065. overflow: hidden;
  4066. float: left;
  4067. background: #fff;
  4068. }
  4069. .new_con_item1:nth-child(2) {
  4070. float: right;
  4071. }
  4072. .new_item1_tlt {
  4073. width: 100%;
  4074. height: 25PX;
  4075. line-height: 21PX;
  4076. overflow: hidden;
  4077. margin: 20PX auto;
  4078. text-align: center;
  4079. position: relative;
  4080. }
  4081. .new_item1_tlt a {
  4082. font-size: 22PX;
  4083. color: #1642ff;
  4084. }
  4085. .new_item1_tlt:before {
  4086. content: '';
  4087. display: inline-block;
  4088. width: 100PX;
  4089. height: 1PX;
  4090. background: #1642ff;
  4091. margin: 0 10PX;
  4092. position: absolute;
  4093. left: 170PX;
  4094. top: 12PX;
  4095. }
  4096. .new_item1_tlt:after {
  4097. content: '';
  4098. display: inline-block;
  4099. width: 100PX;
  4100. height: 1PX;
  4101. background: #1642ff;
  4102. margin: 0 10PX;
  4103. position: absolute;
  4104. right: 170PX;
  4105. top: 12PX;
  4106. }
  4107. .new_items1_list {
  4108. width: 100%;
  4109. height: auto;
  4110. overflow: hidden;
  4111. padding: 0 20PX 20PX;
  4112. box-sizing: border-box;
  4113. }
  4114. .new_items1_list li {
  4115. width: 49%;
  4116. height: 40PX;
  4117. line-height: 40PX;
  4118. overflow: hidden;
  4119. text-overflow: ellipsis;
  4120. white-space: nowrap;
  4121. float: left;
  4122. }
  4123. .new_items1_list li:nth-child(even) {
  4124. float: right;
  4125. }
  4126. .new_items1_list li a {
  4127. font-size: 18PX;
  4128. color: #333;
  4129. }
  4130. .index_6_in_foot {
  4131. margin-top: 20PX;
  4132. }
  4133. .index_6_in>div {
  4134. overflow: hidden;
  4135. }
  4136. /*7*/
  4137. .index_7 {
  4138. margin: 20PX auto;
  4139. }
  4140. .new_wylytlt {
  4141. width: 100%;
  4142. height: 50PX;
  4143. overflow: hidden;
  4144. background: #efefef;
  4145. padding: 0 20PX;
  4146. box-sizing: border-box;
  4147. }
  4148. .new_wylytlt a:nth-child(1) {
  4149. float: left;
  4150. height: 40PX;
  4151. line-height: 40PX;
  4152. margin-top: 10PX;
  4153. background: #fff;
  4154. border-top-left-radius: 10PX;
  4155. border-top-right-radius: 10PX;
  4156. padding: 0 30PX;
  4157. font-size: 20PX;
  4158. color: #0e28e6;
  4159. font-weight: bold;
  4160. }
  4161. .new_wylytlt a:nth-child(2) {
  4162. float: right;
  4163. font-size: 18PX;
  4164. color: #d91519;
  4165. font-weight: bold;
  4166. float: right;
  4167. height: 50PX;
  4168. line-height: 50PX;
  4169. }
  4170. .new_lyitem {
  4171. width: 100%;
  4172. height: auto;
  4173. overflow: hidden;
  4174. padding: 30PX;
  4175. box-sizing: border-box;
  4176. }
  4177. .new_lyitem li {
  4178. width: 48%;
  4179. height: 40PX;
  4180. line-height: 40PX;
  4181. overflow: hidden;
  4182. float: left;
  4183. border-bottom: 1PX solid #ccc;
  4184. padding: 0 20PX;
  4185. box-sizing: border-box;
  4186. }
  4187. .new_lyitem li:nth-child(even) {
  4188. float: right;
  4189. }
  4190. .new_lyitem li a {
  4191. float: left;
  4192. width: 60%;
  4193. height: 40PX;
  4194. line-height: 40PX;
  4195. overflow: hidden;
  4196. text-overflow: ellipsis;
  4197. white-space: nowrap;
  4198. font-size: 16PX;
  4199. color: #333;
  4200. }
  4201. .new_lyitem li span {
  4202. float: right;
  4203. font-size: 16PX;
  4204. color: #6b6b6b;
  4205. text-align: right;
  4206. }
  4207. .blue {
  4208. background: #0e6ebe;
  4209. color: #fff;
  4210. padding: 10PX;
  4211. }
  4212. .post_nr {
  4213. width: 100%;
  4214. height: auto;
  4215. margin: 20PX auto;
  4216. border: 1PX solid #ccc;
  4217. border-radius: 10PX;
  4218. padding: 20PX !important;
  4219. box-sizing: border-box;
  4220. }
  4221. .post_nr .name {
  4222. display: block;
  4223. width: 100%;
  4224. height: auto;
  4225. line-height: 40PX;
  4226. font-size: 16PX;
  4227. color: #333;
  4228. }
  4229. .post_nr .name b {
  4230. font-size: 17PX;
  4231. margin: 0 10PX;
  4232. }
  4233. .post_nr li p {
  4234. margin: 0;
  4235. height: auto;
  4236. line-height: 25PX;
  4237. font-size: 15PX;
  4238. color: #000;
  4239. }
  4240. .post_nr li p.hfnr {
  4241. font-weight: bold;
  4242. }
  4243. .post_nr li p.hfnr span {
  4244. color: #f00;
  4245. }
  4246. .liuyan li {
  4247. border-bottom: 1px solid #ccc;
  4248. padding-bottom: 15px;
  4249. margin-bottom: 10px;
  4250. }
  4251. .swiper-container {
  4252. display: none;
  4253. }
  4254. @media screen and (min-width: 1401px) {}
  4255. @media screen and (max-width: 1400px) {
  4256. .index_main {
  4257. width: 100%;
  4258. margin: 0px auto;
  4259. box-sizing: border-box;
  4260. padding: 0px 20px;
  4261. }
  4262. .mySwiper1 .swiper-slide .new_imgCon {
  4263. height: 266px;
  4264. }
  4265. }
  4266. @media screen and (min-width: 801px) and (max-width: 1400px) {
  4267. .new_rightCon {
  4268. padding: 7px;
  4269. }
  4270. .new_Contlt {
  4271. height: 27px;
  4272. }
  4273. .new_Contlt h3 {
  4274. margin: 0 7px;
  4275. padding: 0 12px;
  4276. height: 26px;
  4277. line-height: 26px;
  4278. }
  4279. .new_Contlt a {
  4280. font-size: 14px;
  4281. }
  4282. .new_newList {
  4283. margin-top: 7px;
  4284. }
  4285. .new_newList li {
  4286. height: 24px;
  4287. line-height: 24px;
  4288. }
  4289. .new_newList li a {
  4290. font-size: 10px;
  4291. }
  4292. .new_con_tlt {
  4293. height: 22px;
  4294. line-height: 22px;
  4295. padding: 0 7px;
  4296. }
  4297. .new_con_tlt a {
  4298. font-size: 13px;
  4299. }
  4300. .mySwiper1 .swiper-slide span {
  4301. height: 33px;
  4302. line-height: 33px;
  4303. font-size: 10px;
  4304. padding: 0 10px;
  4305. }
  4306. .new_conitems {
  4307. margin-right: .9%;
  4308. }
  4309. .new_item1_tlt:before {
  4310. width: 0PX;
  4311. }
  4312. .new_item1_tlt:after {
  4313. width: 0PX;
  4314. }
  4315. .new_swiper_con {
  4316. float: none;
  4317. width: auto;
  4318. }
  4319. .new_swiper_tlt {
  4320. background-size: 100% 100%;
  4321. min-width: 173PX;
  4322. }
  4323. }
  4324. @media screen and (max-width: 900px) {
  4325. .search-box .search-left-box .no-result-box .no-result-content .no-result-title {
  4326. margin-top: 133PX;
  4327. }
  4328. }
  4329. @media screen and (max-width: 800px) {
  4330. .new_banner {
  4331. float: none;
  4332. width: 100%;
  4333. }
  4334. .new_rightCon {
  4335. float: none;
  4336. width: 100%;
  4337. margin-top: 11PX;
  4338. }
  4339. .mySwiper1 .swiper-slide .new_imgCon {
  4340. height: 400px;
  4341. }
  4342. .new_conleft {
  4343. width: 100%;
  4344. float: none;
  4345. }
  4346. .new_conright {
  4347. width: 100%;
  4348. float: none;
  4349. }
  4350. .new_con_card li {
  4351. float: none;
  4352. width: 100%;
  4353. margin: 0px auto !important;
  4354. }
  4355. .new_conitems {
  4356. width: 100%;
  4357. margin: 2PX auto;
  4358. float: none;
  4359. box-sizing: border-box;
  4360. }
  4361. .new_con_item1 {
  4362. width: 100%;
  4363. margin: 2PX auto;
  4364. float: none;
  4365. box-sizing: border-box;
  4366. }
  4367. .new_Contlt h3 {
  4368. margin-left: 0px;
  4369. padding-left: 0px;
  4370. }
  4371. .new_rightCon {
  4372. padding: 10px;
  4373. }
  4374. .new_Contlt {
  4375. height: 50px;
  4376. }
  4377. .new_Contlt h3 {
  4378. margin: 0;
  4379. padding: 0px;
  4380. height: 50px;
  4381. line-height: 50px;
  4382. }
  4383. .new_Contlt a {
  4384. font-size: 30px;
  4385. }
  4386. .new_newList {
  4387. margin-top: 10px;
  4388. }
  4389. .new_newList li {
  4390. height: 55px;
  4391. line-height: 55px;
  4392. }
  4393. .new_newList li a {
  4394. font-size: 24px;
  4395. }
  4396. .new_con_tlt {
  4397. height: 40px;
  4398. line-height: 40px;
  4399. padding: 0 10px;
  4400. }
  4401. .new_con_tlt a {
  4402. font-size: 22px;
  4403. }
  4404. .mySwiper1 .swiper-slide span {
  4405. height: 40px;
  4406. line-height: 40px;
  4407. font-size: 20px;
  4408. padding: 0 20px;
  4409. }
  4410. .new_con_item {
  4411. width: 100%;
  4412. float: none;
  4413. margin: 0px auto !important;
  4414. padding: 10px;
  4415. }
  4416. .new_con_tlt1 a {
  4417. height: 50px;
  4418. line-height: 50px;
  4419. font-size: 30px;
  4420. }
  4421. .new_con_item ul {
  4422. margin: 10px 0;
  4423. }
  4424. .new_con_item ul li {
  4425. height: 55px;
  4426. line-height: 55px;
  4427. }
  4428. .new_con_item ul li a {
  4429. font-size: 24px;
  4430. }
  4431. .new_conleft {
  4432. padding: 0 20px;
  4433. }
  4434. .new_conleft_tlt {
  4435. height: 50px;
  4436. line-height: 50px;
  4437. }
  4438. .new_conleft_tlt a {
  4439. font-size: 30px;
  4440. }
  4441. .new_con_box {
  4442. margin: 20px auto;
  4443. }
  4444. .new_img_box {
  4445. width: 33%;
  4446. height: 160px;
  4447. margin-right: 20px;
  4448. }
  4449. .new_img_box img {}
  4450. .new_con_box h3 {
  4451. height: 55px;
  4452. line-height: 55px;
  4453. font-size: 24px;
  4454. margin-top: 5px;
  4455. padding-right: 10px;
  4456. }
  4457. .new_con_box p {
  4458. height: 90px;
  4459. line-height: 30px;
  4460. font-size: 18px;
  4461. padding-right: 10px;
  4462. }
  4463. .new_conright {
  4464. margin-top: 22px;
  4465. }
  4466. .new_tabtlt li {
  4467. padding: 0 20px;
  4468. height: 50px;
  4469. line-height: 50px;
  4470. width: 50%;
  4471. }
  4472. .new_tabtlt li a {
  4473. font-size: 28px;
  4474. }
  4475. .new_tab_item {
  4476. padding: 0 20px;
  4477. }
  4478. .new_tab_img {
  4479. height: 300px;
  4480. margin: 20px 0;
  4481. }
  4482. .new_tab_img span {
  4483. height: 50px;
  4484. line-height: 50px;
  4485. font-size: 18px;
  4486. padding: 0 10px;
  4487. }
  4488. .new_tab_list {
  4489. margin-bottom: 20px;
  4490. }
  4491. .new_tab_list li {
  4492. height: 55px;
  4493. line-height: 55px;
  4494. }
  4495. .new_tab_list li a {
  4496. font-size: 24px;
  4497. }
  4498. .new_con_card {
  4499. margin: 20px auto;
  4500. }
  4501. .new_img_box2 {
  4502. height: 440px;
  4503. }
  4504. .new_con_card li h3 {
  4505. height: 55px;
  4506. line-height: 55px;
  4507. font-size: 24px;
  4508. }
  4509. .new_con_card li p {
  4510. height: 90px;
  4511. line-height: 30px;
  4512. font-size: 18px;
  4513. margin-bottom: 10px;
  4514. }
  4515. .index_6_in {
  4516. margin: 20px auto;
  4517. }
  4518. .new_itemstlt {
  4519. height: 55px;
  4520. line-height: 55px;
  4521. }
  4522. .new_itemstlt a {
  4523. font-size: 30px;
  4524. }
  4525. .new_itemsimg {
  4526. height: 370px;
  4527. margin: 20px auto;
  4528. }
  4529. .new_itemsimg span {
  4530. height: 44px;
  4531. line-height: 44px;
  4532. font-size: 18px;
  4533. padding: 0 10px;
  4534. box-sizing: border-box;
  4535. }
  4536. .new_items_list {
  4537. padding: 0 20px;
  4538. margin-bottom: 20px;
  4539. }
  4540. .new_items_list li {
  4541. height: 55px;
  4542. line-height: 55px;
  4543. }
  4544. .new_items_list li a {
  4545. font-size: 24px;
  4546. }
  4547. .new_item1_tlt {
  4548. height: 33px;
  4549. line-height: 33px;
  4550. margin: 20px auto;
  4551. }
  4552. .new_item1_tlt a {
  4553. font-size: 30px;
  4554. }
  4555. .new_items1_list {
  4556. padding: 0 20px 20px;
  4557. }
  4558. .new_items1_list li {
  4559. height: 55px;
  4560. line-height: 55px;
  4561. }
  4562. .new_items1_list li a {
  4563. font-size: 24px;
  4564. }
  4565. .index_6_in_foot {
  4566. margin-top: 20px;
  4567. }
  4568. .index_7 {
  4569. margin: 20px auto;
  4570. }
  4571. .new_wylytlt {
  4572. height: 50px;
  4573. padding: 0 20px;
  4574. box-sizing: border-box;
  4575. }
  4576. .new_wylytlt a:nth-child(1) {
  4577. height: 40px;
  4578. line-height: 40px;
  4579. margin-top: 10px;
  4580. border-top-left-radius: 10px;
  4581. border-top-right-radius: 10px;
  4582. padding: 0 30px;
  4583. font-size: 22px;
  4584. }
  4585. .new_wylytlt a:nth-child(2) {
  4586. font-size: 22px;
  4587. height: 50px;
  4588. line-height: 50px;
  4589. }
  4590. .new_lyitem {
  4591. padding: 30px;
  4592. }
  4593. .new_lyitem li {
  4594. height: 40px;
  4595. line-height: 40px;
  4596. padding: 0 20px;
  4597. }
  4598. .new_lyitem li a {
  4599. height: 40px;
  4600. line-height: 40px;
  4601. font-size: 16px;
  4602. }
  4603. .new_lyitem li span {
  4604. font-size: 16px;
  4605. }
  4606. .blue {
  4607. padding: 10px;
  4608. }
  4609. .post_nr {
  4610. margin: 20px auto;
  4611. padding: 20px !important;
  4612. }
  4613. .post_nr .name {
  4614. line-height: 44px;
  4615. font-size: 16px;
  4616. margin-bottom: 5px;
  4617. }
  4618. .post_nr .name b {
  4619. font-size: 17px;
  4620. margin: 0 10px;
  4621. }
  4622. .post_nr li p {
  4623. line-height: 44px;
  4624. font-size: 15px;
  4625. }
  4626. .liuyan li {
  4627. padding-bottom: 15px;
  4628. margin-bottom: 10px;
  4629. }
  4630. .new_item1_tlt:after {
  4631. display: none;
  4632. }
  4633. .new_item1_tlt:before {
  4634. display: none;
  4635. }
  4636. .index_2 {
  4637. display: none;
  4638. }
  4639. }
  4640. </style>