fix: index
This commit is contained in:
zzc
@@ -1,6 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="avatar-page">
|
<view class="avatar-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||||
<NavBar title="头像制作" />
|
<NavBar title="头像制作" />
|
||||||
|
|
||||||
|
<!-- 顶部步骤条 -->
|
||||||
|
<view class="top-steps">
|
||||||
|
<view class="step-bar">
|
||||||
|
<view
|
||||||
|
v-for="(tool, idx) in tools"
|
||||||
|
:key="idx"
|
||||||
|
class="step-item"
|
||||||
|
:class="{ active: activeTool === tool.type }"
|
||||||
|
@tap="openTool(tool.type)"
|
||||||
|
>
|
||||||
|
<view class="step-num-wrap">
|
||||||
|
<view class="step-line" v-if="idx > 0"></view>
|
||||||
|
<view class="step-num">
|
||||||
|
<text v-if="activeTool === tool.type && showPanel">{{
|
||||||
|
tool.icon
|
||||||
|
}}</text>
|
||||||
|
<text v-else>{{ tool.step }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="step-text">{{ tool.text }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="preview-card">
|
<view class="preview-card">
|
||||||
<view class="preview-square">
|
<view class="preview-square">
|
||||||
<image
|
<image
|
||||||
@@ -38,82 +63,108 @@
|
|||||||
<button class="btn primary" open-type="share">分享给朋友</button>
|
<button class="btn primary" open-type="share">分享给朋友</button>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="section">
|
<!-- 弹出编辑面板 -->
|
||||||
<view class="section-header">
|
<view class="panel-container" :class="{ show: showPanel }">
|
||||||
<text class="section-title">选择头像</text>
|
<view class="panel-mask" @tap="closePanel"></view>
|
||||||
<view class="more-btn" @tap="openMorePopup">
|
<view class="panel-content">
|
||||||
<text>查看更多</text>
|
<view class="panel-handle" @tap="closePanel"></view>
|
||||||
<text class="arrow">›</text>
|
|
||||||
|
<!-- 头像选择区 -->
|
||||||
|
<view v-if="activeTool === 'avatar'" class="section">
|
||||||
|
<view class="section-title">选择头像</view>
|
||||||
|
<scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
|
||||||
|
<view class="avatar-list">
|
||||||
|
<view class="avatar-card upload-card">
|
||||||
|
<button
|
||||||
|
class="wechat-avatar-btn"
|
||||||
|
open-type="chooseAvatar"
|
||||||
|
@chooseavatar="onChooseAvatar"
|
||||||
|
>
|
||||||
|
<view class="upload-icon">📷</view>
|
||||||
|
<text class="upload-text">微信头像</text>
|
||||||
|
</button>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
v-for="(item, i) in systemAvatars"
|
||||||
|
:key="i"
|
||||||
|
class="avatar-card"
|
||||||
|
:class="{ active: currentAvatar?.id === item.id }"
|
||||||
|
@tap="currentAvatar = item"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
:src="item.imageUrl"
|
||||||
|
class="avatar-thumb"
|
||||||
|
mode="aspectFill"
|
||||||
|
/>
|
||||||
|
<view v-if="currentAvatar?.id === item.id" class="check"
|
||||||
|
>✔</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
<view class="avatar-card more-card" @tap="openMorePopup">
|
||||||
|
<view class="upload-icon">🔍</view>
|
||||||
|
<text class="upload-text">更多</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
|
||||||
<scroll-view scroll-x class="avatar-scroll" show-scrollbar="false">
|
<!-- 头像框选择区 -->
|
||||||
<view class="avatar-list">
|
<view v-if="activeTool === 'frame'" class="section">
|
||||||
<view class="avatar-card upload-card">
|
<view class="section-title">选择头像框</view>
|
||||||
<button
|
<scroll-view scroll-y class="panel-grid-scroll">
|
||||||
class="wechat-avatar-btn"
|
<view class="grid">
|
||||||
open-type="chooseAvatar"
|
<view
|
||||||
@chooseavatar="onChooseAvatar"
|
v-for="(frame, i) in frames"
|
||||||
|
:key="i"
|
||||||
|
class="grid-item"
|
||||||
|
:class="{ active: selectedFrame?.id === frame.id }"
|
||||||
|
@tap="toggleFrame(frame)"
|
||||||
|
>
|
||||||
|
<image
|
||||||
|
:src="frame.imageUrl"
|
||||||
|
class="grid-img"
|
||||||
|
mode="aspectFill"
|
||||||
|
/>
|
||||||
|
<view v-if="selectedFrame?.id === frame.id" class="check"
|
||||||
|
>✔</view
|
||||||
|
>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-if="frameLoading" class="loading-more">加载中...</view>
|
||||||
|
<view v-else-if="!frameHasNext && frames.length > 0" class="no-more"
|
||||||
|
>没有更多了</view
|
||||||
>
|
>
|
||||||
<view class="upload-icon">📷</view>
|
</scroll-view>
|
||||||
<text class="upload-text">微信头像</text>
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
<view
|
|
||||||
v-for="(item, i) in systemAvatars"
|
|
||||||
:key="i"
|
|
||||||
class="avatar-card"
|
|
||||||
:class="{ active: currentAvatar === item }"
|
|
||||||
@tap="currentAvatar = item"
|
|
||||||
>
|
|
||||||
<image
|
|
||||||
:src="item.imageUrl"
|
|
||||||
class="avatar-thumb"
|
|
||||||
mode="aspectFill"
|
|
||||||
/>
|
|
||||||
<view v-if="currentAvatar === item" class="check">✔</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="tabs">
|
<!-- 挂饰选择区 -->
|
||||||
<view
|
<view v-if="activeTool === 'decor'" class="section">
|
||||||
class="tab"
|
<view class="section-title">选择挂饰配件</view>
|
||||||
:class="{ active: activeTab === 'frame' }"
|
<scroll-view scroll-y class="panel-grid-scroll">
|
||||||
@tap="activeTab = 'frame'"
|
<view class="grid">
|
||||||
>头像框</view
|
<view
|
||||||
>
|
v-for="(decor, i) in decors"
|
||||||
<view
|
:key="i"
|
||||||
class="tab"
|
class="grid-item"
|
||||||
:class="{ active: activeTab === 'decor' }"
|
:class="{ active: selectedDecor?.id === decor.id }"
|
||||||
@tap="activeTab = 'decor'"
|
@tap="toggleDecor(decor)"
|
||||||
>挂饰配件</view
|
>
|
||||||
>
|
<image
|
||||||
</view>
|
:src="decor.imageUrl"
|
||||||
|
class="grid-img"
|
||||||
<view v-if="activeTab === 'frame'" class="grid">
|
mode="aspectFit"
|
||||||
<view
|
/>
|
||||||
v-for="(frame, i) in frames"
|
<view v-if="selectedDecor?.id === decor.id" class="check"
|
||||||
:key="i"
|
>✔</view
|
||||||
class="grid-item"
|
>
|
||||||
:class="{ active: selectedFrame === frame }"
|
</view>
|
||||||
@tap="toggleFrame(frame)"
|
</view>
|
||||||
>
|
<view v-if="decorLoading" class="loading-more">加载中...</view>
|
||||||
<image :src="frame.imageUrl" class="grid-img" mode="aspectFill" />
|
<view v-else-if="!decorHasNext && decors.length > 0" class="no-more"
|
||||||
<view v-if="selectedFrame === frame" class="check">✔</view>
|
>没有更多了</view
|
||||||
</view>
|
>
|
||||||
</view>
|
</scroll-view>
|
||||||
|
</view>
|
||||||
<view v-else class="grid">
|
|
||||||
<view
|
|
||||||
v-for="(decor, i) in decors"
|
|
||||||
:key="i"
|
|
||||||
class="grid-item"
|
|
||||||
:class="{ active: selectedDecor === decor }"
|
|
||||||
@tap="toggleDecor(decor)"
|
|
||||||
>
|
|
||||||
<image :src="decor.imageUrl" class="grid-img" mode="aspectFit" />
|
|
||||||
<view v-if="selectedDecor === decor" class="check">✔</view>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -182,6 +233,7 @@ import {
|
|||||||
uploadImage,
|
uploadImage,
|
||||||
} from "@/utils/common.js";
|
} from "@/utils/common.js";
|
||||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||||
|
import { getBavBarHeight } from "@/utils/system";
|
||||||
|
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
const loginPopupRef = ref(null);
|
const loginPopupRef = ref(null);
|
||||||
@@ -192,6 +244,24 @@ const systemAvatars = ref([]);
|
|||||||
const frames = ref([]);
|
const frames = ref([]);
|
||||||
const decors = ref([]);
|
const decors = ref([]);
|
||||||
|
|
||||||
|
// Panel and steps logic
|
||||||
|
const showPanel = ref(false);
|
||||||
|
const activeTool = ref("avatar");
|
||||||
|
const tools = [
|
||||||
|
{ step: "01", text: "头像", type: "avatar", icon: "👤" },
|
||||||
|
{ step: "02", text: "头像框", type: "frame", icon: "🖼️" },
|
||||||
|
{ step: "03", text: "挂饰配件", type: "decor", icon: "✨" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const openTool = (type) => {
|
||||||
|
activeTool.value = type;
|
||||||
|
showPanel.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const closePanel = () => {
|
||||||
|
showPanel.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
// Pagination states
|
// Pagination states
|
||||||
const framePage = ref(1);
|
const framePage = ref(1);
|
||||||
const frameHasNext = ref(true);
|
const frameHasNext = ref(true);
|
||||||
@@ -204,7 +274,6 @@ const decorLoading = ref(false);
|
|||||||
const currentAvatar = ref(null);
|
const currentAvatar = ref(null);
|
||||||
const selectedFrame = ref(null);
|
const selectedFrame = ref(null);
|
||||||
const selectedDecor = ref(null);
|
const selectedDecor = ref(null);
|
||||||
const activeTab = ref("frame");
|
|
||||||
|
|
||||||
// More Popup logic
|
// More Popup logic
|
||||||
const morePopup = ref(null);
|
const morePopup = ref(null);
|
||||||
@@ -299,11 +368,13 @@ onLoad((options) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
if (options.type === "frame") {
|
if (options.type === "frame") {
|
||||||
activeTab.value = "frame";
|
activeTool.value = "frame";
|
||||||
selectedFrame.value = recommendItem;
|
selectedFrame.value = recommendItem;
|
||||||
|
showPanel.value = true;
|
||||||
} else if (options.type === "decor") {
|
} else if (options.type === "decor") {
|
||||||
activeTab.value = "decor";
|
activeTool.value = "decor";
|
||||||
selectedDecor.value = recommendItem;
|
selectedDecor.value = recommendItem;
|
||||||
|
showPanel.value = true;
|
||||||
} else if (options.type === "avatar") {
|
} else if (options.type === "avatar") {
|
||||||
currentAvatar.value = recommendItem;
|
currentAvatar.value = recommendItem;
|
||||||
}
|
}
|
||||||
@@ -311,10 +382,12 @@ onLoad((options) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
onReachBottom(() => {
|
onReachBottom(() => {
|
||||||
if (activeTab.value === "frame") {
|
if (showPanel.value) {
|
||||||
loadFrames();
|
if (activeTool.value === "frame") {
|
||||||
} else if (activeTab.value === "decor") {
|
loadFrames();
|
||||||
loadDecors();
|
} else if (activeTool.value === "decor") {
|
||||||
|
loadDecors();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -738,317 +811,425 @@ const loadImage = (url) => {
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.avatar-page {
|
.avatar-page {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
background: #f8f8f8;
|
||||||
|
padding-bottom: 200rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-steps {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
box-sizing: border-box;
|
padding: 30rpx 0;
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
margin-bottom: 20rpx;
|
||||||
}
|
position: sticky;
|
||||||
.preview-card {
|
z-index: 100;
|
||||||
margin: 20rpx 24rpx;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 24rpx;
|
|
||||||
padding: 24rpx;
|
|
||||||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
|
||||||
.preview-square {
|
|
||||||
width: 600rpx;
|
|
||||||
height: 600rpx;
|
|
||||||
margin: 0 auto;
|
|
||||||
border-radius: 24rpx;
|
|
||||||
background: #f5dfc9;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.avatar-img {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.frame-img {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.decor-img {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 240rpx;
|
|
||||||
height: 240rpx;
|
|
||||||
/* 移除原有的 transform 和 center positioning，改为由 inline style 控制 */
|
|
||||||
}
|
|
||||||
.preview-tip {
|
|
||||||
display: block;
|
|
||||||
text-align: center;
|
|
||||||
color: #999;
|
|
||||||
font-size: 22rpx;
|
|
||||||
margin-top: 12rpx;
|
|
||||||
}
|
|
||||||
.interaction-tip {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #ff3b30;
|
|
||||||
background: #fff0f0;
|
|
||||||
padding: 12rpx 32rpx;
|
|
||||||
border-radius: 999rpx;
|
|
||||||
width: fit-content;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
.tip-divider {
|
|
||||||
color: #ffccc7;
|
|
||||||
margin: 0 4rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
.step-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 48rpx;
|
justify-content: center;
|
||||||
gap: 32rpx;
|
align-items: center;
|
||||||
margin-top: 32rpx;
|
padding: 0 40rpx;
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
flex: 1;
|
|
||||||
height: 88rpx;
|
|
||||||
border-radius: 999rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: none;
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
.btn::after {
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
margin-top: 24rpx;
|
|
||||||
padding: 0 24rpx;
|
|
||||||
}
|
|
||||||
.section-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 12rpx;
|
|
||||||
}
|
|
||||||
.section-title {
|
|
||||||
font-size: 26rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.avatar-scroll {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.avatar-list {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.avatar-card {
|
|
||||||
width: 160rpx;
|
|
||||||
height: 160rpx;
|
|
||||||
border-radius: 16rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
position: relative;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
outline: 4rpx solid #ff3b30;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.upload-card {
|
.step-item {
|
||||||
background: #fff5f5;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
position: relative;
|
||||||
border: 2rpx dashed #ffccc7;
|
flex: 1;
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.wechat-avatar-btn {
|
.step-num-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-line {
|
||||||
|
position: absolute;
|
||||||
|
left: -50%;
|
||||||
|
right: 50%;
|
||||||
|
top: 20rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
background: #eee;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-num {
|
||||||
|
width: 40rpx;
|
||||||
|
height: 40rpx;
|
||||||
|
background: #f5f5f5;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #999;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
.step-num {
|
||||||
|
background: #ff3b30;
|
||||||
|
color: #fff;
|
||||||
|
transform: scale(1.2);
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(255, 59, 48, 0.3);
|
||||||
|
}
|
||||||
|
.step-text {
|
||||||
|
color: #ff3b30;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-card {
|
||||||
|
background: #fff;
|
||||||
|
margin: 0 30rpx 30rpx;
|
||||||
|
padding: 40rpx;
|
||||||
|
border-radius: 32rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
|
||||||
|
|
||||||
|
.preview-square {
|
||||||
|
width: 600rpx;
|
||||||
|
height: 600rpx;
|
||||||
|
background: #f0f0f0;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 0;
|
}
|
||||||
margin: 0;
|
|
||||||
background: transparent;
|
.frame-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.decor-img {
|
||||||
|
position: absolute;
|
||||||
|
width: 240rpx;
|
||||||
|
height: 240rpx;
|
||||||
|
z-index: 3;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.interaction-tip {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #ff3b30;
|
||||||
|
background: rgba(255, 59, 48, 0.1);
|
||||||
|
padding: 10rpx 30rpx;
|
||||||
|
border-radius: 100rpx;
|
||||||
|
|
||||||
|
.tip-divider {
|
||||||
|
margin: 0 15rpx;
|
||||||
|
opacity: 0.3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview-tip {
|
||||||
|
margin-top: 30rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
padding: 0 30rpx;
|
||||||
|
display: flex;
|
||||||
|
gap: 20rpx;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 88rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
&.primary {
|
||||||
|
background: #ff3b30;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.secondary {
|
||||||
|
background: #fff;
|
||||||
|
color: #333;
|
||||||
|
border: 2rpx solid #eee;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 编辑面板样式 */
|
||||||
|
.panel-container {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&.show {
|
||||||
|
visibility: visible;
|
||||||
|
.panel-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.panel-content {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-mask {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-content {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 40rpx 40rpx 0 0;
|
||||||
|
padding: 30rpx;
|
||||||
|
transform: translateY(100%);
|
||||||
|
transition: transform 0.3s;
|
||||||
|
max-height: 70vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-handle {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
margin: 0 auto 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-grid-scroll {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-scroll {
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.avatar-list {
|
||||||
|
display: inline-flex;
|
||||||
|
padding: 10rpx 0;
|
||||||
|
gap: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-card {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
border: 4rpx solid transparent;
|
||||||
|
background: #f5f5f5;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-color: #ff3b30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-thumb {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #ff3b30;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx 8rpx;
|
||||||
|
border-radius: 0 0 0 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.upload-card,
|
||||||
|
&.more-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
line-height: normal;
|
background: #fdf2f2;
|
||||||
border: none;
|
border: 2rpx dashed #ffcbcb;
|
||||||
|
|
||||||
&::after {
|
.wechat-avatar-btn {
|
||||||
border: none;
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 0;
|
||||||
|
background: transparent;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.upload-icon {
|
.upload-icon {
|
||||||
font-size: 48rpx;
|
font-size: 40rpx;
|
||||||
margin-bottom: 8rpx;
|
margin-bottom: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-text {
|
.upload-text {
|
||||||
font-size: 22rpx;
|
font-size: 20rpx;
|
||||||
color: #ff3b30;
|
color: #ff3b30;
|
||||||
font-weight: 500;
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar-thumb {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.check {
|
|
||||||
position: absolute;
|
|
||||||
right: 8rpx;
|
|
||||||
top: 8rpx;
|
|
||||||
width: 32rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
background: #ff3b30;
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 22rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
display: flex;
|
|
||||||
padding: 16rpx 24rpx 8rpx;
|
|
||||||
gap: 12rpx;
|
|
||||||
}
|
|
||||||
.tab {
|
|
||||||
flex: 1;
|
|
||||||
text-align: center;
|
|
||||||
background: #f7f7f7;
|
|
||||||
border-radius: 999rpx;
|
|
||||||
height: 64rpx;
|
|
||||||
line-height: 64rpx;
|
|
||||||
font-size: 26rpx;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
.tab.active {
|
|
||||||
background: #fff0f0;
|
|
||||||
color: #ff3b30;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(4, 1fr);
|
||||||
gap: 16rpx;
|
gap: 20rpx;
|
||||||
padding: 8rpx 24rpx 24rpx;
|
|
||||||
}
|
.grid-item {
|
||||||
.grid-item {
|
aspect-ratio: 1;
|
||||||
height: 200rpx;
|
background: #f5f5f5;
|
||||||
border-radius: 16rpx;
|
border-radius: 20rpx;
|
||||||
background: #fff;
|
overflow: hidden;
|
||||||
overflow: hidden;
|
position: relative;
|
||||||
position: relative;
|
border: 4rpx solid transparent;
|
||||||
box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
|
|
||||||
}
|
&.active {
|
||||||
.grid-item.active {
|
border-color: #ff3b30;
|
||||||
outline: 4rpx solid #ff3b30;
|
}
|
||||||
}
|
|
||||||
.grid-img {
|
.grid-img {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
background: #ff3b30;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 4rpx 8rpx;
|
||||||
|
border-radius: 0 0 0 16rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn.primary {
|
.loading-more,
|
||||||
background: #ff3b30;
|
.no-more {
|
||||||
color: #fff;
|
text-align: center;
|
||||||
box-shadow: 0 12rpx 24rpx rgba(255, 59, 48, 0.35);
|
font-size: 24rpx;
|
||||||
}
|
color: #999;
|
||||||
.btn.secondary {
|
padding: 30rpx 0;
|
||||||
background: #f5f5f5;
|
|
||||||
color: #333;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hidden-canvas {
|
.hidden-canvas {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: -9999px;
|
left: -9999px;
|
||||||
top: -9999px;
|
top: -9999px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* More Popup Styles */
|
/* 更多弹窗样式保持不变 */
|
||||||
.more-btn {
|
|
||||||
margin-left: auto;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.arrow {
|
|
||||||
font-size: 32rpx;
|
|
||||||
margin-left: 4rpx;
|
|
||||||
line-height: 1;
|
|
||||||
position: relative;
|
|
||||||
top: -2rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popup-content {
|
.popup-content {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 24rpx 24rpx 0 0;
|
border-radius: 32rpx 32rpx 0 0;
|
||||||
height: 60vh;
|
padding: 30rpx;
|
||||||
display: flex;
|
max-height: 80vh;
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden;
|
.popup-header {
|
||||||
}
|
display: flex;
|
||||||
.popup-header {
|
justify-content: space-between;
|
||||||
padding: 32rpx;
|
align-items: center;
|
||||||
display: flex;
|
margin-bottom: 30rpx;
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
.popup-title {
|
||||||
position: relative;
|
font-size: 32rpx;
|
||||||
border-bottom: 2rpx solid #f5f5f5;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
.popup-title {
|
|
||||||
font-size: 32rpx;
|
.close-btn {
|
||||||
font-weight: 600;
|
font-size: 40rpx;
|
||||||
}
|
color: #999;
|
||||||
.close-btn {
|
padding: 10rpx;
|
||||||
position: absolute;
|
}
|
||||||
right: 32rpx;
|
}
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
.popup-scroll {
|
||||||
font-size: 32rpx;
|
height: 60vh;
|
||||||
color: #999;
|
}
|
||||||
padding: 10rpx;
|
|
||||||
}
|
.popup-grid {
|
||||||
.popup-scroll {
|
display: grid;
|
||||||
flex: 1;
|
grid-template-columns: repeat(3, 1fr);
|
||||||
height: 0;
|
gap: 20rpx;
|
||||||
}
|
}
|
||||||
.popup-grid {
|
|
||||||
display: grid;
|
.popup-item {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
aspect-ratio: 1;
|
||||||
gap: 20rpx;
|
border-radius: 20rpx;
|
||||||
padding: 24rpx;
|
overflow: hidden;
|
||||||
}
|
background: #f5f5f5;
|
||||||
.popup-item {
|
|
||||||
aspect-ratio: 1;
|
.popup-img {
|
||||||
border-radius: 16rpx;
|
width: 100%;
|
||||||
overflow: hidden;
|
height: 100%;
|
||||||
background: #f5f5f5;
|
}
|
||||||
}
|
}
|
||||||
.popup-img {
|
|
||||||
width: 100%;
|
.loading-text,
|
||||||
height: 100%;
|
.no-more-text {
|
||||||
}
|
text-align: center;
|
||||||
.loading-text,
|
font-size: 24rpx;
|
||||||
.no-more-text {
|
color: #999;
|
||||||
text-align: center;
|
padding: 30rpx 0;
|
||||||
padding: 24rpx;
|
}
|
||||||
color: #999;
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
"}]} ```
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
const BASE_URL = "https://api.ai-meng.com";
|
// const BASE_URL = "https://api.ai-meng.com";
|
||||||
// const BASE_URL = 'http://127.0.0.1:3999'
|
// const BASE_URL = 'http://127.0.0.1:3999'
|
||||||
// const BASE_URL = "http://192.168.1.3:3999";
|
const BASE_URL = "http://192.168.1.3:3999";
|
||||||
// const BASE_URL = "http://192.168.31.253:3999";
|
// const BASE_URL = "http://192.168.31.253:3999";
|
||||||
import { useUserStore } from "@/stores/user";
|
import { useUserStore } from "@/stores/user";
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user