Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

refactor(common): 统一浮动按钮与侧边导航的尺寸变量与布局

Browse Source 
1.  新增全局CSS变量管理浮动按钮和侧边导航的尺寸参数，实现多组件样式同步
2.  重构to-top.vue和hover-nav.vue，改用CSS变量驱动布局，修复多平台适配问题
3.  新增多语言切换弹窗与智能切换逻辑，优化多语言展示与配置能力
4.  修复原容器高度计算的硬编码适配问题，改用rpx单位实现全平台自适应
This commit is contained in:
ZF Sun
2026-07-02 11:45:33 +08:00
parent e749209128
commit de52406be8
3 changed files with 615 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/to-top/to-top.vue
View File

@@ -25,14 +25,21 @@ export default {
</script>
<style>
/* 回到顶部的按钮 */
/* 回到顶部的按钮
* ------------------------------------------------------------
* 关键尺寸(right/bottom/width)改用全局 CSS 变量驱动,
* 权威源在 App.vue 的 :root 定义。hover-nav.vue 的 JS 会读取
* 同一组变量计算自身位置,保证两组件的相对关系始终一致。
* 这里给每个 var() 都加 hardcoded fallback,
* 防止 CSS 变量因某种原因未挂上时按钮定位完全失效。
* ------------------------------------------------------------ */
.mescroll-totop {
z-index: 2147483647;
position: fixed !important; /* 加上important避免编译到H5,在多mescroll中定位失效 */
right: 46rpx !important;
bottom: 272rpx !important;
width: 72rpx;
height: 72rpx;
right: var(--top-btn-right, 46rpx) !important;
bottom: var(--top-btn-bottom, 272rpx) !important;
width: var(--top-btn-size, 72rpx);
height: var(--top-btn-size, 72rpx);
border-radius: 50%;
opacity: 0;
transition: opacity 0.5s; /* 过渡 */