写在最前
在前面使用TailwindCSS完成过仿百度百科小demo，此篇章将介绍一下每个小部分的实现过程与代码，这里就不粘贴完整的代码了详细去拉取下来对比看看
1. 头部
1.1 导航栏
<div class="h-8 border-b-[1px] border-[#ebebeb]">
<div class="h-full flex justify-end">
<ul class="flex list-none p-0">
<li class="h-full w-[54px] flex justify-center items-center" v-for="item in menuList" v-bind:key="item.name" >
<a class="w-full h-full flex justify-center items-center underline text-[13px] font-bold text-gray-800" :href="item.url">{{ item.name }}</a>
</li>
</ul>
<!-- 分隔-->
<div class="border-r border-gray-300 h-[12px] mx-[13px] my-[10px] ml-[25px]"></div>
<ul class="flex items-center list-none p-0">
<li v-for="item in menuList2" v-bind:key="item.name" class="h-full px-[11px]">
<a class="h-full flex items-center text-[13px] text-[#333]" :href="item.url">{{item.name}}</a>
</li>
</ul>
</div>
</div>1.2 搜索框
<!-- 搜索 -->
<div class="h-[104px] flex justify-center items-center">
<a class="w-[154px] mb-[8px]" href="#">
<img src="./assets/img/logo-baike.svg" alt="logo" class="h-[44px]">
</a>
<div class="h-10 flex">
<input class="w-[535px] h-full focus:outline-none border-[1px] border-gray-300 focus:border-[#4791ff]"/>
<button class="w-[104px] h-full bg-[#317ef3] text-white mr-[4px]">进入词条</button>
<button class="w-[104px] h-full bg-white border border-[#2e82ff] text-[#38f]">全站搜索</button>
<div class="h-full flex items-end">
<a class="ml-[12px] text-[13px] text-[#333] underline" href="#">帮助</a>
</div>
</div>
</div>1.3 视频滚动
<div class="flex justify-center bg-[url('/src/assets/img/bg1.png')] bg-cover" >
<div class="w-[1140px] pt-[30px] pb-[30px] pl-[30px] relative">
<div class="mb-[24px]">
<div class="flex">
<span class="inline-block text-[#000] text-[34px] mr-[10px]">Java</span>
<ul class="flex items-center">
<li class="mr-[6px]" style="box-shadow: 0 1px 1px 0 #bfd6f2;" v-for="(item, index) in btnList" v-bind:key="index">
<a class="group text-[12px] flex items-center text-[#333] bg-white rounded-[4px] pl-[9px] pr-[9px] pt-[4px] pb-[4px] hover:bg-[#459df5] hover:text-white transition-colors duration-300 min-h-[26px]" href="#">
<!-- 原始的svg已经被转换成为base64了，然后用base64Decode(item.icon)转回来svg再v-html嵌套进去 -->
<span class="mr-[2px] text-blue-500 group-hover:text-white" v-html="base64Decode(item.icon)">
</span>
{{item.name}}
</a>
</li>
</ul>
</div>
<div>
<span class="text-[#333] text-[14px]">
计算机编程语言
</span>
</div>
</div>
<!-- 视频滚动 -->
<div class="relative w-[816px]">
<div class="overflow-hidden" ref="videoScrollContainer">
<ul class="flex" :style="{ width: videoList.length * 272 + 'px'}">
<li class="mr-[10px] w-[272px] h-[153px] rounded-[10px] bg-blue-500 relative group cursor-pointer"
v-for="(item, index) in videoList" v-bind:key="index">
<img :src="item.url" class="w-full h-full"/>
<!-- 播放按钮，时长，悬浮内容 -->
<div class="absolute top-0 w-full h-full flex justify-center items-center opacity-100 transition-opacity duration-300 group-hover:opacity-0">
<img class="w-[44px] h-[44px]" src="./assets/img/btn1.png"/>
<div class="absolute w-full p-[10px] bottom-0 text-white text-[13px] flex justify-between">
<span :style="{ width: maxWidth + 'px' }">{{item.title}}</span>
<span>{{item.length}}</span>
</div>
</div>
</li>
</ul>
</div>
<!-- 左右切换按钮 -->
<div @click="videoScrollFunctions.scrollLeft" class="rounded-full w-[40px] h-[40px] bg-gray-100 absolute left-[-50px] transform translate-y-[-50%] top-1/2 cursor-pointer flex justify-center items-center" style="box-shadow: 0 10px 20px 0 #bfd6f2;">
<svg viewBox="0 0 590 1024" fill="currentColor" width="1em" height="1em"><path d="M589.598 946.42 155.158 512 589.56 77.58 511.982 0 0 512.018 512.018 1024z"></path></svg>
</div>
<div @click="videoScrollFunctions.scrollRight" class="rounded-full w-[40px] h-[40px] bg-gray-100 absolute right-[-40px] transform translate-y-[-50%] top-1/2 cursor-pointer flex justify-center items-center" style="box-shadow: 0 10px 20px 0 #bfd6f2;">
<svg viewBox="0 0 590 1024" fill="currentColor" width="1em" height="1em"><path d="M.402 77.58 434.842 512 .44 946.42 78.018 1024 590 511.982 77.982 0z"></path></svg>
</div>
</div>
<!-- 秒懂百科图 -->
<a href="#" class="absolute right-0 bottom-0 mb-[30px]">
<img class="w-[150px] h-[54px]" src="./assets/img/mdbk.svg"/>
</a>
</div>
</div>2. 主体内容
2.1 星图
<!--星图-->
<div class="flex justify-between mb-[12px]">
<span class="text-[#000] text-[22px] leading-[22px]">相关星图</span>
<a class="text-[#666] text-[14px] leading-[14px] flex items-center" href="#">
查看更多
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 7 12" fill="currentColor" xml:space="preserve" width="1em" height="1em" class="headIcon_QNTjb"><path class="starmap-arrow_svg__st0" d="M.5.5c.3-.3.8-.3 1.1 0l5 5 .5.5-5.5 5.5c-.3.3-.8.3-1.1 0s-.3-.8 0-1.1L5 5.9.5 1.4C.2 1.3.2.8.5.5z"></path></svg>
</a>
</div>
<!--卡片部分 h-[187px]-->
<div class="relative">
<!-- 卡片滚动部分 -->
<div class="relative">
<div class="overflow-hidden" ref="scrollContainer">
<ul class="flex" :style="{ width: starChartList.length * 360 + 'px' }">
<li class="w-[360px] border border-[#e6e6e6] leading-none mr-[10px]" v-for="(item, index) in starChartList" v-bind:key="index">
<div class="w-full h-full pt-[15px] pb-[15px] pl-[20px] pr-[20px]">
<div class="">
<div class="flex justify-between items-center">
<a class="hover:text-[#136ec2] text-[16px]" href="#">
<span>{{item.title}}</span>
</a>
<a class="text-[#b3b3b3] w-[14px] h-[14px]" href="#">
<svg fill="currentColor" viewBox="0 0 14 14" xml:space="preserve"><path d="M11.3.1c.2.1.5.2.9.6l1.1 1.1.1.1c.3.4.4.5.5.8.1.2.1.5 0 .8-.1.2-.2.5-.6.9L5 12.7c-.2.2-.4.3-.5.4-.1.1-.3.2-.4.2H4c-.1 0-.3.1-.6.1l-2.5.5c-.4.1-.7-.2-.8-.6V13l.5-2.6c.1-.3.1-.5.2-.6.1-.2.1-.3.2-.4l.1-.1.4-.4L9.8.6c.4-.4.7-.6.9-.6s.3 0 .6.1zM13.7 12v1.3H6.1L7.5 12h6.2zM10.9 1.3s-.1 0-.3.2L2.2 9.9c-.2.2-.2.2-.2.3l-.1.1v.1c0 .1 0 .2-.1.4l-.3 1.7 1.8-.3c.2 0 .3-.1.3-.1h.2c.1-.1.2-.1.4-.4l8.3-8.3.2-.2-.2-.2-.1-.1-1.3-1.3c-.1-.2-.1-.3-.2-.3z"></path></svg> </a>
</div>
<!--词条，阅读-->
<div class="flex text-[12px] mt-[10px] text-[#00000099]">
<span class="flex items-center mr-[10px]">
<span class="mr-[4px]">
<svg viewBox="0 0 12 12" fill="currentColor" width="1em" height="1em"><path d="M10 0c1.1 0 2 .9 2 2v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V2c0-1.1.9-2 2-2h7zm0 1H3c-.5 0-.9.4-1 .9V10c0 .5.4.9.9 1H10c.5 0 .9-.4 1-.9V2c0-.5-.4-.9-.9-1H10z"></path><path d="M4.5 4h4c.3 0 .5.2.5.5s-.2.5-.5.5h-4c-.3 0-.5-.2-.5-.5s.2-.5.5-.5zm0 3h4c.3 0 .5.2.5.5s-.2.5-.5.5h-4c-.3 0-.5-.2-.5-.5s.2-.5.5-.5z"></path></svg>
</span>
共{{item.glossary}}个词条
</span>
<span class="flex items-center">
<span class="mr-[4px]">
<svg viewBox="0 0 12 12" fill="currentColor" width="1em" height="1em"><path d="M2 11c-.8 0-1.4-.6-1.5-1.4V2.5c0-.8.6-1.4 1.4-1.5h1.6c1 0 2 .5 2.5 1.3C6.5 1.5 7.5 1 8.5 1h1.6c.8.1 1.4.7 1.4 1.5v7.1c-.1.8-.7 1.4-1.5 1.4H2zm8-1c.3-.1.5-.3.5-.5V2.4c-.1-.2-.3-.4-.5-.4H8.4c-1 .1-1.9.9-1.9 2v3.4c0 .3-.2.5-.5.5-.2 0-.4-.2-.5-.4V4c0-1.1-.8-1.9-1.9-2H2c-.2 0-.4.2-.5.4v7.1c0 .2.2.4.4.5H10z"></path></svg>
</span>
{{ (item.reading / 10000).toFixed(1) }}万阅读
</span>
</div>
</div>
<!--4个卡片, 两行两列-->
<div class="mt-[20px]">
<ul class="grid grid-cols-2">
<li class="flex cursor-pointer" v-for="(it, index) in item.data" v-bind:key="index" :class="{'mt-[10px]': index >= 2}">
<img class="w-[42px] h-[42px] rounded-[2px] border" :src="it.url" alt="">
<div class="ml-[8px] w-[108px] flex flex-col justify-center">
<div class="text-[14px] text[#000]">{{it.title}}</div>
<div class="mt-[5px] text-[#00000099] leading-[12px] text-[12px] overflow-hidden truncate">{{it.desc}}</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<!-- 左右切换按钮 -->
<div @click="scrollFunctions.scrollRight" class="w-[30px] h-[60px] absolute right-[-30px] transform translate-y-[-50%] top-1/2 cursor-pointer flex justify-center items-center">
<svg viewBox="0 0 590 1024" fill="currentColor" width="1em" height="1em"><path d="M.402 77.58 434.842 512 .44 946.42 78.018 1024 590 511.982 77.982 0z"></path></svg>
</div>
<div @click="scrollFunctions.scrollLeft" class="w-[30px] h-[60px] absolute left-[-30px] transform translate-y-[-50%] top-1/2 cursor-pointer flex justify-center items-center">
<svg viewBox="0 0 590 1024" fill="currentColor" width="1em" height="1em"><path d="M589.598 946.42 155.158 512 589.56 77.58 511.982 0 0 512.018 512.018 1024z"></path></svg>
</div>
</div>
</div>2.2 表格信息
<!--表格信息-->
<div class="mt-[20px] mb-[35px] text-[13px]">
<table class="w-full">
<tbody>
<!-- 使用v-for遍历每行的两个信息 -->
<tr v-for="([item1, item2]) in pairedSoftwareInfo" :key="item1.name" class="border-b border-dashed">
<td class="text-[#999] leading-[28px]">{{ item1.name }}</td>
<td class="">
<span v-if="Array.isArray(item1.value)"> {{ item1.value.join(', ') }}</span>
<span v-else>{{ item1.value }}</span>
</td>
<td v-if="item2" class="text-[#999]">{{ item2.name }}</td>
<td v-if="item2" class="">
<span v-if="Array.isArray(item2.value)">{{ item2.value.join(', ') }}</span>
<span v-else>{{ item2.value }}</span>
</td>
</tr>
</tbody>
</table>
</div>2.3 锚点导航列表
<!--锚点导航目录-->
<div class="border-t border-b bg-[#fbfbfb] flex">
<div class="border-r w-[80px]">
<div class="text-[18px] h-full mt-[15px] flex justify-center">目录</div>
</div>
<div class="h-full p-[14px]">
<!--详细的数据-->
<div class="flex">
<ul class="min-w-[150px]" v-for="(item) in groupSectionsByLimit(sectionList, 10)" v-bind:key="item.title">
<li class="px-[4px]" v-for="(it) in item" v-bind:key="it.title">
<div class="text-[16px] text-[#136ec2] py-[2px]" v-if="it.type === 'parent'">
<span class="pr-[6px]">{{it.index}}</span>
<span class="hover:underline cursor-pointer">{{it.title}}</span>
</div>
<div v-else>
<span class="text-[#ccc] ml-[10px]">▪</span>
<span class="pl-[6px] text-[#333] hover:underline cursor-pointer text-[12px]">{{it.title}}</span>
</div>
</li>
</ul>
</div>
</div>
</div>2.4 文本段落
<!--标题-->
<div v-for="(item, index) in sectionList" v-bind:key="index">
<div class="flex items-center mt-[35px] mb-[15px]">
<!--左侧色块, 漂移到左侧-->
<div class="h-[24px] bg-[#4f9cee] w-[14px] absolute left-[-30px]"></div>
<!--大标题-->
<div class="text-[22px] text-[#000] font-normal leading-[24px]">{{item.title}}</div>
<!--分隔线-->
<div class="ml-[10px] mr-[14px] h-[1px] bg-[#e0e0e0] flex-grow"></div>
<!--右侧播报小按钮-->
<div class="text-[#888] text-[12px] leading-[24px] flex">
<span class="flex items-center cursor-pointer hover:text-[#136ec2]">
<span class="mr-[3px]"><svg viewBox="0 0 16 16" fill="currentColor" width="1em" height="1em"><path d="M7.878 14.133c-.3 0-.7-.1-.9-.3l-2.8-2.5h-1.6c-.8 0-1.4-.7-1.4-1.4v-3.8c0-.8.6-1.4 1.4-1.4h1.6l2.7-2.4c.6-.5 1.4-.5 1.9.1.3.2.4.5.4.9v9.5c0 .7-.6 1.3-1.3 1.3zm-5.3-8.2c-.1 0-.2.1-.2.2v3.8c0 .1.1.2.2.2h1.4c.3 0 .6.1.9.3l2.8 2.5c.1.1.4 0 .4-.2v-9.4c0-.1 0-.1-.1-.2s-.2-.1-.3 0l-2.7 2.4c-.3.3-.6.4-.9.4h-1.5zm10.3 6.8c-.1 0-.3 0-.4-.2-.2-.2-.2-.6 0-.8.9-1 1.4-2.3 1.4-3.7 0-1.4-.5-2.7-1.4-3.7-.2-.2-.2-.6 0-.8.2-.2.6-.2.8 0 1.1 1.2 1.7 2.8 1.7 4.4s-.6 3.3-1.7 4.4c-.1.3-.2.4-.4.4z"></path><path d="M11.378 10.733c-.1 0-.2 0-.3-.1-.3-.2-.3-.6-.2-.8.4-.5.6-1.1.6-1.8s-.2-1.3-.6-1.8c-.1-.2-.1-.6.2-.8.2-.2.6-.1.8.2.5.7.8 1.5.8 2.4 0 .9-.3 1.7-.8 2.4-.1.2-.3.3-.5.3z"></path></svg></span>
播报
</span>
<span class="flex items-center cursor-pointer hover:text-[#136ec2] ml-[14px]">
<span class="mr-[3px]">
<svg viewBox="0 0 16 16" fill="currentColor" width="1em" height="1em"><path d="m14 3.8-1.9-1.9c-.3-.3-.7-.4-1.1-.4-.4 0-.8.2-1.1.4l-8.4 8.4c-.3.3-.4.7-.4 1.1v1.9c0 .8.7 1.5 1.5 1.5h1.9c.4 0 .8-.2 1.1-.4L14 5.9c.6-.6.6-1.6 0-2.1zm-9.1 9.7c-.1.1-.2.1-.3.1H2.7c-.2 0-.4-.2-.4-.4v-1.9c0-.1 0-.2.1-.3l6.1-6 2.4 2.4-6 6.1zm8.3-8.4-1.5 1.5-2.4-2.4 1.5-1.5c.1-.1.2-.1.3-.1s.2 0 .3.1l1.9 1.9c.1.1.1.3-.1.5z"></path></svg> </span>
编辑
</span>
</div>
</div>
<!--段落， 只有desc描述没有分类-->
<div v-if="item.desc?.length !== 0">
<p class="text-[#333] text-[14px] leading-[24px] mb-[13px]" style="text-indent: 2em;" v-for="(it, i) in item.desc" v-bind:key="i">{{it}}</p>
</div>
<!--是分类哦，分类里面有段落-->
<div v-for="(it, i) in item.data" v-bind:key="i">
<!--分类的标题-->
<div class="text-[17px] mb-[13px] font-bold text-[#444]">{{it.title}}</div>
<p class="text-[#333] text-[14px] leading-[24px] mb-[13px]" style="text-indent: 2em;" v-for="(it, i) in it.desc" v-bind:key="i">{{it}}</p>
</div>
</div>2.5 词条图册
<!--词条图册-->
<div class="mt-[30px]">
<div class="mb-[10px] flex justify-between">
<span class="text-[#333] text-[22px]">词条图册</span>
<span class="flex items-center text-[14px] text-[#666] cursor-pointer">
更多相册
<span><svg viewBox="0 0 590 1024" fill="currentColor" width="1em" height="1em" class="icon_suFF5"><path d="M.402 77.58 434.842 512 .44 946.42 78.018 1024 590 511.982 77.982 0z"></path></svg></span>
</span>
</div>
<div class="flex text-[#555] text-[12px] leading-[18px]">
<div class="border mr-[14px] cursor-pointer">
<img class="h-[155px]" src="./assets/img/img1.png">
<div class="border-t py-[8px] px-[7px]">
<span>Java(1张)</span>
</div>
</div>
<div class="border mr-[14px] cursor-pointer">
<img class="h-[155px]" src="./assets/img/img2.png">
<div class="border-t py-[8px] px-[7px]">
<span>词条图片(6张)</span>
</div>
</div>
<div class="border mr-[14px] cursor-pointer">
<img class="h-[155px]" src="./assets/img/img3.png">
<div class="border-t py-[8px] px-[7px]">
<span>参考资料图册(2张)</span>
</div>
</div>
</div>
</div>2.5 TA说
<!--TA说 分享你的世界-->
<div>
<div class="mb-[10px] flex justify-between">
<span class="text-[#666] text-[14px] flex items-center">
<img src="./assets/img/tashuo.png"/>
分享你的世界
</span>
<span class="flex items-center text-[14px] text-[#666] cursor-pointer">
更多相册
<span><svg viewBox="0 0 590 1024" fill="currentColor" width="1em" height="1em" class="icon_suFF5"><path d="M.402 77.58 434.842 512 .44 946.42 78.018 1024 590 511.982 77.982 0z"></path></svg></span>
</span>
</div>
<!--gap-4是个好东西-->
<div class="flex gap-4">
<!-- 循环4次算了 -->
<div class="w-[184px] cursor-pointer" v-for="number in 4" v-bind:key="number">
<div class="relative h-[104px]">
<img class="object-cover w-full h-full" src="./assets/img/gaosiling.png"/>
<span class="group absolute right-0 bottom-0 mb-[4px] mr-[4px] rounded-[11px] text-[#000] text-[12px] h-[20px] px-[9px] py-[4px] flex items-center" style="background: hsla(0, 0%, 100%, .6);">
<span class="group-hover:text-blue-500 mr-[4px]"><svg viewBox="0 0 11 11" fill="currentColor" width="1em" height="1em" class="like_Zkmay"><path d="M1.9 3.7v7.1h-.6c-.7 0-1.2-.5-1.3-1.2V5c0-.7.6-1.3 1.3-1.3h.6zM4.7.1c.5-.1 1.1 0 1.5.4.5.5.7 1.3.5 2.3V3l-.2.4H9c.4 0 .8.1 1 .3.6.6.8 2.2.4 3.9-.4 1.7-1.1 3.1-2.1 3.3H2.6V3.3c.5-.5.7-.7.9-1.3l.1-.2c0-.1.1-.2.1-.3l.1-.4c.1-.6.3-.9.9-1z"></path></svg></span>
32
</span>
</div>
<div class="text-[14px] leading-[20px] py-[7px]">
<div>Java之父“高司令”</div>
<div class="line-clamp-1">的大名，很多人肯定会联想到地道战经典对白“高实在是高”，不好意思，那是胡司令，这个高司令是个高鼻子、大胡子、金头发的老外，但作为Java编程语言的共同创始人之一，中国的程序员们在膜拜这位公认的Java之父同时，也亲昵的用中文谐音“高司令”来表达出对他的多重敬意。</div>
<div class="flex items-center mt-[7px]">
<div class="w-[20px] h-[20px] relative">
<img class="rounded-full" src="./assets/img/ren.png" alt="">
<img class="w-[10px] h-[10px] absolute bottom-0 right-0" src="./assets/img/yellow-v.png" alt="">
</div>
<div class="flex items-center ml-[6px] text-[13px] text-[#666] overflow-hidden overflow-ellipsis whitespace-nowrap">
<span>张书乐</span>
<!-- 中间的点 -->
<div class="mx-[4px] h-[3px] w-[3px] bg-[#666] rounded-full"></div>
<span class=" overflow-hidden overflow-ellipsis whitespace-nowrap">科技领域爱好者,活力创作者</span>
</div>
</div>
</div>
</div>
</div>
</div>2.6 参考资料
<!--参考资料-->
<div class="mt-[30px]">
<div class="border-b-2 text-[19px] font-thin leading-[45px]">参考资料</div>
<div class="text-[#aaa] text-[12px] leading-[20px]">
<ul>
<li class="mt-[9px] flex items-center" v-for="(item, index) in referenceMaterialList" v-bind:key="index">
<span class="text-[#666] mr-[6px]">{{index+1}}</span>
<a class="text-[#f8f8f8]" href="#">
<span class=""><svg viewBox="0 0 12 12" fill="currentColor" width="1em" height="1em"><rect width="12" height="12" rx="4"></rect><path stroke="#999" stroke-linecap="round" stroke-width="0.857" d="M3 6.03h0l2.755-2.755a.39.39 0 0 1 .551 0L9.061 6.03M5.986 4v5"></path></svg></span>
</a>
{{item}}
</li>
</ul>
</div>
<div class="inline-block mt-[20px] leading-[28px] rounded-[2px] text-[12px] cursor-pointer">
<span class="bg-[#f5f5f5] text-[#333] flex items-center py-[1px] px-[12px]">
展开全部
<span class="ml-[4px]"><svg viewBox="0 0 20 20" fill="currentColor" width="1em" height="1em"><path d="M10.015 15.143a.993.993 0 0 1-.718-.305L2.382 7.695a1 1 0 1 1 1.436-1.39l6.195 6.4 6.176-6.399a1 1 0 0 1 1.439 1.389l-6.895 7.143a.994.994 0 0 1-.718.305z"></path></svg></span>
</span>
</div>
</div>2.7 猜你喜欢
<!--猜你喜欢-->
<div class="flex justify-center">
<div class="border mt-[10px] w-[1140px] bg-white p-[30px]">
<div class="flex items-center justify-between">
<span class="text-[#333] text-[19px] font-normal">猜你喜欢</span>
<span class="text-[13px] text-[#999]">广告</span>
</div>
<div class="mt-[30px]">
<div class="grid grid-cols-2 gap-4">
<div class="flex" v-for="number in 4" v-bind:key="number">
<div class="max-w-[128px] h-[85px] mr-4"><img class="rounded" src="./assets/img/img5.png" alt=""></div>
<div>
<span class="text-[#333] text-[16px] leading-[17px]">买<span class="text-[#C60A00]">java</span>英文上万能的淘宝!优享品质，惊喜价格!</span>
<p class="text-[#666] text-[13px] leading-[21px] line-clamp-2">
购物上淘宝，诚信商家，高人气热卖商品，淘你满意!支付无忧，交易更放心!
</p>
<a class="text-[#999] text-[13px]" href="#">simba.taobao.com</a>
</div>
</div>
</div>
</div>
</div>
</div>2.8 相关搜索
<!--相关搜索-->
<div class="flex justify-center">
<div class="border mt-[10px] w-[1140px] bg-white p-[30px]">
<!--左右一个-->
<div class="flex items-center justify-between">
<span class="text-[#333] text-[19px] font-normal">相关搜索</span>
<span class="text-[13px] text-[#999]"></span>
</div>
<!--小格子-->
<div class="mt-[20px]">
<ul class="grid grid-cols-5 gap-3">
<li class="bg-[#f5f5f6] text-[14px] text-[#136ec2] h-[14px]s py-[10px] px-[12px] rounded cursor-pointer hover:bg-[#ebf0fa]" v-for="number in 10" v-bind:key="number">
java游戏
</li>
</ul>
</div>
</div>
</div>3. 侧边栏
3.1 TA说
<!--TA说-->
<div class="border mb-[10px]">
<div class="flex text-[12px] justify-between p-[10px] text-[#666]">
<div class="flex items-center">
<img src="./assets/img/tashuo.png"/>
<span class="ml-[10px] ">分享你的世界</span>
</div>
<div class="flex items-center justify-center">
<span>查看更多</span>
<span><svg viewBox="0 0 590 1024" fill="currentColor" width="1em" height="1em" class="arrowRight_lXvuG" style="font-size: 10px;"><path d="M.402 77.58 434.842 512 .44 946.42 78.018 1024 590 511.982 77.982 0z"></path></svg></span>
</div>
</div>
<div>
<img class="w-full h-[150px] object-cover" src="./assets/img/gaosiling.png">
</div>
<div class="w-[265px]">
<div class="text-[14px] leading-[20px] py-[7px] px-[10px]">
<div>Java之父“高司令”</div>
<div class="line-clamp-1">的大名，很多人肯定会联想到地道战经典对白“高实在是高”，不好意思，那是胡司令，这个高司令是个高鼻子、大胡子、金头发的老外，但作为Java编程语言的共同创始人之一，中国的程序员们在膜拜这位公认的Java之父同时，也亲昵的用中文谐音“高司令”来表达出对他的多重敬意。</div>
<div class="flex items-csenter mt-[7px]">
<div class="w-[20px] h-[20px] relative">
<img class="rounded-full" src="./assets/img/ren.png" alt="">
<img class="w-[10px] h-[10px] absolute bottom-0 right-0" src="./assets/img/yellow-v.png" alt="">
</div>
<div class="flex items-center ml-[6px] text-[13px] text-[#666]">
<span>张书乐</span>
<!-- 中间的点 -->
<div class="mx-[4px] h-[3px] w-[3px] bg-[#666] rounded-full"></div>
<span>科技领域爱好者,活力创作者</span>
</div>
</div>
</div>
</div>
</div>3.2 统计词条
<!--词条统计-->
<div class="border px-[14px] pt-[12px] pb-[14px] mb-[10px] flex flex-col text-[13px] text-[#555]">
<p class="mb-[9px] text-[#555] text-[14px] leading-[20px] font-bold">词条统计</p>
<p class="leading-[22px]">浏览次数：{{glossary.views}}</p>
<p class="leading-[22px]">编辑次数：{{glossary.editTimes}}次<a class="text-[#136ec2] hover:underline" href="#">历史版本</a></p>
<p class="leading-[22px] flex items-center">最近更新：
<a class="text-[#136ec2] mr-[4px] hover:underline" href="#">{{glossary.lastUpdated}}</a>
({{glossary.lastUpdatedTime}}})
</p>
<p class="mb-[9px] mt-[12px] text-[#555] text-[14px] leading-[20px] font-bold">突出贡献榜</p>
<!--可以做成动态，简单的做icon就写死了-->
<div class="flex justify-between leading-[22px]" v-for="(item, index) in contribution" v-bind:key="index">
<div class="flex items-center">
<a class="text-[#666] mr-[4px] hover:underline" href="#">{{item}}</a>
<a href="#"><img class="w-[16px] h-[16px]" src="./assets/img/not-active-hollow.svg"></a>
</div>
<a class="text-[#ac98e7] flex items-center" href="#">
<svg viewBox="0 0 38 53" fill="currentColor" width="1em" height="1em"><path d="M19 15c10.5 0 19 8.5 19 19s-8.5 19-19 19S0 44.5 0 34s8.5-19 19-19zm0 10c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zM34 0c2.2 0 4 1.8 4 4v8l-3.9 3.4C30 12.1 24.7 10 19 10c-5.7 0-11 2-15.1 5.3L0 12V4c0-2.2 1.8-4 4-4h30z"></path></svg>
</a>
</div>
</div>4. 底部信息
<!--底部-->
<div class="pt-[40px] pb-[10px]">
<div class="flex justify-center">
<ul class="grid grid-cols-3 gap-[100px]">
<li class="" v-for="(item, index) in menuList5" v-bind:key="index">
<div class="relative">
<div class="text-[#333] text-[20px] flex items-center">
<span class="mr-[10px] text-[#aaa;] absolute left-[-26px]"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024"><path d="M512 32C247.04 32 32 247.04 32 512s215.04 480 480 480 480-215.04 480-480S776.96 32 512 32m0 853.12c-206.08 0-373.12-167.68-373.12-373.12S305.92 138.88 512 138.88a373.12 373.12 0 1 1 0 746.24"></path><path d="M518.4 260.48c-49.28 0-88.96 14.72-118.4 42.88-30.08 28.8-44.8 68.48-44.8 117.76 0 1.92 0 21.76 14.08 37.12 6.4 7.04 18.56 14.72 38.4 14.72 38.4 0 54.4-30.08 55.68-51.2 0-21.12 3.84-37.12 11.52-47.36 4.48-6.4 13.44-15.36 39.68-15.36 15.36 0 26.24 3.84 33.28 10.24 7.68 7.68 11.52 19.2 11.52 32.64 0 10.24-3.84 20.48-11.52 29.44l-5.12 6.4c-42.24 38.4-65.92 64.64-74.88 82.56-9.6 18.56-14.08 40.32-14.08 67.84v8.32c0 17.28 14.08 42.88 53.12 42.88 40.32 0 53.76-26.88 55.68-42.88v-8.32c0-10.88 1.92-20.48 7.04-30.08 4.48-8.96 10.88-16.64 19.2-23.68 26.88-23.68 46.08-40.96 54.4-50.56 17.28-23.04 26.24-51.84 26.24-85.76 0-42.24-14.08-76.16-42.24-101.12-28.16-23.68-64-36.48-108.8-36.48M453.12 711.68a55.68 55.68 0 1 0 111.36 0 55.68 55.68 0 1 0-111.36 0"></path></svg></span>
<span>{{item.title}}</span>
</div>
<!--小item-->
<div class="mt-[4px]">
<ul class="grid grid-cols-2 gap-[2px]">
<li class="" v-for="(it, i) in item.data" v-bind:key="i">
<span class="text-[#666] text-[12px] hover:text-[#338de6] cursor-pointer">{{it}}</span>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<div class="mt-[20px] text-[12px] text-[#333] text-center">
<div>©2024 Baidu
<a href="#" class="text-[#136ec2]">使用百度前必读</a>
| <a href="#" class="text-[#136ec2]">百科协议</a> | <a href="#" class="text-[#136ec2]">隐私政策</a> | <a href="#" class="text-[#136ec2]">百度百科合作平台</a> | 京ICP证030173号
</div>
<div class="mt-[4px]"><a href="#" class="text-[#136ec2]">京公网安备1111111111111111号</a></div>
</div>
</div>