You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
837 lines
19 KiB
837 lines
19 KiB
<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/20250826/92b0a21e9125fc21ca294a408bf3508f.png"
|
|
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="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>
|
|
<!-- <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;">
|
|
查看您的交响数据文化资产行
|
|
</view>
|
|
<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-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-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>
|
|
<view class="time-reward-stats">
|
|
<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>
|
|
</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">
|
|
<text class="time-reward-title">时间奖励</text>
|
|
<view class="time-reward-stats">
|
|
<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-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" @click="toPoint"
|
|
style="margin-top: 15rpx;font-weight: bold;font-size: 26rpx;">
|
|
积分:{{totalPoints||0}}<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||0: 0
|
|
}}h
|
|
</view>
|
|
<view class="">
|
|
<image style="width: 22rpx;height: 22rpx;margin-right: 15rpx;"
|
|
:src="showImg('/uploads/20250822/c8ee7615823a1ffaba400a4d5746de9a.png')">
|
|
</image>
|
|
点赞:0
|
|
</view>
|
|
<view class="">
|
|
<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"
|
|
src="https://epic.js-dyyj.com/uploads/20250826/92b0a21e9125fc21ca294a408bf3508f.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/20250826/92b0a21e9125fc21ca294a408bf3508f.png"
|
|
mode="aspectFill"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "DynamicIsland",
|
|
props: {
|
|
isCompact: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
styleType: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
|
|
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: {},
|
|
totalPoints: 0
|
|
};
|
|
},
|
|
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'
|
|
})
|
|
},
|
|
toTime() {
|
|
uni.switchTab({
|
|
url: '/pages/index/timeShopBank'
|
|
})
|
|
},
|
|
getCompactName() {
|
|
// 从用户信息中获取昵称
|
|
if (this.userInfo && this.userInfo.nickname) {
|
|
return this.userInfo.nickname;
|
|
}
|
|
return "用户";
|
|
},
|
|
toPoint() {
|
|
uni.navigateTo({
|
|
url: '/subPackages/points/index'
|
|
})
|
|
},
|
|
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}，欢迎回来～`;
|
|
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 = {};
|
|
}
|
|
},
|
|
toWebView() {
|
|
// uni.navigateTo({
|
|
// url: "/subPackages/webPage/webPage?url=" +
|
|
// "https://des.dayunyuanjian.cn/dist/#/",
|
|
// });
|
|
uni.navigateTo({
|
|
url: '/subPackages/other/evita?id=0'
|
|
})
|
|
},
|
|
|
|
toDesInfo() {
|
|
uni.navigateTo({
|
|
url: '/subPackages/other/introduction'
|
|
})
|
|
},
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
/* 灵动岛占位区域样式 - 始终存在但控制可见性 */
|
|
.dynamic-island-placeholder {
|
|
width: 100%;
|
|
background: transparent;
|
|
position: relative;
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease;
|
|
// padding: 24rpx 0;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.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;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
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;
|
|
}
|
|
}
|
|
|
|
.ai-label {
|
|
border: 1rpx solid;
|
|
padding: 0rpx 15rpx;
|
|
height: 40rpx;
|
|
line-height: 38rpx;
|
|
font-weight: bold;
|
|
font-size: 20rpx;
|
|
border-radius: 4rpx;
|
|
border-color: #333333;
|
|
color: #333333;
|
|
display: inline;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.ai-name {
|
|
font-size: 27rpx;
|
|
font-weight: bold;
|
|
color: #ffffff;
|
|
margin-left: 10rpx;
|
|
}
|
|
</style>
|