多酒款功能可用PC部分修改完成
This commit is contained in:
parent
3a86a7a763
commit
40cfe0f9ff
@ -113,11 +113,11 @@
|
|||||||
/>
|
/>
|
||||||
</layout-tool>
|
</layout-tool>
|
||||||
<!-- 主题设置 -->
|
<!-- 主题设置 -->
|
||||||
<layout-tool @click="openSetting">
|
<!-- <layout-tool @click="openSetting">
|
||||||
<el-icon>
|
<el-icon>
|
||||||
<MoreOutlined />
|
<MoreOutlined />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</layout-tool>
|
</layout-tool> -->
|
||||||
</template>
|
</template>
|
||||||
<!-- 页签栏右侧下拉菜单 -->
|
<!-- 页签栏右侧下拉菜单 -->
|
||||||
<template v-if="tabBar && !tabInHeader" #tabExtra="{ active }">
|
<template v-if="tabBar && !tabInHeader" #tabExtra="{ active }">
|
||||||
@ -163,7 +163,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</ele-pro-layout>
|
</ele-pro-layout>
|
||||||
<!-- 主题设置抽屉 -->
|
<!-- 主题设置抽屉 -->
|
||||||
<setting-drawer v-model="settingVisible" />
|
<!-- <setting-drawer v-model="settingVisible" /> -->
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -203,7 +203,7 @@
|
|||||||
import HeaderUser from './components/header-user.vue';
|
import HeaderUser from './components/header-user.vue';
|
||||||
import HeaderNotice from './components/header-notice.vue';
|
import HeaderNotice from './components/header-notice.vue';
|
||||||
import PageFooter from './components/page-footer.vue';
|
import PageFooter from './components/page-footer.vue';
|
||||||
import SettingDrawer from './components/setting-drawer.vue';
|
// import SettingDrawer from './components/setting-drawer.vue';
|
||||||
|
|
||||||
defineOptions({ name: 'Layout' });
|
defineOptions({ name: 'Layout' });
|
||||||
|
|
||||||
@ -267,7 +267,7 @@
|
|||||||
const isFullscreen = ref(false);
|
const isFullscreen = ref(false);
|
||||||
|
|
||||||
/** 是否显示主题设置抽屉 */
|
/** 是否显示主题设置抽屉 */
|
||||||
const settingVisible = ref(false);
|
// const settingVisible = ref(false);
|
||||||
|
|
||||||
/** 页签右键菜单 */
|
/** 页签右键菜单 */
|
||||||
const tabContext = ref([
|
const tabContext = ref([
|
||||||
@ -397,9 +397,9 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
/** 打开主题设置抽屉 */
|
/** 打开主题设置抽屉 */
|
||||||
const openSetting = () => {
|
// const openSetting = () => {
|
||||||
settingVisible.value = true;
|
// settingVisible.value = true;
|
||||||
};
|
// };
|
||||||
|
|
||||||
/** 暗黑主题切换开关 */
|
/** 暗黑主题切换开关 */
|
||||||
const darkSwitchRef = ref(null);
|
const darkSwitchRef = ref(null);
|
||||||
|
|||||||
@ -474,9 +474,8 @@ const handleSingleBeerExport = async (exportData) => {
|
|||||||
// 传递完整的酒款数据,确保兼容所有模板组件
|
// 传递完整的酒款数据,确保兼容所有模板组件
|
||||||
const beerData = exportData.beerData
|
const beerData = exportData.beerData
|
||||||
|
|
||||||
// 酒款信息组件 - 优化文字长度
|
// 酒款信息组件
|
||||||
const beerName = beerData.beerName || ''
|
params[`beer_name`] = beerData.beerName || ''
|
||||||
params[`beer_name`] = optimizeTextLength(beerName, 8) // 限制8个字符以内
|
|
||||||
params[`beer_name_en`] = beerData.beerNameEn || beerData.beerEnglishName || ''
|
params[`beer_name_en`] = beerData.beerNameEn || beerData.beerEnglishName || ''
|
||||||
params[`beer_image`] = beerData.beerCover || beerData.cover || ''
|
params[`beer_image`] = beerData.beerCover || beerData.cover || ''
|
||||||
// 风格优先级:custom_style > beer_style
|
// 风格优先级:custom_style > beer_style
|
||||||
@ -618,17 +617,21 @@ onMounted(() => {
|
|||||||
<style scoped>
|
<style scoped>
|
||||||
.app-container {
|
.app-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
height: auto; /* 允许高度自动扩展 */
|
||||||
background: #f5f7fa;
|
background: #f5f7fa;
|
||||||
padding: 20px 0;
|
padding: 20px 0 80px 0; /* 增加底部padding,为版权信息留出空间 */
|
||||||
|
position: relative; /* 确保背景能够包含所有内容 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-wrapper {
|
.content-wrapper {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 0 auto;
|
margin: 0 auto 20px auto; /* 增加底部margin,与背景分离 */
|
||||||
background: white;
|
background: white;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
position: relative; /* 确保相对定位 */
|
||||||
|
z-index: 1; /* 确保内容在背景之上 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.operation-header {
|
.operation-header {
|
||||||
@ -654,6 +657,8 @@ onMounted(() => {
|
|||||||
|
|
||||||
.tap-list {
|
.tap-list {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
min-height: 200px; /* 确保列表区域有最小高度 */
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.empty-state {
|
.empty-state {
|
||||||
@ -849,4 +854,24 @@ onMounted(() => {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 确保页面整体布局正确 */
|
||||||
|
:deep(.ele-pro-body) {
|
||||||
|
min-height: auto !important;
|
||||||
|
height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保主内容区域能够正确扩展 */
|
||||||
|
:deep(.ele-pro-layout-body) {
|
||||||
|
min-height: auto !important;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 确保路由视图容器能够正确扩展 */
|
||||||
|
:deep(.router-view-wrapper) {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -64,12 +64,49 @@
|
|||||||
登录
|
登录
|
||||||
</el-button>
|
</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
size="large"
|
||||||
|
type="default"
|
||||||
|
class="register-btn"
|
||||||
|
@click="showRegisterDialog"
|
||||||
|
>
|
||||||
|
注册
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<!-- 手机号登录完 -->
|
<!-- 手机号登录完 -->
|
||||||
</div>
|
</div>
|
||||||
</ele-card>
|
</ele-card>
|
||||||
</div>
|
</div>
|
||||||
<PageFooter style="padding-top: 0" />
|
<PageFooter style="padding-top: 0" />
|
||||||
|
|
||||||
|
<!-- 微信小程序注册对话框 -->
|
||||||
|
<el-dialog
|
||||||
|
v-model="registerDialogVisible"
|
||||||
|
title="微信扫码注册"
|
||||||
|
width="400px"
|
||||||
|
center
|
||||||
|
:show-close="true"
|
||||||
|
>
|
||||||
|
<div class="register-dialog-content">
|
||||||
|
<div class="qr-code-container">
|
||||||
|
<img
|
||||||
|
src="https://oss.beerape.com/qr.png"
|
||||||
|
alt="微信小程序码"
|
||||||
|
class="qr-code-image"
|
||||||
|
@error="handleImageError"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="register-tips">
|
||||||
|
<p class="tip-title">使用微信扫一扫</p>
|
||||||
|
<p class="tip-subtitle">扫码进入小程序完成注册认证</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="registerDialogVisible = false">关闭</el-button>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -103,6 +140,9 @@
|
|||||||
const countdown = ref(0);
|
const countdown = ref(0);
|
||||||
let timer = null;
|
let timer = null;
|
||||||
|
|
||||||
|
/** 注册对话框显示状态 */
|
||||||
|
const registerDialogVisible = ref(false);
|
||||||
|
|
||||||
/** 表单数据 */
|
/** 表单数据 */
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
phoneNumber: '',
|
phoneNumber: '',
|
||||||
@ -141,6 +181,16 @@
|
|||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 显示注册对话框
|
||||||
|
const showRegisterDialog = () => {
|
||||||
|
registerDialogVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 处理图片加载错误
|
||||||
|
const handleImageError = () => {
|
||||||
|
EleMessage.error('小程序码加载失败,请稍后重试');
|
||||||
|
};
|
||||||
|
|
||||||
// 获取短信验证码
|
// 获取短信验证码
|
||||||
const getSmsCode = async () => {
|
const getSmsCode = async () => {
|
||||||
if (!form.phoneNumber) {
|
if (!form.phoneNumber) {
|
||||||
@ -377,6 +427,29 @@
|
|||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.register-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 44px;
|
||||||
|
margin-top: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: transparent;
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
color: #606266;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: #1681fd;
|
||||||
|
color: #1681fd;
|
||||||
|
background: rgba(22, 129, 253, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
transform: translateY(1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 短信验证码 */
|
/* 短信验证码 */
|
||||||
@ -545,4 +618,67 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 注册对话框样式 */
|
||||||
|
.register-dialog-content {
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.qr-code-image {
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.register-tips {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-title {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tip-subtitle {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #909399;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 对话框标题样式优化 */
|
||||||
|
:deep(.el-dialog__header) {
|
||||||
|
padding: 20px 20px 10px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-dialog__body) {
|
||||||
|
padding: 10px 20px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-dialog__footer) {
|
||||||
|
padding: 10px 20px 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user