913 lines
21 KiB
Vue
913 lines
21 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- Header Navigation -->
|
||
<view class="header-nav">
|
||
<view class="nav-content">
|
||
<view class="nav-title">存客宝</view>
|
||
<view class="nav-avatar" @click="goToLogin">
|
||
<image class="avatar-img" src="/static/tabbar/me.png" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- Hero Section -->
|
||
<view class="hero-section">
|
||
<view class="hero-content">
|
||
<view class="badge">场景化客户留存 SaaS 工具</view>
|
||
<view class="hero-title">
|
||
<text class="title-main">存客宝</text>
|
||
<text class="title-sub">私域流量运营专家</text>
|
||
</view>
|
||
<view class="hero-desc">
|
||
专注于场景化客户留存的私域流量运营工具，帮助中小企业将多平台公域流量高效转化为私域客户资产，通过数据驱动的精细化运营提升客户粘性和生命周期价值
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 立即体验按钮 -->
|
||
<view class="cta-button-section">
|
||
<button class="cta-button" @click="showDialogBtn">
|
||
<text class="button-text">立即体验</text>
|
||
<text class="arrow">→</text>
|
||
</button>
|
||
</view>
|
||
|
||
<!-- Core Values Section -->
|
||
<view class="section values-section">
|
||
<view class="section-header">
|
||
<view class="section-title">核心价值与优势</view>
|
||
<view class="section-desc">通过统一管理、智能触达和数据驱动，全面提升企业私域运营效率</view>
|
||
</view>
|
||
|
||
<view class="values-grid">
|
||
<view class="value-card">
|
||
<view class="card-icon users-icon">👥</view>
|
||
<view class="card-title">统一管理 (存客)</view>
|
||
<view class="card-desc">一站式平台统一存储、管理和追踪来自各渠道的客户数据及关联的微信号状态，告别数据分散管理困难</view>
|
||
</view>
|
||
|
||
<view class="value-card">
|
||
<view class="card-icon target-icon">🎯</view>
|
||
<view class="card-title">智能触达 (获客)</view>
|
||
<view class="card-desc">场景化获客配置打通线上线下流量入口，利用AI智能内容库和多平台工作台高效触达转化客户</view>
|
||
</view>
|
||
|
||
<view class="value-card">
|
||
<view class="card-icon chart-icon">📊</view>
|
||
<view class="card-title">数据驱动 (宝)</view>
|
||
<view class="card-desc">通过数据统计与分析量化运营效果，优化营销策略，实现营销活动的标准化和数据化决策</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Functional Modules Section -->
|
||
<view class="section modules-section">
|
||
<view class="section-header">
|
||
<view class="section-title">五大核心功能模块</view>
|
||
<view class="section-desc">从数据概览到客户获取，从内容管理到多平台运营，全方位覆盖私域运营需求</view>
|
||
</view>
|
||
|
||
<view class="modules-grid">
|
||
<view class="module-card primary-border">
|
||
<view class="module-header">
|
||
<view class="module-icon primary-bg">📊</view>
|
||
<view class="module-title">数据概览</view>
|
||
</view>
|
||
<view class="module-desc">实时展示微信号总数、健康度、新增好友数等关键指标，提供运营全局概览和数据可视化分析</view>
|
||
</view>
|
||
|
||
<view class="module-card secondary-border">
|
||
<view class="module-header">
|
||
<view class="module-icon secondary-bg">🌐</view>
|
||
<view class="module-title">场景化获客</view>
|
||
</view>
|
||
<view class="module-desc">标准化多渠道获客入口配置，支持抖音、小红书、公众号、海报、付款码等多种获客场景</view>
|
||
</view>
|
||
|
||
<view class="module-card accent-border">
|
||
<view class="module-header">
|
||
<view class="module-icon accent-bg">🧠</view>
|
||
<view class="module-title">智能内容库</view>
|
||
</view>
|
||
<view class="module-desc">多源内容采集、智能分类标签、AI分析改写，提供内容集中管理和API接口开放能力</view>
|
||
</view>
|
||
|
||
<view class="module-card orange-border">
|
||
<view class="module-header">
|
||
<view class="module-icon orange-bg">⚡</view>
|
||
<view class="module-title">运营工作台</view>
|
||
</view>
|
||
<view class="module-desc">社交矩阵运营操作中心，支持多渠道内容推送、跨设备同步、智能优化建议和任务调度</view>
|
||
</view>
|
||
|
||
<view class="module-card red-border">
|
||
<view class="module-header">
|
||
<view class="module-icon red-bg">⚙️</view>
|
||
<view class="module-title">设备监控</view>
|
||
</view>
|
||
<view class="module-desc">实时监控设备状态、微信号健康度，支持微信号替换后的数据继承和异常预警机制</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Scenario Examples Section -->
|
||
<view class="section scenarios-section">
|
||
<view class="section-header">
|
||
<view class="section-title">应用场景示例</view>
|
||
<view class="section-desc">不同行业和业务场景下的实际应用案例</view>
|
||
</view>
|
||
|
||
<view class="scenarios-grid">
|
||
<view class="scenario-card">
|
||
<view class="scenario-badge">电商零售</view>
|
||
<view class="scenario-title">多平台流量整合</view>
|
||
<view class="scenario-desc">某服装品牌通过存客宝整合抖音、小红书、微信公众号等多平台流量，统一管理客户数据，通过场景化获客配置提升转化率30%，客户复购率提升45%。</view>
|
||
<view class="scenario-tags">
|
||
<text class="tag">抖音获客</text>
|
||
<text class="tag">内容分发</text>
|
||
<text class="tag">客户留存</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="scenario-card">
|
||
<view class="scenario-badge">教育培训</view>
|
||
<view class="scenario-title">智能内容运营</view>
|
||
<view class="scenario-desc">某在线教育机构利用AI内容改写功能，将课程内容智能适配不同平台特点，内容生产效率提升60%，学员互动率提升35%，课程转化率显著提升。</view>
|
||
<view class="scenario-tags">
|
||
<text class="tag">AI改写</text>
|
||
<text class="tag">多平台推送</text>
|
||
<text class="tag">数据分析</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- CTA Section -->
|
||
<view class="cta-section">
|
||
<view class="cta-content">
|
||
<view class="cta-title">开始您的私域运营之旅</view>
|
||
<view class="cta-desc">加入数千家企业的选择，用存客宝提升您的客户留存和运营效率</view>
|
||
|
||
<button class="cta-main-button" @click="showDialogBtn">
|
||
<text class="button-text" style='color:#333;'>立即体验</text>
|
||
<text class="arrow" style='color:#333;'>→</text>
|
||
</button>
|
||
|
||
<button class="cta-secondary-button" @click="goToSite">
|
||
<text class="button-text">访问老游条电竞学院</text>
|
||
<text class="arrow">→</text>
|
||
</button>
|
||
|
||
<view class="stats-grid">
|
||
<view class="stat-item">
|
||
<view class="stat-number">1000+</view>
|
||
<view class="stat-label">企业用户</view>
|
||
</view>
|
||
<view class="stat-item">
|
||
<view class="stat-number">50万+</view>
|
||
<view class="stat-label">管理客户</view>
|
||
</view>
|
||
<view class="stat-item">
|
||
<view class="stat-number">30%</view>
|
||
<view class="stat-label">转化提升</view>
|
||
</view>
|
||
<view class="stat-item">
|
||
<view class="stat-number">24/7</view>
|
||
<view class="stat-label">技术支持</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- Footer -->
|
||
<view class="footer">
|
||
<view class="footer-text">© {{currentYear}} 存客宝. 保留所有权利 | 遵循"事事有回应，件件有结果，日日精进"的服务理念</view>
|
||
</view>
|
||
|
||
<!-- 弹窗遮罩 -->
|
||
<view v-if="showDialog" class="dialog-overlay" @click="hideDialog">
|
||
<view class="dialog-content" @click.stop>
|
||
<view class="dialog-header">
|
||
<view class="dialog-title">申请体验存客宝</view>
|
||
<view class="dialog-desc">我们的客服团队将在24小时内为您创建专属体验账号，并提供一对一的产品演示和使用指导。</view>
|
||
</view>
|
||
|
||
<view class="dialog-form">
|
||
<view class="form-item">
|
||
<view class="form-label">手机号</view>
|
||
<input class="form-input" v-model="phoneNumber" placeholder="请输入手机号" type="number" maxlength="11" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="dialog-buttons">
|
||
<button class="dialog-button cancel-button" @click="hideDialog">取消</button>
|
||
<button class="dialog-button confirm-button" @click="confirmBtn">确认</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 成功提示 -->
|
||
<view v-if="showSuccessMessage" class="success-toast">
|
||
<text class="success-text">申请已提交</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
showDialog: false,
|
||
showSuccessMessage: false,
|
||
taskid: 127,
|
||
currentYear: new Date().getFullYear(),
|
||
phoneNumber: ''
|
||
}
|
||
},
|
||
methods: {
|
||
showDialogBtn() {
|
||
this.showDialog = true
|
||
},
|
||
hideDialog() {
|
||
this.showDialog = false
|
||
},
|
||
goToLogin() {
|
||
uni.navigateTo({
|
||
url: '/pages/login/login'
|
||
})
|
||
},
|
||
|
||
goToSite() {
|
||
uni.navigateTo({
|
||
url: '/pages/index/site'
|
||
})
|
||
},
|
||
|
||
confirmBtn() {
|
||
let that = this;
|
||
if (!this.phoneNumber) {
|
||
uni.showToast({
|
||
title: '请输入手机号',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}else{
|
||
uni.showLoading({
|
||
title: '请求中...',
|
||
mask: true
|
||
})
|
||
uni.request({
|
||
method: 'POST',
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
|
||
'token': that.token
|
||
},
|
||
url: that.$config.apiUrl2 + '/v1/frontend/business/poster/decryptphones',
|
||
data: {
|
||
id: that.taskid,
|
||
phone: this.phoneNumber
|
||
},
|
||
success: (res) => {
|
||
uni.hideLoading();
|
||
if (res.data.code == 200) {
|
||
this.showDialog = false
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '申请成功',
|
||
success: function(res) {
|
||
console.log(res)
|
||
}
|
||
})
|
||
this.showDialog = false
|
||
} else {
|
||
uni.showToast({
|
||
title: '申请失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
|
||
}
|
||
},
|
||
|
||
|
||
// 获取用户手机号
|
||
getPhoneNumber(res) {
|
||
let that = this;
|
||
if (res.detail.errMsg == "getPhoneNumber:ok") {
|
||
uni.showLoading({
|
||
title: '请求中...',
|
||
mask: true
|
||
})
|
||
uni.request({
|
||
method: 'POST',
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
|
||
'token': that.token
|
||
},
|
||
url: that.$config.apiUrl2 + '/v1/frontend/business/poster/decryptphone',
|
||
data: {
|
||
id: that.taskid,
|
||
code: res.detail.code
|
||
},
|
||
success: (res) => {
|
||
uni.hideLoading();
|
||
if (res.data.code == 10000) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: that.task.sTip,
|
||
success: function(res) {
|
||
console.log(res)
|
||
}
|
||
})
|
||
this.showDialog = false
|
||
} else {
|
||
uni.showToast({
|
||
title: res.data.message,
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container {
|
||
min-height: 100vh;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
/* Header Navigation */
|
||
.header-nav {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(10rpx);
|
||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
|
||
z-index: 1000;
|
||
}
|
||
|
||
.nav-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 32rpx;
|
||
height: 88rpx;
|
||
}
|
||
|
||
.nav-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #6366f1;
|
||
}
|
||
|
||
.nav-avatar {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
border: 2rpx solid #e5e7eb;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
/* Hero Section */
|
||
.hero-section {
|
||
margin-top: calc(88rpx + var(--status-bar-height));
|
||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, #ffffff 50%, rgba(168, 85, 247, 0.05) 100%);
|
||
padding: 80rpx 32rpx 120rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.hero-content {
|
||
max-width: 1200rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.badge {
|
||
display: inline-block;
|
||
background-color: rgba(99, 102, 241, 0.1);
|
||
color: #6366f1;
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 20rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.hero-title {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.title-main {
|
||
display: block;
|
||
font-size: 80rpx;
|
||
font-weight: bold;
|
||
color: #1f2937;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.title-sub {
|
||
display: block;
|
||
font-size: 64rpx;
|
||
font-weight: bold;
|
||
color: #6366f1;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.hero-desc {
|
||
font-size: 32rpx;
|
||
color: #6b7280;
|
||
line-height: 1.6;
|
||
max-width: 1000rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* CTA Button Section */
|
||
.cta-button-section {
|
||
padding: 64rpx 32rpx;
|
||
text-align: center;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
.cta-button {
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||
color: white;
|
||
border: none;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx 64rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 32rpx rgba(99, 102, 241, 0.3);
|
||
}
|
||
|
||
.button-text {
|
||
color: white;
|
||
}
|
||
|
||
.arrow {
|
||
margin-left: 16rpx;
|
||
color: white;
|
||
}
|
||
|
||
/* Section Styles */
|
||
.section {
|
||
padding: 120rpx 32rpx;
|
||
}
|
||
|
||
.values-section {
|
||
background-color: rgba(249, 250, 251, 0.5);
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 80rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 64rpx;
|
||
font-weight: bold;
|
||
color: #1f2937;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.section-desc {
|
||
font-size: 32rpx;
|
||
color: #6b7280;
|
||
line-height: 1.6;
|
||
max-width: 800rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Values Grid */
|
||
.values-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 48rpx;
|
||
}
|
||
|
||
.value-card {
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 48rpx 32rpx;
|
||
text-align: center;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.card-icon {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 24rpx;
|
||
font-size: 48rpx;
|
||
}
|
||
|
||
.users-icon {
|
||
background-color: rgba(99, 102, 241, 0.1);
|
||
}
|
||
|
||
.target-icon {
|
||
background-color: rgba(168, 85, 247, 0.1);
|
||
}
|
||
|
||
.chart-icon {
|
||
background-color: rgba(34, 197, 94, 0.1);
|
||
}
|
||
|
||
.card-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #1f2937;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 28rpx;
|
||
color: #6b7280;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Modules Grid */
|
||
.modules-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.module-card {
|
||
background: white;
|
||
border-radius: 12rpx;
|
||
padding: 32rpx;
|
||
border-left: 8rpx solid;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.primary-border { border-left-color: #6366f1; }
|
||
.secondary-border { border-left-color: #8b5cf6; }
|
||
.accent-border { border-left-color: #22c55e; }
|
||
.orange-border { border-left-color: #f97316; }
|
||
.red-border { border-left-color: #ef4444; }
|
||
|
||
.module-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.module-icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.primary-bg { background-color: rgba(99, 102, 241, 0.1); }
|
||
.secondary-bg { background-color: rgba(139, 92, 246, 0.1); }
|
||
.accent-bg { background-color: rgba(34, 197, 94, 0.1); }
|
||
.orange-bg { background-color: rgba(249, 115, 22, 0.1); }
|
||
.red-bg { background-color: rgba(239, 68, 68, 0.1); }
|
||
|
||
.module-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #1f2937;
|
||
}
|
||
|
||
.module-desc {
|
||
font-size: 26rpx;
|
||
color: #6b7280;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* Scenarios Section */
|
||
.scenarios-section {
|
||
background-color: rgba(249, 250, 251, 0.5);
|
||
}
|
||
|
||
.scenarios-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 48rpx;
|
||
}
|
||
|
||
.scenario-card {
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 48rpx 32rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.scenario-badge {
|
||
display: inline-block;
|
||
background-color: rgba(168, 85, 247, 0.1);
|
||
color: #8b5cf6;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 22rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.scenario-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #1f2937;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.scenario-desc {
|
||
font-size: 28rpx;
|
||
color: #6b7280;
|
||
line-height: 1.6;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.scenario-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.tag {
|
||
background-color: rgba(99, 102, 241, 0.1);
|
||
color: #6366f1;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
/* CTA Section */
|
||
.cta-section {
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||
padding: 120rpx 32rpx;
|
||
}
|
||
|
||
.cta-content {
|
||
text-align: center;
|
||
max-width: 1000rpx;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.cta-title {
|
||
font-size: 64rpx;
|
||
font-weight: bold;
|
||
color: white;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.cta-desc {
|
||
font-size: 32rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
line-height: 1.6;
|
||
margin-bottom: 64rpx;
|
||
}
|
||
|
||
.cta-main-button {
|
||
background: white;
|
||
color: #6366f1;
|
||
border: none;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx 64rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 32rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.cta-secondary-button {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.3);
|
||
border-radius: 12rpx;
|
||
padding: 20rpx 48rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 64rpx;
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
|
||
.cta-secondary-button .button-text {
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.cta-secondary-button .arrow {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.stat-item {
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: white;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
|
||
/* Footer */
|
||
.footer {
|
||
padding: 64rpx 32rpx;
|
||
background-color: #f9fafb;
|
||
}
|
||
|
||
.footer-text {
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #6b7280;
|
||
}
|
||
|
||
/* Dialog Overlay */
|
||
.dialog-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9998;
|
||
padding: 32rpx;
|
||
}
|
||
|
||
/* Dialog Styles */
|
||
.dialog-content {
|
||
background: white;
|
||
border-radius: 16rpx;
|
||
padding: 48rpx 32rpx;
|
||
max-width: 600rpx;
|
||
width: 100%;
|
||
box-shadow: 0 16rpx 64rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.dialog-header {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.dialog-form {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 28rpx;
|
||
color: #374151;
|
||
margin-bottom: 12rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
border: 2rpx solid #e5e7eb;
|
||
border-radius: 8rpx;
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
color: #1f2937;
|
||
background-color: #ffffff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-input:focus {
|
||
border-color: #6366f1;
|
||
outline: none;
|
||
}
|
||
|
||
.dialog-title {
|
||
font-size: 40rpx;
|
||
font-weight: bold;
|
||
color: #1f2937;
|
||
margin-bottom: 16rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.dialog-desc {
|
||
font-size: 28rpx;
|
||
color: #6b7280;
|
||
line-height: 1.6;
|
||
text-align: center;
|
||
}
|
||
|
||
.dialog-buttons {
|
||
display: flex;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.dialog-button {
|
||
flex: 1;
|
||
padding: 24rpx;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
border: none;
|
||
}
|
||
|
||
.cancel-button {
|
||
background: transparent;
|
||
color: #6b7280;
|
||
border: 2rpx solid #e5e7eb;
|
||
}
|
||
|
||
.confirm-button {
|
||
background: #6366f1;
|
||
color: white;
|
||
}
|
||
|
||
/* Success Toast */
|
||
.success-toast {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background: rgba(34, 197, 94, 0.9);
|
||
color: white;
|
||
padding: 32rpx 48rpx;
|
||
border-radius: 16rpx;
|
||
z-index: 9999;
|
||
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.success-text {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: white;
|
||
}
|
||
|
||
/* 响应式适配 */
|
||
@media (min-width: 768rpx) {
|
||
.values-grid,
|
||
.scenarios-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 48rpx;
|
||
}
|
||
|
||
.modules-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 32rpx;
|
||
}
|
||
|
||
.stats-grid {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024rpx) {
|
||
.values-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
|
||
.modules-grid {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
}
|
||
}
|
||
</style>
|