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> |
|||
File diff suppressed because it is too large
|
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