网站介绍
这是一个基于Vue框架开发的网站。网站主要功能是展示热门话题，用户可以点击感兴趣的话题进行浏览。网站采用了响应式设计，能够自适应不同的屏幕尺寸，提供良好的用户体验。
布局与样式
网站采用了扁平化的风格，整体以白色为主色调，简洁大方。导航栏位于顶部，包括首页、热点话题、关于我们等几个主要栏目。主要内容区域使用了.embed-hot-issue和.embed-hot-issue-item两个类来实现。.embed-hot-issue设置了绝对定位，占据整个页面宽度；.embed-hot-issue-item设置了相对定位，内部包含一个圆角矩形图标和一个文本内容，实现了卡片式的布局。
交互效果
热门话题卡片默认是透明的，当鼠标悬停在卡片上时，通过设置CSS的z-index为-1,使其显示在其他元素上方。同时，设置.embed-hot-issue-item的透明度为1,使背景色可见。点击卡片时，通过设置.embed-hot-issue-item的opacity为1,使其变得不透明，并使用transform将其向上移动20px,实现过渡效果。最后，将.embed-hot-issue-item的z-index设置为默认值，使其回到正常显示层级。
<template>
<div class="embed-hot-issue" v-for="(issue, index) in issues" :key="index">
<div class="embed-hot-issue-item" :class="{'active': activeIndex === index}" @click="activeIndex = index">
<img class="embed-hot-issue-icon" src="@/icons/{{ issue.icon }}" alt="">
<span>{{ issue.title }}</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
issues: [
{ icon: 'icon1', title: '热门话题1' },
{ icon: 'icon2', title: '热门话题2' },
{ icon: 'icon3', title: '热门话题3' },
],
activeIndex: 0,
};
},
};
</script>
