多酒款功能可用PC部分修改完成
This commit is contained in:
davy
parent
3a86a7a763
commit
40cfe0f9ff
@ -113,11 +113,11 @@
|
||||
/>
|
||||
</layout-tool>
|
||||
<!-- 主题设置 -->
|
||||
<layout-tool @click="openSetting">
|
||||
<!-- <layout-tool @click="openSetting">
|
||||
<el-icon>
|
||||
<MoreOutlined />
|
||||
</el-icon>
|
||||
</layout-tool>
|
||||
</layout-tool> -->
|
||||
</template>
|
||||
<!-- 页签栏右侧下拉菜单 -->
|
||||
<template v-if="tabBar && !tabInHeader" #tabExtra="{ active }">
|
||||
@ -163,7 +163,7 @@
|
||||
</template>
|
||||
</ele-pro-layout>
|
||||
<!-- 主题设置抽屉 -->
|
||||
<setting-drawer v-model="settingVisible" />
|
||||
<!-- <setting-drawer v-model="settingVisible" /> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@ -203,7 +203,7 @@
|
||||
import HeaderUser from './components/header-user.vue';
|
||||
import HeaderNotice from './components/header-notice.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' });
|
||||
|
||||
@ -267,7 +267,7 @@
|
||||
const isFullscreen = ref(false);
|
||||
|
||||
/** 是否显示主题设置抽屉 */
|
||||
const settingVisible = ref(false);
|
||||
// const settingVisible = ref(false);
|
||||
|
||||
/** 页签右键菜单 */
|
||||
const tabContext = ref([
|
||||
@ -397,9 +397,9 @@
|
||||
};
|
||||
|
||||
/** 打开主题设置抽屉 */
|
||||
const openSetting = () => {
|
||||
settingVisible.value = true;
|
||||
};
|
||||
// const openSetting = () => {
|
||||
// settingVisible.value = true;
|
||||
// };
|
||||
|
||||
/** 暗黑主题切换开关 */
|
||||
const darkSwitchRef = ref(null);
|
||||
|
||||
@ -474,9 +474,8 @@ const handleSingleBeerExport = async (exportData) => {
|
||||
// 传递完整的酒款数据，确保兼容所有模板组件
|
||||
const beerData = exportData.beerData
|
||||
|
||||
// 酒款信息组件 - 优化文字长度
|
||||
const beerName = beerData.beerName || ''
|
||||
params[`beer_name`] = optimizeTextLength(beerName, 8) // 限制8个字符以内
|
||||
// 酒款信息组件
|
||||
params[`beer_name`] = beerData.beerName || ''
|
||||
params[`beer_name_en`] = beerData.beerNameEn || beerData.beerEnglishName || ''
|
||||
params[`beer_image`] = beerData.beerCover || beerData.cover || ''
|
||||
// 风格优先级：custom_style > beer_style
|
||||
@ -618,17 +617,21 @@ onMounted(() => {
|
||||
<style scoped>
|
||||
.app-container {
|
||||
min-height: 100vh;
|
||||
height: auto; /* 允许高度自动扩展 */
|
||||
background: #f5f7fa;
|
||||
padding: 20px 0;
|
||||
padding: 20px 0 80px 0; /* 增加底部padding，为版权信息留出空间 */
|
||||
position: relative; /* 确保背景能够包含所有内容 */
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin: 0 auto 20px auto; /* 增加底部margin，与背景分离 */
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
position: relative; /* 确保相对定位 */
|
||||
z-index: 1; /* 确保内容在背景之上 */
|
||||
}
|
||||
|
||||
.operation-header {
|
||||
@ -654,6 +657,8 @@ onMounted(() => {
|
||||
|
||||
.tap-list {
|
||||
padding: 0;
|
||||
min-height: 200px; /* 确保列表区域有最小高度 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
@ -849,4 +854,24 @@ onMounted(() => {
|
||||
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>
|
||||
@ -64,12 +64,49 @@
|
||||
登录
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="large"
|
||||
type="default"
|
||||
class="register-btn"
|
||||
@click="showRegisterDialog"
|
||||
>
|
||||
注册
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- 手机号登录完 -->
|
||||
</div>
|
||||
</ele-card>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -103,6 +140,9 @@
|
||||
const countdown = ref(0);
|
||||
let timer = null;
|
||||
|
||||
/** 注册对话框显示状态 */
|
||||
const registerDialogVisible = ref(false);
|
||||
|
||||
/** 表单数据 */
|
||||
const form = reactive({
|
||||
phoneNumber: '',
|
||||
@ -141,6 +181,16 @@
|
||||
]
|
||||
});
|
||||
|
||||
// 显示注册对话框
|
||||
const showRegisterDialog = () => {
|
||||
registerDialogVisible.value = true;
|
||||
};
|
||||
|
||||
// 处理图片加载错误
|
||||
const handleImageError = () => {
|
||||
EleMessage.error('小程序码加载失败，请稍后重试');
|
||||
};
|
||||
|
||||
// 获取短信验证码
|
||||
const getSmsCode = async () => {
|
||||
if (!form.phoneNumber) {
|
||||
@ -377,6 +427,29 @@
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user