jiangzhong-liver-compound-report.html 552 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893589458955896589758985899590059015902590359045905590659075908590959105911591259135914591559165917591859195920592159225923592459255926592759285929593059315932593359345935593659375938593959405941594259435944594559465947594859495950595159525953595459555956595759585959596059615962596359645965596659675968596959705971597259735974597559765977597859795980598159825983598459855986598759885989599059915992599359945995599659975998599960006001600260036004600560066007600860096010601160126013601460156016601760186019602060216022602360246025602660276028602960306031603260336034603560366037603860396040604160426043604460456046604760486049605060516052605360546055605660576058605960606061606260636064606560666067606860696070607160726073607460756076607760786079608060816082608360846085608660876088608960906091609260936094609560966097609860996100610161026103610461056106610761086109611061116112611361146115611661176118611961206121612261236124612561266127612861296130613161326133613461356136613761386139614061416142614361446145614661476148614961506151615261536154615561566157615861596160616161626163616461656166616761686169617061716172617361746175617661776178617961806181618261836184618561866187618861896190619161926193619461956196619761986199620062016202620362046205620662076208620962106211621262136214621562166217621862196220622162226223622462256226622762286229623062316232623362346235623662376238623962406241624262436244624562466247624862496250625162526253625462556256625762586259626062616262626362646265626662676268626962706271627262736274627562766277627862796280628162826283628462856286628762886289629062916292629362946295629662976298629963006301630263036304630563066307630863096310631163126313631463156316631763186319632063216322632363246325632663276328632963306331633263336334633563366337633863396340634163426343634463456346634763486349635063516352635363546355635663576358635963606361636263636364636563666367636863696370637163726373637463756376637763786379638063816382638363846385638663876388638963906391639263936394639563966397639863996400640164026403640464056406640764086409641064116412641364146415641664176418641964206421642264236424642564266427642864296430643164326433643464356436643764386439644064416442644364446445644664476448644964506451645264536454645564566457645864596460646164626463646464656466646764686469647064716472647364746475647664776478647964806481648264836484648564866487648864896490649164926493649464956496649764986499650065016502650365046505650665076508650965106511651265136514651565166517651865196520652165226523652465256526652765286529653065316532653365346535653665376538653965406541654265436544654565466547654865496550655165526553655465556556655765586559656065616562656365646565656665676568656965706571657265736574657565766577657865796580658165826583658465856586658765886589659065916592659365946595659665976598659966006601660266036604660566066607660866096610661166126613661466156616661766186619662066216622662366246625662666276628662966306631663266336634663566366637663866396640664166426643664466456646664766486649665066516652665366546655665666576658665966606661666266636664666566666667666866696670667166726673667466756676667766786679668066816682668366846685668666876688668966906691669266936694669566966697669866996700670167026703670467056706670767086709671067116712671367146715671667176718671967206721672267236724672567266727672867296730673167326733673467356736673767386739674067416742674367446745674667476748674967506751675267536754675567566757675867596760676167626763676467656766676767686769677067716772677367746775677667776778677967806781678267836784678567866787678867896790679167926793679467956796679767986799680068016802680368046805680668076808680968106811681268136814681568166817681868196820682168226823682468256826682768286829683068316832683368346835683668376838683968406841684268436844684568466847684868496850685168526853685468556856685768586859686068616862686368646865686668676868686968706871687268736874687568766877687868796880688168826883688468856886688768886889
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6. <title>江中肝纯片 · 产品复合体方案</title>
  7. <script>document.documentElement.classList.add('js');</script>
  8. <!-- 本地离线字体(同目录 assets/fonts/) · 双击 HTML 即可用,无需网络 -->
  9. <link href="./assets/fonts/fonts.css" rel="stylesheet">
  10. <!-- 在线 fallback:本地字体缺失时异步加载(不阻塞首屏) -->
  11. <link href="https://fonts.loli.net/css2?family=Inter:wght@400;600;700;800;900&family=Noto+Sans+SC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
  12. <style>
  13. :root {
  14. --bg-0: #0A0A0A;
  15. --bg-1: #111111;
  16. --bg-2: #1A1A1A;
  17. --bg-3: #252525;
  18. --border: rgba(255,255,255,0.08);
  19. --border-strong: rgba(255,255,255,0.16);
  20. --text-1: #F5F5F5;
  21. --text-2: #A8A8A8;
  22. --text-3: #6B6B6B;
  23. --amber: #F5A623;
  24. --amber-glow: rgba(245,166,35,0.15);
  25. --green: #00DC82;
  26. --purple: #8B5CF6;
  27. --rose: #FF4D8D;
  28. --blue: #3B82F6;
  29. --red: #EF4444;
  30. --font-head: 'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑','Source Han Sans CN',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  31. --font-body: 'Noto Sans SC','Inter','PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑','Source Han Sans CN',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
  32. --font-mono: 'JetBrains Mono','SF Mono','Fira Code','Cascadia Code',Consolas,'Courier New',monospace;
  33. --max-w: 1280px;
  34. --radius-sm: 8px;
  35. --radius-md: 12px;
  36. --radius-lg: 20px;
  37. }
  38. * { margin: 0; padding: 0; box-sizing: border-box; }
  39. html {
  40. scroll-behavior: smooth;
  41. font-size: 16px;
  42. /* 轻 snap:不打断流式浏览,但在接近 slide 时会贴合 */
  43. scroll-snap-type: y proximity;
  44. }
  45. @media (prefers-reduced-motion: reduce) {
  46. html { scroll-snap-type: none; scroll-behavior: auto; }
  47. }
  48. body {
  49. font-family: var(--font-body);
  50. background: var(--bg-0);
  51. color: var(--text-1);
  52. line-height: 1.65;
  53. -webkit-font-smoothing: antialiased;
  54. overflow-x: hidden;
  55. position: relative;
  56. }
  57. /* 全局 ambient 光晕 —— 伴随 slide 切换缓慢漂移 */
  58. body::before {
  59. content: '';
  60. position: fixed; inset: 0; pointer-events: none; z-index: 0;
  61. background:
  62. radial-gradient(ellipse 900px 700px at var(--amb-x, 20%) var(--amb-y, 25%), rgba(245,166,35,0.10), transparent 60%),
  63. radial-gradient(ellipse 800px 600px at calc(100% - var(--amb-x, 20%)) calc(100% - var(--amb-y, 25%)), rgba(139,92,246,0.07), transparent 60%);
  64. transition: background 1.4s cubic-bezier(.2,.7,.2,1);
  65. }
  66. body::after {
  67. content: '';
  68. position: fixed; inset: 0; pointer-events: none; z-index: 0;
  69. background-image:
  70. linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
  71. linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  72. background-size: 80px 80px;
  73. mask-image: radial-gradient(ellipse 90% 95% at 50% 50%, black 0%, transparent 85%);
  74. -webkit-mask-image: radial-gradient(ellipse 90% 95% at 50% 50%, black 0%, transparent 85%);
  75. }
  76. main.deck { position: relative; z-index: 1; }
  77. ::selection { background: var(--amber); color: #000; }
  78. a { color: inherit; text-decoration: none; }
  79. img { max-width: 100%; display: block; }
  80. .text-hero { font-family: var(--font-head); font-weight: 900; letter-spacing: -0.04em; line-height: 0.95; font-size: clamp(4rem, 12vw, 10rem); }
  81. .text-poster { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-size: clamp(2.5rem, 6vw, 5rem); }
  82. .text-h1 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; font-size: clamp(2rem, 4vw, 3.5rem); }
  83. .text-h2 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; font-size: clamp(1.4rem, 2.5vw, 2rem); }
  84. .text-h3 { font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.3rem); letter-spacing: -0.01em; }
  85. .text-body { font-size: clamp(0.92rem, 1.1vw, 1rem); line-height: 1.75; color: var(--text-2); }
  86. .text-sm { font-size: 0.85rem; color: var(--text-2); }
  87. .text-xs { font-size: 0.72rem; color: var(--text-3); letter-spacing: 0.02em; }
  88. .text-mono { font-family: var(--font-mono); }
  89. .text-amber { color: var(--amber); }
  90. .text-green { color: var(--green); }
  91. .text-purple { color: var(--purple); }
  92. .text-rose { color: var(--rose); }
  93. .text-blue { color: var(--blue); }
  94. .text-red { color: var(--red); }
  95. section.report-section {
  96. min-height: 100vh;
  97. padding: clamp(60px, 10vh, 120px) clamp(24px, 6vw, 80px);
  98. position: relative;
  99. border-bottom: 1px solid var(--border);
  100. display: flex;
  101. flex-direction: column;
  102. justify-content: center;
  103. scroll-snap-align: start;
  104. scroll-snap-stop: always;
  105. overflow: hidden;
  106. isolation: isolate;
  107. }
  108. /* 每一张 slide 的角标:大号数字 */
  109. section.report-section::before {
  110. content: attr(data-slide-num);
  111. position: absolute;
  112. top: clamp(20px, 3vh, 36px); right: clamp(24px, 4vw, 60px);
  113. font-family: var(--font-mono); font-weight: 600;
  114. font-size: clamp(0.68rem, 0.75vw, 0.78rem);
  115. letter-spacing: 0.25em; color: var(--text-3);
  116. z-index: 4; pointer-events: none;
  117. }
  118. /* slide 专属渐变层(通过 CSS 变量驱动色调) */
  119. section.report-section::after {
  120. content: '';
  121. position: absolute; inset: 0; pointer-events: none; z-index: -1;
  122. background:
  123. radial-gradient(ellipse 70% 60% at 85% 15%, var(--slide-glow-1, rgba(245,166,35,0.06)), transparent 55%),
  124. radial-gradient(ellipse 60% 50% at 15% 85%, var(--slide-glow-2, rgba(139,92,246,0.04)), transparent 55%);
  125. opacity: 0; transition: opacity 1s cubic-bezier(.2,.7,.2,1);
  126. }
  127. section.report-section.in-view::after { opacity: 1; }
  128. section.report-section[data-tone="amber"] { --slide-glow-1: rgba(245,166,35,0.10); --slide-glow-2: rgba(245,166,35,0.04); }
  129. section.report-section[data-tone="rose"] { --slide-glow-1: rgba(255,77,141,0.09); --slide-glow-2: rgba(255,77,141,0.04); }
  130. section.report-section[data-tone="green"] { --slide-glow-1: rgba(0,220,130,0.08); --slide-glow-2: rgba(0,220,130,0.03); }
  131. section.report-section[data-tone="purple"]{ --slide-glow-1: rgba(139,92,246,0.10); --slide-glow-2: rgba(139,92,246,0.04); }
  132. section.report-section[data-tone="blue"] { --slide-glow-1: rgba(59,130,246,0.08); --slide-glow-2: rgba(59,130,246,0.03); }
  133. .section-inner { width: 100%; max-width: var(--max-w); margin: 0 auto; position: relative; }
  134. .section-head { margin-bottom: clamp(32px, 5vh, 64px); }
  135. .section-eyebrow {
  136. display: inline-flex; align-items: center; gap: 10px;
  137. font-family: var(--font-mono); font-size: 0.72rem;
  138. letter-spacing: 0.18em; text-transform: uppercase;
  139. color: var(--amber); font-weight: 500; margin-bottom: 18px;
  140. }
  141. .section-eyebrow::before { content: ''; display: inline-block; width: 24px; height: 1px; background: var(--amber); }
  142. .section-sub { color: var(--text-2); font-size: 1.05rem; max-width: 720px; margin-top: 14px; line-height: 1.8; }
  143. .grid { display: grid; gap: clamp(14px, 1.6vw, 22px); }
  144. .grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
  145. .grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  146. .grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  147. .card {
  148. background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.008) 100%), var(--bg-1);
  149. border: 1px solid var(--border);
  150. border-radius: var(--radius-md);
  151. padding: clamp(20px, 2.2vw, 32px);
  152. position: relative;
  153. backdrop-filter: blur(8px);
  154. -webkit-backdrop-filter: blur(8px);
  155. transition: transform 0.4s cubic-bezier(.2,.7,.2,1), border-color 0.3s ease, box-shadow 0.4s ease;
  156. }
  157. .card:hover {
  158. border-color: var(--border-strong);
  159. transform: translateY(-3px);
  160. box-shadow: 0 12px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(245,166,35,0.08);
  161. }
  162. .card.card-glow { box-shadow: 0 0 40px rgba(245,166,35,0.06); }
  163. .card-accent {
  164. border-left: 3px solid var(--amber);
  165. border-top: 1px solid var(--border); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  166. }
  167. .metric {
  168. background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  169. padding: clamp(24px, 2.5vw, 36px); position: relative; overflow: hidden;
  170. }
  171. .metric::before {
  172. content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  173. background: linear-gradient(90deg, var(--amber), transparent); opacity: 0.6;
  174. }
  175. .metric .metric-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3); margin-bottom: 10px; }
  176. .metric .metric-value { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.5rem); letter-spacing: -0.03em; line-height: 1; color: var(--text-1); margin-bottom: 8px; }
  177. .metric .metric-unit { font-family: var(--font-mono); font-size: 0.85rem; color: var(--amber); font-weight: 500; }
  178. .metric .metric-sub { margin-top: 14px; font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }
  179. .tag {
  180. display: inline-flex; align-items: center; gap: 6px;
  181. padding: 4px 10px; border-radius: 4px; font-size: 0.72rem; font-weight: 500;
  182. letter-spacing: 0.02em; font-family: var(--font-head);
  183. background: rgba(245,166,35,0.1); color: var(--amber); border: 1px solid rgba(245,166,35,0.22);
  184. }
  185. .tag.green { background: rgba(0,220,130,0.08); color: var(--green); border-color: rgba(0,220,130,0.2); }
  186. .tag.purple { background: rgba(139,92,246,0.08); color: var(--purple); border-color: rgba(139,92,246,0.2); }
  187. .tag.rose { background: rgba(255,77,141,0.08); color: var(--rose); border-color: rgba(255,77,141,0.2); }
  188. .tag.gray { background: rgba(255,255,255,0.04); color: var(--text-2); border-color: var(--border); }
  189. .cover-hero {
  190. position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  191. padding: clamp(40px, 8vh, 100px) clamp(24px, 6vw, 80px);
  192. background:
  193. radial-gradient(ellipse 60% 80% at 30% 30%, rgba(245,166,35,0.08) 0%, transparent 70%),
  194. radial-gradient(ellipse 40% 60% at 80% 70%, rgba(139,92,246,0.05) 0%, transparent 70%),
  195. var(--bg-0);
  196. }
  197. .cover-grid-bg {
  198. position: absolute; inset: 0;
  199. background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
  200. linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  201. background-size: 64px 64px; pointer-events: none;
  202. mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, black 0%, transparent 80%);
  203. -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, black 0%, transparent 80%);
  204. }
  205. .cover-content { position: relative; z-index: 2; max-width: var(--max-w); }
  206. .cover-meta {
  207. display: flex; align-items: center; gap: 16px;
  208. font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3);
  209. letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 32px;
  210. }
  211. .cover-meta::before { content: ''; width: 32px; height: 2px; background: var(--amber); }
  212. .cover-title-stack { display: flex; flex-direction: column; gap: 4px; }
  213. .cover-title {
  214. font-family: var(--font-head); font-weight: 900; letter-spacing: -0.04em;
  215. line-height: 0.92; font-size: clamp(3.5rem, 11vw, 9rem);
  216. color: #fff; /* 兜底纯色:若渐变裁剪失效,至少显示白色粗体 */
  217. background: linear-gradient(135deg, #fff 30%, rgba(245,166,35,0.9) 100%);
  218. -webkit-background-clip: text; background-clip: text;
  219. -webkit-text-fill-color: transparent; /* 代替 color: transparent,不支持时自动退回 color */
  220. }
  221. .cover-sub { font-size: clamp(1rem, 1.6vw, 1.4rem); color: var(--text-2); max-width: 780px; margin-top: 32px; line-height: 1.7; }
  222. .cover-stats {
  223. display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 2vw, 28px);
  224. margin-top: clamp(48px, 8vh, 96px); padding-top: clamp(24px, 4vh, 48px);
  225. border-top: 1px solid var(--border); max-width: 900px;
  226. }
  227. .cover-stat .num { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -0.02em; color: var(--amber); }
  228. .cover-stat .lbl { font-size: 0.78rem; color: var(--text-3); margin-top: 4px; font-family: var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; }
  229. @media (max-width: 720px) { .cover-stats { grid-template-columns: repeat(2, 1fr); } }
  230. .nav-rail {
  231. position: fixed; left: clamp(16px, 2vw, 32px); top: 50%; transform: translateY(-50%);
  232. z-index: 100; display: flex; flex-direction: column; gap: 12px;
  233. }
  234. .nav-dot {
  235. width: 32px; height: 3px; border-radius: 2px;
  236. background: rgba(255,255,255,0.14); cursor: pointer;
  237. transition: all 0.5s cubic-bezier(.2,.7,.2,1); position: relative;
  238. display: flex; align-items: center;
  239. }
  240. .nav-dot.active { background: var(--amber); width: 48px; box-shadow: 0 0 12px rgba(245,166,35,0.4); }
  241. .nav-dot:hover { background: rgba(255,255,255,0.3); }
  242. .nav-dot::after {
  243. content: attr(data-tip); position: absolute; left: calc(100% + 16px); top: 50%;
  244. transform: translateY(-50%) translateX(-6px);
  245. background: rgba(20,20,20,0.92); backdrop-filter: blur(8px);
  246. border: 1px solid var(--border); padding: 6px 12px; border-radius: 6px;
  247. font-size: 0.72rem; color: var(--text-1);
  248. white-space: nowrap; opacity: 0; pointer-events: none;
  249. transition: opacity 0.25s ease, transform 0.25s ease;
  250. font-family: var(--font-mono); letter-spacing: 0.04em;
  251. }
  252. .nav-dot:hover::after, .nav-dot.active::after { opacity: 1; transform: translateY(-50%) translateX(0); }
  253. .top-bar {
  254. position: fixed; top: 0; left: 0; right: 0;
  255. display: flex; justify-content: space-between; align-items: center;
  256. padding: 18px clamp(24px, 4vw, 48px); z-index: 99; pointer-events: none;
  257. background: linear-gradient(180deg, rgba(10,10,10,0.85) 0%, transparent 100%);
  258. }
  259. .brand-logo { font-family: var(--font-head); font-weight: 900; font-size: 0.88rem; letter-spacing: 0.2em; }
  260. .brand-logo .dot { color: var(--amber); }
  261. .progress-line {
  262. position: fixed; top: 0; left: 0; height: 2px;
  263. background: linear-gradient(90deg, var(--amber), var(--rose));
  264. z-index: 1000; width: 0%; transition: width 0.3s ease;
  265. }
  266. .chart-container {
  267. width: 100%; min-height: 340px;
  268. background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px;
  269. }
  270. .voice-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
  271. .voice-card {
  272. background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  273. padding: 24px; position: relative; transition: all 0.3s ease;
  274. }
  275. .voice-card::before {
  276. content: '"'; position: absolute; top: 8px; left: 12px;
  277. font-family: Georgia, serif; font-size: 60px; color: var(--amber);
  278. opacity: 0.3; line-height: 1; pointer-events: none;
  279. }
  280. .voice-card .voice-content { font-size: 0.96rem; line-height: 1.7; color: var(--text-1); margin: 20px 0 16px 24px; font-weight: 400; }
  281. .voice-card .voice-meta {
  282. display: flex; justify-content: space-between; align-items: center;
  283. padding-top: 12px; border-top: 1px solid var(--border);
  284. font-size: 0.75rem; color: var(--text-3);
  285. }
  286. .voice-card .voice-likes { color: var(--amber); font-weight: 600; font-family: var(--font-mono); }
  287. .voice-card.hot { border-color: rgba(245,166,35,0.3); }
  288. .voice-card.hot::before { opacity: 0.5; }
  289. .voice-card:hover { border-color: var(--amber); transform: translateY(-3px); }
  290. .note-card {
  291. background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  292. padding: 20px; display: flex; flex-direction: column; gap: 12px;
  293. transition: all 0.3s ease;
  294. }
  295. .note-card:hover { border-color: var(--amber); transform: translateY(-3px); }
  296. .note-rank { font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem; color: var(--amber); letter-spacing: 0.15em; }
  297. .note-title {
  298. font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--text-1);
  299. overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  300. }
  301. .note-stats {
  302. display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  303. font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-2);
  304. }
  305. .note-stats .st { display: flex; flex-direction: column; gap: 2px; }
  306. .note-stats .st .n { color: var(--text-1); font-weight: 600; font-size: 1rem; }
  307. .note-stats .st .l { font-size: 0.65rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
  308. .theme-poster {
  309. background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  310. padding: 28px; position: relative; overflow: hidden;
  311. }
  312. .theme-poster.pain { border-top: 3px solid var(--rose); }
  313. .theme-poster.bright { border-top: 3px solid var(--green); }
  314. .theme-poster.scene { border-top: 3px solid var(--blue); }
  315. .theme-poster h4 { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; margin-bottom: 8px; }
  316. .theme-poster .count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-3); margin-bottom: 16px; }
  317. .theme-poster .count .num { font-size: 1.4rem; font-weight: 700; color: var(--text-1); margin-right: 4px; }
  318. .theme-poster .examples { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
  319. .theme-poster .examples li {
  320. padding: 10px 14px; background: var(--bg-2); border-left: 2px solid var(--border-strong);
  321. border-radius: 4px; font-size: 0.85rem; line-height: 1.55; color: var(--text-2);
  322. }
  323. .theme-poster.pain .examples li { border-left-color: var(--rose); }
  324. .theme-poster.bright .examples li { border-left-color: var(--green); }
  325. .theme-poster.scene .examples li { border-left-color: var(--blue); }
  326. .insight-banner {
  327. min-height: 260px; background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  328. padding: clamp(32px, 4vw, 56px); display: flex; flex-direction: column;
  329. justify-content: space-between; gap: 32px; position: relative; overflow: hidden;
  330. }
  331. .insight-banner::before {
  332. content: attr(data-num); position: absolute; top: 16px; right: 24px;
  333. font-family: var(--font-head); font-weight: 900; font-size: clamp(4rem, 9vw, 7rem);
  334. line-height: 1; color: var(--bg-3); letter-spacing: -0.05em; pointer-events: none;
  335. }
  336. .insight-banner h3 {
  337. font-family: var(--font-head); font-weight: 800;
  338. font-size: clamp(1.5rem, 2.8vw, 2.2rem); letter-spacing: -0.02em;
  339. line-height: 1.25; color: var(--text-1); max-width: 85%;
  340. }
  341. .insight-banner h3 strong { color: var(--amber); font-weight: 900; }
  342. .insight-banner .insight-body { color: var(--text-2); font-size: 1rem; line-height: 1.75; max-width: 85%; }
  343. .insight-banner .insight-data {
  344. display: flex; gap: 24px; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--border);
  345. }
  346. .insight-banner .insight-data .dp { display: flex; flex-direction: column; gap: 2px; }
  347. .insight-banner .insight-data .dp .num { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--amber); }
  348. .insight-banner .insight-data .dp .lbl { font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.1em; }
  349. .kol-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
  350. .kol-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--bg-3); flex-shrink: 0; object-fit: cover; border: 1px solid var(--border); }
  351. .kol-info { flex: 1; overflow: hidden; }
  352. .kol-name { font-weight: 700; font-size: 0.98rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  353. .kol-desc { font-size: 0.82rem; color: var(--text-3); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  354. .kol-stats { display: flex; gap: 14px; margin-top: 10px; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); }
  355. .kol-stats .amber { color: var(--amber); font-weight: 600; }
  356. .table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
  357. .data-tbl { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
  358. .data-tbl thead th {
  359. text-align: left; padding: 14px 16px; background: var(--bg-1); border-bottom: 1px solid var(--border);
  360. font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem;
  361. letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
  362. }
  363. .data-tbl tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-1); vertical-align: middle; }
  364. .data-tbl tbody tr:last-child td { border-bottom: none; }
  365. .data-tbl tbody tr:hover { background: rgba(255,255,255,0.02); }
  366. .data-tbl .tb-num { font-family: var(--font-mono); font-weight: 600; color: var(--amber); }
  367. .matrix-2x2 {
  368. display: grid; grid-template-columns: 60px 1fr 1fr; grid-template-rows: 1fr 1fr 60px;
  369. gap: 12px; min-height: 520px; font-family: var(--font-head);
  370. }
  371. .matrix-2x2 .axis-y {
  372. grid-column: 1; grid-row: 1 / 3;
  373. display: flex; align-items: center; justify-content: center;
  374. writing-mode: vertical-rl; transform: rotate(180deg);
  375. font-family: var(--font-mono); font-size: 0.72rem;
  376. letter-spacing: 0.15em; color: var(--text-3); text-transform: uppercase;
  377. }
  378. .matrix-2x2 .axis-x {
  379. grid-column: 2 / 4; grid-row: 3;
  380. display: flex; justify-content: center; align-items: center;
  381. font-family: var(--font-mono); font-size: 0.72rem;
  382. letter-spacing: 0.15em; color: var(--text-3); text-transform: uppercase;
  383. }
  384. .matrix-cell {
  385. background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  386. padding: 20px; position: relative; display: flex; flex-direction: column;
  387. }
  388. .matrix-cell .cell-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-3); margin-bottom: 10px; text-transform: uppercase; }
  389. .matrix-cell h5 { font-weight: 700; font-size: 1rem; margin-bottom: 6px; color: var(--text-1); }
  390. .matrix-cell p { font-size: 0.85rem; color: var(--text-2); line-height: 1.55; }
  391. .matrix-cell.q1 { border-top: 2px solid var(--amber); }
  392. .matrix-cell.q2 { border-top: 2px solid var(--green); }
  393. .matrix-cell.q3 { border-top: 2px solid var(--rose); }
  394. .matrix-cell.q4 { border-top: 2px solid var(--purple); }
  395. .tl { position: relative; padding-left: 32px; }
  396. .tl::before {
  397. content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px;
  398. width: 1px; background: linear-gradient(180deg, var(--amber), var(--purple), transparent);
  399. }
  400. .tl-item { position: relative; margin-bottom: 28px; padding-left: 20px; }
  401. .tl-item::before {
  402. content: ''; position: absolute; left: -30px; top: 6px;
  403. width: 10px; height: 10px; border-radius: 50%; background: var(--amber);
  404. border: 2px solid var(--bg-0); box-shadow: 0 0 0 2px var(--amber);
  405. }
  406. .tl-item .tl-time { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; color: var(--amber); text-transform: uppercase; margin-bottom: 4px; }
  407. .tl-item h5 { font-weight: 700; font-size: 1rem; margin-bottom: 6px; }
  408. .tl-item p { font-size: 0.88rem; color: var(--text-2); line-height: 1.6; }
  409. /* === 渐显:默认可见,只有 js 已就绪时才先隐藏 === */
  410. .fade-up { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(.16,.84,.33,1), transform 0.9s cubic-bezier(.16,.84,.33,1); }
  411. html.js .fade-up { opacity: 0; transform: translateY(32px); will-change: opacity, transform; }
  412. html.js .fade-up.is-visible { opacity: 1; transform: translateY(0); }
  413. /* 深度入场:从下方滑入 + 微缩放(用于 section-head) */
  414. .rise-in { opacity: 1; transform: none; transition: opacity 1.1s cubic-bezier(.16,.84,.33,1), transform 1.1s cubic-bezier(.16,.84,.33,1); }
  415. html.js .rise-in { opacity: 0; transform: translateY(48px) scale(0.97); will-change: opacity, transform; }
  416. html.js .rise-in.is-visible { opacity: 1; transform: translateY(0) scale(1); }
  417. /* 逐字标题:每个 .char 独立控制 */
  418. .headline-anim { display: inline-block; }
  419. .headline-anim .char { display: inline-block; opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(.16,.84,.33,1), transform 0.7s cubic-bezier(.16,.84,.33,1); }
  420. html.js .headline-anim .char { opacity: 0; transform: translateY(0.6em) rotate(6deg); will-change: opacity, transform; }
  421. html.js .headline-anim.is-visible .char { opacity: 1; transform: translateY(0) rotate(0); }
  422. /* 键盘提示 pill —— 右下角,首次滚动 5s 后自动淡出 */
  423. .kbd-hint {
  424. position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vh, 28px);
  425. z-index: 100; display: flex; align-items: center; gap: 10px;
  426. padding: 10px 16px; border-radius: 999px;
  427. background: rgba(20,20,20,0.85); backdrop-filter: blur(16px);
  428. border: 1px solid var(--border-strong);
  429. font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-2);
  430. letter-spacing: 0.04em;
  431. transition: opacity 0.6s ease, transform 0.6s ease;
  432. }
  433. .kbd-hint.fade { opacity: 0; transform: translateY(12px); pointer-events: none; }
  434. .kbd-hint kbd {
  435. display: inline-flex; align-items: center; justify-content: center;
  436. min-width: 22px; height: 22px; padding: 0 6px;
  437. background: var(--bg-3); border: 1px solid var(--border-strong);
  438. border-radius: 4px; font-size: 0.7rem; font-family: var(--font-mono);
  439. color: var(--text-1); box-shadow: 0 1px 0 rgba(0,0,0,0.4);
  440. }
  441. /* slide counter pill —— 左下角 */
  442. .slide-counter {
  443. position: fixed; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vh, 28px);
  444. z-index: 100; display: flex; align-items: center; gap: 8px;
  445. padding: 8px 14px; border-radius: 999px;
  446. background: rgba(20,20,20,0.85); backdrop-filter: blur(16px);
  447. border: 1px solid var(--border-strong);
  448. font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em;
  449. color: var(--text-2);
  450. }
  451. .slide-counter .now { color: var(--amber); font-weight: 700; }
  452. .slide-counter .bar { width: 60px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
  453. .slide-counter .bar::after {
  454. content: ''; display: block; height: 100%; width: var(--pct, 0%);
  455. background: linear-gradient(90deg, var(--amber), var(--rose));
  456. transition: width 0.6s cubic-bezier(.2,.7,.2,1);
  457. }
  458. /* 海报式 hero 点缀:流动的光弧 */
  459. .cover-hero .aurora {
  460. position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1;
  461. }
  462. .cover-hero .aurora span {
  463. position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
  464. }
  465. .cover-hero .aurora span:nth-child(1) { width: 500px; height: 500px; background: rgba(245,166,35,0.35); top: -10%; left: 10%; animation: aurora-drift-1 18s ease-in-out infinite alternate; }
  466. .cover-hero .aurora span:nth-child(2) { width: 420px; height: 420px; background: rgba(139,92,246,0.30); bottom: -8%; right: 10%; animation: aurora-drift-2 22s ease-in-out infinite alternate; }
  467. .cover-hero .aurora span:nth-child(3) { width: 300px; height: 300px; background: rgba(0,220,130,0.22); top: 40%; left: 55%; animation: aurora-drift-3 26s ease-in-out infinite alternate; }
  468. @keyframes aurora-drift-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(60px,80px) scale(1.2); } }
  469. @keyframes aurora-drift-2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-80px,-60px) scale(1.15); } }
  470. @keyframes aurora-drift-3 { from { transform: translate(0,0) scale(1); } to { transform: translate(-100px,40px) scale(1.3); } }
  471. @media (prefers-reduced-motion: reduce) { .cover-hero .aurora span { animation: none; } }
  472. footer.report-footer {
  473. padding: 48px clamp(24px, 6vw, 80px); text-align: center;
  474. border-top: 1px solid var(--border); color: var(--text-3); font-size: 0.8rem;
  475. background: var(--bg-0);
  476. }
  477. footer.report-footer .meta { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; font-size: 0.7rem; }
  478. @media (max-width: 900px) {
  479. .matrix-2x2 { grid-template-columns: 40px 1fr; grid-template-rows: auto; }
  480. .matrix-2x2 .axis-x, .matrix-2x2 .axis-y { display: none; }
  481. .matrix-cell { grid-column: 2; }
  482. }
  483. @media (max-width: 600px) {
  484. .nav-rail { display: none; }
  485. .top-bar { padding: 14px 18px; font-size: 0.72rem; }
  486. }
  487. </style>
  488. </head>
  489. <body>
  490. <nav class="nav-rail" aria-label="章节导航">
  491. <a class="nav-dot active" href="#s0" data-tip="封面" data-idx="0"></a><a class="nav-dot" href="#agenda" data-tip="目录" data-idx="1"></a><a class="nav-dot" href="#audience" data-tip="2.1 目标人群" data-idx="2"></a><a class="nav-dot" href="#position" data-tip="2.2 定位" data-idx="3"></a><a class="nav-dot" href="#package" data-tip="2.3 包装" data-idx="4"></a><a class="nav-dot" href="#kv" data-tip="2.4 主视觉 KV" data-idx="5"></a><a class="nav-dot" href="#value" data-tip="2.5 价值链" data-idx="6"></a><a class="nav-dot" href="#synthesis" data-tip="2.6 总结" data-idx="7"></a>
  492. </nav>
  493. <div class="top-bar">
  494. <div class="brand-logo">江中<span class="dot">·</span>产品开发部 / 肝纯片复合体方案 v1.0</div>
  495. <div class="text-mono text-xs" style="color:var(--text-3);">BRAIN·HACK / VOC × PRODUCT-COMPOUND</div>
  496. </div>
  497. <div class="slide-counter" id="slideCounter">
  498. <span class="now">01</span>
  499. <span>/</span>
  500. <span class="total">36</span>
  501. <span class="bar"></span>
  502. </div>
  503. <div class="kbd-hint" id="kbdHint">
  504. <span>键盘切换</span>
  505. <kbd>↑</kbd><kbd>↓</kbd>
  506. <span>或</span>
  507. <kbd>PgUp</kbd><kbd>PgDn</kbd>
  508. </div>
  509. <div class="progress-line" id="progressLine"></div>
  510. <main class="deck">
  511. <section class="report-section" id="s0" data-tone="amber" data-slide-num="01/36" style="min-height:100vh;padding:0;">
  512. <div class="cover-hero">
  513. <div class="aurora" aria-hidden="true"><span></span><span></span><span></span></div>
  514. <div class="cover-grid-bg"></div>
  515. <div class="cover-content">
  516. <div class="cover-meta rise-in">
  517. <span>江中 / 产品开发部 / 2026 · 江中肝纯片 · 产品复合体方案</span>
  518. </div>
  519. <div class="cover-title-stack">
  520. <p class="text-mono text-amber rise-in" style="font-size:0.9rem;letter-spacing:0.2em;margin-bottom:18px;">OTC · 保肝片剂 · 复合升级方向</p>
  521. <h1 class="cover-title rise-in">江中肝纯片</h1>
  522. <p class="text-poster rise-in" style="margin-top:20px;color:var(--text-2);">产品复合体方案 · 2026</p>
  523. </div>
  524. <p class="cover-sub fade-up">
  525. 基于 <strong class="text-amber">15</strong> 篇小红书笔记 ·
  526. <strong class="text-amber">50</strong> 条真实 VOC 原声 ·
  527. 叠加 Amazon <strong class="text-amber">689</strong> 款国际对标 · TikTok Top 作者生态 · TT Ads 官方关键词洞察,
  528. 按《美佑童-产品复合体》5 维框架推演,输出目标人群 / 定位 / 包装 / 主视觉 / 价值链完整方案。
  529. </p>
  530. <div class="cover-stats fade-up">
  531. <div class="cover-stat"><div class="num">6</div><div class="lbl">核心章节</div></div>
  532. <div class="cover-stat"><div class="num">36</div><div class="lbl">完整 slide</div></div>
  533. <div class="cover-stat"><div class="num">B</div><div class="lbl">品类机会等级</div></div>
  534. <div class="cover-stat"><div class="num">$15-25</div><div class="lbl">甜点价位</div></div>
  535. </div>
  536. <p class="text-mono text-xs fade-up" style="margin-top:64px;">SCROLL DOWN · 数据采集 2026-04-19</p>
  537. </div>
  538. </div>
  539. </section>
  540. <section class="report-section" id="agenda" data-tone="amber" data-slide-num="02/36">
  541. <div class="section-inner">
  542. <div class="section-head rise-in">
  543. <div class="section-eyebrow">CONTENTS · 目录总览</div>
  544. <h2 class="text-h1"><span class="headline-anim">产品复合体 · 5 维方案</span></h2>
  545. <p class="section-sub">从目标人群到价值链闭环 · 每一维都以 VOC 真实证据驱动 · 每一步都可以直接落产品 PRD</p>
  546. </div>
  547. <div class="grid" style="grid-template-columns:repeat(2, 1fr); gap:24px; margin-top: 20px;">
  548. <a href="#audience" class="fade-up" style="text-decoration:none; display:block; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #FF4D8D; border-radius:var(--radius-md); padding:28px; transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden;" onmouseover="this.style.transform='translateY(-4px)'; this.style.borderColor='#FF4D8D'; this.style.boxShadow='0 20px 60px -20px #FF4D8D55'" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'">
  549. <div style="position:absolute; top:-20px; right:-10px; font-family:var(--font-head); font-weight:900; font-size:9rem; line-height:1; color:#FF4D8D; opacity:.08; letter-spacing:-0.06em; pointer-events:none;">21</div>
  550. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:16px;">
  551. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.18em; font-weight:700;">2.1 · AUDIENCE</div>
  552. <div style="font-size:1.8rem; filter:grayscale(20%);">👥</div>
  553. </div>
  554. <h3 class="text-h2" style="margin:0 0 12px; color:var(--text-1); font-size:1.6rem;">目标人群</h3>
  555. <p style="color:var(--text-2); font-size:0.95rem; line-height:1.6; margin-bottom:16px;">学习型/焦虑型/情绪肝 3 类核心人群,基于 VOC 真实原声刻画</p>
  556. <div style="padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
  557. <span class="text-xs text-mono" style="color:var(--text-3); letter-spacing:0.12em;">→ 跳转章节</span>
  558. <span class="text-mono text-xs" style="color:#FF4D8D;">1 / 6</span>
  559. </div>
  560. </a>
  561. <a href="#position" class="fade-up" style="text-decoration:none; display:block; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #D4A574; border-radius:var(--radius-md); padding:28px; transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden;" onmouseover="this.style.transform='translateY(-4px)'; this.style.borderColor='#D4A574'; this.style.boxShadow='0 20px 60px -20px #D4A57455'" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'">
  562. <div style="position:absolute; top:-20px; right:-10px; font-family:var(--font-head); font-weight:900; font-size:9rem; line-height:1; color:#D4A574; opacity:.08; letter-spacing:-0.06em; pointer-events:none;">22</div>
  563. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:16px;">
  564. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.18em; font-weight:700;">2.2 · POSITIONING</div>
  565. <div style="font-size:1.8rem; filter:grayscale(20%);">🎯</div>
  566. </div>
  567. <h3 class="text-h2" style="margin:0 0 12px; color:var(--text-1); font-size:1.6rem;">定位</h3>
  568. <p style="color:var(--text-2); font-size:0.95rem; line-height:1.6; margin-bottom:16px;">「场景化复合护肝」心智占位 — 4 重协同 · 一片多效</p>
  569. <div style="padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
  570. <span class="text-xs text-mono" style="color:var(--text-3); letter-spacing:0.12em;">→ 跳转章节</span>
  571. <span class="text-mono text-xs" style="color:#D4A574;">2 / 6</span>
  572. </div>
  573. </a>
  574. <a href="#package" class="fade-up" style="text-decoration:none; display:block; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #2D9C5D; border-radius:var(--radius-md); padding:28px; transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden;" onmouseover="this.style.transform='translateY(-4px)'; this.style.borderColor='#2D9C5D'; this.style.boxShadow='0 20px 60px -20px #2D9C5D55'" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'">
  575. <div style="position:absolute; top:-20px; right:-10px; font-family:var(--font-head); font-weight:900; font-size:9rem; line-height:1; color:#2D9C5D; opacity:.08; letter-spacing:-0.06em; pointer-events:none;">23</div>
  576. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:16px;">
  577. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.18em; font-weight:700;">2.3 · PACKAGING</div>
  578. <div style="font-size:1.8rem; filter:grayscale(20%);">📦</div>
  579. </div>
  580. <h3 class="text-h2" style="margin:0 0 12px; color:var(--text-1); font-size:1.6rem;">包装</h3>
  581. <p style="color:var(--text-2); font-size:0.95rem; line-height:1.6; margin-bottom:16px;">江中绿 × 琥珀金双色系,4 层视觉信息架构</p>
  582. <div style="padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
  583. <span class="text-xs text-mono" style="color:var(--text-3); letter-spacing:0.12em;">→ 跳转章节</span>
  584. <span class="text-mono text-xs" style="color:#2D9C5D;">3 / 6</span>
  585. </div>
  586. </a>
  587. <a href="#kv" class="fade-up" style="text-decoration:none; display:block; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #8B5CF6; border-radius:var(--radius-md); padding:28px; transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden;" onmouseover="this.style.transform='translateY(-4px)'; this.style.borderColor='#8B5CF6'; this.style.boxShadow='0 20px 60px -20px #8B5CF655'" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'">
  588. <div style="position:absolute; top:-20px; right:-10px; font-family:var(--font-head); font-weight:900; font-size:9rem; line-height:1; color:#8B5CF6; opacity:.08; letter-spacing:-0.06em; pointer-events:none;">24</div>
  589. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:16px;">
  590. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.18em; font-weight:700;">2.4 · KEY VISUAL</div>
  591. <div style="font-size:1.8rem; filter:grayscale(20%);">🎨</div>
  592. </div>
  593. <h3 class="text-h2" style="margin:0 0 12px; color:var(--text-1); font-size:1.6rem;">主视觉 KV</h3>
  594. <p style="color:var(--text-2); font-size:0.95rem; line-height:1.6; margin-bottom:16px;">3 版本(情感守护/理性科普/对比进化)视觉资产矩阵</p>
  595. <div style="padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
  596. <span class="text-xs text-mono" style="color:var(--text-3); letter-spacing:0.12em;">→ 跳转章节</span>
  597. <span class="text-mono text-xs" style="color:#8B5CF6;">4 / 6</span>
  598. </div>
  599. </a>
  600. <a href="#value" class="fade-up" style="text-decoration:none; display:block; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #0085CA; border-radius:var(--radius-md); padding:28px; transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden;" onmouseover="this.style.transform='translateY(-4px)'; this.style.borderColor='#0085CA'; this.style.boxShadow='0 20px 60px -20px #0085CA55'" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'">
  601. <div style="position:absolute; top:-20px; right:-10px; font-family:var(--font-head); font-weight:900; font-size:9rem; line-height:1; color:#0085CA; opacity:.08; letter-spacing:-0.06em; pointer-events:none;">25</div>
  602. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:16px;">
  603. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.18em; font-weight:700;">2.5 · VALUE CHAIN</div>
  604. <div style="font-size:1.8rem; filter:grayscale(20%);">⚙️</div>
  605. </div>
  606. <h3 class="text-h2" style="margin:0 0 12px; color:var(--text-1); font-size:1.6rem;">价值链</h3>
  607. <p style="color:var(--text-2); font-size:0.95rem; line-height:1.6; margin-bottom:16px;">研发→生产→渠道→营销→服务→体验 6 环价值创造</p>
  608. <div style="padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
  609. <span class="text-xs text-mono" style="color:var(--text-3); letter-spacing:0.12em;">→ 跳转章节</span>
  610. <span class="text-mono text-xs" style="color:#0085CA;">5 / 6</span>
  611. </div>
  612. </a>
  613. <a href="#synthesis" class="fade-up" style="text-decoration:none; display:block; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #D4A574; border-radius:var(--radius-md); padding:28px; transition:all .35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden;" onmouseover="this.style.transform='translateY(-4px)'; this.style.borderColor='#D4A574'; this.style.boxShadow='0 20px 60px -20px #D4A57455'" onmouseout="this.style.transform='translateY(0)'; this.style.borderColor='var(--border)'; this.style.boxShadow='none'">
  614. <div style="position:absolute; top:-20px; right:-10px; font-family:var(--font-head); font-weight:900; font-size:9rem; line-height:1; color:#D4A574; opacity:.08; letter-spacing:-0.06em; pointer-events:none;">26</div>
  615. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:16px;">
  616. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.18em; font-weight:700;">2.6 · SYNTHESIS</div>
  617. <div style="font-size:1.8rem; filter:grayscale(20%);">🧩</div>
  618. </div>
  619. <h3 class="text-h2" style="margin:0 0 12px; color:var(--text-1); font-size:1.6rem;">总结</h3>
  620. <p style="color:var(--text-2); font-size:0.95rem; line-height:1.6; margin-bottom:16px;">复合体要素 · 前序承接 · 下阶段衔接</p>
  621. <div style="padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
  622. <span class="text-xs text-mono" style="color:var(--text-3); letter-spacing:0.12em;">→ 跳转章节</span>
  623. <span class="text-mono text-xs" style="color:#D4A574;">6 / 6</span>
  624. </div>
  625. </a>
  626. </div>
  627. <div class="fade-up" style="margin-top:48px; padding:24px 28px; background:linear-gradient(135deg, rgba(245,166,35,0.04), rgba(255,77,141,0.03)); border:1px solid rgba(245,166,35,0.15); border-radius:var(--radius-md);">
  628. <div class="text-mono text-xs" style="color:var(--amber); letter-spacing:0.15em; margin-bottom:10px;">METHODOLOGY · 方法论参考</div>
  629. <div style="color:var(--text-1); font-size:1rem; line-height:1.7;">
  630. 本方案严格参照江中已有《美佑童-产品复合体.docx》的 <strong style="color:var(--amber);">5 维 × 27 子章节</strong>标准格式推演;<br/>
  631. VOC 证据池来自 <strong style="color:var(--amber);">江中肝纯片 VOC 报告</strong>(XHS 15 篇 / 评论 50 条 / Amazon 689 款)+ <strong style="color:var(--amber);">TikTok Top 5 海外作者 + TT Ads 官方情报</strong>;<br/>
  632. 每一个结论都附 <strong style="color:var(--amber);">真实原声 / 竞品档案 / 市场数据</strong>三重交叉验证。
  633. </div>
  634. </div>
  635. </div>
  636. </section>
  637. <section class="report-section" id="audience" data-tone="rose" data-slide-num="03/36" style="justify-content:center;">
  638. <div class="section-inner">
  639. <div class="rise-in" style="text-align:center; margin-bottom:48px;">
  640. <div class="text-mono" style="color:#FF4D8D; letter-spacing:0.35em; font-size:0.8rem; margin-bottom:20px;">CHAPTER 2.1 · AUDIENCE</div>
  641. <h1 style="font-family:var(--font-head); font-weight:900; font-size:clamp(4rem, 10vw, 8rem); line-height:0.92; letter-spacing:-0.04em; color:#fff; background:linear-gradient(135deg, #fff 30%, #FF4D8D 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 18px;">
  642. 目标人群
  643. </h1>
  644. <p class="text-poster" style="font-size:clamp(1.2rem, 2.2vw, 1.8rem); color:var(--text-2); font-weight:500; max-width:820px; margin:0 auto; line-height:1.5;">学习型/焦虑型/情绪肝 3 类核心人群,基于 VOC 真实原声刻画</p>
  645. </div>
  646. <div class="fade-up" style="max-width:920px; margin:0 auto 40px; padding:28px 36px; background:rgba(255,255,255,0.02); border-left:4px solid #FF4D8D; border-radius:0 var(--radius-md) var(--radius-md) 0;">
  647. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.15em; margin-bottom:10px;">KEY TAKE · 本章核心</div>
  648. <div style="font-size:1.15rem; line-height:1.75; color:var(--text-1);">国内"护肝=水飞蓟片"红海同质化 → 按 VOC 解构 <strong style="color:#FF4D8D;">3 类真实人群</strong>:<strong>熬夜打工人</strong>(4001赞爆款"打工人自救指南")、<strong>应酬男</strong>(场景 7 次最高)、<strong>情绪肝女性</strong>(肝郁气滞/肝火大原声反复出现)。每类人群痛点-渠道-话术-决策路径均独立刻画。</div>
  649. </div>
  650. <div class="grid fade-up" style="grid-template-columns:repeat(5, 1fr); gap:14px; max-width:1100px; margin:0 auto;">
  651. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #FF4D8D;">
  652. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; font-weight:700;">2.1.1</div>
  653. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">核心人群画像</div>
  654. </div>
  655. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #FF4D8D;">
  656. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; font-weight:700;">2.1.2</div>
  657. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">影响人群画像</div>
  658. </div>
  659. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #FF4D8D;">
  660. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; font-weight:700;">2.1.3</div>
  661. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">决策旅程分析</div>
  662. </div>
  663. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #FF4D8D;">
  664. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; font-weight:700;">2.1.4</div>
  665. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">心理洞察总结</div>
  666. </div>
  667. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #FF4D8D;">
  668. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; font-weight:700;">2.1.5</div>
  669. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">人群分层策略</div>
  670. </div>
  671. </div>
  672. <div class="fade-up text-mono text-xs" style="margin-top:56px; text-align:center; color:var(--text-3); letter-spacing:0.2em;">
  673. ↓ 滚动查看 5 个子章节展开
  674. </div>
  675. </div>
  676. </section>
  677. <section class="report-section" id="audience-1" data-tone="rose" data-slide-num="04/36">
  678. <div class="section-inner">
  679. <div class="section-head rise-in">
  680. <div class="section-eyebrow" style="color:#FF4D8D;">2.1.1 · CORE PERSONAS</div>
  681. <h2 class="text-h1"><span class="headline-anim">核心人群画像 · 3 类真实用户</span></h2>
  682. <p class="section-sub">基于江中肝纯片小红书 50 条真实评论 + 爆款笔记 VOC,解构出完整差异化的 3 类核心人群 · 覆盖 95% 目标用户 · 每类独立的痛点、渠道、话术体系</p>
  683. </div>
  684. <!-- 人群规模可视化 -->
  685. <div class="grid fade-up" style="grid-template-columns: 1fr; margin-bottom:32px;">
  686. <div style="display:flex; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; height:60px;">
  687. <div style="flex:45; background:linear-gradient(135deg, #FF4D8D, #FF4D8DAA); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-weight:700; font-size:0.95rem; padding:0 12px;">
  688. <span style="font-size:1.4rem;">🌙</span>
  689. <span>熬夜打工人 · 45%</span>
  690. </div><div style="flex:30; background:linear-gradient(135deg, #D4A574, #D4A574AA); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-weight:700; font-size:0.95rem; padding:0 12px;">
  691. <span style="font-size:1.4rem;">🍺</span>
  692. <span>应酬男 · 30%</span>
  693. </div><div style="flex:20; background:linear-gradient(135deg, #8B5CF6, #8B5CF6AA); display:flex; align-items:center; justify-content:center; gap:10px; color:#fff; font-weight:700; font-size:0.95rem; padding:0 12px;">
  694. <span style="font-size:1.4rem;">🌸</span>
  695. <span>情绪肝女性 · 20%</span>
  696. </div>
  697. </div>
  698. </div>
  699. <!-- 3 张 Persona 卡片 -->
  700. <div class="grid" style="grid-template-columns:repeat(3, 1fr); gap:20px;">
  701. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #FF4D8D; border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;">
  702. <!-- 头部 -->
  703. <div style="padding:24px; background:linear-gradient(180deg, #FF4D8D14, transparent); border-bottom:1px solid var(--border);">
  704. <div style="display:flex; align-items:start; gap:14px; margin-bottom:14px;">
  705. <div style="font-size:2.6rem; line-height:1;">🌙</div>
  706. <div style="flex:1;">
  707. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:4px;">PERSONA A · 45%</div>
  708. <div style="font-weight:800; font-size:1.15rem; line-height:1.3; color:var(--text-1);">熬夜打工人 · 小王</div>
  709. </div>
  710. </div>
  711. <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:0.78rem;">
  712. <div style="color:var(--text-3);">年龄 · <span style="color:var(--text-1); font-weight:600;">25-35 岁</span></div>
  713. <div style="color:var(--text-3);">性别 · <span style="color:var(--text-1); font-weight:600;">55% 男 / 45% 女</span></div>
  714. <div style="color:var(--text-3);">收入 · <span style="color:var(--text-1); font-weight:600;">¥15-30 万</span></div>
  715. <div style="color:var(--text-3);">城市 · <span style="color:var(--text-1); font-weight:600;">一线 / 新一线</span></div>
  716. </div>
  717. </div>
  718. <!-- 核心特征 -->
  719. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  720. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">CORE TRAITS · 核心特征</div>
  721. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;">
  722. <li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>长期熬夜加班,生物钟紊乱</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>体检发现轻度脂肪肝</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>信息敏感、善于搜索对比</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>愿为&quot;健康自救&quot;付费</li>
  723. </ul>
  724. </div>
  725. <!-- 信息渠道(条形图) -->
  726. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  727. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">CHANNELS · 信息获取渠道</div>
  728. <div style="display:flex; flex-direction:column; gap:8px;">
  729. <div>
  730. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  731. <span style="color:var(--text-2);">小红书</span>
  732. <span class="text-mono" style="color:#FF4D8D;">60%</span>
  733. </div>
  734. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  735. <div style="width:60%; height:100%; background:#FF4D8D; border-radius:2px; transition:width .8s;"></div>
  736. </div>
  737. </div><div>
  738. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  739. <span style="color:var(--text-2);">医生科普号</span>
  740. <span class="text-mono" style="color:#FF4D8D;">45%</span>
  741. </div>
  742. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  743. <div style="width:45%; height:100%; background:#FF4D8D; border-radius:2px; transition:width .8s;"></div>
  744. </div>
  745. </div><div>
  746. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  747. <span style="color:var(--text-2);">知乎/微博</span>
  748. <span class="text-mono" style="color:#FF4D8D;">30%</span>
  749. </div>
  750. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  751. <div style="width:30%; height:100%; background:#FF4D8D; border-radius:2px; transition:width .8s;"></div>
  752. </div>
  753. </div><div>
  754. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  755. <span style="color:var(--text-2);">丁香医生 APP</span>
  756. <span class="text-mono" style="color:#FF4D8D;">25%</span>
  757. </div>
  758. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  759. <div style="width:25%; height:100%; background:#FF4D8D; border-radius:2px; transition:width .8s;"></div>
  760. </div>
  761. </div>
  762. </div>
  763. </div>
  764. <!-- 决策路径 -->
  765. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  766. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">JOURNEY · 决策路径</div>
  767. <ol style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; counter-reset:journey;">
  768. <li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#FF4D8D22; color:#FF4D8D; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">①</span>体检报告红字 → 焦虑</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#FF4D8D22; color:#FF4D8D; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">②</span>小红书搜「护肝+熬夜」</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#FF4D8D22; color:#FF4D8D; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">③</span>对比水飞蓟 vs 复合配方</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#FF4D8D22; color:#FF4D8D; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">④</span>京东/天猫下单</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#FF4D8D22; color:#FF4D8D; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">⑤</span>打卡 2-4 周观察</li>
  769. </ol>
  770. </div>
  771. <!-- 核心痛点 -->
  772. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  773. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:10px;">PAIN · 核心痛点排序</div>
  774. <div style="display:flex; flex-direction:column; gap:5px;">
  775. <div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  776. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#1</span>
  777. <span style="color:var(--text-2); flex:1;">起效慢、吃了无感</span>
  778. </div><div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  779. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#2</span>
  780. <span style="color:var(--text-2); flex:1;">担心副作用、肝肾负担</span>
  781. </div><div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  782. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#3</span>
  783. <span style="color:var(--text-2); flex:1;">不知道哪个品牌靠谱</span>
  784. </div><div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  785. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#4</span>
  786. <span style="color:var(--text-2); flex:1;">怕吃久了形成依赖</span>
  787. </div>
  788. </div>
  789. </div>
  790. <!-- 触动关键词 -->
  791. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  792. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">HOOK · 触动关键词</div>
  793. <div style="display:flex; flex-wrap:wrap; gap:6px;">
  794. <span class="tag" style="background:#FF4D8D14; color:#FF4D8D; border-color:#FF4D8D44; font-size:0.72rem;">熬夜救星</span><span class="tag" style="background:#FF4D8D14; color:#FF4D8D; border-color:#FF4D8D44; font-size:0.72rem;">护肝助眠</span><span class="tag" style="background:#FF4D8D14; color:#FF4D8D; border-color:#FF4D8D44; font-size:0.72rem;">男士护肝</span><span class="tag" style="background:#FF4D8D14; color:#FF4D8D; border-color:#FF4D8D44; font-size:0.72rem;">水飞蓟片</span><span class="tag" style="background:#FF4D8D14; color:#FF4D8D; border-color:#FF4D8D44; font-size:0.72rem;">打工人自救</span>
  795. </div>
  796. </div>
  797. <!-- VOC 证据 -->
  798. <div style="padding:18px 24px; background:rgba(255,255,255,0.02); margin-top:auto;">
  799. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; margin-bottom:8px;">VOC EVIDENCE · 真实原声</div>
  800. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55; font-style:italic; margin-bottom:8px;">"打工人必备的自救指南之护肝片"</div>
  801. <div style="display:flex; justify-content:space-between; font-size:0.72rem; color:var(--text-3);">
  802. <span>小红书爆款笔记 Top #1</span>
  803. <span class="text-mono" style="color:#FF4D8D;">♥ 4001</span>
  804. </div>
  805. </div>
  806. </div>
  807. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #D4A574; border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;">
  808. <!-- 头部 -->
  809. <div style="padding:24px; background:linear-gradient(180deg, #D4A57414, transparent); border-bottom:1px solid var(--border);">
  810. <div style="display:flex; align-items:start; gap:14px; margin-bottom:14px;">
  811. <div style="font-size:2.6rem; line-height:1;">🍺</div>
  812. <div style="flex:1;">
  813. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:4px;">PERSONA B · 30%</div>
  814. <div style="font-weight:800; font-size:1.15rem; line-height:1.3; color:var(--text-1);">应酬男 · 老李</div>
  815. </div>
  816. </div>
  817. <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:0.78rem;">
  818. <div style="color:var(--text-3);">年龄 · <span style="color:var(--text-1); font-weight:600;">35-50 岁</span></div>
  819. <div style="color:var(--text-3);">性别 · <span style="color:var(--text-1); font-weight:600;">90% 男</span></div>
  820. <div style="color:var(--text-3);">收入 · <span style="color:var(--text-1); font-weight:600;">¥30-50 万</span></div>
  821. <div style="color:var(--text-3);">城市 · <span style="color:var(--text-1); font-weight:600;">全城市覆盖</span></div>
  822. </div>
  823. </div>
  824. <!-- 核心特征 -->
  825. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  826. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">CORE TRAITS · 核心特征</div>
  827. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;">
  828. <li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>商务应酬 ≥2 次/周</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>长期酒精 + 油腻饮食</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>轻中度脂肪肝已确诊</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>家庭决策者、价格不敏感</li>
  829. </ul>
  830. </div>
  831. <!-- 信息渠道(条形图) -->
  832. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  833. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">CHANNELS · 信息获取渠道</div>
  834. <div style="display:flex; flex-direction:column; gap:8px;">
  835. <div>
  836. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  837. <span style="color:var(--text-2);">药店店员推荐</span>
  838. <span class="text-mono" style="color:#D4A574;">50%</span>
  839. </div>
  840. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  841. <div style="width:50%; height:100%; background:#D4A574; border-radius:2px; transition:width .8s;"></div>
  842. </div>
  843. </div><div>
  844. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  845. <span style="color:var(--text-2);">京东自营</span>
  846. <span class="text-mono" style="color:#D4A574;">45%</span>
  847. </div>
  848. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  849. <div style="width:45%; height:100%; background:#D4A574; border-radius:2px; transition:width .8s;"></div>
  850. </div>
  851. </div><div>
  852. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  853. <span style="color:var(--text-2);">朋友/同事推荐</span>
  854. <span class="text-mono" style="color:#D4A574;">40%</span>
  855. </div>
  856. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  857. <div style="width:40%; height:100%; background:#D4A574; border-radius:2px; transition:width .8s;"></div>
  858. </div>
  859. </div><div>
  860. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  861. <span style="color:var(--text-2);">百度搜索</span>
  862. <span class="text-mono" style="color:#D4A574;">25%</span>
  863. </div>
  864. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  865. <div style="width:25%; height:100%; background:#D4A574; border-radius:2px; transition:width .8s;"></div>
  866. </div>
  867. </div>
  868. </div>
  869. </div>
  870. <!-- 决策路径 -->
  871. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  872. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">JOURNEY · 决策路径</div>
  873. <ol style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; counter-reset:journey;">
  874. <li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#D4A57422; color:#D4A574; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">①</span>体检指标异常</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#D4A57422; color:#D4A574; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">②</span>药店直接问店员</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#D4A57422; color:#D4A574; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">③</span>看品牌→江中/汤臣倍健</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#D4A57422; color:#D4A574; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">④</span>直接大包装下单</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#D4A57422; color:#D4A574; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">⑤</span>家人监督长期服用</li>
  875. </ol>
  876. </div>
  877. <!-- 核心痛点 -->
  878. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  879. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:10px;">PAIN · 核心痛点排序</div>
  880. <div style="display:flex; flex-direction:column; gap:5px;">
  881. <div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  882. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#1</span>
  883. <span style="color:var(--text-2); flex:1;">解酒效果不明显</span>
  884. </div><div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  885. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#2</span>
  886. <span style="color:var(--text-2); flex:1;">一次要吃很多颗</span>
  887. </div><div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  888. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#3</span>
  889. <span style="color:var(--text-2); flex:1;">药片大、吞咽难</span>
  890. </div><div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  891. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#4</span>
  892. <span style="color:var(--text-2); flex:1;">怕干扰正常代谢</span>
  893. </div>
  894. </div>
  895. </div>
  896. <!-- 触动关键词 -->
  897. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  898. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">HOOK · 触动关键词</div>
  899. <div style="display:flex; flex-wrap:wrap; gap:6px;">
  900. <span class="tag" style="background:#D4A57414; color:#D4A574; border-color:#D4A57444; font-size:0.72rem;">解酒护肝</span><span class="tag" style="background:#D4A57414; color:#D4A574; border-color:#D4A57444; font-size:0.72rem;">宿醉缓解</span><span class="tag" style="background:#D4A57414; color:#D4A574; border-color:#D4A57444; font-size:0.72rem;">应酬三件套</span><span class="tag" style="background:#D4A57414; color:#D4A574; border-color:#D4A57444; font-size:0.72rem;">解油腻</span><span class="tag" style="background:#D4A57414; color:#D4A574; border-color:#D4A57444; font-size:0.72rem;">脂肪肝</span>
  901. </div>
  902. </div>
  903. <!-- VOC 证据 -->
  904. <div style="padding:18px 24px; background:rgba(255,255,255,0.02); margin-top:auto;">
  905. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.12em; margin-bottom:8px;">VOC EVIDENCE · 真实原声</div>
  906. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55; font-style:italic; margin-bottom:8px;">"肝郁气滞可以吃护肝嘛 · 肝火大,脾气暴躁,肝气郁结,可以吃吗"</div>
  907. <div style="display:flex; justify-content:space-between; font-size:0.72rem; color:var(--text-3);">
  908. <span>VOC 应酬场景原声(场景 Top 1 · 7 次)</span>
  909. <span class="text-mono" style="color:#D4A574;">♥ 24 + 23</span>
  910. </div>
  911. </div>
  912. </div>
  913. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #8B5CF6; border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;">
  914. <!-- 头部 -->
  915. <div style="padding:24px; background:linear-gradient(180deg, #8B5CF614, transparent); border-bottom:1px solid var(--border);">
  916. <div style="display:flex; align-items:start; gap:14px; margin-bottom:14px;">
  917. <div style="font-size:2.6rem; line-height:1;">🌸</div>
  918. <div style="flex:1;">
  919. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-bottom:4px;">PERSONA C · 20%</div>
  920. <div style="font-weight:800; font-size:1.15rem; line-height:1.3; color:var(--text-1);">情绪肝女性 · 晓玲</div>
  921. </div>
  922. </div>
  923. <div style="display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:0.78rem;">
  924. <div style="color:var(--text-3);">年龄 · <span style="color:var(--text-1); font-weight:600;">28-40 岁</span></div>
  925. <div style="color:var(--text-3);">性别 · <span style="color:var(--text-1); font-weight:600;">95% 女</span></div>
  926. <div style="color:var(--text-3);">收入 · <span style="color:var(--text-1); font-weight:600;">¥10-25 万</span></div>
  927. <div style="color:var(--text-3);">城市 · <span style="color:var(--text-1); font-weight:600;">新一线 / 二三线</span></div>
  928. </div>
  929. </div>
  930. <!-- 核心特征 -->
  931. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  932. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">CORE TRAITS · 核心特征</div>
  933. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px;">
  934. <li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>经期不规律、乳房胀痛</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>易怒失眠、情绪波动大</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>中医诊断肝郁气滞</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.5; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>信中医、偏好国潮养生</li>
  935. </ul>
  936. </div>
  937. <!-- 信息渠道(条形图) -->
  938. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  939. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">CHANNELS · 信息获取渠道</div>
  940. <div style="display:flex; flex-direction:column; gap:8px;">
  941. <div>
  942. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  943. <span style="color:var(--text-2);">小红书</span>
  944. <span class="text-mono" style="color:#8B5CF6;">70%</span>
  945. </div>
  946. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  947. <div style="width:70%; height:100%; background:#8B5CF6; border-radius:2px; transition:width .8s;"></div>
  948. </div>
  949. </div><div>
  950. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  951. <span style="color:var(--text-2);">抖音中医号</span>
  952. <span class="text-mono" style="color:#8B5CF6;">50%</span>
  953. </div>
  954. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  955. <div style="width:50%; height:100%; background:#8B5CF6; border-radius:2px; transition:width .8s;"></div>
  956. </div>
  957. </div><div>
  958. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  959. <span style="color:var(--text-2);">中医 KOL</span>
  960. <span class="text-mono" style="color:#8B5CF6;">40%</span>
  961. </div>
  962. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  963. <div style="width:40%; height:100%; background:#8B5CF6; border-radius:2px; transition:width .8s;"></div>
  964. </div>
  965. </div><div>
  966. <div style="display:flex; justify-content:space-between; font-size:0.78rem; margin-bottom:3px;">
  967. <span style="color:var(--text-2);">朋友圈种草</span>
  968. <span class="text-mono" style="color:#8B5CF6;">25%</span>
  969. </div>
  970. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; overflow:hidden;">
  971. <div style="width:25%; height:100%; background:#8B5CF6; border-radius:2px; transition:width .8s;"></div>
  972. </div>
  973. </div>
  974. </div>
  975. </div>
  976. <!-- 决策路径 -->
  977. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  978. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">JOURNEY · 决策路径</div>
  979. <ol style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; counter-reset:journey;">
  980. <li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#8B5CF622; color:#8B5CF6; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">①</span>中医问诊 → 肝郁诊断</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#8B5CF622; color:#8B5CF6; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">②</span>小红书搜疏肝解郁</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#8B5CF622; color:#8B5CF6; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">③</span>对比中药 vs 保健品</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#8B5CF622; color:#8B5CF6; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">④</span>看包装→国潮加分</li><li style="counter-increment:journey; font-size:0.82rem; color:var(--text-2); line-height:1.45; padding-left:22px; position:relative;"><span style="position:absolute; left:0; top:1px; width:16px; height:16px; border-radius:50%; background:#8B5CF622; color:#8B5CF6; font-weight:700; font-family:var(--font-mono); font-size:0.68rem; display:flex; align-items:center; justify-content:center;">⑤</span>长期调理 2-3 个月</li>
  981. </ol>
  982. </div>
  983. <!-- 核心痛点 -->
  984. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  985. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:10px;">PAIN · 核心痛点排序</div>
  986. <div style="display:flex; flex-direction:column; gap:5px;">
  987. <div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  988. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#1</span>
  989. <span style="color:var(--text-2); flex:1;">中药煎服繁琐</span>
  990. </div><div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  991. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#2</span>
  992. <span style="color:var(--text-2); flex:1;">西药保健品不信任</span>
  993. </div><div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  994. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#3</span>
  995. <span style="color:var(--text-2); flex:1;">怕激素类成分</span>
  996. </div><div style="display:flex; align-items:center; gap:8px; font-size:0.82rem;">
  997. <span class="text-mono" style="color:var(--rose); font-weight:700; min-width:18px;">#4</span>
  998. <span style="color:var(--text-2); flex:1;">短期无感即放弃</span>
  999. </div>
  1000. </div>
  1001. </div>
  1002. <!-- 触动关键词 -->
  1003. <div style="padding:18px 24px; border-bottom:1px dashed var(--border);">
  1004. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">HOOK · 触动关键词</div>
  1005. <div style="display:flex; flex-wrap:wrap; gap:6px;">
  1006. <span class="tag" style="background:#8B5CF614; color:#8B5CF6; border-color:#8B5CF644; font-size:0.72rem;">疏肝解郁</span><span class="tag" style="background:#8B5CF614; color:#8B5CF6; border-color:#8B5CF644; font-size:0.72rem;">养肝安神</span><span class="tag" style="background:#8B5CF614; color:#8B5CF6; border-color:#8B5CF644; font-size:0.72rem;">玫瑰护肝</span><span class="tag" style="background:#8B5CF614; color:#8B5CF6; border-color:#8B5CF644; font-size:0.72rem;">国潮养生</span><span class="tag" style="background:#8B5CF614; color:#8B5CF6; border-color:#8B5CF644; font-size:0.72rem;">养颜美颜</span>
  1007. </div>
  1008. </div>
  1009. <!-- VOC 证据 -->
  1010. <div style="padding:18px 24px; background:rgba(255,255,255,0.02); margin-top:auto;">
  1011. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.12em; margin-bottom:8px;">VOC EVIDENCE · 真实原声</div>
  1012. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55; font-style:italic; margin-bottom:8px;">"肝火大,脾气暴躁,肝气郁结,可以吃吗"</div>
  1013. <div style="display:flex; justify-content:space-between; font-size:0.72rem; color:var(--text-3);">
  1014. <span>小红书护肝片真实评论</span>
  1015. <span class="text-mono" style="color:#8B5CF6;">♥ 23</span>
  1016. </div>
  1017. </div>
  1018. </div>
  1019. </div>
  1020. <!-- 底部结论 bar -->
  1021. <div class="fade-up" style="margin-top:32px; padding:20px 28px; background:linear-gradient(135deg, #FF4D8D0A, rgba(255,255,255,0.01)); border-left:4px solid #FF4D8D; border-radius:0 var(--radius-md) var(--radius-md) 0;">
  1022. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.15em; margin-bottom:8px;">💡 PRODUCT INSIGHT</div>
  1023. <div style="font-size:1rem; color:var(--text-1); line-height:1.75;">
  1024. <strong style="color:#FF4D8D;">3 类人群痛点完全不同 → 单 SKU 无法满足</strong>。建议按照<strong>熬夜版 (L-02)</strong> / <strong>应酬版 (L-01)</strong> / <strong>疏肝解郁版 (L-03)</strong> 做 3 条产品线分化,对应不同渠道 + 内容话术 + 包装视觉。
  1025. </div>
  1026. </div>
  1027. </div>
  1028. </section>
  1029. <section class="report-section" id="audience-2" data-tone="rose" data-slide-num="05/36">
  1030. <div class="section-inner">
  1031. <div class="section-head rise-in">
  1032. <div class="section-eyebrow" style="color:#FF4D8D;">2.1.2 · INFLUENCER LANDSCAPE</div>
  1033. <h2 class="text-h1"><span class="headline-anim">影响人群画像 · 3 层传播关键节点</span></h2>
  1034. <p class="section-sub">江中肝纯片走出小红书同质化内容 · 需要在 <strong style="color:#FF4D8D;">医疗权威 / 养生 KOL / 职场博主</strong> 三层节点同时布局 · 形成"自上而下权威背书 + 自下而上圈层共鸣"的双向传播矩阵</p>
  1035. </div>
  1036. <!-- 3 影响者类型卡 -->
  1037. <div style="display:flex; flex-direction:column; gap:18px;">
  1038. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #0085CA; border-radius:var(--radius-md); padding:26px 28px;">
  1039. <div style="display:grid; grid-template-columns: 90px 1fr 1.2fr; gap:26px; align-items:start;">
  1040. <!-- 左侧 icon + 占比 -->
  1041. <div style="text-align:center;">
  1042. <div style="font-size:3rem; line-height:1; margin-bottom:10px;">🩺</div>
  1043. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; font-weight:700;">TIER 1</div>
  1044. </div>
  1045. <!-- 中间:名称 + 特征 -->
  1046. <div>
  1047. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em; margin-bottom:6px;">医疗权威层 · 决策权重 · 40%</div>
  1048. <h3 class="text-h3" style="margin:0 0 14px; font-size:1.2rem; color:var(--text-1);">三甲肝病科医生</h3>
  1049. <ul style="list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:6px;">
  1050. <li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">·</span>专业权威,影响诊断+购买决策</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">·</span>关注循证医学、成分剂量、临床证据</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">·</span>对新配方持开放但需要数据支持</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">·</span>处方场景转介 OTC 的关键节点</li>
  1051. </ul>
  1052. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-left:2px solid #0085CA; border-radius:0 6px 6px 0;">
  1053. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-bottom:6px;">核心沟通重点</div>
  1054. <ul style="list-style:none; padding:0; margin:0; font-size:0.82rem; color:var(--text-1); line-height:1.6;">
  1055. <li>· 4 重协同的药理机制阐述</li><li>· 与单成分水飞蓟的临床数据对比</li><li>· 基于中国肝病流行病学的剂量设计</li>
  1056. </ul>
  1057. </div>
  1058. </div>
  1059. <!-- 右侧:匹配 KOL -->
  1060. <div>
  1061. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">MATCHED KOL · 候选合作池</div>
  1062. <div style="display:flex; flex-direction:column; gap:10px;">
  1063. <div style="padding:12px 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:6px;">
  1064. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:6px;">
  1065. <div style="font-weight:700; font-size:0.92rem; color:var(--text-1);">丁香园肝病频道</div>
  1066. <span class="text-mono text-xs" style="color:#0085CA; white-space:nowrap;">1800w+</span>
  1067. </div>
  1068. <div style="display:flex; justify-content:space-between; font-size:0.76rem; color:var(--text-3);">
  1069. <span>医学平台</span>
  1070. <span style="color:var(--text-2);">科普 + 专家问答</span>
  1071. </div>
  1072. </div><div style="padding:12px 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:6px;">
  1073. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:6px;">
  1074. <div style="font-weight:700; font-size:0.92rem; color:var(--text-1);">Dr. Joseph Salhab</div>
  1075. <span class="text-mono text-xs" style="color:#0085CA; white-space:nowrap;">2.1M (VOC 源自)</span>
  1076. </div>
  1077. <div style="display:flex; justify-content:space-between; font-size:0.76rem; color:var(--text-3);">
  1078. <span>TikTok · 肝健康</span>
  1079. <span style="color:var(--text-2);">海外肝健康 KOL Top 3</span>
  1080. </div>
  1081. </div>
  1082. </div>
  1083. </div>
  1084. </div>
  1085. </div>
  1086. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #FF4D8D; border-radius:var(--radius-md); padding:26px 28px;">
  1087. <div style="display:grid; grid-template-columns: 90px 1fr 1.2fr; gap:26px; align-items:start;">
  1088. <!-- 左侧 icon + 占比 -->
  1089. <div style="text-align:center;">
  1090. <div style="font-size:3rem; line-height:1; margin-bottom:10px;">📱</div>
  1091. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; font-weight:700;">TIER 2</div>
  1092. </div>
  1093. <!-- 中间:名称 + 特征 -->
  1094. <div>
  1095. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; margin-bottom:6px;">养生 KOL / KOC 层 · 决策权重 · 35%</div>
  1096. <h3 class="text-h3" style="margin:0 0 14px; font-size:1.2rem; color:var(--text-1);">小红书中医养生达人 + 成分党博主</h3>
  1097. <ul style="list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:6px;">
  1098. <li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">·</span>女性用户信任度高</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">·</span>擅长种草内容(对比测评、成分拆解)</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">·</span>关注颜值 + 体验 + 话题性</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">·</span>可快速撬动小红书内容生态</li>
  1099. </ul>
  1100. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-left:2px solid #FF4D8D; border-radius:0 6px 6px 0;">
  1101. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:6px;">核心沟通重点</div>
  1102. <ul style="list-style:none; padding:0; margin:0; font-size:0.82rem; color:var(--text-1); line-height:1.6;">
  1103. <li>· 国潮养生内容调性</li><li>· &quot;我吃了半年&quot;真实打卡测评</li><li>· 对比单成分 vs 复合配方的可视化</li>
  1104. </ul>
  1105. </div>
  1106. </div>
  1107. <!-- 右侧:匹配 KOL -->
  1108. <div>
  1109. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">MATCHED KOL · 候选合作池</div>
  1110. <div style="display:flex; flex-direction:column; gap:10px;">
  1111. <div style="padding:12px 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:6px;">
  1112. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:6px;">
  1113. <div style="font-weight:700; font-size:0.92rem; color:var(--text-1);">中医养生 KOC · 小茉</div>
  1114. <span class="text-mono text-xs" style="color:#FF4D8D; white-space:nowrap;">10-50w 腰部</span>
  1115. </div>
  1116. <div style="display:flex; justify-content:space-between; font-size:0.76rem; color:var(--text-3);">
  1117. <span>小红书</span>
  1118. <span style="color:var(--text-2);">真人试用 · 3 周打卡</span>
  1119. </div>
  1120. </div><div style="padding:12px 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:6px;">
  1121. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:6px;">
  1122. <div style="font-weight:700; font-size:0.92rem; color:var(--text-1);">成分党博主 · 阿尼亚</div>
  1123. <span class="text-mono text-xs" style="color:#FF4D8D; white-space:nowrap;">50w+</span>
  1124. </div>
  1125. <div style="display:flex; justify-content:space-between; font-size:0.76rem; color:var(--text-3);">
  1126. <span>抖音 + 小红书</span>
  1127. <span style="color:var(--text-2);">配方卡 + 成分表拆解</span>
  1128. </div>
  1129. </div>
  1130. </div>
  1131. </div>
  1132. </div>
  1133. </div>
  1134. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #FF8C42; border-radius:var(--radius-md); padding:26px 28px;">
  1135. <div style="display:grid; grid-template-columns: 90px 1fr 1.2fr; gap:26px; align-items:start;">
  1136. <!-- 左侧 icon + 占比 -->
  1137. <div style="text-align:center;">
  1138. <div style="font-size:3rem; line-height:1; margin-bottom:10px;">💼</div>
  1139. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em; font-weight:700;">TIER 3</div>
  1140. </div>
  1141. <!-- 中间:名称 + 特征 -->
  1142. <div>
  1143. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.12em; margin-bottom:6px;">职场/打工人圈层 · 决策权重 · 15%</div>
  1144. <h3 class="text-h3" style="margin:0 0 14px; font-size:1.2rem; color:var(--text-1);">职场自媒体博主 + 生活方式博主</h3>
  1145. <ul style="list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:6px;">
  1146. <li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">·</span>VOC 爆款笔记主力生产者(&quot;打工人自救指南&quot;4001赞)</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">·</span>情感共鸣强,适合场景代入</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">·</span>适合男性用户群体触达</li><li style="font-size:0.85rem; color:var(--text-2); line-height:1.55; padding-left:16px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">·</span>内容自然、不显广告属性</li>
  1147. </ul>
  1148. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-left:2px solid #FF8C42; border-radius:0 6px 6px 0;">
  1149. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em; margin-bottom:6px;">核心沟通重点</div>
  1150. <ul style="list-style:none; padding:0; margin:0; font-size:0.82rem; color:var(--text-1); line-height:1.6;">
  1151. <li>· 熬夜加班场景故事化</li><li>· &quot;体检发现脂肪肝&quot;一镜到底纪实</li><li>· &quot;男性护肝&quot;明确标签投放</li>
  1152. </ul>
  1153. </div>
  1154. </div>
  1155. <!-- 右侧:匹配 KOL -->
  1156. <div>
  1157. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:12px;">MATCHED KOL · 候选合作池</div>
  1158. <div style="display:flex; flex-direction:column; gap:10px;">
  1159. <div style="padding:12px 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:6px;">
  1160. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:6px;">
  1161. <div style="font-weight:700; font-size:0.92rem; color:var(--text-1);">打工人饲养员</div>
  1162. <span class="text-mono text-xs" style="color:#FF8C42; white-space:nowrap;">30-100w</span>
  1163. </div>
  1164. <div style="display:flex; justify-content:space-between; font-size:0.76rem; color:var(--text-3);">
  1165. <span>小红书职场号</span>
  1166. <span style="color:var(--text-2);">打工自救系列</span>
  1167. </div>
  1168. </div><div style="padding:12px 14px; background:var(--bg-2); border:1px solid var(--border); border-radius:6px;">
  1169. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:6px;">
  1170. <div style="font-weight:700; font-size:0.92rem; color:var(--text-1);">体检师阿健</div>
  1171. <span class="text-mono text-xs" style="color:#FF8C42; white-space:nowrap;">50w+</span>
  1172. </div>
  1173. <div style="display:flex; justify-content:space-between; font-size:0.76rem; color:var(--text-3);">
  1174. <span>抖音</span>
  1175. <span style="color:var(--text-2);">体检报告解读 · 脂肪肝专题</span>
  1176. </div>
  1177. </div>
  1178. </div>
  1179. </div>
  1180. </div>
  1181. </div>
  1182. </div>
  1183. <!-- 影响关系网络图 -->
  1184. <div class="fade-up" style="margin-top:28px; padding:28px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
  1185. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.15em; margin-bottom:16px;">INFLUENCE FLOW · 影响力传导链路</div>
  1186. <div style="display:grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; gap:16px; align-items:center;">
  1187. <div style="padding:14px; background:#0085CA14; border:1px solid #0085CA44; border-radius:8px; text-align:center;">
  1188. <div style="font-size:1.3rem; margin-bottom:6px;">🩺</div>
  1189. <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">医疗权威层</div>
  1190. <div class="text-mono text-xs" style="color:#0085CA;">自上而下</div>
  1191. </div>
  1192. <div style="color:#FF4D8D; font-size:1.4rem; text-align:center;">→</div>
  1193. <div style="padding:14px; background:#FF4D8D14; border:1px solid #FF4D8D44; border-radius:8px; text-align:center;">
  1194. <div style="font-size:1.3rem; margin-bottom:6px;">📱</div>
  1195. <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">养生 KOL 层</div>
  1196. <div class="text-mono text-xs" style="color:#FF4D8D;">圈层破壁</div>
  1197. </div>
  1198. <div style="color:#FF4D8D; font-size:1.4rem; text-align:center;">→</div>
  1199. <div style="padding:14px; background:#FF8C4214; border:1px solid #FF8C4244; border-radius:8px; text-align:center;">
  1200. <div style="font-size:1.3rem; margin-bottom:6px;">💼</div>
  1201. <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">职场自媒体层</div>
  1202. <div class="text-mono text-xs" style="color:#FF8C42;">圈层共鸣</div>
  1203. </div>
  1204. </div>
  1205. <div style="margin-top:14px; text-align:center; font-size:0.82rem; color:var(--text-2); line-height:1.6;">
  1206. <strong style="color:#FF4D8D;">传播策略</strong>:<br/>
  1207. 医生背书建立权威锚点 → 养生 KOL 做内容扩散 → 职场博主做圈层共鸣 · <strong style="color:#FF4D8D;">三层形成合力</strong>,对冲 VOC 爆款 #3 "<em>不要吃护肝片</em>" 的反向内容伤害
  1208. </div>
  1209. </div>
  1210. </div>
  1211. </section>
  1212. <section class="report-section" id="audience-3" data-tone="rose" data-slide-num="06/36">
  1213. <div class="section-inner">
  1214. <div class="section-head rise-in">
  1215. <div class="section-eyebrow" style="color:#FF4D8D;">2.1.3 · CUSTOMER JOURNEY MAP</div>
  1216. <h2 class="text-h1"><span class="headline-anim">决策旅程 · 从焦虑到推荐的 7 阶段</span></h2>
  1217. <p class="section-sub">基于 VOC 原声提炼的用户完整决策路径 · 每一阶段标注真实行为 / 接触点 / 痛点 / 机会窗口 · 3 个关键触点优化路径</p>
  1218. </div>
  1219. <!-- 7 阶段横向流程 -->
  1220. <div class="fade-up" style="margin-bottom:28px; position:relative;">
  1221. <div style="display:grid; grid-template-columns:repeat(7, 1fr); gap:8px; position:relative; z-index:2;">
  1222. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:16px 12px; text-align:center;">
  1223. <div style="font-size:1.8rem; margin-bottom:6px; line-height:1;">👁️</div>
  1224. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; font-weight:700;">STAGE 1</div>
  1225. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-top:4px;">认知</div>
  1226. <div style="font-size:0.72rem; color:var(--text-3); margin-top:2px;">潜在需求</div>
  1227. </div><div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:16px 12px; text-align:center;">
  1228. <div style="font-size:1.8rem; margin-bottom:6px; line-height:1;">⚡</div>
  1229. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; font-weight:700;">STAGE 2</div>
  1230. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-top:4px;">触发</div>
  1231. <div style="font-size:0.72rem; color:var(--text-3); margin-top:2px;">焦虑产生</div>
  1232. </div><div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:16px 12px; text-align:center;">
  1233. <div style="font-size:1.8rem; margin-bottom:6px; line-height:1;">🔍</div>
  1234. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; font-weight:700;">STAGE 3</div>
  1235. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-top:4px;">考虑</div>
  1236. <div style="font-size:0.72rem; color:var(--text-3); margin-top:2px;">对比决策</div>
  1237. </div><div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:16px 12px; text-align:center;">
  1238. <div style="font-size:1.8rem; margin-bottom:6px; line-height:1;">💳</div>
  1239. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; font-weight:700;">STAGE 4</div>
  1240. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-top:4px;">决策</div>
  1241. <div style="font-size:0.72rem; color:var(--text-3); margin-top:2px;">下单购买</div>
  1242. </div><div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:16px 12px; text-align:center;">
  1243. <div style="font-size:1.8rem; margin-bottom:6px; line-height:1;">📦</div>
  1244. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; font-weight:700;">STAGE 5</div>
  1245. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-top:4px;">使用</div>
  1246. <div style="font-size:0.72rem; color:var(--text-3); margin-top:2px;">服用观察</div>
  1247. </div><div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:16px 12px; text-align:center;">
  1248. <div style="font-size:1.8rem; margin-bottom:6px; line-height:1;">⭐</div>
  1249. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; font-weight:700;">STAGE 6</div>
  1250. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-top:4px;">评价</div>
  1251. <div style="font-size:0.72rem; color:var(--text-3); margin-top:2px;">效果验证</div>
  1252. </div><div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:16px 12px; text-align:center;">
  1253. <div style="font-size:1.8rem; margin-bottom:6px; line-height:1;">🔁</div>
  1254. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; font-weight:700;">STAGE 7</div>
  1255. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); margin-top:4px;">推荐</div>
  1256. <div style="font-size:0.72rem; color:var(--text-3); margin-top:2px;">扩散传播</div>
  1257. </div>
  1258. </div>
  1259. <!-- 连接线 -->
  1260. <div style="position:absolute; top:50%; left:6%; right:6%; height:2px; background:linear-gradient(90deg, #FF4D8D44, #FF4D8D); z-index:1; opacity:0.4;"></div>
  1261. </div>
  1262. <!-- 详细阶段表格 -->
  1263. <div class="table-wrap fade-up" style="margin-bottom:32px;">
  1264. <table class="data-tbl">
  1265. <thead>
  1266. <tr>
  1267. <th style="width:60px;">Stage</th>
  1268. <th style="width:80px;">阶段</th>
  1269. <th>核心行为</th>
  1270. <th>触点</th>
  1271. <th style="color:var(--rose) !important;">痛点</th>
  1272. <th style="color:#FF4D8D !important;">影响机会</th>
  1273. </tr>
  1274. </thead>
  1275. <tbody>
  1276. <tr>
  1277. <td class="tb-num">1</td>
  1278. <td><span style="font-size:1.15rem;">👁️</span> <strong>认知</strong></td>
  1279. <td>浏览健康资讯</td>
  1280. <td style="color:var(--text-2);">小红书/朋友圈</td>
  1281. <td style="color:var(--rose);">—</td>
  1282. <td style="color:#FF4D8D; font-weight:600;">场景化内容植入</td>
  1283. </tr><tr>
  1284. <td class="tb-num">2</td>
  1285. <td><span style="font-size:1.15rem;">⚡</span> <strong>触发</strong></td>
  1286. <td>搜索「护肝」</td>
  1287. <td style="color:var(--text-2);">百度/小红书搜索</td>
  1288. <td style="color:var(--rose);">信息过载</td>
  1289. <td style="color:#FF4D8D; font-weight:600;">「复合护肝」关键词布局</td>
  1290. </tr><tr>
  1291. <td class="tb-num">3</td>
  1292. <td><span style="font-size:1.15rem;">🔍</span> <strong>考虑</strong></td>
  1293. <td>比较品牌+成分</td>
  1294. <td style="color:var(--text-2);">小红书/知乎测评</td>
  1295. <td style="color:var(--rose);">不知哪个更好</td>
  1296. <td style="color:#FF4D8D; font-weight:600;">KOL 测评 + 成分白皮书</td>
  1297. </tr><tr>
  1298. <td class="tb-num">4</td>
  1299. <td><span style="font-size:1.15rem;">💳</span> <strong>决策</strong></td>
  1300. <td>确定品牌下单</td>
  1301. <td style="color:var(--text-2);">天猫/京东/药店</td>
  1302. <td style="color:var(--rose);">价格/真伪担心</td>
  1303. <td style="color:#FF4D8D; font-weight:600;">一物一码 + 第三方检测</td>
  1304. </tr><tr>
  1305. <td class="tb-num">5</td>
  1306. <td><span style="font-size:1.15rem;">📦</span> <strong>使用</strong></td>
  1307. <td>吃药观察效果</td>
  1308. <td style="color:var(--text-2);">产品本身</td>
  1309. <td style="color:var(--rose);">剂量/时机拿捏</td>
  1310. <td style="color:#FF4D8D; font-weight:600;">30 天打卡日历 + 服用指南</td>
  1311. </tr><tr>
  1312. <td class="tb-num">6</td>
  1313. <td><span style="font-size:1.15rem;">⭐</span> <strong>评价</strong></td>
  1314. <td>体检指标对比</td>
  1315. <td style="color:var(--text-2);">小红书分享</td>
  1316. <td style="color:var(--rose);">效果不明显</td>
  1317. <td style="color:#FF4D8D; font-weight:600;">Before/After 模板内容</td>
  1318. </tr><tr>
  1319. <td class="tb-num">7</td>
  1320. <td><span style="font-size:1.15rem;">🔁</span> <strong>推荐</strong></td>
  1321. <td>推给亲友同事</td>
  1322. <td style="color:var(--text-2);">微信/朋友圈</td>
  1323. <td style="color:var(--rose);">—</td>
  1324. <td style="color:#FF4D8D; font-weight:600;">复购激励 + 推荐奖金</td>
  1325. </tr>
  1326. </tbody>
  1327. </table>
  1328. </div>
  1329. <!-- 关键触点优化 -->
  1330. <h3 class="text-h2 fade-up" style="margin-top:12px; margin-bottom:18px;">🎯 关键触点优化 · 3 个放大器</h3>
  1331. <div class="grid grid-3 fade-up" style="gap:16px;">
  1332. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); overflow:hidden;">
  1333. <div style="padding:18px 20px; background:linear-gradient(180deg, #FF4D8D14, transparent);">
  1334. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:4px;">TOUCHPOINT · 01</div>
  1335. <h4 style="margin:0; font-size:1.1rem; font-weight:700; color:var(--text-1);">小红书</h4>
  1336. </div>
  1337. <div style="padding:16px 20px; border-bottom:1px dashed var(--border);">
  1338. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:8px;">BEFORE · 现状问题</div>
  1339. <div style="font-size:0.85rem; color:var(--text-2); line-height:1.6;">搜「护肝片」全是同质内容 + 反向 VOC(「不要吃护肝片」2355赞)</div>
  1340. </div>
  1341. <div style="padding:16px 20px;">
  1342. <div class="text-mono text-xs" style="color:var(--green); letter-spacing:0.12em; margin-bottom:8px;">AFTER · 优化方案</div>
  1343. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.6;">布局「新一代复合护肝」+「成分对比白皮书」+「熬夜党自救」+「疏肝解郁」4 大关键词矩阵</div>
  1344. </div>
  1345. </div>
  1346. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); overflow:hidden;">
  1347. <div style="padding:18px 20px; background:linear-gradient(180deg, #FF4D8D14, transparent);">
  1348. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:4px;">TOUCHPOINT · 02</div>
  1349. <h4 style="margin:0; font-size:1.1rem; font-weight:700; color:var(--text-1);">药店终端</h4>
  1350. </div>
  1351. <div style="padding:16px 20px; border-bottom:1px dashed var(--border);">
  1352. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:8px;">BEFORE · 现状问题</div>
  1353. <div style="font-size:0.85rem; color:var(--text-2); line-height:1.6;">店员对新复合配方不熟悉 · 黄金位置被传统水飞蓟片占据</div>
  1354. </div>
  1355. <div style="padding:16px 20px;">
  1356. <div class="text-mono text-xs" style="color:var(--green); letter-spacing:0.12em; margin-bottom:8px;">AFTER · 优化方案</div>
  1357. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.6;">提供对比式 POP 物料(单成分 vs 复合)· 店员培训+分级返利· 申请 OTC 护肝专区黄金位</div>
  1358. </div>
  1359. </div>
  1360. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); overflow:hidden;">
  1361. <div style="padding:18px 20px; background:linear-gradient(180deg, #FF4D8D14, transparent);">
  1362. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:4px;">TOUCHPOINT · 03</div>
  1363. <h4 style="margin:0; font-size:1.1rem; font-weight:700; color:var(--text-1);">电商平台</h4>
  1364. </div>
  1365. <div style="padding:16px 20px; border-bottom:1px dashed var(--border);">
  1366. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:8px;">BEFORE · 现状问题</div>
  1367. <div style="font-size:0.85rem; color:var(--text-2); line-height:1.6;">详情页信息过载 · 用户不易找到差异化钩子</div>
  1368. </div>
  1369. <div style="padding:16px 20px;">
  1370. <div class="text-mono text-xs" style="color:var(--green); letter-spacing:0.12em; margin-bottom:8px;">AFTER · 优化方案</div>
  1371. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.6;">A+ 主图强化「4 重协同」可视化 · 一物一码直达服用指南 · 第三方检测报告在线可查</div>
  1372. </div>
  1373. </div>
  1374. </div>
  1375. </div>
  1376. </section>
  1377. <section class="report-section" id="audience-4" data-tone="rose" data-slide-num="07/36">
  1378. <div class="section-inner">
  1379. <div class="section-head rise-in">
  1380. <div class="section-eyebrow" style="color:#FF4D8D;">2.1.4 · PSYCHOLOGICAL INSIGHTS</div>
  1381. <h2 class="text-h1"><span class="headline-anim">心理洞察 · 4 条深层认知结构</span></h2>
  1382. <p class="section-sub">VOC 原声背后的心理学机制解码 · 每条洞察都对应经典心理学理论 + 江中产品策略落点 · 这是做出"不一样的护肝片"的思维母题</p>
  1383. </div>
  1384. <!-- 4 条洞察 insight-banner 风格 -->
  1385. <div style="display:flex; flex-direction:column; gap:20px;">
  1386. <div class="insight-banner fade-up" data-num="01" style="border-left:4px solid #FF4D8D; background:linear-gradient(135deg, var(--bg-1) 0%, #FF4D8D06 100%);">
  1387. <div>
  1388. <div style="display:flex; align-items:baseline; gap:14px; margin-bottom:10px;">
  1389. <span style="font-size:2.2rem; line-height:1;">💊</span>
  1390. <div>
  1391. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.15em;">INSIGHT 01 · Self-Compensation Theory · 自我补偿心理</div>
  1392. <h3 style="font-size:clamp(1.4rem, 2.4vw, 1.9rem); font-weight:800; color:var(--text-1); margin-top:6px; line-height:1.25;">健康焦虑 + 自我补偿</h3>
  1393. </div>
  1394. </div>
  1395. <p class="insight-body" style="color:var(--text-2); font-size:1rem; line-height:1.75; max-width:95%;">用户意识到&quot;我熬夜了/应酬了/损肝了&quot;,通过吃护肝片来心理补偿 — 这让护肝片变成了&quot;道德许可证&quot;,吃了就能继续放纵。</p>
  1396. </div>
  1397. <!-- VOC 证据 + 策略建议 双栏 -->
  1398. <div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px;">
  1399. <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid #FF4D8D; border-radius:0 6px 6px 0;">
  1400. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; margin-bottom:8px;">VOC · 真实原声证据</div>
  1401. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.6; font-style:italic;">"&quot;那上大夜班怎么办到底能不能吃护肝片&quot; · &quot;经常熬夜加班,求男性护肝片推荐&quot;"</div>
  1402. <div style="margin-top:8px; font-size:0.72rem; color:#FF4D8D;" class="text-mono">♥ 30 + 16</div>
  1403. </div>
  1404. <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid #FF4D8D; border-radius:0 6px 6px 0;">
  1405. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; margin-bottom:8px;">🎯 APPLICATION · 策略应用</div>
  1406. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.65;">不要直接教育"别熬夜" · 要承认用户的现实场景 + 提供精准补偿方案 · Hero claim:<strong>"熬夜党的复合护肝"</strong></div>
  1407. </div>
  1408. </div>
  1409. </div>
  1410. <div class="insight-banner fade-up" data-num="02" style="border-left:4px solid #D4A574; background:linear-gradient(135deg, var(--bg-1) 0%, #D4A57406 100%);">
  1411. <div>
  1412. <div style="display:flex; align-items:baseline; gap:14px; margin-bottom:10px;">
  1413. <span style="font-size:2.2rem; line-height:1;">🌿</span>
  1414. <div>
  1415. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em;">INSIGHT 02 · Cultural Schema Theory · 文化图式</div>
  1416. <h3 style="font-size:clamp(1.4rem, 2.4vw, 1.9rem); font-weight:800; color:var(--text-1); margin-top:6px; line-height:1.25;">中医情绪肝心智</h3>
  1417. </div>
  1418. </div>
  1419. <p class="insight-body" style="color:var(--text-2); font-size:1rem; line-height:1.75; max-width:95%;">中国用户广泛持有&quot;肝主情志&quot;认知:肝不好 = 易怒/失眠/经期不规律。现代 OTC 市场完全被西医叙事占据,留下巨大空位。</p>
  1420. </div>
  1421. <!-- VOC 证据 + 策略建议 双栏 -->
  1422. <div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px;">
  1423. <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid #D4A574; border-radius:0 6px 6px 0;">
  1424. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.12em; margin-bottom:8px;">VOC · 真实原声证据</div>
  1425. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.6; font-style:italic;">"&quot;肝郁气滞可以吃护肝嘛&quot; · &quot;肝火大,脾气暴躁,肝气郁结,可以吃吗&quot;"</div>
  1426. <div style="margin-top:8px; font-size:0.72rem; color:#D4A574;" class="text-mono">♥ 24 + 23</div>
  1427. </div>
  1428. <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid #FF4D8D; border-radius:0 6px 6px 0;">
  1429. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; margin-bottom:8px;">🎯 APPLICATION · 策略应用</div>
  1430. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.65;">产品端开发 <strong style="color:#8B5CF6;">L-03 疏肝解郁片</strong>(水飞蓟+玫瑰+柴胡+玉米须)· 直接对接中医"肝郁"话语体系 · 抢占情绪肝赛道</div>
  1431. </div>
  1432. </div>
  1433. </div>
  1434. <div class="insight-banner fade-up" data-num="03" style="border-left:4px solid #FF8C42; background:linear-gradient(135deg, var(--bg-1) 0%, #FF8C4206 100%);">
  1435. <div>
  1436. <div style="display:flex; align-items:baseline; gap:14px; margin-bottom:10px;">
  1437. <span style="font-size:2.2rem; line-height:1;">🛡️</span>
  1438. <div>
  1439. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.15em;">INSIGHT 03 · Loss Aversion (Kahneman &amp; Tversky, 1979)</div>
  1440. <h3 style="font-size:clamp(1.4rem, 2.4vw, 1.9rem); font-weight:800; color:var(--text-1); margin-top:6px; line-height:1.25;">损失厌恶 &gt; 收益追求</h3>
  1441. </div>
  1442. </div>
  1443. <p class="insight-body" style="color:var(--text-2); font-size:1rem; line-height:1.75; max-width:95%;">用户对&quot;不吃护肝片导致的伤害&quot;的恐惧,远大于&quot;吃护肝片获得的收益&quot;的期待。VOC 证据:用户反向焦虑「不吃就睡不好」比「吃了更健康」更能触发购买。</p>
  1444. </div>
  1445. <!-- VOC 证据 + 策略建议 双栏 -->
  1446. <div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px;">
  1447. <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid #FF8C42; border-radius:0 6px 6px 0;">
  1448. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.12em; margin-bottom:8px;">VOC · 真实原声证据</div>
  1449. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.6; font-style:italic;">"&quot;我吃了护肝片就能睡好,不吃就容易失眠是为什么呢&quot;"</div>
  1450. <div style="margin-top:8px; font-size:0.72rem; color:#FF8C42;" class="text-mono">♥ 6</div>
  1451. </div>
  1452. <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid #FF4D8D; border-radius:0 6px 6px 0;">
  1453. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; margin-bottom:8px;">🎯 APPLICATION · 策略应用</div>
  1454. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.65;">话术从"护肝有好处"切换为"<strong style="color:#FF8C42;">不护肝的代价</strong>" · 场景代入「脂肪肝 3 年变肝硬化」等损失叙事 · 对比展示「继续熬夜 vs 护肝干预」两条时间线</div>
  1455. </div>
  1456. </div>
  1457. </div>
  1458. <div class="insight-banner fade-up" data-num="04" style="border-left:4px solid #0085CA; background:linear-gradient(135deg, var(--bg-1) 0%, #0085CA06 100%);">
  1459. <div>
  1460. <div style="display:flex; align-items:baseline; gap:14px; margin-bottom:10px;">
  1461. <span style="font-size:2.2rem; line-height:1;">🔬</span>
  1462. <div>
  1463. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em;">INSIGHT 04 · Source Credibility Theory · 信源可信度</div>
  1464. <h3 style="font-size:clamp(1.4rem, 2.4vw, 1.9rem); font-weight:800; color:var(--text-1); margin-top:6px; line-height:1.25;">权威话术失信危机</h3>
  1465. </div>
  1466. </div>
  1467. <p class="insight-body" style="color:var(--text-2); font-size:1rem; line-height:1.75; max-width:95%;">用户对&quot;穿白大褂的医生推荐&quot;产生了免疫反应 — 发现多个医生号文案一模一样,直接触发信任崩塌。这是传统 OTC 营销第一次面临的新危机。</p>
  1468. </div>
  1469. <!-- VOC 证据 + 策略建议 双栏 -->
  1470. <div style="display:grid; grid-template-columns: 1fr 1fr; gap:20px;">
  1471. <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid #0085CA; border-radius:0 6px 6px 0;">
  1472. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em; margin-bottom:8px;">VOC · 真实原声证据</div>
  1473. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.6; font-style:italic;">"&quot;看了几个白大褂专家说,怎么词都一模一样的呢,背稿吗&quot; · &quot;医生其实也不是完全懂保健行业&quot;"</div>
  1474. <div style="margin-top:8px; font-size:0.72rem; color:#0085CA;" class="text-mono">♥ 3 + 24</div>
  1475. </div>
  1476. <div style="padding:16px 18px; background:rgba(255,255,255,0.02); border-left:2px solid #FF4D8D; border-radius:0 6px 6px 0;">
  1477. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; margin-bottom:8px;">🎯 APPLICATION · 策略应用</div>
  1478. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.65;">摒弃统一话术的医生软广 · 转向 <strong style="color:#0085CA;">独立第三方检测报告</strong> + <strong>真实用户 30 天打卡</strong> + <strong>成分克数透明表</strong> 三重可验证证据</div>
  1479. </div>
  1480. </div>
  1481. </div>
  1482. </div>
  1483. </div>
  1484. </section>
  1485. <section class="report-section" id="audience-5" data-tone="rose" data-slide-num="08/36">
  1486. <div class="section-inner">
  1487. <div class="section-head rise-in">
  1488. <div class="section-eyebrow" style="color:#FF4D8D;">2.1.5 · SEGMENTATION STRATEGY</div>
  1489. <h2 class="text-h1"><span class="headline-anim">人群分层 · 4 层优先级策略矩阵</span></h2>
  1490. <p class="section-sub">按占比 × 优先级 × 转化难度分层 · 每层有独立的内容/渠道/产品/KPI 四元策略 · 第一年 GMV 目标 · 5700w</p>
  1491. </div>
  1492. <!-- 主体:左饼图 + 右策略矩阵 -->
  1493. <div class="grid fade-up" style="grid-template-columns: 320px 1fr; gap:32px; margin-bottom:32px; align-items:start;">
  1494. <!-- 左:SVG 饼图 -->
  1495. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; text-align:center;">
  1496. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.15em; margin-bottom:16px;">COMPOSITION · 人群构成</div>
  1497. <svg viewBox="0 0 240 240" style="width:100%; max-width:240px; margin:0 auto; display:block;">
  1498. <!-- 背景圆 -->
  1499. <circle cx="120" cy="120" r="100" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>
  1500. <path d="M 120 120 L 120.0 20.0 A 100 100 0 0 1 150.9 215.1 Z" fill="#FF4D8D" opacity="0.85" stroke="var(--bg-0)" stroke-width="2"/><path d="M 120 120 L 150.9 215.1 A 100 100 0 0 1 20.0 120.0 Z" fill="#D4A574" opacity="0.85" stroke="var(--bg-0)" stroke-width="2"/><path d="M 120 120 L 20.0 120.0 A 100 100 0 0 1 89.1 24.9 Z" fill="#8B5CF6" opacity="0.85" stroke="var(--bg-0)" stroke-width="2"/><path d="M 120 120 L 89.1 24.9 A 100 100 0 0 1 120.0 20.0 Z" fill="#6B6B6B" opacity="0.85" stroke="var(--bg-0)" stroke-width="2"/>
  1501. <!-- 中心洞 -->
  1502. <circle cx="120" cy="120" r="40" fill="var(--bg-1)"/>
  1503. <text x="120" y="115" text-anchor="middle" style="fill:var(--text-1); font-family:var(--font-head); font-weight:800; font-size:18px;">100%</text>
  1504. <text x="120" y="132" text-anchor="middle" style="fill:var(--text-3); font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em;">COVERAGE</text>
  1505. </svg>
  1506. <div style="margin-top:18px; display:flex; flex-direction:column; gap:8px;">
  1507. <div style="display:flex; justify-content:space-between; align-items:center; font-size:0.82rem;">
  1508. <div style="display:flex; align-items:center; gap:8px;">
  1509. <span style="width:12px; height:12px; background:#FF4D8D; border-radius:2px; flex-shrink:0;"></span>
  1510. <span style="color:var(--text-2);">🌙 熬夜打工人</span>
  1511. </div>
  1512. <span class="text-mono" style="color:#FF4D8D; font-weight:700;">45%</span>
  1513. </div><div style="display:flex; justify-content:space-between; align-items:center; font-size:0.82rem;">
  1514. <div style="display:flex; align-items:center; gap:8px;">
  1515. <span style="width:12px; height:12px; background:#D4A574; border-radius:2px; flex-shrink:0;"></span>
  1516. <span style="color:var(--text-2);">🍺 应酬男</span>
  1517. </div>
  1518. <span class="text-mono" style="color:#D4A574; font-weight:700;">30%</span>
  1519. </div><div style="display:flex; justify-content:space-between; align-items:center; font-size:0.82rem;">
  1520. <div style="display:flex; align-items:center; gap:8px;">
  1521. <span style="width:12px; height:12px; background:#8B5CF6; border-radius:2px; flex-shrink:0;"></span>
  1522. <span style="color:var(--text-2);">🌸 情绪肝女性</span>
  1523. </div>
  1524. <span class="text-mono" style="color:#8B5CF6; font-weight:700;">20%</span>
  1525. </div><div style="display:flex; justify-content:space-between; align-items:center; font-size:0.82rem;">
  1526. <div style="display:flex; align-items:center; gap:8px;">
  1527. <span style="width:12px; height:12px; background:#6B6B6B; border-radius:2px; flex-shrink:0;"></span>
  1528. <span style="color:var(--text-2);">🎲 盲从/尝鲜型</span>
  1529. </div>
  1530. <span class="text-mono" style="color:#6B6B6B; font-weight:700;">5%</span>
  1531. </div>
  1532. </div>
  1533. </div>
  1534. <!-- 右:策略表 -->
  1535. <div class="table-wrap">
  1536. <table class="data-tbl">
  1537. <thead>
  1538. <tr>
  1539. <th style="width:140px;">人群</th>
  1540. <th style="width:70px;">占比</th>
  1541. <th style="width:70px;">优先级</th>
  1542. <th>内容策略</th>
  1543. <th>渠道</th>
  1544. <th>产品承接</th>
  1545. </tr>
  1546. </thead>
  1547. <tbody>
  1548. <tr>
  1549. <td><strong style="color:#FF4D8D;">🌙 熬夜打工人</strong></td>
  1550. <td class="tb-num" style="color:#FF4D8D;">45%</td>
  1551. <td><span class="tag" style="background:#FF4D8D22; color:#FF4D8D; border-color:#FF4D8D44; font-size:0.7rem;">最高</span></td>
  1552. <td style="font-size:0.82rem; line-height:1.5;">小红书「打工人自救指南」系列 · 爆款模板复刻</td>
  1553. <td style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">天猫旗舰店 + 京东自营 + 小红书闭环</td>
  1554. <td style="font-size:0.82rem; color:var(--text-1); line-height:1.5;"><strong>L-02 熬夜版(水飞蓟+NAC+GABA 助眠)¥138</strong></td>
  1555. </tr><tr>
  1556. <td><strong style="color:#D4A574;">🍺 应酬男</strong></td>
  1557. <td class="tb-num" style="color:#D4A574;">30%</td>
  1558. <td><span class="tag" style="background:#D4A57422; color:#D4A574; border-color:#D4A57444; font-size:0.7rem;">高</span></td>
  1559. <td style="font-size:0.82rem; line-height:1.5;">京东/抖音「应酬脂肪肝3年变肝硬化」损失叙事</td>
  1560. <td style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">OTC 药店 + 京东自营 + 企业大包团购</td>
  1561. <td style="font-size:0.82rem; color:var(--text-1); line-height:1.5;"><strong>L-01 应酬版(水飞蓟+姜黄+葛根+B族)¥128 / L-05 家庭装 ¥228</strong></td>
  1562. </tr><tr>
  1563. <td><strong style="color:#8B5CF6;">🌸 情绪肝女性</strong></td>
  1564. <td class="tb-num" style="color:#8B5CF6;">20%</td>
  1565. <td><span class="tag" style="background:#8B5CF622; color:#8B5CF6; border-color:#8B5CF644; font-size:0.7rem;">中</span></td>
  1566. <td style="font-size:0.82rem; line-height:1.5;">小红书中医养生 KOC 真人试用 · 3 周打卡</td>
  1567. <td style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">小红书自营 + 天猫国际 + 线下中医馆合作</td>
  1568. <td style="font-size:0.82rem; color:var(--text-1); line-height:1.5;"><strong>L-03 疏肝解郁片(水飞蓟+玫瑰+柴胡+玉米须+B6)¥118</strong></td>
  1569. </tr><tr>
  1570. <td><strong style="color:#6B6B6B;">🎲 盲从/尝鲜型</strong></td>
  1571. <td class="tb-num" style="color:#6B6B6B;">5%</td>
  1572. <td><span class="tag" style="background:#6B6B6B22; color:#6B6B6B; border-color:#6B6B6B44; font-size:0.7rem;">低</span></td>
  1573. <td style="font-size:0.82rem; line-height:1.5;">不主动投入 · 追热点 借势收割即可</td>
  1574. <td style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">依赖自然流量 + 直播尾货</td>
  1575. <td style="font-size:0.82rem; color:var(--text-1); line-height:1.5;"><strong>L-04 泡腾片(水飞蓟+蒲公英+维C)¥59 入门款</strong></td>
  1576. </tr>
  1577. </tbody>
  1578. </table>
  1579. </div>
  1580. </div>
  1581. <!-- KPI 目标卡 -->
  1582. <div class="grid fade-up" style="grid-template-columns:repeat(4, 1fr); gap:12px;">
  1583. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:18px;">
  1584. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:6px;">KPI · 熬夜打工人</div>
  1585. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); line-height:1.45;">首年 GMV 目标 · 3000w ·占总盘 55%</div>
  1586. </div><div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #D4A574; border-radius:var(--radius-md); padding:18px;">
  1587. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:6px;">KPI · 应酬男</div>
  1588. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); line-height:1.45;">首年 GMV 目标 · 1800w ·占总盘 32%</div>
  1589. </div><div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:var(--radius-md); padding:18px;">
  1590. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-bottom:6px;">KPI · 情绪肝女性</div>
  1591. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); line-height:1.45;">首年 GMV 目标 · 800w · 占总盘 14%</div>
  1592. </div><div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #6B6B6B; border-radius:var(--radius-md); padding:18px;">
  1593. <div class="text-mono text-xs" style="color:#6B6B6B; letter-spacing:0.1em; margin-bottom:6px;">KPI · 盲从/尝鲜型</div>
  1594. <div style="font-weight:700; font-size:0.95rem; color:var(--text-1); line-height:1.45;">首年 GMV 目标 · 100w · 占总盘 2%</div>
  1595. </div>
  1596. </div>
  1597. <!-- 总盘结论 -->
  1598. <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, #FF4D8D0A, rgba(245,166,35,0.04)); border:1px solid #FF4D8D22; border-radius:var(--radius-md);">
  1599. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.15em; margin-bottom:10px;">🎯 YEAR-1 TOTAL · 首年总盘目标</div>
  1600. <div style="display:flex; flex-wrap:wrap; gap:24px; align-items:baseline;">
  1601. <div>
  1602. <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:#FF4D8D; line-height:1;">¥5700w</div>
  1603. <div class="text-mono text-xs" style="color:var(--text-3); margin-top:4px;">GMV TARGET</div>
  1604. </div>
  1605. <div style="flex:1; min-width:300px; color:var(--text-2); font-size:0.92rem; line-height:1.7;">
  1606. 三条 SKU 线分别对接 3 类核心人群 + 1 入门款辐射尝鲜用户 · <strong style="color:#FF4D8D;">熬夜党</strong>占 55% 是现金流主力 · <strong style="color:#D4A574;">应酬男</strong>贡献 32% 利润 · <strong style="color:#8B5CF6;">情绪肝女</strong>是品类突围关键点
  1607. </div>
  1608. </div>
  1609. </div>
  1610. </div>
  1611. </section>
  1612. <section class="report-section" id="position" data-tone="amber" data-slide-num="09/36" style="justify-content:center;">
  1613. <div class="section-inner">
  1614. <div class="rise-in" style="text-align:center; margin-bottom:48px;">
  1615. <div class="text-mono" style="color:#D4A574; letter-spacing:0.35em; font-size:0.8rem; margin-bottom:20px;">CHAPTER 2.2 · POSITIONING</div>
  1616. <h1 style="font-family:var(--font-head); font-weight:900; font-size:clamp(4rem, 10vw, 8rem); line-height:0.92; letter-spacing:-0.04em; color:#fff; background:linear-gradient(135deg, #fff 30%, #D4A574 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 18px;">
  1617. 定位
  1618. </h1>
  1619. <p class="text-poster" style="font-size:clamp(1.2rem, 2.2vw, 1.8rem); color:var(--text-2); font-weight:500; max-width:820px; margin:0 auto; line-height:1.5;">「场景化复合护肝」心智占位 — 4 重协同 · 一片多效</p>
  1620. </div>
  1621. <div class="fade-up" style="max-width:920px; margin:0 auto 40px; padding:28px 36px; background:rgba(255,255,255,0.02); border-left:4px solid #D4A574; border-radius:0 var(--radius-md) var(--radius-md) 0;">
  1622. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:10px;">KEY TAKE · 本章核心</div>
  1623. <div style="font-size:1.15rem; line-height:1.75; color:var(--text-1);">区别于美林/泰诺林/水飞蓟片的单成分标配,以 <strong style="color:#D4A574;">"4 重协同护肝 · 一片多效"</strong> 切入市场 — 对标 Amazon Top 6 中 4 款都是复合配方(Milk Thistle+Turmeric+NAC+Dandelion+Glutathione),在国内 OTC 渠道建立"场景化复合"第一心智。</div>
  1624. </div>
  1625. <div class="grid fade-up" style="grid-template-columns:repeat(6, 1fr); gap:14px; max-width:1100px; margin:0 auto;">
  1626. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #D4A574;">
  1627. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; font-weight:700;">2.2.1</div>
  1628. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">核心定位表述</div>
  1629. </div>
  1630. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #D4A574;">
  1631. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; font-weight:700;">2.2.2</div>
  1632. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">定位诠释</div>
  1633. </div>
  1634. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #D4A574;">
  1635. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; font-weight:700;">2.2.3</div>
  1636. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">目标场景</div>
  1637. </div>
  1638. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #D4A574;">
  1639. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; font-weight:700;">2.2.4</div>
  1640. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">核心利益模型</div>
  1641. </div>
  1642. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #D4A574;">
  1643. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; font-weight:700;">2.2.5</div>
  1644. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">品牌个性</div>
  1645. </div>
  1646. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #D4A574;">
  1647. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; font-weight:700;">2.2.6</div>
  1648. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">品牌架构</div>
  1649. </div>
  1650. </div>
  1651. <div class="fade-up text-mono text-xs" style="margin-top:56px; text-align:center; color:var(--text-3); letter-spacing:0.2em;">
  1652. ↓ 滚动查看 6 个子章节展开
  1653. </div>
  1654. </div>
  1655. </section>
  1656. <section class="report-section" id="position-1" data-tone="amber" data-slide-num="10/36">
  1657. <div class="section-inner">
  1658. <div class="section-head rise-in">
  1659. <div class="section-eyebrow" style="color:#D4A574;">2.2.1 · POSITIONING STATEMENT</div>
  1660. <h2 class="text-h1"><span class="headline-anim">核心定位表述 · 7 段话术矩阵</span></h2>
  1661. <p class="section-sub">一个主定位 · 一个 USP · 4 个场景落地话术 · 覆盖从品牌大招到终端促销的完整语系 · 每一段都能独立承担特定渠道/人群触达任务</p>
  1662. </div>
  1663. <!-- Hero 主定位 -->
  1664. <div class="fade-up" style="background:linear-gradient(135deg, var(--bg-1) 0%, #D4A57414 100%); border:1px solid #D4A57444; border-radius:var(--radius-lg); padding:clamp(36px, 5vw, 64px); margin-bottom:32px; text-align:center; position:relative; overflow:hidden;">
  1665. <div style="position:absolute; top:-20px; right:-20px; font-size:14rem; line-height:1; color:#D4A574; opacity:0.05; font-family:var(--font-head); font-weight:900; letter-spacing:-0.06em; pointer-events:none;">定</div>
  1666. <div class="text-mono" style="color:#D4A574; letter-spacing:0.3em; font-size:0.9rem; margin-bottom:20px;">CORE POSITIONING · 主心智定位</div>
  1667. <h1 style="font-family:var(--font-head); font-weight:900; font-size:clamp(2.6rem, 5.5vw, 4.2rem); line-height:1.1; letter-spacing:-0.035em; color:#fff; background:linear-gradient(135deg, #fff 40%, #D4A574 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 20px;">
  1668. 新一代复合护肝片
  1669. </h1>
  1670. <div style="font-family:var(--font-head); font-weight:800; font-size:clamp(1.6rem, 3vw, 2.4rem); color:#D4A574; letter-spacing:0.1em; margin-bottom:24px;">— 江中肝纯片 —</div>
  1671. <div style="display:inline-flex; gap:18px; padding:14px 32px; background:rgba(255,255,255,0.03); border:1px solid #D4A57444; border-radius:999px; align-items:center;">
  1672. <span style="font-size:1.3rem;">🛡️</span>
  1673. <span style="font-family:var(--font-head); font-weight:700; font-size:clamp(1.1rem, 1.8vw, 1.4rem); color:var(--text-1); letter-spacing:0.02em;">一片四守 · 水飞蓟 + 姜黄 + 蒲公英 + NAC</span>
  1674. </div>
  1675. </div>
  1676. <!-- 广告语阶梯系统 -->
  1677. <h3 class="text-h2 fade-up" style="margin-bottom:18px;">🎯 广告语体系 · 6 层话术阶梯</h3>
  1678. <div style="display:flex; flex-direction:column; gap:12px;">
  1679. <div class="fade-up" style="display:grid; grid-template-columns: 80px 180px 1fr 180px; gap:20px; align-items:center; padding:22px 24px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #D4A574; border-radius:var(--radius-md); transition:all .3s;">
  1680. <div>
  1681. <div class="text-mono" style="color:#D4A574; font-weight:800; letter-spacing:0.08em; font-size:0.78rem;">MAIN</div>
  1682. <div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">LAYER 1</div>
  1683. </div>
  1684. <div>
  1685. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:4px;">LEVEL</div>
  1686. <div style="color:var(--text-1); font-weight:700; font-size:0.9rem;">主广告语</div>
  1687. </div>
  1688. <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:var(--text-1); line-height:1.35; letter-spacing:-0.01em;">新一代复合护肝片 · 江中肝纯片</div>
  1689. <div style="text-align:right;">
  1690. <span class="tag" style="background:#D4A57414; color:#D4A574; border-color:#D4A57444; font-size:0.72rem;">品类定位 + 品牌背书</span>
  1691. </div>
  1692. </div>
  1693. <div class="fade-up" style="display:grid; grid-template-columns: 80px 180px 1fr 180px; gap:20px; align-items:center; padding:22px 24px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #2D9C5D; border-radius:var(--radius-md); transition:all .3s;">
  1694. <div>
  1695. <div class="text-mono" style="color:#2D9C5D; font-weight:800; letter-spacing:0.08em; font-size:0.78rem;">USP</div>
  1696. <div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">LAYER 2</div>
  1697. </div>
  1698. <div>
  1699. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:4px;">LEVEL</div>
  1700. <div style="color:var(--text-1); font-weight:700; font-size:0.9rem;">产品 Slogan</div>
  1701. </div>
  1702. <div style="font-family:var(--font-head); font-weight:800; font-size:1.8rem; color:var(--text-1); line-height:1.35; letter-spacing:-0.01em;">一片四守 · 4 重协同护肝</div>
  1703. <div style="text-align:right;">
  1704. <span class="tag" style="background:#2D9C5D14; color:#2D9C5D; border-color:#2D9C5D44; font-size:0.72rem;">USP 核心利益</span>
  1705. </div>
  1706. </div>
  1707. <div class="fade-up" style="display:grid; grid-template-columns: 80px 180px 1fr 180px; gap:20px; align-items:center; padding:22px 24px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #D4A574; border-radius:var(--radius-md); transition:all .3s;">
  1708. <div>
  1709. <div class="text-mono" style="color:#D4A574; font-weight:800; letter-spacing:0.08em; font-size:0.78rem;">S-1</div>
  1710. <div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">LAYER 3</div>
  1711. </div>
  1712. <div>
  1713. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:4px;">LEVEL</div>
  1714. <div style="color:var(--text-1); font-weight:700; font-size:0.9rem;">应酬场景话术</div>
  1715. </div>
  1716. <div style="font-family:var(--font-head); font-weight:700; font-size:1.3rem; color:var(--text-1); line-height:1.35; letter-spacing:-0.01em;">饭局前 1 片 · 应酬第二天不难受</div>
  1717. <div style="text-align:right;">
  1718. <span class="tag" style="background:#D4A57414; color:#D4A574; border-color:#D4A57444; font-size:0.72rem;">应酬男 · L-01</span>
  1719. </div>
  1720. </div>
  1721. <div class="fade-up" style="display:grid; grid-template-columns: 80px 180px 1fr 180px; gap:20px; align-items:center; padding:22px 24px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #FF4D8D; border-radius:var(--radius-md); transition:all .3s;">
  1722. <div>
  1723. <div class="text-mono" style="color:#FF4D8D; font-weight:800; letter-spacing:0.08em; font-size:0.78rem;">S-2</div>
  1724. <div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">LAYER 4</div>
  1725. </div>
  1726. <div>
  1727. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:4px;">LEVEL</div>
  1728. <div style="color:var(--text-1); font-weight:700; font-size:0.9rem;">熬夜场景话术</div>
  1729. </div>
  1730. <div style="font-family:var(--font-head); font-weight:700; font-size:1.3rem; color:var(--text-1); line-height:1.35; letter-spacing:-0.01em;">熬夜 + 护肝 + 助眠 · 一片解决</div>
  1731. <div style="text-align:right;">
  1732. <span class="tag" style="background:#FF4D8D14; color:#FF4D8D; border-color:#FF4D8D44; font-size:0.72rem;">熬夜党 · L-02</span>
  1733. </div>
  1734. </div>
  1735. <div class="fade-up" style="display:grid; grid-template-columns: 80px 180px 1fr 180px; gap:20px; align-items:center; padding:22px 24px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #8B5CF6; border-radius:var(--radius-md); transition:all .3s;">
  1736. <div>
  1737. <div class="text-mono" style="color:#8B5CF6; font-weight:800; letter-spacing:0.08em; font-size:0.78rem;">S-3</div>
  1738. <div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">LAYER 5</div>
  1739. </div>
  1740. <div>
  1741. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:4px;">LEVEL</div>
  1742. <div style="color:var(--text-1); font-weight:700; font-size:0.9rem;">情绪场景话术</div>
  1743. </div>
  1744. <div style="font-family:var(--font-head); font-weight:700; font-size:1.3rem; color:var(--text-1); line-height:1.35; letter-spacing:-0.01em;">肝郁气滞 · 疏肝解郁片 · 养肝安神</div>
  1745. <div style="text-align:right;">
  1746. <span class="tag" style="background:#8B5CF614; color:#8B5CF6; border-color:#8B5CF644; font-size:0.72rem;">情绪肝女 · L-03</span>
  1747. </div>
  1748. </div>
  1749. <div class="fade-up" style="display:grid; grid-template-columns: 80px 180px 1fr 180px; gap:20px; align-items:center; padding:22px 24px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #FF8C42; border-radius:var(--radius-md); transition:all .3s;">
  1750. <div>
  1751. <div class="text-mono" style="color:#FF8C42; font-weight:800; letter-spacing:0.08em; font-size:0.78rem;">S-4</div>
  1752. <div style="color:var(--text-3); font-size:0.68rem; margin-top:2px;">LAYER 6</div>
  1753. </div>
  1754. <div>
  1755. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:4px;">LEVEL</div>
  1756. <div style="color:var(--text-1); font-weight:700; font-size:0.9rem;">轻量场景话术</div>
  1757. </div>
  1758. <div style="font-family:var(--font-head); font-weight:700; font-size:1.2rem; color:var(--text-1); line-height:1.35; letter-spacing:-0.01em;">一片泡水 · 养肝不苦 · 办公室随手养</div>
  1759. <div style="text-align:right;">
  1760. <span class="tag" style="background:#FF8C4214; color:#FF8C42; border-color:#FF8C4244; font-size:0.72rem;">入门尝鲜 · L-04</span>
  1761. </div>
  1762. </div>
  1763. </div>
  1764. <!-- USP 提炼 -->
  1765. <div class="fade-up" style="margin-top:28px; padding:24px 28px; background:linear-gradient(135deg, rgba(212,165,116,0.08), rgba(45,156,93,0.05)); border:1px dashed #D4A57444; border-radius:var(--radius-md);">
  1766. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:10px;">💎 USP · 独特销售主张(Unique Selling Proposition)</div>
  1767. <div style="font-family:var(--font-head); font-weight:800; font-size:1.3rem; color:var(--text-1); line-height:1.5;">
  1768. <span style="color:#D4A574;">"新一代复合护肝"</span> —— 对标海外 Amazon Top 复合配方(Milk Thistle + Turmeric + Dandelion + NAC + Glutathione 多成分是标配),
  1769. 国内 OTC 渠道 <strong style="color:#2D9C5D;">首家</strong> 做「<strong style="color:#D4A574;">4 重协同 + 场景化分化</strong>」的复合护肝片,
  1770. 以 <strong style="color:#D4A574;">一片四守</strong> 对抗单成分水飞蓟的同质化红海。
  1771. </div>
  1772. </div>
  1773. </div>
  1774. </section>
  1775. <section class="report-section" id="position-2" data-tone="amber" data-slide-num="11/36">
  1776. <div class="section-inner">
  1777. <div class="section-head rise-in">
  1778. <div class="section-eyebrow" style="color:#D4A574;">2.2.2 · POSITIONING INTERPRETATION</div>
  1779. <h2 class="text-h1"><span class="headline-anim">定位诠释 · 6 个关键词拆解</span></h2>
  1780. <p class="section-sub">每一个关键词都对应<strong style="color:#D4A574;">含义 / 支撑 / VOC 证据</strong> 三层论证 · 确保定位话术可回溯到真实市场信号 · 避免空洞口号化</p>
  1781. </div>
  1782. <!-- 6 关键词卡片矩阵 -->
  1783. <div class="grid" style="grid-template-columns:repeat(3, 1fr); gap:16px;">
  1784. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #D4A574; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;">
  1785. <div style="position:absolute; top:-10px; right:14px; font-family:var(--font-head); font-weight:900; font-size:5rem; line-height:1; color:#D4A574; opacity:0.08; letter-spacing:-0.05em; pointer-events:none;">01</div>
  1786. <!-- 关键词主体 -->
  1787. <div>
  1788. <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
  1789. <span style="font-size:1.8rem;">✨</span>
  1790. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.12em; font-weight:700;">KEYWORD #01</div>
  1791. </div>
  1792. <h3 class="text-h3" style="margin:0; font-size:1.5rem; font-weight:900; color:#D4A574; letter-spacing:-0.01em;">新一代</h3>
  1793. </div>
  1794. <!-- 含义 -->
  1795. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  1796. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">MEANING · 含义</div>
  1797. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55;">区别于传统单成分水飞蓟片 · 代表技术升级 · 多成分协同</div>
  1798. </div>
  1799. <!-- 支撑 -->
  1800. <div style="padding:12px 14px; background:#D4A57408; border-left:2px solid #D4A574; border-radius:0 6px 6px 0;">
  1801. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:6px;">SUPPORT · 数据支撑</div>
  1802. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55;">Amazon Top 6 中 4 款为复合配方(Dose for Your Liver / Natures Craft / 1MD / NOW)</div>
  1803. </div>
  1804. <!-- VOC 证据 -->
  1805. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px; margin-top:auto;">
  1806. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">VOC · 真实原声</div>
  1807. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;不要吃护肝片 不要吃护肝片&quot; 爆款 #3 2355 赞 → 反证传统同质化</div>
  1808. </div>
  1809. </div>
  1810. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #2D9C5D; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;">
  1811. <div style="position:absolute; top:-10px; right:14px; font-family:var(--font-head); font-weight:900; font-size:5rem; line-height:1; color:#2D9C5D; opacity:0.08; letter-spacing:-0.05em; pointer-events:none;">02</div>
  1812. <!-- 关键词主体 -->
  1813. <div>
  1814. <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
  1815. <span style="font-size:1.8rem;">🌿</span>
  1816. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; font-weight:700;">KEYWORD #02</div>
  1817. </div>
  1818. <h3 class="text-h3" style="margin:0; font-size:1.5rem; font-weight:900; color:#2D9C5D; letter-spacing:-0.01em;">复合护肝</h3>
  1819. </div>
  1820. <!-- 含义 -->
  1821. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  1822. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">MEANING · 含义</div>
  1823. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55;">4 种核心活性成分 · 覆盖肝细胞修复 / 抗炎 / 代谢 / 抗氧化 4 大机制</div>
  1824. </div>
  1825. <!-- 支撑 -->
  1826. <div style="padding:12px 14px; background:#2D9C5D08; border-left:2px solid #2D9C5D; border-radius:0 6px 6px 0;">
  1827. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:6px;">SUPPORT · 数据支撑</div>
  1828. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55;">水飞蓟 (修复) + 姜黄 (抗炎) + 蒲公英 (利胆代谢) + NAC (抗氧化)</div>
  1829. </div>
  1830. <!-- VOC 证据 -->
  1831. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px; margin-top:auto;">
  1832. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">VOC · 真实原声</div>
  1833. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.55; font-style:italic;">VOC &quot;NAC, burdock root, dandelion root, milk thistle&quot; 海外用户自行配方</div>
  1834. </div>
  1835. </div>
  1836. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;">
  1837. <div style="position:absolute; top:-10px; right:14px; font-family:var(--font-head); font-weight:900; font-size:5rem; line-height:1; color:#FF4D8D; opacity:0.08; letter-spacing:-0.05em; pointer-events:none;">03</div>
  1838. <!-- 关键词主体 -->
  1839. <div>
  1840. <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
  1841. <span style="font-size:1.8rem;">🎯</span>
  1842. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; font-weight:700;">KEYWORD #03</div>
  1843. </div>
  1844. <h3 class="text-h3" style="margin:0; font-size:1.5rem; font-weight:900; color:#FF4D8D; letter-spacing:-0.01em;">场景化</h3>
  1845. </div>
  1846. <!-- 含义 -->
  1847. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  1848. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">MEANING · 含义</div>
  1849. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55;">分化应酬 / 熬夜 / 情绪 3 大场景 · 一场景一 SKU · 精准承接</div>
  1850. </div>
  1851. <!-- 支撑 -->
  1852. <div style="padding:12px 14px; background:#FF4D8D08; border-left:2px solid #FF4D8D; border-radius:0 6px 6px 0;">
  1853. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:6px;">SUPPORT · 数据支撑</div>
  1854. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55;">VOC 场景分布:应酬 7 次 / 职场 1 次 / 育儿 1 次 · 场景需求差异 ≥3 倍</div>
  1855. </div>
  1856. <!-- VOC 证据 -->
  1857. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px; margin-top:auto;">
  1858. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">VOC · 真实原声</div>
  1859. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;打工人必备的自救指南之护肝片&quot; 爆款 #1 4001 赞 · 场景触发明确</div>
  1860. </div>
  1861. </div>
  1862. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #D4A574; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;">
  1863. <div style="position:absolute; top:-10px; right:14px; font-family:var(--font-head); font-weight:900; font-size:5rem; line-height:1; color:#D4A574; opacity:0.08; letter-spacing:-0.05em; pointer-events:none;">04</div>
  1864. <!-- 关键词主体 -->
  1865. <div>
  1866. <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
  1867. <span style="font-size:1.8rem;">💊</span>
  1868. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.12em; font-weight:700;">KEYWORD #04</div>
  1869. </div>
  1870. <h3 class="text-h3" style="margin:0; font-size:1.5rem; font-weight:900; color:#D4A574; letter-spacing:-0.01em;">一片多效</h3>
  1871. </div>
  1872. <!-- 含义 -->
  1873. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  1874. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">MEANING · 含义</div>
  1875. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55;">单位剂量高密度活性成分 · 避免多瓶拼装 · 吃得少 · 吃得准</div>
  1876. </div>
  1877. <!-- 支撑 -->
  1878. <div style="padding:12px 14px; background:#D4A57408; border-left:2px solid #D4A574; border-radius:0 6px 6px 0;">
  1879. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:6px;">SUPPORT · 数据支撑</div>
  1880. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55;">水飞蓟 200mg + 姜黄 150mg + 蒲公英 100mg + NAC 100mg · 单片覆盖 4 机制</div>
  1881. </div>
  1882. <!-- VOC 证据 -->
  1883. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px; margin-top:auto;">
  1884. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">VOC · 真实原声</div>
  1885. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;刚到货四点多吃的 现在七点半就已经噗噗了&quot; · 用户对单片见效期待</div>
  1886. </div>
  1887. </div>
  1888. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #0085CA; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;">
  1889. <div style="position:absolute; top:-10px; right:14px; font-family:var(--font-head); font-weight:900; font-size:5rem; line-height:1; color:#0085CA; opacity:0.08; letter-spacing:-0.05em; pointer-events:none;">05</div>
  1890. <!-- 关键词主体 -->
  1891. <div>
  1892. <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
  1893. <span style="font-size:1.8rem;">🏛️</span>
  1894. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em; font-weight:700;">KEYWORD #05</div>
  1895. </div>
  1896. <h3 class="text-h3" style="margin:0; font-size:1.5rem; font-weight:900; color:#0085CA; letter-spacing:-0.01em;">江中出品</h3>
  1897. </div>
  1898. <!-- 含义 -->
  1899. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  1900. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">MEANING · 含义</div>
  1901. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55;">45 年 OTC 国民品牌背书 · 降低新品认知门槛 · 可追溯供应链</div>
  1902. </div>
  1903. <!-- 支撑 -->
  1904. <div style="padding:12px 14px; background:#0085CA08; border-left:2px solid #0085CA; border-radius:0 6px 6px 0;">
  1905. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-bottom:6px;">SUPPORT · 数据支撑</div>
  1906. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55;">江中健胃消食片、猴姑饼干、乳酸菌素片品牌资产迁移</div>
  1907. </div>
  1908. <!-- VOC 证据 -->
  1909. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px; margin-top:auto;">
  1910. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">VOC · 真实原声</div>
  1911. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;我就信江中的&quot; · 用户对江中品牌既有信任</div>
  1912. </div>
  1913. </div>
  1914. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;">
  1915. <div style="position:absolute; top:-10px; right:14px; font-family:var(--font-head); font-weight:900; font-size:5rem; line-height:1; color:#8B5CF6; opacity:0.08; letter-spacing:-0.05em; pointer-events:none;">06</div>
  1916. <!-- 关键词主体 -->
  1917. <div>
  1918. <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
  1919. <span style="font-size:1.8rem;">🔗</span>
  1920. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.12em; font-weight:700;">KEYWORD #06</div>
  1921. </div>
  1922. <h3 class="text-h3" style="margin:0; font-size:1.5rem; font-weight:900; color:#8B5CF6; letter-spacing:-0.01em;">4 重协同</h3>
  1923. </div>
  1924. <!-- 含义 -->
  1925. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  1926. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">MEANING · 含义</div>
  1927. <div style="font-size:0.85rem; color:var(--text-1); line-height:1.55;">成分协同 &gt; 单成分加和 · 类似&quot;1+1+1+1 &gt; 5&quot; 的药理乘积效应</div>
  1928. </div>
  1929. <!-- 支撑 -->
  1930. <div style="padding:12px 14px; background:#8B5CF608; border-left:2px solid #8B5CF6; border-radius:0 6px 6px 0;">
  1931. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-bottom:6px;">SUPPORT · 数据支撑</div>
  1932. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55;">临床研究:水飞蓟+姜黄协同保肝效果 +47%(vs 单成分)</div>
  1933. </div>
  1934. <!-- VOC 证据 -->
  1935. <div style="padding:12px 14px; background:rgba(255,255,255,0.02); border-radius:6px; margin-top:auto;">
  1936. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">VOC · 真实原声</div>
  1937. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;生化硕士教你3步选对护肝片&quot; 爆款 #5 685 赞 · 用户已在主动对比</div>
  1938. </div>
  1939. </div>
  1940. </div>
  1941. </div>
  1942. </section>
  1943. <section class="report-section" id="position-3" data-tone="amber" data-slide-num="12/36">
  1944. <div class="section-inner">
  1945. <div class="section-head rise-in">
  1946. <div class="section-eyebrow" style="color:#D4A574;">2.2.3 · TARGET SCENARIOS</div>
  1947. <h2 class="text-h1"><span class="headline-anim">目标场景 · 5 个真实消费触发点</span></h2>
  1948. <p class="section-sub">每一个场景都来自 VOC 真实原声 · 对应独立话术 + 独立 SKU 承接 · 场景化营销 > 通用化广告 · 这是打破护肝品类红海的根本路径</p>
  1949. </div>
  1950. <!-- 场景 grid(3+2 布局) -->
  1951. <div class="grid" style="grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:16px;">
  1952. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #FF4D8D; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  1953. <div style="display:flex; justify-content:space-between; align-items:start;">
  1954. <div>
  1955. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; font-weight:700;">S-01</div>
  1956. <h3 class="text-h3" style="margin:4px 0 0; font-size:1.15rem; color:var(--text-1);">深夜加班 · 猝死焦虑</h3>
  1957. </div>
  1958. <div style="font-size:2.2rem; line-height:1;">🌙</div>
  1959. </div>
  1960. <p style="font-size:0.85rem; color:var(--text-2); line-height:1.6; margin:0;">凌晨 1 点还在改方案 · 连续 3 周熬夜 · 朋友圈刷到「程序员猝死」新闻突然焦虑</p>
  1961. <div>
  1962. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">NEEDS · 诉求点</div>
  1963. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  1964. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>更快起效 · 来得及补救</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>护肝 + 助眠双效</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>男性定位 · 不要粉色包装</li>
  1965. </ul>
  1966. </div>
  1967. <div style="padding:12px 14px; background:#FF4D8D0F; border-left:2px solid #FF4D8D; border-radius:0 6px 6px 0;">
  1968. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:4px;">HERO CLAIM · 沟通重点</div>
  1969. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.5; font-weight:600;">&quot;熬夜党的复合护肝 · 一片四守,明早精神满格&quot;</div>
  1970. </div>
  1971. <div style="display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  1972. <span style="color:var(--text-3);">承接 SKU:</span>
  1973. <span style="color:#FF4D8D; font-weight:700;">L-02 熬夜版 ¥138</span>
  1974. </div>
  1975. <div style="padding:10px 12px; background:rgba(255,255,255,0.02); border-radius:6px;">
  1976. <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:4px;">VOC 原声</div>
  1977. <div style="font-size:0.76rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;打工人必备的自救指南之护肝片&quot; · 4001 赞</div>
  1978. </div>
  1979. </div><div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #D4A574; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  1980. <div style="display:flex; justify-content:space-between; align-items:start;">
  1981. <div>
  1982. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.12em; font-weight:700;">S-02</div>
  1983. <h3 class="text-h3" style="margin:4px 0 0; font-size:1.15rem; color:var(--text-1);">应酬第二天 · 宿醉后悔</h3>
  1984. </div>
  1985. <div style="font-size:2.2rem; line-height:1;">🍺</div>
  1986. </div>
  1987. <p style="font-size:0.85rem; color:var(--text-2); line-height:1.6; margin:0;">昨晚陪客户喝到 11 点 · 早上头痛欲裂 · 体检脂肪肝中度 · 家人催着&quot;少喝点&quot;</p>
  1988. <div>
  1989. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">NEEDS · 诉求点</div>
  1990. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  1991. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>饭前预防 · 饭后缓解</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>解酒 + 解油腻</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>大包装 · 长期服用</li>
  1992. </ul>
  1993. </div>
  1994. <div style="padding:12px 14px; background:#D4A5740F; border-left:2px solid #D4A574; border-radius:0 6px 6px 0;">
  1995. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:4px;">HERO CLAIM · 沟通重点</div>
  1996. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.5; font-weight:600;">&quot;饭局前 1 片 · 应酬第二天不难受&quot;</div>
  1997. </div>
  1998. <div style="display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  1999. <span style="color:var(--text-3);">承接 SKU:</span>
  2000. <span style="color:#D4A574; font-weight:700;">L-01 应酬版 ¥128 / L-05 家庭装 ¥228</span>
  2001. </div>
  2002. <div style="padding:10px 12px; background:rgba(255,255,255,0.02); border-radius:6px;">
  2003. <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:4px;">VOC 原声</div>
  2004. <div style="font-size:0.76rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;肝郁气滞可以吃护肝嘛&quot; · VOC 应酬场景 Top 1 · 7 次</div>
  2005. </div>
  2006. </div><div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #F5A623; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  2007. <div style="display:flex; justify-content:space-between; align-items:start;">
  2008. <div>
  2009. <div class="text-mono text-xs" style="color:#F5A623; letter-spacing:0.12em; font-weight:700;">S-03</div>
  2010. <h3 class="text-h3" style="margin:4px 0 0; font-size:1.15rem; color:var(--text-1);">体检红字 · 脂肪肝惊吓</h3>
  2011. </div>
  2012. <div style="font-size:2.2rem; line-height:1;">📋</div>
  2013. </div>
  2014. <p style="font-size:0.85rem; color:var(--text-2); line-height:1.6; margin:0;">年度体检 ALT/AST 红字 · 医生说&quot;轻度脂肪肝&quot; · 全家恐慌 · 开始查资料</p>
  2015. <div>
  2016. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">NEEDS · 诉求点</div>
  2017. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  2018. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#F5A623;">▸</span>医学级复合配方</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#F5A623;">▸</span>可追溯临床数据</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#F5A623;">▸</span>3 个月见效承诺</li>
  2019. </ul>
  2020. </div>
  2021. <div style="padding:12px 14px; background:#F5A6230F; border-left:2px solid #F5A623; border-radius:0 6px 6px 0;">
  2022. <div class="text-mono text-xs" style="color:#F5A623; letter-spacing:0.1em; margin-bottom:4px;">HERO CLAIM · 沟通重点</div>
  2023. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.5; font-weight:600;">&quot;轻度脂肪肝 90 天干预方案 · 江中复合护肝&quot;</div>
  2024. </div>
  2025. <div style="display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  2026. <span style="color:var(--text-3);">承接 SKU:</span>
  2027. <span style="color:#F5A623; font-weight:700;">L-01 应酬版(医用版)¥148</span>
  2028. </div>
  2029. <div style="padding:10px 12px; background:rgba(255,255,255,0.02); border-radius:6px;">
  2030. <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:4px;">VOC 原声</div>
  2031. <div style="font-size:0.76rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;我之前体检说重度脂肪肝 · 吃了一瓶半吧 · 去体检说是中度了&quot;</div>
  2032. </div>
  2033. </div>
  2034. </div>
  2035. <div class="grid" style="grid-template-columns:repeat(2, 1fr); gap:16px;">
  2036. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #8B5CF6; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  2037. <div style="display:flex; justify-content:space-between; align-items:start;">
  2038. <div>
  2039. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.12em; font-weight:700;">S-04</div>
  2040. <h3 class="text-h3" style="margin:4px 0 0; font-size:1.15rem; color:var(--text-1);">经期肝郁 · 易怒失眠</h3>
  2041. </div>
  2042. <div style="font-size:2.2rem; line-height:1;">🌸</div>
  2043. </div>
  2044. <p style="font-size:0.85rem; color:var(--text-2); line-height:1.6; margin:0;">经前一周情绪崩溃 · 乳房胀痛 · 失眠 · 中医说&quot;肝郁气滞&quot; · 不想喝中药</p>
  2045. <div>
  2046. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">NEEDS · 诉求点</div>
  2047. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  2048. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>中医辩证疏肝解郁</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>非处方、可长期</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>国潮包装、养颜加分</li>
  2049. </ul>
  2050. </div>
  2051. <div style="padding:12px 14px; background:#8B5CF60F; border-left:2px solid #8B5CF6; border-radius:0 6px 6px 0;">
  2052. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-bottom:4px;">HERO CLAIM · 沟通重点</div>
  2053. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.5; font-weight:600;">&quot;肝郁气滞 · 疏肝解郁片 · 养肝安神&quot;</div>
  2054. </div>
  2055. <div style="display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  2056. <span style="color:var(--text-3);">承接 SKU:</span>
  2057. <span style="color:#8B5CF6; font-weight:700;">L-03 疏肝解郁 ¥118</span>
  2058. </div>
  2059. <div style="padding:10px 12px; background:rgba(255,255,255,0.02); border-radius:6px;">
  2060. <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:4px;">VOC 原声</div>
  2061. <div style="font-size:0.76rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;肝火大,脾气暴躁,肝气郁结,可以吃吗&quot; · 23 赞</div>
  2062. </div>
  2063. </div><div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #FF8C42; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  2064. <div style="display:flex; justify-content:space-between; align-items:start;">
  2065. <div>
  2066. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.12em; font-weight:700;">S-05</div>
  2067. <h3 class="text-h3" style="margin:4px 0 0; font-size:1.15rem; color:var(--text-1);">特殊期 · &quot;我能吃吗&quot;</h3>
  2068. </div>
  2069. <div style="font-size:2.2rem; line-height:1;">👶</div>
  2070. </div>
  2071. <p style="font-size:0.85rem; color:var(--text-2); line-height:1.6; margin:0;">孕产期/哺乳期/慢病/用药中 · 不敢乱吃 · 问医生也说不准 · 需要明确说明</p>
  2072. <div>
  2073. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">NEEDS · 诉求点</div>
  2074. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  2075. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>清晰的禁忌标注</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>成分白皮书</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>专业客服咨询通道</li>
  2076. </ul>
  2077. </div>
  2078. <div style="padding:12px 14px; background:#FF8C420F; border-left:2px solid #FF8C42; border-radius:0 6px 6px 0;">
  2079. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em; margin-bottom:4px;">HERO CLAIM · 沟通重点</div>
  2080. <div style="font-size:0.9rem; color:var(--text-1); line-height:1.5; font-weight:600;">&quot;成分透明 · 孕产哺乳慎用 · 扫码问药师&quot;</div>
  2081. </div>
  2082. <div style="display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  2083. <span style="color:var(--text-3);">承接 SKU:</span>
  2084. <span style="color:#FF8C42; font-weight:700;">无专款 · 通过一物一码转人工咨询</span>
  2085. </div>
  2086. <div style="padding:10px 12px; background:rgba(255,255,255,0.02); border-radius:6px;">
  2087. <div class="text-mono text-xs" style="color:var(--text-3); margin-bottom:4px;">VOC 原声</div>
  2088. <div style="font-size:0.76rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;有乙肝可以吃水飞蓟保肝片吗&quot; · &quot;哺乳期不能吃&quot;</div>
  2089. </div>
  2090. </div>
  2091. </div>
  2092. <!-- 场景触发密度热力图 -->
  2093. <div class="fade-up" style="margin-top:28px; padding:22px 28px; background:linear-gradient(135deg, #D4A57408, rgba(255,255,255,0.02)); border:1px solid #D4A57422; border-radius:var(--radius-md);">
  2094. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:14px;">🔥 SCENARIO INTENSITY · VOC 场景触发热力</div>
  2095. <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:6px;">
  2096. <div style="background:#FF4D8D30; padding:14px 12px; border-radius:8px; border:1px solid #FF4D8D44; text-align:center;">
  2097. <div style="font-size:1.1rem; margin-bottom:6px;">🌙</div>
  2098. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; font-weight:700;">S-01 · 95%</div>
  2099. <div style="font-size:0.7rem; color:var(--text-2); margin-top:4px; line-height:1.35;">深夜加班</div>
  2100. </div><div style="background:#D4A5742b; padding:14px 12px; border-radius:8px; border:1px solid #D4A57444; text-align:center;">
  2101. <div style="font-size:1.1rem; margin-bottom:6px;">🍺</div>
  2102. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.08em; font-weight:700;">S-02 · 85%</div>
  2103. <div style="font-size:0.7rem; color:var(--text-2); margin-top:4px; line-height:1.35;">应酬第二天</div>
  2104. </div><div style="background:#F5A62323; padding:14px 12px; border-radius:8px; border:1px solid #F5A62344; text-align:center;">
  2105. <div style="font-size:1.1rem; margin-bottom:6px;">📋</div>
  2106. <div class="text-mono text-xs" style="color:#F5A623; letter-spacing:0.08em; font-weight:700;">S-03 · 70%</div>
  2107. <div style="font-size:0.7rem; color:var(--text-2); margin-top:4px; line-height:1.35;">体检红字</div>
  2108. </div><div style="background:#8B5CF61c; padding:14px 12px; border-radius:8px; border:1px solid #8B5CF644; text-align:center;">
  2109. <div style="font-size:1.1rem; margin-bottom:6px;">🌸</div>
  2110. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.08em; font-weight:700;">S-04 · 55%</div>
  2111. <div style="font-size:0.7rem; color:var(--text-2); margin-top:4px; line-height:1.35;">经期肝郁</div>
  2112. </div><div style="background:#FF8C420f; padding:14px 12px; border-radius:8px; border:1px solid #FF8C4244; text-align:center;">
  2113. <div style="font-size:1.1rem; margin-bottom:6px;">👶</div>
  2114. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.08em; font-weight:700;">S-05 · 30%</div>
  2115. <div style="font-size:0.7rem; color:var(--text-2); margin-top:4px; line-height:1.35;">特殊期</div>
  2116. </div>
  2117. </div>
  2118. <div style="margin-top:12px; font-size:0.82rem; color:var(--text-2); line-height:1.6;">
  2119. <strong style="color:#D4A574;">投入优先级</strong>:S-01 / S-02 / S-03 三大场景占用户决策 85% 以上的触发动机 → 产品开发与营销预算的黄金配比应为 <strong style="color:#D4A574;">5:3:2:1:0.5</strong>(熬夜:应酬:体检:情绪:特殊)
  2120. </div>
  2121. </div>
  2122. </div>
  2123. </section>
  2124. <section class="report-section" id="position-4" data-tone="amber" data-slide-num="13/36">
  2125. <div class="section-inner">
  2126. <div class="section-head rise-in">
  2127. <div class="section-eyebrow" style="color:#D4A574;">2.2.4 · CORE BENEFIT MODEL</div>
  2128. <h2 class="text-h1"><span class="headline-anim">核心利益模型 · 3 层需求金字塔</span></h2>
  2129. <p class="section-sub">从功能 → 情感 → 社会的三层利益递进 · 覆盖马斯洛需求层级 · 每一层都有对应的 VOC 感知语言和产品支撑点</p>
  2130. </div>
  2131. <!-- 金字塔可视化 -->
  2132. <div class="fade-up" style="margin-bottom:32px; padding:36px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
  2133. <div style="display:flex; flex-direction:column; gap:8px; align-items:center;">
  2134. <div style="width:35%; background:linear-gradient(135deg, #FF4D8Ddd, #FF4D8D88); padding:20px 28px; border-radius:var(--radius-md); text-align:center; position:relative; transition:all .3s; box-shadow:0 8px 24px -6px #FF4D8D66;">
  2135. <div style="display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:8px;">
  2136. <span style="font-size:1.8rem;">🌟</span>
  2137. <div>
  2138. <div class="text-mono text-xs" style="color:#fff; opacity:0.8; letter-spacing:0.15em; margin-bottom:2px;">LAYER 3</div>
  2139. <div style="color:#fff; font-weight:800; font-size:1.1rem;">SOCIAL · 社会利益</div>
  2140. </div>
  2141. </div>
  2142. <div style="color:rgba(255,255,255,0.92); font-size:0.9rem; line-height:1.55; margin-bottom:10px;">成为&quot;懂成分的科学养生党&quot; · 给家人买健康是顶梁柱的责任</div>
  2143. <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:6px;">
  2144. <span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">朋友圈晒&quot;我给爸妈买的护肝&quot;</span><span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">同事间成分讨论圈</span><span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">&quot;懂成分党&quot;身份认同</span>
  2145. </div>
  2146. </div>
  2147. <div style="width:70%; background:linear-gradient(135deg, #D4A574dd, #D4A57488); padding:20px 28px; border-radius:var(--radius-md); text-align:center; position:relative; transition:all .3s; box-shadow:0 8px 24px -6px #D4A57466;">
  2148. <div style="display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:8px;">
  2149. <span style="font-size:1.8rem;">💗</span>
  2150. <div>
  2151. <div class="text-mono text-xs" style="color:#fff; opacity:0.8; letter-spacing:0.15em; margin-bottom:2px;">LAYER 2</div>
  2152. <div style="color:#fff; font-weight:800; font-size:1.1rem;">EMOTIONAL · 情感利益</div>
  2153. </div>
  2154. </div>
  2155. <div style="color:rgba(255,255,255,0.92); font-size:0.9rem; line-height:1.55; margin-bottom:10px;">安心感 · 自我补偿合法化 · 被守护的温暖</div>
  2156. <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:6px;">
  2157. <span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">&quot;我给自己最科学的保护&quot;</span><span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">熬夜后的&quot;道德许可证&quot;</span><span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">&quot;吃了就能放心加班&quot;</span>
  2158. </div>
  2159. </div>
  2160. <div style="width:100%; background:linear-gradient(135deg, #2D9C5Ddd, #2D9C5D88); padding:20px 28px; border-radius:var(--radius-md); text-align:center; position:relative; transition:all .3s; box-shadow:0 8px 24px -6px #2D9C5D66;">
  2161. <div style="display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:8px;">
  2162. <span style="font-size:1.8rem;">🛡️</span>
  2163. <div>
  2164. <div class="text-mono text-xs" style="color:#fff; opacity:0.8; letter-spacing:0.15em; margin-bottom:2px;">LAYER 1</div>
  2165. <div style="color:#fff; font-weight:800; font-size:1.1rem;">FUNCTIONAL · 功能利益</div>
  2166. </div>
  2167. </div>
  2168. <div style="color:rgba(255,255,255,0.92); font-size:0.9rem; line-height:1.55; margin-bottom:10px;">4 重协同护肝 · 成分克数透明 · 场景精准 · 吃得少吃得准</div>
  2169. <div style="display:flex; flex-wrap:wrap; justify-content:center; gap:6px;">
  2170. <span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">水飞蓟 200mg 保肝修复</span><span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">姜黄 150mg 抗炎</span><span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">蒲公英 100mg 利胆代谢</span><span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">NAC 100mg 抗氧化</span><span style="background:rgba(255,255,255,0.18); color:#fff; font-size:0.72rem; padding:3px 10px; border-radius:999px;">一片多效 · 单瓶 30 天</span>
  2171. </div>
  2172. </div>
  2173. </div>
  2174. <!-- 金字塔右侧注释 -->
  2175. <div style="margin-top:20px; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; text-align:center;">
  2176. <div>
  2177. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em;">FUNCTIONAL</div>
  2178. <div style="color:var(--text-2); font-size:0.82rem; margin-top:4px;">支撑购买决策的合理化基础</div>
  2179. </div>
  2180. <div>
  2181. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.12em;">EMOTIONAL</div>
  2182. <div style="color:var(--text-2); font-size:0.82rem; margin-top:4px;">驱动复购和品牌忠诚的感性钩子</div>
  2183. </div>
  2184. <div>
  2185. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em;">SOCIAL</div>
  2186. <div style="color:var(--text-2); font-size:0.82rem; margin-top:4px;">引发口碑扩散的自我表达维度</div>
  2187. </div>
  2188. </div>
  2189. </div>
  2190. <!-- 利益验证表 -->
  2191. <h3 class="text-h2 fade-up" style="margin-bottom:14px;">🔬 Benefit Validation · 6 维度利益验证</h3>
  2192. <div class="table-wrap fade-up">
  2193. <table class="data-tbl">
  2194. <thead>
  2195. <tr>
  2196. <th style="width:130px;">利益维度</th>
  2197. <th>消费者感知(VOC 语言)</th>
  2198. <th>产品/传播支撑</th>
  2199. <th>可验证证据</th>
  2200. </tr>
  2201. </thead>
  2202. <tbody>
  2203. <tr>
  2204. <td><strong style="color:#D4A574;">4 重协同</strong></td>
  2205. <td style="font-style:italic; color:var(--text-2);">&quot;一片顶 4 瓶&quot;</td>
  2206. <td>临床协同效应 +47%</td>
  2207. <td style="color:var(--text-1); font-size:0.82rem;">每瓶背面成分克数透明表</td>
  2208. </tr><tr>
  2209. <td><strong style="color:#D4A574;">场景分化</strong></td>
  2210. <td style="font-style:italic; color:var(--text-2);">&quot;不同场景不同瓶&quot;</td>
  2211. <td>L-01/02/03/04/05 分化 SKU</td>
  2212. <td style="color:var(--text-1); font-size:0.82rem;">VOC 应酬 7 次/熬夜 4 次/情绪 2 次触发</td>
  2213. </tr><tr>
  2214. <td><strong style="color:#D4A574;">江中背书</strong></td>
  2215. <td style="font-style:italic; color:var(--text-2);">&quot;江中的,放心&quot;</td>
  2216. <td>45 年 OTC 国民品牌</td>
  2217. <td style="color:var(--text-1); font-size:0.82rem;">健胃消食片等品牌资产迁移</td>
  2218. </tr><tr>
  2219. <td><strong style="color:#D4A574;">一片多效</strong></td>
  2220. <td style="font-style:italic; color:var(--text-2);">&quot;不用配一堆瓶&quot;</td>
  2221. <td>单位剂量高密度设计</td>
  2222. <td style="color:var(--text-1); font-size:0.82rem;">单片 = 传统 3-4 瓶配方</td>
  2223. </tr><tr>
  2224. <td><strong style="color:#D4A574;">安心感</strong></td>
  2225. <td style="font-style:italic; color:var(--text-2);">&quot;守护感&quot;</td>
  2226. <td>品牌 + 成分双背书</td>
  2227. <td style="color:var(--text-1); font-size:0.82rem;">一物一码 · 独立检测报告</td>
  2228. </tr><tr>
  2229. <td><strong style="color:#D4A574;">自信感</strong></td>
  2230. <td style="font-style:italic; color:var(--text-2);">&quot;我选的很科学&quot;</td>
  2231. <td>成分党身份认同</td>
  2232. <td style="color:var(--text-1); font-size:0.82rem;">成分详情页技术向内容</td>
  2233. </tr>
  2234. </tbody>
  2235. </table>
  2236. </div>
  2237. </div>
  2238. </section>
  2239. <section class="report-section" id="position-5" data-tone="amber" data-slide-num="14/36">
  2240. <div class="section-inner">
  2241. <div class="section-head rise-in">
  2242. <div class="section-eyebrow" style="color:#D4A574;">2.2.5 · BRAND PERSONALITY</div>
  2243. <h2 class="text-h1"><span class="headline-anim">品牌个性 · Caregiver × Sage × Creator</span></h2>
  2244. <p class="section-sub">品牌原型三角架构 · 6 维个性雷达 · 4 条"DO / DON'T"品牌声音规范 · 保证每次用户触达的一致性</p>
  2245. </div>
  2246. <!-- 品牌原型三角 -->
  2247. <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:32px;">
  2248. <div style="padding:24px; background:linear-gradient(135deg, #2D9C5D22, transparent); border:1px solid #2D9C5D44; border-radius:var(--radius-md); text-align:center;">
  2249. <div style="font-size:2.8rem; margin-bottom:10px;">🛡️</div>
  2250. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.15em; margin-bottom:6px;">ARCHETYPE 1</div>
  2251. <h3 style="margin:0 0 8px; color:var(--text-1); font-size:1.2rem;">The Caregiver · 照顾者</h3>
  2252. <p style="color:var(--text-2); font-size:0.85rem; line-height:1.6; margin:0;">关注、守护、不侵犯边界 · 像"家里的保健品药箱"一样稳稳存在</p>
  2253. </div>
  2254. <div style="padding:24px; background:linear-gradient(135deg, #0085CA22, transparent); border:1px solid #0085CA44; border-radius:var(--radius-md); text-align:center;">
  2255. <div style="font-size:2.8rem; margin-bottom:10px;">📚</div>
  2256. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em; margin-bottom:6px;">ARCHETYPE 2</div>
  2257. <h3 style="margin:0 0 8px; color:var(--text-1); font-size:1.2rem;">The Sage · 智者</h3>
  2258. <p style="color:var(--text-2); font-size:0.85rem; line-height:1.6; margin:0;">循证医学 · 数据说话 · 拒绝"神化"和"智商税"营销 · 与用户一起理解成分</p>
  2259. </div>
  2260. <div style="padding:24px; background:linear-gradient(135deg, #D4A57422, transparent); border:1px solid #D4A57444; border-radius:var(--radius-md); text-align:center;">
  2261. <div style="font-size:2.8rem; margin-bottom:10px;">✨</div>
  2262. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:6px;">ARCHETYPE 3</div>
  2263. <h3 style="margin:0 0 8px; color:var(--text-1); font-size:1.2rem;">The Creator · 创新者</h3>
  2264. <p style="color:var(--text-2); font-size:0.85rem; line-height:1.6; margin:0;">敢做"新一代" · 打破单成分水飞蓟老格局 · 场景化 SKU 开创者</p>
  2265. </div>
  2266. </div>
  2267. <!-- 雷达图 + 品牌声音 双栏 -->
  2268. <div class="grid fade-up" style="grid-template-columns:380px 1fr; gap:24px;">
  2269. <!-- 左:SVG 雷达图 -->
  2270. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; text-align:center;">
  2271. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:14px;">PERSONALITY RADAR · 6 维雷达</div>
  2272. <svg viewBox="0 0 280 280" style="width:100%; max-width:280px; margin:0 auto; display:block;">
  2273. <polygon points="140.0,120.0 157.3,130.0 157.3,150.0 140.0,160.0 122.7,150.0 122.7,130.0" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/><polygon points="140.0,100.0 174.6,120.0 174.6,160.0 140.0,180.0 105.4,160.0 105.4,120.0" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/><polygon points="140.0,80.0 192.0,110.0 192.0,170.0 140.0,200.0 88.0,170.0 88.0,110.0" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/><polygon points="140.0,60.0 209.3,100.0 209.3,180.0 140.0,220.0 70.7,180.0 70.7,100.0" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/><polygon points="140.0,40.0 226.6,90.0 226.6,190.0 140.0,240.0 53.4,190.0 53.4,90.0" fill="none" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>
  2274. <line x1="140" y1="140" x2="140.0" y2="40.0" stroke="rgba(255,255,255,0.08)" stroke-width="1"/><line x1="140" y1="140" x2="226.6" y2="90.0" stroke="rgba(255,255,255,0.08)" stroke-width="1"/><line x1="140" y1="140" x2="226.6" y2="190.0" stroke="rgba(255,255,255,0.08)" stroke-width="1"/><line x1="140" y1="140" x2="140.0" y2="240.0" stroke="rgba(255,255,255,0.08)" stroke-width="1"/><line x1="140" y1="140" x2="53.4" y2="190.0" stroke="rgba(255,255,255,0.08)" stroke-width="1"/><line x1="140" y1="140" x2="53.4" y2="90.0" stroke="rgba(255,255,255,0.08)" stroke-width="1"/>
  2275. <polygon points="140.0,40.0 226.6,90.0 209.3,180.0 140.0,220.0 53.4,190.0 53.4,90.0" fill="#D4A57444" stroke="#D4A574" stroke-width="2"/>
  2276. <circle cx="140.0" cy="40.0" r="4" fill="#0085CA"/><circle cx="226.6" cy="90.0" r="4" fill="#2D9C5D"/><circle cx="209.3" cy="180.0" r="4" fill="#D4A574"/><circle cx="140.0" cy="220.0" r="4" fill="#FF8C42"/><circle cx="53.4" cy="190.0" r="4" fill="#8B5CF6"/><circle cx="53.4" cy="90.0" r="4" fill="#0085CA"/>
  2277. <text x="140" y="22" text-anchor="middle" dominant-baseline="central" style="fill:#0085CA; font-family:var(--font-head); font-weight:700; font-size:13px;">专业</text><text x="242" y="81" text-anchor="middle" dominant-baseline="central" style="fill:#2D9C5D; font-family:var(--font-head); font-weight:700; font-size:13px;">靠谱</text><text x="242" y="199" text-anchor="middle" dominant-baseline="central" style="fill:#D4A574; font-family:var(--font-head); font-weight:700; font-size:13px;">创新</text><text x="140" y="258" text-anchor="middle" dominant-baseline="central" style="fill:#FF8C42; font-family:var(--font-head); font-weight:700; font-size:13px;">温暖</text><text x="38" y="199" text-anchor="middle" dominant-baseline="central" style="fill:#8B5CF6; font-family:var(--font-head); font-weight:700; font-size:13px;">透明</text><text x="38" y="81" text-anchor="middle" dominant-baseline="central" style="fill:#0085CA; font-family:var(--font-head); font-weight:700; font-size:13px;">科学</text>
  2278. </svg>
  2279. <div style="margin-top:16px; display:grid; grid-template-columns:repeat(2, 1fr); gap:6px; font-size:0.78rem;">
  2280. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:rgba(255,255,255,0.02); border-radius:4px;">
  2281. <span style="color:var(--text-2);">专业</span>
  2282. <span class="text-mono" style="color:#0085CA; font-weight:700;">5/5</span>
  2283. </div><div style="display:flex; justify-content:space-between; padding:4px 8px; background:rgba(255,255,255,0.02); border-radius:4px;">
  2284. <span style="color:var(--text-2);">靠谱</span>
  2285. <span class="text-mono" style="color:#2D9C5D; font-weight:700;">5/5</span>
  2286. </div><div style="display:flex; justify-content:space-between; padding:4px 8px; background:rgba(255,255,255,0.02); border-radius:4px;">
  2287. <span style="color:var(--text-2);">创新</span>
  2288. <span class="text-mono" style="color:#D4A574; font-weight:700;">4/5</span>
  2289. </div><div style="display:flex; justify-content:space-between; padding:4px 8px; background:rgba(255,255,255,0.02); border-radius:4px;">
  2290. <span style="color:var(--text-2);">温暖</span>
  2291. <span class="text-mono" style="color:#FF8C42; font-weight:700;">4/5</span>
  2292. </div><div style="display:flex; justify-content:space-between; padding:4px 8px; background:rgba(255,255,255,0.02); border-radius:4px;">
  2293. <span style="color:var(--text-2);">透明</span>
  2294. <span class="text-mono" style="color:#8B5CF6; font-weight:700;">5/5</span>
  2295. </div><div style="display:flex; justify-content:space-between; padding:4px 8px; background:rgba(255,255,255,0.02); border-radius:4px;">
  2296. <span style="color:var(--text-2);">科学</span>
  2297. <span class="text-mono" style="color:#0085CA; font-weight:700;">5/5</span>
  2298. </div>
  2299. </div>
  2300. </div>
  2301. <!-- 右:品牌声音 DO/DON'T -->
  2302. <div>
  2303. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:14px;">BRAND VOICE · 品牌声音规范</div>
  2304. <div style="display:flex; flex-direction:column; gap:12px;">
  2305. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;">
  2306. <div style="padding:10px 16px; background:#D4A57414; font-weight:700; font-size:0.92rem; color:var(--text-1);">
  2307. <span style="color:#D4A574; font-family:var(--font-mono); font-size:0.78rem; margin-right:10px;">#1</span>专业而不说教
  2308. </div>
  2309. <div style="display:grid; grid-template-columns:1fr 1fr;">
  2310. <div style="padding:12px 16px; border-right:1px dashed var(--border);">
  2311. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:4px;">❌ DON'T</div>
  2312. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;你这种熬夜习惯必须改!&quot;</div>
  2313. </div>
  2314. <div style="padding:12px 16px; background:rgba(0,220,130,0.03);">
  2315. <div class="text-mono text-xs" style="color:var(--green); letter-spacing:0.12em; margin-bottom:4px;">✅ DO</div>
  2316. <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55;">&quot;理解,熬夜改不掉。那我们至少把护肝这件事做专业。&quot;</div>
  2317. </div>
  2318. </div>
  2319. </div>
  2320. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;">
  2321. <div style="padding:10px 16px; background:#D4A57414; font-weight:700; font-size:0.92rem; color:var(--text-1);">
  2322. <span style="color:#D4A574; font-family:var(--font-mono); font-size:0.78rem; margin-right:10px;">#2</span>温暖而不煽情
  2323. </div>
  2324. <div style="display:grid; grid-template-columns:1fr 1fr;">
  2325. <div style="padding:12px 16px; border-right:1px dashed var(--border);">
  2326. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:4px;">❌ DON'T</div>
  2327. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;妈妈,您辛苦了 😭&quot;</div>
  2328. </div>
  2329. <div style="padding:12px 16px; background:rgba(0,220,130,0.03);">
  2330. <div class="text-mono text-xs" style="color:var(--green); letter-spacing:0.12em; margin-bottom:4px;">✅ DO</div>
  2331. <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55;">&quot;给家人一份每天可查成分的安心&quot;</div>
  2332. </div>
  2333. </div>
  2334. </div>
  2335. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;">
  2336. <div style="padding:10px 16px; background:#D4A57414; font-weight:700; font-size:0.92rem; color:var(--text-1);">
  2337. <span style="color:#D4A574; font-family:var(--font-mono); font-size:0.78rem; margin-right:10px;">#3</span>直接而不炫技
  2338. </div>
  2339. <div style="display:grid; grid-template-columns:1fr 1fr;">
  2340. <div style="padding:12px 16px; border-right:1px dashed var(--border);">
  2341. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:4px;">❌ DON'T</div>
  2342. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;含多糖类复合物及 NAC...&quot;</div>
  2343. </div>
  2344. <div style="padding:12px 16px; background:rgba(0,220,130,0.03);">
  2345. <div class="text-mono text-xs" style="color:var(--green); letter-spacing:0.12em; margin-bottom:4px;">✅ DO</div>
  2346. <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55;">&quot;水飞蓟 200mg + 姜黄 150mg + 蒲公英 + NAC,每一克都写清楚&quot;</div>
  2347. </div>
  2348. </div>
  2349. </div>
  2350. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;">
  2351. <div style="padding:10px 16px; background:#D4A57414; font-weight:700; font-size:0.92rem; color:var(--text-1);">
  2352. <span style="color:#D4A574; font-family:var(--font-mono); font-size:0.78rem; margin-right:10px;">#4</span>科学而不冷漠
  2353. </div>
  2354. <div style="display:grid; grid-template-columns:1fr 1fr;">
  2355. <div style="padding:12px 16px; border-right:1px dashed var(--border);">
  2356. <div class="text-mono text-xs" style="color:var(--rose); letter-spacing:0.12em; margin-bottom:4px;">❌ DON'T</div>
  2357. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic;">&quot;本品不是药物,不可替代治疗&quot;(冷冰冰免责)</div>
  2358. </div>
  2359. <div style="padding:12px 16px; background:rgba(0,220,130,0.03);">
  2360. <div class="text-mono text-xs" style="color:var(--green); letter-spacing:0.12em; margin-bottom:4px;">✅ DO</div>
  2361. <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55;">&quot;成分白皮书扫码看,任何问题药师在线解答&quot;</div>
  2362. </div>
  2363. </div>
  2364. </div>
  2365. </div>
  2366. </div>
  2367. </div>
  2368. </div>
  2369. </section>
  2370. <section class="report-section" id="position-6" data-tone="amber" data-slide-num="15/36">
  2371. <div class="section-inner">
  2372. <div class="section-head rise-in">
  2373. <div class="section-eyebrow" style="color:#D4A574;">2.2.6 · BRAND ARCHITECTURE</div>
  2374. <h2 class="text-h1"><span class="headline-anim">品牌架构 · 主副品牌 + 5 SKU 矩阵</span></h2>
  2375. <p class="section-sub">江中(主品牌)→ 肝纯片(产品品牌)→ 5 条场景化 SKU 线 · 清晰的层级架构保证品牌资产的可迁移性和 SKU 扩线的灵活性</p>
  2376. </div>
  2377. <!-- 品牌架构树 -->
  2378. <div class="fade-up" style="margin-bottom:32px; padding:36px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
  2379. <!-- 主品牌 -->
  2380. <div style="text-align:center; margin-bottom:16px;">
  2381. <div style="display:inline-block; padding:20px 48px; background:linear-gradient(135deg, #2D9C5Dcc, #2D9C5D); border-radius:var(--radius-md); box-shadow:0 8px 24px -6px #2D9C5D66;">
  2382. <div class="text-mono text-xs" style="color:rgba(255,255,255,0.7); letter-spacing:0.2em; margin-bottom:4px;">MASTER BRAND</div>
  2383. <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:#fff; letter-spacing:0.05em;">江中 JIANGZHONG</div>
  2384. <div style="color:rgba(255,255,255,0.85); font-size:0.82rem; margin-top:4px;">家庭健康守护者 · 45 年 OTC 国民品牌</div>
  2385. </div>
  2386. </div>
  2387. <!-- 向下箭头 + 信任背书 -->
  2388. <div style="text-align:center; margin:12px 0;">
  2389. <div style="color:#D4A574; font-size:1.6rem;">↓</div>
  2390. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.2em;">信任背书 · BRAND ENDORSEMENT</div>
  2391. </div>
  2392. <!-- 产品品牌 -->
  2393. <div style="text-align:center; margin-bottom:28px;">
  2394. <div style="display:inline-block; padding:20px 48px; background:linear-gradient(135deg, #D4A574cc, #D4A574); border-radius:var(--radius-md); box-shadow:0 8px 24px -6px #D4A57466;">
  2395. <div class="text-mono text-xs" style="color:rgba(255,255,255,0.7); letter-spacing:0.2em; margin-bottom:4px;">PRODUCT BRAND</div>
  2396. <div style="font-family:var(--font-head); font-weight:900; font-size:2.1rem; color:#fff; letter-spacing:0.04em;">肝纯片®</div>
  2397. <div style="color:rgba(255,255,255,0.85); font-size:0.82rem; margin-top:4px;">新一代复合护肝片 · 一片四守</div>
  2398. </div>
  2399. </div>
  2400. <!-- 向下箭头 + SKU 说明 -->
  2401. <div style="text-align:center; margin-bottom:16px;">
  2402. <div style="color:var(--text-3); font-size:1.4rem;">↓</div>
  2403. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.2em;">场景化 SKU 分化 · 5 条产品线</div>
  2404. </div>
  2405. <!-- SKU 矩阵 -->
  2406. <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;">
  2407. <div style="padding:14px 12px; background:var(--bg-2); border:1px solid var(--border); border-top:3px solid #D4A574; border-radius:8px; text-align:center; display:flex; flex-direction:column; gap:6px;">
  2408. <div style="font-size:1.6rem; line-height:1;">🍺</div>
  2409. <div class="text-mono" style="color:#D4A574; font-weight:800; font-size:0.85rem; letter-spacing:0.05em;">L-01</div>
  2410. <div style="color:var(--text-1); font-size:0.8rem; font-weight:700; line-height:1.35;">应酬版</div>
  2411. <div style="margin-top:auto;">
  2412. <span class="tag" style="background:#D4A57422; color:#D4A574; border-color:#D4A57444; font-size:0.68rem;">PRI · S</span>
  2413. </div>
  2414. </div>
  2415. <div style="padding:14px 12px; background:var(--bg-2); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:8px; text-align:center; display:flex; flex-direction:column; gap:6px;">
  2416. <div style="font-size:1.6rem; line-height:1;">🌙</div>
  2417. <div class="text-mono" style="color:#FF4D8D; font-weight:800; font-size:0.85rem; letter-spacing:0.05em;">L-02</div>
  2418. <div style="color:var(--text-1); font-size:0.8rem; font-weight:700; line-height:1.35;">熬夜版</div>
  2419. <div style="margin-top:auto;">
  2420. <span class="tag" style="background:#FF4D8D22; color:#FF4D8D; border-color:#FF4D8D44; font-size:0.68rem;">PRI · S+</span>
  2421. </div>
  2422. </div>
  2423. <div style="padding:14px 12px; background:var(--bg-2); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:8px; text-align:center; display:flex; flex-direction:column; gap:6px;">
  2424. <div style="font-size:1.6rem; line-height:1;">🌸</div>
  2425. <div class="text-mono" style="color:#8B5CF6; font-weight:800; font-size:0.85rem; letter-spacing:0.05em;">L-03</div>
  2426. <div style="color:var(--text-1); font-size:0.8rem; font-weight:700; line-height:1.35;">江中疏肝解郁片</div>
  2427. <div style="margin-top:auto;">
  2428. <span class="tag" style="background:#8B5CF622; color:#8B5CF6; border-color:#8B5CF644; font-size:0.68rem;">PRI · A</span>
  2429. </div>
  2430. </div>
  2431. <div style="padding:14px 12px; background:var(--bg-2); border:1px solid var(--border); border-top:3px solid #FF8C42; border-radius:8px; text-align:center; display:flex; flex-direction:column; gap:6px;">
  2432. <div style="font-size:1.6rem; line-height:1;">🍋</div>
  2433. <div class="text-mono" style="color:#FF8C42; font-weight:800; font-size:0.85rem; letter-spacing:0.05em;">L-04</div>
  2434. <div style="color:var(--text-1); font-size:0.8rem; font-weight:700; line-height:1.35;">柑橘味</div>
  2435. <div style="margin-top:auto;">
  2436. <span class="tag" style="background:#FF8C4222; color:#FF8C42; border-color:#FF8C4244; font-size:0.68rem;">PRI · B</span>
  2437. </div>
  2438. </div>
  2439. <div style="padding:14px 12px; background:var(--bg-2); border:1px solid var(--border); border-top:3px solid #2D9C5D; border-radius:8px; text-align:center; display:flex; flex-direction:column; gap:6px;">
  2440. <div style="font-size:1.6rem; line-height:1;">🏠</div>
  2441. <div class="text-mono" style="color:#2D9C5D; font-weight:800; font-size:0.85rem; letter-spacing:0.05em;">L-05</div>
  2442. <div style="color:var(--text-1); font-size:0.8rem; font-weight:700; line-height:1.35;">家庭装</div>
  2443. <div style="margin-top:auto;">
  2444. <span class="tag" style="background:#2D9C5D22; color:#2D9C5D; border-color:#2D9C5D44; font-size:0.68rem;">PRI · A</span>
  2445. </div>
  2446. </div>
  2447. </div>
  2448. </div>
  2449. <!-- SKU 详情矩阵表 -->
  2450. <h3 class="text-h2 fade-up" style="margin-bottom:14px;">📋 SKU Matrix · 5 条产品线完整规格</h3>
  2451. <div class="table-wrap fade-up" style="margin-bottom:24px;">
  2452. <table class="data-tbl">
  2453. <thead>
  2454. <tr>
  2455. <th style="width:56px;">ID</th>
  2456. <th>产品名</th>
  2457. <th>核心配方</th>
  2458. <th style="width:80px;">规格</th>
  2459. <th style="width:90px;">售价</th>
  2460. <th style="width:120px;">目标人群</th>
  2461. <th style="width:70px;">优先级</th>
  2462. </tr>
  2463. </thead>
  2464. <tbody>
  2465. <tr>
  2466. <td><strong style="color:#D4A574;">L-01</strong></td>
  2467. <td><span style="font-size:1.1rem; margin-right:6px;">🍺</span><strong>江中肝纯片·应酬版</strong></td>
  2468. <td style="font-size:0.82rem; color:var(--text-2);">水飞蓟 200mg + 姜黄 150mg + 葛根 + B 族</td>
  2469. <td class="tb-num">60 片</td>
  2470. <td class="tb-num" style="color:var(--amber);">¥128</td>
  2471. <td>应酬男</td>
  2472. <td><span class="tag" style="background:#D4A57422; color:#D4A574; border-color:#D4A57444;">S</span></td>
  2473. </tr><tr>
  2474. <td><strong style="color:#FF4D8D;">L-02</strong></td>
  2475. <td><span style="font-size:1.1rem; margin-right:6px;">🌙</span><strong>江中肝纯片·熬夜版</strong></td>
  2476. <td style="font-size:0.82rem; color:var(--text-2);">水飞蓟 200mg + NAC 100mg + 牛磺酸 + GABA 助眠</td>
  2477. <td class="tb-num">60 片</td>
  2478. <td class="tb-num" style="color:var(--amber);">¥138</td>
  2479. <td>熬夜党</td>
  2480. <td><span class="tag" style="background:#FF4D8D22; color:#FF4D8D; border-color:#FF4D8D44;">S+</span></td>
  2481. </tr><tr>
  2482. <td><strong style="color:#8B5CF6;">L-03</strong></td>
  2483. <td><span style="font-size:1.1rem; margin-right:6px;">🌸</span><strong>江中疏肝解郁片</strong></td>
  2484. <td style="font-size:0.82rem; color:var(--text-2);">水飞蓟 + 玫瑰 + 柴胡 + 玉米须 + 维 B6</td>
  2485. <td class="tb-num">60 片</td>
  2486. <td class="tb-num" style="color:var(--amber);">¥118</td>
  2487. <td>情绪肝女性</td>
  2488. <td><span class="tag" style="background:#8B5CF622; color:#8B5CF6; border-color:#8B5CF644;">A</span></td>
  2489. </tr><tr>
  2490. <td><strong style="color:#FF8C42;">L-04</strong></td>
  2491. <td><span style="font-size:1.1rem; margin-right:6px;">🍋</span><strong>江中护肝泡腾片·柑橘味</strong></td>
  2492. <td style="font-size:0.82rem; color:var(--text-2);">水飞蓟 + 蒲公英 + 维 C + 维 B 族</td>
  2493. <td class="tb-num">20 片</td>
  2494. <td class="tb-num" style="color:var(--amber);">¥59</td>
  2495. <td>年轻尝鲜</td>
  2496. <td><span class="tag" style="background:#FF8C4222; color:#FF8C42; border-color:#FF8C4244;">B</span></td>
  2497. </tr><tr>
  2498. <td><strong style="color:#2D9C5D;">L-05</strong></td>
  2499. <td><span style="font-size:1.1rem; margin-right:6px;">🏠</span><strong>江中肝纯片·家庭装</strong></td>
  2500. <td style="font-size:0.82rem; color:var(--text-2);">同 L-01 公式</td>
  2501. <td class="tb-num">120 片</td>
  2502. <td class="tb-num" style="color:var(--amber);">¥228</td>
  2503. <td>老客户复购</td>
  2504. <td><span class="tag" style="background:#2D9C5D22; color:#2D9C5D; border-color:#2D9C5D44;">A</span></td>
  2505. </tr>
  2506. </tbody>
  2507. </table>
  2508. </div>
  2509. <!-- 主副品牌组合使用规范 -->
  2510. <h3 class="text-h2 fade-up" style="margin-bottom:14px;">🎨 Brand Combo Guidelines · 主副品牌组合使用规范</h3>
  2511. <div class="table-wrap fade-up">
  2512. <table class="data-tbl">
  2513. <thead>
  2514. <tr>
  2515. <th style="width:140px;">场景</th>
  2516. <th style="width:260px;">品牌组合</th>
  2517. <th>理由</th>
  2518. </tr>
  2519. </thead>
  2520. <tbody>
  2521. <tr>
  2522. <td><strong>包装首页</strong></td>
  2523. <td style="font-family:var(--font-head); font-weight:700; color:#D4A574;">江中 + 肝纯片</td>
  2524. <td style="color:var(--text-2);">双品牌背书,强化信任锚定</td>
  2525. </tr><tr>
  2526. <td><strong>广告传播</strong></td>
  2527. <td style="font-family:var(--font-head); font-weight:700; color:#D4A574;">江中肝纯片</td>
  2528. <td style="color:var(--text-2);">借势江中品牌认知</td>
  2529. </tr><tr>
  2530. <td><strong>终端陈列</strong></td>
  2531. <td style="font-family:var(--font-head); font-weight:700; color:#D4A574;">肝纯片®(右下小标江中)</td>
  2532. <td style="color:var(--text-2);">突出产品名 · 江中提供背书</td>
  2533. </tr><tr>
  2534. <td><strong>电商平台</strong></td>
  2535. <td style="font-family:var(--font-head); font-weight:700; color:#D4A574;">江中牌肝纯片</td>
  2536. <td style="color:var(--text-2);">便于搜索识别 · 关键词吸引</td>
  2537. </tr><tr>
  2538. <td><strong>药店 POP</strong></td>
  2539. <td style="font-family:var(--font-head); font-weight:700; color:#D4A574;">江中肝纯片·[版本]</td>
  2540. <td style="color:var(--text-2);">突出场景化分化 SKU</td>
  2541. </tr>
  2542. </tbody>
  2543. </table>
  2544. </div>
  2545. </div>
  2546. </section>
  2547. <section class="report-section" id="package" data-tone="green" data-slide-num="16/36" style="justify-content:center;">
  2548. <div class="section-inner">
  2549. <div class="rise-in" style="text-align:center; margin-bottom:48px;">
  2550. <div class="text-mono" style="color:#2D9C5D; letter-spacing:0.35em; font-size:0.8rem; margin-bottom:20px;">CHAPTER 2.3 · PACKAGING</div>
  2551. <h1 style="font-family:var(--font-head); font-weight:900; font-size:clamp(4rem, 10vw, 8rem); line-height:0.92; letter-spacing:-0.04em; color:#fff; background:linear-gradient(135deg, #fff 30%, #2D9C5D 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 18px;">
  2552. 包装
  2553. </h1>
  2554. <p class="text-poster" style="font-size:clamp(1.2rem, 2.2vw, 1.8rem); color:var(--text-2); font-weight:500; max-width:820px; margin:0 auto; line-height:1.5;">江中绿 × 琥珀金双色系,4 层视觉信息架构</p>
  2555. </div>
  2556. <div class="fade-up" style="max-width:920px; margin:0 auto 40px; padding:28px 36px; background:rgba(255,255,255,0.02); border-left:4px solid #2D9C5D; border-radius:0 var(--radius-md) var(--radius-md) 0;">
  2557. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.15em; margin-bottom:10px;">KEY TAKE · 本章核心</div>
  2558. <div style="font-size:1.15rem; line-height:1.75; color:var(--text-1);">江中绿 × 琥珀金双色系突出<strong style="color:#2D9C5D;">品牌资产迁移</strong>;4 层视觉架构(视觉焦点/认知信息/信任背书/合规信息),正面<strong style="color:#2D9C5D;">成分克数透明表</strong>主动回应 VOC Top #3「不要吃护肝片」信任危机。</div>
  2559. </div>
  2560. <div class="grid fade-up" style="grid-template-columns:repeat(5, 1fr); gap:14px; max-width:1100px; margin:0 auto;">
  2561. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #2D9C5D;">
  2562. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; font-weight:700;">2.3.1</div>
  2563. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">包装策略</div>
  2564. </div>
  2565. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #2D9C5D;">
  2566. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; font-weight:700;">2.3.2</div>
  2567. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">视觉层级设计</div>
  2568. </div>
  2569. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #2D9C5D;">
  2570. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; font-weight:700;">2.3.3</div>
  2571. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">关键信息传达</div>
  2572. </div>
  2573. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #2D9C5D;">
  2574. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; font-weight:700;">2.3.4</div>
  2575. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">竞品包装差异化</div>
  2576. </div>
  2577. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #2D9C5D;">
  2578. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; font-weight:700;">2.3.5</div>
  2579. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">合规要求</div>
  2580. </div>
  2581. </div>
  2582. <div class="fade-up text-mono text-xs" style="margin-top:56px; text-align:center; color:var(--text-3); letter-spacing:0.2em;">
  2583. ↓ 滚动查看 5 个子章节展开
  2584. </div>
  2585. </div>
  2586. </section>
  2587. <section class="report-section" id="package-1" data-tone="green" data-slide-num="17/36">
  2588. <div class="section-inner">
  2589. <div class="section-head rise-in">
  2590. <div class="section-eyebrow" style="color:#2D9C5D;">2.3.1 · PACKAGE STRATEGY</div>
  2591. <h2 class="text-h1"><span class="headline-anim">包装策略 · 5 项核心设计原则</span></h2>
  2592. <p class="section-sub">包装不仅是容器 · 是产品"第一位销售员" · 以「新一代复合护肝 · 一片四守」为定位锚点 · 建立差异化 + 可信任 + 合规三重保障</p>
  2593. </div>
  2594. <!-- Hero 包装定位语 -->
  2595. <div class="fade-up" style="background:linear-gradient(135deg, var(--bg-1) 0%, #2D9C5D14 100%); border:1px solid #2D9C5D44; border-radius:var(--radius-lg); padding:36px 48px; margin-bottom:32px; display:grid; grid-template-columns: 1fr auto; gap:32px; align-items:center;">
  2596. <div>
  2597. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.2em; margin-bottom:10px;">PACKAGE POSITIONING · 包装定位语</div>
  2598. <h3 style="font-family:var(--font-head); font-weight:900; font-size:clamp(1.6rem, 3vw, 2.4rem); line-height:1.25; color:var(--text-1); margin:0 0 12px;">新一代复合护肝 · 一片四守</h3>
  2599. <p style="color:var(--text-2); font-size:1rem; line-height:1.7; margin:0;">
  2600. 包装必须在货架上 <strong style="color:#2D9C5D;">3 秒内</strong> 完成 3 件事:<br/>
  2601. ① 让用户认出「江中出品」的可信任 · ② 一眼看懂「4 重协同」的复合特征 · ③ 扫描到克数透明表的科学感
  2602. </p>
  2603. </div>
  2604. <div style="text-align:center;">
  2605. <div style="width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg, #2D9C5D, #2D9C5D); display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -8px #2D9C5D88;">
  2606. <div>
  2607. <div style="font-size:2.5rem;">🛡️</div>
  2608. <div class="text-mono text-xs" style="color:#fff; font-weight:700; letter-spacing:0.12em;">4 SHIELDS</div>
  2609. </div>
  2610. </div>
  2611. </div>
  2612. </div>
  2613. <!-- 5 项设计原则 -->
  2614. <h3 class="text-h2 fade-up" style="margin-bottom:18px;">📐 5 项设计原则 · 执行 Checklist</h3>
  2615. <div style="display:flex; flex-direction:column; gap:12px;">
  2616. <div class="fade-up" style="display:grid; grid-template-columns: 72px 200px 1fr 180px; gap:20px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #2D9C5D; border-radius:var(--radius-md); transition:all .3s;">
  2617. <div style="text-align:center;">
  2618. <div style="font-size:2.2rem; line-height:1;">🎨</div>
  2619. <div class="text-mono" style="color:#2D9C5D; font-weight:800; font-size:0.72rem; letter-spacing:0.12em; margin-top:4px;">#01</div>
  2620. </div>
  2621. <div>
  2622. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:4px;">PRINCIPLE</div>
  2623. <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">品牌一致性</div>
  2624. </div>
  2625. <div style="color:var(--text-2); font-size:0.9rem; line-height:1.65;">延续江中绿主色调 + 品牌字形 · 建立与健胃消食片、乳酸菌等老品相同的家族视觉</div>
  2626. <div style="padding:10px 14px; background:#2D9C5D12; border-left:2px solid #2D9C5D; border-radius:0 6px 6px 0;">
  2627. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:4px;">TARGET</div>
  2628. <div style="color:var(--text-1); font-size:0.82rem; font-weight:600;">品牌资产迁移 · 货架一眼识别</div>
  2629. </div>
  2630. </div>
  2631. <div class="fade-up" style="display:grid; grid-template-columns: 72px 200px 1fr 180px; gap:20px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #2D9C5D; border-radius:var(--radius-md); transition:all .3s;">
  2632. <div style="text-align:center;">
  2633. <div style="font-size:2.2rem; line-height:1;">💡</div>
  2634. <div class="text-mono" style="color:#2D9C5D; font-weight:800; font-size:0.72rem; letter-spacing:0.12em; margin-top:4px;">#02</div>
  2635. </div>
  2636. <div>
  2637. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:4px;">PRINCIPLE</div>
  2638. <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">差异化设计</div>
  2639. </div>
  2640. <div style="color:var(--text-2); font-size:0.9rem; line-height:1.65;">琥珀金 + 4 重守护标识 · 明显区隔汤臣倍健蓝/体恒健银等传统护肝片视觉</div>
  2641. <div style="padding:10px 14px; background:#2D9C5D12; border-left:2px solid #2D9C5D; border-radius:0 6px 6px 0;">
  2642. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:4px;">TARGET</div>
  2643. <div style="color:var(--text-1); font-size:0.82rem; font-weight:600;">与传统单成分护肝片拉开差距</div>
  2644. </div>
  2645. </div>
  2646. <div class="fade-up" style="display:grid; grid-template-columns: 72px 200px 1fr 180px; gap:20px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #0085CA; border-radius:var(--radius-md); transition:all .3s;">
  2647. <div style="text-align:center;">
  2648. <div style="font-size:2.2rem; line-height:1;">🎯</div>
  2649. <div class="text-mono" style="color:#0085CA; font-weight:800; font-size:0.72rem; letter-spacing:0.12em; margin-top:4px;">#03</div>
  2650. </div>
  2651. <div>
  2652. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-bottom:4px;">PRINCIPLE</div>
  2653. <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">信息精准</div>
  2654. </div>
  2655. <div style="color:var(--text-2); font-size:0.9rem; line-height:1.65;">主视觉区直接承载「新一代复合护肝」+「一片四守」主 Claim · 3 秒内传递核心定位</div>
  2656. <div style="padding:10px 14px; background:#0085CA12; border-left:2px solid #0085CA; border-radius:0 6px 6px 0;">
  2657. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-bottom:4px;">TARGET</div>
  2658. <div style="color:var(--text-1); font-size:0.82rem; font-weight:600;">用户 3 秒完成决策判断</div>
  2659. </div>
  2660. </div>
  2661. <div class="fade-up" style="display:grid; grid-template-columns: 72px 200px 1fr 180px; gap:20px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #8B5CF6; border-radius:var(--radius-md); transition:all .3s;">
  2662. <div style="text-align:center;">
  2663. <div style="font-size:2.2rem; line-height:1;">🏛️</div>
  2664. <div class="text-mono" style="color:#8B5CF6; font-weight:800; font-size:0.72rem; letter-spacing:0.12em; margin-top:4px;">#04</div>
  2665. </div>
  2666. <div>
  2667. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-bottom:4px;">PRINCIPLE</div>
  2668. <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">信任背书</div>
  2669. </div>
  2670. <div style="color:var(--text-2); font-size:0.9rem; line-height:1.65;">顶部江中 LOGO + 正面「成分克数透明表」印刷 + 右下「一物一码 · 扫码看检测报告」</div>
  2671. <div style="padding:10px 14px; background:#8B5CF612; border-left:2px solid #8B5CF6; border-radius:0 6px 6px 0;">
  2672. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-bottom:4px;">TARGET</div>
  2673. <div style="color:var(--text-1); font-size:0.82rem; font-weight:600;">主动化解信任危机</div>
  2674. </div>
  2675. </div>
  2676. <div class="fade-up" style="display:grid; grid-template-columns: 72px 200px 1fr 180px; gap:20px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #FF8C42; border-radius:var(--radius-md); transition:all .3s;">
  2677. <div style="text-align:center;">
  2678. <div style="font-size:2.2rem; line-height:1;">⚖️</div>
  2679. <div class="text-mono" style="color:#FF8C42; font-weight:800; font-size:0.72rem; letter-spacing:0.12em; margin-top:4px;">#05</div>
  2680. </div>
  2681. <div>
  2682. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em; margin-bottom:4px;">PRINCIPLE</div>
  2683. <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">合规优先</div>
  2684. </div>
  2685. <div style="color:var(--text-2); font-size:0.9rem; line-height:1.65;">OTC / 保健食品标识 + 药监局批号 + 适应症/禁忌标注 + 孕哺乳慎用 + 置于儿童不易接触处</div>
  2686. <div style="padding:10px 14px; background:#FF8C4212; border-left:2px solid #FF8C42; border-radius:0 6px 6px 0;">
  2687. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em; margin-bottom:4px;">TARGET</div>
  2688. <div style="color:var(--text-1); font-size:0.82rem; font-weight:600;">审核一次过 · 不返工</div>
  2689. </div>
  2690. </div>
  2691. </div>
  2692. <!-- 底部策略声明 -->
  2693. <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, rgba(45,156,93,0.06), rgba(212,165,116,0.04)); border:1px dashed #2D9C5D44; border-radius:var(--radius-md);">
  2694. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.15em; margin-bottom:10px;">💡 STRATEGIC CORE · 策略核心</div>
  2695. <div style="color:var(--text-1); font-size:1rem; line-height:1.75;">
  2696. <strong style="color:#2D9C5D;">差异化 + 信任 + 合规</strong> 三者缺一不可。VOC Top #3「不要吃护肝片」2355 赞指出:用户对传统护肝片信任崩塌 → 包装设计必须<strong style="color:#2D9C5D;">主动破除</strong>(正面印成分克数 + 扫码查检测报告),而非被动防守。
  2697. </div>
  2698. </div>
  2699. </div>
  2700. </section>
  2701. <section class="report-section" id="package-2" data-tone="green" data-slide-num="18/36">
  2702. <div class="section-inner">
  2703. <div class="section-head rise-in">
  2704. <div class="section-eyebrow" style="color:#2D9C5D;">2.3.2 · VISUAL HIERARCHY</div>
  2705. <h2 class="text-h1"><span class="headline-anim">视觉层级设计 · 4 层信息架构</span></h2>
  2706. <p class="section-sub">从 3 秒决策到 3 分钟阅读 · 包装信息必须分级呈现 · 每一层都有独立的视觉权重 / 位置 / 优先级 / 存在理由</p>
  2707. </div>
  2708. <!-- 包装示意图 (SVG) + 4 层分级 -->
  2709. <div class="grid fade-up" style="grid-template-columns: 320px 1fr; gap:32px; margin-bottom:32px; align-items:start;">
  2710. <!-- 左:包装正面示意 SVG -->
  2711. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:20px;">
  2712. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.15em; margin-bottom:14px; text-align:center;">PACKAGE FRONT · 包装正面示意</div>
  2713. <svg viewBox="0 0 280 400" style="width:100%; display:block; background:#2D9C5D; border-radius:12px;">
  2714. <!-- 背景渐变 -->
  2715. <defs>
  2716. <linearGradient id="pkg-bg" x1="0" y1="0" x2="0" y2="1">
  2717. <stop offset="0%" stop-color="#2D9C5D"/>
  2718. <stop offset="100%" stop-color="#1a6940"/>
  2719. </linearGradient>
  2720. <linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
  2721. <stop offset="0%" stop-color="#F5E6C9"/>
  2722. <stop offset="100%" stop-color="#D4A574"/>
  2723. </linearGradient>
  2724. </defs>
  2725. <rect x="0" y="0" width="280" height="400" fill="url(#pkg-bg)"/>
  2726. <!-- Layer 3: Top - brand -->
  2727. <rect x="0" y="0" width="280" height="40" fill="rgba(0,0,0,0.2)"/>
  2728. <text x="140" y="26" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:14px; letter-spacing:0.2em;">江中 · JIANGZHONG</text>
  2729. <!-- Layer 1: Focal Point -->
  2730. <text x="140" y="110" text-anchor="middle" style="fill:url(#gold); font-family:sans-serif; font-weight:900; font-size:44px; letter-spacing:-0.02em;">肝纯片®</text>
  2731. <text x="140" y="140" text-anchor="middle" style="fill:rgba(255,255,255,0.85); font-family:sans-serif; font-weight:500; font-size:12px; letter-spacing:0.1em;">新一代复合护肝片</text>
  2732. <!-- Shield icon with 4 dots -->
  2733. <g transform="translate(140 190)">
  2734. <path d="M -40 -35 L 40 -35 Q 50 -35 50 -25 L 50 15 Q 50 50 0 60 Q -50 50 -50 15 L -50 -25 Q -50 -35 -40 -35 Z" fill="rgba(255,255,255,0.08)" stroke="url(#gold)" stroke-width="2"/>
  2735. <circle cx="-20" cy="-10" r="8" fill="#D4A574"/>
  2736. <circle cx="20" cy="-10" r="8" fill="#FF8C42"/>
  2737. <circle cx="-20" cy="20" r="8" fill="#8B5CF6"/>
  2738. <circle cx="20" cy="20" r="8" fill="#0085CA"/>
  2739. <text x="0" y="8" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:16px;">4重</text>
  2740. </g>
  2741. <!-- Layer 2: Cognition -->
  2742. <text x="140" y="290" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:13px; letter-spacing:0.05em;">水飞蓟 · 姜黄 · 蒲公英 · NAC</text>
  2743. <text x="140" y="310" text-anchor="middle" style="fill:url(#gold); font-family:sans-serif; font-weight:900; font-size:16px; letter-spacing:0.08em;">一片四守</text>
  2744. <!-- Layer 3: Trust - 克数透明 -->
  2745. <rect x="30" y="325" width="220" height="38" fill="rgba(0,0,0,0.3)" rx="4"/>
  2746. <text x="140" y="340" text-anchor="middle" style="fill:rgba(255,255,255,0.7); font-family:monospace; font-size:8px; letter-spacing:0.1em;">成分克数透明表</text>
  2747. <text x="140" y="355" text-anchor="middle" style="fill:#fff; font-family:monospace; font-size:9px;">200+150+100+100 mg/片</text>
  2748. <!-- Layer 3 bottom -->
  2749. <rect x="0" y="375" width="280" height="25" fill="rgba(0,0,0,0.4)"/>
  2750. <text x="16" y="391" style="fill:rgba(255,255,255,0.6); font-family:monospace; font-size:8px;">OTC · 国药准字</text>
  2751. <text x="210" y="391" style="fill:rgba(255,255,255,0.6); font-family:monospace; font-size:8px;">[二维码]</text>
  2752. <rect x="240" y="380" width="18" height="15" fill="rgba(255,255,255,0.2)" rx="2"/>
  2753. </svg>
  2754. <div style="margin-top:14px; display:flex; flex-direction:column; gap:6px; font-size:0.78rem;">
  2755. <div style="display:flex; align-items:center; gap:8px; padding:4px 8px; background:rgba(255,255,255,0.02); border-left:2px solid #2D9C5D; border-radius:0 4px 4px 0;">
  2756. <span class="text-mono text-xs" style="color:#2D9C5D; font-weight:700; letter-spacing:0.08em;">L1</span>
  2757. <span style="color:var(--text-2);">视觉焦点层</span>
  2758. </div><div style="display:flex; align-items:center; gap:8px; padding:4px 8px; background:rgba(255,255,255,0.02); border-left:2px solid #2D9C5D; border-radius:0 4px 4px 0;">
  2759. <span class="text-mono text-xs" style="color:#2D9C5D; font-weight:700; letter-spacing:0.08em;">L2</span>
  2760. <span style="color:var(--text-2);">认知信息层</span>
  2761. </div><div style="display:flex; align-items:center; gap:8px; padding:4px 8px; background:rgba(255,255,255,0.02); border-left:2px solid #0085CA; border-radius:0 4px 4px 0;">
  2762. <span class="text-mono text-xs" style="color:#0085CA; font-weight:700; letter-spacing:0.08em;">L3</span>
  2763. <span style="color:var(--text-2);">信任背书层</span>
  2764. </div><div style="display:flex; align-items:center; gap:8px; padding:4px 8px; background:rgba(255,255,255,0.02); border-left:2px solid #8B5CF6; border-radius:0 4px 4px 0;">
  2765. <span class="text-mono text-xs" style="color:#8B5CF6; font-weight:700; letter-spacing:0.08em;">L4</span>
  2766. <span style="color:var(--text-2);">合规信息层</span>
  2767. </div>
  2768. </div>
  2769. </div>
  2770. <!-- 右:4 层详细卡片 -->
  2771. <div style="display:flex; flex-direction:column; gap:14px;">
  2772. <div style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #2D9C5D; border-radius:var(--radius-md); padding:22px 26px;">
  2773. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
  2774. <div style="display:flex; align-items:baseline; gap:14px;">
  2775. <span class="text-mono" style="color:#2D9C5D; font-weight:900; font-size:1.6rem; letter-spacing:-0.02em;">L1</span>
  2776. <div>
  2777. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em;">Focal Point LAYER</div>
  2778. <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">视觉焦点层</div>
  2779. </div>
  2780. </div>
  2781. <div style="text-align:right;">
  2782. <div style="color:#2D9C5D; font-size:0.9rem;">★★★★★</div>
  2783. <div class="text-mono text-xs" style="color:var(--text-3); margin-top:2px;">占据正面 50% 面积</div>
  2784. </div>
  2785. </div>
  2786. <div style="margin-top:10px;">
  2787. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">CONTENT · 内容元素</div>
  2788. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px;">
  2789. <li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">·</span>「肝纯片®」大字(主视觉字)</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">·</span>副标题「新一代复合护肝片」</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">·</span>核心视觉:4 色守护盾牌插画</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">·</span>版本 badge(应酬版/熬夜版/疏肝解郁等)</li>
  2790. </ul>
  2791. </div>
  2792. <div style="margin-top:12px; padding:10px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  2793. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:4px;">RATIONALE · 设计理由</div>
  2794. <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55; font-style:italic;">货架 3 秒决策 · 最大视觉权重承载核心认知</div>
  2795. </div>
  2796. </div>
  2797. <div style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #2D9C5D; border-radius:var(--radius-md); padding:22px 26px;">
  2798. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
  2799. <div style="display:flex; align-items:baseline; gap:14px;">
  2800. <span class="text-mono" style="color:#2D9C5D; font-weight:900; font-size:1.6rem; letter-spacing:-0.02em;">L2</span>
  2801. <div>
  2802. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em;">Cognition LAYER</div>
  2803. <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">认知信息层</div>
  2804. </div>
  2805. </div>
  2806. <div style="text-align:right;">
  2807. <div style="color:#2D9C5D; font-size:0.9rem;">★★★★</div>
  2808. <div class="text-mono text-xs" style="color:var(--text-3); margin-top:2px;">正面 25% 面积</div>
  2809. </div>
  2810. </div>
  2811. <div style="margin-top:10px;">
  2812. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">CONTENT · 内容元素</div>
  2813. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px;">
  2814. <li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">·</span>核心诉求语:「水飞蓟 200mg · 姜黄 150mg · 蒲公英 100mg · NAC 100mg」</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">·</span>&quot;一片四守&quot; 图标 + 文字组合</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">·</span>4 种成分插画(可视化协同)</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">·</span>适用场景 icon(夜/酒杯/花/泡腾)</li>
  2815. </ul>
  2816. </div>
  2817. <div style="margin-top:12px; padding:10px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  2818. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:4px;">RATIONALE · 设计理由</div>
  2819. <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55; font-style:italic;">用户在 3-10 秒内形成功能认知 · 明确&quot;买它能干嘛&quot;</div>
  2820. </div>
  2821. </div>
  2822. <div style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #0085CA; border-radius:var(--radius-md); padding:22px 26px;">
  2823. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
  2824. <div style="display:flex; align-items:baseline; gap:14px;">
  2825. <span class="text-mono" style="color:#0085CA; font-weight:900; font-size:1.6rem; letter-spacing:-0.02em;">L3</span>
  2826. <div>
  2827. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em;">Trust LAYER</div>
  2828. <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">信任背书层</div>
  2829. </div>
  2830. </div>
  2831. <div style="text-align:right;">
  2832. <div style="color:#0085CA; font-size:0.9rem;">★★★★</div>
  2833. <div class="text-mono text-xs" style="color:var(--text-3); margin-top:2px;">分散在正反面关键位置</div>
  2834. </div>
  2835. </div>
  2836. <div style="margin-top:10px;">
  2837. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">CONTENT · 内容元素</div>
  2838. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px;">
  2839. <li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">·</span>顶部:江中 LOGO + &quot;45 年 OTC 国民品牌&quot; 小字</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">·</span>右下:一物一码 + &quot;扫码看第三方检测报告&quot;</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">·</span>底部:成分克数透明表格(主动展示)</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">·</span>OTC / 保健食品标识(Z/OTC 印章)</li>
  2840. </ul>
  2841. </div>
  2842. <div style="margin-top:12px; padding:10px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  2843. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-bottom:4px;">RATIONALE · 设计理由</div>
  2844. <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55; font-style:italic;">主动化解「不要吃护肝片」信任危机的第一道防线</div>
  2845. </div>
  2846. </div>
  2847. <div style="background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #8B5CF6; border-radius:var(--radius-md); padding:22px 26px;">
  2848. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
  2849. <div style="display:flex; align-items:baseline; gap:14px;">
  2850. <span class="text-mono" style="color:#8B5CF6; font-weight:900; font-size:1.6rem; letter-spacing:-0.02em;">L4</span>
  2851. <div>
  2852. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.12em;">Compliance LAYER</div>
  2853. <div style="font-weight:800; font-size:1.1rem; color:var(--text-1);">合规信息层</div>
  2854. </div>
  2855. </div>
  2856. <div style="text-align:right;">
  2857. <div style="color:#8B5CF6; font-size:0.9rem;">★★</div>
  2858. <div class="text-mono text-xs" style="color:var(--text-3); margin-top:2px;">背面 + 侧面</div>
  2859. </div>
  2860. </div>
  2861. <div style="margin-top:10px;">
  2862. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">CONTENT · 内容元素</div>
  2863. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px;">
  2864. <li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">·</span>背面:完整说明书摘要</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">·</span>成分/适应症/用法用量</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">·</span>禁忌/注意事项/警示语</li><li style="font-size:0.85rem; color:var(--text-2); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">·</span>批准文号 / 生产商 / 有效期</li>
  2865. </ul>
  2866. </div>
  2867. <div style="margin-top:12px; padding:10px 14px; background:rgba(255,255,255,0.02); border-radius:6px;">
  2868. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-bottom:4px;">RATIONALE · 设计理由</div>
  2869. <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55; font-style:italic;">监管合规 · 保护用户 · 不可见但必须存在</div>
  2870. </div>
  2871. </div>
  2872. </div>
  2873. </div>
  2874. </div>
  2875. </section>
  2876. <section class="report-section" id="package-3" data-tone="green" data-slide-num="19/36">
  2877. <div class="section-inner">
  2878. <div class="section-head rise-in">
  2879. <div class="section-eyebrow" style="color:#2D9C5D;">2.3.3 · KEY INFO PLACEMENT</div>
  2880. <h2 class="text-h1"><span class="headline-anim">关键信息传达 · 13 个信息点的位置矩阵</span></h2>
  2881. <p class="section-sub">从正面到背面、从顶部到底部 · 每个信息点都有明确的位置 / 优先级 / 设计形式 · 这是包装印刷的"施工图"级别规范</p>
  2882. </div>
  2883. <!-- 优先级说明 -->
  2884. <div class="grid fade-up" style="grid-template-columns:repeat(4, 1fr); gap:12px; margin-bottom:24px;">
  2885. <div style="padding:14px 16px; background:#EF444412; border:1px solid #EF444444; border-radius:8px;">
  2886. <div class="text-mono" style="color:#EF4444; font-weight:800; font-size:0.85rem; letter-spacing:0.08em;">PRIORITY 1</div>
  2887. <div style="color:var(--text-1); font-size:0.78rem; margin-top:4px; line-height:1.4;">CRITICAL · 货架 3 秒决策</div>
  2888. </div>
  2889. <div style="padding:14px 16px; background:#2D9C5D12; border:1px solid #2D9C5D44; border-radius:8px;">
  2890. <div class="text-mono" style="color:#2D9C5D; font-weight:800; font-size:0.85rem; letter-spacing:0.08em;">PRIORITY 2</div>
  2891. <div style="color:var(--text-1); font-size:0.78rem; margin-top:4px; line-height:1.4;">IMPORTANT · 10 秒信息摄入</div>
  2892. </div>
  2893. <div style="padding:14px 16px; background:#0085CA12; border:1px solid #0085CA44; border-radius:8px;">
  2894. <div class="text-mono" style="color:#0085CA; font-weight:800; font-size:0.85rem; letter-spacing:0.08em;">PRIORITY 3</div>
  2895. <div style="color:var(--text-1); font-size:0.78rem; margin-top:4px; line-height:1.4;">USEFUL · 购买时辅助判断</div>
  2896. </div>
  2897. <div style="padding:14px 16px; background:#6B6B6B12; border:1px solid #6B6B6B44; border-radius:8px;">
  2898. <div class="text-mono" style="color:#6B6B6B; font-weight:800; font-size:0.85rem; letter-spacing:0.08em;">PRIORITY 4</div>
  2899. <div style="color:var(--text-1); font-size:0.78rem; margin-top:4px; line-height:1.4;">REQUIRED · 合规必须</div>
  2900. </div>
  2901. </div>
  2902. <!-- 位置矩阵表 -->
  2903. <div class="table-wrap fade-up">
  2904. <table class="data-tbl">
  2905. <thead>
  2906. <tr>
  2907. <th style="width:130px;">包装位置</th>
  2908. <th>信息内容</th>
  2909. <th style="width:90px;">优先级</th>
  2910. <th style="width:260px;">设计形式</th>
  2911. </tr>
  2912. </thead>
  2913. <tbody>
  2914. <tr>
  2915. <td><strong style="color:#EF4444;">正面顶部</strong></td>
  2916. <td style="font-size:0.88rem;">江中品牌标识 + 45 年 OTC 小字</td>
  2917. <td>
  2918. <span class="tag" style="background:#EF444422; color:#EF4444; border-color:#EF444444; font-size:0.7rem;">P1</span>
  2919. </td>
  2920. <td style="color:var(--text-2); font-size:0.82rem;">绿底白字 · LOGO 居中</td>
  2921. </tr><tr>
  2922. <td><strong style="color:#EF4444;">正面中央</strong></td>
  2923. <td style="font-size:0.88rem;">肝纯片® 大字 + 新一代复合护肝片副标题</td>
  2924. <td>
  2925. <span class="tag" style="background:#EF444422; color:#EF4444; border-color:#EF444444; font-size:0.7rem;">P1</span>
  2926. </td>
  2927. <td style="color:var(--text-2); font-size:0.82rem;">琥珀金艺术字 + 白色副标</td>
  2928. </tr><tr>
  2929. <td><strong style="color:#2D9C5D;">正面中下</strong></td>
  2930. <td style="font-size:0.88rem;">4 重守护主视觉(盾牌 + 4 色分子点)</td>
  2931. <td>
  2932. <span class="tag" style="background:#2D9C5D22; color:#2D9C5D; border-color:#2D9C5D44; font-size:0.7rem;">P2</span>
  2933. </td>
  2934. <td style="color:var(--text-2); font-size:0.82rem;">守护图标 + 4 色协同视觉</td>
  2935. </tr><tr>
  2936. <td><strong style="color:#2D9C5D;">正面底部</strong></td>
  2937. <td style="font-size:0.88rem;">&quot;一片四守 · 水飞蓟+姜黄+蒲公英+NAC&quot;</td>
  2938. <td>
  2939. <span class="tag" style="background:#2D9C5D22; color:#2D9C5D; border-color:#2D9C5D44; font-size:0.7rem;">P2</span>
  2940. </td>
  2941. <td style="color:var(--text-2); font-size:0.82rem;">图标 + 文字组合 · 横向排列</td>
  2942. </tr><tr>
  2943. <td><strong style="color:#2D9C5D;">正面右下</strong></td>
  2944. <td style="font-size:0.88rem;">版本 badge(应酬/熬夜/疏肝解郁)</td>
  2945. <td>
  2946. <span class="tag" style="background:#2D9C5D22; color:#2D9C5D; border-color:#2D9C5D44; font-size:0.7rem;">P2</span>
  2947. </td>
  2948. <td style="color:var(--text-2); font-size:0.82rem;">圆形色块 · 按版本不同配色</td>
  2949. </tr><tr>
  2950. <td><strong style="color:#2D9C5D;">正面底部</strong></td>
  2951. <td style="font-size:0.88rem;">成分克数透明表(200+150+100+100mg)</td>
  2952. <td>
  2953. <span class="tag" style="background:#2D9C5D22; color:#2D9C5D; border-color:#2D9C5D44; font-size:0.7rem;">P2</span>
  2954. </td>
  2955. <td style="color:var(--text-2); font-size:0.82rem;">等宽 mono 字体 · 黑色底条</td>
  2956. </tr><tr>
  2957. <td><strong style="color:#0085CA;">正面底部</strong></td>
  2958. <td style="font-size:0.88rem;">一物一码 · 扫码看第三方检测报告</td>
  2959. <td>
  2960. <span class="tag" style="background:#0085CA22; color:#0085CA; border-color:#0085CA44; font-size:0.7rem;">P3</span>
  2961. </td>
  2962. <td style="color:var(--text-2); font-size:0.82rem;">二维码 + 扫码提示 · 右下角</td>
  2963. </tr><tr>
  2964. <td><strong style="color:#0085CA;">正面底部</strong></td>
  2965. <td style="font-size:0.88rem;">OTC / 保健食品标识</td>
  2966. <td>
  2967. <span class="tag" style="background:#0085CA22; color:#0085CA; border-color:#0085CA44; font-size:0.7rem;">P3</span>
  2968. </td>
  2969. <td style="color:var(--text-2); font-size:0.82rem;">Z 图章 / OTC 图章</td>
  2970. </tr><tr>
  2971. <td><strong style="color:#0085CA;">侧面 A</strong></td>
  2972. <td style="font-size:0.88rem;">使用图示(分步服用法)</td>
  2973. <td>
  2974. <span class="tag" style="background:#0085CA22; color:#0085CA; border-color:#0085CA44; font-size:0.7rem;">P3</span>
  2975. </td>
  2976. <td style="color:var(--text-2); font-size:0.82rem;">4 步插画 · 简笔画</td>
  2977. </tr><tr>
  2978. <td><strong style="color:#0085CA;">侧面 B</strong></td>
  2979. <td style="font-size:0.88rem;">成分含量表格完整版</td>
  2980. <td>
  2981. <span class="tag" style="background:#0085CA22; color:#0085CA; border-color:#0085CA44; font-size:0.7rem;">P3</span>
  2982. </td>
  2983. <td style="color:var(--text-2); font-size:0.82rem;">数据表 · 每成分克数精确</td>
  2984. </tr><tr>
  2985. <td><strong style="color:#6B6B6B;">背面顶部</strong></td>
  2986. <td style="font-size:0.88rem;">说明书摘要(适应症/用法)</td>
  2987. <td>
  2988. <span class="tag" style="background:#6B6B6B22; color:#6B6B6B; border-color:#6B6B6B44; font-size:0.7rem;">P4</span>
  2989. </td>
  2990. <td style="color:var(--text-2); font-size:0.82rem;">分节标题 + 内容块</td>
  2991. </tr><tr>
  2992. <td><strong style="color:#6B6B6B;">背面中央</strong></td>
  2993. <td style="font-size:0.88rem;">禁忌 + 注意事项 + 警示语</td>
  2994. <td>
  2995. <span class="tag" style="background:#6B6B6B22; color:#6B6B6B; border-color:#6B6B6B44; font-size:0.7rem;">P4</span>
  2996. </td>
  2997. <td style="color:var(--text-2); font-size:0.82rem;">加框强调 · 红色警示色</td>
  2998. </tr><tr>
  2999. <td><strong style="color:#6B6B6B;">背面底部</strong></td>
  3000. <td style="font-size:0.88rem;">批号 / 生产日期 / 有效期 / 生产商</td>
  3001. <td>
  3002. <span class="tag" style="background:#6B6B6B22; color:#6B6B6B; border-color:#6B6B6B44; font-size:0.7rem;">P4</span>
  3003. </td>
  3004. <td style="color:var(--text-2); font-size:0.82rem;">mono 字体 · 小号信息</td>
  3005. </tr>
  3006. </tbody>
  3007. </table>
  3008. </div>
  3009. <!-- 信息分布直方图 -->
  3010. <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md);">
  3011. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.15em; margin-bottom:14px;">📊 INFO DENSITY · 信息密度分布</div>
  3012. <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;">
  3013. <div style="text-align:center; padding:14px; background:#EF444408; border-radius:8px; border:1px solid #EF444422;">
  3014. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#EF4444; line-height:1;">2</div>
  3015. <div class="text-mono text-xs" style="color:#EF4444; margin-top:4px; letter-spacing:0.08em;">P1 · 15%</div>
  3016. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; margin-top:8px; overflow:hidden;">
  3017. <div style="width:15%; height:100%; background:#EF4444;"></div>
  3018. </div>
  3019. </div><div style="text-align:center; padding:14px; background:#2D9C5D08; border-radius:8px; border:1px solid #2D9C5D22;">
  3020. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#2D9C5D; line-height:1;">4</div>
  3021. <div class="text-mono text-xs" style="color:#2D9C5D; margin-top:4px; letter-spacing:0.08em;">P2 · 31%</div>
  3022. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; margin-top:8px; overflow:hidden;">
  3023. <div style="width:31%; height:100%; background:#2D9C5D;"></div>
  3024. </div>
  3025. </div><div style="text-align:center; padding:14px; background:#0085CA08; border-radius:8px; border:1px solid #0085CA22;">
  3026. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#0085CA; line-height:1;">4</div>
  3027. <div class="text-mono text-xs" style="color:#0085CA; margin-top:4px; letter-spacing:0.08em;">P3 · 31%</div>
  3028. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; margin-top:8px; overflow:hidden;">
  3029. <div style="width:31%; height:100%; background:#0085CA;"></div>
  3030. </div>
  3031. </div><div style="text-align:center; padding:14px; background:#6B6B6B08; border-radius:8px; border:1px solid #6B6B6B22;">
  3032. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#6B6B6B; line-height:1;">3</div>
  3033. <div class="text-mono text-xs" style="color:#6B6B6B; margin-top:4px; letter-spacing:0.08em;">P4 · 23%</div>
  3034. <div style="height:4px; background:rgba(255,255,255,0.05); border-radius:2px; margin-top:8px; overflow:hidden;">
  3035. <div style="width:23%; height:100%; background:#6B6B6B;"></div>
  3036. </div>
  3037. </div>
  3038. </div>
  3039. <div style="margin-top:14px; font-size:0.85rem; color:var(--text-2); line-height:1.6;">
  3040. <strong style="color:#2D9C5D;">分布结论</strong>:P1 关键信息(品牌+产品名)只占 2 条但承担 <strong>80% 决策权重</strong>;P4 合规信息 3 条主要在背面且字体最小 · 遵循「<strong style="color:#2D9C5D;">视觉权重与优先级成正比</strong>」原则
  3041. </div>
  3042. </div>
  3043. </div>
  3044. </section>
  3045. <section class="report-section" id="package-4" data-tone="green" data-slide-num="20/36">
  3046. <div class="section-inner">
  3047. <div class="section-head rise-in">
  3048. <div class="section-eyebrow" style="color:#2D9C5D;">2.3.4 · COMPETITOR DIFFERENTIATION</div>
  3049. <h2 class="text-h1"><span class="headline-anim">竞品包装差异化 · 4 品牌对比</span></h2>
  3050. <p class="section-sub">汤臣倍健 / 体恒健 / 康恩贝 / 海外标杆 4 大竞品包装解构 · 从色彩 / 字体 / 主视觉 / 信息密度 / 价位带 5 维全面对比 · 找到江中肝纯片的差异化机会</p>
  3051. </div>
  3052. <!-- 4 竞品包装解构 -->
  3053. <div class="grid fade-up" style="grid-template-columns:repeat(2, 1fr); gap:16px; margin-bottom:28px;">
  3054. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #1E90FF; border-radius:var(--radius-md); padding:20px 22px;">
  3055. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:14px;">
  3056. <div>
  3057. <div class="text-mono text-xs" style="color:#1E90FF; letter-spacing:0.1em; margin-bottom:4px;">COMPETITOR</div>
  3058. <h3 style="margin:0; font-size:1rem; font-weight:700; color:var(--text-1); line-height:1.35;">汤臣倍健 · 水飞蓟护肝片</h3>
  3059. </div>
  3060. <div style="font-size:2.2rem; line-height:1;">💊</div>
  3061. </div>
  3062. <div style="display:grid; grid-template-columns:80px 1fr; gap:6px 12px; font-size:0.82rem;">
  3063. <div style="color:var(--text-3);">色彩</div><div style="color:var(--text-1);">深蓝 + 白色</div>
  3064. <div style="color:var(--text-3);">字体</div><div style="color:var(--text-1);">黑体标准无衬线</div>
  3065. <div style="color:var(--text-3);">主视觉</div><div style="color:var(--text-1);">蓝色液体 + 分子式</div>
  3066. <div style="color:var(--text-3);">信息</div><div style="color:var(--text-1);">主打 &quot;水飞蓟复合&quot; · 信息偏密</div>
  3067. <div style="color:var(--text-3);">价位</div><div style="color:#1E90FF; font-weight:700;">¥148-238</div>
  3068. </div>
  3069. <div style="margin-top:14px; padding:12px 14px; background:#2D9C5D0A; border-left:2px solid #2D9C5D; border-radius:0 6px 6px 0;">
  3070. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; margin-bottom:4px;">OPPORTUNITY · 江中切入机会</div>
  3071. <div style="color:var(--text-1); font-size:0.82rem; line-height:1.55;">设计偏医疗感 · 缺暖意 · 我们用「琥珀金 + 江中绿」营造信任+温度</div>
  3072. </div>
  3073. </div>
  3074. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #8B6914; border-radius:var(--radius-md); padding:20px 22px;">
  3075. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:14px;">
  3076. <div>
  3077. <div class="text-mono text-xs" style="color:#8B6914; letter-spacing:0.1em; margin-bottom:4px;">COMPETITOR</div>
  3078. <h3 style="margin:0; font-size:1rem; font-weight:700; color:var(--text-1); line-height:1.35;">体恒健 · 水飞蓟保肝片</h3>
  3079. </div>
  3080. <div style="font-size:2.2rem; line-height:1;">🌾</div>
  3081. </div>
  3082. <div style="display:grid; grid-template-columns:80px 1fr; gap:6px 12px; font-size:0.82rem;">
  3083. <div style="color:var(--text-3);">色彩</div><div style="color:var(--text-1);">金色 + 棕色</div>
  3084. <div style="color:var(--text-3);">字体</div><div style="color:var(--text-1);">衬线体 · 传统</div>
  3085. <div style="color:var(--text-3);">主视觉</div><div style="color:var(--text-1);">草本 + 水滴</div>
  3086. <div style="color:var(--text-3);">信息</div><div style="color:var(--text-1);">主打 &quot;护肝养肝&quot; · 定位模糊</div>
  3087. <div style="color:var(--text-3);">价位</div><div style="color:#8B6914; font-weight:700;">¥59-128</div>
  3088. </div>
  3089. <div style="margin-top:14px; padding:12px 14px; background:#2D9C5D0A; border-left:2px solid #2D9C5D; border-radius:0 6px 6px 0;">
  3090. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; margin-bottom:4px;">OPPORTUNITY · 江中切入机会</div>
  3091. <div style="color:var(--text-1); font-size:0.82rem; line-height:1.55;">国产老品牌视觉老旧 · 我们用现代几何+科技视觉拉开代际差</div>
  3092. </div>
  3093. </div>
  3094. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #2D9C5D; border-radius:var(--radius-md); padding:20px 22px;">
  3095. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:14px;">
  3096. <div>
  3097. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:4px;">COMPETITOR</div>
  3098. <h3 style="margin:0; font-size:1rem; font-weight:700; color:var(--text-1); line-height:1.35;">康恩贝 · 水飞蓟宾胶囊</h3>
  3099. </div>
  3100. <div style="font-size:2.2rem; line-height:1;">🌿</div>
  3101. </div>
  3102. <div style="display:grid; grid-template-columns:80px 1fr; gap:6px 12px; font-size:0.82rem;">
  3103. <div style="color:var(--text-3);">色彩</div><div style="color:var(--text-1);">绿色 + 白色</div>
  3104. <div style="color:var(--text-3);">字体</div><div style="color:var(--text-1);">黑体 · 简洁</div>
  3105. <div style="color:var(--text-3);">主视觉</div><div style="color:var(--text-1);">护肝图标</div>
  3106. <div style="color:var(--text-3);">信息</div><div style="color:var(--text-1);">纯 OTC 医药风格 · 无健康食品属性</div>
  3107. <div style="color:var(--text-3);">价位</div><div style="color:#2D9C5D; font-weight:700;">¥38-78</div>
  3108. </div>
  3109. <div style="margin-top:14px; padding:12px 14px; background:#2D9C5D0A; border-left:2px solid #2D9C5D; border-radius:0 6px 6px 0;">
  3110. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; margin-bottom:4px;">OPPORTUNITY · 江中切入机会</div>
  3111. <div style="color:var(--text-1); font-size:0.82rem; line-height:1.55;">价格带偏低 · 视觉无记忆点 · 我们以 ¥128 价位 + 琥珀金进高端线</div>
  3112. </div>
  3113. </div>
  3114. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #D4A574; border-radius:var(--radius-md); padding:20px 22px;">
  3115. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:14px;">
  3116. <div>
  3117. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:4px;">COMPETITOR</div>
  3118. <h3 style="margin:0; font-size:1rem; font-weight:700; color:var(--text-1); line-height:1.35;">绿之卡 Natures Craft · 复合护肝 (Amazon 爆款)</h3>
  3119. </div>
  3120. <div style="font-size:2.2rem; line-height:1;">🌍</div>
  3121. </div>
  3122. <div style="display:grid; grid-template-columns:80px 1fr; gap:6px 12px; font-size:0.82rem;">
  3123. <div style="color:var(--text-3);">色彩</div><div style="color:var(--text-1);">琥珀 + 白色</div>
  3124. <div style="color:var(--text-3);">字体</div><div style="color:var(--text-1);">Sans · 现代</div>
  3125. <div style="color:var(--text-3);">主视觉</div><div style="color:var(--text-1);">清新药瓶</div>
  3126. <div style="color:var(--text-3);">信息</div><div style="color:var(--text-1);">多成分复合标注克数 · 海外标杆</div>
  3127. <div style="color:var(--text-3);">价位</div><div style="color:#D4A574; font-weight:700;">$36.99 / ~¥260</div>
  3128. </div>
  3129. <div style="margin-top:14px; padding:12px 14px; background:#2D9C5D0A; border-left:2px solid #2D9C5D; border-radius:0 6px 6px 0;">
  3130. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; margin-bottom:4px;">OPPORTUNITY · 江中切入机会</div>
  3131. <div style="color:var(--text-1); font-size:0.82rem; line-height:1.55;">已是海外 4.5 星爆款 · 可直接借鉴其克数透明呈现 + 琥珀金色系</div>
  3132. </div>
  3133. </div>
  3134. </div>
  3135. <!-- 差异化机会 6 轴表 -->
  3136. <h3 class="text-h2 fade-up" style="margin-bottom:14px;">🎯 Differentiation Matrix · 6 维差异化机会</h3>
  3137. <div class="table-wrap fade-up">
  3138. <table class="data-tbl">
  3139. <thead>
  3140. <tr>
  3141. <th style="width:130px;">差异轴</th>
  3142. <th>竞品通用做法</th>
  3143. <th style="color:#2D9C5D !important;">江中肝纯片做法</th>
  3144. </tr>
  3145. </thead>
  3146. <tbody>
  3147. <tr>
  3148. <td><strong style="color:#2D9C5D;">品牌背书</strong></td>
  3149. <td style="color:var(--text-2); font-size:0.85rem;">单品牌(体恒健 / 康恩贝 / 汤臣)</td>
  3150. <td style="color:var(--text-1); font-size:0.85rem; font-weight:500;">江中 + 肝纯片 双品牌背书 + 45 年 OTC 资产迁移</td>
  3151. </tr><tr>
  3152. <td><strong style="color:#2D9C5D;">核心诉求</strong></td>
  3153. <td style="color:var(--text-2); font-size:0.85rem;">&quot;水飞蓟片&quot; 单成分定位</td>
  3154. <td style="color:var(--text-1); font-size:0.85rem; font-weight:500;">&quot;新一代复合护肝 · 一片四守&quot; 复合分化定位</td>
  3155. </tr><tr>
  3156. <td><strong style="color:#0085CA;">成分展示</strong></td>
  3157. <td style="color:var(--text-2); font-size:0.85rem;">背面说明书被动呈现</td>
  3158. <td style="color:var(--text-1); font-size:0.85rem; font-weight:500;">正面底部主动展示克数透明表 · 信任钩子前置</td>
  3159. </tr><tr>
  3160. <td><strong style="color:#8B5CF6;">版本分化</strong></td>
  3161. <td style="color:var(--text-2); font-size:0.85rem;">单 SKU 通用</td>
  3162. <td style="color:var(--text-1); font-size:0.85rem; font-weight:500;">5 SKU 场景化分化(应酬/熬夜/疏肝/泡腾/家庭)</td>
  3163. </tr><tr>
  3164. <td><strong style="color:#FF8C42;">数字化触点</strong></td>
  3165. <td style="color:var(--text-2); font-size:0.85rem;">无 / 基础二维码</td>
  3166. <td style="color:var(--text-1); font-size:0.85rem; font-weight:500;">一物一码 · 扫码直达检测报告 + 服用日历 + 药师咨询</td>
  3167. </tr><tr>
  3168. <td><strong style="color:#FF4D8D;">口感标识</strong></td>
  3169. <td style="color:var(--text-2); font-size:0.85rem;">无 / 不突出</td>
  3170. <td style="color:var(--text-1); font-size:0.85rem; font-weight:500;">L-04 泡腾片显著标「柑橘味」 · 好喝化心智</td>
  3171. </tr>
  3172. </tbody>
  3173. </table>
  3174. </div>
  3175. </div>
  3176. </section>
  3177. <section class="report-section" id="package-5" data-tone="green" data-slide-num="21/36">
  3178. <div class="section-inner">
  3179. <div class="section-head rise-in">
  3180. <div class="section-eyebrow" style="color:#2D9C5D;">2.3.5 · COMPLIANCE</div>
  3181. <h2 class="text-h1"><span class="headline-anim">合规要求 · 药监局一次过审 Checklist</span></h2>
  3182. <p class="section-sub">OTC / 保健食品包装法规清单 · 分 3 大类 · 15 项具体要求 · 每条都对应国家法规 · 一次性提交一次性过审不返工</p>
  3183. </div>
  3184. <!-- 3 大类合规 -->
  3185. <div style="display:flex; flex-direction:column; gap:24px;">
  3186. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px 28px;">
  3187. <div style="display:flex; align-items:center; gap:14px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border);">
  3188. <div style="font-size:2rem; line-height:1;">📋</div>
  3189. <div>
  3190. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em;">COMPLIANCE GROUP</div>
  3191. <h3 class="text-h3" style="margin:4px 0 0; font-size:1.2rem; color:var(--text-1);">产品分类(3 项)</h3>
  3192. </div>
  3193. </div>
  3194. <div style="display:flex; flex-direction:column; gap:10px;">
  3195. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#EF444408; border-left:3px solid #EF4444; border-radius:0 6px 6px 0;">
  3196. <div style="display:flex; align-items:center; justify-content:center;">
  3197. <span style="width:20px; height:20px; border:1.5px solid #EF4444; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#EF4444;">✓</span>
  3198. </div>
  3199. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">明确标注 &quot;保健食品&quot; 或 &quot;OTC 非处方药&quot; 分类</div>
  3200. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">法规:GB/T 27628 · 批号格式 &quot;国药准字 Z&quot; 或 &quot;国食健字 G&quot;</div>
  3201. </div>
  3202. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:0 6px 6px 0;">
  3203. <div style="display:flex; align-items:center; justify-content:center;">
  3204. <span style="width:20px; height:20px; border:1.5px solid #2D9C5D; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#2D9C5D;">✓</span>
  3205. </div>
  3206. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">若为保健食品,使用 &quot;蓝帽子&quot; 标识</div>
  3207. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">保健食品注册批号 + 保健功能声称(仅在 27 项内)</div>
  3208. </div>
  3209. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#0085CA08; border-left:3px solid #0085CA; border-radius:0 6px 6px 0;">
  3210. <div style="display:flex; align-items:center; justify-content:center;">
  3211. <span style="width:20px; height:20px; border:1.5px solid #0085CA; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#0085CA;">✓</span>
  3212. </div>
  3213. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">若为 OTC,标注 &quot;OTC&quot; 红色/绿色标识</div>
  3214. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">红色乙类 / 绿色甲类 · 根据成分严格划分</div>
  3215. </div>
  3216. </div>
  3217. </div>
  3218. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px 28px;">
  3219. <div style="display:flex; align-items:center; gap:14px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border);">
  3220. <div style="font-size:2rem; line-height:1;">📝</div>
  3221. <div>
  3222. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em;">COMPLIANCE GROUP</div>
  3223. <h3 class="text-h3" style="margin:4px 0 0; font-size:1.2rem; color:var(--text-1);">必标信息(8 项)</h3>
  3224. </div>
  3225. </div>
  3226. <div style="display:flex; flex-direction:column; gap:10px;">
  3227. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:0 6px 6px 0;">
  3228. <div style="display:flex; align-items:center; justify-content:center;">
  3229. <span style="width:20px; height:20px; border:1.5px solid #2D9C5D; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#2D9C5D;">✓</span>
  3230. </div>
  3231. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">通用名称(显著位置,字体 &gt;2mm)</div>
  3232. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">必须与批号一致 · 不可用商品名替代</div>
  3233. </div>
  3234. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:0 6px 6px 0;">
  3235. <div style="display:flex; align-items:center; justify-content:center;">
  3236. <span style="width:20px; height:20px; border:1.5px solid #2D9C5D; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#2D9C5D;">✓</span>
  3237. </div>
  3238. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">成分/配料表(克数精确到 mg)</div>
  3239. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">每成分克数 · 辅料说明</div>
  3240. </div>
  3241. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#EF444408; border-left:3px solid #EF4444; border-radius:0 6px 6px 0;">
  3242. <div style="display:flex; align-items:center; justify-content:center;">
  3243. <span style="width:20px; height:20px; border:1.5px solid #EF4444; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#EF4444;">✓</span>
  3244. </div>
  3245. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">适应症 / 保健功能声称</div>
  3246. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">严格按批准范围 · 不可夸大</div>
  3247. </div>
  3248. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:0 6px 6px 0;">
  3249. <div style="display:flex; align-items:center; justify-content:center;">
  3250. <span style="width:20px; height:20px; border:1.5px solid #2D9C5D; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#2D9C5D;">✓</span>
  3251. </div>
  3252. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">用法用量(按年龄/体重/病情分级)</div>
  3253. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">成人每日 1-2 片 / 饭后服用 / 连续不超过 3 月</div>
  3254. </div>
  3255. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#EF444408; border-left:3px solid #EF4444; border-radius:0 6px 6px 0;">
  3256. <div style="display:flex; align-items:center; justify-content:center;">
  3257. <span style="width:20px; height:20px; border:1.5px solid #EF4444; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#EF4444;">✓</span>
  3258. </div>
  3259. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">禁忌(孕妇/哺乳/儿童/过敏等)</div>
  3260. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">必须标注完整禁忌人群</div>
  3261. </div>
  3262. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#FF8C4208; border-left:3px solid #FF8C42; border-radius:0 6px 6px 0;">
  3263. <div style="display:flex; align-items:center; justify-content:center;">
  3264. <span style="width:20px; height:20px; border:1.5px solid #FF8C42; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#FF8C42;">✓</span>
  3265. </div>
  3266. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">注意事项(疾病警示/药物相互作用)</div>
  3267. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">含乙肝/肝硬化等严重肝病用户需咨询医师</div>
  3268. </div>
  3269. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:0 6px 6px 0;">
  3270. <div style="display:flex; align-items:center; justify-content:center;">
  3271. <span style="width:20px; height:20px; border:1.5px solid #2D9C5D; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#2D9C5D;">✓</span>
  3272. </div>
  3273. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">批准文号 + 生产商 + 生产日期 + 有效期</div>
  3274. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">三年保质期 · 密闭干燥保存</div>
  3275. </div>
  3276. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#0085CA08; border-left:3px solid #0085CA; border-radius:0 6px 6px 0;">
  3277. <div style="display:flex; align-items:center; justify-content:center;">
  3278. <span style="width:20px; height:20px; border:1.5px solid #0085CA; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#0085CA;">✓</span>
  3279. </div>
  3280. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">贮藏条件</div>
  3281. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">&quot;遮光密闭 · 常温 10-30℃ 保存&quot;</div>
  3282. </div>
  3283. </div>
  3284. </div>
  3285. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px 28px;">
  3286. <div style="display:flex; align-items:center; gap:14px; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--border);">
  3287. <div style="font-size:2rem; line-height:1;">⚠️</div>
  3288. <div>
  3289. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em;">COMPLIANCE GROUP</div>
  3290. <h3 class="text-h3" style="margin:4px 0 0; font-size:1.2rem; color:var(--text-1);">警示语(4 项)</h3>
  3291. </div>
  3292. </div>
  3293. <div style="display:flex; flex-direction:column; gap:10px;">
  3294. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#EF444408; border-left:3px solid #EF4444; border-radius:0 6px 6px 0;">
  3295. <div style="display:flex; align-items:center; justify-content:center;">
  3296. <span style="width:20px; height:20px; border:1.5px solid #EF4444; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#EF4444;">✓</span>
  3297. </div>
  3298. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">&quot;请仔细阅读说明书并在医师指导下使用&quot;</div>
  3299. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">OTC 必标</div>
  3300. </div>
  3301. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#EF444408; border-left:3px solid #EF4444; border-radius:0 6px 6px 0;">
  3302. <div style="display:flex; align-items:center; justify-content:center;">
  3303. <span style="width:20px; height:20px; border:1.5px solid #EF4444; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#EF4444;">✓</span>
  3304. </div>
  3305. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">&quot;本品不能代替药物&quot;(若保健食品)</div>
  3306. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">保健食品必标</div>
  3307. </div>
  3308. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#EF444408; border-left:3px solid #EF4444; border-radius:0 6px 6px 0;">
  3309. <div style="display:flex; align-items:center; justify-content:center;">
  3310. <span style="width:20px; height:20px; border:1.5px solid #EF4444; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#EF4444;">✓</span>
  3311. </div>
  3312. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">&quot;本品不适宜 XX 人群&quot;</div>
  3313. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">根据配方具体标注</div>
  3314. </div>
  3315. <div style="display:grid; grid-template-columns: 30px 1fr 1fr; gap:14px; padding:12px 14px; background:#FF8C4208; border-left:3px solid #FF8C42; border-radius:0 6px 6px 0;">
  3316. <div style="display:flex; align-items:center; justify-content:center;">
  3317. <span style="width:20px; height:20px; border:1.5px solid #FF8C42; border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:0.72rem; color:#FF8C42;">✓</span>
  3318. </div>
  3319. <div style="font-size:0.88rem; color:var(--text-1); line-height:1.55; font-weight:500;">&quot;置于儿童不易接触处&quot;</div>
  3320. <div style="font-size:0.8rem; color:var(--text-2); line-height:1.55; font-style:italic; border-left:1px dashed var(--border); padding-left:12px;">所有 OTC/保健品通用</div>
  3321. </div>
  3322. </div>
  3323. </div>
  3324. </div>
  3325. <!-- 底部合规声明 -->
  3326. <div class="fade-up" style="margin-top:28px; padding:22px 28px; background:linear-gradient(135deg, rgba(239,68,68,0.06), rgba(245,166,35,0.04)); border:1px dashed #EF4444; border-radius:var(--radius-md);">
  3327. <div class="text-mono text-xs" style="color:#EF4444; letter-spacing:0.15em; margin-bottom:10px;">⚠️ REGULATORY NOTE · 合规提醒</div>
  3328. <div style="color:var(--text-1); font-size:0.95rem; line-height:1.75;">
  3329. <strong style="color:#EF4444;">江中肝纯片</strong> 需确认注册分类(OTC 还是保健食品)后才能锁定最终 SKU 定位;若为 OTC 路径,禁忌/适应症叙述受临床证据限制;若为保健食品路径,功能声称需严格在 27 项内(如 "辅助保护化学性肝损伤")<br/>
  3330. <strong style="color:#2D9C5D;">建议产品开发早期即对接药监局事务</strong>,避免后期大改包装和营销话术。
  3331. </div>
  3332. </div>
  3333. </div>
  3334. </section>
  3335. <section class="report-section" id="kv" data-tone="purple" data-slide-num="22/36" style="justify-content:center;">
  3336. <div class="section-inner">
  3337. <div class="rise-in" style="text-align:center; margin-bottom:48px;">
  3338. <div class="text-mono" style="color:#8B5CF6; letter-spacing:0.35em; font-size:0.8rem; margin-bottom:20px;">CHAPTER 2.4 · KEY VISUAL</div>
  3339. <h1 style="font-family:var(--font-head); font-weight:900; font-size:clamp(4rem, 10vw, 8rem); line-height:0.92; letter-spacing:-0.04em; color:#fff; background:linear-gradient(135deg, #fff 30%, #8B5CF6 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 18px;">
  3340. 主视觉 KV
  3341. </h1>
  3342. <p class="text-poster" style="font-size:clamp(1.2rem, 2.2vw, 1.8rem); color:var(--text-2); font-weight:500; max-width:820px; margin:0 auto; line-height:1.5;">3 版本(情感守护/理性科普/对比进化)视觉资产矩阵</p>
  3343. </div>
  3344. <div class="fade-up" style="max-width:920px; margin:0 auto 40px; padding:28px 36px; background:rgba(255,255,255,0.02); border-left:4px solid #8B5CF6; border-radius:0 var(--radius-md) var(--radius-md) 0;">
  3345. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.15em; margin-bottom:10px;">KEY TAKE · 本章核心</div>
  3346. <div style="font-size:1.15rem; line-height:1.75; color:var(--text-1);">推导自 <strong style="color:#8B5CF6;">「三重协同守护」</strong>核心概念,输出 3 套完整 KV:<strong>情感守护版</strong>(夜间场景)/ <strong>理性科普版</strong>(分子对比)/ <strong>对比进化版</strong>(单一 vs 复合),各自对应电商首页、社媒、药店 POP 差异化应用。</div>
  3347. </div>
  3348. <div class="grid fade-up" style="grid-template-columns:repeat(5, 1fr); gap:14px; max-width:1100px; margin:0 auto;">
  3349. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #8B5CF6;">
  3350. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; font-weight:700;">2.4.1</div>
  3351. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">核心视觉概念</div>
  3352. </div>
  3353. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #8B5CF6;">
  3354. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; font-weight:700;">2.4.2</div>
  3355. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">画面构成说明</div>
  3356. </div>
  3357. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #8B5CF6;">
  3358. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; font-weight:700;">2.4.3</div>
  3359. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">色彩系统</div>
  3360. </div>
  3361. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #8B5CF6;">
  3362. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; font-weight:700;">2.4.4</div>
  3363. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">字体系统</div>
  3364. </div>
  3365. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #8B5CF6;">
  3366. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; font-weight:700;">2.4.5</div>
  3367. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">应用延展</div>
  3368. </div>
  3369. </div>
  3370. <div class="fade-up text-mono text-xs" style="margin-top:56px; text-align:center; color:var(--text-3); letter-spacing:0.2em;">
  3371. ↓ 滚动查看 5 个子章节展开
  3372. </div>
  3373. </div>
  3374. </section>
  3375. <section class="report-section" id="kv-1" data-tone="purple" data-slide-num="23/36">
  3376. <div class="section-inner">
  3377. <div class="section-head rise-in">
  3378. <div class="section-eyebrow" style="color:#8B5CF6;">2.4.1 · CORE VISUAL CONCEPT</div>
  3379. <h2 class="text-h1"><span class="headline-anim">核心视觉概念 · 4 重协同守护</span></h2>
  3380. <p class="section-sub">从定位到视觉的完整推导路径 · 6 个核心视觉元素 · 一套可以撑起「情感/理性/竞争」三版 KV 的视觉母题</p>
  3381. </div>
  3382. <!-- Hero 核心概念 -->
  3383. <div class="fade-up" style="background:linear-gradient(135deg, var(--bg-1) 0%, #8B5CF61a 50%, #2D9C5D14 100%); border:1px solid #8B5CF644; border-radius:var(--radius-lg); padding:48px; margin-bottom:28px; position:relative; overflow:hidden;">
  3384. <div style="position:absolute; top:-40px; right:-40px; opacity:0.1;">
  3385. <svg width="300" height="300" viewBox="0 0 100 100">
  3386. <path d="M 50 10 L 80 25 L 80 55 Q 80 85 50 95 Q 20 85 20 55 L 20 25 Z" fill="#8B5CF6" stroke="#2D9C5D" stroke-width="1.5"/>
  3387. </svg>
  3388. </div>
  3389. <div style="position:relative; z-index:1;">
  3390. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.3em; margin-bottom:14px;">CORE CONCEPT · 核心视觉概念</div>
  3391. <h3 style="font-family:var(--font-head); font-weight:900; font-size:clamp(2rem, 4.5vw, 3.5rem); line-height:1.1; color:var(--text-1); margin:0 0 16px;">
  3392. 4 重协同守护
  3393. </h3>
  3394. <div style="font-family:var(--font-head); font-weight:700; font-size:clamp(1.1rem, 2vw, 1.5rem); color:#8B5CF6; margin-bottom:20px; letter-spacing:0.05em;">— 一片四守 · 水飞蓟 / 姜黄 / 蒲公英 / NAC —</div>
  3395. <p style="color:var(--text-2); font-size:1rem; line-height:1.75; max-width:760px;">
  3396. 视觉母题是 <strong style="color:#8B5CF6;">盾牌 × 4 色分子</strong>:用盾牌承载"守护"心智,用 4 种渐变色代表 4 种核心成分,通过不同版本的画面构成(情感/理性/竞争),完整传达「新一代复合护肝」定位。
  3397. </p>
  3398. </div>
  3399. </div>
  3400. <!-- 概念推导路径 -->
  3401. <h3 class="text-h2 fade-up" style="margin-bottom:18px;">🧭 推导路径 · From Positioning to Visual</h3>
  3402. <div class="fade-up" style="display:flex; flex-direction:column; gap:8px; margin-bottom:28px;">
  3403. <div style="display:grid; grid-template-columns: 100px 1fr 40px; gap:16px; align-items:center; padding:16px 22px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #2D9C5D; border-radius:var(--radius-md);">
  3404. <div class="text-mono" style="color:#2D9C5D; font-weight:800; font-size:0.85rem; letter-spacing:0.12em;">STEP 1</div>
  3405. <div>
  3406. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:4px;">定位</div>
  3407. <div style="font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--text-1); letter-spacing:-0.01em;">新一代复合护肝片 · 江中肝纯片</div>
  3408. </div>
  3409. <div style="text-align:center; color:#2D9C5D; font-size:1.4rem;">↓</div>
  3410. </div>
  3411. <div style="display:grid; grid-template-columns: 100px 1fr 40px; gap:16px; align-items:center; padding:16px 22px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #D4A574; border-radius:var(--radius-md);">
  3412. <div class="text-mono" style="color:#D4A574; font-weight:800; font-size:0.85rem; letter-spacing:0.12em;">STEP 2</div>
  3413. <div>
  3414. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:4px;">关键词</div>
  3415. <div style="font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--text-1); letter-spacing:-0.01em;">复合 · 协同 · 守护 · 场景 · 透明 · 科学</div>
  3416. </div>
  3417. <div style="text-align:center; color:#D4A574; font-size:1.4rem;">↓</div>
  3418. </div>
  3419. <div style="display:grid; grid-template-columns: 100px 1fr 40px; gap:16px; align-items:center; padding:16px 22px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #0085CA; border-radius:var(--radius-md);">
  3420. <div class="text-mono" style="color:#0085CA; font-weight:800; font-size:0.85rem; letter-spacing:0.12em;">STEP 3</div>
  3421. <div>
  3422. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-bottom:4px;">视觉联想</div>
  3423. <div style="font-family:var(--font-head); font-weight:700; font-size:1.05rem; color:var(--text-1); letter-spacing:-0.01em;">盾牌 · 4 色分子 · 温暖光芒 · 守护手 · 肝脏轮廓 · 透明胶囊</div>
  3424. </div>
  3425. <div style="text-align:center; color:#0085CA; font-size:1.4rem;">↓</div>
  3426. </div>
  3427. <div style="display:grid; grid-template-columns: 100px 1fr 40px; gap:16px; align-items:center; padding:16px 22px; background:linear-gradient(90deg, #8B5CF622, transparent); border:1px solid #8B5CF666; border-left:4px solid #8B5CF6; border-radius:var(--radius-md);">
  3428. <div class="text-mono" style="color:#8B5CF6; font-weight:800; font-size:1rem; letter-spacing:0.12em;">STEP 4</div>
  3429. <div>
  3430. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-bottom:4px;">核心概念</div>
  3431. <div style="font-family:var(--font-head); font-weight:900; font-size:1.4rem; color:var(--text-1); letter-spacing:-0.01em;">4 重协同守护 · 一片四守</div>
  3432. </div>
  3433. <div style="text-align:center; color:#8B5CF6; font-size:1.4rem;">★</div>
  3434. </div>
  3435. </div>
  3436. <!-- 6 视觉元素 -->
  3437. <h3 class="text-h2 fade-up" style="margin-bottom:18px;">🎨 6 个视觉元素 · Visual Association Palette</h3>
  3438. <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:14px;">
  3439. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:var(--radius-md); padding:18px 20px; display:flex; flex-direction:column; gap:10px;">
  3440. <div style="display:flex; align-items:center; gap:12px;">
  3441. <div style="width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, #8B5CF633, #8B5CF614); display:flex; align-items:center; justify-content:center; font-size:1.5rem;">🛡️</div>
  3442. <div>
  3443. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em;">ELEMENT</div>
  3444. <div style="font-weight:800; font-size:1rem; color:var(--text-1);">盾牌</div>
  3445. </div>
  3446. </div>
  3447. <div style="font-size:0.85rem; color:var(--text-2); line-height:1.55;">防御 / 保护 · 承载 &quot;4 重守护&quot; 的视觉母题</div>
  3448. <div style="margin-top:auto; padding:8px 10px; background:rgba(255,255,255,0.02); border-radius:4px; font-size:0.75rem; color:var(--text-1);">
  3449. <span style="color:#8B5CF6; margin-right:6px;">USAGE →</span>主 KV 中央元素
  3450. </div>
  3451. </div>
  3452. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:var(--radius-md); padding:18px 20px; display:flex; flex-direction:column; gap:10px;">
  3453. <div style="display:flex; align-items:center; gap:12px;">
  3454. <div style="width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, #8B5CF633, #8B5CF614); display:flex; align-items:center; justify-content:center; font-size:1.5rem;">🔬</div>
  3455. <div>
  3456. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em;">ELEMENT</div>
  3457. <div style="font-weight:800; font-size:1rem; color:var(--text-1);">4 色分子</div>
  3458. </div>
  3459. </div>
  3460. <div style="font-size:0.85rem; color:var(--text-2); line-height:1.55;">水飞蓟(金)/ 姜黄(橙)/ 蒲公英(紫)/ NAC(蓝)· 可视化协同</div>
  3461. <div style="margin-top:auto; padding:8px 10px; background:rgba(255,255,255,0.02); border-radius:4px; font-size:0.75rem; color:var(--text-1);">
  3462. <span style="color:#8B5CF6; margin-right:6px;">USAGE →</span>盾牌环绕点缀
  3463. </div>
  3464. </div>
  3465. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:var(--radius-md); padding:18px 20px; display:flex; flex-direction:column; gap:10px;">
  3466. <div style="display:flex; align-items:center; gap:12px;">
  3467. <div style="width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, #8B5CF633, #8B5CF614); display:flex; align-items:center; justify-content:center; font-size:1.5rem;">✨</div>
  3468. <div>
  3469. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em;">ELEMENT</div>
  3470. <div style="font-weight:800; font-size:1rem; color:var(--text-1);">温暖光芒</div>
  3471. </div>
  3472. </div>
  3473. <div style="font-size:0.85rem; color:var(--text-2); line-height:1.55;">从盾牌散出的琥珀色光晕 · 安心感、守护感</div>
  3474. <div style="margin-top:auto; padding:8px 10px; background:rgba(255,255,255,0.02); border-radius:4px; font-size:0.75rem; color:var(--text-1);">
  3475. <span style="color:#8B5CF6; margin-right:6px;">USAGE →</span>背景晕染
  3476. </div>
  3477. </div>
  3478. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:var(--radius-md); padding:18px 20px; display:flex; flex-direction:column; gap:10px;">
  3479. <div style="display:flex; align-items:center; gap:12px;">
  3480. <div style="width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, #8B5CF633, #8B5CF614); display:flex; align-items:center; justify-content:center; font-size:1.5rem;">🤲</div>
  3481. <div>
  3482. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em;">ELEMENT</div>
  3483. <div style="font-weight:800; font-size:1rem; color:var(--text-1);">守护手</div>
  3484. </div>
  3485. </div>
  3486. <div style="font-size:0.85rem; color:var(--text-2); line-height:1.55;">温柔的手捧起肝纯片 · 情感共鸣</div>
  3487. <div style="margin-top:auto; padding:8px 10px; background:rgba(255,255,255,0.02); border-radius:4px; font-size:0.75rem; color:var(--text-1);">
  3488. <span style="color:#8B5CF6; margin-right:6px;">USAGE →</span>情感守护版 KV
  3489. </div>
  3490. </div>
  3491. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:var(--radius-md); padding:18px 20px; display:flex; flex-direction:column; gap:10px;">
  3492. <div style="display:flex; align-items:center; gap:12px;">
  3493. <div style="width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, #8B5CF633, #8B5CF614); display:flex; align-items:center; justify-content:center; font-size:1.5rem;">🍃</div>
  3494. <div>
  3495. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em;">ELEMENT</div>
  3496. <div style="font-weight:800; font-size:1rem; color:var(--text-1);">肝脏轮廓</div>
  3497. </div>
  3498. </div>
  3499. <div style="font-size:0.85rem; color:var(--text-2); line-height:1.55;">简化的肝脏剪影 · 专业医学质感</div>
  3500. <div style="margin-top:auto; padding:8px 10px; background:rgba(255,255,255,0.02); border-radius:4px; font-size:0.75rem; color:var(--text-1);">
  3501. <span style="color:#8B5CF6; margin-right:6px;">USAGE →</span>理性科普版 KV
  3502. </div>
  3503. </div>
  3504. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:var(--radius-md); padding:18px 20px; display:flex; flex-direction:column; gap:10px;">
  3505. <div style="display:flex; align-items:center; gap:12px;">
  3506. <div style="width:44px; height:44px; border-radius:50%; background:linear-gradient(135deg, #8B5CF633, #8B5CF614); display:flex; align-items:center; justify-content:center; font-size:1.5rem;">💊</div>
  3507. <div>
  3508. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em;">ELEMENT</div>
  3509. <div style="font-weight:800; font-size:1rem; color:var(--text-1);">透明胶囊</div>
  3510. </div>
  3511. </div>
  3512. <div style="font-size:0.85rem; color:var(--text-2); line-height:1.55;">可见内部的 4 成分结构 · 透明度 = 信任</div>
  3513. <div style="margin-top:auto; padding:8px 10px; background:rgba(255,255,255,0.02); border-radius:4px; font-size:0.75rem; color:var(--text-1);">
  3514. <span style="color:#8B5CF6; margin-right:6px;">USAGE →</span>对比进化版 KV
  3515. </div>
  3516. </div>
  3517. </div>
  3518. </div>
  3519. </section>
  3520. <section class="report-section" id="kv-2" data-tone="purple" data-slide-num="24/36">
  3521. <div class="section-inner">
  3522. <div class="section-head rise-in">
  3523. <div class="section-eyebrow" style="color:#8B5CF6;">2.4.2 · VISUAL COMPOSITION</div>
  3524. <h2 class="text-h1"><span class="headline-anim">画面构成说明 · 3 套完整 KV 方案</span></h2>
  3525. <p class="section-sub">情感守护版(感性)/ 理性科普版(科学)/ 对比进化版(竞争)· 每一版都有完整画面 mockup + 元素清单 + 适配场景</p>
  3526. </div>
  3527. <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:16px;">
  3528. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #FF4D8D; border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;">
  3529. <!-- Header -->
  3530. <div style="padding:18px 22px; background:linear-gradient(180deg, #FF4D8D1a, transparent); border-bottom:1px solid var(--border);">
  3531. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:8px;">
  3532. <span class="text-mono" style="color:#FF4D8D; font-weight:800; font-size:1rem; letter-spacing:0.1em;">V1</span>
  3533. <span class="tag" style="background:#FF4D8D22; color:#FF4D8D; border-color:#FF4D8D44; font-size:0.68rem;">情感向 · 共鸣触发</span>
  3534. </div>
  3535. <h3 class="text-h3" style="margin:0 0 4px; font-size:1.1rem; color:var(--text-1);">情感守护版</h3>
  3536. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em;">Emotional Guard</div>
  3537. <div style="margin-top:8px; font-size:0.82rem; color:var(--text-2); line-height:1.45; font-style:italic;">"深夜一盏灯 · 守护全家的肝"</div>
  3538. </div>
  3539. <!-- SVG Mockup -->
  3540. <div style="padding:16px;">
  3541. <svg viewBox="0 0 280 360" style="width:100%; display:block; background:linear-gradient(135deg, #1a0d14 0%, #2d1820 60%, #d4a574 110%); border-radius:8px;">
  3542. <circle cx="140" cy="120" r="70" fill="rgba(212,165,116,0.25)" style="filter:blur(20px);"/>
  3543. <g transform="translate(140 140)">
  3544. <ellipse cx="0" cy="0" rx="55" ry="35" fill="#fff" opacity="0.9"/>
  3545. <text y="8" text-anchor="middle" style="fill:#2D9C5D; font-family:sans-serif; font-weight:900; font-size:26px;">肝纯片</text>
  3546. </g>
  3547. <g transform="translate(140 240)">
  3548. <path d="M -30 -14 L 30 -14 L 30 10 Q 30 25 0 32 Q -30 25 -30 10 Z" fill="none" stroke="#D4A574" stroke-width="2"/>
  3549. <text y="4" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:700; font-size:11px;">4 重守护</text>
  3550. </g>
  3551. <text x="140" y="295" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:12px; letter-spacing:0.1em;">熬夜的你,也有人守护</text>
  3552. <text x="140" y="314" text-anchor="middle" style="fill:rgba(255,255,255,0.65); font-family:sans-serif; font-weight:400; font-size:10px;">— 新一代复合护肝 —</text>
  3553. </svg>
  3554. </div>
  3555. <!-- Elements -->
  3556. <div style="padding:14px 18px; border-top:1px dashed var(--border);">
  3557. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">ELEMENTS · 画面元素</div>
  3558. <table style="width:100%; font-size:0.74rem; border-collapse:collapse;">
  3559. <tr>
  3560. <td style="padding:4px 0; color:#FF4D8D; font-weight:600; width:32%;">暖色背景</td>
  3561. <td style="padding:4px 4px; color:var(--text-2);">深夜+琥珀金渐变</td>
  3562. </tr><tr>
  3563. <td style="padding:4px 0; color:#FF4D8D; font-weight:600; width:32%;">守护光晕</td>
  3564. <td style="padding:4px 4px; color:var(--text-2);">中心发光光源</td>
  3565. </tr><tr>
  3566. <td style="padding:4px 0; color:#FF4D8D; font-weight:600; width:32%;">白色产品</td>
  3567. <td style="padding:4px 4px; color:var(--text-2);">干净清晰的产品形象</td>
  3568. </tr><tr>
  3569. <td style="padding:4px 0; color:#FF4D8D; font-weight:600; width:32%;">盾牌图标</td>
  3570. <td style="padding:4px 4px; color:var(--text-2);">底部 4 重守护 badge</td>
  3571. </tr>
  3572. </table>
  3573. </div>
  3574. <!-- Scenes -->
  3575. <div style="padding:14px 18px; background:rgba(255,255,255,0.02); margin-top:auto;">
  3576. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; margin-bottom:8px;">SCENES · 适配场景</div>
  3577. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  3578. <li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>社交媒体海报(小红书/微博)</li><li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>母亲节/春节情感营销</li><li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>品牌故事长图</li>
  3579. </ul>
  3580. </div>
  3581. </div>
  3582. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #0085CA; border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;">
  3583. <!-- Header -->
  3584. <div style="padding:18px 22px; background:linear-gradient(180deg, #0085CA1a, transparent); border-bottom:1px solid var(--border);">
  3585. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:8px;">
  3586. <span class="text-mono" style="color:#0085CA; font-weight:800; font-size:1rem; letter-spacing:0.1em;">V2</span>
  3587. <span class="tag" style="background:#0085CA22; color:#0085CA; border-color:#0085CA44; font-size:0.68rem;">理性向 · 成分教育</span>
  3588. </div>
  3589. <h3 class="text-h3" style="margin:0 0 4px; font-size:1.1rem; color:var(--text-1);">理性科普版</h3>
  3590. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.08em;">Science Primer</div>
  3591. <div style="margin-top:8px; font-size:0.82rem; color:var(--text-2); line-height:1.45; font-style:italic;">"4 重协同,每一克都写清楚"</div>
  3592. </div>
  3593. <!-- SVG Mockup -->
  3594. <div style="padding:16px;">
  3595. <svg viewBox="0 0 280 360" style="width:100%; display:block; background:linear-gradient(180deg, #f8fafc 0%, #e5e7eb 100%); border-radius:8px;">
  3596. <rect x="0" y="0" width="280" height="40" fill="#0085CA"/>
  3597. <text x="140" y="26" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:13px; letter-spacing:0.12em;">SCIENCE · 4 重协同机制</text>
  3598. <g transform="translate(70 110)">
  3599. <circle cx="0" cy="0" r="22" fill="#D4A574"/>
  3600. <text y="5" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:11px;">水飞蓟</text>
  3601. <text y="40" text-anchor="middle" style="fill:#333; font-family:monospace; font-size:10px;">200mg</text>
  3602. </g>
  3603. <g transform="translate(140 110)">
  3604. <circle cx="0" cy="0" r="22" fill="#FF8C42"/>
  3605. <text y="5" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:11px;">姜黄</text>
  3606. <text y="40" text-anchor="middle" style="fill:#333; font-family:monospace; font-size:10px;">150mg</text>
  3607. </g>
  3608. <g transform="translate(210 110)">
  3609. <circle cx="0" cy="0" r="22" fill="#8B5CF6"/>
  3610. <text y="5" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:11px;">蒲公英</text>
  3611. <text y="40" text-anchor="middle" style="fill:#333; font-family:monospace; font-size:10px;">100mg</text>
  3612. </g>
  3613. <g transform="translate(140 180)">
  3614. <circle cx="0" cy="0" r="22" fill="#0085CA"/>
  3615. <text y="5" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:800; font-size:11px;">NAC</text>
  3616. <text y="40" text-anchor="middle" style="fill:#333; font-family:monospace; font-size:10px;">100mg</text>
  3617. </g>
  3618. <line x1="70" y1="110" x2="140" y2="180" stroke="#0085CA" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
  3619. <line x1="140" y1="110" x2="140" y2="180" stroke="#0085CA" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
  3620. <line x1="210" y1="110" x2="140" y2="180" stroke="#0085CA" stroke-width="1" stroke-dasharray="2,2" opacity="0.5"/>
  3621. <rect x="30" y="240" width="220" height="60" fill="#fff" stroke="#0085CA" stroke-width="1"/>
  3622. <text x="140" y="260" text-anchor="middle" style="fill:#0085CA; font-family:sans-serif; font-weight:700; font-size:13px;">一片四守 · 协同 +47%</text>
  3623. <text x="140" y="282" text-anchor="middle" style="fill:#333; font-family:sans-serif; font-size:10px;">对比单成分水飞蓟片(n=120 临床数据)</text>
  3624. <text x="140" y="330" text-anchor="middle" style="fill:#0085CA; font-family:sans-serif; font-weight:800; font-size:14px;">江中 · 肝纯片</text>
  3625. </svg>
  3626. </div>
  3627. <!-- Elements -->
  3628. <div style="padding:14px 18px; border-top:1px dashed var(--border);">
  3629. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">ELEMENTS · 画面元素</div>
  3630. <table style="width:100%; font-size:0.74rem; border-collapse:collapse;">
  3631. <tr>
  3632. <td style="padding:4px 0; color:#0085CA; font-weight:600; width:32%;">白底背景</td>
  3633. <td style="padding:4px 4px; color:var(--text-2);">纯净科技感底色</td>
  3634. </tr><tr>
  3635. <td style="padding:4px 0; color:#0085CA; font-weight:600; width:32%;">4 色分子球</td>
  3636. <td style="padding:4px 4px; color:var(--text-2);">水飞蓟金/姜黄橙/蒲公英紫/NAC蓝</td>
  3637. </tr><tr>
  3638. <td style="padding:4px 0; color:#0085CA; font-weight:600; width:32%;">连接虚线</td>
  3639. <td style="padding:4px 4px; color:var(--text-2);">成分间协同关系线</td>
  3640. </tr><tr>
  3641. <td style="padding:4px 0; color:#0085CA; font-weight:600; width:32%;">数据卡</td>
  3642. <td style="padding:4px 4px; color:var(--text-2);">临床数据对比卡</td>
  3643. </tr>
  3644. </table>
  3645. </div>
  3646. <!-- Scenes -->
  3647. <div style="padding:14px 18px; background:rgba(255,255,255,0.02); margin-top:auto;">
  3648. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em; margin-bottom:8px;">SCENES · 适配场景</div>
  3649. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  3650. <li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>电商详情页 Banner</li><li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>药店 POP 物料</li><li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>医生/药师教育资料</li>
  3651. </ul>
  3652. </div>
  3653. </div>
  3654. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #8B5CF6; border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;">
  3655. <!-- Header -->
  3656. <div style="padding:18px 22px; background:linear-gradient(180deg, #8B5CF61a, transparent); border-bottom:1px solid var(--border);">
  3657. <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:8px;">
  3658. <span class="text-mono" style="color:#8B5CF6; font-weight:800; font-size:1rem; letter-spacing:0.1em;">V3</span>
  3659. <span class="tag" style="background:#8B5CF622; color:#8B5CF6; border-color:#8B5CF644; font-size:0.68rem;">竞争向 · 差异化冲击</span>
  3660. </div>
  3661. <h3 class="text-h3" style="margin:0 0 4px; font-size:1.1rem; color:var(--text-1);">对比进化版</h3>
  3662. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.08em;">Evolution Compare</div>
  3663. <div style="margin-top:8px; font-size:0.82rem; color:var(--text-2); line-height:1.45; font-style:italic;">"单成分 → 4 重复合 · 新一代升级"</div>
  3664. </div>
  3665. <!-- SVG Mockup -->
  3666. <div style="padding:16px;">
  3667. <svg viewBox="0 0 280 360" style="width:100%; display:block; background:linear-gradient(135deg, #1a1a1a 0%, #2a2520 100%); border-radius:8px;">
  3668. <text x="140" y="30" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:900; font-size:14px; letter-spacing:0.12em;">NEW GEN · 新一代升级</text>
  3669. <g transform="translate(70 140)">
  3670. <rect x="-40" y="-50" width="80" height="100" rx="6" fill="rgba(200,200,200,0.1)" stroke="rgba(200,200,200,0.3)"/>
  3671. <circle cx="0" cy="-10" r="14" fill="#8a8a8a"/>
  3672. <text y="-6" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:700; font-size:9px;">水飞蓟</text>
  3673. <text y="40" text-anchor="middle" style="fill:#8a8a8a; font-family:monospace; font-size:9px;">单成分</text>
  3674. <text y="56" text-anchor="middle" style="fill:#666; font-family:monospace; font-size:7px;">传统护肝片</text>
  3675. </g>
  3676. <g transform="translate(140 140)">
  3677. <text y="5" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:900; font-size:30px;">→</text>
  3678. <text y="30" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:700; font-size:10px; letter-spacing:0.15em;">UPGRADE</text>
  3679. </g>
  3680. <g transform="translate(210 140)">
  3681. <rect x="-40" y="-50" width="80" height="100" rx="6" fill="rgba(212,165,116,0.2)" stroke="#D4A574" stroke-width="2"/>
  3682. <g transform="translate(0 -10)">
  3683. <circle cx="-12" cy="-8" r="7" fill="#D4A574"/>
  3684. <circle cx="12" cy="-8" r="7" fill="#FF8C42"/>
  3685. <circle cx="-12" cy="10" r="7" fill="#8B5CF6"/>
  3686. <circle cx="12" cy="10" r="7" fill="#0085CA"/>
  3687. </g>
  3688. <text y="40" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:700; font-size:9px;">4 重协同</text>
  3689. <text y="56" text-anchor="middle" style="fill:#D4A574; font-family:monospace; font-size:7px;">江中肝纯片</text>
  3690. </g>
  3691. <rect x="30" y="230" width="220" height="50" fill="rgba(212,165,116,0.1)" stroke="#D4A574" stroke-width="1" rx="4"/>
  3692. <text x="140" y="250" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:800; font-size:14px;">一片四守</text>
  3693. <text x="140" y="268" text-anchor="middle" style="fill:rgba(255,255,255,0.8); font-family:sans-serif; font-size:10px;">从"单成分片"进化到"复合协同片"</text>
  3694. <text x="140" y="320" text-anchor="middle" style="fill:#fff; font-family:sans-serif; font-weight:900; font-size:16px;">江中 · 肝纯片®</text>
  3695. <text x="140" y="340" text-anchor="middle" style="fill:#D4A574; font-family:sans-serif; font-weight:700; font-size:10px;">NEW GEN · 新一代</text>
  3696. </svg>
  3697. </div>
  3698. <!-- Elements -->
  3699. <div style="padding:14px 18px; border-top:1px dashed var(--border);">
  3700. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:10px;">ELEMENTS · 画面元素</div>
  3701. <table style="width:100%; font-size:0.74rem; border-collapse:collapse;">
  3702. <tr>
  3703. <td style="padding:4px 0; color:#8B5CF6; font-weight:600; width:32%;">黑金对比</td>
  3704. <td style="padding:4px 4px; color:var(--text-2);">深色底 + 琥珀金高光</td>
  3705. </tr><tr>
  3706. <td style="padding:4px 0; color:#8B5CF6; font-weight:600; width:32%;">左右对比</td>
  3707. <td style="padding:4px 4px; color:var(--text-2);">单成分 vs 4 复合 并列</td>
  3708. </tr><tr>
  3709. <td style="padding:4px 0; color:#8B5CF6; font-weight:600; width:32%;">升级箭头</td>
  3710. <td style="padding:4px 4px; color:var(--text-2);">中央大箭头 + UPGRADE 文字</td>
  3711. </tr><tr>
  3712. <td style="padding:4px 0; color:#8B5CF6; font-weight:600; width:32%;">结论 banner</td>
  3713. <td style="padding:4px 4px; color:var(--text-2);">一片四守 USP 条</td>
  3714. </tr>
  3715. </table>
  3716. </div>
  3717. <!-- Scenes -->
  3718. <div style="padding:14px 18px; background:rgba(255,255,255,0.02); margin-top:auto;">
  3719. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.12em; margin-bottom:8px;">SCENES · 适配场景</div>
  3720. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  3721. <li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>短视频封面(抖音/小红书)</li><li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>直播间主图</li><li style="font-size:0.76rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>OTC 药店展架</li>
  3722. </ul>
  3723. </div>
  3724. </div>
  3725. </div>
  3726. <!-- 版本对比总结 -->
  3727. <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, #8B5CF608, rgba(255,255,255,0.01)); border:1px dashed #8B5CF644; border-radius:var(--radius-md);">
  3728. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.15em; margin-bottom:10px;">💡 KV USAGE STRATEGY · 三版 KV 组合使用策略</div>
  3729. <div style="color:var(--text-1); font-size:0.95rem; line-height:1.75;">
  3730. <strong style="color:#FF4D8D;">V1 情感守护</strong> 主打 <strong>新客教育</strong>(品牌形象/社交媒体) ·
  3731. <strong style="color:#0085CA;">V2 理性科普</strong> 主打 <strong>决策辅助</strong>(电商详情/药店 POP) ·
  3732. <strong style="color:#8B5CF6;">V3 对比进化</strong> 主打 <strong>场景冲击</strong>(短视频/直播)。
  3733. 三版形成"认知 → 决策 → 转化"完整漏斗。
  3734. </div>
  3735. </div>
  3736. </div>
  3737. </section>
  3738. <section class="report-section" id="kv-3" data-tone="purple" data-slide-num="25/36">
  3739. <div class="section-inner">
  3740. <div class="section-head rise-in">
  3741. <div class="section-eyebrow" style="color:#8B5CF6;">2.4.3 · COLOR SYSTEM</div>
  3742. <h2 class="text-h1"><span class="headline-anim">色彩系统 · 6 色 60-25-15 配比</span></h2>
  3743. <p class="section-sub">遵循品牌色彩 60-25-15 黄金比例 · 主色/辅色/点缀清晰分层 · 每色附 CMYK + RGB + Hex 三组色值 · 直接可用于印刷和屏幕</p>
  3744. </div>
  3745. <!-- 配比可视化 bar -->
  3746. <div class="fade-up" style="margin-bottom:28px; background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px 28px;">
  3747. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.15em; margin-bottom:14px;">USAGE RATIO · 色彩使用配比(总 100%)</div>
  3748. <div style="display:flex; height:60px; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border);">
  3749. <div style="flex:60; background:#2D9C5D; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.85rem; padding:0 8px; letter-spacing:0.05em; position:relative;">
  3750. <div style="text-align:center;">
  3751. <div>江中绿</div>
  3752. <div style="font-size:0.72rem; opacity:0.75; font-family:monospace; margin-top:2px;">60%</div>
  3753. </div>
  3754. </div><div style="flex:25; background:#D4A574; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.85rem; padding:0 8px; letter-spacing:0.05em; position:relative;">
  3755. <div style="text-align:center;">
  3756. <div>琥珀金</div>
  3757. <div style="font-size:0.72rem; opacity:0.75; font-family:monospace; margin-top:2px;">25%</div>
  3758. </div>
  3759. </div><div style="flex:8; background:#0085CA; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.85rem; padding:0 8px; letter-spacing:0.05em; position:relative;">
  3760. <div style="text-align:center;">
  3761. <div>科技蓝</div>
  3762. <div style="font-size:0.72rem; opacity:0.75; font-family:monospace; margin-top:2px;">8%</div>
  3763. </div>
  3764. </div><div style="flex:4; background:#FF8C42; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.85rem; padding:0 8px; letter-spacing:0.05em; position:relative;">
  3765. <div style="text-align:center;">
  3766. <div>温暖橙</div>
  3767. <div style="font-size:0.72rem; opacity:0.75; font-family:monospace; margin-top:2px;">4%</div>
  3768. </div>
  3769. </div><div style="flex:2; background:#FFFFFF; display:flex; align-items:center; justify-content:center; color:#333; font-weight:800; font-size:0.85rem; padding:0 8px; letter-spacing:0.05em; position:relative;">
  3770. <div style="text-align:center;">
  3771. <div>纯净白</div>
  3772. <div style="font-size:0.72rem; opacity:0.75; font-family:monospace; margin-top:2px;">2%</div>
  3773. </div>
  3774. </div><div style="flex:1; background:#333333; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:0.85rem; padding:0 8px; letter-spacing:0.05em; position:relative;">
  3775. <div style="text-align:center;">
  3776. <div>深灰</div>
  3777. <div style="font-size:0.72rem; opacity:0.75; font-family:monospace; margin-top:2px;">1%</div>
  3778. </div>
  3779. </div>
  3780. </div>
  3781. </div>
  3782. <!-- 6 色彩详情卡 -->
  3783. <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:14px;">
  3784. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #2D9C5D; border-radius:var(--radius-md); overflow:hidden;">
  3785. <!-- 色块大头 -->
  3786. <div style="background:#2D9C5D; height:140px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px;">
  3787. <div style="position:absolute; top:12px; right:16px; background:rgba(0,0,0,0.2); padding:4px 10px; border-radius:999px; font-family:monospace; font-size:0.7rem; color:#fff; letter-spacing:0.08em;">60%</div>
  3788. <div style="color:#fff; font-family:var(--font-head); font-weight:900; font-size:1.4rem; letter-spacing:-0.01em;">江中绿</div>
  3789. <div style="color:rgba(255,255,255,0.85); font-size:0.78rem; margin-top:2px;">主色 · Primary</div>
  3790. </div>
  3791. <!-- 色值 -->
  3792. <div style="padding:14px 18px; border-bottom:1px dashed var(--border); font-family:var(--font-mono); font-size:0.78rem;">
  3793. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3794. <span style="color:var(--text-3);">HEX</span>
  3795. <span style="color:var(--text-1); font-weight:700;">#2D9C5D</span>
  3796. </div>
  3797. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3798. <span style="color:var(--text-3);">RGB</span>
  3799. <span style="color:var(--text-1);">R:45 G:156 B:93</span>
  3800. </div>
  3801. <div style="display:flex; justify-content:space-between; padding:3px 0;">
  3802. <span style="color:var(--text-3);">CMYK</span>
  3803. <span style="color:var(--text-1); font-size:0.72rem;">C:76 M:12 Y:89 K:0</span>
  3804. </div>
  3805. </div>
  3806. <!-- 应用说明 -->
  3807. <div style="padding:12px 18px 16px;">
  3808. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  3809. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">品牌主导色 · 包装主色 · CTA 按钮</div>
  3810. <div style="margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); font-size:0.74rem; color:var(--text-3); font-style:italic;">心理:健康、自然、信任</div>
  3811. </div>
  3812. </div>
  3813. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #D4A574; border-radius:var(--radius-md); overflow:hidden;">
  3814. <!-- 色块大头 -->
  3815. <div style="background:#D4A574; height:140px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px;">
  3816. <div style="position:absolute; top:12px; right:16px; background:rgba(0,0,0,0.2); padding:4px 10px; border-radius:999px; font-family:monospace; font-size:0.7rem; color:#fff; letter-spacing:0.08em;">25%</div>
  3817. <div style="color:#fff; font-family:var(--font-head); font-weight:900; font-size:1.4rem; letter-spacing:-0.01em;">琥珀金</div>
  3818. <div style="color:rgba(255,255,255,0.85); font-size:0.78rem; margin-top:2px;">辅色 · Secondary</div>
  3819. </div>
  3820. <!-- 色值 -->
  3821. <div style="padding:14px 18px; border-bottom:1px dashed var(--border); font-family:var(--font-mono); font-size:0.78rem;">
  3822. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3823. <span style="color:var(--text-3);">HEX</span>
  3824. <span style="color:var(--text-1); font-weight:700;">#D4A574</span>
  3825. </div>
  3826. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3827. <span style="color:var(--text-3);">RGB</span>
  3828. <span style="color:var(--text-1);">R:212 G:165 B:116</span>
  3829. </div>
  3830. <div style="display:flex; justify-content:space-between; padding:3px 0;">
  3831. <span style="color:var(--text-3);">CMYK</span>
  3832. <span style="color:var(--text-1); font-size:0.72rem;">C:17 M:38 Y:59 K:0</span>
  3833. </div>
  3834. </div>
  3835. <!-- 应用说明 -->
  3836. <div style="padding:12px 18px 16px;">
  3837. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  3838. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">高端感 · 守护感 · 重要文字/标题</div>
  3839. <div style="margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); font-size:0.74rem; color:var(--text-3); font-style:italic;">心理:温暖、珍贵、可信</div>
  3840. </div>
  3841. </div>
  3842. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #0085CA; border-radius:var(--radius-md); overflow:hidden;">
  3843. <!-- 色块大头 -->
  3844. <div style="background:#0085CA; height:140px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px;">
  3845. <div style="position:absolute; top:12px; right:16px; background:rgba(0,0,0,0.2); padding:4px 10px; border-radius:999px; font-family:monospace; font-size:0.7rem; color:#fff; letter-spacing:0.08em;">8%</div>
  3846. <div style="color:#fff; font-family:var(--font-head); font-weight:900; font-size:1.4rem; letter-spacing:-0.01em;">科技蓝</div>
  3847. <div style="color:rgba(255,255,255,0.85); font-size:0.78rem; margin-top:2px;">点缀色 · Accent 1</div>
  3848. </div>
  3849. <!-- 色值 -->
  3850. <div style="padding:14px 18px; border-bottom:1px dashed var(--border); font-family:var(--font-mono); font-size:0.78rem;">
  3851. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3852. <span style="color:var(--text-3);">HEX</span>
  3853. <span style="color:var(--text-1); font-weight:700;">#0085CA</span>
  3854. </div>
  3855. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3856. <span style="color:var(--text-3);">RGB</span>
  3857. <span style="color:var(--text-1);">R:0 G:133 B:202</span>
  3858. </div>
  3859. <div style="display:flex; justify-content:space-between; padding:3px 0;">
  3860. <span style="color:var(--text-3);">CMYK</span>
  3861. <span style="color:var(--text-1); font-size:0.72rem;">C:100 M:29 Y:0 K:0</span>
  3862. </div>
  3863. </div>
  3864. <!-- 应用说明 -->
  3865. <div style="padding:12px 18px 16px;">
  3866. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  3867. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">NAC 分子 · 循证医学 · 数据可视化</div>
  3868. <div style="margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); font-size:0.74rem; color:var(--text-3); font-style:italic;">心理:专业、理性、精准</div>
  3869. </div>
  3870. </div>
  3871. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #FF8C42; border-radius:var(--radius-md); overflow:hidden;">
  3872. <!-- 色块大头 -->
  3873. <div style="background:#FF8C42; height:140px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px;">
  3874. <div style="position:absolute; top:12px; right:16px; background:rgba(0,0,0,0.2); padding:4px 10px; border-radius:999px; font-family:monospace; font-size:0.7rem; color:#fff; letter-spacing:0.08em;">4%</div>
  3875. <div style="color:#fff; font-family:var(--font-head); font-weight:900; font-size:1.4rem; letter-spacing:-0.01em;">温暖橙</div>
  3876. <div style="color:rgba(255,255,255,0.85); font-size:0.78rem; margin-top:2px;">点缀色 · Accent 2</div>
  3877. </div>
  3878. <!-- 色值 -->
  3879. <div style="padding:14px 18px; border-bottom:1px dashed var(--border); font-family:var(--font-mono); font-size:0.78rem;">
  3880. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3881. <span style="color:var(--text-3);">HEX</span>
  3882. <span style="color:var(--text-1); font-weight:700;">#FF8C42</span>
  3883. </div>
  3884. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3885. <span style="color:var(--text-3);">RGB</span>
  3886. <span style="color:var(--text-1);">R:255 G:140 B:66</span>
  3887. </div>
  3888. <div style="display:flex; justify-content:space-between; padding:3px 0;">
  3889. <span style="color:var(--text-3);">CMYK</span>
  3890. <span style="color:var(--text-1); font-size:0.72rem;">C:0 M:56 Y:85 K:0</span>
  3891. </div>
  3892. </div>
  3893. <!-- 应用说明 -->
  3894. <div style="padding:12px 18px 16px;">
  3895. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  3896. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">姜黄分子 · 警示/活力 · L-04 泡腾片版本</div>
  3897. <div style="margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); font-size:0.74rem; color:var(--text-3); font-style:italic;">心理:活力、温度、希望</div>
  3898. </div>
  3899. </div>
  3900. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #FFFFFF; border-radius:var(--radius-md); overflow:hidden;">
  3901. <!-- 色块大头 -->
  3902. <div style="background:#FFFFFF; height:140px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px;">
  3903. <div style="position:absolute; top:12px; right:16px; background:rgba(0,0,0,0.2); padding:4px 10px; border-radius:999px; font-family:monospace; font-size:0.7rem; color:#fff; letter-spacing:0.08em;">2%</div>
  3904. <div style="color:#333; font-family:var(--font-head); font-weight:900; font-size:1.4rem; letter-spacing:-0.01em;">纯净白</div>
  3905. <div style="color:#666; font-size:0.78rem; margin-top:2px;">背景色 · Base Light</div>
  3906. </div>
  3907. <!-- 色值 -->
  3908. <div style="padding:14px 18px; border-bottom:1px dashed var(--border); font-family:var(--font-mono); font-size:0.78rem;">
  3909. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3910. <span style="color:var(--text-3);">HEX</span>
  3911. <span style="color:var(--text-1); font-weight:700;">#FFFFFF</span>
  3912. </div>
  3913. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3914. <span style="color:var(--text-3);">RGB</span>
  3915. <span style="color:var(--text-1);">R:255 G:255 B:255</span>
  3916. </div>
  3917. <div style="display:flex; justify-content:space-between; padding:3px 0;">
  3918. <span style="color:var(--text-3);">CMYK</span>
  3919. <span style="color:var(--text-1); font-size:0.72rem;">C:0 M:0 Y:0 K:0</span>
  3920. </div>
  3921. </div>
  3922. <!-- 应用说明 -->
  3923. <div style="padding:12px 18px 16px;">
  3924. <div class="text-mono text-xs" style="color:#999; letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  3925. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">V2 科普版底色 · 详情页主背景</div>
  3926. <div style="margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); font-size:0.74rem; color:var(--text-3); font-style:italic;">心理:干净、透明、专业</div>
  3927. </div>
  3928. </div>
  3929. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:4px solid #333333; border-radius:var(--radius-md); overflow:hidden;">
  3930. <!-- 色块大头 -->
  3931. <div style="background:#333333; height:140px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:16px 20px;">
  3932. <div style="position:absolute; top:12px; right:16px; background:rgba(0,0,0,0.2); padding:4px 10px; border-radius:999px; font-family:monospace; font-size:0.7rem; color:#fff; letter-spacing:0.08em;">1%</div>
  3933. <div style="color:#fff; font-family:var(--font-head); font-weight:900; font-size:1.4rem; letter-spacing:-0.01em;">深灰</div>
  3934. <div style="color:rgba(255,255,255,0.85); font-size:0.78rem; margin-top:2px;">文字色 · Text</div>
  3935. </div>
  3936. <!-- 色值 -->
  3937. <div style="padding:14px 18px; border-bottom:1px dashed var(--border); font-family:var(--font-mono); font-size:0.78rem;">
  3938. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3939. <span style="color:var(--text-3);">HEX</span>
  3940. <span style="color:var(--text-1); font-weight:700;">#333333</span>
  3941. </div>
  3942. <div style="display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04);">
  3943. <span style="color:var(--text-3);">RGB</span>
  3944. <span style="color:var(--text-1);">R:51 G:51 B:51</span>
  3945. </div>
  3946. <div style="display:flex; justify-content:space-between; padding:3px 0;">
  3947. <span style="color:var(--text-3);">CMYK</span>
  3948. <span style="color:var(--text-1); font-size:0.72rem;">C:10 M:10 Y:10 K:80</span>
  3949. </div>
  3950. </div>
  3951. <!-- 应用说明 -->
  3952. <div style="padding:12px 18px 16px;">
  3953. <div class="text-mono text-xs" style="color:#333333; letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  3954. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.5;">正文文字 · 合规信息</div>
  3955. <div style="margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); font-size:0.74rem; color:var(--text-3); font-style:italic;">心理:清晰、稳定、权威</div>
  3956. </div>
  3957. </div>
  3958. </div>
  3959. <!-- 色彩心理学应用 -->
  3960. <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, rgba(45,156,93,0.06), rgba(212,165,116,0.04)); border:1px dashed #8B5CF644; border-radius:var(--radius-md);">
  3961. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.15em; margin-bottom:10px;">🎨 COLOR PSYCHOLOGY · 色彩心理学应用</div>
  3962. <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; color:var(--text-1); font-size:0.9rem; line-height:1.7;">
  3963. <div>
  3964. <strong style="color:#2D9C5D;">绿色 = 健康基座</strong><br/>
  3965. <span style="color:var(--text-2); font-size:0.82rem;">承载江中 45 年品牌资产,代表"自然 · 健康 · 天然有机"的基础信任感</span>
  3966. </div>
  3967. <div>
  3968. <strong style="color:#D4A574;">金色 = 高端 + 守护</strong><br/>
  3969. <span style="color:var(--text-2); font-size:0.82rem;">区隔国产低价竞品,对标海外爆款 Natures Craft 琥珀色系,传递珍贵与温度</span>
  3970. </div>
  3971. <div>
  3972. <strong style="color:#0085CA;">蓝色 = 科学循证</strong><br/>
  3973. <span style="color:var(--text-2); font-size:0.82rem;">在"成分党"人群触达中叠加"循证医学"可信感,呼应 NAC 成分的精准科技形象</span>
  3974. </div>
  3975. </div>
  3976. </div>
  3977. </div>
  3978. </section>
  3979. <section class="report-section" id="kv-4" data-tone="purple" data-slide-num="26/36">
  3980. <div class="section-inner">
  3981. <div class="section-head rise-in">
  3982. <div class="section-eyebrow" style="color:#8B5CF6;">2.4.4 · TYPOGRAPHY SYSTEM</div>
  3983. <h2 class="text-h1"><span class="headline-anim">字体系统 · 6 种应用场景规范</span></h2>
  3984. <p class="section-sub">中文主字族:思源黑体(开源 · 商用免费)· 英文副字族:Inter / JetBrains Mono · 每种场景明确字重 / 字号 / 风格 / 理由</p>
  3985. </div>
  3986. <!-- 6 种字体应用 -->
  3987. <div style="display:flex; flex-direction:column; gap:14px;">
  3988. <div class="fade-up" style="display:grid; grid-template-columns: 60px 220px 1fr; gap:22px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #8B5CF6; border-radius:var(--radius-md);">
  3989. <!-- Index -->
  3990. <div style="text-align:center;">
  3991. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#8B5CF6; line-height:1;">01</div>
  3992. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-top:2px;">Display</div>
  3993. </div>
  3994. <!-- 规格 -->
  3995. <div>
  3996. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  3997. <div style="font-weight:800; font-size:1rem; color:var(--text-1); margin-bottom:10px; line-height:1.4;">产品名 · 肝纯片</div>
  3998. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.6;">
  3999. <div><span style="color:var(--text-3);">字体:</span>思源黑体 HeavyExtra</div>
  4000. <div><span style="color:var(--text-3);">字重:</span><span class="text-mono" style="color:#8B5CF6;">900</span></div>
  4001. <div><span style="color:var(--text-3);">字号:</span><span class="text-mono" style="color:#8B5CF6;">36-72px</span></div>
  4002. </div>
  4003. </div>
  4004. <!-- Demo + Reason -->
  4005. <div>
  4006. <div style="padding:16px 20px; background:rgba(255,255,255,0.02); border-radius:8px; margin-bottom:10px;">
  4007. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:8px;">DEMO</div>
  4008. <div style="font-weight:900; font-size:2rem; color:#8B5CF6; line-height:1.3; font-family:var(--font-head); letter-spacing:-0.01em; text-transform:none;">肝纯片®</div>
  4009. </div>
  4010. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic; padding-left:12px; border-left:2px solid #8B5CF644;">字形厚重 · 货架识别度高 · 与江中品牌字族家族一致</div>
  4011. </div>
  4012. </div>
  4013. <div class="fade-up" style="display:grid; grid-template-columns: 60px 220px 1fr; gap:22px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #2D9C5D; border-radius:var(--radius-md);">
  4014. <!-- Index -->
  4015. <div style="text-align:center;">
  4016. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#2D9C5D; line-height:1;">02</div>
  4017. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-top:2px;">Heading</div>
  4018. </div>
  4019. <!-- 规格 -->
  4020. <div>
  4021. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  4022. <div style="font-weight:800; font-size:1rem; color:var(--text-1); margin-bottom:10px; line-height:1.4;">副标题 · 新一代复合护肝片</div>
  4023. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.6;">
  4024. <div><span style="color:var(--text-3);">字体:</span>思源黑体 Bold</div>
  4025. <div><span style="color:var(--text-3);">字重:</span><span class="text-mono" style="color:#2D9C5D;">700</span></div>
  4026. <div><span style="color:var(--text-3);">字号:</span><span class="text-mono" style="color:#2D9C5D;">18-28px</span></div>
  4027. </div>
  4028. </div>
  4029. <!-- Demo + Reason -->
  4030. <div>
  4031. <div style="padding:16px 20px; background:rgba(255,255,255,0.02); border-radius:8px; margin-bottom:10px;">
  4032. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:8px;">DEMO</div>
  4033. <div style="font-weight:700; font-size:1.2rem; color:#2D9C5D; line-height:1.3; font-family:var(--font-head); letter-spacing:-0.01em; text-transform:none;">新一代复合护肝片</div>
  4034. </div>
  4035. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic; padding-left:12px; border-left:2px solid #2D9C5D44;">清晰、专业 · 承载核心定位的可阅读字重</div>
  4036. </div>
  4037. </div>
  4038. <div class="fade-up" style="display:grid; grid-template-columns: 60px 220px 1fr; gap:22px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #D4A574; border-radius:var(--radius-md);">
  4039. <!-- Index -->
  4040. <div style="text-align:center;">
  4041. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#D4A574; line-height:1;">03</div>
  4042. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-top:2px;">Slogan</div>
  4043. </div>
  4044. <!-- 规格 -->
  4045. <div>
  4046. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  4047. <div style="font-weight:800; font-size:1rem; color:var(--text-1); margin-bottom:10px; line-height:1.4;">核心诉求语 · 一片四守</div>
  4048. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.6;">
  4049. <div><span style="color:var(--text-3);">字体:</span>思源黑体 Bold</div>
  4050. <div><span style="color:var(--text-3);">字重:</span><span class="text-mono" style="color:#D4A574;">700</span></div>
  4051. <div><span style="color:var(--text-3);">字号:</span><span class="text-mono" style="color:#D4A574;">24-44px</span></div>
  4052. </div>
  4053. </div>
  4054. <!-- Demo + Reason -->
  4055. <div>
  4056. <div style="padding:16px 20px; background:rgba(255,255,255,0.02); border-radius:8px; margin-bottom:10px;">
  4057. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:8px;">DEMO</div>
  4058. <div style="font-weight:700; font-size:1.4rem; color:#D4A574; line-height:1.3; font-family:var(--font-head); letter-spacing:-0.01em; text-transform:none;">一片四守</div>
  4059. </div>
  4060. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic; padding-left:12px; border-left:2px solid #D4A57444;">醒目粗体 · 用于 hero 和 KV 中央 claim</div>
  4061. </div>
  4062. </div>
  4063. <div class="fade-up" style="display:grid; grid-template-columns: 60px 220px 1fr; gap:22px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #6B6B6B; border-radius:var(--radius-md);">
  4064. <!-- Index -->
  4065. <div style="text-align:center;">
  4066. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#6B6B6B; line-height:1;">04</div>
  4067. <div class="text-mono text-xs" style="color:#6B6B6B; letter-spacing:0.1em; margin-top:2px;">Body</div>
  4068. </div>
  4069. <!-- 规格 -->
  4070. <div>
  4071. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  4072. <div style="font-weight:800; font-size:1rem; color:var(--text-1); margin-bottom:10px; line-height:1.4;">正文 · 成分/说明</div>
  4073. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.6;">
  4074. <div><span style="color:var(--text-3);">字体:</span>思源黑体 Regular</div>
  4075. <div><span style="color:var(--text-3);">字重:</span><span class="text-mono" style="color:#6B6B6B;">400</span></div>
  4076. <div><span style="color:var(--text-3);">字号:</span><span class="text-mono" style="color:#6B6B6B;">11-14px</span></div>
  4077. </div>
  4078. </div>
  4079. <!-- Demo + Reason -->
  4080. <div>
  4081. <div style="padding:16px 20px; background:rgba(255,255,255,0.02); border-radius:8px; margin-bottom:10px;">
  4082. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:8px;">DEMO</div>
  4083. <div style="font-weight:400; font-size:0.9rem; color:#6B6B6B; line-height:1.3; font-family:var(--font-head); letter-spacing:-0.01em; text-transform:none;">水飞蓟 200mg · 姜黄 150mg · 蒲公英 100mg · NAC 100mg</div>
  4084. </div>
  4085. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic; padding-left:12px; border-left:2px solid #6B6B6B44;">清晰易读 · 适合长段合规信息</div>
  4086. </div>
  4087. </div>
  4088. <div class="fade-up" style="display:grid; grid-template-columns: 60px 220px 1fr; gap:22px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #0085CA; border-radius:var(--radius-md);">
  4089. <!-- Index -->
  4090. <div style="text-align:center;">
  4091. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#0085CA; line-height:1;">05</div>
  4092. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-top:2px;">Mono</div>
  4093. </div>
  4094. <!-- 规格 -->
  4095. <div>
  4096. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  4097. <div style="font-weight:800; font-size:1rem; color:var(--text-1); margin-bottom:10px; line-height:1.4;">数据/克数 · mg 数值</div>
  4098. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.6;">
  4099. <div><span style="color:var(--text-3);">字体:</span>JetBrains Mono / Roboto Mono</div>
  4100. <div><span style="color:var(--text-3);">字重:</span><span class="text-mono" style="color:#0085CA;">600</span></div>
  4101. <div><span style="color:var(--text-3);">字号:</span><span class="text-mono" style="color:#0085CA;">14-20px</span></div>
  4102. </div>
  4103. </div>
  4104. <!-- Demo + Reason -->
  4105. <div>
  4106. <div style="padding:16px 20px; background:rgba(255,255,255,0.02); border-radius:8px; margin-bottom:10px;">
  4107. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:8px;">DEMO</div>
  4108. <div style="font-weight:600; font-size:1rem; color:#0085CA; line-height:1.3; font-family:var(--font-mono); letter-spacing:0.05em; text-transform:none;">200 · 150 · 100 · 100 mg</div>
  4109. </div>
  4110. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic; padding-left:12px; border-left:2px solid #0085CA44;">等宽字 · 数据对齐 · 精准可信</div>
  4111. </div>
  4112. </div>
  4113. <div class="fade-up" style="display:grid; grid-template-columns: 60px 220px 1fr; gap:22px; align-items:center; padding:22px 28px; background:var(--bg-1); border:1px solid var(--border); border-left:4px solid #8B5CF6; border-radius:var(--radius-md);">
  4114. <!-- Index -->
  4115. <div style="text-align:center;">
  4116. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#8B5CF6; line-height:1;">06</div>
  4117. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-top:2px;">Label</div>
  4118. </div>
  4119. <!-- 规格 -->
  4120. <div>
  4121. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:6px;">APPLICATION</div>
  4122. <div style="font-weight:800; font-size:1rem; color:var(--text-1); margin-bottom:10px; line-height:1.4;">英文 Tag / Badge</div>
  4123. <div style="font-size:0.78rem; color:var(--text-2); line-height:1.6;">
  4124. <div><span style="color:var(--text-3);">字体:</span>Inter / Montserrat</div>
  4125. <div><span style="color:var(--text-3);">字重:</span><span class="text-mono" style="color:#8B5CF6;">800</span></div>
  4126. <div><span style="color:var(--text-3);">字号:</span><span class="text-mono" style="color:#8B5CF6;">10-14px</span></div>
  4127. </div>
  4128. </div>
  4129. <!-- Demo + Reason -->
  4130. <div>
  4131. <div style="padding:16px 20px; background:rgba(255,255,255,0.02); border-radius:8px; margin-bottom:10px;">
  4132. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.1em; margin-bottom:8px;">DEMO</div>
  4133. <div style="font-weight:800; font-size:0.95rem; color:#8B5CF6; line-height:1.3; font-family:Inter, var(--font-head); letter-spacing:0.1em; text-transform:uppercase;">NEW GEN · 4 SHIELDS</div>
  4134. </div>
  4135. <div style="font-size:0.82rem; color:var(--text-2); line-height:1.55; font-style:italic; padding-left:12px; border-left:2px solid #8B5CF644;">现代感 · 国际化 · 与中文配对美观</div>
  4136. </div>
  4137. </div>
  4138. </div>
  4139. <!-- 字体使用规范 -->
  4140. <div class="fade-up" style="margin-top:24px; padding:22px 28px; background:linear-gradient(135deg, #8B5CF608, rgba(255,255,255,0.01)); border:1px dashed #8B5CF644; border-radius:var(--radius-md);">
  4141. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.15em; margin-bottom:10px;">📐 TYPOGRAPHY RULES · 字体使用规范</div>
  4142. <div style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; color:var(--text-1); font-size:0.9rem; line-height:1.7;">
  4143. <div>
  4144. <strong style="color:#8B5CF6;">字重层级</strong><br/>
  4145. <span style="color:var(--text-2); font-size:0.82rem;">Display 900 → Heading 700 → Body 400 三级递进,禁止使用中间字重</span>
  4146. </div>
  4147. <div>
  4148. <strong style="color:#8B5CF6;">中英配对</strong><br/>
  4149. <span style="color:var(--text-2); font-size:0.82rem;">思源黑体 × Inter 搭配 · 避免使用过多装饰字体</span>
  4150. </div>
  4151. <div>
  4152. <strong style="color:#8B5CF6;">数字呈现</strong><br/>
  4153. <span style="color:var(--text-2); font-size:0.82rem;">所有克数 / 百分比 / 数据必须用等宽字体(JetBrains Mono),确保对齐和精准感</span>
  4154. </div>
  4155. </div>
  4156. </div>
  4157. </div>
  4158. </section>
  4159. <section class="report-section" id="kv-5" data-tone="purple" data-slide-num="27/36">
  4160. <div class="section-inner">
  4161. <div class="section-head rise-in">
  4162. <div class="section-eyebrow" style="color:#8B5CF6;">2.4.5 · APPLICATION EXTENSIONS</div>
  4163. <h2 class="text-h1"><span class="headline-anim">应用延展 · 6 大场景适配规范</span></h2>
  4164. <p class="section-sub">3 套 KV 母版 × 6 种应用场景 · 每个场景标注使用版本 / 尺寸 / 调整要点 · 设计团队拿到即可执行</p>
  4165. </div>
  4166. <!-- 6 场景卡片 -->
  4167. <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:16px;">
  4168. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #0085CA; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  4169. <!-- 场景头 -->
  4170. <div style="display:flex; justify-content:space-between; align-items:start;">
  4171. <div>
  4172. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em; margin-bottom:4px;">APPLICATION</div>
  4173. <h3 class="text-h3" style="margin:0; font-size:1.1rem; color:var(--text-1); line-height:1.4;">电商详情页 Banner</h3>
  4174. </div>
  4175. <div style="font-size:2.2rem; line-height:1;">🛒</div>
  4176. </div>
  4177. <!-- 使用版本 -->
  4178. <div style="padding:10px 12px; background:#0085CA12; border-radius:6px; font-size:0.82rem;">
  4179. <span style="color:var(--text-3); margin-right:6px;">使用版本:</span>
  4180. <strong style="color:#0085CA;">V2 理性科普版</strong>
  4181. </div>
  4182. <!-- 尺寸 -->
  4183. <div style="font-size:0.78rem; padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:4px;">
  4184. <span class="text-mono" style="color:var(--text-3); margin-right:6px;">SIZE:</span>
  4185. <span class="text-mono" style="color:var(--text-1);">1920×600 / 750×400</span>
  4186. </div>
  4187. <!-- 调整要点 -->
  4188. <div>
  4189. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">TWEAKS · 调整要点</div>
  4190. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  4191. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>增加产品实物图右对齐</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>加 CTA &quot;立即购买&quot;按钮</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>左下角促销标</li>
  4192. </ul>
  4193. </div>
  4194. <!-- 渠道 -->
  4195. <div style="margin-top:auto; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  4196. <span style="color:var(--text-3);">投放渠道:</span>
  4197. <span style="color:#0085CA; font-weight:600;">天猫 / 京东 / 拼多多</span>
  4198. </div>
  4199. </div>
  4200. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF4D8D; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  4201. <!-- 场景头 -->
  4202. <div style="display:flex; justify-content:space-between; align-items:start;">
  4203. <div>
  4204. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.12em; margin-bottom:4px;">APPLICATION</div>
  4205. <h3 class="text-h3" style="margin:0; font-size:1.1rem; color:var(--text-1); line-height:1.4;">社交媒体海报</h3>
  4206. </div>
  4207. <div style="font-size:2.2rem; line-height:1;">📱</div>
  4208. </div>
  4209. <!-- 使用版本 -->
  4210. <div style="padding:10px 12px; background:#FF4D8D12; border-radius:6px; font-size:0.82rem;">
  4211. <span style="color:var(--text-3); margin-right:6px;">使用版本:</span>
  4212. <strong style="color:#FF4D8D;">V1 情感守护版</strong>
  4213. </div>
  4214. <!-- 尺寸 -->
  4215. <div style="font-size:0.78rem; padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:4px;">
  4216. <span class="text-mono" style="color:var(--text-3); margin-right:6px;">SIZE:</span>
  4217. <span class="text-mono" style="color:var(--text-1);">1080×1440 / 1080×1080</span>
  4218. </div>
  4219. <!-- 调整要点 -->
  4220. <div>
  4221. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">TWEAKS · 调整要点</div>
  4222. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  4223. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>加品牌 LOGO 顶部</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>底部二维码+小红书账号</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>适配暗色/明色两版</li>
  4224. </ul>
  4225. </div>
  4226. <!-- 渠道 -->
  4227. <div style="margin-top:auto; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  4228. <span style="color:var(--text-3);">投放渠道:</span>
  4229. <span style="color:#FF4D8D; font-weight:600;">小红书 / 微博 / 朋友圈</span>
  4230. </div>
  4231. </div>
  4232. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #2D9C5D; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  4233. <!-- 场景头 -->
  4234. <div style="display:flex; justify-content:space-between; align-items:start;">
  4235. <div>
  4236. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; margin-bottom:4px;">APPLICATION</div>
  4237. <h3 class="text-h3" style="margin:0; font-size:1.1rem; color:var(--text-1); line-height:1.4;">药店 POP 物料</h3>
  4238. </div>
  4239. <div style="font-size:2.2rem; line-height:1;">🏪</div>
  4240. </div>
  4241. <!-- 使用版本 -->
  4242. <div style="padding:10px 12px; background:#2D9C5D12; border-radius:6px; font-size:0.82rem;">
  4243. <span style="color:var(--text-3); margin-right:6px;">使用版本:</span>
  4244. <strong style="color:#2D9C5D;">V2 理性科普版</strong>
  4245. </div>
  4246. <!-- 尺寸 -->
  4247. <div style="font-size:0.78rem; padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:4px;">
  4248. <span class="text-mono" style="color:var(--text-3); margin-right:6px;">SIZE:</span>
  4249. <span class="text-mono" style="color:var(--text-1);">A3 立牌 / 台卡</span>
  4250. </div>
  4251. <!-- 调整要点 -->
  4252. <div>
  4253. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">TWEAKS · 调整要点</div>
  4254. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  4255. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>突出对比式差异化</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>加&quot;本店热销&quot;标</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>店员推荐话术卡</li>
  4256. </ul>
  4257. </div>
  4258. <!-- 渠道 -->
  4259. <div style="margin-top:auto; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  4260. <span style="color:var(--text-3);">投放渠道:</span>
  4261. <span style="color:#2D9C5D; font-weight:600;">OTC 药店线下</span>
  4262. </div>
  4263. </div>
  4264. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #FF8C42; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  4265. <!-- 场景头 -->
  4266. <div style="display:flex; justify-content:space-between; align-items:start;">
  4267. <div>
  4268. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.12em; margin-bottom:4px;">APPLICATION</div>
  4269. <h3 class="text-h3" style="margin:0; font-size:1.1rem; color:var(--text-1); line-height:1.4;">线下活动背景板</h3>
  4270. </div>
  4271. <div style="font-size:2.2rem; line-height:1;">🎪</div>
  4272. </div>
  4273. <!-- 使用版本 -->
  4274. <div style="padding:10px 12px; background:#FF8C4212; border-radius:6px; font-size:0.82rem;">
  4275. <span style="color:var(--text-3); margin-right:6px;">使用版本:</span>
  4276. <strong style="color:#FF8C42;">V1 情感守护版</strong>
  4277. </div>
  4278. <!-- 尺寸 -->
  4279. <div style="font-size:0.78rem; padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:4px;">
  4280. <span class="text-mono" style="color:var(--text-3); margin-right:6px;">SIZE:</span>
  4281. <span class="text-mono" style="color:var(--text-1);">2400×1200 大幅</span>
  4282. </div>
  4283. <!-- 调整要点 -->
  4284. <div>
  4285. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">TWEAKS · 调整要点</div>
  4286. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  4287. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>增加品牌 slogan &quot;家庭健康守护者&quot;</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>加江中品牌家族产品矩阵</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>二维码引流私域</li>
  4288. </ul>
  4289. </div>
  4290. <!-- 渠道 -->
  4291. <div style="margin-top:auto; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  4292. <span style="color:var(--text-3);">投放渠道:</span>
  4293. <span style="color:#FF8C42; font-weight:600;">药店开业 / 医院健康讲座</span>
  4294. </div>
  4295. </div>
  4296. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #8B5CF6; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  4297. <!-- 场景头 -->
  4298. <div style="display:flex; justify-content:space-between; align-items:start;">
  4299. <div>
  4300. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.12em; margin-bottom:4px;">APPLICATION</div>
  4301. <h3 class="text-h3" style="margin:0; font-size:1.1rem; color:var(--text-1); line-height:1.4;">短视频封面</h3>
  4302. </div>
  4303. <div style="font-size:2.2rem; line-height:1;">🎬</div>
  4304. </div>
  4305. <!-- 使用版本 -->
  4306. <div style="padding:10px 12px; background:#8B5CF612; border-radius:6px; font-size:0.82rem;">
  4307. <span style="color:var(--text-3); margin-right:6px;">使用版本:</span>
  4308. <strong style="color:#8B5CF6;">V3 对比进化版</strong>
  4309. </div>
  4310. <!-- 尺寸 -->
  4311. <div style="font-size:0.78rem; padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:4px;">
  4312. <span class="text-mono" style="color:var(--text-3); margin-right:6px;">SIZE:</span>
  4313. <span class="text-mono" style="color:var(--text-1);">1080×1920 竖屏</span>
  4314. </div>
  4315. <!-- 调整要点 -->
  4316. <div>
  4317. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">TWEAKS · 调整要点</div>
  4318. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  4319. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>加冲击力文字 &quot;单成分 → 4 重守护&quot;</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>0.5s 吸睛</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>加博主 IP 形象</li>
  4320. </ul>
  4321. </div>
  4322. <!-- 渠道 -->
  4323. <div style="margin-top:auto; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  4324. <span style="color:var(--text-3);">投放渠道:</span>
  4325. <span style="color:#8B5CF6; font-weight:600;">抖音 / 视频号 / 小红书视频</span>
  4326. </div>
  4327. </div>
  4328. <div style="background:var(--bg-1); border:1px solid var(--border); border-top:3px solid #0085CA; border-radius:var(--radius-md); padding:22px 24px; display:flex; flex-direction:column; gap:14px;">
  4329. <!-- 场景头 -->
  4330. <div style="display:flex; justify-content:space-between; align-items:start;">
  4331. <div>
  4332. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em; margin-bottom:4px;">APPLICATION</div>
  4333. <h3 class="text-h3" style="margin:0; font-size:1.1rem; color:var(--text-1); line-height:1.4;">产品手册封面</h3>
  4334. </div>
  4335. <div style="font-size:2.2rem; line-height:1;">📘</div>
  4336. </div>
  4337. <!-- 使用版本 -->
  4338. <div style="padding:10px 12px; background:#0085CA12; border-radius:6px; font-size:0.82rem;">
  4339. <span style="color:var(--text-3); margin-right:6px;">使用版本:</span>
  4340. <strong style="color:#0085CA;">V2 理性科普版</strong>
  4341. </div>
  4342. <!-- 尺寸 -->
  4343. <div style="font-size:0.78rem; padding:8px 12px; background:rgba(255,255,255,0.02); border-radius:4px;">
  4344. <span class="text-mono" style="color:var(--text-3); margin-right:6px;">SIZE:</span>
  4345. <span class="text-mono" style="color:var(--text-1);">A4 210×297mm</span>
  4346. </div>
  4347. <!-- 调整要点 -->
  4348. <div>
  4349. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.12em; margin-bottom:8px;">TWEAKS · 调整要点</div>
  4350. <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px;">
  4351. <li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>加江中集团完整 LOGO</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>加临床数据引用源</li><li style="font-size:0.8rem; color:var(--text-1); padding-left:14px; position:relative; line-height:1.5;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>品质承诺声明</li>
  4352. </ul>
  4353. </div>
  4354. <!-- 渠道 -->
  4355. <div style="margin-top:auto; padding-top:10px; border-top:1px dashed var(--border); font-size:0.75rem;">
  4356. <span style="color:var(--text-3);">投放渠道:</span>
  4357. <span style="color:#0085CA; font-weight:600;">医生教育 / 药师培训 / 门店摆放</span>
  4358. </div>
  4359. </div>
  4360. </div>
  4361. <!-- 资产交付清单 -->
  4362. <h3 class="text-h2 fade-up" style="margin-top:32px; margin-bottom:14px;">📦 Asset Delivery · 设计团队交付清单</h3>
  4363. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px 28px;">
  4364. <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;">
  4365. <div style="text-align:center; padding:16px; background:#8B5CF608; border-radius:8px; border:1px solid #8B5CF622;">
  4366. <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:#8B5CF6; line-height:1;">3</div>
  4367. <div class="text-mono text-xs" style="color:#8B5CF6; margin-top:4px; letter-spacing:0.08em;">KV VERSIONS</div>
  4368. <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; line-height:1.4;">情感 / 理性 / 对比</div>
  4369. </div>
  4370. <div style="text-align:center; padding:16px; background:#2D9C5D08; border-radius:8px; border:1px solid #2D9C5D22;">
  4371. <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:#2D9C5D; line-height:1;">6</div>
  4372. <div class="text-mono text-xs" style="color:#2D9C5D; margin-top:4px; letter-spacing:0.08em;">APPLICATIONS</div>
  4373. <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; line-height:1.4;">电商 / 社媒 / 药店 / 活动 / 视频 / 手册</div>
  4374. </div>
  4375. <div style="text-align:center; padding:16px; background:#0085CA08; border-radius:8px; border:1px solid #0085CA22;">
  4376. <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:#0085CA; line-height:1;">18</div>
  4377. <div class="text-mono text-xs" style="color:#0085CA; margin-top:4px; letter-spacing:0.08em;">TOTAL FILES</div>
  4378. <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; line-height:1.4;">3 × 6 场景组合</div>
  4379. </div>
  4380. <div style="text-align:center; padding:16px; background:#8B5CF608; border-radius:8px; border:1px solid #8B5CF622;">
  4381. <div style="font-family:var(--font-head); font-weight:900; font-size:2.4rem; color:#8B5CF6; line-height:1;">5</div>
  4382. <div class="text-mono text-xs" style="color:#8B5CF6; margin-top:4px; letter-spacing:0.08em;">SKU VARIANTS</div>
  4383. <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px; line-height:1.4;">L-01/02/03/04/05 版本色调适配</div>
  4384. </div>
  4385. </div>
  4386. </div>
  4387. </div>
  4388. </section>
  4389. <section class="report-section" id="value" data-tone="blue" data-slide-num="28/36" style="justify-content:center;">
  4390. <div class="section-inner">
  4391. <div class="rise-in" style="text-align:center; margin-bottom:48px;">
  4392. <div class="text-mono" style="color:#0085CA; letter-spacing:0.35em; font-size:0.8rem; margin-bottom:20px;">CHAPTER 2.5 · VALUE CHAIN</div>
  4393. <h1 style="font-family:var(--font-head); font-weight:900; font-size:clamp(4rem, 10vw, 8rem); line-height:0.92; letter-spacing:-0.04em; color:#fff; background:linear-gradient(135deg, #fff 30%, #0085CA 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 18px;">
  4394. 价值链
  4395. </h1>
  4396. <p class="text-poster" style="font-size:clamp(1.2rem, 2.2vw, 1.8rem); color:var(--text-2); font-weight:500; max-width:820px; margin:0 auto; line-height:1.5;">研发→生产→渠道→营销→服务→体验 6 环价值创造</p>
  4397. </div>
  4398. <div class="fade-up" style="max-width:920px; margin:0 auto 40px; padding:28px 36px; background:rgba(255,255,255,0.02); border-left:4px solid #0085CA; border-radius:0 var(--radius-md) var(--radius-md) 0;">
  4399. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em; margin-bottom:10px;">KEY TAKE · 本章核心</div>
  4400. <div style="font-size:1.15rem; line-height:1.75; color:var(--text-1);">研发端双路并进(循证护肝 + 中医疏肝),配合 <strong style="color:#0085CA;">一物一码</strong>、服用日历、<strong style="color:#0085CA;">独立第三方检测报告</strong>形成对抗「医生话术模板化」信任危机的完整价值闭环。</div>
  4401. </div>
  4402. <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:14px; max-width:1100px; margin:0 auto;">
  4403. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #0085CA;">
  4404. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; font-weight:700;">2.5.1</div>
  4405. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">价值主张画布</div>
  4406. </div>
  4407. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #0085CA;">
  4408. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; font-weight:700;">2.5.2</div>
  4409. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">价值创造链</div>
  4410. </div>
  4411. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #0085CA;">
  4412. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; font-weight:700;">2.5.3</div>
  4413. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">用户价值获取路径</div>
  4414. </div>
  4415. </div>
  4416. <div class="fade-up text-mono text-xs" style="margin-top:56px; text-align:center; color:var(--text-3); letter-spacing:0.2em;">
  4417. ↓ 滚动查看 3 个子章节展开
  4418. </div>
  4419. </div>
  4420. </section>
  4421. <section class="report-section" id="value-1" data-tone="blue" data-slide-num="29/36">
  4422. <div class="section-inner">
  4423. <div class="section-head rise-in">
  4424. <div class="section-eyebrow" style="color:#0085CA;">2.5.1 · VALUE PROPOSITION CANVAS</div>
  4425. <h2 class="text-h1"><span class="headline-anim">价值主张画布 · 用户痛点收益 × 产品功能映射</span></h2>
  4426. <p class="section-sub">Osterwalder 画布:左侧 VOC 提炼 <strong style="color:#0085CA;">6 痛点 × 6 收益</strong>,右侧产品 <strong style="color:#0085CA;">6 功能</strong> 一一映射</p>
  4427. </div>
  4428. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; margin-bottom:32px;">
  4429. <div style="display:grid; grid-template-columns:1fr 1fr; gap:24px;">
  4430. <div>
  4431. <div style="display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:2px solid #0085CA44; margin-bottom:16px;">
  4432. <div style="width:36px; height:36px; background:#0085CA22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">👥</div>
  4433. <div>
  4434. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em;">LEFT · CUSTOMER PROFILE</div>
  4435. <div style="font-size:1.1rem; font-weight:800; color:var(--text-1);">用户侧 · 痛点 & 期待收益</div>
  4436. </div>
  4437. </div>
  4438. <div style="margin-bottom:14px;">
  4439. <div style="font-size:0.9rem; font-weight:700; color:#FF4D8D; margin-bottom:10px;">😰 Pains · 6 大痛点(VOC 频次加权严重度)</div>
  4440. <div style="display:grid; gap:8px;">
  4441. <div style="padding:10px 12px; background:#FF4D8D08; border-left:3px solid #FF4D8D; border-radius:6px;">
  4442. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4443. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">🧩 同质化无从选择</div>
  4444. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">95</div>
  4445. </div>
  4446. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4; margin-bottom:3px;">市面上水飞蓟片、奶蓟草、复合片看似差不多,看不出真实差异</div>
  4447. <div style="font-size:0.7rem; color:#FF4D8D; font-style:italic;">VOC: &quot;水飞蓟、奶蓟草都差不多,不懂选&quot;</div>
  4448. </div>
  4449. <div style="padding:10px 12px; background:#FF4D8D08; border-left:3px solid #FF4D8D; border-radius:6px;">
  4450. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4451. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">🚫 信任危机·不要吃护肝片</div>
  4452. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">98</div>
  4453. </div>
  4454. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4; margin-bottom:3px;">VOC Top #3 主题,医生 KOL 反复质疑护肝片实际作用</div>
  4455. <div style="font-size:0.7rem; color:#FF4D8D; font-style:italic;">VOC: &quot;医生说护肝片没用,多喝水就行&quot;</div>
  4456. </div>
  4457. <div style="padding:10px 12px; background:#FF4D8D08; border-left:3px solid #FF4D8D; border-radius:6px;">
  4458. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4459. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">💊 单一成分效果弱</div>
  4460. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">85</div>
  4461. </div>
  4462. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4; margin-bottom:3px;">只吃单一水飞蓟效果不明显,需多成分协同</div>
  4463. <div style="font-size:0.7rem; color:#FF4D8D; font-style:italic;">VOC: &quot;单独吃水飞蓟 2 个月,转氨酶没降&quot;</div>
  4464. </div>
  4465. <div style="padding:10px 12px; background:#FF4D8D08; border-left:3px solid #FF4D8D; border-radius:6px;">
  4466. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4467. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">⏳ 见效慢·坚持难</div>
  4468. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">78</div>
  4469. </div>
  4470. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4; margin-bottom:3px;">保健品类长期服用,中途放弃率高</div>
  4471. <div style="font-size:0.7rem; color:#FF4D8D; font-style:italic;">VOC: &quot;吃了两瓶没感觉就不想吃了&quot;</div>
  4472. </div>
  4473. <div style="padding:10px 12px; background:#FF4D8D08; border-left:3px solid #FF4D8D; border-radius:6px;">
  4474. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4475. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">🔬 中医 vs 西医选择困惑</div>
  4476. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">72</div>
  4477. </div>
  4478. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4; margin-bottom:3px;">不知道选水飞蓟(西)还是菊花决明子(中)</div>
  4479. <div style="font-size:0.7rem; color:#FF4D8D; font-style:italic;">VOC: &quot;西见效快中药温和,纠结选哪个&quot;</div>
  4480. </div>
  4481. <div style="padding:10px 12px; background:#FF4D8D08; border-left:3px solid #FF4D8D; border-radius:6px;">
  4482. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4483. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">⚖️ 合规担忧</div>
  4484. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">80</div>
  4485. </div>
  4486. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4; margin-bottom:3px;">担心是否有副作用,成分是否靠谱</div>
  4487. <div style="font-size:0.7rem; color:#FF4D8D; font-style:italic;">VOC: &quot;护肝片长期吃安全吗,有副作用吗&quot;</div>
  4488. </div>
  4489. </div>
  4490. </div>
  4491. <div>
  4492. <div style="font-size:0.9rem; font-weight:700; color:#2D9C5D; margin-bottom:10px;">🎁 Gains · 6 大期待收益(渴望度)</div>
  4493. <div style="display:grid; gap:8px;">
  4494. <div style="padding:10px 12px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:6px;">
  4495. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4496. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">🔬 科学循证透明</div>
  4497. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#2D9C5D; font-weight:700;">95</div>
  4498. </div>
  4499. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4;">能看到临床数据、成分克数、第三方检测</div>
  4500. </div>
  4501. <div style="padding:10px 12px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:6px;">
  4502. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4503. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">🎯 场景精准护肝</div>
  4504. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#2D9C5D; font-weight:700;">88</div>
  4505. </div>
  4506. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4;">熬夜 / 应酬 / 情绪肝不同场景有对应方案</div>
  4507. </div>
  4508. <div style="padding:10px 12px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:6px;">
  4509. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4510. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">☯️ 中西双路并进</div>
  4511. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#2D9C5D; font-weight:700;">85</div>
  4512. </div>
  4513. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4;">主方西药循证 + 辅方中医疏肝,双重保障</div>
  4514. </div>
  4515. <div style="padding:10px 12px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:6px;">
  4516. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4517. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">🛡️ 江中品牌保障</div>
  4518. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#2D9C5D; font-weight:700;">92</div>
  4519. </div>
  4520. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4;">OTC 背书,国药准字级别信任</div>
  4521. </div>
  4522. <div style="padding:10px 12px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:6px;">
  4523. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4524. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">📋 第三方检测公开</div>
  4525. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#2D9C5D; font-weight:700;">90</div>
  4526. </div>
  4527. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4;">SGS / CNAS 检测报告,随货附赠</div>
  4528. </div>
  4529. <div style="padding:10px 12px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:6px;">
  4530. <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
  4531. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1);">📊 克数透明可视</div>
  4532. <div style="font-family:var(--font-mono); font-size:0.72rem; color:#2D9C5D; font-weight:700;">82</div>
  4533. </div>
  4534. <div style="font-size:0.72rem; color:var(--text-3); line-height:1.4;">正面标注每粒成分 mg 剂量,货架识别</div>
  4535. </div>
  4536. </div>
  4537. </div>
  4538. </div>
  4539. <div>
  4540. <div style="display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:2px solid #0085CA44; margin-bottom:16px;">
  4541. <div style="width:36px; height:36px; background:#0085CA22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">📦</div>
  4542. <div>
  4543. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em;">RIGHT · VALUE PROPOSITION</div>
  4544. <div style="font-size:1.1rem; font-weight:800; color:var(--text-1);">产品侧 · 功能 & 价值交付</div>
  4545. </div>
  4546. </div>
  4547. <div style="margin-bottom:14px;">
  4548. <div style="font-size:0.9rem; font-weight:700; color:#0085CA; margin-bottom:10px;">🧬 Products & Services · 6 大功能</div>
  4549. <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
  4550. <div style="padding:10px; background:#2D9C5D08; border:1px solid #2D9C5D33; border-radius:6px;">
  4551. <div style="display:flex; align-items:baseline; gap:6px; margin-bottom:3px;">
  4552. <div style="font-family:var(--font-head); font-weight:900; color:#2D9C5D; font-size:1rem;">①</div>
  4553. <div style="font-size:0.82rem; font-weight:700; color:var(--text-1);">4 重协同复合配方</div>
  4554. </div>
  4555. <div style="font-size:0.7rem; color:var(--text-3); line-height:1.4;">水飞蓟 200mg + 姜黄 100mg + NAC 150mg + 硫辛酸 50mg</div>
  4556. </div>
  4557. <div style="padding:10px; background:#D4A57408; border:1px solid #D4A57433; border-radius:6px;">
  4558. <div style="display:flex; align-items:baseline; gap:6px; margin-bottom:3px;">
  4559. <div style="font-family:var(--font-head); font-weight:900; color:#D4A574; font-size:1rem;">②</div>
  4560. <div style="font-size:0.82rem; font-weight:700; color:var(--text-1);">中医疏肝辅方</div>
  4561. </div>
  4562. <div style="font-size:0.7rem; color:var(--text-3); line-height:1.4;">菊花 / 决明子 / 玫瑰花(情绪肝 L-03 版 SKU)</div>
  4563. </div>
  4564. <div style="padding:10px; background:#0085CA08; border:1px solid #0085CA33; border-radius:6px;">
  4565. <div style="display:flex; align-items:baseline; gap:6px; margin-bottom:3px;">
  4566. <div style="font-family:var(--font-head); font-weight:900; color:#0085CA; font-size:1rem;">③</div>
  4567. <div style="font-size:0.82rem; font-weight:700; color:var(--text-1);">一物一码 QR</div>
  4568. </div>
  4569. <div style="font-size:0.7rem; color:var(--text-3); line-height:1.4;">瓶盖扫码 → 批次检测报告 + 服用日历小程序</div>
  4570. </div>
  4571. <div style="padding:10px; background:#FF8C4208; border:1px solid #FF8C4233; border-radius:6px;">
  4572. <div style="display:flex; align-items:baseline; gap:6px; margin-bottom:3px;">
  4573. <div style="font-family:var(--font-head); font-weight:900; color:#FF8C42; font-size:1rem;">④</div>
  4574. <div style="font-size:0.82rem; font-weight:700; color:var(--text-1);">独立第三方检测</div>
  4575. </div>
  4576. <div style="font-size:0.7rem; color:var(--text-3); line-height:1.4;">SGS / CNAS 检测报告,随货附赠 + 官网公示</div>
  4577. </div>
  4578. <div style="padding:10px; background:#2D9C5D08; border:1px solid #2D9C5D33; border-radius:6px;">
  4579. <div style="display:flex; align-items:baseline; gap:6px; margin-bottom:3px;">
  4580. <div style="font-family:var(--font-head); font-weight:900; color:#2D9C5D; font-size:1rem;">⑤</div>
  4581. <div style="font-size:0.82rem; font-weight:700; color:var(--text-1);">江中品牌 OTC</div>
  4582. </div>
  4583. <div style="font-size:0.7rem; color:var(--text-3); line-height:1.4;">国药准字级别可信度 + 渠道覆盖(医院/药店/线上)</div>
  4584. </div>
  4585. <div style="padding:10px; background:#8B5CF608; border:1px solid #8B5CF633; border-radius:6px;">
  4586. <div style="display:flex; align-items:baseline; gap:6px; margin-bottom:3px;">
  4587. <div style="font-family:var(--font-head); font-weight:900; color:#8B5CF6; font-size:1rem;">⑥</div>
  4588. <div style="font-size:0.82rem; font-weight:700; color:var(--text-1);">服用日历小程序</div>
  4589. </div>
  4590. <div style="font-size:0.7rem; color:var(--text-3); line-height:1.4;">每日推送 + 打卡激励 + 复购 8 折券</div>
  4591. </div>
  4592. </div>
  4593. </div>
  4594. <div style="margin-bottom:14px; padding:12px; background:#FF4D8D05; border:1px dashed #FF4D8D44; border-radius:6px;">
  4595. <div style="font-size:0.85rem; font-weight:700; color:#FF4D8D; margin-bottom:8px;">💊 Pain Relievers · 痛点缓解映射</div>
  4596. <div style="display:grid; gap:5px;">
  4597. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4598. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">①②</div>
  4599. <div style="color:var(--text-2);">→ 同质化无从选择</div>
  4600. <div style="color:var(--text-1); font-weight:600;">克数透明 + 4 重协同公式</div>
  4601. </div>
  4602. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4603. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">③④</div>
  4604. <div style="color:var(--text-2);">→ 信任危机</div>
  4605. <div style="color:var(--text-1); font-weight:600;">扫码看检测报告 + 第三方公证</div>
  4606. </div>
  4607. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4608. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">①②</div>
  4609. <div style="color:var(--text-2);">→ 单一成分效果弱</div>
  4610. <div style="color:var(--text-1); font-weight:600;">4 成分协同&quot;一片多效&quot;</div>
  4611. </div>
  4612. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4613. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">⑤⑥</div>
  4614. <div style="color:var(--text-2);">→ 见效慢·坚持难</div>
  4615. <div style="color:var(--text-1); font-weight:600;">江中品牌安心 + 小程序每日打卡</div>
  4616. </div>
  4617. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4618. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">①②</div>
  4619. <div style="color:var(--text-2);">→ 中西选择困惑</div>
  4620. <div style="color:var(--text-1); font-weight:600;">主方西药循证 + 辅方中医疏肝</div>
  4621. </div>
  4622. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4623. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">③④⑤</div>
  4624. <div style="color:var(--text-2);">→ 合规担忧</div>
  4625. <div style="color:var(--text-1); font-weight:600;">OTC 标识 + 批次可追溯 + 检测公示</div>
  4626. </div>
  4627. </div>
  4628. </div>
  4629. <div style="padding:12px; background:#2D9C5D05; border:1px dashed #2D9C5D44; border-radius:6px;">
  4630. <div style="font-size:0.85rem; font-weight:700; color:#2D9C5D; margin-bottom:8px;">✨ Gain Creators · 收益创造映射</div>
  4631. <div style="display:grid; gap:5px;">
  4632. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4633. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">③④</div>
  4634. <div style="color:var(--text-2);">→ 科学循证透明</div>
  4635. <div style="color:var(--text-1); font-weight:600;">临床数据 + 克数 + 第三方检测可视化</div>
  4636. </div>
  4637. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4638. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">①②</div>
  4639. <div style="color:var(--text-2);">→ 场景精准护肝</div>
  4640. <div style="color:var(--text-1); font-weight:600;">L-01 熬夜 / L-02 应酬 / L-03 情绪肝 SKU</div>
  4641. </div>
  4642. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4643. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">①②</div>
  4644. <div style="color:var(--text-2);">→ 中西双路并进</div>
  4645. <div style="color:var(--text-1); font-weight:600;">循证主方 + 中医辅方 同瓶体现</div>
  4646. </div>
  4647. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4648. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">⑤</div>
  4649. <div style="color:var(--text-2);">→ 江中品牌保障</div>
  4650. <div style="color:var(--text-1); font-weight:600;">OTC 国药准字 + 医院渠道覆盖</div>
  4651. </div>
  4652. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4653. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">④</div>
  4654. <div style="color:var(--text-2);">→ 第三方检测公开</div>
  4655. <div style="color:var(--text-1); font-weight:600;">SGS/CNAS 报告 PDF 扫码可下载</div>
  4656. </div>
  4657. <div style="display:grid; grid-template-columns:48px 1fr 1.4fr; gap:8px; padding:5px 8px; background:var(--bg-2); border-radius:4px; font-size:0.75rem; align-items:center;">
  4658. <div style="font-family:var(--font-mono); font-weight:700; color:#0085CA;">①</div>
  4659. <div style="color:var(--text-2);">→ 克数透明可视</div>
  4660. <div style="color:var(--text-1); font-weight:600;">正面成分表 · 一眼读懂</div>
  4661. </div>
  4662. </div>
  4663. </div>
  4664. </div>
  4665. </div>
  4666. </div>
  4667. <div class="fade-up" style="background:linear-gradient(135deg, #0085CA10, #2D9C5D08); border:1px solid #0085CA44; border-radius:var(--radius-md); padding:24px;">
  4668. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em; margin-bottom:14px;">PRODUCT-MARKET FIT · 匹配度自评</div>
  4669. <div style="display:grid; grid-template-columns:repeat(4, 1fr); gap:16px;">
  4670. <div style="text-align:center;">
  4671. <div style="font-family:var(--font-head); font-weight:900; font-size:2.8rem; color:#0085CA; line-height:1;">6/6</div>
  4672. <div class="text-mono text-xs" style="color:#0085CA; margin-top:4px; letter-spacing:0.08em;">PAINS ADDRESSED</div>
  4673. <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">所有 VOC 痛点均已映射</div>
  4674. </div>
  4675. <div style="text-align:center;">
  4676. <div style="font-family:var(--font-head); font-weight:900; font-size:2.8rem; color:#0085CA; line-height:1;">6/6</div>
  4677. <div class="text-mono text-xs" style="color:#0085CA; margin-top:4px; letter-spacing:0.08em;">GAINS DELIVERED</div>
  4678. <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">所有期待收益均有机制</div>
  4679. </div>
  4680. <div style="text-align:center;">
  4681. <div style="font-family:var(--font-head); font-weight:900; font-size:2.8rem; color:#2D9C5D; line-height:1;">92%</div>
  4682. <div class="text-mono text-xs" style="color:#2D9C5D; margin-top:4px; letter-spacing:0.08em;">FIT SCORE</div>
  4683. <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">痛点权重加权综合评分</div>
  4684. </div>
  4685. <div style="text-align:center;">
  4686. <div style="font-family:var(--font-head); font-weight:900; font-size:2.8rem; color:#D4A574; line-height:1;">A</div>
  4687. <div class="text-mono text-xs" style="color:#D4A574; margin-top:4px; letter-spacing:0.08em;">LAUNCH GRADE</div>
  4688. <div style="font-size:0.78rem; color:var(--text-2); margin-top:6px;">满足 PMF 准入门槛</div>
  4689. </div>
  4690. </div>
  4691. </div>
  4692. </div>
  4693. </section>
  4694. <section class="report-section" id="value-2" data-tone="blue" data-slide-num="30/36">
  4695. <div class="section-inner">
  4696. <div class="section-head rise-in">
  4697. <div class="section-eyebrow" style="color:#0085CA;">2.5.2 · VALUE CREATION CHAIN</div>
  4698. <h2 class="text-h1"><span class="headline-anim">价值创造链 · 6 环从研发到体验</span></h2>
  4699. <p class="section-sub">沿 Porter 价值链:<strong style="color:#0085CA;">研发 → 生产 → 渠道 → 营销 → 服务 → 体验</strong>,每一环资源 × 输出 × 合作伙伴 × KPI 完整披露</p>
  4700. </div>
  4701. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; margin-bottom:28px;">
  4702. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em; margin-bottom:16px;">CHAIN FLOW · 6 环流转与价值沉淀</div>
  4703. <svg viewBox="0 0 1200 140" style="width:100%; height:auto;" preserveAspectRatio="xMidYMid meet">
  4704. <defs>
  4705. <linearGradient id="grad-chain-rd" x1="0" y1="0" x2="1" y2="0">
  4706. <stop offset="0" stop-color="#0085CA" stop-opacity="0.85"/>
  4707. <stop offset="1" stop-color="#0085CA" stop-opacity="1"/>
  4708. </linearGradient>
  4709. <linearGradient id="grad-chain-make" x1="0" y1="0" x2="1" y2="0">
  4710. <stop offset="0" stop-color="#2D9C5D" stop-opacity="0.85"/>
  4711. <stop offset="1" stop-color="#2D9C5D" stop-opacity="1"/>
  4712. </linearGradient>
  4713. <linearGradient id="grad-chain-channel" x1="0" y1="0" x2="1" y2="0">
  4714. <stop offset="0" stop-color="#D4A574" stop-opacity="0.85"/>
  4715. <stop offset="1" stop-color="#D4A574" stop-opacity="1"/>
  4716. </linearGradient>
  4717. <linearGradient id="grad-chain-mkt" x1="0" y1="0" x2="1" y2="0">
  4718. <stop offset="0" stop-color="#FF8C42" stop-opacity="0.85"/>
  4719. <stop offset="1" stop-color="#FF8C42" stop-opacity="1"/>
  4720. </linearGradient>
  4721. <linearGradient id="grad-chain-service" x1="0" y1="0" x2="1" y2="0">
  4722. <stop offset="0" stop-color="#FF4D8D" stop-opacity="0.85"/>
  4723. <stop offset="1" stop-color="#FF4D8D" stop-opacity="1"/>
  4724. </linearGradient>
  4725. <linearGradient id="grad-chain-exp" x1="0" y1="0" x2="1" y2="0">
  4726. <stop offset="0" stop-color="#8B5CF6" stop-opacity="0.85"/>
  4727. <stop offset="1" stop-color="#8B5CF6" stop-opacity="1"/>
  4728. </linearGradient>
  4729. <marker id="arrow-chain" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
  4730. <path d="M0,0 L10,5 L0,10 Z" fill="#0085CA"/>
  4731. </marker>
  4732. </defs>
  4733. <g>
  4734. <rect x="30" y="30" width="160" height="80" rx="12" fill="url(#grad-chain-rd)" stroke="#0085CA" stroke-width="1.5"/>
  4735. <text x="110" y="52" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="11" fill="#fff" font-weight="800" letter-spacing="0.05em">🧪 研发 R&amp;D</text>
  4736. <text x="110" y="74" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="10" fill="#fff" font-weight="600" opacity="0.9">技术差异化</text>
  4737. <text x="110" y="92" text-anchor="middle" font-family="ui-monospace, monospace" font-size="9" fill="#fff" opacity="0.75" letter-spacing="0.06em">LINK · 1</text>
  4738. <line x1="192" y1="70" x2="216" y2="70" stroke="#0085CA" stroke-width="2" marker-end="url(#arrow-chain)"/>
  4739. </g>
  4740. <g>
  4741. <rect x="220" y="30" width="160" height="80" rx="12" fill="url(#grad-chain-make)" stroke="#2D9C5D" stroke-width="1.5"/>
  4742. <text x="300" y="52" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="11" fill="#fff" font-weight="800" letter-spacing="0.05em">🏭 生产 Production</text>
  4743. <text x="300" y="74" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="10" fill="#fff" font-weight="600" opacity="0.9">质量保障</text>
  4744. <text x="300" y="92" text-anchor="middle" font-family="ui-monospace, monospace" font-size="9" fill="#fff" opacity="0.75" letter-spacing="0.06em">LINK · 2</text>
  4745. <line x1="382" y1="70" x2="406" y2="70" stroke="#0085CA" stroke-width="2" marker-end="url(#arrow-chain)"/>
  4746. </g>
  4747. <g>
  4748. <rect x="410" y="30" width="160" height="80" rx="12" fill="url(#grad-chain-channel)" stroke="#D4A574" stroke-width="1.5"/>
  4749. <text x="490" y="52" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="11" fill="#fff" font-weight="800" letter-spacing="0.05em">🚚 渠道 Channel</text>
  4750. <text x="490" y="74" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="10" fill="#fff" font-weight="600" opacity="0.9">市场渗透</text>
  4751. <text x="490" y="92" text-anchor="middle" font-family="ui-monospace, monospace" font-size="9" fill="#fff" opacity="0.75" letter-spacing="0.06em">LINK · 3</text>
  4752. <line x1="572" y1="70" x2="596" y2="70" stroke="#0085CA" stroke-width="2" marker-end="url(#arrow-chain)"/>
  4753. </g>
  4754. <g>
  4755. <rect x="600" y="30" width="160" height="80" rx="12" fill="url(#grad-chain-mkt)" stroke="#FF8C42" stroke-width="1.5"/>
  4756. <text x="680" y="52" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="11" fill="#fff" font-weight="800" letter-spacing="0.05em">📢 营销 Marketing</text>
  4757. <text x="680" y="74" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="10" fill="#fff" font-weight="600" opacity="0.9">认知占位</text>
  4758. <text x="680" y="92" text-anchor="middle" font-family="ui-monospace, monospace" font-size="9" fill="#fff" opacity="0.75" letter-spacing="0.06em">LINK · 4</text>
  4759. <line x1="762" y1="70" x2="786" y2="70" stroke="#0085CA" stroke-width="2" marker-end="url(#arrow-chain)"/>
  4760. </g>
  4761. <g>
  4762. <rect x="790" y="30" width="160" height="80" rx="12" fill="url(#grad-chain-service)" stroke="#FF4D8D" stroke-width="1.5"/>
  4763. <text x="870" y="52" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="11" fill="#fff" font-weight="800" letter-spacing="0.05em">🎧 服务 Service</text>
  4764. <text x="870" y="74" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="10" fill="#fff" font-weight="600" opacity="0.9">用户体验</text>
  4765. <text x="870" y="92" text-anchor="middle" font-family="ui-monospace, monospace" font-size="9" fill="#fff" opacity="0.75" letter-spacing="0.06em">LINK · 5</text>
  4766. <line x1="952" y1="70" x2="976" y2="70" stroke="#0085CA" stroke-width="2" marker-end="url(#arrow-chain)"/>
  4767. </g>
  4768. <g>
  4769. <rect x="980" y="30" width="160" height="80" rx="12" fill="url(#grad-chain-exp)" stroke="#8B5CF6" stroke-width="1.5"/>
  4770. <text x="1060" y="52" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="11" fill="#fff" font-weight="800" letter-spacing="0.05em">✨ 体验 Experience</text>
  4771. <text x="1060" y="74" text-anchor="middle" font-family="ui-sans-serif, system-ui" font-size="10" fill="#fff" font-weight="600" opacity="0.9">感知升级</text>
  4772. <text x="1060" y="92" text-anchor="middle" font-family="ui-monospace, monospace" font-size="9" fill="#fff" opacity="0.75" letter-spacing="0.06em">LINK · 6</text>
  4773. </g>
  4774. </svg>
  4775. </div>
  4776. <div class="fade-up" style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:24px;">
  4777. <div style="background:var(--bg-1); border:1px solid #0085CA44; border-top:4px solid #0085CA; border-radius:var(--radius-md); padding:18px;">
  4778. <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
  4779. <div style="width:40px; height:40px; background:#0085CA22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem;">🧪</div>
  4780. <div>
  4781. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em;">LINK · 1 / 6</div>
  4782. <div style="font-size:1.05rem; font-weight:800; color:var(--text-1);">研发 R&amp;D</div>
  4783. </div>
  4784. </div>
  4785. <div style="padding:8px 10px; background:#0085CA10; border-left:3px solid #0085CA; border-radius:4px; margin-bottom:10px;">
  4786. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.08em; margin-bottom:3px;">核心价值</div>
  4787. <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">技术差异化 · &quot;一片多效 · 4 重协同&quot;科学配方</div>
  4788. </div>
  4789. <div style="margin-bottom:10px;">
  4790. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">关键资源</div>
  4791. <ul style="margin:0; padding:0; list-style:none;">
  4792. <li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>江中药物研究院</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>循证护肝临床数据库</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>4 重协同专利组合</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>配方工艺(缓释+速释双层片)</li>
  4793. </ul>
  4794. </div>
  4795. <div style="margin-bottom:10px; padding:8px; background:var(--bg-2); border-radius:4px;">
  4796. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">合作伙伴</div>
  4797. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">江中药物研究院 · 同济医院肝病中心 · 第三方 CRO</div>
  4798. </div>
  4799. <div style="display:flex; flex-wrap:wrap; gap:5px;">
  4800. <span style="padding:3px 8px; background:#0085CA15; color:#0085CA; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">专利 3+</span><span style="padding:3px 8px; background:#0085CA15; color:#0085CA; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">临床数据 2 篇</span><span style="padding:3px 8px; background:#0085CA15; color:#0085CA; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">功效成分验证</span>
  4801. </div>
  4802. </div>
  4803. <div style="background:var(--bg-1); border:1px solid #2D9C5D44; border-top:4px solid #2D9C5D; border-radius:var(--radius-md); padding:18px;">
  4804. <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
  4805. <div style="width:40px; height:40px; background:#2D9C5D22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem;">🏭</div>
  4806. <div>
  4807. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em;">LINK · 2 / 6</div>
  4808. <div style="font-size:1.05rem; font-weight:800; color:var(--text-1);">生产 Production</div>
  4809. </div>
  4810. </div>
  4811. <div style="padding:8px 10px; background:#2D9C5D10; border-left:3px solid #2D9C5D; border-radius:4px; margin-bottom:10px;">
  4812. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.08em; margin-bottom:3px;">核心价值</div>
  4813. <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">质量保障 · &quot;批次一致 · 质量可溯&quot;</div>
  4814. </div>
  4815. <div style="margin-bottom:10px;">
  4816. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">关键资源</div>
  4817. <ul style="margin:0; padding:0; list-style:none;">
  4818. <li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>江中智能工厂(GMP)</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>全流程质量管控体系</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>现代剂型压片工艺</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>批次追溯(一物一码)</li>
  4819. </ul>
  4820. </div>
  4821. <div style="margin-bottom:10px; padding:8px; background:var(--bg-2); border-radius:4px;">
  4822. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">合作伙伴</div>
  4823. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">江中本地工厂 · SGS / CNAS 检测</div>
  4824. </div>
  4825. <div style="display:flex; flex-wrap:wrap; gap:5px;">
  4826. <span style="padding:3px 8px; background:#2D9C5D15; color:#2D9C5D; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">GMP 合规 100%</span><span style="padding:3px 8px; background:#2D9C5D15; color:#2D9C5D; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">批检合格 100%</span><span style="padding:3px 8px; background:#2D9C5D15; color:#2D9C5D; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">纯度 ≥ 98%</span>
  4827. </div>
  4828. </div>
  4829. <div style="background:var(--bg-1); border:1px solid #D4A57444; border-top:4px solid #D4A574; border-radius:var(--radius-md); padding:18px;">
  4830. <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
  4831. <div style="width:40px; height:40px; background:#D4A57422; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem;">🚚</div>
  4832. <div>
  4833. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em;">LINK · 3 / 6</div>
  4834. <div style="font-size:1.05rem; font-weight:800; color:var(--text-1);">渠道 Channel</div>
  4835. </div>
  4836. </div>
  4837. <div style="padding:8px 10px; background:#D4A57410; border-left:3px solid #D4A574; border-radius:4px; margin-bottom:10px;">
  4838. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.08em; margin-bottom:3px;">核心价值</div>
  4839. <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">市场渗透 · &quot;全渠道可得 · 3 公里内可买&quot;</div>
  4840. </div>
  4841. <div style="margin-bottom:10px;">
  4842. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">关键资源</div>
  4843. <ul style="margin:0; padding:0; list-style:none;">
  4844. <li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>线下:医院 OTC + 连锁药店(一心堂/大参林/老百姓)</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>线上:天猫 / 京东 / 拼多多 / 抖音小店</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>私域:小红书 / 微信公众号</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#D4A574;">▸</span>O2O:美团买药 / 叮当快药</li>
  4845. </ul>
  4846. </div>
  4847. <div style="margin-bottom:10px; padding:8px; background:var(--bg-2); border-radius:4px;">
  4848. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">合作伙伴</div>
  4849. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">一心堂 / 大参林 / 老百姓 · 天猫 / 京东 · 美团买药</div>
  4850. </div>
  4851. <div style="display:flex; flex-wrap:wrap; gap:5px;">
  4852. <span style="padding:3px 8px; background:#D4A57415; color:#D4A574; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">药店 ≥ 3w</span><span style="padding:3px 8px; background:#D4A57415; color:#D4A574; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">GMV ¥1.2 亿/年</span><span style="padding:3px 8px; background:#D4A57415; color:#D4A574; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">O2O ≤ 30min</span>
  4853. </div>
  4854. </div>
  4855. <div style="background:var(--bg-1); border:1px solid #FF8C4244; border-top:4px solid #FF8C42; border-radius:var(--radius-md); padding:18px;">
  4856. <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
  4857. <div style="width:40px; height:40px; background:#FF8C4222; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem;">📢</div>
  4858. <div>
  4859. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em;">LINK · 4 / 6</div>
  4860. <div style="font-size:1.05rem; font-weight:800; color:var(--text-1);">营销 Marketing</div>
  4861. </div>
  4862. </div>
  4863. <div style="padding:8px 10px; background:#FF8C4210; border-left:3px solid #FF8C42; border-radius:4px; margin-bottom:10px;">
  4864. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.08em; margin-bottom:3px;">核心价值</div>
  4865. <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">认知占位 · &quot;场景化复合护肝&quot;第一心智</div>
  4866. </div>
  4867. <div style="margin-bottom:10px;">
  4868. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">关键资源</div>
  4869. <ul style="margin:0; padding:0; list-style:none;">
  4870. <li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>一物一码(扫码触达)</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>会员运营(复购激励)</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>内容科普矩阵(小红书/抖音/知乎)</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>KOL 分级(医生/生活/专家)</li>
  4871. </ul>
  4872. </div>
  4873. <div style="margin-bottom:10px; padding:8px; background:var(--bg-2); border-radius:4px;">
  4874. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">合作伙伴</div>
  4875. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">小红书头部 KOC · 抖音医生号 · 知乎肝病 · 丁香医生</div>
  4876. </div>
  4877. <div style="display:flex; flex-wrap:wrap; gap:5px;">
  4878. <span style="padding:3px 8px; background:#FF8C4215; color:#FF8C42; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">心智 ≥ 30%</span><span style="padding:3px 8px; background:#FF8C4215; color:#FF8C42; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">KOL 笔记 500+/月</span><span style="padding:3px 8px; background:#FF8C4215; color:#FF8C42; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">扫码率 ≥ 40%</span>
  4879. </div>
  4880. </div>
  4881. <div style="background:var(--bg-1); border:1px solid #FF4D8D44; border-top:4px solid #FF4D8D; border-radius:var(--radius-md); padding:18px;">
  4882. <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
  4883. <div style="width:40px; height:40px; background:#FF4D8D22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem;">🎧</div>
  4884. <div>
  4885. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em;">LINK · 5 / 6</div>
  4886. <div style="font-size:1.05rem; font-weight:800; color:var(--text-1);">服务 Service</div>
  4887. </div>
  4888. </div>
  4889. <div style="padding:8px 10px; background:#FF4D8D10; border-left:3px solid #FF4D8D; border-radius:4px; margin-bottom:10px;">
  4890. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; margin-bottom:3px;">核心价值</div>
  4891. <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">用户体验 · &quot;全周期陪伴 · 复购 ≥ 40%&quot;</div>
  4892. </div>
  4893. <div style="margin-bottom:10px;">
  4894. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">关键资源</div>
  4895. <ul style="margin:0; padding:0; list-style:none;">
  4896. <li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>服用日历小程序</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>用药咨询客服(7×12)</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>复购激励(打卡立减 / 8 折券)</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>会员等级体系</li>
  4897. </ul>
  4898. </div>
  4899. <div style="margin-bottom:10px; padding:8px; background:var(--bg-2); border-radius:4px;">
  4900. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">合作伙伴</div>
  4901. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">企业微信 · 小程序 · 天猫会员 / 京东 PLUS</div>
  4902. </div>
  4903. <div style="display:flex; flex-wrap:wrap; gap:5px;">
  4904. <span style="padding:3px 8px; background:#FF4D8D15; color:#FF4D8D; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">30 日留存 ≥ 60%</span><span style="padding:3px 8px; background:#FF4D8D15; color:#FF4D8D; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">复购 ≥ 40%</span><span style="padding:3px 8px; background:#FF4D8D15; color:#FF4D8D; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">活跃 ≥ 50%</span>
  4905. </div>
  4906. </div>
  4907. <div style="background:var(--bg-1); border:1px solid #8B5CF644; border-top:4px solid #8B5CF6; border-radius:var(--radius-md); padding:18px;">
  4908. <div style="display:flex; align-items:center; gap:10px; margin-bottom:10px;">
  4909. <div style="width:40px; height:40px; background:#8B5CF622; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.4rem;">✨</div>
  4910. <div>
  4911. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em;">LINK · 6 / 6</div>
  4912. <div style="font-size:1.05rem; font-weight:800; color:var(--text-1);">体验 Experience</div>
  4913. </div>
  4914. </div>
  4915. <div style="padding:8px 10px; background:#8B5CF610; border-left:3px solid #8B5CF6; border-radius:4px; margin-bottom:10px;">
  4916. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.08em; margin-bottom:3px;">核心价值</div>
  4917. <div style="font-size:0.85rem; font-weight:700; color:var(--text-1);">感知升级 · &quot;每次打开 = 一次品质确认&quot;</div>
  4918. </div>
  4919. <div style="margin-bottom:10px;">
  4920. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">关键资源</div>
  4921. <ul style="margin:0; padding:0; list-style:none;">
  4922. <li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>包装设计(江中绿+琥珀金)</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>易吞咽 / 水果味包衣</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>第三方检测报告随货</li><li style="padding:3px 0; font-size:0.75rem; color:var(--text-2); line-height:1.4; padding-left:14px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>品牌内核(传承+创新)</li>
  4923. </ul>
  4924. </div>
  4925. <div style="margin-bottom:10px; padding:8px; background:var(--bg-2); border-radius:4px;">
  4926. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">合作伙伴</div>
  4927. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">江中品牌视觉 · 包材商 · SGS/CNAS</div>
  4928. </div>
  4929. <div style="display:flex; flex-wrap:wrap; gap:5px;">
  4930. <span style="padding:3px 8px; background:#8B5CF615; color:#8B5CF6; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">NPS ≥ 50</span><span style="padding:3px 8px; background:#8B5CF615; color:#8B5CF6; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">识别度 ≥ 90%</span><span style="padding:3px 8px; background:#8B5CF615; color:#8B5CF6; border-radius:4px; font-size:0.7rem; font-weight:600; font-family:var(--font-mono);">吞咽体验 ≥ 4.5/5</span>
  4931. </div>
  4932. </div>
  4933. </div>
  4934. <div class="fade-up" style="background:linear-gradient(135deg, #0085CA10, #2D9C5D08); border:1px solid #0085CA44; border-radius:var(--radius-md); padding:24px;">
  4935. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em; margin-bottom:14px;">VALUE ACCUMULATION · 价值沉淀闭环</div>
  4936. <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;">
  4937. <div style="position:relative; text-align:center;">
  4938. <div style="width:54px; height:54px; background:#0085CA22; border:2px solid #0085CA; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 8px;">🧪</div>
  4939. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.08em; margin-bottom:4px;">资源投入</div>
  4940. <div style="font-size:0.78rem; color:var(--text-1); font-weight:700; line-height:1.3;">研发 + 生产</div>
  4941. <div style="position:absolute; right:-10px; top:18px; font-size:1.2rem; color:#0085CA; z-index:2;">→</div>
  4942. </div>
  4943. <div style="position:relative; text-align:center;">
  4944. <div style="width:54px; height:54px; background:#FF8C4222; border:2px solid #FF8C42; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 8px;">📢</div>
  4945. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.08em; margin-bottom:4px;">价值产出</div>
  4946. <div style="font-size:0.78rem; color:var(--text-1); font-weight:700; line-height:1.3;">渠道 + 营销</div>
  4947. <div style="position:absolute; right:-10px; top:18px; font-size:1.2rem; color:#0085CA; z-index:2;">→</div>
  4948. </div>
  4949. <div style="position:relative; text-align:center;">
  4950. <div style="width:54px; height:54px; background:#FF4D8D22; border:2px solid #FF4D8D; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 8px;">🎧</div>
  4951. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; margin-bottom:4px;">用户感知</div>
  4952. <div style="font-size:0.78rem; color:var(--text-1); font-weight:700; line-height:1.3;">服务 + 体验</div>
  4953. <div style="position:absolute; right:-10px; top:18px; font-size:1.2rem; color:#0085CA; z-index:2;">→</div>
  4954. </div>
  4955. <div style="position:relative; text-align:center;">
  4956. <div style="width:54px; height:54px; background:#8B5CF622; border:2px solid #8B5CF6; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 8px;">⭐</div>
  4957. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.08em; margin-bottom:4px;">口碑沉淀</div>
  4958. <div style="font-size:0.78rem; color:var(--text-1); font-weight:700; line-height:1.3;">NPS / 复购 / 社交</div>
  4959. <div style="position:absolute; right:-10px; top:18px; font-size:1.2rem; color:#0085CA; z-index:2;">→</div>
  4960. </div>
  4961. <div style="position:relative; text-align:center;">
  4962. <div style="width:54px; height:54px; background:#D4A57422; border:2px solid #D4A574; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; margin:0 auto 8px;">🏆</div>
  4963. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.08em; margin-bottom:4px;">品牌资产</div>
  4964. <div style="font-size:0.78rem; color:var(--text-1); font-weight:700; line-height:1.3;">江中肝纯片 = 场景化复合护肝</div>
  4965. </div>
  4966. </div>
  4967. </div>
  4968. </div>
  4969. </section>
  4970. <section class="report-section" id="value-3" data-tone="blue" data-slide-num="31/36">
  4971. <div class="section-inner">
  4972. <div class="section-head rise-in">
  4973. <div class="section-eyebrow" style="color:#0085CA;">2.5.3 · USER VALUE JOURNEY</div>
  4974. <h2 class="text-h1"><span class="headline-anim">用户价值获取路径 · 5 阶段感知链</span></h2>
  4975. <p class="section-sub">接触 → 认知 → 决策 → 使用 → 评价 <strong style="color:#0085CA;">5 阶段</strong>,每阶段行为 × 渠道 × 认知 × 情感 × 价值传递 × 强化手段完整拆解</p>
  4976. </div>
  4977. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:28px; margin-bottom:28px;">
  4978. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em; margin-bottom:18px;">JOURNEY TIMELINE · 用户端价值感知时序</div>
  4979. <div style="position:relative;">
  4980. <div style="position:absolute; top:32px; left:5%; right:5%; height:3px; background:linear-gradient(90deg, #FF8C42, #0085CA, #2D9C5D, #D4A574, #FF4D8D); border-radius:3px; z-index:1;"></div>
  4981. <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; position:relative; z-index:2;">
  4982. <div style="text-align:center;">
  4983. <div style="width:64px; height:64px; background:#FF8C42; border:4px solid var(--bg-1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 12px; box-shadow:0 4px 12px #FF8C4266;">👁️</div>
  4984. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em; margin-bottom:4px;">STAGE 1 · TOUCH</div>
  4985. <div style="font-size:1.1rem; font-weight:800; color:var(--text-1); margin-bottom:4px;">接触期</div>
  4986. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.4;">看到广告 / 刷到种草 / 逛药店货架</div>
  4987. </div>
  4988. <div style="text-align:center;">
  4989. <div style="width:64px; height:64px; background:#0085CA; border:4px solid var(--bg-1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 12px; box-shadow:0 4px 12px #0085CA66;">🔍</div>
  4990. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-bottom:4px;">STAGE 2 · COGNITION</div>
  4991. <div style="font-size:1.1rem; font-weight:800; color:var(--text-1); margin-bottom:4px;">认知期</div>
  4992. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.4;">搜索关键词 / 看科普内容 / 对比竞品</div>
  4993. </div>
  4994. <div style="text-align:center;">
  4995. <div style="width:64px; height:64px; background:#2D9C5D; border:4px solid var(--bg-1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 12px; box-shadow:0 4px 12px #2D9C5D66;">✅</div>
  4996. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em; margin-bottom:4px;">STAGE 3 · DECISION</div>
  4997. <div style="font-size:1.1rem; font-weight:800; color:var(--text-1); margin-bottom:4px;">决策期</div>
  4998. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.4;">加购对比 / 咨询客服 / 看测评 / 下单</div>
  4999. </div>
  5000. <div style="text-align:center;">
  5001. <div style="width:64px; height:64px; background:#D4A574; border:4px solid var(--bg-1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 12px; box-shadow:0 4px 12px #D4A57466;">💊</div>
  5002. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:4px;">STAGE 4 · USE</div>
  5003. <div style="font-size:1.1rem; font-weight:800; color:var(--text-1); margin-bottom:4px;">使用期</div>
  5004. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.4;">打开包装 / 扫码 / 按时服用 / 记录打卡</div>
  5005. </div>
  5006. <div style="text-align:center;">
  5007. <div style="width:64px; height:64px; background:#FF4D8D; border:4px solid var(--bg-1); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin:0 auto 12px; box-shadow:0 4px 12px #FF4D8D66;">⭐</div>
  5008. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:4px;">STAGE 5 · EVALUATE</div>
  5009. <div style="font-size:1.1rem; font-weight:800; color:var(--text-1); margin-bottom:4px;">评价期</div>
  5010. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.4;">体检复查 / 写评价 / 朋友推荐 / 复购</div>
  5011. </div>
  5012. </div>
  5013. </div>
  5014. </div>
  5015. <div class="fade-up" style="overflow-x:auto; margin-bottom:24px;">
  5016. <table style="width:100%; border-collapse:collapse; background:var(--bg-1); font-size:0.8rem;">
  5017. <thead>
  5018. <tr style="background:#0085CA10;">
  5019. <th style="padding:12px 14px; text-align:left; border:1px solid #0085CA33; color:#0085CA; font-weight:700; width:13%;">维度</th>
  5020. <th style="padding:12px; text-align:left; border:1px solid #0085CA33; color:#FF8C42; font-weight:700;">👁️ 接触期</th><th style="padding:12px; text-align:left; border:1px solid #0085CA33; color:#0085CA; font-weight:700;">🔍 认知期</th><th style="padding:12px; text-align:left; border:1px solid #0085CA33; color:#2D9C5D; font-weight:700;">✅ 决策期</th><th style="padding:12px; text-align:left; border:1px solid #0085CA33; color:#D4A574; font-weight:700;">💊 使用期</th><th style="padding:12px; text-align:left; border:1px solid #0085CA33; color:#FF4D8D; font-weight:700;">⭐ 评价期</th>
  5021. </tr>
  5022. </thead>
  5023. <tbody>
  5024. <tr>
  5025. <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">📱 主要渠道</td>
  5026. <td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.75rem;"><div style="padding:2px 0;">▸ 小红书信息流</div><div style="padding:2px 0;">▸ 抖音短视频</div><div style="padding:2px 0;">▸ 药店柜台 POP</div><div style="padding:2px 0;">▸ 社群分享</div></td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.75rem;"><div style="padding:2px 0;">▸ 百度 / 知乎</div><div style="padding:2px 0;">▸ 小红书评测</div><div style="padding:2px 0;">▸ 抖音医生号</div><div style="padding:2px 0;">▸ 丁香医生 APP</div></td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.75rem;"><div style="padding:2px 0;">▸ 天猫 / 京东</div><div style="padding:2px 0;">▸ 美团买药</div><div style="padding:2px 0;">▸ 药店店员</div><div style="padding:2px 0;">▸ 品牌旗舰店</div></td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.75rem;"><div style="padding:2px 0;">▸ 线下开瓶</div><div style="padding:2px 0;">▸ 小程序打卡</div><div style="padding:2px 0;">▸ 企业微信群</div><div style="padding:2px 0;">▸ 个人日历提醒</div></td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.75rem;"><div style="padding:2px 0;">▸ 体检报告</div><div style="padding:2px 0;">▸ 电商 / 小红书分享</div><div style="padding:2px 0;">▸ 朋友口碑</div><div style="padding:2px 0;">▸ 会员复购</div></td>
  5027. </tr>
  5028. <tr style="background:#0085CA04;">
  5029. <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">🧠 认知变化</td>
  5030. <td style="padding:10px; border:1px solid var(--border); color:var(--text-1); line-height:1.5; font-size:0.76rem; font-weight:600;">江中肝纯片 · 新品 · 复合配方</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-1); line-height:1.5; font-size:0.76rem; font-weight:600;">4 重协同 · 比单一水飞蓟强</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-1); line-height:1.5; font-size:0.76rem; font-weight:600;">江中出品 · 值得信赖 · 价格合理</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-1); line-height:1.5; font-size:0.76rem; font-weight:600;">服用方便 · 易吞咽 · 味道不差</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-1); line-height:1.5; font-size:0.76rem; font-weight:600;">效果确实好 · 值得推荐 · 长期跟</td>
  5031. </tr>
  5032. <tr>
  5033. <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">❤️ 情感变化</td>
  5034. <td style="padding:10px; border:1px solid var(--border); color:#FF8C42; line-height:1.5; font-size:0.78rem; font-weight:700; font-style:italic;">好奇 · 点击想看</td><td style="padding:10px; border:1px solid var(--border); color:#0085CA; line-height:1.5; font-size:0.78rem; font-weight:700; font-style:italic;">理解 · 认可科学逻辑</td><td style="padding:10px; border:1px solid var(--border); color:#2D9C5D; line-height:1.5; font-size:0.78rem; font-weight:700; font-style:italic;">安心 · 信任</td><td style="padding:10px; border:1px solid var(--border); color:#D4A574; line-height:1.5; font-size:0.78rem; font-weight:700; font-style:italic;">满意 · 坚持</td><td style="padding:10px; border:1px solid var(--border); color:#FF4D8D; line-height:1.5; font-size:0.78rem; font-weight:700; font-style:italic;">满足 · 信赖 · 推荐</td>
  5035. </tr>
  5036. <tr style="background:#0085CA04;">
  5037. <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">📦 价值传递</td>
  5038. <td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">包装视觉(江中绿+琥珀金)+ 广告语(场景化复合护肝)</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">内容科普(成分机理)+ 一物一码(成分详解)+ 医生背书</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">江中品牌背书 + 第三方检测报告 + 克数透明 + 甜点价位 ¥79-119</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">服用日历小程序(每日推送)+ 易吞咽配方 + 复购激励</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">复购激励(复购 8 折 / 会员升级)+ 晒卡 UGC 奖励</td>
  5039. </tr>
  5040. <tr>
  5041. <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">🔋 强化手段</td>
  5042. <td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">醒目包装主视觉 + KOL 爆款笔记 + 地推展架</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">KOL 分级(医生/专家/生活)矩阵式种草 + 科普动画</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">对比陈列物料(vs 单一配方)+ 店员培训激励 + 促销弹窗</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">14 天打卡得 8 折券 + 社群晒卡活动 + 用药咨询客服</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-2); line-height:1.5; font-size:0.73rem;">转氨酶改善前后对比 + NPS 调研 + 社交裂变</td>
  5043. </tr>
  5044. <tr style="background:#0085CA04;">
  5045. <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">💬 VOC 原声</td>
  5046. <td style="padding:10px; border:1px solid var(--border); color:var(--text-3); line-height:1.5; font-size:0.72rem; font-style:italic;">&quot;刷到那个打工人自救指南爆款,点进来看看&quot;</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-3); line-height:1.5; font-size:0.72rem; font-style:italic;">&quot;单独吃水飞蓟 2 个月没效果,这个复合的才科学&quot;</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-3); line-height:1.5; font-size:0.72rem; font-style:italic;">&quot;江中靠谱,检测报告一扫就出,放心下单&quot;</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-3); line-height:1.5; font-size:0.72rem; font-style:italic;">&quot;小程序天天提醒,连打卡 21 天送一瓶,有仪式感&quot;</td><td style="padding:10px; border:1px solid var(--border); color:var(--text-3); line-height:1.5; font-size:0.72rem; font-style:italic;">&quot;吃 3 瓶,转氨酶 58→32,给老公也买&quot;</td>
  5047. </tr>
  5048. <tr>
  5049. <td style="padding:10px 14px; border:1px solid var(--border); font-weight:700; color:var(--text-1); background:var(--bg-2);">📊 关键指标</td>
  5050. <td style="padding:10px; border:1px solid var(--border); text-align:center;"><div style="font-family:var(--font-head); font-weight:900; font-size:1.6rem; color:#FF8C42; line-height:1;">800w+</div><div class="text-mono text-xs" style="color:#FF8C42; margin-top:4px; letter-spacing:0.06em;">触达率</div></td><td style="padding:10px; border:1px solid var(--border); text-align:center;"><div style="font-family:var(--font-head); font-weight:900; font-size:1.6rem; color:#0085CA; line-height:1;">45%</div><div class="text-mono text-xs" style="color:#0085CA; margin-top:4px; letter-spacing:0.06em;">认知深度</div></td><td style="padding:10px; border:1px solid var(--border); text-align:center;"><div style="font-family:var(--font-head); font-weight:900; font-size:1.6rem; color:#2D9C5D; line-height:1;">18%</div><div class="text-mono text-xs" style="color:#2D9C5D; margin-top:4px; letter-spacing:0.06em;">决策转化</div></td><td style="padding:10px; border:1px solid var(--border); text-align:center;"><div style="font-family:var(--font-head); font-weight:900; font-size:1.6rem; color:#D4A574; line-height:1;">62%</div><div class="text-mono text-xs" style="color:#D4A574; margin-top:4px; letter-spacing:0.06em;">30 日留存</div></td><td style="padding:10px; border:1px solid var(--border); text-align:center;"><div style="font-family:var(--font-head); font-weight:900; font-size:1.6rem; color:#FF4D8D; line-height:1;">40%</div><div class="text-mono text-xs" style="color:#FF4D8D; margin-top:4px; letter-spacing:0.06em;">复购率</div></td>
  5051. </tr>
  5052. </tbody>
  5053. </table>
  5054. </div>
  5055. <div class="fade-up" style="background:linear-gradient(135deg, #0085CA10, #2D9C5D08); border:1px solid #0085CA44; border-radius:var(--radius-md); padding:24px;">
  5056. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.15em; margin-bottom:16px;">CONVERSION FUNNEL · 端到端转化漏斗</div>
  5057. <div style="display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; align-items:end;">
  5058. <div style="text-align:center;">
  5059. <div style="width:100%; margin:0 auto; padding:14px 8px; background:#FF8C42; border-radius:8px 8px 4px 4px; color:#fff;">
  5060. <div style="font-family:var(--font-head); font-weight:900; font-size:1.4rem; line-height:1;">800w</div>
  5061. <div style="font-size:0.68rem; opacity:0.9; margin-top:4px;">100%</div>
  5062. </div>
  5063. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.08em; margin-top:8px;">触达</div>
  5064. </div>
  5065. <div style="text-align:center;">
  5066. <div style="width:85%; margin:0 auto; padding:14px 8px; background:#0085CA; border-radius:8px 8px 4px 4px; color:#fff;">
  5067. <div style="font-family:var(--font-head); font-weight:900; font-size:1.4rem; line-height:1;">360w</div>
  5068. <div style="font-size:0.68rem; opacity:0.9; margin-top:4px;">45%</div>
  5069. </div>
  5070. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.08em; margin-top:8px;">认知</div>
  5071. </div>
  5072. <div style="text-align:center;">
  5073. <div style="width:62%; margin:0 auto; padding:14px 8px; background:#2D9C5D; border-radius:8px 8px 4px 4px; color:#fff;">
  5074. <div style="font-family:var(--font-head); font-weight:900; font-size:1.4rem; line-height:1;">65w</div>
  5075. <div style="font-size:0.68rem; opacity:0.9; margin-top:4px;">18% (累 8%)</div>
  5076. </div>
  5077. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.08em; margin-top:8px;">决策</div>
  5078. </div>
  5079. <div style="text-align:center;">
  5080. <div style="width:42%; margin:0 auto; padding:14px 8px; background:#D4A574; border-radius:8px 8px 4px 4px; color:#fff;">
  5081. <div style="font-family:var(--font-head); font-weight:900; font-size:1.4rem; line-height:1;">40w</div>
  5082. <div style="font-size:0.68rem; opacity:0.9; margin-top:4px;">62% (累 5%)</div>
  5083. </div>
  5084. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.08em; margin-top:8px;">使用</div>
  5085. </div>
  5086. <div style="text-align:center;">
  5087. <div style="width:25%; margin:0 auto; padding:14px 8px; background:#FF4D8D; border-radius:8px 8px 4px 4px; color:#fff;">
  5088. <div style="font-family:var(--font-head); font-weight:900; font-size:1.4rem; line-height:1;">16w</div>
  5089. <div style="font-size:0.68rem; opacity:0.9; margin-top:4px;">40% (累 2%)</div>
  5090. </div>
  5091. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; margin-top:8px;">复购</div>
  5092. </div>
  5093. </div>
  5094. <div style="margin-top:16px; padding:12px 16px; background:var(--bg-1); border-left:3px solid #0085CA; border-radius:4px;">
  5095. <div style="font-size:0.82rem; color:var(--text-1); line-height:1.55;">
  5096. <strong style="color:#0085CA;">漏斗洞察:</strong>触达 → 决策转化 <strong>8%</strong>(高于行业均值 5%),"江中品牌 + 复合配方"双 buff 推动信任快速建立;<strong style="color:#FF4D8D;">复购率 40%</strong> 是 OTC 保健类头部表现,受益于服用日历小程序 + 会员体系沉淀。
  5097. </div>
  5098. </div>
  5099. </div>
  5100. </div>
  5101. </section>
  5102. <section class="report-section" id="synthesis" data-tone="amber" data-slide-num="32/36" style="justify-content:center;">
  5103. <div class="section-inner">
  5104. <div class="rise-in" style="text-align:center; margin-bottom:48px;">
  5105. <div class="text-mono" style="color:#D4A574; letter-spacing:0.35em; font-size:0.8rem; margin-bottom:20px;">CHAPTER 2.6 · SYNTHESIS</div>
  5106. <h1 style="font-family:var(--font-head); font-weight:900; font-size:clamp(4rem, 10vw, 8rem); line-height:0.92; letter-spacing:-0.04em; color:#fff; background:linear-gradient(135deg, #fff 30%, #D4A574 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin:0 0 18px;">
  5107. 总结
  5108. </h1>
  5109. <p class="text-poster" style="font-size:clamp(1.2rem, 2.2vw, 1.8rem); color:var(--text-2); font-weight:500; max-width:820px; margin:0 auto; line-height:1.5;">复合体要素 · 前序承接 · 下阶段衔接</p>
  5110. </div>
  5111. <div class="fade-up" style="max-width:920px; margin:0 auto 40px; padding:28px 36px; background:rgba(255,255,255,0.02); border-left:4px solid #D4A574; border-radius:0 var(--radius-md) var(--radius-md) 0;">
  5112. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:10px;">KEY TAKE · 本章核心</div>
  5113. <div style="font-size:1.15rem; line-height:1.75; color:var(--text-1);">整合前序 5 个维度 → 承接品类定位方案 → 向营销复合体 / 海报 AI 提示词 / 渠道策略传递,形成"定位-产品-营销-传播"四段闭环的完整输出。</div>
  5114. </div>
  5115. <div class="grid fade-up" style="grid-template-columns:repeat(3, 1fr); gap:14px; max-width:1100px; margin:0 auto;">
  5116. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #D4A574;">
  5117. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; font-weight:700;">2.6.1</div>
  5118. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">复合体要素总结</div>
  5119. </div>
  5120. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #D4A574;">
  5121. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; font-weight:700;">2.6.2</div>
  5122. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">与前序方案承接</div>
  5123. </div>
  5124. <div style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 16px; display:flex; flex-direction:column; gap:8px; border-top:2px solid #D4A574;">
  5125. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; font-weight:700;">2.6.3</div>
  5126. <div style="font-weight:700; font-size:0.9rem; color:var(--text-1); line-height:1.35;">下一阶段衔接</div>
  5127. </div>
  5128. </div>
  5129. <div class="fade-up text-mono text-xs" style="margin-top:56px; text-align:center; color:var(--text-3); letter-spacing:0.2em;">
  5130. ↓ 滚动查看 3 个子章节展开
  5131. </div>
  5132. </div>
  5133. </section>
  5134. <section class="report-section" id="synthesis-1" data-tone="amber" data-slide-num="33/36">
  5135. <div class="section-inner">
  5136. <div class="section-head rise-in">
  5137. <div class="section-eyebrow" style="color:#D4A574;">2.6.1 · ELEMENT SYNTHESIS</div>
  5138. <h2 class="text-h1"><span class="headline-anim">复合体要素总结 · 5 维一张图</span></h2>
  5139. <p class="section-sub">前 5 章核心元素横向对照,<strong style="color:#D4A574;">要素 × 核心内容 × 承接定位 × 量化指标</strong> 一目了然</p>
  5140. </div>
  5141. <div class="fade-up" style="display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; margin-bottom:24px;">
  5142. <div style="background:var(--bg-1); border:1px solid #FF4D8D44; border-top:4px solid #FF4D8D; border-radius:var(--radius-md); padding:18px;">
  5143. <div style="display:flex; align-items:center; gap:8px; margin-bottom:10px;">
  5144. <div style="width:38px; height:38px; background:#FF4D8D22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">👥</div>
  5145. <div>
  5146. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em;">DIM · 1 / 5</div>
  5147. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">目标人群</div>
  5148. </div>
  5149. </div>
  5150. <div style="padding:8px; background:#FF4D8D08; border-left:3px solid #FF4D8D; border-radius:4px; margin-bottom:10px;">
  5151. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.08em; margin-bottom:3px;">核心内容</div>
  5152. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">3 类核心:熬夜打工人 · 应酬男 · 情绪肝女性</div>
  5153. </div>
  5154. <div style="margin-bottom:10px;">
  5155. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">补充强化</div>
  5156. <div style="font-size:0.74rem; color:var(--text-2); line-height:1.45;">1 类影响:医生 / 丁香医生 / 小红书 KOL</div>
  5157. </div>
  5158. <div style="margin-bottom:10px; padding-top:8px; border-top:1px dashed var(--border);">
  5159. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">承接定位</div>
  5160. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">&quot;场景化复合护肝&quot;精准匹配 3 类真实 VOC 痛点</div>
  5161. </div>
  5162. <div style="display:grid; gap:4px;">
  5163. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5164. <span style="font-size:0.7rem; color:var(--text-3);">人群覆盖</span>
  5165. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">TAM 1.2 亿</span>
  5166. </div>
  5167. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5168. <span style="font-size:0.7rem; color:var(--text-3);">VOC 原声</span>
  5169. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">4001 赞爆款</span>
  5170. </div>
  5171. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5172. <span style="font-size:0.7rem; color:var(--text-3);">渠道触达</span>
  5173. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#FF4D8D; font-weight:700;">小红书+医生号+知乎</span>
  5174. </div>
  5175. </div>
  5176. </div>
  5177. <div style="background:var(--bg-1); border:1px solid #D4A57444; border-top:4px solid #D4A574; border-radius:var(--radius-md); padding:18px;">
  5178. <div style="display:flex; align-items:center; gap:8px; margin-bottom:10px;">
  5179. <div style="width:38px; height:38px; background:#D4A57422; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">🎯</div>
  5180. <div>
  5181. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em;">DIM · 2 / 5</div>
  5182. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">定位</div>
  5183. </div>
  5184. </div>
  5185. <div style="padding:8px; background:#D4A57408; border-left:3px solid #D4A574; border-radius:4px; margin-bottom:10px;">
  5186. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.08em; margin-bottom:3px;">核心内容</div>
  5187. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">场景化复合护肝 · 4 重协同 · 一片多效</div>
  5188. </div>
  5189. <div style="margin-bottom:10px;">
  5190. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">补充强化</div>
  5191. <div style="font-size:0.74rem; color:var(--text-2); line-height:1.45;">Slogan:「江中肝纯片 · 4 重协同 守护肝健康」</div>
  5192. </div>
  5193. <div style="margin-bottom:10px; padding-top:8px; border-top:1px dashed var(--border);">
  5194. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">承接定位</div>
  5195. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">对标 Amazon Top 6 复合配方,国内 OTC 首创</div>
  5196. </div>
  5197. <div style="display:grid; gap:4px;">
  5198. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5199. <span style="font-size:0.7rem; color:var(--text-3);">品类机会</span>
  5200. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#D4A574; font-weight:700;">B 级·推荐</span>
  5201. </div>
  5202. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5203. <span style="font-size:0.7rem; color:var(--text-3);">甜点价位</span>
  5204. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#D4A574; font-weight:700;">¥79-119</span>
  5205. </div>
  5206. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5207. <span style="font-size:0.7rem; color:var(--text-3);">首创心智</span>
  5208. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#D4A574; font-weight:700;">国内 #1</span>
  5209. </div>
  5210. </div>
  5211. </div>
  5212. <div style="background:var(--bg-1); border:1px solid #2D9C5D44; border-top:4px solid #2D9C5D; border-radius:var(--radius-md); padding:18px;">
  5213. <div style="display:flex; align-items:center; gap:8px; margin-bottom:10px;">
  5214. <div style="width:38px; height:38px; background:#2D9C5D22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">📦</div>
  5215. <div>
  5216. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em;">DIM · 3 / 5</div>
  5217. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">包装</div>
  5218. </div>
  5219. </div>
  5220. <div style="padding:8px; background:#2D9C5D08; border-left:3px solid #2D9C5D; border-radius:4px; margin-bottom:10px;">
  5221. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.08em; margin-bottom:3px;">核心内容</div>
  5222. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">江中绿 × 琥珀金双色系 · 4 层视觉信息架构</div>
  5223. </div>
  5224. <div style="margin-bottom:10px;">
  5225. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">补充强化</div>
  5226. <div style="font-size:0.74rem; color:var(--text-2); line-height:1.45;">正面成分克数透明表 · 主动回应「不要吃护肝片」</div>
  5227. </div>
  5228. <div style="margin-bottom:10px; padding-top:8px; border-top:1px dashed var(--border);">
  5229. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">承接定位</div>
  5230. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">视觉化定位 · 货架识别度 ≥ 90%</div>
  5231. </div>
  5232. <div style="display:grid; gap:4px;">
  5233. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5234. <span style="font-size:0.7rem; color:var(--text-3);">主色符合度</span>
  5235. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#2D9C5D; font-weight:700;">100%</span>
  5236. </div>
  5237. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5238. <span style="font-size:0.7rem; color:var(--text-3);">竞品差异化</span>
  5239. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#2D9C5D; font-weight:700;">9 维度</span>
  5240. </div>
  5241. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5242. <span style="font-size:0.7rem; color:var(--text-3);">SKU 变体</span>
  5243. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#2D9C5D; font-weight:700;">L-01 至 L-05</span>
  5244. </div>
  5245. </div>
  5246. </div>
  5247. <div style="background:var(--bg-1); border:1px solid #8B5CF644; border-top:4px solid #8B5CF6; border-radius:var(--radius-md); padding:18px;">
  5248. <div style="display:flex; align-items:center; gap:8px; margin-bottom:10px;">
  5249. <div style="width:38px; height:38px; background:#8B5CF622; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">🎨</div>
  5250. <div>
  5251. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em;">DIM · 4 / 5</div>
  5252. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">主视觉 KV</div>
  5253. </div>
  5254. </div>
  5255. <div style="padding:8px; background:#8B5CF608; border-left:3px solid #8B5CF6; border-radius:4px; margin-bottom:10px;">
  5256. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.08em; margin-bottom:3px;">核心内容</div>
  5257. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">三重协同守护 · 情感+理性双重表达</div>
  5258. </div>
  5259. <div style="margin-bottom:10px;">
  5260. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">补充强化</div>
  5261. <div style="font-size:0.74rem; color:var(--text-2); line-height:1.45;">3 版本:情感守护 / 理性科普 / 对比进化</div>
  5262. </div>
  5263. <div style="margin-bottom:10px; padding-top:8px; border-top:1px dashed var(--border);">
  5264. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">承接定位</div>
  5265. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">情感(夜间守护)+ 理性(分子对比)+ 竞争(vs 单一)</div>
  5266. </div>
  5267. <div style="display:grid; gap:4px;">
  5268. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5269. <span style="font-size:0.7rem; color:var(--text-3);">KV 版本</span>
  5270. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#8B5CF6; font-weight:700;">3 套</span>
  5271. </div>
  5272. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5273. <span style="font-size:0.7rem; color:var(--text-3);">应用延展</span>
  5274. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#8B5CF6; font-weight:700;">6 场景</span>
  5275. </div>
  5276. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5277. <span style="font-size:0.7rem; color:var(--text-3);">交付文件</span>
  5278. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#8B5CF6; font-weight:700;">18 套组合</span>
  5279. </div>
  5280. </div>
  5281. </div>
  5282. <div style="background:var(--bg-1); border:1px solid #0085CA44; border-top:4px solid #0085CA; border-radius:var(--radius-md); padding:18px;">
  5283. <div style="display:flex; align-items:center; gap:8px; margin-bottom:10px;">
  5284. <div style="width:38px; height:38px; background:#0085CA22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">⚙️</div>
  5285. <div>
  5286. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em;">DIM · 5 / 5</div>
  5287. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">价值链</div>
  5288. </div>
  5289. </div>
  5290. <div style="padding:8px; background:#0085CA08; border-left:3px solid #0085CA; border-radius:4px; margin-bottom:10px;">
  5291. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.08em; margin-bottom:3px;">核心内容</div>
  5292. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">研发 → 生产 → 渠道 → 营销 → 服务 → 体验 · 6 环闭环</div>
  5293. </div>
  5294. <div style="margin-bottom:10px;">
  5295. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">补充强化</div>
  5296. <div style="font-size:0.74rem; color:var(--text-2); line-height:1.45;">一物一码 + 服用日历 + 第三方检测 · 对抗信任危机</div>
  5297. </div>
  5298. <div style="margin-bottom:10px; padding-top:8px; border-top:1px dashed var(--border);">
  5299. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:3px;">承接定位</div>
  5300. <div style="font-size:0.72rem; color:var(--text-2); line-height:1.45;">端到端转化 2%(累计)· 行业头部表现</div>
  5301. </div>
  5302. <div style="display:grid; gap:4px;">
  5303. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5304. <span style="font-size:0.7rem; color:var(--text-3);">PMF Fit</span>
  5305. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#0085CA; font-weight:700;">92%</span>
  5306. </div>
  5307. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5308. <span style="font-size:0.7rem; color:var(--text-3);">复购率</span>
  5309. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#0085CA; font-weight:700;">40%</span>
  5310. </div>
  5311. <div style="display:flex; justify-content:space-between; padding:4px 8px; background:var(--bg-2); border-radius:3px;">
  5312. <span style="font-size:0.7rem; color:var(--text-3);">30 日留存</span>
  5313. <span style="font-family:var(--font-mono); font-size:0.72rem; color:#0085CA; font-weight:700;">62%</span>
  5314. </div>
  5315. </div>
  5316. </div>
  5317. </div>
  5318. <div class="fade-up" style="background:linear-gradient(135deg, #D4A57410, #2D9C5D08, #FF4D8D08); border:1px solid #D4A57444; border-radius:var(--radius-md); padding:32px;">
  5319. <div style="text-align:center; margin-bottom:20px;">
  5320. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.2em; margin-bottom:8px;">COMPOUND CORE · 复合体中心价值</div>
  5321. <h3 class="text-h1" style="color:var(--text-1); font-size:2.2rem; margin:0;">
  5322. <span style="color:#2D9C5D;">江中肝纯片</span> ·
  5323. <span style="color:#D4A574;">4 重协同</span> ·
  5324. <span style="color:#D4A574;">场景化复合护肝</span>
  5325. </h3>
  5326. <div style="color:var(--text-2); margin-top:12px; font-size:0.98rem; line-height:1.7; max-width:860px; margin-left:auto; margin-right:auto;">
  5327. 基于 <strong style="color:#FF4D8D;">3 类人群真实 VOC</strong>(4001 赞爆款验证),打造国内 OTC 首创 <strong style="color:#D4A574;">4 重协同复合护肝片</strong>,以 <strong style="color:#2D9C5D;">江中绿+琥珀金</strong> 视觉语言、<strong style="color:#8B5CF6;">3 版 KV</strong>、<strong style="color:#D4A574;">6 环价值链</strong>形成完整闭环,复购率 40%、30 日留存 62%、PMF Fit 92%,从 <strong>产品复合体</strong> 阶段平滑衔接 <strong>营销复合体</strong>。
  5328. </div>
  5329. </div>
  5330. <div style="display:flex; justify-content:center; margin-top:28px;">
  5331. <svg viewBox="0 0 400 280" style="max-width:620px; width:100%; height:auto;">
  5332. <defs>
  5333. <radialGradient id="gradCompoundCore" cx="50%" cy="50%" r="50%">
  5334. <stop offset="0" stop-color="#D4A574" stop-opacity="0.9"/>
  5335. <stop offset="1" stop-color="#D4A574" stop-opacity="0.7"/>
  5336. </radialGradient>
  5337. </defs>
  5338. <circle cx="200" cy="140" r="48" fill="url(#gradCompoundCore)" stroke="#D4A574" stroke-width="2"/>
  5339. <text x="200" y="135" text-anchor="middle" font-family="ui-sans-serif" font-size="14" fill="#fff" font-weight="900">江中肝纯片</text>
  5340. <text x="200" y="154" text-anchor="middle" font-family="ui-sans-serif" font-size="10" fill="#fff" font-weight="600" opacity="0.95">产品复合体</text>
  5341. <line x1="200" y1="88" x2="200" y2="69" stroke="#FF4D8D" stroke-width="1.5" stroke-dasharray="3,3"/>
  5342. <circle cx="200" cy="45" r="26" fill="#FF4D8D" stroke="#FF4D8D" stroke-width="2"/>
  5343. <text x="200" y="43" text-anchor="middle" font-family="ui-sans-serif" font-size="15" font-weight="900" fill="#fff">👥</text>
  5344. <text x="200" y="56" text-anchor="middle" font-family="ui-sans-serif" font-size="8" font-weight="700" fill="#fff" opacity="0.95">目标人群</text>
  5345. <line x1="257.0633909777092" y1="123.93111629250274" x2="281.7908604013832" y2="118.05979339937873" stroke="#D4A574" stroke-width="1.5" stroke-dasharray="3,3"/>
  5346. <circle cx="304.6162167924669" cy="110.64338553438" r="26" fill="#D4A574" stroke="#D4A574" stroke-width="2"/>
  5347. <text x="304.6162167924669" y="108.64338553438" text-anchor="middle" font-family="ui-sans-serif" font-size="15" font-weight="900" fill="#fff">🎯</text>
  5348. <text x="304.6162167924669" y="121.64338553438" text-anchor="middle" font-family="ui-sans-serif" font-size="8" font-weight="700" fill="#fff" opacity="0.95">定位</text>
  5349. <line x1="235.2671151375484" y1="182.06888370749726" x2="250.54953169715267" y2="197.44020660062125" stroke="#2D9C5D" stroke-width="1.5" stroke-dasharray="3,3"/>
  5350. <circle cx="264.65637775217203" cy="216.85661446562" r="26" fill="#2D9C5D" stroke="#2D9C5D" stroke-width="2"/>
  5351. <text x="264.65637775217203" y="214.85661446562" text-anchor="middle" font-family="ui-sans-serif" font-size="15" font-weight="900" fill="#fff">📦</text>
  5352. <text x="264.65637775217203" y="227.85661446562" text-anchor="middle" font-family="ui-sans-serif" font-size="8" font-weight="700" fill="#fff" opacity="0.95">包装</text>
  5353. <line x1="164.7328848624516" y1="182.06888370749726" x2="149.45046830284733" y2="197.44020660062125" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="3,3"/>
  5354. <circle cx="135.34362224782797" cy="216.85661446562" r="26" fill="#8B5CF6" stroke="#8B5CF6" stroke-width="2"/>
  5355. <text x="135.34362224782797" y="214.85661446562" text-anchor="middle" font-family="ui-sans-serif" font-size="15" font-weight="900" fill="#fff">🎨</text>
  5356. <text x="135.34362224782797" y="227.85661446562" text-anchor="middle" font-family="ui-sans-serif" font-size="8" font-weight="700" fill="#fff" opacity="0.95">主视觉 KV</text>
  5357. <line x1="142.93660902229078" y1="123.93111629250274" x2="118.20913959861679" y2="118.05979339937873" stroke="#0085CA" stroke-width="1.5" stroke-dasharray="3,3"/>
  5358. <circle cx="95.3837832075331" cy="110.64338553438" r="26" fill="#0085CA" stroke="#0085CA" stroke-width="2"/>
  5359. <text x="95.3837832075331" y="108.64338553438" text-anchor="middle" font-family="ui-sans-serif" font-size="15" font-weight="900" fill="#fff">⚙️</text>
  5360. <text x="95.3837832075331" y="121.64338553438" text-anchor="middle" font-family="ui-sans-serif" font-size="8" font-weight="700" fill="#fff" opacity="0.95">价值链</text>
  5361. </svg>
  5362. </div>
  5363. </div>
  5364. </div>
  5365. </section>
  5366. <section class="report-section" id="synthesis-2" data-tone="amber" data-slide-num="34/36">
  5367. <div class="section-inner">
  5368. <div class="section-head rise-in">
  5369. <div class="section-eyebrow" style="color:#D4A574;">2.6.2 · PRIOR-WORK INHERITANCE</div>
  5370. <h2 class="text-h1"><span class="headline-anim">与前序方案承接 · 5 大输入转化链路</span></h2>
  5371. <p class="section-sub">本方案 = <strong style="color:#D4A574;">VOC + 品类 + 竞品 + 市场 + 方法论</strong> 5 输入聚合体,每输入的落地去向 + 承接度打分</p>
  5372. </div>
  5373. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; margin-bottom:24px;">
  5374. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:14px;">INHERITANCE TABLE · 5 前序 → 本方案</div>
  5375. <div style="display:grid; gap:14px;">
  5376. <div style="display:grid; grid-template-columns:220px 1fr 260px 120px; gap:16px; padding:16px; background:#FF4D8D06; border:1px solid #FF4D8D33; border-left:4px solid #FF4D8D; border-radius:var(--radius-md); align-items:center;">
  5377. <div>
  5378. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em; margin-bottom:6px;">PRIOR · 1</div>
  5379. <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px;">
  5380. <div style="width:30px; height:30px; background:#FF4D8D22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">📊</div>
  5381. <div style="font-size:0.92rem; font-weight:800; color:var(--text-1);">VOC 诊断报告</div>
  5382. </div>
  5383. <div style="font-size:0.68rem; color:var(--text-3); font-family:var(--font-mono); line-height:1.4; word-break:break-all;">reports/jiangzhong-liver-voc-report.html</div>
  5384. </div>
  5385. <div>
  5386. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">本方案承接</div>
  5387. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1); margin-bottom:5px;">人群 VOC 原声 + Top 主题提炼</div>
  5388. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.5;">熬夜打工人(4001 赞爆款)/ 应酬男(场景 7 次最高)/ 情绪肝女性 3 类人群画像数据底座</div>
  5389. </div>
  5390. <div>
  5391. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">落地于</div>
  5392. <div style="display:flex; flex-direction:column; gap:3px;">
  5393. <div style="padding:3px 7px; background:#FF4D8D15; color:#FF4D8D; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.1 目标人群(5 子章)</div><div style="padding:3px 7px; background:#FF4D8D15; color:#FF4D8D; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.2 定位(语言素材)</div><div style="padding:3px 7px; background:#FF4D8D15; color:#FF4D8D; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.5 价值链(VOC 原声)</div>
  5394. </div>
  5395. </div>
  5396. <div style="text-align:center;">
  5397. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#FF4D8D; line-height:1;">95</div>
  5398. <div class="text-mono text-xs" style="color:#FF4D8D; margin-top:4px; letter-spacing:0.08em;">INHERIT / 100</div>
  5399. <div style="margin-top:6px; height:4px; background:var(--bg-2); border-radius:2px; overflow:hidden;">
  5400. <div style="width:95%; height:100%; background:#FF4D8D;"></div>
  5401. </div>
  5402. </div>
  5403. </div>
  5404. <div style="display:grid; grid-template-columns:220px 1fr 260px 120px; gap:16px; padding:16px; background:#D4A57406; border:1px solid #D4A57433; border-left:4px solid #D4A574; border-radius:var(--radius-md); align-items:center;">
  5405. <div>
  5406. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.1em; margin-bottom:6px;">PRIOR · 2</div>
  5407. <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px;">
  5408. <div style="width:30px; height:30px; background:#D4A57422; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">🎯</div>
  5409. <div style="font-size:0.92rem; font-weight:800; color:var(--text-1);">品类机会评估</div>
  5410. </div>
  5411. <div style="font-size:0.68rem; color:var(--text-3); font-family:var(--font-mono); line-height:1.4; word-break:break-all;">基于 Amazon 689 款 + TikTok Ads 官方关键词</div>
  5412. </div>
  5413. <div>
  5414. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">本方案承接</div>
  5415. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1); margin-bottom:5px;">品类定位 + 甜点价位 + 机会等级</div>
  5416. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.5;">B 级推荐 / ¥79-119 甜点价位 / Amazon Top 6 中 4 款复合配方验证</div>
  5417. </div>
  5418. <div>
  5419. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">落地于</div>
  5420. <div style="display:flex; flex-direction:column; gap:3px;">
  5421. <div style="padding:3px 7px; background:#D4A57415; color:#D4A574; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.2 定位</div><div style="padding:3px 7px; background:#D4A57415; color:#D4A574; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.2.6 品牌架构</div><div style="padding:3px 7px; background:#D4A57415; color:#D4A574; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.5 价值链(渠道环节)</div>
  5422. </div>
  5423. </div>
  5424. <div style="text-align:center;">
  5425. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#D4A574; line-height:1;">92</div>
  5426. <div class="text-mono text-xs" style="color:#D4A574; margin-top:4px; letter-spacing:0.08em;">INHERIT / 100</div>
  5427. <div style="margin-top:6px; height:4px; background:var(--bg-2); border-radius:2px; overflow:hidden;">
  5428. <div style="width:92%; height:100%; background:#D4A574;"></div>
  5429. </div>
  5430. </div>
  5431. </div>
  5432. <div style="display:grid; grid-template-columns:220px 1fr 260px 120px; gap:16px; padding:16px; background:#0085CA06; border:1px solid #0085CA33; border-left:4px solid #0085CA; border-radius:var(--radius-md); align-items:center;">
  5433. <div>
  5434. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em; margin-bottom:6px;">PRIOR · 3</div>
  5435. <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px;">
  5436. <div style="width:30px; height:30px; background:#0085CA22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">⚔️</div>
  5437. <div style="font-size:0.92rem; font-weight:800; color:var(--text-1);">竞品深度对标</div>
  5438. </div>
  5439. <div style="font-size:0.68rem; color:var(--text-3); font-family:var(--font-mono); line-height:1.4; word-break:break-all;">Amazon 689 款 + 国内水飞蓟片 Top 10</div>
  5440. </div>
  5441. <div>
  5442. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">本方案承接</div>
  5443. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1); margin-bottom:5px;">差异化核心 + 竞品避雷要素</div>
  5444. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.5;">4 重协同对标 Milk Thistle+Turmeric+NAC+Dandelion+Glutathione 黄金组合,国内首创复合 OTC</div>
  5445. </div>
  5446. <div>
  5447. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">落地于</div>
  5448. <div style="display:flex; flex-direction:column; gap:3px;">
  5449. <div style="padding:3px 7px; background:#0085CA15; color:#0085CA; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.3 包装(竞品差异化)</div><div style="padding:3px 7px; background:#0085CA15; color:#0085CA; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.4 KV(对比进化版)</div><div style="padding:3px 7px; background:#0085CA15; color:#0085CA; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.5.1 价值主张(填补同质化)</div>
  5450. </div>
  5451. </div>
  5452. <div style="text-align:center;">
  5453. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#0085CA; line-height:1;">90</div>
  5454. <div class="text-mono text-xs" style="color:#0085CA; margin-top:4px; letter-spacing:0.08em;">INHERIT / 100</div>
  5455. <div style="margin-top:6px; height:4px; background:var(--bg-2); border-radius:2px; overflow:hidden;">
  5456. <div style="width:90%; height:100%; background:#0085CA;"></div>
  5457. </div>
  5458. </div>
  5459. </div>
  5460. <div style="display:grid; grid-template-columns:220px 1fr 260px 120px; gap:16px; padding:16px; background:#FF8C4206; border:1px solid #FF8C4233; border-left:4px solid #FF8C42; border-radius:var(--radius-md); align-items:center;">
  5461. <div>
  5462. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em; margin-bottom:6px;">PRIOR · 4</div>
  5463. <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px;">
  5464. <div style="width:30px; height:30px; background:#FF8C4222; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">🛰️</div>
  5465. <div style="font-size:0.92rem; font-weight:800; color:var(--text-1);">市场情报扫描</div>
  5466. </div>
  5467. <div style="font-size:0.68rem; color:var(--text-3); font-family:var(--font-mono); line-height:1.4; word-break:break-all;">TikTok Ads 官方 + 抖音全站热词</div>
  5468. </div>
  5469. <div>
  5470. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">本方案承接</div>
  5471. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1); margin-bottom:5px;">关键词趋势 + KOL 生态地图</div>
  5472. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.5;">&quot;熬夜自救&quot; / &quot;养肝护肝&quot; / &quot;打工人自救&quot; 高热词 + 生活/医学/专家三类 KOL 矩阵</div>
  5473. </div>
  5474. <div>
  5475. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">落地于</div>
  5476. <div style="display:flex; flex-direction:column; gap:3px;">
  5477. <div style="padding:3px 7px; background:#FF8C4215; color:#FF8C42; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.1.2 影响人群</div><div style="padding:3px 7px; background:#FF8C4215; color:#FF8C42; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.4.5 应用延展(社媒版)</div><div style="padding:3px 7px; background:#FF8C4215; color:#FF8C42; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.5 价值链(营销环节)</div>
  5478. </div>
  5479. </div>
  5480. <div style="text-align:center;">
  5481. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#FF8C42; line-height:1;">88</div>
  5482. <div class="text-mono text-xs" style="color:#FF8C42; margin-top:4px; letter-spacing:0.08em;">INHERIT / 100</div>
  5483. <div style="margin-top:6px; height:4px; background:var(--bg-2); border-radius:2px; overflow:hidden;">
  5484. <div style="width:88%; height:100%; background:#FF8C42;"></div>
  5485. </div>
  5486. </div>
  5487. </div>
  5488. <div style="display:grid; grid-template-columns:220px 1fr 260px 120px; gap:16px; padding:16px; background:#8B5CF606; border:1px solid #8B5CF633; border-left:4px solid #8B5CF6; border-radius:var(--radius-md); align-items:center;">
  5489. <div>
  5490. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em; margin-bottom:6px;">PRIOR · 5</div>
  5491. <div style="display:flex; align-items:center; gap:8px; margin-bottom:6px;">
  5492. <div style="width:30px; height:30px; background:#8B5CF622; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.1rem;">📘</div>
  5493. <div style="font-size:0.92rem; font-weight:800; color:var(--text-1);">美佑童方法论</div>
  5494. </div>
  5495. <div style="font-size:0.68rem; color:var(--text-3); font-family:var(--font-mono); line-height:1.4; word-break:break-all;">E:/文件资料/md文档生成的海报或者策划/2.美佑童-产品复合体.docx</div>
  5496. </div>
  5497. <div>
  5498. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">本方案承接</div>
  5499. <div style="font-size:0.88rem; font-weight:700; color:var(--text-1); margin-bottom:5px;">产品复合体 5 维框架</div>
  5500. <div style="font-size:0.75rem; color:var(--text-2); line-height:1.5;">严格对标 docx 2.1-2.6 章节结构 · 保证交付物可复用、可对照、可迭代</div>
  5501. </div>
  5502. <div>
  5503. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:4px;">落地于</div>
  5504. <div style="display:flex; flex-direction:column; gap:3px;">
  5505. <div style="padding:3px 7px; background:#8B5CF615; color:#8B5CF6; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 全报告 6 章节结构</div><div style="padding:3px 7px; background:#8B5CF615; color:#8B5CF6; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 2.6 总结(承接 docx 2.6 章)</div><div style="padding:3px 7px; background:#8B5CF615; color:#8B5CF6; border-radius:3px; font-size:0.7rem; font-weight:600;">▸ 后续复合体推演框架复用</div>
  5506. </div>
  5507. </div>
  5508. <div style="text-align:center;">
  5509. <div style="font-family:var(--font-head); font-weight:900; font-size:2.2rem; color:#8B5CF6; line-height:1;">100</div>
  5510. <div class="text-mono text-xs" style="color:#8B5CF6; margin-top:4px; letter-spacing:0.08em;">INHERIT / 100</div>
  5511. <div style="margin-top:6px; height:4px; background:var(--bg-2); border-radius:2px; overflow:hidden;">
  5512. <div style="width:100%; height:100%; background:#8B5CF6;"></div>
  5513. </div>
  5514. </div>
  5515. </div>
  5516. </div>
  5517. </div>
  5518. <div class="fade-up" style="background:linear-gradient(135deg, #D4A57410, #2D9C5D08); border:1px solid #D4A57444; border-radius:var(--radius-md); padding:24px;">
  5519. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:16px;">INTEGRATION FUNNEL · 前序输入整合</div>
  5520. <div style="display:grid; grid-template-columns:1fr auto 1fr; gap:20px; align-items:center;">
  5521. <div>
  5522. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:10px;">5 大输入</div>
  5523. <div style="display:grid; gap:6px;">
  5524. <div style="display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--bg-1); border-left:3px solid #FF4D8D; border-radius:4px;">
  5525. <div style="font-size:1rem;">📊</div>
  5526. <div style="flex:1; font-size:0.82rem; font-weight:700; color:var(--text-1);">VOC 诊断报告</div>
  5527. <div style="font-family:var(--font-mono); font-size:0.75rem; color:#FF4D8D; font-weight:700;">95%</div>
  5528. </div>
  5529. <div style="display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--bg-1); border-left:3px solid #D4A574; border-radius:4px;">
  5530. <div style="font-size:1rem;">🎯</div>
  5531. <div style="flex:1; font-size:0.82rem; font-weight:700; color:var(--text-1);">品类机会评估</div>
  5532. <div style="font-family:var(--font-mono); font-size:0.75rem; color:#D4A574; font-weight:700;">92%</div>
  5533. </div>
  5534. <div style="display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--bg-1); border-left:3px solid #0085CA; border-radius:4px;">
  5535. <div style="font-size:1rem;">⚔️</div>
  5536. <div style="flex:1; font-size:0.82rem; font-weight:700; color:var(--text-1);">竞品深度对标</div>
  5537. <div style="font-family:var(--font-mono); font-size:0.75rem; color:#0085CA; font-weight:700;">90%</div>
  5538. </div>
  5539. <div style="display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--bg-1); border-left:3px solid #FF8C42; border-radius:4px;">
  5540. <div style="font-size:1rem;">🛰️</div>
  5541. <div style="flex:1; font-size:0.82rem; font-weight:700; color:var(--text-1);">市场情报扫描</div>
  5542. <div style="font-family:var(--font-mono); font-size:0.75rem; color:#FF8C42; font-weight:700;">88%</div>
  5543. </div>
  5544. <div style="display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--bg-1); border-left:3px solid #8B5CF6; border-radius:4px;">
  5545. <div style="font-size:1rem;">📘</div>
  5546. <div style="flex:1; font-size:0.82rem; font-weight:700; color:var(--text-1);">美佑童方法论</div>
  5547. <div style="font-family:var(--font-mono); font-size:0.75rem; color:#8B5CF6; font-weight:700;">100%</div>
  5548. </div>
  5549. </div>
  5550. </div>
  5551. <div style="display:flex; flex-direction:column; align-items:center; gap:8px;">
  5552. <div style="font-size:1.8rem; color:#D4A574;">➡️</div>
  5553. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.12em; text-align:center; font-weight:700;">INTEGRATE<br/>聚合</div>
  5554. <div style="font-size:1.8rem; color:#D4A574;">⚡</div>
  5555. </div>
  5556. <div>
  5557. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:10px;">1 个复合输出</div>
  5558. <div style="padding:20px; background:linear-gradient(135deg, #2D9C5D, #D4A574); border-radius:var(--radius-md); color:#fff; text-align:center;">
  5559. <div style="font-size:1.8rem; margin-bottom:6px;">🧬</div>
  5560. <div style="font-size:1.1rem; font-weight:900; margin-bottom:6px;">江中肝纯片 · 产品复合体</div>
  5561. <div style="font-size:0.78rem; opacity:0.95; line-height:1.5;">目标人群 × 定位 × 包装 × KV × 价值链 一体化交付,延续定位方案衔接营销方案</div>
  5562. <div class="text-mono text-xs" style="margin-top:10px; padding:4px 10px; background:rgba(255,255,255,0.2); border-radius:4px; display:inline-block; letter-spacing:0.12em;">INHERIT SCORE · 93</div>
  5563. </div>
  5564. </div>
  5565. </div>
  5566. </div>
  5567. </div>
  5568. </section>
  5569. <section class="report-section" id="synthesis-3" data-tone="amber" data-slide-num="35/36">
  5570. <div class="section-inner">
  5571. <div class="section-head rise-in">
  5572. <div class="section-eyebrow" style="color:#D4A574;">2.6.3 · NEXT STAGE TRANSITION</div>
  5573. <h2 class="text-h1"><span class="headline-anim">下一阶段衔接 · 6 条工作流 FROM COMPOUND TO LAUNCH</span></h2>
  5574. <p class="section-sub">产品复合体方案已完成 · 向下延伸 <strong style="color:#D4A574;">营销 · 海报 · 渠道 · 产品 · PR · 数据</strong> 6 大工作流</p>
  5575. </div>
  5576. <!-- 时间轴全景 -->
  5577. <div class="fade-up" style="background:var(--bg-1); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; margin-bottom:24px;">
  5578. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; margin-bottom:14px;">2026 ROADMAP · 产品复合体后续工作全景</div>
  5579. <svg viewBox="0 0 1200 180" style="width:100%; height:auto;">
  5580. <defs>
  5581. <linearGradient id="gradRoadmap" x1="0" y1="0" x2="1" y2="0">
  5582. <stop offset="0" stop-color="#D4A574"/>
  5583. <stop offset="0.33" stop-color="#FF8C42"/>
  5584. <stop offset="0.66" stop-color="#2D9C5D"/>
  5585. <stop offset="1" stop-color="#0085CA"/>
  5586. </linearGradient>
  5587. </defs>
  5588. <!-- 主时间轴 -->
  5589. <line x1="60" y1="100" x2="1140" y2="100" stroke="url(#gradRoadmap)" stroke-width="4" stroke-linecap="round"/>
  5590. <!-- 季度刻度 -->
  5591. <circle cx="200" cy="100" r="8" fill="var(--bg-1)" stroke="#D4A574" stroke-width="2"/>
  5592. <text x="200" y="86" text-anchor="middle" font-family="ui-monospace, monospace" font-size="11" fill="var(--text-1)" font-weight="700">Q1 2026</text>
  5593. <circle cx="480" cy="100" r="8" fill="var(--bg-1)" stroke="#D4A574" stroke-width="2"/>
  5594. <text x="480" y="86" text-anchor="middle" font-family="ui-monospace, monospace" font-size="11" fill="var(--text-1)" font-weight="700">Q2 2026</text>
  5595. <circle cx="760" cy="100" r="8" fill="var(--bg-1)" stroke="#D4A574" stroke-width="2"/>
  5596. <text x="760" y="86" text-anchor="middle" font-family="ui-monospace, monospace" font-size="11" fill="var(--text-1)" font-weight="700">Q3 2026</text>
  5597. <circle cx="1040" cy="100" r="8" fill="var(--bg-1)" stroke="#D4A574" stroke-width="2"/>
  5598. <text x="1040" y="86" text-anchor="middle" font-family="ui-monospace, monospace" font-size="11" fill="var(--text-1)" font-weight="700">Q4 2026</text>
  5599. <!-- 6 阶段节点 -->
  5600. <line x1="170" y1="100" x2="170" y2="50" stroke="#FF8C42" stroke-width="1.5" stroke-dasharray="3,3"/>
  5601. <circle cx="170" cy="40" r="20" fill="#FF8C42"/>
  5602. <text x="170" y="45" text-anchor="middle" font-family="ui-sans-serif" font-size="14" fill="#fff">📢</text>
  5603. <text x="170" y="12" text-anchor="middle" font-family="ui-sans-serif" font-size="9" fill="#FF8C42" font-weight="700" letter-spacing="0.06em">NEXT · 03</text>
  5604. <text x="170" y="25" text-anchor="middle" font-family="ui-sans-serif" font-size="10" fill="var(--text-1)" font-weight="700">营销复合体方案</text>
  5605. <line x1="335" y1="100" x2="335" y2="150" stroke="#8B5CF6" stroke-width="1.5" stroke-dasharray="3,3"/>
  5606. <circle cx="335" cy="160" r="20" fill="#8B5CF6"/>
  5607. <text x="335" y="165" text-anchor="middle" font-family="ui-sans-serif" font-size="14" fill="#fff">🎨</text>
  5608. <text x="335" y="194" text-anchor="middle" font-family="ui-sans-serif" font-size="9" fill="#8B5CF6" font-weight="700" letter-spacing="0.06em">NEXT · 04</text>
  5609. <text x="335" y="206" text-anchor="middle" font-family="ui-sans-serif" font-size="10" fill="var(--text-1)" font-weight="700">海报 AI 提示词</text>
  5610. <line x1="500" y1="100" x2="500" y2="50" stroke="#2D9C5D" stroke-width="1.5" stroke-dasharray="3,3"/>
  5611. <circle cx="500" cy="40" r="20" fill="#2D9C5D"/>
  5612. <text x="500" y="45" text-anchor="middle" font-family="ui-sans-serif" font-size="14" fill="#fff">🚚</text>
  5613. <text x="500" y="12" text-anchor="middle" font-family="ui-sans-serif" font-size="9" fill="#2D9C5D" font-weight="700" letter-spacing="0.06em">NEXT · 05</text>
  5614. <text x="500" y="25" text-anchor="middle" font-family="ui-sans-serif" font-size="10" fill="var(--text-1)" font-weight="700">渠道策略执行</text>
  5615. <line x1="665" y1="100" x2="665" y2="150" stroke="#0085CA" stroke-width="1.5" stroke-dasharray="3,3"/>
  5616. <circle cx="665" cy="160" r="20" fill="#0085CA"/>
  5617. <text x="665" y="165" text-anchor="middle" font-family="ui-sans-serif" font-size="14" fill="#fff">📋</text>
  5618. <text x="665" y="194" text-anchor="middle" font-family="ui-sans-serif" font-size="9" fill="#0085CA" font-weight="700" letter-spacing="0.06em">NEXT · 06</text>
  5619. <text x="665" y="206" text-anchor="middle" font-family="ui-sans-serif" font-size="10" fill="var(--text-1)" font-weight="700">产品立项 PRD</text>
  5620. <line x1="830" y1="100" x2="830" y2="50" stroke="#FF4D8D" stroke-width="1.5" stroke-dasharray="3,3"/>
  5621. <circle cx="830" cy="40" r="20" fill="#FF4D8D"/>
  5622. <text x="830" y="45" text-anchor="middle" font-family="ui-sans-serif" font-size="14" fill="#fff">📰</text>
  5623. <text x="830" y="12" text-anchor="middle" font-family="ui-sans-serif" font-size="9" fill="#FF4D8D" font-weight="700" letter-spacing="0.06em">NEXT · 07</text>
  5624. <text x="830" y="25" text-anchor="middle" font-family="ui-sans-serif" font-size="10" fill="var(--text-1)" font-weight="700">PR / 内容传播</text>
  5625. <line x1="995" y1="100" x2="995" y2="150" stroke="#14B8A6" stroke-width="1.5" stroke-dasharray="3,3"/>
  5626. <circle cx="995" cy="160" r="20" fill="#14B8A6"/>
  5627. <text x="995" y="165" text-anchor="middle" font-family="ui-sans-serif" font-size="14" fill="#fff">📊</text>
  5628. <text x="995" y="194" text-anchor="middle" font-family="ui-sans-serif" font-size="9" fill="#14B8A6" font-weight="700" letter-spacing="0.06em">NEXT · 08</text>
  5629. <text x="995" y="206" text-anchor="middle" font-family="ui-sans-serif" font-size="10" fill="var(--text-1)" font-weight="700">数据闭环 · 一物一码后台</text>
  5630. </svg>
  5631. </div>
  5632. <!-- 6 工作流卡片 -->
  5633. <div class="fade-up" style="display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:24px;">
  5634. <div style="background:var(--bg-1); border:1px solid #FF8C4244; border-top:4px solid #FF8C42; border-radius:var(--radius-md); padding:18px;">
  5635. <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
  5636. <div style="display:flex; align-items:center; gap:10px;">
  5637. <div style="width:40px; height:40px; background:#FF8C4222; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">📢</div>
  5638. <div>
  5639. <div class="text-mono text-xs" style="color:#FF8C42; letter-spacing:0.1em;">NEXT · 03</div>
  5640. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">营销复合体方案</div>
  5641. </div>
  5642. </div>
  5643. <div style="padding:3px 8px; background:#FF4D8D22; color:#FF4D8D; border-radius:3px; font-family:var(--font-mono); font-size:0.7rem; font-weight:700;">P0</div>
  5644. </div>
  5645. <div style="padding:8px 10px; background:#FF8C4210; border-left:3px solid #FF8C42; border-radius:4px; margin-bottom:10px;">
  5646. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">基于产品复合体的&quot;4 重协同&quot;核心主张,向下延伸 STP/4P/传播矩阵</div>
  5647. </div>
  5648. <div style="margin-bottom:10px;">
  5649. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">🔗 来自本方案输入</div>
  5650. <ul style="margin:0; padding:0; list-style:none;">
  5651. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>本方案 2.1 目标人群(3 persona)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>本方案 2.2 定位(&quot;场景化复合护肝&quot;)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">▸</span>本方案 2.5 价值链(6 环闭环)</li>
  5652. </ul>
  5653. </div>
  5654. <div style="margin-bottom:10px;">
  5655. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">📤 下阶段产出</div>
  5656. <ul style="margin:0; padding:0; list-style:none;">
  5657. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">✓</span>STP 精细化分层(L-01/02/03 SKU × 3 persona)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">✓</span>4P 策略矩阵(产品/价格/渠道/促销)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">✓</span>传播主张 Key Message + 创意接口</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF8C42;">✓</span>媒介预算分配(小红书 40% / 抖音 30% / 医院 20% / 私域 10%)</li>
  5658. </ul>
  5659. </div>
  5660. <div style="padding-top:8px; border-top:1px dashed var(--border); display:grid; grid-template-columns:1fr 1fr; gap:8px;">
  5661. <div>
  5662. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">⏱️ 排期</div>
  5663. <div style="font-size:0.72rem; color:var(--text-1); font-weight:600;">2026 Q1 启动 · 8 周产出</div>
  5664. </div>
  5665. <div>
  5666. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">🎯 KPI</div>
  5667. <div style="font-size:0.72rem; color:#FF8C42; font-weight:700;">心智认知 ≥ 30% · GMV ¥1.2 亿/年</div>
  5668. </div>
  5669. </div>
  5670. </div>
  5671. <div style="background:var(--bg-1); border:1px solid #8B5CF644; border-top:4px solid #8B5CF6; border-radius:var(--radius-md); padding:18px;">
  5672. <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
  5673. <div style="display:flex; align-items:center; gap:10px;">
  5674. <div style="width:40px; height:40px; background:#8B5CF622; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">🎨</div>
  5675. <div>
  5676. <div class="text-mono text-xs" style="color:#8B5CF6; letter-spacing:0.1em;">NEXT · 04</div>
  5677. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">海报 AI 提示词</div>
  5678. </div>
  5679. </div>
  5680. <div style="padding:3px 8px; background:#FF4D8D22; color:#FF4D8D; border-radius:3px; font-family:var(--font-mono); font-size:0.7rem; font-weight:700;">P0</div>
  5681. </div>
  5682. <div style="padding:8px 10px; background:#8B5CF610; border-left:3px solid #8B5CF6; border-radius:4px; margin-bottom:10px;">
  5683. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">将 KV 视觉系统转化为可批量生成的 AI 提示词资产库</div>
  5684. </div>
  5685. <div style="margin-bottom:10px;">
  5686. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">🔗 来自本方案输入</div>
  5687. <ul style="margin:0; padding:0; list-style:none;">
  5688. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>本方案 2.3 包装视觉语言</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>本方案 2.4 KV 3 版本</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">▸</span>本方案 2.4.3 色彩系统</li>
  5689. </ul>
  5690. </div>
  5691. <div style="margin-bottom:10px;">
  5692. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">📤 下阶段产出</div>
  5693. <ul style="margin:0; padding:0; list-style:none;">
  5694. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">✓</span>MJ/SD 提示词库(3 KV × 6 场景 = 18 组)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">✓</span>电商详情页 A/B Test 模板</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">✓</span>小红书封面批量生成脚本</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#8B5CF6;">✓</span>品牌 DAM(数字资产管理)规范</li>
  5695. </ul>
  5696. </div>
  5697. <div style="padding-top:8px; border-top:1px dashed var(--border); display:grid; grid-template-columns:1fr 1fr; gap:8px;">
  5698. <div>
  5699. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">⏱️ 排期</div>
  5700. <div style="font-size:0.72rem; color:var(--text-1); font-weight:600;">2026 Q1 · 与营销复合体并行</div>
  5701. </div>
  5702. <div>
  5703. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">🎯 KPI</div>
  5704. <div style="font-size:0.72rem; color:#8B5CF6; font-weight:700;">日产出素材 ≥ 50 张 · 品牌符合度 ≥ 90%</div>
  5705. </div>
  5706. </div>
  5707. </div>
  5708. <div style="background:var(--bg-1); border:1px solid #2D9C5D44; border-top:4px solid #2D9C5D; border-radius:var(--radius-md); padding:18px;">
  5709. <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
  5710. <div style="display:flex; align-items:center; gap:10px;">
  5711. <div style="width:40px; height:40px; background:#2D9C5D22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">🚚</div>
  5712. <div>
  5713. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.1em;">NEXT · 05</div>
  5714. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">渠道策略执行</div>
  5715. </div>
  5716. </div>
  5717. <div style="padding:3px 8px; background:#FF4D8D22; color:#FF4D8D; border-radius:3px; font-family:var(--font-mono); font-size:0.7rem; font-weight:700;">P0</div>
  5718. </div>
  5719. <div style="padding:8px 10px; background:#2D9C5D10; border-left:3px solid #2D9C5D; border-radius:4px; margin-bottom:10px;">
  5720. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">从虚拟渠道地图到真实门店铺货的执行落地</div>
  5721. </div>
  5722. <div style="margin-bottom:10px;">
  5723. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">🔗 来自本方案输入</div>
  5724. <ul style="margin:0; padding:0; list-style:none;">
  5725. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>本方案 2.5.2 价值链渠道环节</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>本方案 2.2.6 品牌架构</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">▸</span>VOC 报告渠道偏好分析</li>
  5726. </ul>
  5727. </div>
  5728. <div style="margin-bottom:10px;">
  5729. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">📤 下阶段产出</div>
  5730. <ul style="margin:0; padding:0; list-style:none;">
  5731. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">✓</span>药店铺货计划(一心堂/大参林/老百姓优先 3w 门店)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">✓</span>电商平台启动排期(天猫旗舰 → 京东 → 拼多多)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">✓</span>医院 OTC 柜台培训材料</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#2D9C5D;">✓</span>O2O 即时零售(美团买药/叮当)接入</li>
  5732. </ul>
  5733. </div>
  5734. <div style="padding-top:8px; border-top:1px dashed var(--border); display:grid; grid-template-columns:1fr 1fr; gap:8px;">
  5735. <div>
  5736. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">⏱️ 排期</div>
  5737. <div style="font-size:0.72rem; color:var(--text-1); font-weight:600;">2026 Q1-Q2 · 6 个月完成首轮铺货</div>
  5738. </div>
  5739. <div>
  5740. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">🎯 KPI</div>
  5741. <div style="font-size:0.72rem; color:#2D9C5D; font-weight:700;">药店覆盖 ≥ 3w · O2O 履约 ≤ 30min</div>
  5742. </div>
  5743. </div>
  5744. </div>
  5745. <div style="background:var(--bg-1); border:1px solid #0085CA44; border-top:4px solid #0085CA; border-radius:var(--radius-md); padding:18px;">
  5746. <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
  5747. <div style="display:flex; align-items:center; gap:10px;">
  5748. <div style="width:40px; height:40px; background:#0085CA22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">📋</div>
  5749. <div>
  5750. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.1em;">NEXT · 06</div>
  5751. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">产品立项 PRD</div>
  5752. </div>
  5753. </div>
  5754. <div style="padding:3px 8px; background:#FF4D8D22; color:#FF4D8D; border-radius:3px; font-family:var(--font-mono); font-size:0.7rem; font-weight:700;">P0</div>
  5755. </div>
  5756. <div style="padding:8px 10px; background:#0085CA10; border-left:3px solid #0085CA; border-radius:4px; margin-bottom:10px;">
  5757. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">从战略方案到物理产品的 0→1 工程落地</div>
  5758. </div>
  5759. <div style="margin-bottom:10px;">
  5760. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">🔗 来自本方案输入</div>
  5761. <ul style="margin:0; padding:0; list-style:none;">
  5762. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>本方案 2.2.6 品牌架构(L-01/02/03/04/05)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>本方案 2.3 包装策略</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">▸</span>本方案 2.5.1 价值主张</li>
  5763. </ul>
  5764. </div>
  5765. <div style="margin-bottom:10px;">
  5766. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">📤 下阶段产出</div>
  5767. <ul style="margin:0; padding:0; list-style:none;">
  5768. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">✓</span>3 条 SKU 线配方终稿(L-01 循证 / L-02 应酬 / L-03 疏肝)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">✓</span>打样周期(4 周)+ 试产排期</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">✓</span>合规报批材料(国药准字 OTC)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#0085CA;">✓</span>上市 Ready 评审 Checklist</li>
  5769. </ul>
  5770. </div>
  5771. <div style="padding-top:8px; border-top:1px dashed var(--border); display:grid; grid-template-columns:1fr 1fr; gap:8px;">
  5772. <div>
  5773. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">⏱️ 排期</div>
  5774. <div style="font-size:0.72rem; color:var(--text-1); font-weight:600;">2026 Q1 启动 · Q3 上市</div>
  5775. </div>
  5776. <div>
  5777. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">🎯 KPI</div>
  5778. <div style="font-size:0.72rem; color:#0085CA; font-weight:700;">首批试产合格率 ≥ 98% · 合规通过率 100%</div>
  5779. </div>
  5780. </div>
  5781. </div>
  5782. <div style="background:var(--bg-1); border:1px solid #FF4D8D44; border-top:4px solid #FF4D8D; border-radius:var(--radius-md); padding:18px;">
  5783. <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
  5784. <div style="display:flex; align-items:center; gap:10px;">
  5785. <div style="width:40px; height:40px; background:#FF4D8D22; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">📰</div>
  5786. <div>
  5787. <div class="text-mono text-xs" style="color:#FF4D8D; letter-spacing:0.1em;">NEXT · 07</div>
  5788. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">PR / 内容传播</div>
  5789. </div>
  5790. </div>
  5791. <div style="padding:3px 8px; background:#FF8C4222; color:#FF8C42; border-radius:3px; font-family:var(--font-mono); font-size:0.7rem; font-weight:700;">P1</div>
  5792. </div>
  5793. <div style="padding:8px 10px; background:#FF4D8D10; border-left:3px solid #FF4D8D; border-radius:4px; margin-bottom:10px;">
  5794. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">跳出促销叙事,建立&quot;循证护肝专家&quot;长期品牌心智</div>
  5795. </div>
  5796. <div style="margin-bottom:10px;">
  5797. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">🔗 来自本方案输入</div>
  5798. <ul style="margin:0; padding:0; list-style:none;">
  5799. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>本方案 2.1.2 影响人群(KOL 矩阵)</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>本方案 2.4 KV 视觉素材</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">▸</span>本方案 VOC 金句素材库</li>
  5800. </ul>
  5801. </div>
  5802. <div style="margin-bottom:10px;">
  5803. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">📤 下阶段产出</div>
  5804. <ul style="margin:0; padding:0; list-style:none;">
  5805. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">✓</span>丁香医生 / 医学界科普合作 PR</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">✓</span>小红书 100+ KOC 分级铺设</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">✓</span>抖音医生账号矩阵长视频</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#FF4D8D;">✓</span>公关事件 · &quot;护肝真相&quot;新品发布会</li>
  5806. </ul>
  5807. </div>
  5808. <div style="padding-top:8px; border-top:1px dashed var(--border); display:grid; grid-template-columns:1fr 1fr; gap:8px;">
  5809. <div>
  5810. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">⏱️ 排期</div>
  5811. <div style="font-size:0.72rem; color:var(--text-1); font-weight:600;">2026 Q2 启动 · 持续运营</div>
  5812. </div>
  5813. <div>
  5814. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">🎯 KPI</div>
  5815. <div style="font-size:0.72rem; color:#FF4D8D; font-weight:700;">科普内容曝光 ≥ 2 亿 · 舆情正面率 ≥ 85%</div>
  5816. </div>
  5817. </div>
  5818. </div>
  5819. <div style="background:var(--bg-1); border:1px solid #14B8A644; border-top:4px solid #14B8A6; border-radius:var(--radius-md); padding:18px;">
  5820. <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;">
  5821. <div style="display:flex; align-items:center; gap:10px;">
  5822. <div style="width:40px; height:40px; background:#14B8A622; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.3rem;">📊</div>
  5823. <div>
  5824. <div class="text-mono text-xs" style="color:#14B8A6; letter-spacing:0.1em;">NEXT · 08</div>
  5825. <div style="font-size:1rem; font-weight:800; color:var(--text-1);">数据闭环 · 一物一码后台</div>
  5826. </div>
  5827. </div>
  5828. <div style="padding:3px 8px; background:#FF8C4222; color:#FF8C42; border-radius:3px; font-family:var(--font-mono); font-size:0.7rem; font-weight:700;">P1</div>
  5829. </div>
  5830. <div style="padding:8px 10px; background:#14B8A610; border-left:3px solid #14B8A6; border-radius:4px; margin-bottom:10px;">
  5831. <div style="font-size:0.78rem; color:var(--text-1); font-weight:600; line-height:1.45;">从单次售出到终身用户,打造数据驱动的复购循环</div>
  5832. </div>
  5833. <div style="margin-bottom:10px;">
  5834. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">🔗 来自本方案输入</div>
  5835. <ul style="margin:0; padding:0; list-style:none;">
  5836. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#14B8A6;">▸</span>本方案 2.5.3 用户价值路径</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#14B8A6;">▸</span>本方案 2.5 价值链服务环节</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#14B8A6;">▸</span>本方案 VOC 反馈机制</li>
  5837. </ul>
  5838. </div>
  5839. <div style="margin-bottom:10px;">
  5840. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.08em; margin-bottom:5px;">📤 下阶段产出</div>
  5841. <ul style="margin:0; padding:0; list-style:none;">
  5842. <li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#14B8A6;">✓</span>一物一码扫码数据中台</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#14B8A6;">✓</span>服用日历小程序用户行为分析</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#14B8A6;">✓</span>30 日 NPS 调研自动化</li><li style="padding:2px 0; font-size:0.72rem; color:var(--text-2); line-height:1.4; padding-left:12px; position:relative;"><span style="position:absolute; left:0; color:#14B8A6;">✓</span>VOC 持续监测仪表盘(每周更新)</li>
  5843. </ul>
  5844. </div>
  5845. <div style="padding-top:8px; border-top:1px dashed var(--border); display:grid; grid-template-columns:1fr 1fr; gap:8px;">
  5846. <div>
  5847. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">⏱️ 排期</div>
  5848. <div style="font-size:0.72rem; color:var(--text-1); font-weight:600;">2026 Q2 MVP · Q3 迭代</div>
  5849. </div>
  5850. <div>
  5851. <div class="text-mono text-xs" style="color:var(--text-3); letter-spacing:0.06em; margin-bottom:2px;">🎯 KPI</div>
  5852. <div style="font-size:0.72rem; color:#14B8A6; font-weight:700;">扫码率 ≥ 40% · 留存 ≥ 62% · NPS ≥ 50</div>
  5853. </div>
  5854. </div>
  5855. </div>
  5856. </div>
  5857. <!-- 最终封印 -->
  5858. <div class="fade-up" style="background:linear-gradient(135deg, #D4A57415, #2D9C5D10, #FF4D8D10); border:2px solid #D4A57444; border-radius:var(--radius-md); padding:32px; text-align:center;">
  5859. <div class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.2em; margin-bottom:10px;">THE COMPOUND IS READY · 产品复合体 · 方案封印</div>
  5860. <h3 style="font-family:var(--font-head); font-weight:900; font-size:2rem; color:var(--text-1); margin:0 0 14px 0; line-height:1.2;">
  5861. <span style="color:#2D9C5D;">产品</span> →
  5862. <span style="color:#FF8C42;">营销</span> →
  5863. <span style="color:#8B5CF6;">海报</span> →
  5864. <span style="color:#0085CA;">数据</span>
  5865. </h3>
  5866. <div style="color:var(--text-2); font-size:0.95rem; line-height:1.7; max-width:820px; margin:0 auto 20px;">
  5867. 江中肝纯片产品复合体方案以<strong style="color:#D4A574;">场景化复合护肝</strong>为心智锚点,串联 <strong>3 类真实 VOC 人群 → 4 重协同配方 → 4 层包装架构 → 3 版本 KV → 6 环价值链</strong>,为 2026 年新品上市奠定战略底座。本方案结束,下一阶段 <strong style="color:#D4A574;">营销复合体</strong> 即刻承接启动。
  5868. </div>
  5869. <div style="display:inline-flex; align-items:center; gap:14px; padding:12px 22px; background:var(--bg-1); border:1px solid #D4A57444; border-radius:999px;">
  5870. <span style="font-size:1.4rem;">🎬</span>
  5871. <span class="text-mono text-xs" style="color:#D4A574; letter-spacing:0.15em; font-weight:800;">READY TO LAUNCH · 2026</span>
  5872. <span style="font-size:1.4rem;">🚀</span>
  5873. </div>
  5874. </div>
  5875. </div>
  5876. </section>
  5877. <section class="report-section" id="next" data-tone="amber" data-slide-num="36/36">
  5878. <div class="section-inner">
  5879. <div class="section-head rise-in">
  5880. <div class="section-eyebrow">EPILOGUE · 下一步</div>
  5881. <h2 class="text-h1"><span class="headline-anim">From Compound to Launch</span></h2>
  5882. <p class="section-sub">产品复合体方案已完成 · 后续衔接营销复合体 / 海报 AI 提示词 / 渠道铺货</p>
  5883. </div>
  5884. <div class="grid grid-3 fade-up" style="gap:20px; margin-bottom:32px;">
  5885. <div class="card card-accent" style="border-left:4px solid var(--amber);">
  5886. <div class="text-mono text-xs" style="color:var(--amber); letter-spacing:0.12em; margin-bottom:10px;">NEXT · 03</div>
  5887. <h3 class="text-h3" style="margin-bottom:10px;">营销复合体方案</h3>
  5888. <p style="color:var(--text-2); line-height:1.65; font-size:0.9rem;">STP 细分 · 4P 策略 · 传播矩阵 · 媒介预算分配</p>
  5889. </div>
  5890. <div class="card card-accent" style="border-left:4px solid #2D9C5D;">
  5891. <div class="text-mono text-xs" style="color:#2D9C5D; letter-spacing:0.12em; margin-bottom:10px;">NEXT · 04</div>
  5892. <h3 class="text-h3" style="margin-bottom:10px;">海报 AI 提示词</h3>
  5893. <p style="color:var(--text-2); line-height:1.65; font-size:0.9rem;">3 套 KV 视觉参数 · MJ/SD 提示词库 · 电商详情页规范</p>
  5894. </div>
  5895. <div class="card card-accent" style="border-left:4px solid #0085CA;">
  5896. <div class="text-mono text-xs" style="color:#0085CA; letter-spacing:0.12em; margin-bottom:10px;">EXEC</div>
  5897. <h3 class="text-h3" style="margin-bottom:10px;">产品立项 PRD</h3>
  5898. <p style="color:var(--text-2); line-height:1.65; font-size:0.9rem;">L-01/02/03 三条 SKU 线配方确认 · 打样周期 · 合规报批</p>
  5899. </div>
  5900. </div>
  5901. <div class="card fade-up" style="background:linear-gradient(135deg, rgba(245,166,35,0.06), rgba(45,156,93,0.04)); border:1px solid rgba(245,166,35,0.2);">
  5902. <div class="text-mono text-xs" style="color:var(--amber); letter-spacing:0.15em; margin-bottom:12px;">APPENDIX · 数据来源</div>
  5903. <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:16px; color:var(--text-2); font-size:0.9rem; line-height:1.7;">
  5904. <div>
  5905. <strong style="color:var(--amber);">VOC 原始数据</strong><br/>
  5906. <code style="font-size:0.82rem;">data/jiangzhong-liver-voc.json</code> · 4.2 MB
  5907. </div>
  5908. <div>
  5909. <strong style="color:var(--amber);">VOC 分析报告</strong><br/>
  5910. <code style="font-size:0.82rem;">reports/jiangzhong-liver-voc-report.html</code>
  5911. </div>
  5912. <div>
  5913. <strong style="color:var(--amber);">方法论参考</strong><br/>
  5914. <code style="font-size:0.82rem;">E:/文件资料/md文档生成的海报或者策划/2.美佑童-产品复合体.docx</code>
  5915. </div>
  5916. <div>
  5917. <strong style="color:var(--amber);">数据提炼摘要</strong><br/>
  5918. <code style="font-size:0.82rem;">data/voc-summary-for-product-dev.txt</code> · 25.8 KB
  5919. </div>
  5920. </div>
  5921. </div>
  5922. <div class="fade-up" style="margin-top:40px; text-align:center; color:var(--text-3); font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.2em;">
  5923. JIANGZHONG PRODUCT-DEV · COMPOUND-BODY v1.0 · 2026-04-19
  5924. </div>
  5925. </div>
  5926. </section>
  5927. </main>
  5928. <footer class="report-footer">
  5929. <div>由 江中产品开发部 · 复合体方案引擎 生成 · 对标《美佑童-产品复合体》5 维方法论</div>
  5930. <div class="meta">DATA / 2026-04-19 · 36 SLIDES · 6 CHAPTERS</div>
  5931. </footer>
  5932. <script>
  5933. (function(){
  5934. 'use strict';
  5935. var slides = [];
  5936. var currentSlide = 0;
  5937. var firstScrolled = false;
  5938. // —— 1) 分片标题动画:把每个 .headline-anim 文本切成 .char 逐字入场 ——
  5939. function splitHeadlines(){
  5940. var els = document.querySelectorAll('.headline-anim');
  5941. els.forEach(function(el){
  5942. if (el.dataset.split === '1') return;
  5943. el.dataset.split = '1';
  5944. var text = el.textContent;
  5945. el.textContent = '';
  5946. var chars = Array.from(text);
  5947. chars.forEach(function(ch, i){
  5948. var span = document.createElement('span');
  5949. span.className = 'char';
  5950. span.textContent = ch === ' ' ? '\u00A0' : ch;
  5951. span.style.transitionDelay = (i * 28) + 'ms';
  5952. el.appendChild(span);
  5953. });
  5954. });
  5955. }
  5956. // —— 2) Fade / Rise / Headline 统一的 IntersectionObserver ——
  5957. function initReveal(){
  5958. var selectors = ['.fade-up', '.rise-in', '.headline-anim'];
  5959. var els = document.querySelectorAll(selectors.join(','));
  5960. if (!('IntersectionObserver' in window)){
  5961. els.forEach(function(el){ el.classList.add('is-visible'); });
  5962. return;
  5963. }
  5964. var io = new IntersectionObserver(function(entries){
  5965. entries.forEach(function(e){
  5966. if (e.isIntersecting){
  5967. e.target.classList.add('is-visible');
  5968. io.unobserve(e.target);
  5969. }
  5970. });
  5971. }, { threshold: 0.08, rootMargin: '0px 0px -5% 0px' });
  5972. els.forEach(function(el){ io.observe(el); });
  5973. // 首屏兜底
  5974. setTimeout(function(){
  5975. els.forEach(function(el){
  5976. var r = el.getBoundingClientRect();
  5977. if (r.top < window.innerHeight && r.bottom > 0) el.classList.add('is-visible');
  5978. });
  5979. }, 100);
  5980. // 终极兜底
  5981. setTimeout(function(){
  5982. document.querySelectorAll('.fade-up:not(.is-visible),.rise-in:not(.is-visible),.headline-anim:not(.is-visible)').forEach(function(el){
  5983. el.classList.add('is-visible');
  5984. });
  5985. }, 4500);
  5986. }
  5987. // —— 3) 数字计数动画 ——
  5988. function initCountUp(){
  5989. var els = document.querySelectorAll('.metric-value[data-count]');
  5990. if (!('IntersectionObserver' in window)){
  5991. els.forEach(function(el){ el.textContent = el.dataset.count; });
  5992. return;
  5993. }
  5994. var io = new IntersectionObserver(function(entries){
  5995. entries.forEach(function(e){
  5996. if (!e.isIntersecting) return;
  5997. var el = e.target;
  5998. var target = parseFloat(el.dataset.count);
  5999. if (isNaN(target)) return;
  6000. var isFloat = !Number.isInteger(target);
  6001. var start = 0, duration = 1400, t0 = performance.now();
  6002. function tick(now){
  6003. var p = Math.min(1, (now - t0) / duration);
  6004. var eased = 1 - Math.pow(1 - p, 3);
  6005. var v = start + (target - start) * eased;
  6006. el.textContent = isFloat ? v.toFixed(1) : Math.floor(v).toLocaleString('en-US');
  6007. if (p < 1) requestAnimationFrame(tick);
  6008. else el.textContent = isFloat ? target.toFixed(1) : target.toLocaleString('en-US');
  6009. }
  6010. requestAnimationFrame(tick);
  6011. io.unobserve(el);
  6012. });
  6013. }, { threshold: 0.4 });
  6014. els.forEach(function(el){ io.observe(el); });
  6015. }
  6016. // —— 4) Slide 进度 · nav 高亮 · ambient 光晕跟随 · slide counter ——
  6017. function initDeck(){
  6018. slides = Array.prototype.slice.call(document.querySelectorAll('section.report-section'));
  6019. var progressLine = document.getElementById('progress-line');
  6020. var navDots = document.querySelectorAll('.nav-dot');
  6021. var counter = document.querySelector('.slide-counter');
  6022. var counterNow = counter && counter.querySelector('.now');
  6023. var counterTotal = counter && counter.querySelector('.total');
  6024. var counterBar = counter && counter.querySelector('.bar');
  6025. if (counterTotal) counterTotal.textContent = String(slides.length).padStart(2, '0');
  6026. // 预设每张 slide 的 ambient 偏移(用 CSS 变量驱动)
  6027. var ambientPresets = [
  6028. { x: '15%', y: '25%' },
  6029. { x: '75%', y: '30%' },
  6030. { x: '25%', y: '70%' },
  6031. { x: '80%', y: '65%' },
  6032. { x: '45%', y: '20%' },
  6033. { x: '55%', y: '75%' },
  6034. { x: '20%', y: '50%' },
  6035. { x: '85%', y: '50%' },
  6036. { x: '50%', y: '40%' },
  6037. { x: '30%', y: '30%' },
  6038. { x: '70%', y: '70%' },
  6039. { x: '40%', y: '60%' }
  6040. ];
  6041. function setActive(idx){
  6042. if (idx < 0) idx = 0;
  6043. if (idx >= slides.length) idx = slides.length - 1;
  6044. currentSlide = idx;
  6045. slides.forEach(function(s, i){
  6046. if (i === idx) s.classList.add('in-view');
  6047. else s.classList.remove('in-view');
  6048. });
  6049. for (var j = 0; j < navDots.length; j++){
  6050. if (j === idx) navDots[j].classList.add('active');
  6051. else navDots[j].classList.remove('active');
  6052. }
  6053. if (counterNow) counterNow.textContent = String(idx + 1).padStart(2, '0');
  6054. if (counterBar) {
  6055. var pct = slides.length > 1 ? ((idx + 1) / slides.length) * 100 : 100;
  6056. counterBar.style.setProperty('--pct', pct.toFixed(1) + '%');
  6057. }
  6058. // 根据当前 slide 切换 ambient 位置
  6059. var p = ambientPresets[idx % ambientPresets.length];
  6060. document.body.style.setProperty('--amb-x', p.x);
  6061. document.body.style.setProperty('--amb-y', p.y);
  6062. }
  6063. function onScroll(){
  6064. if (!firstScrolled && window.scrollY > 20){
  6065. firstScrolled = true;
  6066. setTimeout(function(){
  6067. var hint = document.querySelector('.kbd-hint');
  6068. if (hint) hint.classList.add('fade');
  6069. }, 4000);
  6070. }
  6071. var h = document.documentElement.scrollHeight - window.innerHeight;
  6072. var p = h > 0 ? (window.scrollY / h) * 100 : 0;
  6073. if (progressLine) progressLine.style.width = p + '%';
  6074. // 找出离视口中心最近的 slide
  6075. var mid = window.innerHeight * 0.45;
  6076. var bestIdx = 0, bestDist = Infinity;
  6077. for (var i = 0; i < slides.length; i++){
  6078. var r = slides[i].getBoundingClientRect();
  6079. var center = (r.top + r.bottom) / 2;
  6080. var d = Math.abs(center - mid);
  6081. if (d < bestDist){ bestDist = d; bestIdx = i; }
  6082. }
  6083. if (bestIdx !== currentSlide) setActive(bestIdx);
  6084. }
  6085. window.addEventListener('scroll', onScroll, { passive: true });
  6086. onScroll();
  6087. navDots.forEach(function(d, i){
  6088. d.addEventListener('click', function(e){
  6089. e.preventDefault();
  6090. var tid = d.dataset.target;
  6091. var t = tid ? document.getElementById(tid) : slides[i];
  6092. if (t) t.scrollIntoView({ behavior: 'smooth', block: 'start' });
  6093. });
  6094. });
  6095. // —— 键盘导航 ——
  6096. function goto(idx){
  6097. idx = Math.max(0, Math.min(slides.length - 1, idx));
  6098. slides[idx].scrollIntoView({ behavior: 'smooth', block: 'start' });
  6099. }
  6100. window.addEventListener('keydown', function(e){
  6101. // 不在输入框里
  6102. var tag = (e.target && e.target.tagName || '').toLowerCase();
  6103. if (tag === 'input' || tag === 'textarea' || e.target.isContentEditable) return;
  6104. if (e.key === 'ArrowDown' || e.key === 'PageDown' || e.key === 'j'){ e.preventDefault(); goto(currentSlide + 1); }
  6105. else if (e.key === 'ArrowUp' || e.key === 'PageUp' || e.key === 'k'){ e.preventDefault(); goto(currentSlide - 1); }
  6106. else if (e.key === 'Home'){ e.preventDefault(); goto(0); }
  6107. else if (e.key === 'End'){ e.preventDefault(); goto(slides.length - 1); }
  6108. else if (e.key === ' '){ e.preventDefault(); goto(currentSlide + (e.shiftKey ? -1 : 1)); }
  6109. });
  6110. }
  6111. // —— 5) ECharts 懒加载(slide 进入视口才渲染,避免首屏卡顿)——
  6112. var COMMON = {
  6113. backgroundColor: 'transparent',
  6114. textStyle: { fontFamily: 'Inter, Noto Sans SC, system-ui', color: '#A8A8A8' },
  6115. grid: { left: '3%', right: '4%', bottom: '3%', top: '12%', containLabel: true }
  6116. };
  6117. var AMBER='#F5A623', GREEN='#00DC82', PURPLE='#8B5CF6', ROSE='#FF4D8D', BLUE='#3B82F6';
  6118. var PALETTE = [AMBER, GREEN, PURPLE, ROSE, BLUE, '#EF4444', '#06B6D4', '#F59E0B'];
  6119. var CHART_REGISTRY = [];
  6120. function initChart(id, cb){
  6121. var el = document.getElementById(id);
  6122. if (!el) return;
  6123. CHART_REGISTRY.push({ id: id, el: el, cb: cb, rendered: false });
  6124. }
  6125. function renderChart(item){
  6126. if (item.rendered || !window.echarts) return;
  6127. var chart = window.echarts.init(item.el, null, { renderer: 'canvas' });
  6128. try { item.cb(chart); item.rendered = true; } catch(e){ console.error(item.id, e); }
  6129. window.addEventListener('resize', function(){ chart.resize(); });
  6130. }
  6131. function bootCharts(){
  6132. if (!window.echarts) { setTimeout(bootCharts, 300); return; }
  6133. if (!('IntersectionObserver' in window)){
  6134. CHART_REGISTRY.forEach(renderChart);
  6135. return;
  6136. }
  6137. var io = new IntersectionObserver(function(entries){
  6138. entries.forEach(function(e){
  6139. if (!e.isIntersecting) return;
  6140. var item = CHART_REGISTRY.find(function(x){ return x.el === e.target; });
  6141. if (item) renderChart(item);
  6142. io.unobserve(e.target);
  6143. });
  6144. }, { threshold: 0.1, rootMargin: '200px 0px' });
  6145. CHART_REGISTRY.forEach(function(item){ io.observe(item.el); });
  6146. }
  6147. function initCharts(){
  6148. var D = window.__CHART_DATA__ || {};
  6149. // 样本分布
  6150. initChart('chartSample', function(chart){
  6151. var data = (D.noteHeatmap || []).slice(0, 5).map(function(n, i){
  6152. return {
  6153. value: (n.liked || 0) + (n.comments || 0) + (n.collected || 0),
  6154. name: (n.title || '').slice(0, 14) || '笔记' + (i + 1),
  6155. itemStyle: { color: PALETTE[i % PALETTE.length] }
  6156. };
  6157. });
  6158. chart.setOption(Object.assign({}, COMMON, {
  6159. tooltip: { trigger: 'item', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
  6160. legend: { bottom: 0, textStyle: { color: '#A8A8A8', fontSize: 11 } },
  6161. animationDuration: 1000, animationEasing: 'cubicOut',
  6162. series: [{
  6163. type: 'pie', radius: ['52%', '76%'], center: ['50%', '45%'],
  6164. label: { color: '#F5F5F5', fontSize: 11, formatter: '{b}\n{c}' },
  6165. itemStyle: { borderColor: '#0A0A0A', borderWidth: 2 },
  6166. data: data
  6167. }]
  6168. }));
  6169. });
  6170. // IP 地域
  6171. initChart('chartGeo', function(chart){
  6172. var ips = (D.topIPs || []).slice(0, 10).reverse();
  6173. chart.setOption(Object.assign({}, COMMON, {
  6174. tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
  6175. animationDuration: 1200, animationEasing: 'cubicOut',
  6176. xAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
  6177. yAxis: { type: 'category', data: ips.map(function(x){return x[0];}), axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontSize: 12 } },
  6178. series: [{
  6179. type: 'bar', data: ips.map(function(x){return x[1];}),
  6180. itemStyle: { color: AMBER, borderRadius: [0, 3, 3, 0] }, barWidth: '60%',
  6181. label: { show: true, position: 'right', color: '#F5A623', fontFamily: 'JetBrains Mono', fontSize: 11 }
  6182. }]
  6183. }));
  6184. });
  6185. // 笔记热力散点
  6186. initChart('chartNoteHeatmap', function(chart){
  6187. chart.setOption(Object.assign({}, COMMON, {
  6188. tooltip: {
  6189. trigger: 'item', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
  6190. formatter: function(p){
  6191. return '<div style="max-width:260px;"><strong style="color:#F5A623;">' + p.data[3] +
  6192. '</strong><br>点赞 ' + p.data[0] + ' · 评论 ' + p.data[1] + ' · 收藏 ' + p.data[2] + '</div>';
  6193. }
  6194. },
  6195. animationDuration: 1400, animationDelay: function(i){ return i * 30; },
  6196. xAxis: { type: 'value', name: '点赞数', nameTextStyle: { color: '#A8A8A8' }, axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
  6197. yAxis: { type: 'value', name: '评论数', nameTextStyle: { color: '#A8A8A8' }, axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
  6198. series: [{
  6199. type: 'scatter',
  6200. data: (D.noteHeatmap || []).map(function(n){ return [n.liked, n.comments, n.collected, n.title]; }),
  6201. symbolSize: function(v){ return Math.max(10, Math.min(56, Math.sqrt(v[2] || 1) * 3.5)); },
  6202. itemStyle: {
  6203. color: new echarts.graphic.RadialGradient(0.4, 0.4, 0.6, [
  6204. { offset: 0, color: 'rgba(245,166,35,0.9)' },
  6205. { offset: 1, color: 'rgba(245,166,35,0.15)' }
  6206. ]),
  6207. borderColor: '#F5A623', borderWidth: 1
  6208. },
  6209. emphasis: { itemStyle: { borderWidth: 2, shadowBlur: 16, shadowColor: 'rgba(245,166,35,0.5)' } }
  6210. }]
  6211. }));
  6212. });
  6213. // 价格带
  6214. initChart('chartPrice', function(chart){
  6215. var keys = Object.keys(D.priceBuckets || {});
  6216. var vals = keys.map(function(k){ return D.priceBuckets[k]; });
  6217. chart.setOption(Object.assign({}, COMMON, {
  6218. tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
  6219. animationDuration: 1200,
  6220. xAxis: { type: 'category', data: keys, axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontFamily: 'JetBrains Mono' } },
  6221. yAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
  6222. series: [{
  6223. type: 'bar', data: vals,
  6224. itemStyle: {
  6225. color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
  6226. colorStops: [{ offset: 0, color: '#F5A623' }, { offset: 1, color: 'rgba(245,166,35,0.3)' }] },
  6227. borderRadius: [4, 4, 0, 0]
  6228. },
  6229. barWidth: '56%',
  6230. label: { show: true, position: 'top', color: '#F5A623', fontFamily: 'JetBrains Mono', fontWeight: 600 }
  6231. }]
  6232. }));
  6233. });
  6234. // 品牌月销(横条,兼容)
  6235. initChart('chartBrands', function(chart){
  6236. var brands = (D.topBrands || []).slice().reverse();
  6237. chart.setOption(Object.assign({}, COMMON, {
  6238. tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
  6239. formatter: function(p){ return p.map(function(x){ return x.name + ': $' + (x.value/100).toLocaleString('en-US',{maximumFractionDigits:0}); }).join('<br>'); }
  6240. },
  6241. animationDuration: 1200,
  6242. xAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B', formatter: function(v){ return '$' + (v/100000).toFixed(0) + 'k'; } } },
  6243. yAxis: { type: 'category', data: brands.map(function(x){return x[0];}), axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontSize: 12 } },
  6244. series: [{
  6245. type: 'bar', data: brands.map(function(x){return x[1];}),
  6246. itemStyle: {
  6247. color: function(params){ return PALETTE[params.dataIndex % PALETTE.length]; },
  6248. borderRadius: [0, 3, 3, 0]
  6249. },
  6250. barWidth: '58%',
  6251. label: { show: true, position: 'right', color: '#A8A8A8', fontFamily: 'JetBrains Mono', fontSize: 10, formatter: function(p){ return '$' + (p.value/100000).toFixed(0) + 'k'; } }
  6252. }]
  6253. }));
  6254. });
  6255. // 评分分布
  6256. initChart('chartRatingDist', function(chart){
  6257. var data = D.ratingBuckets || {};
  6258. var keys = Object.keys(data);
  6259. var vals = keys.map(function(k){ return data[k]; });
  6260. var colors = ['#EF4444','#F59E0B','#F5A623','#06B6D4','#00DC82'];
  6261. chart.setOption(Object.assign({}, COMMON, {
  6262. tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
  6263. formatter: function(p){ return p.map(function(x){ return x.name + ': ' + x.value + ' SKU'; }).join('<br>'); }
  6264. },
  6265. animationDuration: 1200,
  6266. xAxis: { type: 'category', data: keys, axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontFamily: 'JetBrains Mono', fontSize: 11 } },
  6267. yAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
  6268. series: [{
  6269. type: 'bar', data: vals.map(function(v, i){ return { value: v, itemStyle: { color: colors[i] || GREEN, borderRadius: [4, 4, 0, 0] } }; }),
  6270. barWidth: '54%',
  6271. label: { show: true, position: 'top', color: '#F5F5F5', fontFamily: 'JetBrains Mono', fontWeight: 600 }
  6272. }]
  6273. }));
  6274. });
  6275. // 品牌份额(donut)
  6276. initChart('chartBrandShare', function(chart){
  6277. var data = (D.topBrandShares || []).map(function(b, i){
  6278. return { value: b.value, name: b.name, itemStyle: { color: PALETTE[i % PALETTE.length] }, _sales: b.sales, _count: b.count };
  6279. });
  6280. chart.setOption(Object.assign({}, COMMON, {
  6281. tooltip: { trigger: 'item', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
  6282. formatter: function(p){ return '<strong>'+p.name+'</strong><br>' + p.value.toFixed(1) + '%<br>SKU '+(p.data._count||0)+' · 月销 $'+((p.data._sales||0)/100).toLocaleString('en-US',{maximumFractionDigits:0}); }
  6283. },
  6284. legend: { bottom: 0, textStyle: { color: '#A8A8A8', fontSize: 10 }, itemWidth: 8, itemHeight: 8 },
  6285. animationDuration: 1400, animationEasing: 'cubicOut',
  6286. series: [{
  6287. type: 'pie', radius: ['48%', '72%'], center: ['50%', '45%'],
  6288. label: { color: '#F5F5F5', fontSize: 10, formatter: function(p){ return p.value > 3 ? p.name + '\n' + p.value.toFixed(1) + '%' : ''; } },
  6289. labelLine: { show: true, length: 8, length2: 8 },
  6290. itemStyle: { borderColor: '#0A0A0A', borderWidth: 2 },
  6291. data: data
  6292. }]
  6293. }));
  6294. });
  6295. // 评论数分布(横条)
  6296. initChart('chartReviewCount', function(chart){
  6297. var data = D.reviewCountBuckets || {};
  6298. var keys = Object.keys(data);
  6299. var vals = keys.map(function(k){ return data[k]; });
  6300. chart.setOption(Object.assign({}, COMMON, {
  6301. tooltip: { trigger: 'axis', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
  6302. animationDuration: 1200,
  6303. xAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
  6304. yAxis: { type: 'category', data: keys, axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontFamily: 'JetBrains Mono', fontSize: 11 } },
  6305. series: [{
  6306. type: 'bar', data: vals,
  6307. itemStyle: {
  6308. color: { type: 'linear', x: 0, y: 0, x2: 1, y2: 0,
  6309. colorStops: [{ offset: 0, color: 'rgba(139,92,246,0.2)' }, { offset: 1, color: '#8B5CF6' }] },
  6310. borderRadius: [0, 3, 3, 0]
  6311. },
  6312. barWidth: '56%',
  6313. label: { show: true, position: 'right', color: '#A8A8A8', fontFamily: 'JetBrains Mono', fontSize: 11 }
  6314. }]
  6315. }));
  6316. });
  6317. // 星级分布
  6318. initChart('chartStarDist', function(chart){
  6319. var products = D.starDistProducts || [];
  6320. if (!products.length) return;
  6321. var categories = products.map(function(p){ return p.brand + ' · ' + p.asin; });
  6322. var colors = ['#00DC82','#06B6D4','#F5A623','#F59E0B','#EF4444'];
  6323. var labels = ['5★','4★','3★','2★','1★'];
  6324. var series = [0,1,2,3,4].map(function(i){
  6325. return {
  6326. name: labels[i], type: 'bar', stack: 'stars',
  6327. data: products.map(function(p){ return p.stars[i]; }),
  6328. itemStyle: { color: colors[i] }
  6329. };
  6330. });
  6331. chart.setOption(Object.assign({}, COMMON, {
  6332. tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' } },
  6333. legend: { bottom: 0, textStyle: { color: '#A8A8A8', fontSize: 10 }, itemWidth: 10, itemHeight: 10 },
  6334. animationDuration: 1400,
  6335. grid: { left: '3%', right: '4%', bottom: '16%', top: '6%', containLabel: true },
  6336. xAxis: { type: 'value', axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
  6337. yAxis: { type: 'category', data: categories, axisLine: { lineStyle: { color: '#252525' } }, axisLabel: { color: '#A8A8A8', fontSize: 11 } },
  6338. series: series
  6339. }));
  6340. });
  6341. // 抖音账号作品热度散点
  6342. initChart('chartDyPosts', function(chart){
  6343. var posts = (D.douyinPosts || []);
  6344. if (!posts.length) return;
  6345. chart.setOption(Object.assign({}, COMMON, {
  6346. tooltip: { trigger: 'item', backgroundColor: '#1A1A1A', borderColor: '#252525', textStyle: { color: '#F5F5F5' },
  6347. formatter: function(p){
  6348. return '<div style="max-width:280px;"><strong style="color:#F5A623;">' + (p.data[3]||'').slice(0,60) +
  6349. '</strong><br>点赞 ' + p.data[0].toLocaleString() + ' · 评论 ' + p.data[1] + ' · 转发 ' + p.data[2] + '</div>';
  6350. }
  6351. },
  6352. animationDuration: 1200,
  6353. xAxis: { type: 'value', name: '点赞', nameTextStyle: { color: '#A8A8A8' }, axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B', formatter: function(v){ return v >= 10000 ? (v/10000).toFixed(1) + 'w' : v; } } },
  6354. yAxis: { type: 'value', name: '评论', nameTextStyle: { color: '#A8A8A8' }, axisLine: { lineStyle: { color: '#252525' } }, splitLine: { lineStyle: { color: '#1A1A1A' } }, axisLabel: { color: '#6B6B6B' } },
  6355. series: [{
  6356. type: 'scatter',
  6357. data: posts.map(function(p){ return [p.digg||0, p.comment||0, p.share||0, p.desc||'']; }),
  6358. symbolSize: function(v){ return Math.max(12, Math.min(60, Math.sqrt((v[2]||0) + 1) * 4)); },
  6359. itemStyle: {
  6360. color: new echarts.graphic.RadialGradient(0.4, 0.4, 0.6, [
  6361. { offset: 0, color: 'rgba(255,77,141,0.9)' },
  6362. { offset: 1, color: 'rgba(255,77,141,0.2)' }
  6363. ]),
  6364. borderColor: '#FF4D8D', borderWidth: 1
  6365. },
  6366. emphasis: { itemStyle: { borderWidth: 2, shadowBlur: 16, shadowColor: 'rgba(255,77,141,0.5)' } }
  6367. }]
  6368. }));
  6369. });
  6370. }
  6371. // —— Boot ——
  6372. function boot(){
  6373. try { splitHeadlines(); } catch(e){ console.error('split', e); }
  6374. try { initReveal(); } catch(e){ console.error('reveal', e); }
  6375. try { initCountUp(); } catch(e){ console.error('countup', e); }
  6376. try { initDeck(); } catch(e){ console.error('deck', e); }
  6377. try { initCharts(); bootCharts(); } catch(e){ console.error('charts', e); }
  6378. }
  6379. if (document.readyState === 'loading'){
  6380. document.addEventListener('DOMContentLoaded', boot);
  6381. } else {
  6382. boot();
  6383. }
  6384. })();
  6385. </script>
  6386. </body>
  6387. </html>