第四集：图像主体-细节描述人物主体(含提示词库)
<div><br></div><div><b><font color="#8b0000" size="4"><br></font></b></div><div><b><font color="#8b0000" size="4">本集概要</font></b></div><div><br></div><div><ul><li><span style="color: rgb(64, 64, 64); font-family: DeepSeek-CJK-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif;"><font size="3">人物基本属性</font></span></li><li><span style="color: rgb(64, 64, 64); font-family: DeepSeek-CJK-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif;"><font size="3">体型</font></span></li><li><span style="color: rgb(64, 64, 64); font-family: DeepSeek-CJK-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif;"><font size="3">面部特征</font></span></li><li><span style="color: rgb(64, 64, 64); font-family: DeepSeek-CJK-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif;"><font size="3">发型发色</font></span></li><li><span style="color: rgb(64, 64, 64); font-family: DeepSeek-CJK-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif;"><font size="3">肤色肤质</font></span></li><li><span style="color: rgb(64, 64, 64); font-family: DeepSeek-CJK-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif;"><font size="3">课程配套关键词库及使用方法</font></span></li></ul></div><div><strong style="color: rgb(64, 64, 64); font-family: DeepSeek-CJK-patch, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", Oxygen, "Open Sans", sans-serif; font-size: 16.002px;"><br></strong></div><b><font color="#8b0000" size="4"> 视频教程</font></b><div> <iframe src="//1314335967.vod-qcloud.com/vod-player/1314335967/1397757910732468487/vod/vod-player-v4.html?autoplay=false&width=720&height=480&psign=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6MTMxNDMzNTk2NywiZmlsZUlkIjoiMTM5Nzc1NzkxMDczMjQ2ODQ4NyIsImN1cnJlbnRUaW1lU3RhbXAiOjE3NDYwMjk3OTIsImNvbnRlbnRJbmZvIjp7ImF1ZGlvVmlkZW9UeXBlIjoiT3JpZ2luYWwiLCJpbWFnZVNwcml0ZURlZmluaXRpb24iOjEwfSwidXJsQWNjZXNzSW5mbyI6eyJkb21haW4iOiIxMzE0MzM1OTY3LnZvZC1xY2xvdWQuY29tIiwic2NoZW1lIjoiSFRUUFMifX0.XewylR99hghuho5fYEnDRTp8W5jA0za_tA4dXVhiPIY&lang=zh-CN" frameborder="0" scrolling="no" width="100%" height="480" allowfullscreen="">
</iframe><div id="keywordSelectorContainer">
<div style="margin-bottom: 10px; display: flex; align-items: center;">
<textarea id="selectedKeywordsInput" readonly="" style="flex-grow: 1; height: 60px; padding: 5px; border: 1px solid #ccc; box-sizing: border-box; border-radius: 3px; margin-right: 5px; resize: none; font-size: 0.9em;"></textarea>
<button id="copyKeywordsButton" style="padding: 5px 10px; cursor: pointer; border: 1px solid #ccc; background-color: #f0f0f0; border-radius: 3px; height: 60px;">复制</button>
</div>
<div id="imageDisplayArea">
<img id="hoverImageDisplay" src="" alt="关键词相关图片">
</div>
<div id="keywordLists">
<!-- 分类 1 -->
<div class="keyword-category">
<h4 class="category-title">人物基础属性</h4>
<div class="keyword-list">
<span class="keyword-item" data-en="male" data-img-url="https://fszxai.fss-my.addlink.cn/rs/101.png">男</span>
<span class="keyword-item" data-en="female" data-img-url="https://fszxai.fss-my.addlink.cn/rs/100.png">女</span>
<span class="keyword-item" data-en="19 year old girl" data-img-url="https://fszxai.fss-my.addlink.cn/rs/150.png">十九岁女孩</span>
<span class="keyword-item" data-en="teen" data-img-url="https://fszxai.fss-my.addlink.cn/rs/151.png">青少年</span>
<span class="keyword-item" data-en="early teen" data-img-url="https://fszxai.fss-my.addlink.cn/rs/152.png">少年</span>
<span class="keyword-item" data-en="adult" data-img-url="https://fszxai.fss-my.addlink.cn/rs/153.png">成年</span>
<span class="keyword-item" data-en="middle age" data-img-url="https://fszxai.fss-my.addlink.cn/rs/154.png">中年</span>
<span class="keyword-item" data-en="Middle aged and elderly" data-img-url="https://fszxai.fss-my.addlink.cn/rs/155.png">中老年</span>
<span class="keyword-item" data-en="old age" data-img-url="https://fszxai.fss-my.addlink.cn/rs/156.png">老年</span>
<span class="keyword-item" data-en="child" data-img-url="https://fszxai.fss-my.addlink.cn/rs/157.png">儿童</span>
<span class="keyword-item" data-en="kindergartener" data-img-url="https://fszxai.fss-my.addlink.cn/rs/158.png">幼儿园孩子</span>
<span class="keyword-item" data-en=" toddler" data-img-url="https://fszxai.fss-my.addlink.cn/rs/159.png">幼儿</span>
<span class="keyword-item" data-en="newborn baby" data-img-url="https://fszxai.fss-my.addlink.cn/rs/160.png">刚出生婴儿</span>
<span class="keyword-item" data-en="five month old infant" data-img-url="https://fszxai.fss-my.addlink.cn/rs/161.png">五个月大的婴儿</span>
</div>
</div>
<hr class="category-divider">
<!-- 分类 2 -->
<div class="keyword-category">
<h4 class="category-title">体型</h4>
<div class="keyword-list">
<span class="keyword-item" data-en="athlete" data-img-url="https://fszxai.fss-my.addlink.cn/rs/169.png">强壮</span>
<span class="keyword-item" data-en="model" data-img-url="https://fszxai.fss-my.addlink.cn/rs/170.png">经典</span>
<span class="keyword-item" data-en="slender" data-img-url="https://fszxai.fss-my.addlink.cn/rs/171.png">纤细</span>
<span class="keyword-item" data-en="glamor" data-img-url="https://fszxai.fss-my.addlink.cn/rs/172.png">诱惑</span>
<span class="keyword-item" data-en="plump" data-img-url="https://fszxai.fss-my.addlink.cn/rs/173.png">丰满</span>
<span class="keyword-item" data-en="fat" data-img-url="https://fszxai.fss-my.addlink.cn/rs/174.png">胖</span>
<span class="keyword-item" data-en="tall" data-img-url="https://fszxai.fss-my.addlink.cn/rs/175.png">高大</span>
<span class="keyword-item" data-en="petite" data-img-url="https://fszxai.fss-my.addlink.cn/rs/176.png">娇小</span>
<span class="keyword-item" data-en="pregnant" data-img-url="https://fszxai.fss-my.addlink.cn/rs/177.png">怀孕</span>
<span class="keyword-item" data-en="muscular" data-img-url="https://fszxai.fss-my.addlink.cn/rs/178.png">肌肉</span>
<span class="keyword-item" data-en="narrow waist" data-img-url="https://fszxai.fss-my.addlink.cn/rs/179.png">细腰</span>
<span class="keyword-item" data-en="wide hips" data-img-url="https://fszxai.fss-my.addlink.cn/rs/180.png">宽臀</span>
<span class="keyword-item" data-en="chest" data-img-url="https://fszxai.fss-my.addlink.cn/rs/181.png">胸肌</span>
<span class="keyword-item" data-en=" curvy" data-img-url="https://fszxai.fss-my.addlink.cn/rs/182.png">魔鬼身材</span>
<span class="keyword-item" data-en="skinny" data-img-url="https://fszxai.fss-my.addlink.cn/rs/183.png">骨感</span>
</div>
</div>
<hr class="category-divider">
<!-- 分类3 -->
<div class="keyword-category">
<h4 class="category-title">面部特征</h4>
<div class="keyword-list">
<span class="keyword-item" data-en="large eyes of a beautiful woman" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/20.jpg">杏眼</span>
<span class="keyword-item" data-en="amorous eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/19.jpg">桃花眼</span>
<span class="keyword-item" data-en="phoenix eye" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/05.jpg">丹凤眼</span>
<span class="keyword-item" data-en="Ruifengyan" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/001.jpg">瑞凤眼</span>
<span class="keyword-item" data-en="Lifting eye" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/002.jpg">吊眼</span>
<span class="keyword-item" data-en="Drooping eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/003.jpg">垂眼</span>
<span class="keyword-item" data-en="Triangular eye" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/004.jpg">三角眼</span>
<span class="keyword-item" data-en="Slender eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/005.jpg">细长眼</span>
<span class="keyword-item" data-en="slitty eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/006.jpg">眯缝眼</span>
<span class="keyword-item" data-en="round eyelet" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/007.jpg">圆眼</span>
<span class="keyword-item" data-en="hypertrophic eyelid" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/008.jpg">肿泡眼</span>
<span class="keyword-item" data-en="Fox's Eye" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/009.jpg">狐狸眼</span>
<span class="keyword-item" data-en="double eyelids" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/18.jpg">双眼皮</span>
<span class="keyword-item" data-en="single eyelid" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/06.jpg">单眼皮</span>
<span class="keyword-item" data-en="pouches" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/21.jpg">眼袋</span>
<span class="keyword-item" data-en="Red eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0010.jpg">红色眼睛</span>
<span class="keyword-item" data-en="blue eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/13.jpg">蓝色眼睛</span>
<span class="keyword-item" data-en="Brown eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0012.jpg">棕色眼睛</span>
<span class="keyword-item" data-en="Green eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0013.jpg">绿色眼睛</span>
<span class="keyword-item" data-en="Yellow eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0014.jpg">黄色眼睛</span>
<span class="keyword-item" data-en="dark eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0015.jpg">黑色眼睛</span>
<span class="keyword-item" data-en="Water blue eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0016.jpg">水蓝色眼睛</span>
<span class="keyword-item" data-en="Orange eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0017.jpg">橙色眼睛</span>
<span class="keyword-item" data-en="Grey eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0018.jpg">灰色眼睛</span>
<span class="keyword-item" data-en="White eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0019.jpg">白色眼睛</span>
<span class="keyword-item" data-en="Heterochromatic pupil" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0020.jpg">异色瞳</span>
<span class="keyword-item" data-en="Red and blue eyes" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0021.jpg">红蓝眼</span>
<span class="keyword-item" data-en="Standard eyebrows" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0022.jpg">标准眉</span>
<span class="keyword-item" data-en="synophrys" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0023.jpg">一字眉</span>
<span class="keyword-item" data-en="Curved Moon Eyebrow" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0024.jpg">弯月眉</span>
<span class="keyword-item" data-en="Raise your eyebrows" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0025.jpg">挑眉</span>
<span class="keyword-item" data-en="straight eyebrows slanting upwards and outwards" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0026.jpg">剑眉</span>
<span class="keyword-item" data-en="eyebrows shaped like willow leaves" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/15.jpg">柳叶眉</span>
<span class="keyword-item" data-en="Pale eyebrows" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/07.jpg">淡眉</span>
<span class="keyword-item" data-en="thick eyebrows" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/17.jpg">浓眉</span>
<span class="keyword-item" data-en="Wild eyebrows" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0027.jpg">野生眉</span>
<span class="keyword-item" data-en="Yuanshan Mei" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0028.jpg">远山眉</span>
<span class="keyword-item" data-en="Standard lips" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0029.jpg">标准唇</span>
<span class="keyword-item" data-en="Thick lips" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0030.jpg">厚唇</span>
<span class="keyword-item" data-en="Thin lips" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/03.jpg">薄唇</span>
<span class="keyword-item" data-en="Smiling lips" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0031.jpg">微笑唇</span>
<span class="keyword-item" data-en="M lips" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/01.jpg">M唇</span>
<span class="keyword-item" data-en="beauty spot" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0032.jpg">美人痣</span>
<span class="keyword-item" data-en="Tear mole" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/14.jpg">泪痣</span>
<span class="keyword-item" data-en="scar" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0033.jpg">疤痕</span>
<span class="keyword-item" data-en="Facial pigmentation" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0034.jpg">面部色斑</span>
<span class="keyword-item" data-en="Facial wrinkles" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0035.jpg">面部皱纹</span>
</div>
</div>
<hr class="category-divider">
<!-- 分类 4-->
<div class="keyword-category">
<h4 class="category-title">发型发色</h4>
<div class="keyword-list">
<span class="keyword-item" data-en="Extremely short hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0036.jpg">极短头发</span>
<span class="keyword-item" data-en="Short hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/10.jpg">短发</span>
<span class="keyword-item" data-en="Zhongfa" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0037.jpg">中发</span>
<span class="keyword-item" data-en="long hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0038.jpg">长发</span>
<span class="keyword-item" data-en="Ultra long hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0039.jpg">超长发</span>
<span class="keyword-item" data-en="Hair over the shoulder" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0040.jpg">头发过肩</span>
<span class="keyword-item" data-en="Yellow hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0041.jpg">黄色头发</span>
<span class="keyword-item" data-en="brown hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/23.jpg">棕色头发</span>
<span class="keyword-item" data-en="black hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/08.jpg">黑色头发</span>
<span class="keyword-item" data-en="Blue Hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0044.jpg">蓝色头发</span>
<span class="keyword-item" data-en="Purple hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/22.jpg">紫色头发</span>
<span class="keyword-item" data-en="Pink hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0045.jpg">粉红头发</span>
<span class="keyword-item" data-en="White hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0046.jpg">白色头发</span>
<span class="keyword-item" data-en="Red hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0047.jpg">红色头发</span>
<span class="keyword-item" data-en="Grey hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0048.jpg">灰色头发</span>
<span class="keyword-item" data-en="Green hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0049.jpg">绿色头发</span>
<span class="keyword-item" data-en="Silver hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0050.jpg">银色头发</span>
<span class="keyword-item" data-en="Orange hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0051.jpg">橙色头发</span>
<span class="keyword-item" data-en="Platinum gold hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0052.jpg">铂金色头发</span>
<span class="keyword-item" data-en="Gradient Hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0053.jpg">渐变色头发</span>
<span class="keyword-item" data-en="Two tone hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0054.jpg">双色头发</span>
<span class="keyword-item" data-en="Pick up dyeing" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0055.jpg">挑染</span>
<span class="keyword-item" data-en="Dumb hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0056.jpg">呆毛</span>
<span class="keyword-item" data-en="Princess Cut" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0057.jpg">公主切</span>
<span class="keyword-item" data-en="disheveled hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0058.jpg">蓬发</span>
<span class="keyword-item" data-en="Wave Head" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0059.jpg">波浪头</span>
<span class="keyword-item" data-en="curly hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0060.jpg">卷发</span>
<span class="keyword-item" data-en="Meatball head" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0061.jpg">丸子头</span>
<span class="keyword-item" data-en="straight hair" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0062.jpg">直发</span>
<span class="keyword-item" data-en="Comb your hair backwards" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0063.jpg">头发向后梳</span>
<span class="keyword-item" data-en="ponytail" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0064.jpg">马尾辫</span>
<span class="keyword-item" data-en="pigtails" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0065.jpg">双辫子</span>
<span class="keyword-item" data-en="pigtail" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0066.jpg">长辫子</span>
<span class="keyword-item" data-en="High ponytail" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0067.jpg">高马尾</span>
<span class="keyword-item" data-en="Low ponytail" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0068.jpg">低马尾</span>
<span class="keyword-item" data-en="dual horsetail" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0069.jpg">双马尾</span>
<span class="keyword-item" data-en="Fishbone braid" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0070.jpg">鱼骨辫</span>
<span class="keyword-item" data-en="fringe/bangs" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0071.jpg">齐刘海</span>
<span class="keyword-item" data-en="Eight character bangs" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0072.jpg">八字刘海</span>
<span class="keyword-item" data-en="Air bangs" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0073.jpg">空气刘海</span>
</div>
</div>
<hr class="category-divider">
<!-- 分类5 -->
<div class="keyword-category">
<h4 class="category-title">肤色肤质</h4>
<div class="keyword-list">
<span class="keyword-item" data-en="yellow race" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/11.jpg">黄种人</span>
<span class="keyword-item" data-en="white person" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/02.jpg">白种人</span>
<span class="keyword-item" data-en="Black people" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/09.jpg">黑种人</span>
<span class="keyword-item" data-en="the brown race" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/24.jpg">棕种人</span>
<span class="keyword-item" data-en="Wheat skin color" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/16.jpg">小麦肤色</span>
<span class="keyword-item" data-en="Pale complexion" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/04.jpg">苍白肤色</span>
<span class="keyword-item" data-en="Strange color skin tone" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/0074.jpg">奇异色彩肤色</span>
<span class="keyword-item" data-en="Metallic skin" data-img-url="https://fszxai.fss-my.addlink.cn/rwtz/12.jpg">金属肤质</span>
</div>
</div>
<!-- 最后一个分类后面通常不需要分隔线 -->
</div>
</div>
<style>
#keywordSelectorContainer {
margin: 15px 0;
padding: 10px;
border: 1px dashed #eee;
background-color: #f9f9f9;
font-family: 'Arial', sans-serif;
color: #333;
}
.keyword-category {
margin-bottom: 15px;
}
.category-title {
font-weight: bold;
margin-bottom: 8px;
font-size: 1.1em;
border-bottom: 1px solid #eee;
padding-bottom: 4px;
}
.keyword-list {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.keyword-item {
display: inline-block;
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
background-color: #fff;
transition: background-color 0.2s ease;
user-select: none;
font-size: 0.9em;
}
.keyword-item:hover {
background-color: #e0ffe0;
border-color: #a0d9a0;
}
.keyword-item.selected {
background-color: #e0ffe0;
border-color: #a0d9a0;
font-weight: bold;
}
.keyword-item.selected:hover {
background-color: #e0ffe0;
border-color: #a0d9a0;
}
.category-divider {
border: none;
border-top: 1px solid #eee;
margin: 20px 0;
}
#copyKeywordsButton:hover {
background-color: #e9e9e9;
}
#copyKeywordsButton:active {
background-color: #d9d9d9;
}
#imageDisplayArea {
text-align: center;
margin-bottom: 0;
position: fixed;
top: 100px;
right: 20px;
z-index: 1000;
max-width: 252px;
max-height: 432px;
width: auto;
height: auto;
overflow: hidden;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
background-color: #fff;
border: 1px solid #eee;
padding: 5px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
#hoverImageDisplay {
display: block;
max-width: 252px;
max-height:432px;
height: auto;
width: auto;
border: none;
padding: 0;
background-color: transparent;
}
#keywordLists {
margin-top: 20px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const selectedKeywordsInput = document.getElementById('selectedKeywordsInput');
const copyButton = document.getElementById('copyKeywordsButton');
const keywordItems = document.querySelectorAll('.keyword-item');
const imageDisplayArea = document.getElementById('imageDisplayArea');
const hoverImageElement = document.getElementById('hoverImageDisplay');
if (!selectedKeywordsInput || !copyButton || keywordItems.length === 0 || !imageDisplayArea || !hoverImageElement) {
console.error('关键词选择器：未能找到必要的DOM元素。请检查HTML结构和ID/类名是否正确，或Discuz!是否过滤了部分代码。');
return;
}
let selectedEnglishTerms = [];
function updateInputBox() {
selectedKeywordsInput.value = selectedEnglishTerms.map(term => term + ',').join('');
selectedKeywordsInput.scrollTop = selectedKeywordsInput.scrollHeight;
}
keywordItems.forEach(item => {
item.addEventListener('click', function() {
const englishTerm = this.getAttribute('data-en');
const index = selectedEnglishTerms.indexOf(englishTerm);
if (index === -1) {
selectedEnglishTerms.push(englishTerm);
this.classList.add('selected');
} else {
selectedEnglishTerms.splice(index, 1);
this.classList.remove('selected');
}
updateInputBox();
});
item.addEventListener('mouseenter', function() {
const imageUrl = this.getAttribute('data-img-url');
hoverImageElement.onload = null;
hoverImageElement.onerror = null;
if (imageUrl) {
imageDisplayArea.style.visibility = 'visible';
imageDisplayArea.style.opacity = '1';
hoverImageElement.src = '';
hoverImageElement.src = imageUrl;
hoverImageElement.onload = function() {
if (hoverImageElement.naturalWidth === 0) {
console.error('图片加载成功但尺寸无效:', imageUrl);
imageDisplayArea.style.visibility = 'hidden';
imageDisplayArea.style.opacity = '0';
hoverImageElement.src = '';
}
hoverImageElement.onload = null;
hoverImageElement.onerror = null;
};
hoverImageElement.onerror = function() {
console.error('图片加载失败:', imageUrl);
imageDisplayArea.style.visibility = 'hidden';
imageDisplayArea.style.opacity = '0';
hoverImageElement.src = ''; // 清空 src 防止重试
hoverImageElement.onload = null;
hoverImageElement.onerror = null;
};
if (hoverImageElement.complete) {
if (hoverImageElement.naturalWidth === 0) {
console.error('图片加载完成但尺寸无效 (可能来自缓存):', imageUrl);
imageDisplayArea.style.visibility = 'hidden';
imageDisplayArea.style.opacity = '0';
hoverImageElement.src = '';
}
hoverImageElement.onload = null;
hoverImageElement.onerror = null;
}
} else {
imageDisplayArea.style.visibility = 'hidden';
imageDisplayArea.style.opacity = '0';
hoverImageElement.src = '';
hoverImageElement.onload = null;
hoverImageElement.onerror = null;
}
});
item.addEventListener('mouseleave', function() {
imageDisplayArea.style.visibility = 'hidden';
imageDisplayArea.style.opacity = '0';
hoverImageElement.src = '';
hoverImageElement.onload = null;
hoverImageElement.onerror = null;
});
});
copyButton.addEventListener('click', function() {
if (selectedKeywordsInput.value) {
navigator.clipboard.writeText(selectedKeywordsInput.value).then(function() {
}, function(err) {
console.error('无法使用 Clipboard API 复制: ', err);
try {
selectedKeywordsInput.select();
selectedKeywordsInput.setSelectionRange(0, selectedKeywordsInput.value.length);
document.execCommand("copy");
} catch (err) {
console.error('旧方法复制也失败了: ', err);
}
});
} else {
}
});
});
</script>
</div>
页:
[1]