Files
lilishop-uniapp/pages/tabbar/home/template/tpl_hot_zone.vue
pikachu1995@126.com e871509bf5 feat: 更新项目配置与组件使用
- 在入口文件中引入uview-plus的配置,优化字体加载逻辑
- 移除manifest.json中不必要的权限描述
- 更新package.json和package-lock.json,添加开发依赖
- 调整多个组件的样式和结构,提升用户体验
- 修复部分组件的逻辑和样式问题,确保兼容性
2026-06-30 16:02:40 +08:00

56 lines
1.1 KiB
Vue

<template>
<div class="layout">
<div class="flex-one hot-image">
<image class="hot-image-main" mode="widthFix" :src="res.list[0].img" alt=""></image>
<image
v-for="(area, index) in res.list[0].zoneInfo"
:key="index"
@click="modelNavigateTo(area)"
mode="widthFix"
class="hot-area"
:style="{
left: area.leftPer * 100 + '%',
top: area.topPer * 100 + '%',
width: area.widthPer * 100 + '%',
height: area.heightPer * 100 + '%',
}"
:src="area.img"
alt=""
></image>
</div>
</div>
</template>
<script>
import { modelNavigateTo } from "./tpl";
export default {
title: "热区模块",
data() {
return {
modelNavigateTo,
};
},
props: ["res"],
};
</script>
<style lang="scss" scoped>
@import "./tpl.scss";
.hot-image {
position: relative;
}
.hot-area {
position: absolute;
z-index: 99;
}
.flex-one {
width: 100%;
display: block;
overflow: hidden;
}
.hot-image-main {
width: 100%;
min-height: 200rpx;
}
</style>