中国中国建设银行网站首页,上海专业建站最低价,郑青松找谁做的网站,wordpress评论自定义需求背景
需要实现一个伸缩抽屉的按钮展示#xff0c;且字体需要出现渐近效果
解决效果 vue3实现渐近伸缩抽屉按钮 index.vue
!--/*** author: liuk* date: 2023/8/21* describe: 抽屉渐近显隐按钮* email:1229223630qq.com*/--
templatediv class且字体需要出现渐近效果
解决效果 vue3实现渐近伸缩抽屉按钮 index.vue
!--/*** author: liuk* date: 2023/8/21* describe: 抽屉渐近显隐按钮* email:1229223630qq.com*/--
templatediv classbuilding-floor-menudiv :class[building-floor-menu-item,item.select?select:] v-foritem in setData :keyitem.namemouseentermenuItemClick(item) mouseleaveitem.select falsediv classinner-boxdiv classreal-boxdiv classnamespan classtit{{ item.name }}/spanspan classpos{{ item.pos }}/span/divdiv classcondiv classcon-listpspan classtemperature{{ item.tem1 }}/span°C/pspan classaverage平均室温/span/divdiv classcon-listpspan classtemperature{{ item.tem2 }}/span户/pspan classaverage过冷住户/span/divdiv classcon-listpspan classtemperature{{ item.tem3 }}/span户/pspan classaverage过热住户/span/div/div/div/div/div/div
/templatescript langts setup
import {ref} from vue;const setData ref([{name: 高区组名称,pos: 16F~22F,tem1: 20.1,tem2: 2,tem3: 3,}, {name: 中区组名称,pos: 16F~22F,tem1: 24.4,tem2: 2,tem3: 3,}, {name: 低区组名称,pos: 16F~22F,tem1: 23.7,tem2: 2,tem3: 3,},
])
const menuItemClick (item) {setData.value.forEach((x: any) x.select false)item.select true
}
/script
style langscss scoped
.building-floor-menu {position: fixed;bottom: 30px;right: 700px;display: flex;.building-floor-menu-item {display: flex;flex-direction: column;width: 112px;height: 112px;padding: 12px;border: 1px solid transparent;background: rgba(38, 38, 38, 0.8);box-shadow: -10px 0px 22px 0px rgba(0, 0, 0, 0.22);border-radius: 4px;box-sizing: border-box;margin-right: 10px;user-select: none;transition: all 0.5s ease-in-out .3s;.select {width: 250px;border: 1px solid #fff;.inner-box {width: 250px;}}.inner-box {width: 75px;overflow: hidden;transition: all 0.5s ease-in-out .3s;.real-box {width: 225px;.name {display: flex;justify-content: space-between;flex-wrap: nowrap;overflow: hidden;.tit {font-size: 14px;color: #FFFFFF;letter-spacing: 0;font-weight: 500;}.pos {font-size: 12px;color: #CCCCCC;letter-spacing: 0;font-weight: 400;}}.con {display: flex;justify-content: space-between;.con-list {width: 65px;height: 68px;margin-right: 13px;p {margin: 15px 0 5px;.temperature {font-size: 24px;color: #FFFFFF;letter-spacing: 0;line-height: 16px;font-weight: 400;}span {font-size: 12px;color: #CACACA;letter-spacing: 0;font-weight: 200;}}.average {opacity: 0.5;font-size: 12px;color: #FFFFFF;letter-spacing: 0;line-height: 16px;font-weight: 400;}}}}}}
}
/style
