Commit b53a38f8 by Hantao

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

- 在第二页面口感指数部分增加了虚线分隔线样式
- 新增进度条分隔线的样式细节调整
- 在首页引入分享功能配置,支持自定义分享标题和路径
- 添加侧边栏第三个徽章按钮,支持点击分享
- 设置分享按钮样式,确保位置和外观符合设计需求
parent 92a4a283
...@@ -209,6 +209,7 @@ onMounted(() => { ...@@ -209,6 +209,7 @@ onMounted(() => {
<text class="progress-text">{{ item.label }}</text> <text class="progress-text">{{ item.label }}</text>
</view> </view>
</view> </view>
<view class="progress-divider" />
<view class="taste-section"> <view class="taste-section">
<text class="taste-label">口感指数</text> <text class="taste-label">口感指数</text>
<text class="taste-value">{{ completedCount * 25 }}%</text> <text class="taste-value">{{ completedCount * 25 }}%</text>
...@@ -353,6 +354,12 @@ onMounted(() => { ...@@ -353,6 +354,12 @@ onMounted(() => {
gap: 12rpx; gap: 12rpx;
} }
.progress-divider {
margin-top: 20rpx;
margin-bottom: 10rpx;
border-top: 5rpx dashed #C2D7E0;
}
.progress-item { .progress-item {
display: flex; display: flex;
align-items: center; align-items: center;
......
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import { onShareAppMessage } from '@dcloudio/uni-app';
// 图片路径 // 图片路径
const ASSETS = Object.freeze ({ const ASSETS = Object.freeze ({
...@@ -97,6 +98,14 @@ const closeSidebar = () => { ...@@ -97,6 +98,14 @@ const closeSidebar = () => {
isSidebarExpanded.value = false; isSidebarExpanded.value = false;
} }
}; };
// 分享配置
onShareAppMessage(() => {
return {
title: '滤芯排序游戏',
path: '/pages/start/index',
};
});
</script> </script>
<template> <template>
...@@ -149,6 +158,7 @@ const closeSidebar = () => { ...@@ -149,6 +158,7 @@ const closeSidebar = () => {
<view v-if="isSidebarExpanded" class="sidebar-custom-content"> <view v-if="isSidebarExpanded" class="sidebar-custom-content">
<view class="badge-nav-btn" @click.stop="navToBadgePage"></view> <view class="badge-nav-btn" @click.stop="navToBadgePage"></view>
<view class="badge-nav-btn" @click.stop="navToCouponPage"></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>
<view class="sidebar-wrapper" @click.stop="toggleSidebar"> <view class="sidebar-wrapper" @click.stop="toggleSidebar">
<image <image
...@@ -378,6 +388,23 @@ const closeSidebar = () => { ...@@ -378,6 +388,23 @@ const closeSidebar = () => {
justify-content: center; justify-content: center;
align-items: 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 { .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