Commit b53a38f8 by Hantao

feat(ui): 添加进度条分隔线和分享按钮

- 在第二页面口感指数部分增加了虚线分隔线样式
- 新增进度条分隔线的样式细节调整
- 在首页引入分享功能配置,支持自定义分享标题和路径
- 添加侧边栏第三个徽章按钮,支持点击分享
- 设置分享按钮样式,确保位置和外观符合设计需求
parent 92a4a283
......@@ -209,6 +209,7 @@ onMounted(() => {
<text class="progress-text">{{ item.label }}</text>
</view>
</view>
<view class="progress-divider" />
<view class="taste-section">
<text class="taste-label">口感指数</text>
<text class="taste-value">{{ completedCount * 25 }}%</text>
......@@ -353,6 +354,12 @@ onMounted(() => {
gap: 12rpx;
}
.progress-divider {
margin-top: 20rpx;
margin-bottom: 10rpx;
border-top: 5rpx dashed #C2D7E0;
}
.progress-item {
display: flex;
align-items: center;
......
<script setup>
import { ref } from 'vue';
import { onShareAppMessage } from '@dcloudio/uni-app';
// 图片路径
const ASSETS = Object.freeze ({
......@@ -97,6 +98,14 @@ const closeSidebar = () => {
isSidebarExpanded.value = false;
}
};
// 分享配置
onShareAppMessage(() => {
return {
title: '滤芯排序游戏',
path: '/pages/start/index',
};
});
</script>
<template>
......@@ -149,6 +158,7 @@ const closeSidebar = () => {
<view v-if="isSidebarExpanded" class="sidebar-custom-content">
<view class="badge-nav-btn" @click.stop="navToBadgePage"></view>
<view class="badge-nav-btn" @click.stop="navToCouponPage"></view>
<button class="badge-nav-btn badge-nav-btn-third" open-type="share" @click.stop></button>
</view>
<view class="sidebar-wrapper" @click.stop="toggleSidebar">
<image
......@@ -378,6 +388,23 @@ const closeSidebar = () => {
justify-content: center;
align-items: center;
}
.badge-nav-btn-third {
width: 170rpx;
height: 89rpx;
position: absolute;
top: 198rpx;
right: 0;
padding: 0;
margin: 0;
background: transparent;
border: none;
line-height: normal;
&::after {
border: none;
}
}
}
.sidebar-icon {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment