|
|
|
@ -1,10 +1,19 @@ |
|
|
|
<template> |
|
|
|
<!-- 灵动岛占位区域 - 始终存在但控制可见性 --> |
|
|
|
<view class="dynamic-island-placeholder" :class="{ visible: isScrolled }" :style="{ height: 216 + 'rpx' }"> |
|
|
|
<view class="dynamic-island" :class="{ |
|
|
|
<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"> |
|
|
|
}" |
|
|
|
:style="{ top: isFixed ? fixedTopPosition + 'px' : 0 }" |
|
|
|
@click="handleToggle" |
|
|
|
> |
|
|
|
<!-- 展开状态 --> |
|
|
|
<view v-if="!actualCompactState" class="expanded-content"> |
|
|
|
<template> |
|
|
|
@ -14,19 +23,29 @@ |
|
|
|
<!-- 右侧：头像和链接 --> |
|
|
|
<view class="right-section"> |
|
|
|
<view class="avatar-container" @click="toWebView"> |
|
|
|
<image class="avatar" |
|
|
|
<image |
|
|
|
class="avatar" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250826/92b0a21e9125fc21ca294a408bf3508f.png" |
|
|
|
mode="aspectFill"></image> |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
<view class="ai-label">智能体</view> |
|
|
|
</view> |
|
|
|
<view class="" |
|
|
|
style="display: flex;flex-direction: column;justify-content: space-between;height: 100%;"> |
|
|
|
<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" @click="toDesInfo">交响介绍 >> |
|
|
|
<view class="link-text" @click="toDesInfo" |
|
|
|
>交响介绍 >> |
|
|
|
</view> |
|
|
|
<!-- <view class="link-text">DES广播 >></view> --> |
|
|
|
</view> |
|
|
|
@ -37,102 +56,168 @@ |
|
|
|
<!-- 左侧：欢迎信息 --> |
|
|
|
<view class="left-section"> |
|
|
|
<view class="welcome-message"> |
|
|
|
<view class="welcome-text">Hi! {{ |
|
|
|
<view class="welcome-text" |
|
|
|
>Hi! |
|
|
|
{{ |
|
|
|
userInfo && userInfo.token ? userInfo.nickname : "用户" |
|
|
|
}}欢迎回来~</view> |
|
|
|
}}欢迎回来~</view |
|
|
|
> |
|
|
|
</view> |
|
|
|
<view class="" style="font-size: 24rpx;font-weight: bold;color: #000000;"> |
|
|
|
<view |
|
|
|
class="" |
|
|
|
style="font-size: 24rpx; font-weight: bold; color: #000000" |
|
|
|
> |
|
|
|
查看您的交响数据文化资产行 |
|
|
|
</view> |
|
|
|
<view class="" |
|
|
|
style="display: flex;align-items: flex-end;justify-content: space-between;"> |
|
|
|
<view |
|
|
|
class="" |
|
|
|
style=" |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
justify-content: space-between; |
|
|
|
" |
|
|
|
> |
|
|
|
<view class="" @click="toOrder"> |
|
|
|
<view class="stats-info"> |
|
|
|
<text |
|
|
|
class="stats-number">{{userInfo&&userInfo.unUseOrderQuantity||0}}</text> |
|
|
|
<text class="stats-number">{{ |
|
|
|
(userInfo && userInfo.unUseOrderQuantity) || 0 |
|
|
|
}}</text> |
|
|
|
<text class="stats-unit">个</text> |
|
|
|
</view> |
|
|
|
<view class="stats-label">交响权益行</view> |
|
|
|
</view> |
|
|
|
<div @click="toTime"> |
|
|
|
<view class="stats-info"> |
|
|
|
<text class="stats-number">{{userInfo&&userInfo.ipQuantity||0}}</text> |
|
|
|
<text class="stats-number">{{ |
|
|
|
(userInfo && userInfo.ipQuantity) || 0 |
|
|
|
}}</text> |
|
|
|
<text class="stats-unit">个</text> |
|
|
|
</view> |
|
|
|
<view class="stats-label">交响资产行</view> |
|
|
|
</div> |
|
|
|
<view class="middle-section"> |
|
|
|
<view class="time-reward-container" @click="toPoint"> |
|
|
|
<text class="time-reward-title" style="margin-bottom: 5rpx;">时间奖励</text> |
|
|
|
<text |
|
|
|
class="time-reward-title" |
|
|
|
style="margin-bottom: 5rpx" |
|
|
|
>时间奖励</text |
|
|
|
> |
|
|
|
<view class="time-reward-stats"> |
|
|
|
<text class="time-reward-number">{{ userInfo && userInfo.token ? userInfo.hourValue||0:0}}</text> |
|
|
|
<text class="time-reward-number">{{ |
|
|
|
userInfo && userInfo.token |
|
|
|
? userInfo.hourValue || 0 |
|
|
|
: 0 |
|
|
|
}}</text> |
|
|
|
<text class="time-reward-unit">点</text> |
|
|
|
</view> |
|
|
|
<text class="time-reward-label" style="font-weight: bold;">交响时间行</text> |
|
|
|
<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;" @click="toPoint"> |
|
|
|
<view class="" style="flex: 1"> |
|
|
|
<view class="" style="display: flex"> |
|
|
|
<view |
|
|
|
class="time-reward-container" |
|
|
|
style="width: 200rpx" |
|
|
|
@click="toPoint" |
|
|
|
> |
|
|
|
<text class="time-reward-title">时间奖励</text> |
|
|
|
<view class="time-reward-stats"> |
|
|
|
<text class="time-reward-number">{{ |
|
|
|
userInfo && userInfo.token ? (userInfo.hourValue||0):0 |
|
|
|
userInfo && userInfo.token ? userInfo.hourValue || 0 : 0 |
|
|
|
}}</text> |
|
|
|
<text class="time-reward-unit">点</text> |
|
|
|
</view> |
|
|
|
<text class="time-reward-label" |
|
|
|
style="font-size: 24rpx;font-weight: bold;">交响时间行</text> |
|
|
|
<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;"> |
|
|
|
<view class="time-reward-number" style="font-size: 34rpx"> |
|
|
|
{{ |
|
|
|
userInfo && userInfo.token ? userInfo.nickname : "用户" |
|
|
|
}} |
|
|
|
</view> |
|
|
|
<view class="time-reward-label" @click="toPoint" |
|
|
|
style="margin-top: 15rpx;font-weight: bold;font-size: 26rpx;"> |
|
|
|
积分:{{totalPoints||0}}<text |
|
|
|
<view |
|
|
|
class="time-reward-label" |
|
|
|
@click="toPoint" |
|
|
|
style=" |
|
|
|
margin-top: 15rpx; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 26rpx; |
|
|
|
" |
|
|
|
> |
|
|
|
积分:{{ totalPoints || 0 |
|
|
|
}}<text |
|
|
|
@click.stop="pointDetail" |
|
|
|
style="color: #999999;font-size: 22rpx;margin-left: 10rpx;">积分获取规则</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;"> |
|
|
|
<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||0: 0 |
|
|
|
userInfo && userInfo.token ? userInfo.hour || 0 : 0 |
|
|
|
}}h |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
<image style="width: 22rpx;height: 22rpx;margin-right: 15rpx;" |
|
|
|
:src="showImg('/uploads/20250822/c8ee7615823a1ffaba400a4d5746de9a.png')"> |
|
|
|
<image |
|
|
|
style="width: 22rpx; height: 22rpx; margin-right: 15rpx" |
|
|
|
:src=" |
|
|
|
showImg( |
|
|
|
'/uploads/20250822/c8ee7615823a1ffaba400a4d5746de9a.png' |
|
|
|
) |
|
|
|
" |
|
|
|
> |
|
|
|
</image> |
|
|
|
点赞:0 |
|
|
|
点赞:{{ (userInfo && userInfo.likeCount) || 0 }} |
|
|
|
</view> |
|
|
|
<view class=""> |
|
|
|
<image style="width: 22rpx;height: 22rpx;margin: 0 15rpx;" |
|
|
|
:src="showImg('/uploads/20250822/84c49f78f1c86b7340aaaa391bd4b7cf.png')"> |
|
|
|
<image |
|
|
|
style="width: 22rpx; height: 22rpx; margin: 0 15rpx" |
|
|
|
:src=" |
|
|
|
showImg( |
|
|
|
'/uploads/20250822/84c49f78f1c86b7340aaaa391bd4b7cf.png' |
|
|
|
) |
|
|
|
" |
|
|
|
> |
|
|
|
</image> |
|
|
|
留言:0 |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<image class="avatar" @click="toWebView" |
|
|
|
<image |
|
|
|
class="avatar" |
|
|
|
@click="toWebView" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250826/92b0a21e9125fc21ca294a408bf3508f.png" |
|
|
|
mode="aspectFill"></image> |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -141,16 +226,18 @@ |
|
|
|
<!-- 紧凑状态 --> |
|
|
|
<view v-else class="compact-content"> |
|
|
|
<text class="compact-name">{{ getCompactName() }}</text> |
|
|
|
<image class="compact-avatar" |
|
|
|
<image |
|
|
|
class="compact-avatar" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250826/92b0a21e9125fc21ca294a408bf3508f.png" |
|
|
|
mode="aspectFill"></image> |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "DynamicIsland", |
|
|
|
props: { |
|
|
|
isCompact: { |
|
|
|
@ -196,7 +283,7 @@ |
|
|
|
currentAvatar: "https://picsum.photos/80/80", |
|
|
|
currentAction: "激活你的Agent", |
|
|
|
userInfo: {}, |
|
|
|
totalPoints: 0 |
|
|
|
totalPoints: 0, |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
@ -307,13 +394,13 @@ |
|
|
|
}, |
|
|
|
toOrder() { |
|
|
|
uni.switchTab({ |
|
|
|
url: '/pages/index/iSoul' |
|
|
|
}) |
|
|
|
url: "/pages/index/iSoul", |
|
|
|
}); |
|
|
|
}, |
|
|
|
toTime() { |
|
|
|
uni.switchTab({ |
|
|
|
url: '/pages/index/timeShopBank' |
|
|
|
}) |
|
|
|
url: "/pages/index/timeShopBank", |
|
|
|
}); |
|
|
|
}, |
|
|
|
getCompactName() { |
|
|
|
// 从用户信息中获取昵称 |
|
|
|
@ -324,8 +411,8 @@ |
|
|
|
}, |
|
|
|
toPoint() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPackages/points/index' |
|
|
|
}) |
|
|
|
url: "/subPackages/points/index", |
|
|
|
}); |
|
|
|
}, |
|
|
|
getStatNumber(type) { |
|
|
|
// 从副标题中解析统计数据 |
|
|
|
@ -356,18 +443,20 @@ |
|
|
|
this.userInfo = |
|
|
|
(uni.getStorageSync("userInfo") && |
|
|
|
JSON.parse(uni.getStorageSync("userInfo"))) || |
|
|
|
this.$store.state.user.userInfo || {}; |
|
|
|
this.$store.state.user.userInfo || |
|
|
|
{}; |
|
|
|
console.log(this.userInfo, "this.userInfo"); |
|
|
|
// 更新标题显示用户昵称 |
|
|
|
if (this.userInfo && this.userInfo.nickname) { |
|
|
|
this.currentTitle = `Hi！${this.userInfo.nickname}，欢迎回来～`; |
|
|
|
this.Post({}, '/framework/points/getLastBalance', 'DES').then(res => { |
|
|
|
this.Post({}, "/framework/points/getLastBalance", "DES").then( |
|
|
|
(res) => { |
|
|
|
if (res.code === 200) { |
|
|
|
this.totalPoints = res.data.balance || 0; |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
); |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.warn("获取用户信息失败:", e); |
|
|
|
this.userInfo = {}; |
|
|
|
@ -379,28 +468,27 @@ |
|
|
|
// "https://des.dayunyuanjian.cn/dist/#/", |
|
|
|
// }); |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPackages/other/evita?id=0' |
|
|
|
}) |
|
|
|
url: "/subPackages/other/evita?id=0", |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
toDesInfo() { |
|
|
|
uni.navigateTo({ |
|
|
|
url: '/subPackages/other/introduction' |
|
|
|
}) |
|
|
|
url: "/subPackages/other/introduction", |
|
|
|
}); |
|
|
|
}, |
|
|
|
pointDetail(){ |
|
|
|
pointDetail() { |
|
|
|
uni.navigateTo({ |
|
|
|
url:'/subPackages/user/privacyInfo?id=10222' |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
url: "/subPackages/user/privacyInfo?id=10222", |
|
|
|
}); |
|
|
|
}, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
/* 灵动岛占位区域样式 - 始终存在但控制可见性 */ |
|
|
|
.dynamic-island-placeholder { |
|
|
|
/* 灵动岛占位区域样式 - 始终存在但控制可见性 */ |
|
|
|
.dynamic-island-placeholder { |
|
|
|
width: 100%; |
|
|
|
background: transparent; |
|
|
|
position: relative; |
|
|
|
@ -408,19 +496,19 @@ |
|
|
|
transition: opacity 0.3s ease; |
|
|
|
// padding: 24rpx 0; |
|
|
|
margin-top: 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.dynamic-island-placeholder.visible { |
|
|
|
.dynamic-island-placeholder.visible { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 当灵动岛不是固定状态时，确保它在占位符内正常显示 */ |
|
|
|
.dynamic-island-placeholder .dynamic-island:not(.fixed) { |
|
|
|
/* 当灵动岛不是固定状态时，确保它在占位符内正常显示 */ |
|
|
|
.dynamic-island-placeholder .dynamic-island:not(.fixed) { |
|
|
|
position: relative; |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.dynamic-island { |
|
|
|
.dynamic-island { |
|
|
|
// margin: 24rpx auto 24rpx; |
|
|
|
margin: 0 auto; |
|
|
|
z-index: 100; |
|
|
|
@ -470,9 +558,9 @@ |
|
|
|
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 { |
|
|
|
.expanded-content { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
height: 100%; |
|
|
|
@ -480,232 +568,232 @@ |
|
|
|
opacity: 1; |
|
|
|
visibility: visible; |
|
|
|
transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 三栏布局样式 */ |
|
|
|
.three-column-layout { |
|
|
|
/* 三栏布局样式 */ |
|
|
|
.three-column-layout { |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 列分隔线 */ |
|
|
|
.column-divider { |
|
|
|
/* 列分隔线 */ |
|
|
|
.column-divider { |
|
|
|
width: 2rpx; |
|
|
|
height: 160rpx; |
|
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
|
margin: 0rpx 25rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 左侧区域 */ |
|
|
|
.left-section { |
|
|
|
/* 左侧区域 */ |
|
|
|
.left-section { |
|
|
|
color: #333; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
flex: 1; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.welcome-message { |
|
|
|
.welcome-message { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.welcome-text { |
|
|
|
.welcome-text { |
|
|
|
font-size: 22rpx; |
|
|
|
color: #000000; |
|
|
|
line-height: 1.2; |
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.welcome-subtitle { |
|
|
|
.welcome-subtitle { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #000000; |
|
|
|
margin-top: 4rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.stats-info { |
|
|
|
.stats-info { |
|
|
|
display: flex; |
|
|
|
align-items: baseline; |
|
|
|
margin-bottom: 8rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.stats-number { |
|
|
|
.stats-number { |
|
|
|
font-size: 40rpx; |
|
|
|
color: #333; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.stats-unit { |
|
|
|
.stats-unit { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #000000; |
|
|
|
margin-left: 4rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.stats-label { |
|
|
|
.stats-label { |
|
|
|
font-size: 22rpx; |
|
|
|
color: #000000; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 中间区域 */ |
|
|
|
.middle-section { |
|
|
|
/* 中间区域 */ |
|
|
|
.middle-section { |
|
|
|
display: flex; |
|
|
|
justify-content: flex-start; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.time-reward-container { |
|
|
|
.time-reward-container { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: flex-end; |
|
|
|
align-items: flex-start; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.time-reward-title { |
|
|
|
.time-reward-title { |
|
|
|
font-size: 20rpx; |
|
|
|
color: #000000; |
|
|
|
font-weight: 500; |
|
|
|
margin-bottom: 12rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.time-reward-stats { |
|
|
|
.time-reward-stats { |
|
|
|
display: flex; |
|
|
|
align-items: baseline; |
|
|
|
margin-bottom: 8rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.time-reward-number { |
|
|
|
.time-reward-number { |
|
|
|
font-size: 40rpx; |
|
|
|
color: #000000; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.time-reward-unit { |
|
|
|
.time-reward-unit { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #000000; |
|
|
|
margin-left: 4rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.time-reward-label { |
|
|
|
.time-reward-label { |
|
|
|
font-size: 22rpx; |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 右侧区域 */ |
|
|
|
.right-section { |
|
|
|
/* 右侧区域 */ |
|
|
|
.right-section { |
|
|
|
display: flex; |
|
|
|
align-items: flex-end; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.avatar-container { |
|
|
|
.avatar-container { |
|
|
|
position: relative; |
|
|
|
margin-right: 10rpx; |
|
|
|
width: 140rpx; |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.avatar { |
|
|
|
.avatar { |
|
|
|
width: 130rpx; |
|
|
|
height: 130rpx; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.profile-info { |
|
|
|
.profile-info { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: flex-start; |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.profile-title { |
|
|
|
.profile-title { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #000000; |
|
|
|
margin-bottom: 4rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.profile-name { |
|
|
|
.profile-name { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #000000; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.platform-link { |
|
|
|
.platform-link { |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.link-text { |
|
|
|
.link-text { |
|
|
|
font-size: 22rpx; |
|
|
|
color: #000000; |
|
|
|
text-decoration: underline; |
|
|
|
font-weight: 500; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/* 保留原有的底部区域样式用于timeShop模式 */ |
|
|
|
.bottom-section { |
|
|
|
/* 保留原有的底部区域样式用于timeShop模式 */ |
|
|
|
.bottom-section { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
flex: 1; |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.stats-section { |
|
|
|
.stats-section { |
|
|
|
display: flex; |
|
|
|
gap: 32rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.stat-item { |
|
|
|
.stat-item { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
align-items: center; |
|
|
|
font-size: 28rpx; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.stat-number { |
|
|
|
.stat-number { |
|
|
|
font-size: 32rpx; |
|
|
|
color: #000000; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 1; |
|
|
|
margin-bottom: 4rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.stat-label { |
|
|
|
.stat-label { |
|
|
|
font-size: 28rpx; |
|
|
|
color: #000000; |
|
|
|
line-height: 1; |
|
|
|
font-weight: bold; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.divider { |
|
|
|
.divider { |
|
|
|
width: 2rpx; |
|
|
|
height: 60rpx; |
|
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
|
margin: 0 24rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.action-section { |
|
|
|
.action-section { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex: 1; |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.action-text { |
|
|
|
.action-text { |
|
|
|
font-size: 26rpx; |
|
|
|
color: #ffffff; |
|
|
|
font-weight: bold; |
|
|
|
@ -713,19 +801,19 @@ |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
max-width: 200rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 添加点击反馈动画 |
|
|
|
.dynamic-island:active { |
|
|
|
// 添加点击反馈动画 |
|
|
|
.dynamic-island:active { |
|
|
|
transform: scale(0.98); |
|
|
|
|
|
|
|
&.fixed { |
|
|
|
transform: translateX(-50%) scale(0.98); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 从顶部滑入动画 |
|
|
|
@keyframes slideInFromTop { |
|
|
|
// 从顶部滑入动画 |
|
|
|
@keyframes slideInFromTop { |
|
|
|
0% { |
|
|
|
transform: translateX(-50%) translateY(-100%); |
|
|
|
opacity: 0; |
|
|
|
@ -735,9 +823,9 @@ |
|
|
|
transform: translateX(-50%) translateY(0); |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.compact-content { |
|
|
|
.compact-content { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
@ -746,9 +834,9 @@ |
|
|
|
opacity: 1; |
|
|
|
visibility: visible; |
|
|
|
transition: opacity 0.2s ease-in 0.1s, visibility 0s linear 0s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.compact-name { |
|
|
|
.compact-name { |
|
|
|
font-size: 27rpx; |
|
|
|
color: #333; |
|
|
|
font-weight: bold; |
|
|
|
@ -758,18 +846,18 @@ |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
max-width: 200rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.compact-avatar { |
|
|
|
.compact-avatar { |
|
|
|
width: 48rpx; |
|
|
|
height: 48rpx; |
|
|
|
border-radius: 50%; |
|
|
|
border: 2rpx solid rgba(0, 0, 0, 0.2); |
|
|
|
flex-shrink: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 动画定义 |
|
|
|
@keyframes pulse { |
|
|
|
// 动画定义 |
|
|
|
@keyframes pulse { |
|
|
|
0% { |
|
|
|
opacity: 1; |
|
|
|
transform: scale(1); |
|
|
|
@ -784,22 +872,22 @@ |
|
|
|
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 { |
|
|
|
} |
|
|
|
|
|
|
|
// 响应式适配 |
|
|
|
// @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 { |
|
|
|
@ -818,9 +906,9 @@ |
|
|
|
height: 46rpx; |
|
|
|
margin-right: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.ai-label { |
|
|
|
.ai-label { |
|
|
|
border: 1rpx solid; |
|
|
|
padding: 0rpx 15rpx; |
|
|
|
height: 40rpx; |
|
|
|
@ -832,12 +920,12 @@ |
|
|
|
color: #333333; |
|
|
|
display: inline; |
|
|
|
margin-top: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.ai-name { |
|
|
|
.ai-name { |
|
|
|
font-size: 27rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #ffffff; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
1054425342@qq.com
4 weeks ago