1054425342@qq.com
2 months ago
16 changed files with 1720 additions and 836 deletions
@ -0,0 +1,795 @@ |
|||||
|
<template> |
||||
|
<!-- 灵动岛占位区域 - 始终存在但控制可见性 --> |
||||
|
<view class="dynamic-island-placeholder" :class="{ visible: isScrolled }" |
||||
|
:style="{ height: 216 + 'rpx' }"> |
||||
|
<view class="dynamic-island" :class="{ |
||||
|
compact: actualCompactState, |
||||
|
fixed: isFixed, |
||||
|
}" :style="{ top: isFixed ? fixedTopPosition + 'px' : 0 }" @click="handleToggle"> |
||||
|
<!-- 展开状态 --> |
||||
|
<view v-if="!actualCompactState" class="expanded-content"> |
||||
|
<template> |
||||
|
<template v-if="styleType != 'timeShop'"> |
||||
|
<!-- 三栏布局 --> |
||||
|
<view class="three-column-layout"> |
||||
|
<!-- 右侧：头像和链接 --> |
||||
|
<view class="right-section"> |
||||
|
<view class="avatar-container" @click="toWebView"> |
||||
|
<image class="avatar" |
||||
|
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" |
||||
|
mode="aspectFill"></image> |
||||
|
</view> |
||||
|
<view class="" style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;"> |
||||
|
<view class="profile-info"> |
||||
|
<text class="profile-title">数字领航员</text> |
||||
|
<text class="profile-name">EVITA</text> |
||||
|
</view> |
||||
|
<view class="platform-link"> |
||||
|
<view class="link-text" style="margin-bottom: 15rpx;">DES介绍 >> |
||||
|
</view> |
||||
|
<view class="link-text">DES广播 >></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 左侧分隔线 --> |
||||
|
<view class="column-divider"></view> |
||||
|
<!-- 左侧：欢迎信息 --> |
||||
|
<view class="left-section"> |
||||
|
<view class="welcome-message"> |
||||
|
<view class="welcome-text">Hi!{{ |
||||
|
userInfo && userInfo.token ? userInfo.nickname : "用户" |
||||
|
}}欢迎回来~</view> |
||||
|
</view> |
||||
|
<view class="" style="font-size: 24rpx;font-weight: bold;color: #000000;"> |
||||
|
查看您的DES数据资产行 |
||||
|
</view> |
||||
|
<view class="" style="display: flex;align-items: flex-end;justify-content: space-between;"> |
||||
|
<view class=""> |
||||
|
<view class="stats-info" @click="toOrder"> |
||||
|
<text class="stats-number">2</text> |
||||
|
<text class="stats-unit">个</text> |
||||
|
</view> |
||||
|
<view class="stats-label">数字权益行</view> |
||||
|
</view> |
||||
|
<div> |
||||
|
<view class="stats-info" @click="toOrder"> |
||||
|
<text class="stats-number">2</text> |
||||
|
<text class="stats-unit">个</text> |
||||
|
</view> |
||||
|
<view class="stats-label">数字资产行</view> |
||||
|
</div> |
||||
|
<view class="middle-section"> |
||||
|
<view class="time-reward-container"> |
||||
|
<text class="time-reward-title" style="margin-bottom: 5rpx;">时间奖励</text> |
||||
|
<view class="time-reward-stats"> |
||||
|
<text class="time-reward-number">120</text> |
||||
|
<text class="time-reward-unit">点</text> |
||||
|
</view> |
||||
|
<text class="time-reward-label" style="font-weight: bold;">旅行时间行</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
<template v-if="styleType == 'timeShop'"> |
||||
|
<view class="bottom-section"> |
||||
|
<view class="" style="flex:1;"> |
||||
|
<view class="" style="display: flex;"> |
||||
|
<view class="time-reward-container" style="width: 200rpx;"> |
||||
|
<text class="time-reward-title">时间奖励</text> |
||||
|
<view class="time-reward-stats"> |
||||
|
<text class="time-reward-number">120</text> |
||||
|
<text class="time-reward-unit">点</text> |
||||
|
</view> |
||||
|
<text class="time-reward-label" |
||||
|
style="font-size: 24rpx;font-weight: bold;">旅行时间行</text> |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<view class="time-reward-number" style="font-size: 34rpx;"> |
||||
|
{{ |
||||
|
userInfo && userInfo.token ? userInfo.nickname : "用户" |
||||
|
}} |
||||
|
</view> |
||||
|
<view class="time-reward-label" |
||||
|
style="margin-top: 15rpx;font-weight: bold;font-size: 26rpx;"> |
||||
|
积分:999<text |
||||
|
style="color: #999999;font-size: 22rpx;margin-left: 10rpx;">积分获取规则</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="" |
||||
|
style="display: flex;align-items: center;font-size: 26rpx;font-weight: bold;display: flex;align-items: center;margin-top: 20rpx;"> |
||||
|
<view class="" style="width: 200rpx;"> |
||||
|
时长:{{ |
||||
|
userInfo && userInfo.token ? userInfo.hour+'h' : "-" |
||||
|
}} |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<image style="width: 22rpx;height: 22rpx;margin-right: 15rpx;" |
||||
|
:src="showImg('/uploads/20250822/c8ee7615823a1ffaba400a4d5746de9a.png')"> |
||||
|
</image> |
||||
|
点赞:120 |
||||
|
</view> |
||||
|
<view class=""> |
||||
|
<image style="width: 22rpx;height: 22rpx;margin: 0 15rpx;" |
||||
|
:src="showImg('/uploads/20250822/84c49f78f1c86b7340aaaa391bd4b7cf.png')"> |
||||
|
</image> |
||||
|
留言:120 |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<image class="avatar" |
||||
|
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" |
||||
|
mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</template> |
||||
|
</template> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 紧凑状态 --> |
||||
|
<view v-else class="compact-content"> |
||||
|
<text class="compact-name">{{ getCompactName() }}</text> |
||||
|
<image class="compact-avatar" |
||||
|
src="https://epic.js-dyyj.com/uploads/20250728/7d9ba1fe109643681396cb03f60f3218.png" |
||||
|
mode="aspectFill"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "DynamicIsland", |
||||
|
props: { |
||||
|
isCompact: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
styleType: { |
||||
|
type: String, |
||||
|
default: "", |
||||
|
}, |
||||
|
isFixed: { |
||||
|
type: Boolean, |
||||
|
default: false, |
||||
|
}, |
||||
|
title: { |
||||
|
type: String, |
||||
|
default: "用户", |
||||
|
}, |
||||
|
subtitle: { |
||||
|
type: String, |
||||
|
default: "周杰伦 - 青花瓷", |
||||
|
}, |
||||
|
avatarUrl: { |
||||
|
type: String, |
||||
|
default: "https://picsum.photos/80/80", |
||||
|
}, |
||||
|
actionText: { |
||||
|
type: String, |
||||
|
default: "暂停", |
||||
|
}, |
||||
|
// 新增页面标识符，用于区分不同页面的灵动岛实例 |
||||
|
pageId: { |
||||
|
type: String, |
||||
|
default: "default_page", |
||||
|
}, |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
isExpanded: false, |
||||
|
statusBarHeight: 0, |
||||
|
isScrolled: false, |
||||
|
scrollThreshold: 160, // 灵动岛大卡片高度（160rpx） |
||||
|
// 内部数据，减少对外部props的依赖 |
||||
|
currentTitle: "Hi！用户，欢迎回来～", |
||||
|
currentSubtitle: "2个权益 | 120时间银行", |
||||
|
currentAvatar: "https://picsum.photos/80/80", |
||||
|
currentAction: "激活你的Agent", |
||||
|
userInfo: {}, |
||||
|
JDSU_IMG_URL: "https://epic.js-dyyj.com", |
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
// 计算实际显示状态：只有在固定模式下才使用内部状态 |
||||
|
actualCompactState() { |
||||
|
if (this.isScrolled) { |
||||
|
return !this.isExpanded; |
||||
|
} |
||||
|
return false; // 非滚动状态下始终展开 |
||||
|
}, |
||||
|
// 计算固定定位的top值 |
||||
|
fixedTopPosition() { |
||||
|
// 状态栏高度 + 导航栏高度(40px) + 间距(20px) |
||||
|
return this.statusBarHeight + 40 + 20; |
||||
|
}, |
||||
|
// 计算占位区域高度 - 始终保持固定高度，等于灵动岛大卡片高度 |
||||
|
placeholderHeight() { |
||||
|
// 占位区域高度应该等于灵动岛展开状态的高度 |
||||
|
// 包括上下边距：32rpx(上) + 160rpx(灵动岛) + 24rpx(下) = 216rpx |
||||
|
const islandHeightRpx = 160; // 灵动岛展开高度 |
||||
|
const topMarginRpx = 32; // 上边距 |
||||
|
const bottomMarginRpx = 24; // 下边距 |
||||
|
return topMarginRpx + islandHeightRpx + bottomMarginRpx; |
||||
|
}, |
||||
|
// 使用内部数据或props数据 |
||||
|
title() { |
||||
|
return this.currentTitle; |
||||
|
}, |
||||
|
subtitle() { |
||||
|
return this.currentSubtitle; |
||||
|
}, |
||||
|
avatarUrl() { |
||||
|
return this.currentAvatar; |
||||
|
}, |
||||
|
actionText() { |
||||
|
return this.currentAction; |
||||
|
}, |
||||
|
// 计算是否固定 |
||||
|
isFixed() { |
||||
|
return this.isScrolled; |
||||
|
}, |
||||
|
}, |
||||
|
mounted() { |
||||
|
// uni-app中通过父组件传递点击事件 |
||||
|
this.setStatusBarHeight(); |
||||
|
// 监听页面滚动 |
||||
|
this.addScrollListener(); |
||||
|
// 获取用户信息 |
||||
|
this.getUserInfo(); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
// 清理滚动监听 |
||||
|
this.removeScrollListener(); |
||||
|
}, |
||||
|
methods: { |
||||
|
toLogin() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/pages/login/login", |
||||
|
}); |
||||
|
}, |
||||
|
handleToggle() { |
||||
|
if (this.isScrolled) { |
||||
|
// 固定模式下切换内部状态 |
||||
|
this.isExpanded = !this.isExpanded; |
||||
|
this.$emit("toggle", this.isExpanded); |
||||
|
} else { |
||||
|
// 非固定模式下触发外部事件 |
||||
|
this.$emit("toggle"); |
||||
|
} |
||||
|
}, |
||||
|
handleAction() { |
||||
|
this.$emit("action"); |
||||
|
}, |
||||
|
// 外部调用收缩方法 |
||||
|
collapseIsland() { |
||||
|
if (this.isScrolled && this.isExpanded) { |
||||
|
this.isExpanded = false; |
||||
|
this.$emit("toggle", this.isExpanded); |
||||
|
} |
||||
|
}, |
||||
|
// 添加滚动监听 |
||||
|
addScrollListener() { |
||||
|
// 只监听带页面ID的滚动事件，避免不同页面间的状态冲突 |
||||
|
const eventName = `pageScroll_${this.pageId}`; |
||||
|
console.log("DynamicIsland 添加滚动监听:", eventName); |
||||
|
uni.$on(eventName, this.handlePageScroll); |
||||
|
}, |
||||
|
// 移除滚动监听 |
||||
|
removeScrollListener() { |
||||
|
// 移除带页面ID的滚动监听 |
||||
|
const eventName = `pageScroll_${this.pageId}`; |
||||
|
uni.$off(eventName, this.handlePageScroll); |
||||
|
}, |
||||
|
// 处理页面滚动 |
||||
|
handlePageScroll(e) { |
||||
|
const scrollTop = e.scrollTop || e; |
||||
|
const shouldScroll = scrollTop > this.scrollThreshold; |
||||
|
|
||||
|
if (this.isScrolled !== shouldScroll) { |
||||
|
this.isScrolled = shouldScroll; |
||||
|
// 添加触觉反馈 |
||||
|
} |
||||
|
|
||||
|
// 滚动时自动收缩展开的灵动岛 |
||||
|
if (this.isScrolled) { |
||||
|
this.collapseIsland(); |
||||
|
} |
||||
|
}, |
||||
|
toOrder() { |
||||
|
uni.switchTab({ |
||||
|
url: '/pages/index/iSoul' |
||||
|
}) |
||||
|
}, |
||||
|
getCompactName() { |
||||
|
// 从用户信息中获取昵称 |
||||
|
if (this.userInfo && this.userInfo.nickname) { |
||||
|
return this.userInfo.nickname; |
||||
|
} |
||||
|
return "用户"; |
||||
|
}, |
||||
|
getStatNumber(type) { |
||||
|
// 从副标题中解析统计数据 |
||||
|
if (this.subtitle) { |
||||
|
if (type === "权益") { |
||||
|
const match = this.subtitle.match(/(\d+)个权益/); |
||||
|
return match ? match[1] : "0"; |
||||
|
} else if (type === "时间银行") { |
||||
|
const match = this.subtitle.match(/(\d+)时间银行/); |
||||
|
return match ? match[1] : "0"; |
||||
|
} |
||||
|
} |
||||
|
return "0"; |
||||
|
}, |
||||
|
// 设置状态栏高度 |
||||
|
setStatusBarHeight() { |
||||
|
try { |
||||
|
const systemInfo = uni.getSystemInfoSync(); |
||||
|
this.statusBarHeight = systemInfo.statusBarHeight || 0; |
||||
|
} catch (e) { |
||||
|
console.warn("获取系统信息失败:", e); |
||||
|
this.statusBarHeight = 0; |
||||
|
} |
||||
|
}, |
||||
|
// 获取用户信息 |
||||
|
getUserInfo() { |
||||
|
try { |
||||
|
this.userInfo = |
||||
|
(uni.getStorageSync("userInfo") && |
||||
|
JSON.parse(uni.getStorageSync("userInfo"))) || |
||||
|
this.$store.state.user.userInfo || {}; |
||||
|
console.log(this.userInfo, "this.userInfo"); |
||||
|
// 更新标题显示用户昵称 |
||||
|
if (this.userInfo && this.userInfo.nickname) { |
||||
|
this.currentTitle = `Hi！${this.userInfo.nickname}，欢迎回来～`; |
||||
|
} |
||||
|
} catch (e) { |
||||
|
console.warn("获取用户信息失败:", e); |
||||
|
this.userInfo = {}; |
||||
|
} |
||||
|
}, |
||||
|
toWebView() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/subPackages/webPage/webPage?url=" + |
||||
|
"https://des.js-dyyj.com/dist/#/", |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 图片显示方法 |
||||
|
showImg(img) { |
||||
|
if (!img) return; |
||||
|
if (img.indexOf("https://") != -1 || img.indexOf("http://") != -1) { |
||||
|
return img; |
||||
|
} else { |
||||
|
return this.JDSU_IMG_URL + img; |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
/* 灵动岛占位区域样式 - 始终存在但控制可见性 */ |
||||
|
.dynamic-island-placeholder { |
||||
|
width: 100%; |
||||
|
background: transparent; |
||||
|
position: relative; |
||||
|
opacity: 1; |
||||
|
transition: opacity 0.3s ease; |
||||
|
padding: 24rpx 0; |
||||
|
} |
||||
|
|
||||
|
.dynamic-island-placeholder.visible { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
|
||||
|
/* 当灵动岛不是固定状态时，确保它在占位符内正常显示 */ |
||||
|
.dynamic-island-placeholder .dynamic-island:not(.fixed) { |
||||
|
position: relative; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
|
||||
|
.dynamic-island { |
||||
|
// margin: 24rpx auto 24rpx; |
||||
|
margin: 0 auto; |
||||
|
z-index: 100; |
||||
|
|
||||
|
background: linear-gradient(180deg, #fffdb7 0%, #97fffa 100%); |
||||
|
backdrop-filter: blur(20rpx); |
||||
|
-webkit-backdrop-filter: blur(20rpx); |
||||
|
border-radius: 40rpx; |
||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1), |
||||
|
0 0 0 1rpx rgba(255, 255, 255, 0.2) inset; |
||||
|
|
||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
||||
|
overflow: hidden; |
||||
|
|
||||
|
// 展开状态 |
||||
|
width: 710rpx; |
||||
|
height: 216rpx; |
||||
|
|
||||
|
// 紧凑状态 |
||||
|
&.compact { |
||||
|
width: 300rpx; |
||||
|
height: 80rpx; |
||||
|
border-radius: 40rpx; |
||||
|
|
||||
|
.expanded-content { |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:not(.compact) { |
||||
|
.compact-content { |
||||
|
opacity: 0; |
||||
|
visibility: hidden; |
||||
|
transition: opacity 0.15s ease-out, visibility 0s linear 0.15s; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 固定定位状态 |
||||
|
&.fixed { |
||||
|
position: fixed; |
||||
|
left: 50%; |
||||
|
transform: translateX(-50%); |
||||
|
z-index: 998; |
||||
|
margin: 0; |
||||
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); |
||||
|
animation: slideInFromTop 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.expanded-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
height: 100%; |
||||
|
padding: 24rpx 25rpx; |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; |
||||
|
} |
||||
|
|
||||
|
/* 三栏布局样式 */ |
||||
|
.three-column-layout { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
height: 100%; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
/* 列分隔线 */ |
||||
|
.column-divider { |
||||
|
width: 2rpx; |
||||
|
height: 160rpx; |
||||
|
background: rgba(0, 0, 0, 0.1); |
||||
|
margin: 0rpx 25rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
/* 左侧区域 */ |
||||
|
.left-section { |
||||
|
color: #333; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
flex: 1; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.welcome-message { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.welcome-text { |
||||
|
font-size: 22rpx; |
||||
|
color: #000000; |
||||
|
line-height: 1.2; |
||||
|
text-overflow: ellipsis; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.welcome-subtitle { |
||||
|
font-size: 24rpx; |
||||
|
color: #000000; |
||||
|
margin-top: 4rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.stats-info { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.stats-number { |
||||
|
font-size: 40rpx; |
||||
|
color: #333; |
||||
|
font-weight: bold; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.stats-unit { |
||||
|
font-size: 24rpx; |
||||
|
color: #000000; |
||||
|
margin-left: 4rpx; |
||||
|
} |
||||
|
|
||||
|
.stats-label { |
||||
|
font-size: 22rpx; |
||||
|
color: #000000; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
/* 中间区域 */ |
||||
|
.middle-section { |
||||
|
display: flex; |
||||
|
justify-content: flex-start; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.time-reward-container { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: flex-end; |
||||
|
align-items: flex-start; |
||||
|
} |
||||
|
|
||||
|
.time-reward-title { |
||||
|
font-size: 20rpx; |
||||
|
color: #000000; |
||||
|
font-weight: 500; |
||||
|
margin-bottom: 12rpx; |
||||
|
} |
||||
|
|
||||
|
.time-reward-stats { |
||||
|
display: flex; |
||||
|
align-items: baseline; |
||||
|
margin-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.time-reward-number { |
||||
|
font-size: 40rpx; |
||||
|
color: #000000; |
||||
|
font-weight: bold; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
.time-reward-unit { |
||||
|
font-size: 24rpx; |
||||
|
color: #000000; |
||||
|
margin-left: 4rpx; |
||||
|
} |
||||
|
|
||||
|
.time-reward-label { |
||||
|
font-size: 22rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
/* 右侧区域 */ |
||||
|
.right-section { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
height: 100%; |
||||
|
} |
||||
|
|
||||
|
.avatar-container { |
||||
|
position: relative; |
||||
|
margin-right: 10rpx; |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 140rpx; |
||||
|
height: 140rpx; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.profile-info { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: flex-start; |
||||
|
justify-content: flex-start; |
||||
|
} |
||||
|
|
||||
|
.profile-title { |
||||
|
font-size: 26rpx; |
||||
|
color: #000000; |
||||
|
margin-bottom: 4rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.profile-name { |
||||
|
font-size: 26rpx; |
||||
|
color: #000000; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.platform-link { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.link-text { |
||||
|
font-size: 22rpx; |
||||
|
color: #000000; |
||||
|
text-decoration: underline; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
/* 保留原有的底部区域样式用于timeShop模式 */ |
||||
|
.bottom-section { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
flex: 1; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.stats-section { |
||||
|
display: flex; |
||||
|
gap: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.stat-item { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.stat-number { |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
font-weight: bold; |
||||
|
line-height: 1; |
||||
|
margin-bottom: 4rpx; |
||||
|
} |
||||
|
|
||||
|
.stat-label { |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
line-height: 1; |
||||
|
font-weight: bold; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.divider { |
||||
|
width: 2rpx; |
||||
|
height: 60rpx; |
||||
|
background: rgba(255, 255, 255, 0.3); |
||||
|
margin: 0 24rpx; |
||||
|
} |
||||
|
|
||||
|
.action-section { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
flex: 1; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.action-text { |
||||
|
font-size: 26rpx; |
||||
|
color: #ffffff; |
||||
|
font-weight: bold; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
max-width: 200rpx; |
||||
|
} |
||||
|
|
||||
|
// 添加点击反馈动画 |
||||
|
.dynamic-island:active { |
||||
|
transform: scale(0.98); |
||||
|
|
||||
|
&.fixed { |
||||
|
transform: translateX(-50%) scale(0.98); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 从顶部滑入动画 |
||||
|
@keyframes slideInFromTop { |
||||
|
0% { |
||||
|
transform: translateX(-50%) translateY(-100%); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
transform: translateX(-50%) translateY(0); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.compact-content { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
height: 100%; |
||||
|
padding: 0 24rpx; |
||||
|
opacity: 1; |
||||
|
visibility: visible; |
||||
|
transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; |
||||
|
} |
||||
|
|
||||
|
.compact-name { |
||||
|
font-size: 27rpx; |
||||
|
color: #333; |
||||
|
font-weight: bold; |
||||
|
flex: 1; |
||||
|
text-align: left; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
max-width: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.compact-avatar { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
border-radius: 50%; |
||||
|
border: 2rpx solid rgba(0, 0, 0, 0.2); |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
// 动画定义 |
||||
|
@keyframes pulse { |
||||
|
0% { |
||||
|
opacity: 1; |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
|
||||
|
50% { |
||||
|
opacity: 0.6; |
||||
|
transform: scale(1.1); |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
opacity: 1; |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 响应式适配 |
||||
|
// @media (max-width: 750rpx) { |
||||
|
// .dynamic-island { |
||||
|
// &.is-expanded { |
||||
|
// width: 100vw; |
||||
|
// max-width: 750rpx; |
||||
|
// } |
||||
|
|
||||
|
// &.is-compact { |
||||
|
// width: 280rpx; |
||||
|
// } |
||||
|
// } |
||||
|
// } |
||||
|
.action-text-box { |
||||
|
color: #000000; |
||||
|
|
||||
|
.action-text-box-des { |
||||
|
font-size: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.action-text-box-msg { |
||||
|
font-size: 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.action-text-box-img { |
||||
|
width: 57rpx; |
||||
|
height: 46rpx; |
||||
|
margin-right: 10rpx; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 2.5 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
@ -0,0 +1,40 @@ |
|||||
|
|
||||
|
<template> |
||||
|
<view class="" style="font-size: 0;position: relative;"> |
||||
|
<BackButton /> |
||||
|
<image class="bannerImg" mode="widthFix" :src="showImg('/uploads/20250825/a5e4ad2654df63d751ffd547e3359776.png')"> </image> |
||||
|
<image @click="toWebView" mode="aspectFill" style="width: 147rpx;height: 147rpx;position: absolute;bottom: 300rpx;left: 301rpx;" :src="showImg('/uploads/20250825/688bc64132881464a23b44ecbc66ec85.png')"> </image> |
||||
|
|
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import BackButton from "@/components/BackButton.vue"; |
||||
|
export default{ |
||||
|
components: { |
||||
|
BackButton, |
||||
|
}, |
||||
|
data(){ |
||||
|
return{ |
||||
|
img:'' |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
}, |
||||
|
methods:{ |
||||
|
toWebView() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/subPackages/webPage/webPage?url=" + |
||||
|
"https://des.js-dyyj.com/dist/#/", |
||||
|
}); |
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bannerImg{ |
||||
|
width: 100vw; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,33 @@ |
|||||
|
|
||||
|
<template> |
||||
|
<view class="" style="font-size: 0;"> |
||||
|
<BackButton /> |
||||
|
<image class="bannerImg" mode="aspectFill" :src="showImg('/uploads/20250825/86509d1c16bd2611f7bd923caba0b648.png')"> </image> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import BackButton from "@/components/BackButton.vue"; |
||||
|
export default{ |
||||
|
components: { |
||||
|
BackButton, |
||||
|
}, |
||||
|
data(){ |
||||
|
return{ |
||||
|
img:'' |
||||
|
} |
||||
|
}, |
||||
|
onLoad() { |
||||
|
}, |
||||
|
methods:{ |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bannerImg{ |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue